DEB-213: Mis calculated the default, changed from 23 to 25 px.

Fixed bug that prevented row saturation

src/data-table/data-cell.jsx

@@ -59,7 +59,10 @@ class DataCell extends React.PureComponent {
       const isValidConditionalColoringValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
       const isSpecifiedRow =
         conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
-      const shouldHaveConditionalColoring = conditionalColoring.colorAllRows || isSpecifiedRow;
+      const isSpecifiedMeasure =
+        conditionalColoring.measures.indexOf(measurement.parents.measurement.index) !== -1;
+      const shouldHaveConditionalColoring = (conditionalColoring.colorAllRows || isSpecifiedRow)
+        && (conditionalColoring.colorAllMeasures || isSpecifiedMeasure);
       if (isValidConditionalColoringValue && shouldHaveConditionalColoring) {
         const { color, textColor } = getConditionalColor(measurement, conditionalColoring);
         cellStyle.backgroundColor = color.color;

src/definition/conditional-coloring.js

@@ -61,6 +61,36 @@ const conditionalColoring = {
         return data.conditionalcoloring.enabled && !data.conditionalcoloring.colorall;
       }
     },
+    ColorAllMeasures: {
+      ref: 'conditionalcoloring.colorallmeasures',
+      type: 'boolean',
+      label: 'Color all measures',
+      component: 'switch',
+      defaultValue: true,
+      options: [
+        {
+          value: true,
+          label: 'All measures'
+        },
+        {
+          value: false,
+          label: 'Specified measures'
+        }
+      ],
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    Measures: {
+      ref: 'conditionalcoloring.measures',
+      translation: 'Measure indices (ex: 0,3)',
+      type: 'string',
+      defaultValue: '',
+      show (data) {
+        return data.conditionalcoloring.enabled
+          && data.conditionalcoloring.colorallmeasures === false;
+      }
+    },
     ThresholdPoor: {
       ref: 'conditionalcoloring.threshold_poor',
       translation: 'Poor is less than',

src/headers-table/column-header.jsx

@@ -22,7 +22,7 @@ class ColumnHeader extends React.PureComponent {
     const style = {
       ...baseCSS,
       fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '45px' : '35px',
+      height: isMediumFontSize ? '43px' : '33px',
       verticalAlign: 'middle'
     };
 

src/headers-table/index.jsx

@@ -77,7 +77,7 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
               );
             })}
           </tr>
-          {hasSecondDimension && (
+          {!isKpi && hasSecondDimension && (
             <tr>
               {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => {
                 if (dimensionEntry.isSeparator) {

src/headers-table/measurement-column-header.jsx

@@ -18,7 +18,6 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     }
     const cellStyle = {
       ...baseCSS,
-      cursor: 'default',
       fontSize: `${baseFontSize + fontSizeAdjustment}px`,
       height: isMediumFontSize ? '45px' : '35px',
       verticalAlign: 'middle'
@@ -40,7 +39,6 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
 
   const style = {
     ...baseCSS,
-    cursor: 'default',
     fontSize: `${15 + fontSizeAdjustment}px`,
     height: isMediumFontSize ? '90px' : '70px',
     verticalAlign: 'middle'

src/initialize-transformed.js

@@ -90,7 +90,8 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
         header: dimension1Information.qText
       },
       measurement: {
-        header: measurementInformation.name
+        header: measurementInformation.name,
+        index: measurementInformation.index
       }
     },
     value: cell.qNum
@@ -130,6 +131,7 @@ function generateDataSet (
       .slice(firstDataCell, row.length)
       .map((cell, cellIndex) => {
         const measurementInformation = measurements[cellIndex];
+        measurementInformation.index = cellIndex;
         const dimension1Information = row[0]; // eslint-disable-line prefer-destructuring
         const dimension2Information = hasSecondDimension ? row[1] : null;
         const generatedCell = generateMatrixCell({
@@ -161,7 +163,7 @@ function generateDataSet (
 
   // Make sure all rows are saturated, otherwise data risks being displayed in the wrong column
   matrix = matrix.map((row, rowIndex) => {
-    if ((hasSecondDimension && row.length == dimension2.length)
+    if ((hasSecondDimension && row.length == (dimension2.length * measurements.length))
       || (!hasSecondDimension && row.length == measurements.length)) {
       // Row is saturated
       return row;
@@ -201,7 +203,7 @@ function appendMissingCells (
   sourceRow, destRow, sourceIndex, measurements, dim1ElementNumber, dim2ElementNumber = -1) {
 
   let index = sourceIndex;
-  measurements.forEach(measurement => {
+  measurements.forEach((measurement, measureIndex) => {
     if (index < sourceRow.length
       && (dim2ElementNumber === -1
         || sourceRow[index].parents.dimension2.elementNumber === dim2ElementNumber)
@@ -216,7 +218,10 @@ function appendMissingCells (
         parents: {
           dimension1: { elementNumber: dim1ElementNumber },
           dimension2: { elementNumber: dim2ElementNumber },
-          measurement: { header: measurement.name }
+          measurement: {
+            header: measurement.name,
+            index: measureIndex
+          }
         }
       });
     }
@@ -309,6 +314,10 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
         enabled: layout.conditionalcoloring.enabled,
         colorAllRows: layout.conditionalcoloring.colorall,
         rows: layout.conditionalcoloring.rows.map(row => row.rowname),
+        colorAllMeasures: typeof layout.conditionalcoloring.colorallmeasures === 'undefined'
+          || layout.conditionalcoloring.colorallmeasures,
+        measures: !layout.conditionalcoloring.measures
+          ? [] : layout.conditionalcoloring.measures.split(',').map(index => Number(index)),
         threshold: {
           poor: layout.conditionalcoloring.threshold_poor,
           fair: layout.conditionalcoloring.threshold_fair

src/main.less

@@ -37,6 +37,10 @@
     width: auto;
   }
 
+  tr {
+    height: 25px;
+  }
+  
   td,
   th {
     padding: 5px !important; // prevent overwriting from single object
@@ -139,12 +143,7 @@
     background-color: #fff;
   }
 
-  .fdim-cells:hover {
-    background-color: #808080 !important;
-    color: #fff;
-  }
-
-  tbody tr:hover {
+  tbody tr:hover td {
     cursor: default;
     background-color: #808080 !important;
     color: #fff;
@@ -171,29 +170,50 @@
     border: groove;
   }
 
+  .root {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    height: 100%;
+    width: 100%;
+  }
+
   .kpi-table .fdim-cells,
   .data-table td {
     line-height: 1em !important;
   }
 
   .kpi-table {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    flex: none;
     width: @KpiTableWidth !important;
-    overflow: hidden !important;
-    height: 100%;
     margin: 0;
     padding: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-right: 1px solid #fff;
-    box-shadow: 4px 2px 8px #e1e1e1;
+
+    .header-wrapper {
+      flex: none;
+      box-shadow: 4px 2px 8px #e1e1e1;
+    }
 
     .row-wrapper {
-      height: calc(~"100% - 92px");
       overflow: scroll;
-      position: absolute;
+      margin: 0;
+      margin-bottom: 8px;
       padding: 0;
-      margin-top: 0;
+      box-shadow: 4px 2px 8px #e1e1e1;
+      min-height: 0; /* This is to make flex size-filling work */
+
+      /* Adapt for Edge */
+      @supports (-ms-ime-align: auto) {
+        margin-bottom: 16px;
+      }
+
+      /* Adapt for IE11 */
+      @media screen and (-ms-high-contrast: none) {
+        margin-bottom: 16px;
+      }
     }
   }
 
@@ -202,34 +222,50 @@
   }
 
   .data-table {
-    height: 100%;
-    width: calc(100% - 243px);
-    position: absolute;
-    margin-left: @KpiTableWidth + 13px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    margin-left: 13px;
+    min-width: 0; /* This is to make flex size-filling work */
 
     .header-wrapper {
+      flex: none;
       overflow: scroll;
-      width: 100%;
+      margin-right: 8px;
     }
 
     .row-wrapper {
-      height: calc(~"100% - 92px");
-      width: 100%;
-      overflow: auto;
+      overflow: scroll;
+      margin: 0;
       padding: 0;
-      margin-top: 0;
+      min-height: 0; /* This is to make flex size-filling work */
+
+      /* Style scrollbar for FF */
+      scrollbar-width: thin;
+      scrollbar-color: #d3d3d3 transparent;
     }
 
-    // Use overlay-scrollbars for webkit-browsers
-    @media screen and (-webkit-min-device-pixel-ratio: 0) {
-      .row-wrapper {
-        overflow: overlay;
+    /* Adapt for Edge */
+    @supports (-ms-ime-align: auto) {
+      .header-wrapper {
+        margin-right: 16px;
+      }
+    }
+
+    /* Adapt for IE11 */
+    @media screen and (-ms-high-contrast: none) {
+      width: 100%;
+      height: 100%;
+
+      .header-wrapper {
+        margin-right: 16px;
       }
     }
   }
 
   // hide scrollbars
   .kpi-table .header-wrapper,
+  .kpi-table .row-wrapper,
   .data-table .header-wrapper {
     // stylelint-disable-next-line property-no-unknown 
     scrollbar-width: none;

src/root.jsx

@@ -5,48 +5,50 @@ import DataTable from './data-table/index.jsx';
 import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
 
 const Root = ({ state, qlik, editmodeClass }) => (
-  <LinkedScrollWrapper>
-    <div className={`kpi-table ${editmodeClass}`}>
-      <HeadersTable
-        data={state.data}
-        general={state.general}
-        isKpi
-        qlik={qlik}
-        styling={state.styling}
-      />
-      <LinkedScrollSection linkVertical>
-        <DataTable
-          data={state.data}
-          general={state.general}
-          qlik={qlik}
-          renderData={false}
-          styling={state.styling}
-        />
-      </LinkedScrollSection>
-    </div>
-    <div className={`data-table ${editmodeClass}`}>
-      <LinkedScrollSection linkHorizontal>
+  <div className="root">
+    <LinkedScrollWrapper>
+      <div className={`kpi-table ${editmodeClass}`}>
         <HeadersTable
           data={state.data}
           general={state.general}
-          isKpi={false}
+          isKpi
           qlik={qlik}
           styling={state.styling}
         />
-      </LinkedScrollSection>
-      <LinkedScrollSection
-        linkHorizontal
-        linkVertical
-      >
-        <DataTable
-          data={state.data}
-          general={state.general}
-          qlik={qlik}
-          styling={state.styling}
-        />
-      </LinkedScrollSection>
-    </div>
-  </LinkedScrollWrapper>
+        <LinkedScrollSection linkVertical>
+          <DataTable
+            data={state.data}
+            general={state.general}
+            qlik={qlik}
+            renderData={false}
+            styling={state.styling}
+          />
+        </LinkedScrollSection>
+      </div>
+      <div className={`data-table ${editmodeClass}`}>
+        <LinkedScrollSection linkHorizontal>
+          <HeadersTable
+            data={state.data}
+            general={state.general}
+            isKpi={false}
+            qlik={qlik}
+            styling={state.styling}
+          />
+        </LinkedScrollSection>
+        <LinkedScrollSection
+          linkHorizontal
+          linkVertical
+        >
+          <DataTable
+            data={state.data}
+            general={state.general}
+            qlik={qlik}
+            styling={state.styling}
+          />
+        </LinkedScrollSection>
+      </div>
+    </LinkedScrollWrapper>
+  </div>
 );
 
 Root.propTypes = {

stylelint.config.js

@@ -84,7 +84,7 @@ module.exports = {
     'indentation': 2,
     'length-zero-no-unit': true,
     'max-empty-lines': 1,
-    'max-nesting-depth': 3,
+    'max-nesting-depth': 5,
     'media-feature-colon-space-after': 'always',
     'media-feature-colon-space-before': 'never',
     'media-feature-name-case': 'lower',