Changed order of properties and added About

Issue: DEB-159

src/data-table/data-cell.jsx

@@ -33,26 +33,24 @@ class DataCell extends React.PureComponent {
       styling
     } = this.props;
 
-    let textAlignment = styling.options.textAlignment || 'Right';
+    const isColumnPercentageBased = (/%/).test(measurement.format);
+    let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
+    if (styleBuilder.hasComments()) {
+      formattedMeasurementValue = '.';
+    }
+    let textAlignment = 'Right';
+    const textAlignmentProp = styling.options.textAlignment;
+    if (textAlignmentProp) {
+      textAlignment = textAlignmentProp;
+    }
 
     let cellStyle = {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
       textAlign: textAlignment
-    };
 
-    const isEmptyCell = measurement.displayValue === '';
-    const isColumnPercentageBased = (/%/).test(measurement.format);
-    let formattedMeasurementValue;
-    if (isEmptyCell) {
-      formattedMeasurementValue = '';
-      cellStyle.cursor = 'default';
-    } else if (styleBuilder.hasComments()) {
-      formattedMeasurementValue = '.';
-    } else {
-      formattedMeasurementValue = formatMeasurementValue(measurement, styling);
-    }
+    };
 
     const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
     const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
@@ -81,7 +79,7 @@ class DataCell extends React.PureComponent {
     return (
       <td
         className={`${cellClass}${general.cellSuffix}`}
-        onClick={isEmptyCell ? null : this.handleSelect}
+        onClick={this.handleSelect}
         style={cellStyle}
       >
         <Tooltip

src/data-table/index.jsx

@@ -69,7 +69,6 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
                       </td>
                     );
                   }
-
                   const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
                   const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
                   return (

src/definition/index.js

@@ -18,6 +18,9 @@ const definition = {
       },
       uses: 'data'
     },
+    sorting: {
+      uses: 'sorting'
+    },
     settings: {
       items: {
         ConceptSemaphores: conceptSemaphores,
@@ -28,8 +31,25 @@ const definition = {
       },
       uses: 'settings'
     },
-    sorting: {
-      uses: 'sorting'
+    about: {
+      component: 'items',
+      label: 'About',
+      items: {
+        header: {
+          label: 'P&L pivot',
+          style: 'header',
+          component: 'text'
+        },
+        paragraph1: {
+          label: `P&L pivot is a Qlik Sense extension which allows you to display Profit & Loss
+            reporting with color and font customizations.`,
+          component: 'text'
+        },
+        paragraph2: {
+          label: 'P&L pivot is based upon an extension created by Ivan Felipe Asensio.',
+          component: 'text'
+        }
+      }
     }
   },
   type: 'items'

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

@@ -50,7 +50,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
   };
   return (
     <th
-      className={`grid-cells2${general.cellSuffix}`}
+      className={`grid-cells2 ${general.cellSuffix}`}
       style={style}
     >
       <span

src/index.js

@@ -20,16 +20,12 @@ export default {
   },
   data: {
     dimensions: {
-      max: function (nMeasures) {
-        return nMeasures < 9 ? 2 : 1;
-      },
+      max: 3,
       min: 1,
       uses: 'dimensions'
     },
     measures: {
-      max: function (nDims) {
-        return nDims < 2 ? 9 : 8;
-      },
+      max: 8,
       min: 1,
       uses: 'measures'
     }

src/initialize-transformed.js

@@ -108,11 +108,12 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 
 let lastRow = 0;
 function generateDataSet (component, dimensionsInformation, measurementsInformation, cubes) {
-  let dimension1 = [];
-  let dimension2 = [];
+  const dimension1 = [];
+  const dimension2 = [];
   const measurements = generateMeasurements(measurementsInformation);
   let matrix = [];
 
+  let previousDim1Entry;
   const hasDesignDimension = cubes.design;
   const hasSecondDimension = hasDesignDimension ? dimensionsInformation.length > 2 : dimensionsInformation.length > 1;
   cubes.data.forEach(row => {
@@ -126,7 +127,7 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
       dimension2.push(dimension2Entry);
       firstDataCell = 2;
     }
-    let matrixRow = row
+    const matrixRow = row
       .slice(firstDataCell, row.length)
       .map((cell, cellIndex) => {
         const measurementInformation = measurements[cellIndex];
@@ -142,59 +143,30 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
         return generatedCell;
       });
 
-    let appendToRowIndex = matrix.length;
     if (hasSecondDimension) {
-      // See if there already is a row for the current dim1
-      for (let i = 0; i < matrix.length; i++) {
-        if (matrix[i][0].parents.dimension1.header === matrixRow[0].parents.dimension1.header) {
-          appendToRowIndex = i;
-          matrixRow = matrix[i].concat(matrixRow);
-        }
+      const currentDim1Entry = row[0].qText;
+      const isSameDimension1AsPrevious = currentDim1Entry === previousDim1Entry;
+      if (isSameDimension1AsPrevious) {
+        const updatedRow = matrix[matrix.length - 1].concat(matrixRow);
+
+        matrix = [
+          ...matrix.slice(0, matrix.length - 1),
+          updatedRow
+        ];
+      } else {
+        matrix[matrix.length] = matrixRow;
       }
+      previousDim1Entry = currentDim1Entry;
+    } else {
+      matrix[matrix.length] = matrixRow;
     }
-    matrix[appendToRowIndex] = matrixRow;
   });
 
   // filter header dimensions to only have distinct values
-  dimension1 = distinctArray(dimension1);
-  dimension2 = distinctArray(dimension2);
-
-  // Make sure all rows are saturated, otherwise data risks being displayed in the wrong column
-  matrix = matrix.map((row, rowIndex) => {
-    if (row.length == dimension2.length) {
-      // Row is saturated
-      return row;
-    }
-
-    // Row is not saturated, so must add empty cells to fill the gaps
-    let newRow = [];
-    let cellIndex = 0;
-    dimension2.forEach(dim => {
-      measurements.forEach(measurement => {
-        if (cellIndex < row.length
-          && row[cellIndex].parents.dimension2.elementNumber === dim.elementNumber
-          && row[cellIndex].parents.measurement.header === measurement.name) {
-          newRow.push(row[cellIndex]);
-          cellIndex++;
-        } else {
-          newRow.push({
-            displayValue: '',
-            parents: {
-              dimension1: { elementNumber: rowIndex },
-              dimension2: { elementNumber: dim.elementNumber },
-              measurement: { header: measurement.name }
-            }
-          });
-        }
-      });
-    });
-
-    return newRow;
-  });
 
   return {
-    dimension1: dimension1,
-    dimension2: dimension2,
+    dimension1: distinctArray(dimension1),
+    dimension2: distinctArray(dimension2),
     matrix,
     measurements
   };