Changed the rendering of each data cell to check for the headers of each dimesnsion and measure where it shall be written.

Conversion led to different sort orders of data in different objects …

.circleci/config.yml

@@ -20,7 +20,7 @@ jobs:
           command: npm install
       - run:
           name: BlackDuck scan
-          command: curl -s https://blackducksoftware.github.io/hub-detect/hub-detect.sh | bash -s -- \
+          command: curl -s https://detect.synopsys.com/detect.sh | bash -s -- \
             --blackduck.url="https://qliktech.blackducksoftware.com" \
             --blackduck.trust.cert=true \
             --blackduck.username="svc-blackduck" \

src/data-table/data-cell.jsx

@@ -9,22 +9,33 @@ class DataCell extends React.PureComponent {
   }
 
   handleSelect () {
-    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
+    const {
+      data: {
+        meta: {
+          dimensionCount
+        }
+      },
+      general: {
+        allowFilteringByClick
+      },
+      measurement,
+      component
+    } = this.props;
+
     const hasSecondDimension = dimensionCount > 1;
     if (!allowFilteringByClick) {
       return;
     }
 
-    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
+    component.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], false);
-
     if (hasSecondDimension) {
-      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
+      component.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], false);
     }
   }
 
   render () {
     const {
-      general,
+      cellWidth,
       measurement,
       styleBuilder,
       styling
@@ -37,17 +48,15 @@ class DataCell extends React.PureComponent {
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
       textAlign: textAlignment,
-      minWidth: general.cellWidth,
+      minWidth: cellWidth,
-      maxWidth: general.cellWidth
+      maxWidth: cellWidth
     };
 
     const isEmptyCell = measurement.displayValue === '';
     let formattedMeasurementValue;
-    if (isEmptyCell) {
+    if (isEmptyCell || styleBuilder.hasComments()) {
       formattedMeasurementValue = '';
       cellStyle.cursor = 'default';
-    } else if (styleBuilder.hasComments()) {
-      formattedMeasurementValue = '.';
     } else {
       formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     }
@@ -86,20 +95,22 @@ class DataCell extends React.PureComponent {
 }
 
 DataCell.propTypes = {
+  cellWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
       measurements: PropTypes.array.isRequired
+    }).isRequired,
+    meta: PropTypes.shape({
+      dimensionCount: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
-  general: PropTypes.shape({
+  general: PropTypes.shape({}).isRequired,
-    cellWidth: PropTypes.string.isRequired
-  }).isRequired,
   measurement: PropTypes.shape({
     format: PropTypes.string,
     name: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
-  qlik: PropTypes.shape({
+  component: PropTypes.shape({
     backendApi: PropTypes.shape({
       selectValues: function (props, propName) {
         if (props.isSnapshot || typeof props[propName] === 'function') {

src/data-table/index.jsx

@@ -5,101 +5,143 @@ import DataCell from './data-cell.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const DataTable = ({ data, general, qlik, renderData, styling }) => {
+// eslint-disable-next-line react/prefer-stateless-function
-  const {
+class DataTable extends React.PureComponent {
-    headers: {
+  render () {
-      dimension1,
+    const {
-      measurements
+      cellWidth,
-    },
+      columnSeparatorWidth,
-    matrix
+      component,
-  } = data;
+      data,
+      general,
+      renderData,
+      styling
+    } = this.props;
 
-  return (
+    const {
-    <div className="row-wrapper">
+      headers: {
-      <table>
+        dimension1,
-        <tbody>
+        dimension2,
-          {dimension1.map((dimensionEntry, dimensionIndex) => {
+        measurements
-            const rowHeaderText = dimensionEntry.displayValue || '';
+      },
-            if (rowHeaderText === '-') {
+      matrix
-              return null;
+    } = data;
-            }
-            const styleBuilder = new StyleBuilder(styling);
-            if (styling.hasCustomFileStyle) {
-              styleBuilder.parseCustomFileStyle(rowHeaderText);
-            } else {
-              styleBuilder.applyStandardAttributes(dimensionIndex);
-              styleBuilder.applyCustomStyle({
-                fontSize: `${14 + styling.options.fontSizeAdjustment}px`
-              });
-            }
-            const rowStyle = {
-              fontFamily: styling.options.fontFamily,
-              width: '230px',
-              ...styleBuilder.getStyle()
-            };
 
-            return (
+    const separatorStyle = {
-              <tr key={dimensionEntry.displayValue}>
+      minWidth: columnSeparatorWidth,
-                {!renderData ?
+      maxWidth: columnSeparatorWidth
-                  <RowHeader
+    };
-                    entry={dimensionEntry}
+
-                    qlik={qlik}
+    const renderMeasurementData = (dimIndex, atEvery) => {
-                    rowStyle={rowStyle}
+      const injectSeparatorsArray = injectSeparators(
-                    styleBuilder={styleBuilder}
+        matrix[dimIndex],
-                    styling={styling}
+        columnSeparatorWidth,
-                  /> : null
+        atEvery
+      );
+
+      if (dimension2.length <= 0) {
+        return injectSeparatorsArray;
+      }
+
+      let measurementDataRow = [],
+        index = 0;
+      dimension2.forEach((dim2) => {
+        measurements.forEach((measure) => {
+          for (index = 0; index < injectSeparatorsArray.length; index++) {
+            if (dimension1[dimIndex].displayValue === injectSeparatorsArray[index].parents.dimension1.header) {
+              if (dim2.displayValue === injectSeparatorsArray[index].parents.dimension2.header) {
+                if (measure.name === injectSeparatorsArray[index].parents.measurement.header) {
+                  measurementDataRow.push(injectSeparatorsArray[index]);
+                  break;
                 }
-                {renderData && injectSeparators(
+              }
-                  matrix[dimensionIndex],
+            }
-                  styling.useSeparatorColumns,
+          }
-                  { atEvery: measurements.length }
+        });
-                ).map((measurementData, index) => {
+      });
-                  if (measurementData.isSeparator) {
+      return measurementDataRow;
-                    const separatorStyle = {
+    };
-                      color: 'white',
-                      fontFamily: styling.options.fontFamily,
-                      fontSize: `${12 + styling.options.fontSizeAdjustment}px`
-                    };
 
-                    return (
+    return (
-                      <td
+      <div className="row-wrapper">
-                        className="empty"
+        <table>
-                        key={`${dimensionEntry.displayValue}-${index}-separator`}
+          <tbody>
-                        style={separatorStyle}
+            {dimension1.map((dimensionEntry, dimensionIndex) => {
-                      >
+              const rowHeaderText = dimensionEntry.displayValue || '';
-                        *
+              if (rowHeaderText === '-') {
-                      </td>
+                return null;
-                    );
+              }
-                  }
+              const styleBuilder = new StyleBuilder(styling);
+              if (styling.hasCustomFileStyle) {
+                styleBuilder.parseCustomFileStyle(rowHeaderText);
+              } else {
+                styleBuilder.applyStandardAttributes(dimensionIndex);
+                styleBuilder.applyCustomStyle({
+                  fontSize: `${14 + styling.options.fontSizeAdjustment}px`
+                });
+              }
+              const rowStyle = {
+                fontFamily: styling.options.fontFamily,
+                width: '230px',
+                ...styleBuilder.getStyle()
+              };
 
-                  const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
+              return (
-                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
+                <tr key={dimensionEntry.displayValue}>
-                  return (
+                  {!renderData ?
-                    <DataCell
+                    <RowHeader
-                      data={data}
+                      component={component}
-                      general={general}
+                      entry={dimensionEntry}
-                      key={`${dimensionEntry.displayValue}-${id}`}
+                      rowStyle={rowStyle}
-                      measurement={measurementData}
-                      qlik={qlik}
                       styleBuilder={styleBuilder}
                       styling={styling}
-                    />
+                    /> : null
-                  );
+                  }
-                })}
+                  {renderData && renderMeasurementData(dimensionIndex, { atEvery: measurements.length }).map((measurementData, index) => {
-              </tr>
+                    if (measurementData.isSeparator) {
-            );
+                      return (
-          })}
+                        <td
-        </tbody>
+                          className="empty"
-      </table>
+                          key={`${dimensionEntry.displayValue}-${index}-separator`}
-    </div>
+                          style={separatorStyle}
-  );
+                        />
-};
+                      );
+                    }
+
+                    // eslint-disable-next-line no-shadow
+                    const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
+                    const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}-${measurement.index}`;
+                    return (
+                      <DataCell
+                        cellWidth={cellWidth}
+                        component={component}
+                        data={data}
+                        general={general}
+                        key={`${dimensionEntry.displayValue}-${id}`}
+                        measurement={measurementData}
+                        styleBuilder={styleBuilder}
+                        styling={styling}
+                      />
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
 
 DataTable.defaultProps = {
   renderData: true
 };
 
 DataTable.propTypes = {
+  cellWidth: PropTypes.string.isRequired,
+  columnSeparatorWidth: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
       dimension1: PropTypes.array.isRequired
@@ -107,7 +149,6 @@ DataTable.propTypes = {
     matrix: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired
   }).isRequired,
   general: PropTypes.shape({}).isRequired,
-  qlik: PropTypes.shape({}).isRequired,
   renderData: PropTypes.bool,
   styling: PropTypes.shape({
     hasCustomFileStyle: PropTypes.bool.isRequired

src/data-table/row-header.jsx

@@ -11,13 +11,13 @@ class RowHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, qlik } = this.props;
+    const { component, entry } = this.props;
-    qlik.backendApi.selectValues(0, [entry.elementNumber], true);
+    component.backendApi.selectValues(0, [entry.elementNumber], false);
   }
 
   render () {
-    const { entry, rowStyle, styleBuilder, styling, qlik } = this.props;
+    const { entry, rowStyle, styleBuilder, styling, component } = this.props;
-    const inEditState = qlik.inEditState();
+    const inEditState = component.inEditState();
 
     return (
       <td
@@ -43,9 +43,10 @@ class RowHeader extends React.PureComponent {
 
 RowHeader.propTypes = {
   entry: PropTypes.shape({
-    displayValue: PropTypes.string.isRequired
+    displayValue: PropTypes.string.isRequired,
+    elementNumber: PropTypes.number.isRequired
   }).isRequired,
-  qlik: PropTypes.shape({
+  component: PropTypes.shape({
     backendApi: PropTypes.shape({
       selectValues: function (props, propName) {
         if (props.isSnapshot || typeof props[propName] === 'function') {

src/dataset.js

@@ -6,23 +6,25 @@ function createCube (definition, app) {
   });
 }
 
-async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
+async function buildDataCube (originCubeDefinition, originCube, app) {
   const cubeDefinition = {
     ...originCubeDefinition,
     qInitialDataFetch: [
       {
-        qHeight: 1000,
+        qHeight: originCube.qSize.qcy,
-        qWidth: 10
+        qWidth: originCube.qSize.qcx
       }
     ],
     qDimensions: [originCubeDefinition.qDimensions[0]],
     qMeasures: originCubeDefinition.qMeasures
   };
-  if (hasTwoDimensions) {
+  if (originCube.qDimensionInfo.length === 2) {
     cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[1]);
   }
   const cube = await createCube(cubeDefinition, app);
-  return cube.qHyperCube.qDataPages[0].qMatrix;
+  const cubeMatrix = cube.qHyperCube.qDataPages[0].qMatrix;
+  app.destroySessionObject(cube.qInfo.qId);
+  return cubeMatrix;
 }
 
 export async function initializeDataCube (component, layout) {
@@ -34,11 +36,13 @@ export async function initializeDataCube (component, layout) {
   const properties = (await component.backendApi.getProperties());
 
   // If this is a master object, fetch the hyperCubeDef of the original object
-  const hyperCubeDef = properties.qExtendsId
+  let hyperCubeDef = properties.qExtendsId
     ? (await app.getObjectProperties(properties.qExtendsId)).properties.qHyperCubeDef
     : properties.qHyperCubeDef;
+  hyperCubeDef = JSON.parse(JSON.stringify(hyperCubeDef));
+  hyperCubeDef.qStateName = layout.qStateName;
 
-  return buildDataCube(hyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
+  return buildDataCube(hyperCubeDef, layout.qHyperCube, app);
 }
 
 export function initializeDesignList (component, layout) {

src/definition/index.js

@@ -39,7 +39,7 @@ const definition = {
           component: 'text'
         },
         paragraph1: {
-          label: `P&L pivot is a Qlik Sense extension which allows you to display Profit & Loss
+          label: `P&L pivot is a Qlik Sense chart which allows you to display Profit & Loss
             reporting with color and font customizations.`,
           component: 'text'
         },

src/definition/table-format.js

@@ -209,6 +209,23 @@ const tableFormat = {
       ],
       defaultValue: 'right'
     },
+    FitChartWidth: {
+      ref: 'fitchartwidth',
+      type: 'boolean',
+      component: 'switch',
+      label: 'Fill chart width',
+      options: [
+        {
+          value: true,
+          label: 'On'
+        },
+        {
+          value: false,
+          label: 'Off'
+        }
+      ],
+      defaultValue: false
+    },
     ColumnWidthSlider: {
       type: 'number',
       component: 'slider',
@@ -217,7 +234,8 @@ const tableFormat = {
       min: 20,
       max: 250,
       step: 10,
-      defaultValue: 50
+      defaultValue: 50,
+      show: data => !data.fitchartwidth
     },
     SymbolForNulls: {
       ref: 'symbolfornulls',

src/excel-export.js

@@ -7,13 +7,12 @@ function cleanupNodes (node) {
   });
 }
 
-function buildTableHTML (id, title, subtitle, footnote) {
+function buildTableHTML (containerElement, title, subtitle, footnote) {
   const titleHTML = `<p style="font-size:15pt"><b>${title}</b></p>`;
   const subtitleHTML = `<p style="font-size:11pt">${subtitle}</p>`;
   const footnoteHTML = `<p style="font-size:11pt">${footnote}</p>`;
-  const container = document.querySelector(`[tid="${id}"]`);
+  const kpiTableClone = containerElement[0].querySelector('.kpi-table').cloneNode(true);
-  const kpiTableClone = container.querySelector('.kpi-table').cloneNode(true);
+  const dataTableClone = containerElement[0].querySelector('.data-table').cloneNode(true);
-  const dataTableClone = container.querySelector('.data-table').cloneNode(true);
   cleanupNodes(kpiTableClone);
   cleanupNodes(kpiTableClone);
 
@@ -83,7 +82,7 @@ function buildTableHTML (id, title, subtitle, footnote) {
 
 function downloadXLS (html) {
   const filename = 'analysis.xls';
-  const blobObject = new Blob([html]);
+  const blobObject = new Blob([html], { type: 'application/vnd.ms-excel' });
 
   // IE/Edge
   if (window.navigator.msSaveOrOpenBlob) {
@@ -100,8 +99,8 @@ function downloadXLS (html) {
   return true;
 }
 
-export function exportXLS (id, title, subtitle, footnote) {
+export function exportXLS (containerElement, title, subtitle, footnote) {
   // original was removing icon when starting export, disable and some spinner instead, shouldn't take enough time to warrant either..?
-  const table = buildTableHTML(id, title, subtitle, footnote);
+  const table = buildTableHTML(containerElement, title, subtitle, footnote);
   downloadXLS(table);
 }

src/export-button.jsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { exportXLS } from './excel-export';
-
-class ExportButton extends React.PureComponent {
-  constructor (props) {
-    super(props);
-    this.handleExport = this.handleExport.bind(this);
-  }
-
-  handleExport () {
-    const { id, excelExport, general } = this.props;
-    const { title, subtitle, footnote } = general;
-    if (excelExport) {
-      exportXLS(id, title, subtitle, footnote);
-    }
-  }
-
-  render () {
-    const { excelExport } = this.props;
-    return excelExport === true && (
-      <input
-        className="icon-xls"
-        onClick={this.handleExport}
-        src="/Extensions/qlik-smart-pivot/Excel.png"
-        type="image"
-      />
-    );
-  }
-}
-
-ExportButton.defaultProps = {
-  excelExport: false
-};
-
-ExportButton.propTypes = {
-  id: PropTypes.string.isRequired,
-  excelExport: PropTypes.bool,
-  general: PropTypes.shape({}).isRequired
-};
-
-export default ExportButton;

src/headers-table/column-header.jsx

@@ -10,13 +10,13 @@ class ColumnHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, qlik } = this.props;
+    const { component, entry } = this.props;
-    qlik.backendApi.selectValues(1, [entry.elementNumber], true);
+    component.backendApi.selectValues(1, [entry.elementNumber], false);
   }
 
   render () {
-    const { baseCSS, cellWidth, colSpan, entry, styling, qlik } = this.props;
+    const { baseCSS, cellWidth, colSpan, component, entry, styling } = this.props;
-    const inEditState = qlik.inEditState();
+    const inEditState = component.inEditState();
     const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
     const style = {
@@ -53,13 +53,9 @@ ColumnHeader.defaultProps = {
 
 ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  cellWidth: PropTypes.string,
+  cellWidth: PropTypes.string.isRequired,
   colSpan: PropTypes.number,
-  entry: PropTypes.shape({
+  component: PropTypes.shape({
-    elementNumber: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired
-  }).isRequired,
-  qlik: PropTypes.shape({
     backendApi: PropTypes.shape({
       selectValues: function (props, propName) {
         if (props.isSnapshot || typeof props[propName] === 'function') {
@@ -69,6 +65,10 @@ ColumnHeader.propTypes = {
       }
     }).isRequired
   }).isRequired,
+  entry: PropTypes.shape({
+    displayValue: PropTypes.string.isRequired,
+    elementNumber: PropTypes.number.isRequired
+  }).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
       fontSizeAdjustment: PropTypes.number.isRequired

src/headers-table/dim1-header.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportButton from '../export-button.jsx';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
+import Tooltip from '../tooltip/index.jsx';
 
-const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
+const Dim1Header = ({ component, baseCSS, title, hasSecondDimension, styling }) => {
+  const inEditState = component.inEditState();
   const rowSpan = hasSecondDimension ? 2 : 1;
   const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
@@ -21,21 +22,20 @@ const ExportColumnHeader = ({ id, baseCSS, general, title, allowExcelExport, has
       rowSpan={rowSpan}
       style={style}
     >
-      <ExportButton
+      <Tooltip
-        id={id}
+        isTooltipActive={!inEditState}
-        excelExport={allowExcelExport}
+        styling={styling}
-        general={general}
+        tooltipText={title}
-      />
+      >
-      {title}
+        {title}
+      </Tooltip>
     </th>
   );
 };
 
-ExportColumnHeader.propTypes = {
+Dim1Header.propTypes = {
-  id: PropTypes.string.isRequired,
-  allowExcelExport: PropTypes.bool.isRequired,
   baseCSS: PropTypes.shape({}).isRequired,
-  general: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   hasSecondDimension: PropTypes.bool.isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
@@ -45,4 +45,4 @@ ExportColumnHeader.propTypes = {
   title: PropTypes.string.isRequired
 };
 
-export default ExportColumnHeader;
+export default Dim1Header;

src/headers-table/index.jsx

@@ -1,124 +1,124 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ExportColumnHeader from './export-column-header.jsx';
+import Dim1Header from './dim1-header.jsx';
 import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
+class HeadersTable extends React.PureComponent {
-  const baseCSS = {
+  render () {
-    backgroundColor: styling.headerOptions.colorSchema,
+    const {
-    color: styling.headerOptions.textColor,
+      cellWidth,
-    fontFamily: styling.options.fontFamily,
+      columnSeparatorWidth,
-    textAlign: styling.headerOptions.alignment
+      component,
-  };
+      data,
+      isKpi,
+      styling
+    } = this.props;
 
-  const {
+    const baseCSS = {
-    dimension1,
+      backgroundColor: styling.headerOptions.colorSchema,
-    dimension2,
+      color: styling.headerOptions.textColor,
-    measurements
+      fontFamily: styling.options.fontFamily,
-  } = data.headers;
+      textAlign: styling.headerOptions.alignment
+    };
 
-  const hasSecondDimension = dimension2.length > 0;
+    const {
+      dimension1,
+      dimension2,
+      measurements
+    } = data.headers;
 
-  return (
+    const hasSecondDimension = dimension2.length > 0;
-    <div className="header-wrapper">
-      <table className="header">
-        <tbody>
-          <tr>
-            {isKpi ?
-              <ExportColumnHeader
-                id={qlik.options.id}
-                allowExcelExport={general.allowExcelExport}
-                baseCSS={baseCSS}
-                general={general}
-                hasSecondDimension={hasSecondDimension}
-                styling={styling}
-                title={dimension1[0].name}
-              /> : null
-            }
-            {!isKpi && !hasSecondDimension && measurements.map(measurementEntry => (
-              <MeasurementColumnHeader
-                baseCSS={baseCSS}
-                general={general}
-                hasSecondDimension={hasSecondDimension}
-                key={`${measurementEntry.displayValue}-${measurementEntry.name}`}
-                measurement={measurementEntry}
-                styling={styling}
-              />
-            ))}
-            {!isKpi && hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
-              if (entry.isSeparator) {
-                const separatorStyle = {
-                  color: 'white',
-                  fontFamily: styling.options.fontFamily,
-                  fontSize: `${13 + styling.headerOptions.fontSizeAdjustment}px`
-                };
 
-                return (
+    const separatorStyle = {
-                  <th
+      minWidth: columnSeparatorWidth,
-                    className="empty"
+      maxWidth: columnSeparatorWidth
-                    key={index}
+    };
-                    style={separatorStyle}
+
-                  >
+    return (
-                    *
+      <div className="header-wrapper">
-                  </th>
+        <table className="header">
-                );
+          <tbody>
-              }
+            <tr>
-              return (
+              {isKpi ?
-                <ColumnHeader
+                <Dim1Header
                   baseCSS={baseCSS}
-                  cellWidth={general.cellWidth}
+                  component={component}
-                  colSpan={measurements.length}
+                  hasSecondDimension={hasSecondDimension}
-                  entry={entry}
+                  styling={styling}
-                  key={entry.displayValue}
+                  title={dimension1[0].name}
-                  qlik={qlik}
+                /> : null
+              }
+              {!isKpi && !hasSecondDimension && measurements.map(measurementEntry => (
+                <MeasurementColumnHeader
+                  baseCSS={baseCSS}
+                  cellWidth={cellWidth}
+                  hasSecondDimension={hasSecondDimension}
+                  key={`${measurementEntry.displayValue}-${measurementEntry.name}-${measurementEntry.index}`}
+                  measurement={measurementEntry}
                   styling={styling}
                 />
-              );
+              ))}
-            })}
+              {!isKpi && hasSecondDimension && injectSeparators(dimension2, columnSeparatorWidth).map((entry, index) => {
-          </tr>
+                if (entry.isSeparator) {
-          {!isKpi && hasSecondDimension && (
-            <tr>
-              {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => {
-                if (dimensionEntry.isSeparator) {
-                  const separatorStyle = {
-                    color: 'white',
-                    fontFamily: styling.options.fontFamily,
-                    fontSize: `${12 + styling.headerOptions.fontSizeAdjustment}px`
-                  };
-
                   return (
                     <th
                       className="empty"
                       key={index}
                       style={separatorStyle}
-                    >
+                    />
-                      *
-                    </th>
                   );
                 }
-                return measurements.map(measurementEntry => (
+                return (
-                  <MeasurementColumnHeader
+                  <ColumnHeader
                     baseCSS={baseCSS}
-                    dimensionEntry={dimensionEntry}
+                    cellWidth={cellWidth}
-                    general={general}
+                    colSpan={measurements.length}
-                    hasSecondDimension={hasSecondDimension}
+                    component={component}
-                    key={`${measurementEntry.displayValue}-${measurementEntry.name}-${dimensionEntry.name}`}
+                    entry={entry}
-                    measurement={measurementEntry}
+                    key={entry.displayValue}
                     styling={styling}
                   />
-                ));
+                );
               })}
             </tr>
-          )}
+            {!isKpi && hasSecondDimension && (
-        </tbody>
+              <tr>
-      </table>
+                {injectSeparators(dimension2, columnSeparatorWidth).map((dimensionEntry, index) => {
-    </div>
+                  if (dimensionEntry.isSeparator) {
-  );
+                    return (
-};
+                      <th
+                        className="empty"
+                        key={index}
+                        style={separatorStyle}
+                      />
+                    );
+                  }
+                  return measurements.map(measurementEntry => (
+                    <MeasurementColumnHeader
+                      baseCSS={baseCSS}
+                      cellWidth={cellWidth}
+                      dimensionEntry={dimensionEntry}
+                      hasSecondDimension={hasSecondDimension}
+                      key={`${measurementEntry.displayValue}-${measurementEntry.name}-${measurementEntry.index}-${dimensionEntry.name}`}
+                      measurement={measurementEntry}
+                      styling={styling}
+                    />
+                  ));
+                })}
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
 
 HeadersTable.propTypes = {
+  cellWidth: PropTypes.string.isRequired,
+  columnSeparatorWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
       dimension1: PropTypes.array,
@@ -126,17 +126,7 @@ HeadersTable.propTypes = {
       measurements: PropTypes.array
     })
   }).isRequired,
-  general: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
-  qlik: PropTypes.shape({
-    backendApi: PropTypes.shape({
-      selectValues: function (props, propName) {
-        if (props.isSnapshot || typeof props[propName] === 'function') {
-          return null;
-        }
-        return new Error('Missing implementation of qlik.backendApi.selectValues.');
-      }
-    }).isRequired
-  }).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),
     options: PropTypes.shape({})

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

@@ -3,25 +3,27 @@ import PropTypes from 'prop-types';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
 import Tooltip from '../tooltip/index.jsx';
 
-const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => {
+const MeasurementColumnHeader = ({ baseCSS, cellWidth, hasSecondDimension, measurement, styling }) => {
   const title = `${measurement.name}`;
   const { fontSizeAdjustment } = styling.headerOptions;
   const isMediumFontSize = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
+  const cellStyle = {
+    ...baseCSS,
+    verticalAlign: 'middle',
+    minWidth: cellWidth,
+    maxWidth: cellWidth
+  };
+
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
     let baseFontSize = 14;
     if (isPercentageFormat) {
       baseFontSize = 13;
     }
-    const cellStyle = {
+    cellStyle.fontSize = `${baseFontSize + fontSizeAdjustment}px`;
-      ...baseCSS,
+    cellStyle.height = isMediumFontSize ? '45px' : '35px';
-      fontSize: `${baseFontSize + fontSizeAdjustment}px`,
+
-      height: isMediumFontSize ? '45px' : '35px',
-      verticalAlign: 'middle',
-      minWidth: general.cellWidth,
-      maxWidth: general.cellWidth
-    };
     return (
       <th
         className="grid-cells"
@@ -37,18 +39,12 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     );
   }
 
-  const style = {
+  cellStyle.fontSize = `${15 + fontSizeAdjustment}px`;
-    ...baseCSS,
+  cellStyle.height = isMediumFontSize ? '90px' : '70px';
-    fontSize: `${15 + fontSizeAdjustment}px`,
-    height: isMediumFontSize ? '90px' : '70px',
-    verticalAlign: 'middle',
-    minWidth: general.cellWidth,
-    maxWidth: general.cellWidth
-  };
   return (
     <th
       className="grid-cells"
-      style={style}
+      style={cellStyle}
     >
       <Tooltip
         tooltipText={title}
@@ -66,9 +62,7 @@ MeasurementColumnHeader.defaultProps = {
 
 MeasurementColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  general: PropTypes.shape({
+  cellWidth: PropTypes.string.isRequired,
-    cellWidth: PropTypes.string.isRequired
-  }).isRequired,
   hasSecondDimension: PropTypes.bool,
   measurement: PropTypes.shape({
     name: PropTypes.string.isRequired

src/index.js

@@ -1,6 +1,8 @@
 import definition from './definition';
+import { exportXLS } from './excel-export';
 import { initializeDataCube, initializeDesignList } from './dataset';
 import initializeStore from './store';
+import qlik from 'qlik';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './root.jsx';
@@ -11,11 +13,6 @@ if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
 }
 
 export default {
-  controller: [
-    '$scope',
-    '$timeout',
-    function controller () {}
-  ],
   design: {
     dimensions: {
       max: 1,
@@ -38,6 +35,9 @@ export default {
       uses: 'measures'
     }
   },
+  // Prevent conversion from and to this object
+  exportProperties: null,
+  importProperties: null,
   definition,
   initialProperties: {
     version: 1.0,
@@ -49,7 +49,8 @@ export default {
           qWidth: 10
         }
       ],
-      qMeasures: []
+      qMeasures: [],
+      qSuppressZero: false
     }
   },
   support: {
@@ -71,7 +72,7 @@ export default {
     const jsx = (
       <Root
         editmodeClass={editmodeClass}
-        qlik={this}
+        component={this}
         state={state}
       />
     );
@@ -86,5 +87,26 @@ export default {
     snapshotLayout.snapshotData.designList = await initializeDesignList(this, snapshotLayout);
     return snapshotLayout;
   },
+  getContextMenu: async function (obj, menu) {
+    const app = qlik.currApp(this);
+    const isPersonalResult = await app.global.isPersonalMode();
+    if (!this.$scope.layout.allowexportxls || (isPersonalResult && isPersonalResult.qReturn)) {
+      return menu;
+    }
+
+    menu.addItem({
+      translation: "Export as XLS",
+      tid: "export-excel",
+      icon: "export",
+      select: () => {
+        exportXLS(
+          this.$element,
+          this.$scope.layout.title,
+          this.$scope.layout.subtitle,
+          this.$scope.layout.footnote);
+      }
+    });
+    return menu;
+  },
   version: 1.0
 };

src/initialize-transformed.js

@@ -64,7 +64,8 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 
   if (dimension2Information) {
     matrixCell.parents.dimension2 = {
-      elementNumber: dimension2Information.qElemNumber
+      elementNumber: dimension2Information.qElemNumber,
+      header: dimension2Information.qText
     };
   }
 
@@ -141,7 +142,7 @@ function generateDataSet (
       let rowDataIndex = 0;
       dimension2.forEach(dim => {
         rowDataIndex = appendMissingCells(
-          row, newRow, rowDataIndex, measurements, rowIndex, dim.elementNumber);
+          row, newRow, rowDataIndex, measurements, rowIndex, dim, dimension1);
       });
     } else {
       appendMissingCells(row, newRow, 0, measurements, rowIndex);
@@ -165,14 +166,11 @@ function generateDataSet (
  * index of the dimension2 value being processed.
  */
 function appendMissingCells (
-  sourceRow, destRow, sourceIndex, measurements, dim1ElementNumber, dim2ElementNumber = -1) {
+  sourceRow, destRow, sourceIndex, measurements, matrixIndex, dim2, dim1) {
 
   let index = sourceIndex;
   measurements.forEach((measurement, measureIndex) => {
-    if (index < sourceRow.length
+    if (index < sourceRow.length) {
-      && (dim2ElementNumber === -1
-        || sourceRow[index].parents.dimension2.elementNumber === dim2ElementNumber)
-      && sourceRow[index].parents.measurement.header === measurement.name) {
       // Source contains the expected cell
       destRow.push(sourceRow[index]);
       index++;
@@ -181,8 +179,14 @@ function appendMissingCells (
       destRow.push({
         displayValue: '',
         parents: {
-          dimension1: { elementNumber: dim1ElementNumber },
+          dimension1: {
-          dimension2: { elementNumber: dim2ElementNumber },
+            elementNumber: dim1[matrixIndex].elementNumber,
+            header: dim1[matrixIndex].displayValue
+          },
+          dimension2: {
+            elementNumber: dim2.elementNumber,
+            header: dim2.displayValue
+          },
           measurement: {
             header: measurement.name,
             index: measureIndex
@@ -227,6 +231,18 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
     }
   }
 
+  let cellWidth;
+  if (layout.fitchartwidth) {
+    // The widths are calculated based on the current element width. Note: this could use % to set
+    // the widths as percentages of the available width. However, this often results in random
+    // columns getting 1px wider than the others because of rounding necessary to fill the width.
+    // This 1px causes missalignment between the data- and header tables.
+    cellWidth = '';
+  } else {
+    // If using the previous solution just set 60px
+    cellWidth = `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`;
+  }
+
   // top level properties could be reducers and then components connect to grab what they want,
   // possibly with reselect for some presentational transforms (moving some of the presentational logic like formatting and such)
   const transformedProperties = {
@@ -244,13 +260,13 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
     general: {
       allowExcelExport: layout.allowexportxls,
       allowFilteringByClick: layout.filteroncellclick,
-      // If using the previous solution just set 60px
+      cellWidth: cellWidth,
-      cellWidth: `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`,
       errorMessage: layout.errormessage,
       footnote: layout.footnote,
       maxLoops,
       subtitle: layout.subtitle,
-      title: layout.title
+      title: layout.title,
+      useColumnSeparator: layout.separatorcols && dimensionCount > 1
     },
     selection: {
       dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
@@ -304,8 +320,7 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
         }
       },
       symbolForNulls: layout.symbolfornulls,
-      usePadding: layout.indentbool,
+      usePadding: layout.indentbool
-      useSeparatorColumns: dimensionCount === 1 ? false : layout.separatorcols
     }
   };
 

src/main.less

@@ -57,10 +57,8 @@
   }
 
   .empty {
-    width: 3%;
     background: #fff;
-    min-width: 4px !important;
+    padding: 0 !important;
-    max-width: 4px !important;
   }
 
   th.main-kpi {

src/root.jsx

@@ -4,61 +4,129 @@ import HeadersTable from './headers-table/index.jsx';
 import DataTable from './data-table/index.jsx';
 import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
 
-const Root = ({ state, qlik, editmodeClass }) => (
+class Root extends React.PureComponent {
-  <div className="root">
+  constructor (props) {
-    <LinkedScrollWrapper>
+    super(props);
-      <div className={`kpi-table ${editmodeClass}`}>
+    this.onDataTableRefSet = this.onDataTableRefSet.bind(this);
-        <HeadersTable
+    this.renderedTableWidth = 0;
-          data={state.data}
+  }
-          general={state.general}
+
-          isKpi
+  componentDidUpdate () {
-          qlik={qlik}
+    const tableWidth = this.dataTableRef.getBoundingClientRect().width;
-          styling={state.styling}
+    if (this.renderedTableWidth !== tableWidth) {
-        />
+      this.forceUpdate();
-        <LinkedScrollSection linkVertical>
+    }
-          <DataTable
+  }
-            data={state.data}
+
-            general={state.general}
+  onDataTableRefSet (element) {
-            qlik={qlik}
+    this.dataTableRef = element;
-            renderData={false}
+    this.forceUpdate();
-            styling={state.styling}
+  }
-          />
+
-        </LinkedScrollSection>
+  render () {
+    const { editmodeClass, component, state } = this.props;
+    const { data, general, styling } = state;
+
+    // Determine cell- and column separator width
+    let cellWidth = '0px';
+    let columnSeparatorWidth = '';
+    if (this.dataTableRef) {
+      const tableWidth = this.dataTableRef.getBoundingClientRect().width;
+      this.renderedTableWidth = tableWidth;
+
+      if (general.cellWidth) {
+        cellWidth = general.cellWidth;
+        if (general.useColumnSeparator) {
+          columnSeparatorWidth = '8px';
+        }
+      } else {
+        const headerMarginRight = 8;
+        const borderWidth = 1;
+        const rowCellCount = data.matrix[0].length;
+
+        let separatorCount = 0;
+        let separatorWidth = 0;
+        if (general.useColumnSeparator) {
+          separatorCount = data.headers.dimension2.length - 1;
+          separatorWidth = Math.min(Math.floor(tableWidth * 0.2 / separatorCount), 8);
+          columnSeparatorWidth = `${separatorWidth}px`;
+        }
+
+        const separatorWidthSum = (separatorWidth + borderWidth) * separatorCount;
+        cellWidth = `${Math.floor((tableWidth - separatorWidthSum - headerMarginRight - borderWidth)
+          / rowCellCount) - borderWidth}px`;
+      }
+    }
+
+    return (
+      <div className="root">
+        <LinkedScrollWrapper>
+          <div className={`kpi-table ${editmodeClass}`}>
+            <HeadersTable
+              cellWidth={cellWidth}
+              columnSeparatorWidth={columnSeparatorWidth}
+              component={component}
+              data={data}
+              general={general}
+              isKpi
+              styling={styling}
+            />
+            <LinkedScrollSection linkVertical>
+              <DataTable
+                cellWidth={cellWidth}
+                columnSeparatorWidth={columnSeparatorWidth}
+                component={component}
+                data={data}
+                general={general}
+                renderData={false}
+                styling={styling}
+              />
+            </LinkedScrollSection>
+          </div>
+          <div
+            className={`data-table ${editmodeClass}`}
+            style={{ width: general.cellWidth ? 'auto' : '100%' }}
+            ref={this.onDataTableRefSet}
+          >
+            <LinkedScrollSection linkHorizontal>
+              <HeadersTable
+                cellWidth={cellWidth}
+                columnSeparatorWidth={columnSeparatorWidth}
+                component={component}
+                data={data}
+                general={general}
+                isKpi={false}
+                styling={styling}
+              />
+            </LinkedScrollSection>
+            <LinkedScrollSection
+              linkHorizontal
+              linkVertical
+            >
+              <DataTable
+                cellWidth={cellWidth}
+                columnSeparatorWidth={columnSeparatorWidth}
+                component={component}
+                data={data}
+                general={general}
+                styling={styling}
+              />
+            </LinkedScrollSection>
+          </div>
+        </LinkedScrollWrapper>
       </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 = {
-  qlik: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
+  editmodeClass: PropTypes.string.isRequired,
   state: PropTypes.shape({
     data: PropTypes.object.isRequired,
     general: PropTypes.object.isRequired,
     styling: PropTypes.object.isRequired
-  }).isRequired,
+  }).isRequired
-  editmodeClass: PropTypes.string.isRequired
 };
 
 export default Root;

src/utilities.js

@@ -16,7 +16,7 @@ export function Deferred () {
   });
 }
 
-export function injectSeparators (array, shouldHaveSeparator, suppliedOptions) {
+export function injectSeparators (array, columnSeparatorWidth, suppliedOptions) {
   const defaultOptions = {
     atEvery: 1,
     separator: { isSeparator: true }
@@ -26,7 +26,7 @@ export function injectSeparators (array, shouldHaveSeparator, suppliedOptions) {
     ...suppliedOptions
   };
 
-  if (!shouldHaveSeparator) {
+  if (!columnSeparatorWidth) {
     return array;
   }
   return array.reduce((result, entry, index) => {