Merge pull request #92 from qlik-oss/fcy/QB-5202

fix: enable Export as XLS option on qcs

.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" \

.eslintrc.js

@@ -3,15 +3,15 @@ module.exports = {
     ecmaVersion: 6,
     ecmaFeatures: {
       jsx: true,
-      modules: true
+      modules: true,
     },
-    sourceType: "module"
+    sourceType: "module",
   },
   parser: "babel-eslint",
   env: {
     browser: true,
     es6: true,
-    node: true
+    node: true,
   },
   globals: {
     angular: false,
@@ -21,49 +21,63 @@ module.exports = {
     document: false,
     expect: false,
     it: false,
-    require: false
+    require: false,
   },
   rules: {
-    "indent": ["error", 2, { "SwitchCase": 1 }],
+    indent: ["warn", 2, { SwitchCase: 1 }],
     "linebreak-style": ["error", "unix"],
     "object-curly-spacing": ["error", "always"],
     "max-lines": ["warn", 300],
-    "max-len": ["warn", { "code": 120, "ignoreComments": true, "ignoreTrailingComments": false }],
+    "max-len": [
+      "warn",
+      { code: 120, ignoreComments: true, ignoreTrailingComments: false },
+    ],
     "no-console": ["warn"],
-    "no-mixed-operators": ["warn", {
-      "groups": [
-        ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
-        ["&&", "||"],
-        ["in", "instanceof"]
-      ],
-      "allowSamePrecedence": true
-    }],
+    "no-mixed-operators": [
+      "warn",
+      {
+        groups: [
+          ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+          ["&&", "||"],
+          ["in", "instanceof"],
+        ],
+        allowSamePrecedence: true,
+      },
+    ],
+    "comma-dangle": ["off"],
+    "space-before-function-paren": ["off"],
     "no-multi-spaces": ["error"],
     "no-cond-assign": ["warn"],
     "no-fallthrough": ["warn"],
     "no-undef": ["error"],
     "no-unused-vars": ["error"],
-    "no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
+    "no-use-before-define": [
+      "error",
+      { functions: false, classes: false, variables: false },
+    ],
     "no-useless-escape": ["warn"],
     "no-useless-return": ["warn"],
-    "no-underscore-dangle": ["warn", { "allow": ["_id"] }],
+    "no-underscore-dangle": ["warn", { allow: ["_id"] }],
     "no-redeclare": ["error"],
     "no-restricted-syntax": ["warn"],
     "operator-linebreak": ["warn", "before"],
     "prefer-promise-reject-errors": ["warn"],
-    "padded-blocks": ["warn", { "blocks": "never", "switches": "never", "classes": "never" }],
-    "semi": ["error", "always"],
+    "padded-blocks": [
+      "warn",
+      { blocks: "never", switches: "never", classes: "never" },
+    ],
+    semi: ["error", "always"],
     "valid-typeof": ["warn"],
     "no-eval": ["error"],
     "no-implied-eval": ["error"],
     "no-debugger": ["warn"],
     "no-unreachable": ["warn"],
-    "quotes": ["warn", "single", { "avoidEscape": true }],
+    quotes: ["warn", "single", { avoidEscape: true }],
     "sort-imports": ["off"],
     "max-lines-per-function": ["off"], // marks the entire functions, a bit too noisy
-    "complexity": ["warn"],
-    "camelcase": ["warn"],
-    "max-statements": ["off"],  // marks the entire functions, a bit too noisy
+    complexity: ["warn"],
+    camelcase: ["warn"],
+    "max-statements": ["off"], // marks the entire functions, a bit too noisy
     "sort-vars": ["off"], // not much value for the work
     "init-declarations": ["off"],
     "capitalized-comments": ["off"],
@@ -99,13 +113,13 @@ module.exports = {
     "array-bracket-newline": ["warn"],
     "array-element-newline": ["warn"],
     "object-shorthand": ["warn"],
-    "eqeqeq": ["warn"],
+    eqeqeq: ["warn"],
     "no-empty-function": ["off"],
     "function-paren-newline": ["warn"],
     "no-invalid-this": ["warn"],
     "newline-per-chained-call": ["warn"],
     "no-unused-expressions": ["warn"],
-    "strict": ["warn"],
+    strict: ["warn"],
     "no-ternary": ["off"],
     "multiline-ternary": ["off"],
     "no-param-reassign": ["error"],
@@ -115,9 +129,9 @@ module.exports = {
     "default-case": ["warn"],
     "no-alert": ["warn"],
     "max-params": ["warn"],
-    "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
+    "brace-style": ["warn", "1tbs", { allowSingleLine: true }],
     "prefer-const": ["warn"],
-    "class-methods-use-this":["warn"],
+    "class-methods-use-this": ["warn"],
     // plugin:react
     "react/jsx-indent": ["warn", 2],
     "react/jsx-indent-props": ["warn", 2],
@@ -131,10 +145,7 @@ module.exports = {
     "react/jsx-max-depth": ["off"], // rule throws exception in single-dimension-measure
     "react/jsx-filename-extension": ["warn"],
     "react/prefer-stateless-function": ["warn"],
-    "react/no-set-state": ["warn"]
+    "react/no-set-state": ["warn"],
   },
-  extends: [
-    "eslint:all",
-    "plugin:react/all"
-  ]
-}
+  extends: ["eslint:all", "plugin:react/all"],
+};

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "json.format.enable": false
+}

src/data-table/data-cell.jsx

@@ -1,21 +1,20 @@
-import qlik from 'qlik';
+/* eslint-disable react/sort-prop-types */
+/* eslint-disable space-before-function-paren */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../tooltip/index.jsx';
 
 class DataCell extends React.PureComponent {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  handleSelect () {
+  handleSelect() {
     const {
       data: {
-        headers,
         meta: {
-          dimensionCount,
-          altState
+          dimensionCount
         }
       },
       general: {
@@ -29,43 +28,37 @@ class DataCell extends React.PureComponent {
     if (!allowFilteringByClick) {
       return;
     }
-
-    const app = qlik.currApp(component);
-    app.field(headers.dimension1[0].name, altState)
-      .select([measurement.parents.dimension1.elementNumber], false, false);
-
+    // fixes the console error on selection made from data cells
+    component.selectValues(0, [measurement.parents.dimension1.elementNumber], false);
     if (hasSecondDimension) {
-      app.field(headers.dimension2[0].name, altState)
-        .select([measurement.parents.dimension2.elementNumber], false, false);
+      component.selectValues(1, [measurement.parents.dimension2.elementNumber], false);
     }
   }
 
-  render () {
+  render() {
     const {
-      general,
+      cellWidth,
       measurement,
       styleBuilder,
       styling
     } = this.props;
 
-    let textAlignment = styling.options.textAlignment || 'Right';
+    const textAlignment = styling.options.textAlignment || 'Right';
 
-    let cellStyle = {
+    const cellStyle = {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
       textAlign: textAlignment,
-      minWidth: general.cellWidth,
-      maxWidth: general.cellWidth
+      minWidth: 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);
     }
@@ -73,10 +66,10 @@ class DataCell extends React.PureComponent {
     const { conditionalColoring } = styling;
     if (conditionalColoring.enabled) {
       const isValidConditionalColoringValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-      const isSpecifiedRow =
-        conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
-      const isSpecifiedMeasure =
-        conditionalColoring.measures.indexOf(measurement.parents.measurement.index) !== -1;
+      const isSpecifiedRow
+        = conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
+      const isSpecifiedMeasure
+        = conditionalColoring.measures.indexOf(measurement.parents.measurement.index) !== -1;
       const shouldHaveConditionalColoring = (conditionalColoring.colorAllRows || isSpecifiedRow)
         && (conditionalColoring.colorAllMeasures || isSpecifiedMeasure);
       if (isValidConditionalColoringValue && shouldHaveConditionalColoring) {
@@ -104,25 +97,31 @@ class DataCell extends React.PureComponent {
 }
 
 DataCell.propTypes = {
+  cellWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
-      dimension1: PropTypes.array.isRequired,
       measurements: PropTypes.array.isRequired
     }).isRequired,
     meta: PropTypes.shape({
-      altState: PropTypes.string.isRequired,
       dimensionCount: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
-  general: PropTypes.shape({
-    cellWidth: PropTypes.string.isRequired
-  }).isRequired,
+  general: PropTypes.shape({}).isRequired,
   measurement: PropTypes.shape({
     format: PropTypes.string,
     name: PropTypes.string,
     value: PropTypes.any
   }).isRequired,
-  component: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
+  }).isRequired,
   styleBuilder: PropTypes.shape({
     hasComments: PropTypes.func.isRequired
   }).isRequired,
@@ -133,7 +132,7 @@ DataCell.propTypes = {
 
 export default DataCell;
 
-function formatMeasurementValue (measurement, styling) {
+function formatMeasurementValue(measurement, styling) {
   if (isNaN(measurement.value)) {
     return styling.symbolForNulls;
   }
@@ -141,7 +140,7 @@ function formatMeasurementValue (measurement, styling) {
   return measurement.displayValue;
 }
 
-function getConditionalColor (measurement, conditionalColoring) {
+function getConditionalColor(measurement, conditionalColoring) {
   if (measurement.value < conditionalColoring.threshold.poor) {
     return conditionalColoring.colors.poor;
   }

src/data-table/index.jsx

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

src/data-table/row-header.jsx

@@ -1,4 +1,3 @@
-import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
@@ -11,10 +10,10 @@ class RowHeader extends React.PureComponent {
     this.handleSelect = this.handleSelect.bind(this);
   }
 
+  // fixes the console error on row selected values
   handleSelect () {
-    const { entry, altState, component } = this.props;
-    const app = qlik.currApp(component);
-    app.field(entry.name, altState).select([entry.elementNumber], false, false);
+    const { component, entry } = this.props;
+    component.selectValues(0, [entry.elementNumber], false);
   }
 
   render () {
@@ -44,13 +43,20 @@ class RowHeader extends React.PureComponent {
 }
 
 RowHeader.propTypes = {
+  component: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
+  }).isRequired,
   entry: PropTypes.shape({
     displayValue: PropTypes.string.isRequired,
-    elementNumber: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired
+    elementNumber: PropTypes.number.isRequired
   }).isRequired,
-  altState: PropTypes.string.isRequired,
-  component: PropTypes.shape({}).isRequired,
   rowStyle: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({}).isRequired

src/dataset.js

@@ -6,19 +6,22 @@ function createCube (definition, app) {
   });
 }
 
-async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
+async function buildDataCube (originCubeDefinition, originCube, app, requestPage) {
   const cubeDefinition = {
     ...originCubeDefinition,
     qInitialDataFetch: [
       {
+        // eslint-disable-next-line no-undefined
+        qTop: requestPage === undefined ? 0 : requestPage[0].qTop,
+        qLeft: 0,
         qHeight: 1000,
-        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);
@@ -28,20 +31,41 @@ async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
 }
 
 export async function initializeDataCube (component, layout) {
+
   if (component.backendApi.isSnapshot) {
     return layout.snapshotData.dataCube;
   }
-
   const app = qlik.currApp(component);
   const properties = (await component.backendApi.getProperties());
+  const rowCount = component.backendApi.getRowCount();
+  const cellCount = rowCount * layout.qHyperCube.qSize.qcx;
+  const maxLoops = layout.maxloops;
 
   // 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.qStateName = layout.qStateName || "";
-
-  return buildDataCube(hyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
+  hyperCubeDef = JSON.parse(JSON.stringify(hyperCubeDef));
+  hyperCubeDef.qStateName = layout.qStateName;
+  const pagedCube = {};
+  let lastRow = 0;
+  if (cellCount < (maxLoops * 10000)) {
+    for (let index = 0; cellCount > lastRow; index += 1) {
+      const requestPage = [
+        {
+          qHeight: 1000,
+          qLeft: 0,
+          qTop: lastRow,
+          qWidth: 10 // should be # of columns
+        }
+      ];
+      // eslint-disable-next-line no-await-in-loop
+      pagedCube[index] = await buildDataCube(hyperCubeDef, layout.qHyperCube, app, requestPage);
+      lastRow = lastRow + 1000;
+    }
+    return pagedCube;
+  }
+  return null;
 }
 
 export function initializeDesignList (component, layout) {
@@ -62,6 +86,6 @@ export function initializeDesignList (component, layout) {
       resolve(data);
     };
     stylingField.OnData.bind(listener);
-    stylingField.getData();
+    stylingField.getData({ rows: 5000 });
   });
 }

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/pagination.js

@@ -23,30 +23,6 @@ const pagination = {
         {
           value: 4,
           label: '40k cells'
-        },
-        {
-          value: 5,
-          label: '50k cells'
-        },
-        {
-          value: 6,
-          label: '60k cells'
-        },
-        {
-          value: 7,
-          label: '70k cells'
-        },
-        {
-          value: 8,
-          label: '80k cells'
-        },
-        {
-          value: 9,
-          label: '90k cells'
-        },
-        {
-          value: 10,
-          label: '100k cells'
         }
       ],
       defaultValue: 2
@@ -55,7 +31,8 @@ const pagination = {
       ref: 'errormessage',
       label: 'Default error message',
       type: 'string',
-      defaultValue: 'Unable to display all the data. Apply more filters to limit the amount of displayed data.'
+      defaultValue: `Unable to display all the data. 
+      Change the pagination size supported or apply more filters to limit the amount of displayed data.`
     }
   }
 };

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 = container.querySelector('.kpi-table').cloneNode(true);
-  const dataTableClone = container.querySelector('.data-table').cloneNode(true);
+  const kpiTableClone = containerElement[0].querySelector('.kpi-table').cloneNode(true);
+  const dataTableClone = containerElement[0].querySelector('.data-table').cloneNode(true);
   cleanupNodes(kpiTableClone);
   cleanupNodes(kpiTableClone);
 
@@ -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

@@ -1,23 +1,24 @@
-import qlik from 'qlik';
+/* eslint-disable object-shorthand */
+/* eslint-disable space-before-function-paren */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
 import Tooltip from '../tooltip/index.jsx';
 
 class ColumnHeader extends React.PureComponent {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  handleSelect () {
-    const { entry, altState, component } = this.props;
-    const app = qlik.currApp(component);
-    app.field(entry.name, altState).select([entry.elementNumber], false, false);
+  // fixes console error for column selected values
+  handleSelect() {
+    const { component, entry } = this.props;
+    component.selectValues(1, [entry.elementNumber], false);
   }
 
-  render () {
-    const { baseCSS, cellWidth, colSpan, entry, styling, component } = this.props;
+  render() {
+    const { baseCSS, cellWidth, colSpan, component, entry, styling } = this.props;
     const inEditState = component.inEditState();
     const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
@@ -55,15 +56,22 @@ ColumnHeader.defaultProps = {
 
 ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  cellWidth: PropTypes.string,
+  cellWidth: PropTypes.string.isRequired,
   colSpan: PropTypes.number,
+  component: 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,
   entry: PropTypes.shape({
     displayValue: PropTypes.string.isRequired,
-    elementNumber: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired
+    elementNumber: PropTypes.number.isRequired
   }).isRequired,
-  altState: PropTypes.string.isRequired,
-  component: PropTypes.shape({}).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
-        id={id}
-        excelExport={allowExcelExport}
-        general={general}
-      />
-      {title}
+      <Tooltip
+        isTooltipActive={!inEditState}
+        styling={styling}
+        tooltipText={title}
+      >
+        {title}
+      </Tooltip>
     </th>
   );
 };
 
-ExportColumnHeader.propTypes = {
-  id: PropTypes.string.isRequired,
-  allowExcelExport: PropTypes.bool.isRequired,
+Dim1Header.propTypes = {
   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,136 +1,131 @@
 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, component, styling, isKpi }) => {
-  const baseCSS = {
-    backgroundColor: styling.headerOptions.colorSchema,
-    color: styling.headerOptions.textColor,
-    fontFamily: styling.options.fontFamily,
-    textAlign: styling.headerOptions.alignment
-  };
+class HeadersTable extends React.PureComponent {
+  render () {
+    const {
+      cellWidth,
+      columnSeparatorWidth,
+      component,
+      data,
+      isKpi,
+      styling
+    } = this.props;
 
-  const {
-    dimension1,
-    dimension2,
-    measurements
-  } = data.headers;
+    const baseCSS = {
+      backgroundColor: styling.headerOptions.colorSchema,
+      color: styling.headerOptions.textColor,
+      fontFamily: styling.options.fontFamily,
+      textAlign: styling.headerOptions.alignment
+    };
 
-  const hasSecondDimension = dimension2.length > 0;
+    const {
+      dimension1,
+      dimension2,
+      measurements
+    } = data.headers;
 
-  return (
-    <div className="header-wrapper">
-      <table className="header">
-        <tbody>
-          <tr>
-            {isKpi ?
-              <ExportColumnHeader
-                id={component.$scope.layout.qInfo.qId}
-                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`
-                };
+    const hasSecondDimension = dimension2.length > 0;
 
-                return (
-                  <th
-                    className="empty"
-                    key={index}
-                    style={separatorStyle}
-                  >
-                    *
-                  </th>
-                );
-              }
-              return (
-                <ColumnHeader
-                  altState={data.meta.altState}
+    const separatorStyle = {
+      minWidth: columnSeparatorWidth,
+      maxWidth: columnSeparatorWidth
+    };
+
+    return (
+      <div className="header-wrapper">
+        <table className="header">
+          <tbody>
+            <tr>
+              {isKpi ?
+                <Dim1Header
                   baseCSS={baseCSS}
-                  cellWidth={general.cellWidth}
-                  colSpan={measurements.length}
-                  entry={entry}
-                  key={entry.displayValue}
                   component={component}
+                  hasSecondDimension={hasSecondDimension}
+                  styling={styling}
+                  title={dimension1[0].name}
+                /> : null
+              }
+              {!isKpi && !hasSecondDimension && measurements.map(measurementEntry => (
+                <MeasurementColumnHeader
+                  baseCSS={baseCSS}
+                  cellWidth={cellWidth}
+                  hasSecondDimension={hasSecondDimension}
+                  key={`${measurementEntry.displayValue}-${measurementEntry.name}-${measurementEntry.index}`}
+                  measurement={measurementEntry}
                   styling={styling}
                 />
-              );
-            })}
-          </tr>
-          {!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`
-                  };
-
+              ))}
+              {!isKpi && hasSecondDimension && injectSeparators(dimension2, columnSeparatorWidth).map((entry, index) => {
+                if (entry.isSeparator) {
                   return (
                     <th
                       className="empty"
                       key={index}
                       style={separatorStyle}
-                    >
-                      *
-                    </th>
+                    />
                   );
                 }
-                return measurements.map(measurementEntry => (
-                  <MeasurementColumnHeader
+                return (
+                  <ColumnHeader
                     baseCSS={baseCSS}
-                    dimensionEntry={dimensionEntry}
-                    general={general}
-                    hasSecondDimension={hasSecondDimension}
-                    key={`${measurementEntry.displayValue}-${measurementEntry.name}-${dimensionEntry.name}`}
-                    measurement={measurementEntry}
+                    cellWidth={cellWidth}
+                    colSpan={measurements.length}
+                    component={component}
+                    entry={entry}
+                    key={`${entry.displayValue}-${index}-separator`}
                     styling={styling}
                   />
-                ));
+                );
               })}
             </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-};
+            {!isKpi && hasSecondDimension && (
+              <tr>
+                {injectSeparators(dimension2, columnSeparatorWidth).map((dimensionEntry, index) => {
+                  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,
       dimension2: PropTypes.array,
       measurements: PropTypes.array
-    }),
-    meta: PropTypes.shape({
-      altState: PropTypes.string.isRequired
     })
   }).isRequired,
-  general: PropTypes.shape({}).isRequired,
   component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: 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 = {
-      ...baseCSS,
-      fontSize: `${baseFontSize + fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '45px' : '35px',
-      verticalAlign: 'middle',
-      minWidth: general.cellWidth,
-      maxWidth: general.cellWidth
-    };
+    cellStyle.fontSize = `${baseFontSize + fontSizeAdjustment}px`;
+    cellStyle.height = isMediumFontSize ? '45px' : '35px';
+
     return (
       <th
         className="grid-cells"
@@ -37,18 +39,12 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     );
   }
 
-  const style = {
-    ...baseCSS,
-    fontSize: `${15 + fontSizeAdjustment}px`,
-    height: isMediumFontSize ? '90px' : '70px',
-    verticalAlign: 'middle',
-    minWidth: general.cellWidth,
-    maxWidth: general.cellWidth
-  };
+  cellStyle.fontSize = `${15 + fontSizeAdjustment}px`;
+  cellStyle.height = isMediumFontSize ? '90px' : '70px';
   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
-  }).isRequired,
+  cellWidth: PropTypes.string.isRequired,
   hasSecondDimension: PropTypes.bool,
   measurement: PropTypes.shape({
     name: PropTypes.string.isRequired

src/index.js

@@ -1,21 +1,18 @@
-import definition from './definition';
-import { initializeDataCube, initializeDesignList } from './dataset';
-import initializeStore from './store';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Root from './root.jsx';
-import './main.less';
+import definition from "./definition";
+import { exportXLS } from "./excel-export";
+import { initializeDataCube, initializeDesignList } from "./dataset";
+import initializeStore from "./store";
+import React from "react";
+import ReactDOM from "react-dom";
+import Root from "./root.jsx";
+import "./main.less";
 
-if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
-  require('@babel/polyfill'); // eslint-disable-line global-require
+if (!window._babelPolyfill) {
+  // eslint-disable-line no-underscore-dangle
+  require("@babel/polyfill"); // eslint-disable-line global-require
 }
 
 export default {
-  controller: [
-    '$scope',
-    '$timeout',
-    function controller () {}
-  ],
   design: {
     dimensions: {
       max: 1,
@@ -24,20 +21,23 @@ export default {
   },
   data: {
     dimensions: {
-      max: function (nMeasures) {
+      max (nMeasures) {
         return nMeasures < 9 ? 2 : 1;
       },
       min: 1,
       uses: 'dimensions'
     },
     measures: {
-      max: function (nDims) {
+      max (nDims) {
         return nDims < 2 ? 9 : 8;
       },
       min: 1,
       uses: 'measures'
     }
   },
+  // Prevent conversion from and to this object
+  exportProperties: null,
+  importProperties: null,
   definition,
   initialProperties: {
     version: 1.0,
@@ -45,11 +45,14 @@ export default {
       qDimensions: [],
       qInitialDataFetch: [
         {
-          qHeight: 1,
-          qWidth: 10
+          qTop: 0,
+          qLeft: 0,
+          qWidth: 50,
+          qHeight: 50
         }
       ],
-      qMeasures: []
+      qMeasures: [],
+      qSuppressZero: false
     }
   },
   support: {
@@ -57,23 +60,32 @@ export default {
     exportData: true,
     snapshot: true
   },
-  paint: async function ($element, layout) {
-    const dataCube = await initializeDataCube(this, layout);
-    const designList = await initializeDesignList(this, layout);
-    const state = await initializeStore({
-      $element,
-      component: this,
-      dataCube,
-      designList,
-      layout
-    });
+  async paint ($element, layout, requestPage) {
+    const dataCube = await initializeDataCube(this, layout, requestPage);
     const editmodeClass = this.inAnalysisState() ? '' : 'edit-mode';
+    let state, designList;
+    if (dataCube === null) {
+      state = {
+        $element,
+        component: this,
+        dataCube,
+        designList,
+        layout,
+        error: true
+      };
+    } else {
+      designList = await initializeDesignList(this, layout);
+      state = await initializeStore({
+        $element,
+        component: this,
+        dataCube,
+        designList,
+        layout,
+        error: false
+      });
+    }
     const jsx = (
-      <Root
-        editmodeClass={editmodeClass}
-        component={this}
-        state={state}
-      />
+      <Root editmodeClass={editmodeClass} component={this} state={state} />
     );
 
     ReactDOM.render(jsx, $element[0]);
@@ -81,10 +93,38 @@ export default {
   snapshot: {
     canTakeSnapshot: true
   },
-  setSnapshotData: async function (snapshotLayout) {
-    snapshotLayout.snapshotData.dataCube = await initializeDataCube(this, snapshotLayout);
-    snapshotLayout.snapshotData.designList = await initializeDesignList(this, snapshotLayout);
+  async setSnapshotData (snapshotLayout) {
+    snapshotLayout.snapshotData.dataCube = await initializeDataCube(
+      this,
+      snapshotLayout
+    );
+    snapshotLayout.snapshotData.designList = await initializeDesignList(
+      this,
+      snapshotLayout
+    );
     return snapshotLayout;
   },
+  getContextMenu (obj, menu) {
+    if (!this.$scope.layout.allowexportxls) {
+      return menu;
+    }
+
+    if (this.backendApi.model.layout.qMeta.privileges.indexOf('exportdata') !== -1) {
+      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

@@ -1,50 +1,55 @@
-import { distinctArray } from './utilities';
+import { distinctArray } from "./utilities";
 
 export const HEADER_FONT_SIZE = {
   SMALL: -1,
-  MEDIUM: 1
+  MEDIUM: 1,
 };
 
-function getAlignment (option) {
+function getAlignment(option) {
   const alignmentOptions = {
-    1: 'left',
-    2: 'center',
-    3: 'right'
+    1: "left",
+    2: "center",
+    3: "right",
   };
 
-  return alignmentOptions[option] || 'left';
+  return alignmentOptions[option] || "left";
 }
 
-function getFontSizeAdjustment (option) {
+function getFontSizeAdjustment(option) {
   const fontSizeAdjustmentOptions = {
     1: HEADER_FONT_SIZE.SMALL,
-    2: HEADER_FONT_SIZE.MEDIUM
+    2: HEADER_FONT_SIZE.MEDIUM,
   };
 
   return fontSizeAdjustmentOptions[option] || 0;
 }
 
-function generateMeasurements (information) {
-  return information.map(measurement => {
+function generateMeasurements(information) {
+  return information.map((measurement) => {
     const transformedMeasurement = {
-      format: measurement.qNumFormat.qFmt || '#.##0',
-      name: measurement.qFallbackTitle
+      format: measurement.qNumFormat.qFmt || "#.##0",
+      name: measurement.qFallbackTitle,
     };
 
     return transformedMeasurement;
   });
 }
 
-function generateDimensionEntry (information, data) {
+function generateDimensionEntry(information, data) {
   return {
     displayValue: data.qText || data.qNum,
     elementNumber: data.qElemNumber,
     name: information.qFallbackTitle,
-    value: data.qNum
+    value: data.qNum,
   };
 }
 
-function generateMatrixCell ({ cell, dimension1Information, dimension2Information, measurementInformation }) {
+function generateMatrixCell({
+  cell,
+  dimension1Information,
+  dimension2Information,
+  measurementInformation,
+}) {
   const matrixCell = {
     displayValue: cell.qText,
     format: measurementInformation.format,
@@ -52,174 +57,136 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
     parents: {
       dimension1: {
         elementNumber: dimension1Information.qElemNumber,
-        header: dimension1Information.qText
+        header: dimension1Information.qText,
       },
       measurement: {
         header: measurementInformation.name,
-        index: measurementInformation.index
-      }
+        index: measurementInformation.index,
+      },
     },
-    value: cell.qNum
+    value: cell.qNum,
   };
 
   if (dimension2Information) {
     matrixCell.parents.dimension2 = {
-      elementNumber: dimension2Information.qElemNumber
+      elementNumber: dimension2Information.qElemNumber,
+      header: dimension2Information.qText,
     };
   }
 
   return matrixCell;
 }
 
-let lastRow = 0;
-function generateDataSet (
-  component, dimensionsInformation, measurementsInformation, dataCube) {
-
+function generateDataSet(
+  component,
+  dimensionsInformation,
+  measurementsInformation,
+  dataCube
+) {
   const measurements = generateMeasurements(measurementsInformation);
   let dimension1 = [];
   let dimension2 = [];
   let matrix = [];
 
   const hasSecondDimension = dimensionsInformation.length > 1;
-  dataCube.forEach(row => {
-    lastRow += 1;
-    const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
-    dimension1.push(dimension1Entry);
-    let dimension2Entry;
-    let firstDataCell = 1;
-    if (hasSecondDimension) {
-      dimension2Entry = generateDimensionEntry(dimensionsInformation[1], row[1]);
-      dimension2.push(dimension2Entry);
-      firstDataCell = 2;
-    }
-    let matrixRow = row
-      .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({
-          cell,
-          dimension1Information,
-          dimension2Information,
-          measurementInformation
+  // eslint-disable-next-line no-undefined
+  for (let index = 0; dataCube[index] !== undefined; index++) {
+    // eslint-disable-next-line no-loop-func
+    dataCube[index].forEach((row) => {
+      const dimension1Entry = generateDimensionEntry(
+        dimensionsInformation[0],
+        row[0]
+      );
+      dimension1.push(dimension1Entry);
+      let dimension2Entry;
+      let firstDataCell = 1;
+      if (hasSecondDimension) {
+        dimension2Entry = generateDimensionEntry(
+          dimensionsInformation[1],
+          row[1]
+        );
+        dimension2.push(dimension2Entry);
+        firstDataCell = 2;
+      }
+      let matrixRow = row
+        .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({
+            cell,
+            dimension1Information,
+            dimension2Information,
+            measurementInformation,
+          });
+          return generatedCell;
         });
 
-        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);
+      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);
+          }
         }
       }
-    }
-    matrix[appendToRowIndex] = 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 ((hasSecondDimension && row.length == (dimension2.length * measurements.length))
-      || (!hasSecondDimension && row.length == measurements.length)) {
-      // Row is saturated
-      return row;
-    }
-
-    // Row is not saturated, so must add empty cells to fill the gaps
-    let newRow = [];
-    if (hasSecondDimension) {
-      // Got a second dimension, so need to add measurements for all values of the second dimension
-      let rowDataIndex = 0;
-      dimension2.forEach(dim => {
-        rowDataIndex = appendMissingCells(
-          row, newRow, rowDataIndex, measurements, rowIndex, dim.elementNumber);
-      });
-    } else {
-      appendMissingCells(row, newRow, 0, measurements, rowIndex);
-    }
-
-    return newRow;
-  });
-
   return {
     dimension1: dimension1,
     dimension2: dimension2,
     matrix,
-    measurements
+    measurements,
   };
 }
 
-/*
- * Appends the cells of the source row, as well as those missing, to the destination row, starting
- * from the given source index. Returns the source index of the next source cell after this has
- * completed. If there is a second dimension the dim2ElementNumber should be set to the current
- * index of the dimension2 value being processed.
- */
-function appendMissingCells (
-  sourceRow, destRow, sourceIndex, measurements, dim1ElementNumber, dim2ElementNumber = -1) {
-
-  let index = sourceIndex;
-  measurements.forEach((measurement, measureIndex) => {
-    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++;
-    } else {
-      // Source doesn't contain the expected cell, so add empty
-      destRow.push({
-        displayValue: '',
-        parents: {
-          dimension1: { elementNumber: dim1ElementNumber },
-          dimension2: { elementNumber: dim2ElementNumber },
-          measurement: {
-            header: measurement.name,
-            index: measureIndex
-          }
-        }
-      });
-    }
-  });
-  return index;
-}
-
-function initializeTransformed ({ $element, component, dataCube, designList, layout }) {
+function initializeTransformed({
+  $element,
+  component,
+  dataCube,
+  designList,
+  layout,
+}) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
-  const rowCount = component.backendApi.getRowCount();
-  const maxLoops = layout.maxloops;
-  const {
-    dimension1,
-    dimension2,
-    measurements,
-    matrix
-  } = generateDataSet(component, dimensionsInformation, measurementsInformation, dataCube);
+  const { dimension1, dimension2, measurements, matrix } = generateDataSet(
+    component,
+    dimensionsInformation,
+    measurementsInformation,
+    dataCube
+  );
 
   const customSchemaBasic = [];
   const customSchemaFull = [];
   let customHeadersCount = 0;
 
   if (designList && designList.length > 0) {
-    const headers = designList[0].split(';');
+    const headers = designList[0].split(";");
     customHeadersCount = headers.length;
     for (let lineNumber = 0; lineNumber < designList.length; lineNumber += 1) {
       customSchemaFull[lineNumber] = new Array(headers.length);
-      const data = designList[lineNumber].split(';');
+      const data = designList[lineNumber].split(";");
 
       if (data.length === headers.length) {
-        for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+        for (
+          let headerIndex = 0;
+          headerIndex < headers.length;
+          headerIndex += 1
+        ) {
           [customSchemaBasic[lineNumber]] = data;
           customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
         }
@@ -227,47 +194,62 @@ 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 = {
+    element: $element[0],
     data: {
       headers: {
         dimension1, // column headers
         dimension2, // parent row headers if exists
-        measurements // row headers, looped for each dimension2 if exists
+        measurements, // row headers, looped for each dimension2 if exists
       },
       matrix, // 2d array of all rows/cells to render in body of datatable
       meta: {
         dimensionCount: dimensionsInformation.length,
-        altState: layout.qStateName || ""
-      }
+      },
     },
     general: {
       allowExcelExport: layout.allowexportxls,
       allowFilteringByClick: layout.filteroncellclick,
-      // If using the previous solution just set 60px
-      cellWidth: `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`,
+      cellWidth: cellWidth,
       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)
+      dimensionSelectionCounts: dimensionsInformation.map(
+        (dimensionInfo) => dimensionInfo.qStateCounts.qSelected
+      ),
     },
     styling: {
       customCSV: {
         basic: customSchemaBasic,
         count: customHeadersCount,
-        full: customSchemaFull
+        full: customSchemaFull,
       },
       hasCustomFileStyle: Boolean(designList),
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
         colorSchema: layout.HeaderColorSchema.color,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader),
-        textColor: layout.HeaderTextColorSchema.color
+        textColor: layout.HeaderTextColorSchema.color,
       },
       options: {
         backgroundColor: layout.rowEvenBGColor,
@@ -275,55 +257,44 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
         color: layout.BodyTextColorSchema,
         fontFamily: layout.FontFamily,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
-        textAlignment: layout.cellTextAlignment
+        textAlignment: layout.cellTextAlignment,
       },
       conditionalColoring: {
         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,
+        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)),
+          ? []
+          : layout.conditionalcoloring.measures
+              .split(",")
+              .map((index) => Number(index)),
         threshold: {
           poor: layout.conditionalcoloring.threshold_poor,
-          fair: layout.conditionalcoloring.threshold_fair
+          fair: layout.conditionalcoloring.threshold_fair,
         },
         colors: {
           poor: {
             color: layout.conditionalcoloring.color_poor,
-            textColor: layout.conditionalcoloring.textcolor_poor
+            textColor: layout.conditionalcoloring.textcolor_poor,
           },
           fair: {
             color: layout.conditionalcoloring.color_fair,
-            textColor: layout.conditionalcoloring.textcolor_fair
+            textColor: layout.conditionalcoloring.textcolor_fair,
           },
           good: {
             color: layout.conditionalcoloring.color_good,
-            textColor: layout.conditionalcoloring.textcolor_good
-          }
-        }
+            textColor: layout.conditionalcoloring.textcolor_good,
+          },
+        },
       },
       symbolForNulls: layout.symbolfornulls,
       usePadding: layout.indentbool,
-      useSeparatorColumns: dimensionCount === 1 ? false : layout.separatorcols
-    }
+    },
   };
 
-  if (rowCount > lastRow && rowCount <= (maxLoops * 1000)) {
-    const requestPage = [
-      {
-        qHeight: Math.min(1000, rowCount - lastRow),
-        qLeft: 0,
-        qTop: matrix.length,
-        qWidth: 10 // should be # of columns
-      }
-    ];
-    component.backendApi.getData(requestPage).then(() => {
-      component.paint($element, layout);
-    });
-  }
-
   return transformedProperties;
 }
 

src/linked-scroll/linked-scroll-wrapper.jsx

@@ -33,7 +33,7 @@ class LinkedScrollWrapper extends React.PureComponent {
   unlinkComponent (component) {
     const componentIndex = this.scrollElements.map(element => element.component).indexOf(component);
     if (componentIndex !== -1) {
-      this.scrollElements.removeAt(componentIndex);
+      this.scrollElements.splice(componentIndex, 1);
       // eslint-disable-next-line react/no-find-dom-node
       const node = ReactDOM.findDOMNode(component);
       node.onscroll = null;

src/main.less

@@ -57,10 +57,8 @@
   }
 
   .empty {
-    width: 3%;
     background: #fff;
-    min-width: 4px !important;
-    max-width: 4px !important;
+    padding: 0 !important;
   }
 
   th.main-kpi {
@@ -107,6 +105,20 @@
     width: 100%;
   }
 
+  .error {
+    position: absolute; /*Define position */
+    width: 100%; /* Full width (cover the whole page) */
+    height: 100%; /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000; /* Specify a stack order in case you're using a different order for other elements */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   .kpi-table .fdim-cells,
   .data-table td {
     line-height: 1em !important;

src/root.jsx

@@ -1,64 +1,121 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import HeadersTable from './headers-table/index.jsx';
-import DataTable from './data-table/index.jsx';
-import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
+import React from "react";
+import PropTypes from "prop-types";
+import HeadersTable from "./headers-table/index.jsx";
+import DataTable from "./data-table/index.jsx";
+import { LinkedScrollWrapper, LinkedScrollSection } from "./linked-scroll";
 
-const Root = ({ state, component, editmodeClass }) => (
-  <div className="root">
-    <LinkedScrollWrapper>
-      <div className={`kpi-table ${editmodeClass}`}>
-        <HeadersTable
-          data={state.data}
-          general={state.general}
-          isKpi
-          component={component}
-          styling={state.styling}
-        />
-        <LinkedScrollSection linkVertical>
-          <DataTable
-            data={state.data}
-            general={state.general}
-            component={component}
-            renderData={false}
-            styling={state.styling}
-          />
-        </LinkedScrollSection>
+class Root extends React.PureComponent {
+  render () {
+    const { editmodeClass, component, state } = this.props;
+    const { data, general, styling, error, element } = state;
+
+    // Determine cell- and column separator width
+    let cellWidth = '0px';
+    let columnSeparatorWidth = '';
+    if (!error && element) {
+      const tableWidth = element.getBoundingClientRect().width;
+
+      if (general.cellWidth) {
+        cellWidth = general.cellWidth;
+        if (general.useColumnSeparator) {
+          columnSeparatorWidth = '8px';
+        }
+      } else {
+        // 230 is the left "header", rest is magic margins
+        const headerMarginRight = 8 + 230 + 20;
+        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">
+        {error ? (
+          <div className={`error ${editmodeClass}`}>
+            {state.layout.errormessage}
+          </div>
+        ) : (
+          <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%' }}
+            >
+              <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}
-            component={component}
-            styling={state.styling}
-          />
-        </LinkedScrollSection>
-        <LinkedScrollSection
-          linkHorizontal
-          linkVertical
-        >
-          <DataTable
-            data={state.data}
-            general={state.general}
-            component={component}
-            styling={state.styling}
-          />
-        </LinkedScrollSection>
-      </div>
-    </LinkedScrollWrapper>
-  </div>
-);
+    );
+  }
+}
 
 Root.propTypes = {
   component: PropTypes.shape({}).isRequired,
+  editmodeClass: PropTypes.string.isRequired,
   state: PropTypes.shape({
-    data: PropTypes.object.isRequired,
-    general: PropTypes.object.isRequired,
-    styling: PropTypes.object.isRequired
-  }).isRequired,
-  editmodeClass: PropTypes.string.isRequired
+    data: PropTypes.object,
+    general: PropTypes.object,
+    styling: PropTypes.object
+  }).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) => {

webpack.config.js

@@ -3,12 +3,15 @@ const packageJSON = require('./package.json');
 const path = require('path');
 
 const DIST = path.resolve("./dist");
+// eslint-disable-next-line no-process-env
 const MODE = process.env.NODE_ENV || 'development';
+const SOURCE_MAP = 'source-map';
+const DEVTOOL = MODE === 'development' ? SOURCE_MAP : false;
 
 console.log('Webpack mode:', MODE); // eslint-disable-line no-console
 
 const config = {
-  devtool: 'source-map',
+  devtool: DEVTOOL,
   entry: ['./src/index.js'],
   externals: {
     jquery: {