Merge pull request #69 from qlik-oss/DEB-242/ExportInContainer

Excel export inside container

README.md

@@ -1,52 +1,22 @@
 # P&L Smart Pivot, a Qlik Sense Extension for Financial reporting
-[![CircleCI](https://circleci.com/gh/qlik-oss/PLSmartPivot.svg?style=svg)](https://circleci.com/gh/qlik-oss/PLSmartPivot)
+This extension is part of the extension bundles for Qlik Sense. The repository is maintained and moderated by Qlik RD.
 
-This extension is useful to create reports where the look&feel is rellevantand and pivot a second dimension is needed. Based on P&L Smart.
-
-It's specifically focused on financial reports, trying to solve some common needs of this area:
-- smart export to excel
-- easy creation of reports
-- custom corporate reporting (bold, italic, background color, letter size, headers,...)
-- selections inside the reports
-- custom external templates
-- analytical reports
-
-
-# Manual
-You'll find a manual [Qlik Sense P&LSmart Pivot Extension Manual.pdf](resources/Qlik Sense P&LSmart Pivot Extension Manual.pdf) and one app example [P&LSmartPivot_demo.qvf](resources/P&LSmartPivot_demo.qvf).
-
-
-# Installation
-
-1. Download the extension zip, `qlik-smart-pivot_<version>.zip`, from the latest release(https://github.com/qlik-oss/PLSmartPivot/releases/latest)
-2. Install the extension:
-
-   a. **Qlik Sense Desktop**: unzip to a directory under [My Documents]/Qlik/Sense/Extensions.
-
-   b. **Qlik Sense Server**: import the zip file in the QMC.
+Feel free to fork and suggest pull requests for improvements and bug fixes. Changes will be moderated and reviewed before inclusion in future bundle versions. Please note that emphasis is on backward compatibility, i.e. breaking changes will most likely not be approved.
 
+Usage documentation for the extension is available at https://help.qlik.com.
 
 # Developing the extension
-
 If you want to do code changes to the extension follow these simple steps to get going.
 
 1. Get Qlik Sense Desktop
-1. Create a new app and add the extension to a sheet.
+1. Create a new app and add P&L pivot to a sheet.
 2. Clone the repository
 3. Run `npm install`
-4. Set the environment variable `BUILD_PATH` to your extensions directory. It will be something like `C:/Users/<user>/Documents/Qlik/Sense/Extensions/<extension_name>`.
-5. You now have two options. Either run the watch task or the build task. They are explained below. Both of them default to development mode but can be run in production by setting `NODE_ENV=production` before running the npm task.
-
-   a. **Watch**: `npm run watch`. This will start a watcher which will rebuild the extension and output all needed files to the `buildFolder` for each code change you make. See your changes directly in your Qlik Sense app.
-
-   b. **Build**: `npm run build`. If you want to build the extension package. The output zip-file can be found in the `buildFolder`.
-
+4. Run `npm run build` - to build a dev-version to the /dist folder.
+5. Move the content of the /dist folder to the extension directory. Usually in `C:/Users/<user>/Documents/Qlik/Sense/Extensions/qlik-smart-pivot`.
 
 # Original authors
-
 [github.com/iviasensio](https://github.com/iviasensio)
 
-
 # License
-
-Released under the [MIT License](LICENSE).
+Released under the [MIT License](LICENSE).

gulpfile.js

@@ -15,7 +15,7 @@ gulp.task('qext', function () {
 		type: 'visualization',
 		description: pkg.description + '\nVersion: ' + VERSION,
 		version: VERSION,
-		icon: 'table',
+		icon: 'pivot-table',
 		preview: 'qlik-smart-pivot.png',
 		keywords: 'qlik-sense, visualization',
 		author: pkg.author,

src/data-table/data-cell.jsx

@@ -1,7 +1,6 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ApplyPreMask } from '../masking';
-import { addSeparators } from '../utilities';
 import Tooltip from '../tooltip/index.jsx';
 
 class DataCell extends React.PureComponent {
@@ -11,78 +10,90 @@ class DataCell extends React.PureComponent {
   }
 
   handleSelect () {
-    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
+    const {
+      data: {
+        headers,
+        meta: {
+          dimensionCount,
+          altState
+        }
+      },
+      general: {
+        allowFilteringByClick
+      },
+      measurement,
+      component
+    } = this.props;
+
     const hasSecondDimension = dimensionCount > 1;
     if (!allowFilteringByClick) {
       return;
     }
 
-    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
+    const app = qlik.currApp(component);
+    app.field(headers.dimension1[0].name, altState)
+      .select([measurement.parents.dimension1.elementNumber], false, false);
 
     if (hasSecondDimension) {
-      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
+      app.field(headers.dimension2[0].name, altState)
+        .select([measurement.parents.dimension2.elementNumber], false, false);
     }
   }
 
   render () {
     const {
-      data,
       general,
       measurement,
       styleBuilder,
       styling
     } = this.props;
 
-    const isColumnPercentageBased = (/%/).test(measurement.format);
-    let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
-    if (styleBuilder.hasComments()) {
-      formattedMeasurementValue = '.';
-    }
-    let textAlignment = 'Right';
-    const textAlignmentProp = styling.options.textAlignment;
-    if (textAlignmentProp) {
-      textAlignment = textAlignmentProp;
-    }
+    let textAlignment = styling.options.textAlignment || 'Right';
 
     let cellStyle = {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
-      textAlign: textAlignment
-
+      textAlign: textAlignment,
+      minWidth: general.cellWidth,
+      maxWidth: general.cellWidth
     };
 
-    const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
-    const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-    const dimension1Row = measurement.parents.dimension1.elementNumber;
-    const isSpecifiedMetricField = fieldsToApplyTo.metricsSpecificFields.indexOf(dimension1Row) !== -1;
-    const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || isSpecifiedMetricField);
-    if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
-      const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
-      cellStyle = {
-        ...styleBuilder.getStyle(),
-        backgroundColor,
-        color,
-        fontFamily: styling.options.fontFamily,
-        paddingLeft: '5px',
-        textAlign: textAlignment
-      };
+    const isEmptyCell = measurement.displayValue === '';
+    let formattedMeasurementValue;
+    if (isEmptyCell) {
+      formattedMeasurementValue = '';
+      cellStyle.cursor = 'default';
+    } else if (styleBuilder.hasComments()) {
+      formattedMeasurementValue = '.';
+    } else {
+      formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     }
 
-    let cellClass = 'grid-cells';
-    const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0;
-    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions;
-    if (shouldUseSmallCells) {
-      cellClass = 'grid-cells-small';
+    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 shouldHaveConditionalColoring = (conditionalColoring.colorAllRows || isSpecifiedRow)
+        && (conditionalColoring.colorAllMeasures || isSpecifiedMeasure);
+      if (isValidConditionalColoringValue && shouldHaveConditionalColoring) {
+        const { color, textColor } = getConditionalColor(measurement, conditionalColoring);
+        cellStyle.backgroundColor = color.color;
+        cellStyle.color = textColor.color;
+      }
     }
 
     return (
       <td
-        className={`${cellClass}${general.cellSuffix}`}
-        onClick={this.handleSelect}
+        className="grid-cells"
+        onClick={isEmptyCell ? null : this.handleSelect}
         style={cellStyle}
       >
         <Tooltip
+          styling={styling}
           tooltipText={formattedMeasurementValue}
         >
           {formattedMeasurementValue}
@@ -95,27 +106,23 @@ class DataCell extends React.PureComponent {
 DataCell.propTypes = {
   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({
-    cellSuffix: PropTypes.string.isRequired
+    cellWidth: PropTypes.string.isRequired
   }).isRequired,
   measurement: PropTypes.shape({
     format: PropTypes.string,
     name: PropTypes.string,
     value: PropTypes.any
   }).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,
+  component: PropTypes.shape({}).isRequired,
   styleBuilder: PropTypes.shape({
     hasComments: PropTypes.func.isRequired
   }).isRequired,
@@ -127,59 +134,19 @@ DataCell.propTypes = {
 export default DataCell;
 
 function formatMeasurementValue (measurement, styling) {
-  const isColumnPercentageBased = (/%/).test(measurement.format);
-  let formattedMeasurementValue = '';
-  if (isColumnPercentageBased) {
-    if (isNaN(measurement.value)) {
-      formattedMeasurementValue = styling.symbolForNulls;
-    } else {
-      formattedMeasurementValue = ApplyPreMask('0,00%', measurement.value);
-    }
-  } else {
-    let magnitudeDivider;
-    switch (measurement.magnitude.toLowerCase()) {
-      case 'k':
-        magnitudeDivider = 1000;
-        break;
-      case 'm':
-        magnitudeDivider = 1000000;
-        break;
-      default:
-        magnitudeDivider = 1;
-    }
-    const formattingStringWithoutMagnitude = measurement.format.replace(/k|K|m|M/gi, '');
-    if (isNaN(measurement.value)) {
-      formattedMeasurementValue = styling.symbolForNulls;
-    } else {
-      let preFormatValue = measurement.value;
-      if (isColumnPercentageBased) {
-        preFormatValue *= 100;
-      }
-      switch (formattingStringWithoutMagnitude) {
-        case '#.##0':
-          formattedMeasurementValue = addSeparators((preFormatValue / magnitudeDivider), '.', ',', 0);
-          break;
-        case '#,##0':
-          formattedMeasurementValue = addSeparators((preFormatValue / magnitudeDivider), ',', '.', 0);
-          break;
-        default:
-          formattedMeasurementValue = ApplyPreMask(
-            formattingStringWithoutMagnitude,
-            (preFormatValue / magnitudeDivider)
-          );
-          break;
-      }
-    }
+  if (isNaN(measurement.value)) {
+    return styling.symbolForNulls;
   }
-  return formattedMeasurementValue;
+
+  return measurement.displayValue;
 }
 
-function getSemaphoreColors (measurement, semaphoreColors) {
-  if (measurement.value < semaphoreColors.status.critical) {
-    return semaphoreColors.statusColors.critical;
+function getConditionalColor (measurement, conditionalColoring) {
+  if (measurement.value < conditionalColoring.threshold.poor) {
+    return conditionalColoring.colors.poor;
   }
-  if (measurement.value < semaphoreColors.status.medium) {
-    return semaphoreColors.statusColors.medium;
+  if (measurement.value < conditionalColoring.threshold.fair) {
+    return conditionalColoring.colors.fair;
   }
-  return semaphoreColors.statusColors.normal;
+  return conditionalColoring.colors.good;
 }

src/data-table/index.jsx

@@ -5,7 +5,7 @@ import DataCell from './data-cell.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const DataTable = ({ data, general, qlik, renderData, styling }) => {
+const DataTable = ({ data, general, component, renderData, styling }) => {
   const {
     headers: {
       dimension1,
@@ -40,13 +40,16 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
 
             return (
               <tr key={dimensionEntry.displayValue}>
-                <RowHeader
-                  entry={dimensionEntry}
-                  qlik={qlik}
-                  rowStyle={rowStyle}
-                  styleBuilder={styleBuilder}
-                  styling={styling}
-                />
+                {!renderData ?
+                  <RowHeader
+                    altState={data.meta.altState}
+                    entry={dimensionEntry}
+                    component={component}
+                    rowStyle={rowStyle}
+                    styleBuilder={styleBuilder}
+                    styling={styling}
+                  /> : null
+                }
                 {renderData && injectSeparators(
                   matrix[dimensionIndex],
                   styling.useSeparatorColumns,
@@ -69,6 +72,7 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
                       </td>
                     );
                   }
+
                   const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
                   const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
                   return (
@@ -77,7 +81,7 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
                       general={general}
                       key={`${dimensionEntry.displayValue}-${id}`}
                       measurement={measurementData}
-                      qlik={qlik}
+                      component={component}
                       styleBuilder={styleBuilder}
                       styling={styling}
                     />
@@ -104,7 +108,7 @@ DataTable.propTypes = {
     matrix: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired
   }).isRequired,
   general: PropTypes.shape({}).isRequired,
-  qlik: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   renderData: PropTypes.bool,
   styling: PropTypes.shape({
     hasCustomFileStyle: PropTypes.bool.isRequired

src/data-table/row-header.jsx

@@ -1,3 +1,4 @@
+import qlik from 'qlik';
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
@@ -11,13 +12,14 @@ class RowHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, qlik } = this.props;
-    qlik.backendApi.selectValues(0, [entry.elementNumber], true);
+    const { entry, altState, component } = this.props;
+    const app = qlik.currApp(component);
+    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
-    const { entry, rowStyle, styleBuilder, styling, qlik } = this.props;
-    const inEditState = qlik.inEditState();
+    const { entry, rowStyle, styleBuilder, styling, component } = this.props;
+    const inEditState = component.inEditState();
 
     return (
       <td
@@ -27,6 +29,7 @@ class RowHeader extends React.PureComponent {
       >
         <Tooltip
           isTooltipActive={!inEditState}
+          styling={styling}
           tooltipText={entry.displayValue}
         >
           <HeaderPadding
@@ -42,18 +45,12 @@ class RowHeader extends React.PureComponent {
 
 RowHeader.propTypes = {
   entry: PropTypes.shape({
-    displayValue: PropTypes.string.isRequired
-  }).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
+    displayValue: PropTypes.string.isRequired,
+    elementNumber: PropTypes.number.isRequired,
+    name: PropTypes.string.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,7 +6,7 @@ function createCube (definition, app) {
   });
 }
 
-async function buildDataCube (originCubeDefinition, dimensionIndexes, app) {
+async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
   const cubeDefinition = {
     ...originCubeDefinition,
     qInitialDataFetch: [
@@ -15,77 +15,53 @@ async function buildDataCube (originCubeDefinition, dimensionIndexes, app) {
         qWidth: 10
       }
     ],
-    qDimensions: [originCubeDefinition.qDimensions[dimensionIndexes.dimension1]],
+    qDimensions: [originCubeDefinition.qDimensions[0]],
     qMeasures: originCubeDefinition.qMeasures
   };
-  if (dimensionIndexes.dimension2) {
-    cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[dimensionIndexes.dimension2]);
+  if (hasTwoDimensions) {
+    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;
 }
 
-async function buildDesignCube (originCubeDefinition, dimensionIndexes, app) {
-  if (!dimensionIndexes.design) {
+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());
+
+  // If this is a master object, fetch the hyperCubeDef of the original object
+  const 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);
+}
+
+export function initializeDesignList (component, layout) {
+  if (component.backendApi.isSnapshot) {
+    return layout.snapshotData.designList;
+  }
+
+  if (!layout.stylingfield) {
     return null;
   }
-  const cube = await createCube({
-    qInitialDataFetch: [
-      {
-        qHeight: 1000,
-        qWidth: 1
-      }
-    ],
-    qDimensions: [originCubeDefinition.qDimensions[dimensionIndexes.design]]
-  }, app);
 
-  return cube.qHyperCube.qDataPages[0].qMatrix;
-}
-
-const STYLE_SEPARATOR_COUNT = 7;
-function findDesignDimension (qMatrix) {
-  return qMatrix[0].map(entry => (entry.qText.match(/;/g) || []).length).indexOf(STYLE_SEPARATOR_COUNT);
-}
-
-function getDimensionIndexes (dimensionsInformation, designDimensionIndex) {
-  const hasDesign = designDimensionIndex !== -1;
-  const nonDesignDimensionCount = hasDesign ? dimensionsInformation.length - 1 : dimensionsInformation.length;
-  const dimension1 = designDimensionIndex === 0 ? 1 : 0;
-  let dimension2 = false;
-  if (nonDesignDimensionCount === 2) {
-    dimension2 = hasDesign && designDimensionIndex < 2 ? 2 : 1;
-  }
-  const design = hasDesign && designDimensionIndex;
-  const firstMeasurementIndex = dimensionsInformation.length;
-  return {
-    design,
-    dimension1,
-    dimension2,
-    firstMeasurementIndex
-  };
-}
-
-export async function initializeCubes ({ component, layout }) {
-  const app = qlik.currApp(component);
-  const designDimensionIndex = findDesignDimension(layout.qHyperCube.qDataPages[0].qMatrix);
-  const dimensionsInformation = layout.qHyperCube.qDimensionInfo;
-  const dimensionIndexes = getDimensionIndexes(dimensionsInformation, designDimensionIndex);
-
-  let properties;
-  if (component.backendApi.isSnapshot) {
-    // Fetch properties of source
-    properties = (await app.getObjectProperties(layout.sourceObjectId)).properties;
-  } else {
-    properties = await component.backendApi.getProperties();
-  }
-
-  const originCubeDefinition = properties.qHyperCubeDef;
-  const designCube = await buildDesignCube(originCubeDefinition, dimensionIndexes, app);
-  const dataCube = await buildDataCube(originCubeDefinition, dimensionIndexes, app);
-
-  return {
-    design: designCube,
-    data: dataCube
-  };
+  return new Promise(resolve => {
+    const app = qlik.currApp(component);
+    const stylingField = app.field(layout.stylingfield);
+    const listener = function () {
+      const data = stylingField.rows.map(row => row.qText);
+      stylingField.OnData.unbind(listener);
+      resolve(data);
+    };
+    stylingField.OnData.bind(listener);
+    stylingField.getData();
+  });
 }

src/definition/concept-semaphores.js

@@ -1,96 +0,0 @@
-const conceptSemaphores = {
-  items: {
-    AllConcepts: {
-      component: 'switch',
-      defaultValue: true,
-      label: 'All concepts affected',
-      options: [
-        {
-          label: 'On',
-          value: true
-        },
-        {
-          label: 'Off',
-          value: false
-        }
-      ],
-      ref: 'allsemaphores',
-      type: 'boolean'
-    },
-    ConceptsAffected1: {
-      defaultValue: '',
-      ref: 'conceptsemaphore1',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 1',
-      type: 'string'
-    },
-    ConceptsAffected2: {
-      defaultValue: '',
-      ref: 'conceptsemaphore2',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 2',
-      type: 'string'
-    },
-    ConceptsAffected3: {
-      defaultValue: '',
-      ref: 'conceptsemaphore3',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 3',
-      type: 'string'
-    },
-    ConceptsAffected4: {
-      defaultValue: '',
-      ref: 'conceptsemaphore4',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 4',
-      type: 'string'
-    },
-    ConceptsAffected5: {
-      defaultValue: '',
-      ref: 'conceptsemaphore5',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 5',
-      type: 'string'
-    },
-    ConceptsAffected6: {
-      defaultValue: '',
-      ref: 'conceptsemaphore6',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 6',
-      type: 'string'
-    },
-    ConceptsAffected7: {
-      defaultValue: '',
-      ref: 'conceptsemaphore7',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 7',
-      type: 'string'
-    },
-    ConceptsAffected8: {
-      defaultValue: '',
-      ref: 'conceptsemaphore8',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 8',
-      type: 'string'
-    },
-    ConceptsAffected9: {
-      defaultValue: '',
-      ref: 'conceptsemaphore9',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 9',
-      type: 'string'
-    },
-    // eslint-disable-next-line sort-keys
-    ConceptsAffected10: {
-      defaultValue: '',
-      ref: 'conceptsemaphore10',
-      show: data => !data.allsemaphores,
-      translation: 'Concept 10',
-      type: 'string'
-    }
-  },
-  label: 'Concept Semaphores',
-  type: 'items'
-};
-
-export default conceptSemaphores;

src/definition/conditional-coloring.js

@@ -0,0 +1,199 @@
+const conditionalColoring = {
+  type: 'items',
+  label: 'Color by performance',
+  items: {
+    Enabled: {
+      ref: 'conditionalcoloring.enabled',
+      type: 'boolean',
+      label: 'Enabled',
+      component: 'switch',
+      defaultValue: false,
+      options: [
+        {
+          value: true,
+          label: 'On'
+        },
+        {
+          value: false,
+          label: 'Off'
+        }
+      ]
+    },
+    ColorAllRows: {
+      ref: 'conditionalcoloring.colorall',
+      type: 'boolean',
+      label: 'Color all rows',
+      component: 'switch',
+      defaultValue: true,
+      options: [
+        {
+          value: true,
+          label: 'All rows'
+        },
+        {
+          value: false,
+          label: 'Specified rows'
+        }
+      ],
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    Rows: {
+      type: 'array',
+      ref: 'conditionalcoloring.rows',
+      label: 'Rows to color',
+      itemTitleRef: function (data) {
+        return data.rowname;
+      },
+      allowAdd: true,
+      allowRemove: true,
+      addTranslation: 'Add row to color',
+      items: {
+        Row: {
+          ref: 'rowname',
+          label: 'Name of row',
+          type: 'string',
+          defaultValue: ''
+        }
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled && !data.conditionalcoloring.colorall;
+      }
+    },
+    ColorAllMeasures: {
+      ref: 'conditionalcoloring.colorallmeasures',
+      type: 'boolean',
+      label: 'Color all measures',
+      component: 'switch',
+      defaultValue: true,
+      options: [
+        {
+          value: true,
+          label: 'All measures'
+        },
+        {
+          value: false,
+          label: 'Specified measures'
+        }
+      ],
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    Measures: {
+      ref: 'conditionalcoloring.measures',
+      translation: 'Measures by index (ex: 0,3)',
+      type: 'string',
+      defaultValue: '',
+      show (data) {
+        return data.conditionalcoloring.enabled
+          && data.conditionalcoloring.colorallmeasures === false;
+      }
+    },
+    ThresholdPoor: {
+      ref: 'conditionalcoloring.threshold_poor',
+      translation: 'Poor range limit',
+      type: 'number',
+      defaultValue: -0.1,
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    ColorPoor: {
+      ref: 'conditionalcoloring.color_poor',
+      label: 'Poor background color',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 10,
+        color: '#f93f17'
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    TextColorPoor: {
+      ref: 'conditionalcoloring.textcolor_poor',
+      label: 'Poor text color',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 1,
+        color: '#ffffff'
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    ThresholdFair: {
+      ref: 'conditionalcoloring.threshold_fair',
+      translation: 'Fair range limit',
+      type: 'number',
+      defaultValue: 0,
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    ColorFair: {
+      ref: 'conditionalcoloring.color_fair',
+      label: 'Fair background color',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 8,
+        color: '#ffcf02'
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    TextColorFair: {
+      ref: 'conditionalcoloring.textcolor_fair',
+      label: 'Fair text color',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 15,
+        color: '#000000'
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    ColorGood: {
+      ref: 'conditionalcoloring.color_good',
+      label: 'Good background color',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 3,
+        color: '#276e27'
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    TextColorGood: {
+      ref: 'conditionalcoloring.textcolor_good',
+      label: 'Good text color',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 1,
+        color: '#ffffff'
+      },
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    }
+  }
+};
+
+export default conditionalColoring;

src/definition/header.js

@@ -1,10 +1,10 @@
 const header = {
   type: 'items',
-  label: 'Header Format',
+  label: 'Header format',
   items: {
     Align: {
       ref: 'HeaderAlign',
-      translation: 'Header Alignment',
+      translation: 'Header alignment',
       type: 'number',
       component: 'buttongroup',
       options: [
@@ -29,14 +29,14 @@ const header = {
         index: 6,
         color: '#4477aa'
       },
-      label: 'Background Header Color',
+      label: 'Background color',
       ref: 'HeaderColorSchema',
       type: 'object',
       dualOutput: true
     },
     HeaderTextColor: {
       ref: 'HeaderTextColorSchema',
-      label: 'Text Header Color',
+      label: 'Text color',
       component: 'color-picker',
       defaultValue: {
         index: 1,
@@ -47,7 +47,7 @@ const header = {
     },
     HeaderFontSize: {
       ref: 'lettersizeheader',
-      translation: 'Font Size',
+      translation: 'Font size',
       type: 'number',
       component: 'buttongroup',
       options: [

src/definition/index.js

@@ -1,8 +1,7 @@
 import pagination from './pagination';
 import header from './header';
 import tableFormat from './table-format';
-import conceptSemaphores from './concept-semaphores';
-import metricSemaphores from './metric-semaphores';
+import conditionalColoring from './conditional-coloring';
 
 const definition = {
   component: 'accordion',
@@ -18,18 +17,37 @@ const definition = {
       },
       uses: 'data'
     },
+    sorting: {
+      uses: 'sorting'
+    },
     settings: {
       items: {
-        ConceptSemaphores: conceptSemaphores,
         Formatted: tableFormat,
         Header: header,
-        MetricSemaphores: metricSemaphores,
+        ConditionalColoring: conditionalColoring,
         Pagination: pagination
       },
       uses: 'settings'
     },
-    sorting: {
-      uses: 'sorting'
+    about: {
+      component: 'items',
+      label: 'About',
+      items: {
+        header: {
+          label: 'P&L pivot',
+          style: 'header',
+          component: 'text'
+        },
+        paragraph1: {
+          label: `P&L pivot is a Qlik Sense extension which allows you to display Profit & Loss
+            reporting with color and font customizations.`,
+          component: 'text'
+        },
+        paragraph2: {
+          label: 'P&L pivot is based upon an extension created by Ivan Felipe Asensio.',
+          component: 'text'
+        }
+      }
     }
   },
   type: 'items'

src/definition/metric-semaphores.js

@@ -1,112 +0,0 @@
-const metricSemaphores = {
-  type: 'items',
-  label: 'Metric Semaphores',
-  items: {
-    AllMetrics: {
-      ref: 'allmetrics',
-      type: 'boolean',
-      component: 'switch',
-      label: 'All metrics affected',
-      options: [
-        {
-          value: true,
-          label: 'On'
-        },
-        {
-          value: false,
-          label: 'Off'
-        }
-      ],
-      defaultValue: false
-    },
-    MetricsAffected: {
-      ref: 'metricssemaphore',
-      translation: 'Metrics affected (1,2,4,...)',
-      type: 'string',
-      defaultValue: '-',
-      show (data) {
-        return !data.allmetrics;
-      }
-    },
-    MetricStatus1: {
-      ref: 'metricsstatus1',
-      translation: 'Critic is less than',
-      type: 'number',
-      defaultValue: -0.1
-    },
-    ColorStatus1: {
-      ref: 'colorstatus1',
-      label: 'Critic Color Fill',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 8,
-        color: '#f93f17'
-      }
-    },
-    ColorStatus1Text: {
-      ref: 'colorstatus1text',
-      label: 'Critic Color Text',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 11,
-        color: '#ffffff'
-      }
-    },
-    MetricStatus2: {
-      ref: 'metricsstatus2',
-      translation: 'Medium is less than',
-      type: 'number',
-      defaultValue: 0
-    },
-    ColorStatus2: {
-      ref: 'colorstatus2',
-      label: 'Medium Color Fill',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 9,
-        color: '#ffcf02'
-      }
-    },
-    ColorStatus2Text: {
-      ref: 'colorstatus2text',
-      label: 'Medium Color Text',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 12,
-        color: '#000000'
-      }
-    },
-    ColorStatus3: {
-      ref: 'colorstatus3',
-      label: 'Success Color Fill',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 10,
-        color: '#276e27'
-      }
-    },
-    ColorStatus3Text: {
-      ref: 'colorstatus3text',
-      label: 'Success Color Text',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 11,
-        color: '#ffffff'
-      }
-    }
-  }
-};
-
-export default metricSemaphores;

src/definition/pagination.js

@@ -6,7 +6,7 @@ const pagination = {
       ref: 'maxloops',
       type: 'number',
       component: 'dropdown',
-      label: 'Max Pagination Loops',
+      label: 'Max pagination loops',
       options: [
         {
           value: 1,
@@ -55,7 +55,7 @@ const pagination = {
       ref: 'errormessage',
       label: 'Default error message',
       type: 'string',
-      defaultValue: 'Ups! It seems you asked for too many data. Please filter more to see the whole picture.'
+      defaultValue: 'Unable to display all the data. Apply more filters to limit the amount of displayed data.'
     }
   }
 };

src/definition/table-format.js

@@ -1,12 +1,53 @@
+const qlik = window.require('qlik');
+
 // fixes case for when there are 3 dimensions, missies the case with 1 design dimension and 1 data dimension
 function hasDesignDimension (data) {
   return data.qHyperCubeDef.qDimensions.length > 2;
 }
 
+function getFieldList () {
+  return new Promise(function (resolve) {
+    const app = qlik.currApp();
+    app.getList('FieldList').then(function (model) {
+      // Close the model to prevent any updates.
+      app.destroySessionObject(model.layout.qInfo.qId);
+
+      // This is a bit iffy, might be smarter to reject and handle empty lists on the props instead.
+      if (!model.layout.qFieldList.qItems) {
+        return resolve([]);
+      }
+      // Resolve an array with master objects.
+      return resolve(model.layout.qFieldList.qItems.map(function (item) {
+        return {
+          value: item.qName,
+          label: item.qName
+        };
+      }));
+    });
+  });
+}
+
 const tableFormat = {
   type: 'items',
-  label: 'Table Format',
+  label: 'Table format',
   items: {
+    StylingField: {
+      ref: 'stylingfield',
+      disabledRef: '',
+      type: 'string',
+      component: 'dropdown',
+      label: 'Style template field',
+      options: function () {
+        return getFieldList().then(function (items) {
+          items.unshift(
+            {
+              value: '',
+              label: 'None'
+            });
+          return items;
+        });
+      }
+    },
     IndentBool: {
       ref: 'indentbool',
       type: 'boolean',
@@ -17,7 +58,7 @@ const tableFormat = {
     SeparatorColumns: {
       ref: 'separatorcols',
       type: 'boolean',
-      label: 'Separator Columns',
+      label: 'Column separators',
       defaultValue: false
     },
     rowEvenBGColor: {
@@ -48,7 +89,7 @@ const tableFormat = {
       ref: 'BodyTextColorSchema',
       type: 'string',
       component: 'dropdown',
-      label: 'Text Body Color',
+      label: 'Text body color',
       options: [
         {
           value: 'Black',
@@ -98,7 +139,7 @@ const tableFormat = {
       ref: 'FontFamily',
       type: 'string',
       component: 'dropdown',
-      label: 'FontFamily',
+      label: 'Font family',
       options: [
         {
           value: 'QlikView Sans, -apple-system, sans-serif',
@@ -133,7 +174,7 @@ const tableFormat = {
     },
     DataFontSize: {
       ref: 'lettersize',
-      translation: 'Font Size',
+      translation: 'Font size',
       type: 'number',
       component: 'buttongroup',
       options: [
@@ -150,7 +191,7 @@ const tableFormat = {
     },
     textAlignment: {
       ref: 'cellTextAlignment',
-      label: 'Cell Text alignment',
+      label: 'Cell text alignment',
       component: 'buttongroup',
       options: [
         {
@@ -171,12 +212,12 @@ const tableFormat = {
     ColumnWidthSlider: {
       type: 'number',
       component: 'slider',
-      label: 'Column Width',
+      label: 'Column width',
       ref: 'columnwidthslider',
-      min: 1,
-      max: 3,
-      step: 1,
-      defaultValue: 2
+      min: 20,
+      max: 250,
+      step: 10,
+      defaultValue: 50
     },
     SymbolForNulls: {
       ref: 'symbolfornulls',
@@ -205,7 +246,7 @@ const tableFormat = {
       ref: 'filteroncellclick',
       type: 'boolean',
       component: 'switch',
-      label: 'Filter data when cell clicked',
+      label: 'Allow selection in cells',
       options: [
         {
           value: true,

src/excel-export.js

@@ -1,19 +1,31 @@
-function removeAllTooltips (node) {
-  const tooltips = node.querySelectorAll('.tooltip');
-  [].forEach.call(tooltips, tooltip => {
-    if (tooltip.parentNode) {
-      tooltip.parentNode.removeChild(tooltip);
+function cleanupNodes (node) {
+  const removables = node.querySelectorAll('.tooltip,input');
+  [].forEach.call(removables, removeable => {
+    if (removeable.parentNode) {
+      removeable.parentNode.removeChild(removeable);
     }
   });
 }
 
-function buildTableHTML (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"><i>Note:</i>${footnote}</p>`;
-  const dataTableClone = document.querySelector('.data-table').cloneNode(true);
+  const footnoteHTML = `<p style="font-size:11pt">${footnote}</p>`;
+  const kpiTableClone = containerElement[0].querySelector('.kpi-table').cloneNode(true);
+  const dataTableClone = containerElement[0].querySelector('.data-table').cloneNode(true);
+  cleanupNodes(kpiTableClone);
+  cleanupNodes(kpiTableClone);
 
-  removeAllTooltips(dataTableClone);
+  const kpiTableBodies = kpiTableClone.querySelectorAll('tbody');
+  const dataTableBodies = dataTableClone.querySelectorAll('tbody');
+  const kpiHeader = kpiTableBodies[0].querySelector('tr');
+  const dataTableHeaders = dataTableBodies[0].querySelectorAll('tr');
+  const kpiRows = kpiTableBodies[1].querySelectorAll('tr');
+  const dataRows = dataTableBodies[1].querySelectorAll('tr');
+  let combinedRows = '';
+  for (let i = 0; i < kpiRows.length; i++) {
+    combinedRows += `<tr>${kpiRows[i].innerHTML}${dataRows[i].innerHTML}</tr>`;
+  }
 
   const tableHTML = `
     <html
@@ -41,8 +53,23 @@ function buildTableHTML (title, subtitle, footnote) {
       <body>
         ${titleHTML.length > 0 ? titleHTML : ''}
         ${subtitleHTML.length > 0 ? subtitleHTML : ''}
+        <div>
+          <table>
+            <tbody>
+              <tr>
+              ${kpiHeader.innerHTML}
+              ${dataTableHeaders[0].innerHTML}
+              </tr>
+              ${dataTableHeaders.length > 1 ? dataTableHeaders[1].outerHTML : ''}
+            </tbody>
+          </table>
+          <table>
+            <tbody>
+              ${combinedRows}
+            </tbody>
+          </table>
+        </div>
         ${footnoteHTML.length > 0 ? footnoteHTML : ''}
-        ${dataTableClone.outerHTML}
       </body>
     </html>
     `.split('>.<')
@@ -55,15 +82,15 @@ function buildTableHTML (title, subtitle, footnote) {
 
 function downloadXLS (html) {
   const filename = 'analysis.xls';
+  const blobObject = new Blob([html], { type: 'application/vnd.ms-excel' });
+
   // IE/Edge
   if (window.navigator.msSaveOrOpenBlob) {
-    const blobObject = new Blob([html]);
     return window.navigator.msSaveOrOpenBlob(blobObject, filename);
   }
 
-  const dataURI = generateDataURI(html);
   const link = window.document.createElement('a');
-  link.href = dataURI;
+  link.href = URL.createObjectURL(blobObject);
   link.download = filename;
   document.body.appendChild(link);
   link.click();
@@ -72,15 +99,8 @@ function downloadXLS (html) {
   return true;
 }
 
-function generateDataURI (html) {
-  const dataType = 'data:application/vnd.ms-excel;base64,';
-  const data = window.btoa(unescape(encodeURIComponent(html)));
-
-  return `${dataType}${data}`;
-}
-
-export function exportXLS (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(title, subtitle, footnote);
+  const table = buildTableHTML(containerElement, title, subtitle, footnote);
   downloadXLS(table);
 }

src/export-button.jsx

@@ -9,10 +9,10 @@ class ExportButton extends React.PureComponent {
   }
 
   handleExport () {
-    const { excelExport, general } = this.props;
+    const { component, excelExport, general } = this.props;
     const { title, subtitle, footnote } = general;
     if (excelExport) {
-      exportXLS(title, subtitle, footnote);
+      exportXLS(component.$element, title, subtitle, footnote);
     }
   }
 
@@ -34,6 +34,7 @@ ExportButton.defaultProps = {
 };
 
 ExportButton.propTypes = {
+  component: PropTypes.shape({}).isRequired,
   excelExport: PropTypes.bool,
   general: PropTypes.shape({}).isRequired
 };

src/headers-table/column-header.jsx

@@ -1,5 +1,7 @@
+import qlik from 'qlik';
 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 {
@@ -9,30 +11,35 @@ class ColumnHeader extends React.PureComponent {
   }
 
   handleSelect () {
-    const { entry, qlik } = this.props;
-    qlik.backendApi.selectValues(1, [entry.elementNumber], true);
+    const { entry, altState, component } = this.props;
+    const app = qlik.currApp(component);
+    app.field(entry.name, altState).select([entry.elementNumber], false, false);
   }
 
   render () {
-    const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
-    const inEditState = qlik.inEditState();
+    const { baseCSS, cellWidth, colSpan, entry, styling, component } = this.props;
+    const inEditState = component.inEditState();
+    const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
     const style = {
       ...baseCSS,
       fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
-      height: '45px',
-      verticalAlign: 'middle'
+      height: isMediumFontSize ? '43px' : '33px',
+      verticalAlign: 'middle',
+      minWidth: cellWidth,
+      maxWidth: cellWidth
     };
 
     return (
       <th
-        className={`grid-cells2${cellSuffix}`}
+        className="grid-cells"
         colSpan={colSpan}
         onClick={this.handleSelect}
         style={style}
       >
         <Tooltip
           isTooltipActive={!inEditState}
+          styling={styling}
           tooltipText={entry.displayValue}
         >
           {entry.displayValue}
@@ -43,28 +50,20 @@ class ColumnHeader extends React.PureComponent {
 }
 
 ColumnHeader.defaultProps = {
-  cellSuffix: '',
   colSpan: 1
 };
 
 ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  cellSuffix: PropTypes.string,
+  cellWidth: PropTypes.string,
   colSpan: PropTypes.number,
   entry: PropTypes.shape({
+    displayValue: PropTypes.string.isRequired,
     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') {
-          return null;
-        }
-        return new Error('Missing implementation of qlik.backendApi.selectValues.');
-      }
-    }).isRequired
-  }).isRequired,
+  altState: PropTypes.string.isRequired,
+  component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({
       fontSizeAdjustment: PropTypes.number.isRequired

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

@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 import ExportButton from '../export-button.jsx';
 import { HEADER_FONT_SIZE } from '../initialize-transformed';
 
-const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
+const ExportColumnHeader = ({ component, baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
   const rowSpan = hasSecondDimension ? 2 : 1;
   const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
     ...baseCSS,
     cursor: 'default',
     fontSize: `${16 + styling.headerOptions.fontSizeAdjustment}px`,
-    height: isMediumFontSize ? '100px' : '80px',
+    height: isMediumFontSize ? '90px' : '70px',
     verticalAlign: 'middle',
     width: '230px'
   };
@@ -22,6 +22,7 @@ const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSeco
       style={style}
     >
       <ExportButton
+        component={component}
         excelExport={allowExcelExport}
         general={general}
       />
@@ -31,6 +32,7 @@ const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSeco
 };
 
 ExportColumnHeader.propTypes = {
+  component: PropTypes.shape({}).isRequired,
   allowExcelExport: PropTypes.bool.isRequired,
   baseCSS: PropTypes.shape({}).isRequired,
   general: PropTypes.shape({}).isRequired,

src/headers-table/index.jsx

@@ -5,7 +5,7 @@ import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const HeadersTable = ({ data, general, qlik, styling }) => {
+const HeadersTable = ({ data, general, component, styling, isKpi }) => {
   const baseCSS = {
     backgroundColor: styling.headerOptions.colorSchema,
     color: styling.headerOptions.textColor,
@@ -26,15 +26,18 @@ const HeadersTable = ({ data, general, qlik, styling }) => {
       <table className="header">
         <tbody>
           <tr>
-            <ExportColumnHeader
-              allowExcelExport={general.allowExcelExport}
-              baseCSS={baseCSS}
-              general={general}
-              hasSecondDimension={hasSecondDimension}
-              styling={styling}
-              title={dimension1[0].name}
-            />
-            {!hasSecondDimension && measurements.map(measurementEntry => (
+            {isKpi ?
+              <ExportColumnHeader
+                component={component}
+                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}
@@ -44,7 +47,7 @@ const HeadersTable = ({ data, general, qlik, styling }) => {
                 styling={styling}
               />
             ))}
-            {hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
+            {!isKpi && hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
               if (entry.isSeparator) {
                 const separatorStyle = {
                   color: 'white',
@@ -64,18 +67,19 @@ const HeadersTable = ({ data, general, qlik, styling }) => {
               }
               return (
                 <ColumnHeader
+                  altState={data.meta.altState}
                   baseCSS={baseCSS}
-                  cellSuffix={general.cellSuffix}
+                  cellWidth={general.cellWidth}
                   colSpan={measurements.length}
                   entry={entry}
                   key={entry.displayValue}
-                  qlik={qlik}
+                  component={component}
                   styling={styling}
                 />
               );
             })}
           </tr>
-          {hasSecondDimension && (
+          {!isKpi && hasSecondDimension && (
             <tr>
               {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => {
                 if (dimensionEntry.isSeparator) {
@@ -121,23 +125,18 @@ HeadersTable.propTypes = {
       dimension1: PropTypes.array,
       dimension2: PropTypes.array,
       measurements: PropTypes.array
+    }),
+    meta: PropTypes.shape({
+      altState: PropTypes.string.isRequired
     })
   }).isRequired,
   general: 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,
+  component: PropTypes.shape({}).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),
     options: PropTypes.shape({})
-  }).isRequired
+  }).isRequired,
+  isKpi: PropTypes.bool.isRequired
 };
 
 export default HeadersTable;

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

@@ -4,61 +4,58 @@ import { HEADER_FONT_SIZE } from '../initialize-transformed';
 import Tooltip from '../tooltip/index.jsx';
 
 const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => {
-  const title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`;
+  const title = `${measurement.name}`;
   const { fontSizeAdjustment } = styling.headerOptions;
-  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
+  const isMediumFontSize = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
     let baseFontSize = 14;
-    let cellClass = 'grid-cells2';
     if (isPercentageFormat) {
       baseFontSize = 13;
-      cellClass = 'grid-cells2-small';
     }
     const cellStyle = {
       ...baseCSS,
-      cursor: 'default',
       fontSize: `${baseFontSize + fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '50px' : '25px',
-      verticalAlign: 'middle'
+      height: isMediumFontSize ? '45px' : '35px',
+      verticalAlign: 'middle',
+      minWidth: general.cellWidth,
+      maxWidth: general.cellWidth
     };
     return (
       <th
-        className={`${cellClass}${general.cellSuffix}`}
+        className="grid-cells"
         style={cellStyle}
       >
-        <span className="wrapclass25">
-          <Tooltip
-            tooltipText={title}
-          >
-            {title}
-          </Tooltip>
-        </span>
+        <Tooltip
+          tooltipText={title}
+          styling={styling}
+        >
+          {title}
+        </Tooltip>
       </th>
     );
   }
 
-  const isLong = (title.length > 11 && fontSizeAdjustment === 0) || (title.length > 12 && fontSizeAdjustment === -2);
-  const suffixWrap = isLong ? '70' : 'empty';
   const style = {
     ...baseCSS,
-    cursor: 'default',
     fontSize: `${15 + fontSizeAdjustment}px`,
-    height: isMediumFontSize ? '100px' : '80px',
-    verticalAlign: 'middle'
+    height: isMediumFontSize ? '90px' : '70px',
+    verticalAlign: 'middle',
+    minWidth: general.cellWidth,
+    maxWidth: general.cellWidth
   };
   return (
     <th
-      className={`grid-cells2 ${general.cellSuffix}`}
+      className="grid-cells"
       style={style}
     >
-      <span
-        className={`wrapclass${suffixWrap}`}
-        style={{ fontFamily: styling.headerOptions.fontFamily }}
+      <Tooltip
+        tooltipText={title}
+        styling={styling}
       >
         {title}
-      </span>
+      </Tooltip>
     </th>
   );
 };
@@ -70,7 +67,7 @@ MeasurementColumnHeader.defaultProps = {
 MeasurementColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
   general: PropTypes.shape({
-    cellSuffix: PropTypes.string.isRequired
+    cellWidth: PropTypes.string.isRequired
   }).isRequired,
   hasSecondDimension: PropTypes.bool,
   measurement: PropTypes.shape({

src/index.js

@@ -1,5 +1,9 @@
-import paint from './paint.jsx';
 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';
 
 if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
@@ -20,12 +24,16 @@ export default {
   },
   data: {
     dimensions: {
-      max: 3,
+      max: function (nMeasures) {
+        return nMeasures < 9 ? 2 : 1;
+      },
       min: 1,
       uses: 'dimensions'
     },
     measures: {
-      max: 8,
+      max: function (nDims) {
+        return nDims < 2 ? 9 : 8;
+      },
       min: 1,
       uses: 'measures'
     }
@@ -49,16 +57,34 @@ export default {
     exportData: true,
     snapshot: true
   },
-  paint ($element, layout) {
-    try {
-      paint($element, layout, this);
-    } catch (exception) {
-      console.error(exception); // eslint-disable-line no-console
-      throw exception;
-    }
+  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
+    });
+    const editmodeClass = this.inAnalysisState() ? '' : 'edit-mode';
+    const jsx = (
+      <Root
+        editmodeClass={editmodeClass}
+        component={this}
+        state={state}
+      />
+    );
+
+    ReactDOM.render(jsx, $element[0]);
   },
   snapshot: {
     canTakeSnapshot: true
   },
+  setSnapshotData: async function (snapshotLayout) {
+    snapshotLayout.snapshotData.dataCube = await initializeDataCube(this, snapshotLayout);
+    snapshotLayout.snapshotData.designList = await initializeDesignList(this, snapshotLayout);
+    return snapshotLayout;
+  },
   version: 1.0
 };

src/initialize-transformed.js

@@ -18,47 +18,16 @@ function getAlignment (option) {
 function getFontSizeAdjustment (option) {
   const fontSizeAdjustmentOptions = {
     1: HEADER_FONT_SIZE.SMALL,
-    2: HEADER_FONT_SIZE.MEDIUM,
-    3: 2
+    2: HEADER_FONT_SIZE.MEDIUM
   };
 
   return fontSizeAdjustmentOptions[option] || 0;
 }
 
-function getCellSuffix (option) {
-  const cellSuffixOptions = {
-    1: '-s',
-    3: '-l'
-  };
-
-  return cellSuffixOptions[option] || '';
-}
-
-function getMeasurementFormat (measurement) {
-  if (measurement.qNumFormat.qType === 'U' || measurement.qNumFormat.qFmt === '##############') {
-    return '#.##0';
-  } else if (measurement.qNumFormat.qType === 'R') {
-    return measurement.qNumFormat.qFmt.replace(/(|)/gi, '');
-  }
-  return measurement.qNumFormat.qFmt;
-}
-
-function getMagnitudeLabelSuffix (magnitudeOption) {
-  const magnitudeLabelSuffixOptions = {
-    'k': ' (k)',
-    'm': ' (m)'
-  };
-
-  return magnitudeLabelSuffixOptions[magnitudeOption] || '';
-}
-
 function generateMeasurements (information) {
   return information.map(measurement => {
-    const format = getMeasurementFormat(measurement);
-    const formatMagnitude = format.substr(format.length - 1).toLowerCase();
     const transformedMeasurement = {
-      format,
-      magnitudeLabelSuffix: getMagnitudeLabelSuffix(formatMagnitude),
+      format: measurement.qNumFormat.qFmt || '#.##0',
       name: measurement.qFallbackTitle
     };
 
@@ -68,7 +37,7 @@ function generateMeasurements (information) {
 
 function generateDimensionEntry (information, data) {
   return {
-    displayValue: data.qText,
+    displayValue: data.qText || data.qNum,
     elementNumber: data.qElemNumber,
     name: information.qFallbackTitle,
     value: data.qNum
@@ -79,11 +48,6 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
   const matrixCell = {
     displayValue: cell.qText,
     format: measurementInformation.format,
-    magnitude: measurementInformation.magnitudeLabelSuffix.substring(
-      measurementInformation.magnitudeLabelSuffix.length - 2,
-      measurementInformation.magnitudeLabelSuffix.length - 1
-    ),
-    magnitudeLabelSuffix: measurementInformation.magnitudeLabelSuffix,
     name: measurementInformation.name,
     parents: {
       dimension1: {
@@ -91,7 +55,8 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
         header: dimension1Information.qText
       },
       measurement: {
-        header: measurementInformation.name
+        header: measurementInformation.name,
+        index: measurementInformation.index
       }
     },
     value: cell.qNum
@@ -107,16 +72,16 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 }
 
 let lastRow = 0;
-function generateDataSet (component, dimensionsInformation, measurementsInformation, cubes) {
-  const dimension1 = [];
-  const dimension2 = [];
+function generateDataSet (
+  component, dimensionsInformation, measurementsInformation, dataCube) {
+
   const measurements = generateMeasurements(measurementsInformation);
+  let dimension1 = [];
+  let dimension2 = [];
   let matrix = [];
 
-  let previousDim1Entry;
-  const hasDesignDimension = cubes.design;
-  const hasSecondDimension = hasDesignDimension ? dimensionsInformation.length > 2 : dimensionsInformation.length > 1;
-  cubes.data.forEach(row => {
+  const hasSecondDimension = dimensionsInformation.length > 1;
+  dataCube.forEach(row => {
     lastRow += 1;
     const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
     dimension1.push(dimension1Entry);
@@ -127,10 +92,11 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
       dimension2.push(dimension2Entry);
       firstDataCell = 2;
     }
-    const matrixRow = row
+    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({
@@ -143,36 +109,92 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
         return generatedCell;
       });
 
+    let appendToRowIndex = matrix.length;
     if (hasSecondDimension) {
-      const currentDim1Entry = row[0].qText;
-      const isSameDimension1AsPrevious = currentDim1Entry === previousDim1Entry;
-      if (isSameDimension1AsPrevious) {
-        const updatedRow = matrix[matrix.length - 1].concat(matrixRow);
-
-        matrix = [
-          ...matrix.slice(0, matrix.length - 1),
-          updatedRow
-        ];
-      } else {
-        matrix[matrix.length] = matrixRow;
+      // 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);
+        }
       }
-      previousDim1Entry = currentDim1Entry;
-    } else {
-      matrix[matrix.length] = matrixRow;
     }
+    matrix[appendToRowIndex] = matrixRow;
   });
 
   // filter header dimensions to only have distinct values
+  dimension1 = distinctArray(dimension1);
+  dimension2 = distinctArray(dimension2);
+
+  // Make sure all rows are saturated, otherwise data risks being displayed in the wrong column
+  matrix = matrix.map((row, rowIndex) => {
+    if ((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: distinctArray(dimension1),
-    dimension2: distinctArray(dimension2),
+    dimension1: dimension1,
+    dimension2: dimension2,
     matrix,
     measurements
   };
 }
 
-function initializeTransformed ({ $element, component, cubes, layout }) {
+/*
+ * 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 }) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -183,19 +205,18 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
     dimension2,
     measurements,
     matrix
-  } = generateDataSet(component, dimensionsInformation, measurementsInformation, cubes);
+  } = generateDataSet(component, dimensionsInformation, measurementsInformation, dataCube);
 
   const customSchemaBasic = [];
   const customSchemaFull = [];
   let customHeadersCount = 0;
 
-  if (cubes.design) {
-    const allTextLines = cubes.design.map(entry => entry[0].qText);
-    const headers = allTextLines[0].split(';');
+  if (designList && designList.length > 0) {
+    const headers = designList[0].split(';');
     customHeadersCount = headers.length;
-    for (let lineNumber = 0; lineNumber < allTextLines.length; lineNumber += 1) {
+    for (let lineNumber = 0; lineNumber < designList.length; lineNumber += 1) {
       customSchemaFull[lineNumber] = new Array(headers.length);
-      const data = allTextLines[lineNumber].split(';');
+      const data = designList[lineNumber].split(';');
 
       if (data.length === headers.length) {
         for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
@@ -217,13 +238,15 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
       },
       matrix, // 2d array of all rows/cells to render in body of datatable
       meta: {
-        dimensionCount: dimensionsInformation.length
+        dimensionCount: dimensionsInformation.length,
+        altState: layout.qStateName || ""
       }
     },
     general: {
       allowExcelExport: layout.allowexportxls,
       allowFilteringByClick: layout.filteroncellclick,
-      cellSuffix: getCellSuffix(layout.columnwidthslider), // TOOD: move to matrix cells or is it headers.measurements?
+      // If using the previous solution just set 60px
+      cellWidth: `${layout.columnwidthslider > 10 ? layout.columnwidthslider : 60}px`,
       errorMessage: layout.errormessage,
       footnote: layout.footnote,
       maxLoops,
@@ -239,7 +262,7 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
         count: customHeadersCount,
         full: customSchemaFull
       },
-      hasCustomFileStyle: Boolean(cubes.design),
+      hasCustomFileStyle: Boolean(designList),
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
         colorSchema: layout.HeaderColorSchema.color,
@@ -254,39 +277,30 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
         textAlignment: layout.cellTextAlignment
       },
-      semaphoreColors: {
-        fieldsToApplyTo: {
-          applyToAll: layout.allsemaphores,
-          applyToMetric: layout.allmetrics,
-          specificFields: [
-            layout.conceptsemaphore1,
-            layout.conceptsemaphore2,
-            layout.conceptsemaphore3,
-            layout.conceptsemaphore4,
-            layout.conceptsemaphore5,
-            layout.conceptsemaphore6,
-            layout.conceptsemaphore7,
-            layout.conceptsemaphore9,
-            layout.conceptsemaphore10
-          ],
-          metricsSpecificFields: layout.metricssemaphore.split(',').map(entry => Number(entry))
+      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,
+        measures: !layout.conditionalcoloring.measures
+          ? [] : layout.conditionalcoloring.measures.split(',').map(index => Number(index)),
+        threshold: {
+          poor: layout.conditionalcoloring.threshold_poor,
+          fair: layout.conditionalcoloring.threshold_fair
         },
-        status: {
-          critical: layout.metricsstatus1,
-          medium: layout.metricsstatus2
-        },
-        statusColors: {
-          critical: {
-            backgroundColor: layout.colorstatus1.color,
-            color: layout.colorstatus1text.color
+        colors: {
+          poor: {
+            color: layout.conditionalcoloring.color_poor,
+            textColor: layout.conditionalcoloring.textcolor_poor
           },
-          medium: {
-            backgroundColor: layout.colorstatus2.color,
-            color: layout.colorstatus2text.color
+          fair: {
+            color: layout.conditionalcoloring.color_fair,
+            textColor: layout.conditionalcoloring.textcolor_fair
           },
-          normal: {
-            backgroundColor: layout.colorstatus3.color,
-            color: layout.colorstatus3text.color
+          good: {
+            color: layout.conditionalcoloring.color_good,
+            textColor: layout.conditionalcoloring.textcolor_good
           }
         }
       },

src/main.less

@@ -1,6 +1,5 @@
 /* eslint-disable */
 .qv-object-qlik-smart-pivot {
-  @TableBorder: 1px solid #d3d3d3;
   @KpiTableWidth: 230px;
 
   *,
@@ -13,9 +12,7 @@
     pointer-events: none;
   }
 
-  ._cell(@Width: 50px) {
-    min-width: @Width !important;
-    max-width: @Width !important;
+  .grid-cells {
     cursor: pointer;
     line-height: 1em !important;
   }
@@ -33,18 +30,17 @@
   }
 
   table {
-    border-collapse: collapse;
-    border-spacing: 0;
+    border-collapse: separate;
+    border-spacing: 1px;
     width: auto;
-    border-left: @TableBorder;
-    border-right: @TableBorder;
-    border-top: @TableBorder;
   }
 
+  tr {
+    height: 25px;
+  }
+  
   td,
   th {
-    border: 1px solid #fff;
-    border-collapse: collapse;
     padding: 5px !important; // prevent overwriting from single object
     white-space: nowrap;
     overflow: hidden;
@@ -70,106 +66,12 @@
   th.main-kpi {
     text-align: center;
     vertical-align: middle;
-    border-bottom: @TableBorder;
   }
 
   .numeric {
     text-align: right;
   }
 
-  // This is for wrap text in headers 
-  .wrapclass25 {
-    width: 100%;
-    height: inherit;
-    white-space: pre-line;
-    overflow: hidden;
-    display: block;
-    text-overflow: ellipsis;
-  }
-
-  .wrapclass45 {
-    width: 100%;
-    height: 45px;
-    white-space: pre-line;
-    overflow: hidden;
-    display: block;
-  }
-
-  .wrapclass70 {
-    width: 100%;
-    height: 70px;
-    white-space: pre-line;
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: middle;
-    line-height: 20px;
-  }
-
-  .wrapclassEmpty {
-    width: 100%;
-  }
-
-  // ***************** 
-  // Medium column size 
-  // ***************** 
-
-  .grid-cells {
-    position: relative;
-    ._cell(70px);
-  }
-
-  .grid-cells2 {
-    ._cell(70px);
-  }
-
-  .grid-cells-small {
-    ._cell(52px);
-  }
-
-  .grid-cells2-small {
-    ._cell(52px);
-  }
-
-  // ***************** 
-  // Small column size 
-  // ***************** 
-  .grid-cells-s {
-    ._cell(67px);
-  }
-
-  .grid-cells2-s {
-    ._cell(67px);
-  }
-
-  .grid-cells-small-s {
-    ._cell(52px);
-  }
-
-  .grid-cells2-small-s {
-    ._cell(52px);
-  }
-
-  // ***************** 
-  // Large column size 
-  // ***************** 
-  .grid-cells-l {
-    ._cell(82px);
-  }
-
-  .grid-cells2-l {
-    ._cell(82px);
-  }
-
-  .grid-cells-small-l {
-    ._cell(66px);
-  }
-
-  .grid-cells2-small-l {
-    ._cell(66px);
-  }
-
-  // END OF GRID CELLS
-
   // First Column 
   .fdim-cells {
     min-width: 230px !Important;
@@ -178,25 +80,12 @@
     background-color: #fff;
   }
 
-  .fdim-cells:hover {
-    background-color: #808080 !important;
-    color: #fff;
-  }
-
-  tbody tr:hover {
+  tbody tr:hover td {
     cursor: default;
     background-color: #808080 !important;
     color: #fff;
   }
 
-  .grid-cells-header {
-    padding: 0;
-  }
-
-  .grid-cells-title {
-    min-width: 522px;
-  }
-
   .grid {
     height: 50px;
     width: 350px;
@@ -210,33 +99,50 @@
     border: groove;
   }
 
+  .root {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    height: 100%;
+    width: 100%;
+  }
+
   .kpi-table .fdim-cells,
   .data-table td {
     line-height: 1em !important;
   }
 
-  .data-table .fdim-cells {
-    display: none;
-  }
-
   .kpi-table {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    flex: none;
     width: @KpiTableWidth !important;
-    overflow: hidden !important;
-    height: 100%;
     margin: 0;
     padding: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-right: 1px solid #fff;
-    box-shadow: 4px 2px 8px #e1e1e1;
+
+    .header-wrapper {
+      flex: none;
+      box-shadow: 4px 2px 8px #e1e1e1;
+    }
 
     .row-wrapper {
-      height: calc(~"100% - 97px");
       overflow: scroll;
-      position: absolute;
+      margin: 0;
+      margin-bottom: 8px;
       padding: 0;
-      margin-top: 0;
+      box-shadow: 4px 2px 8px #e1e1e1;
+      min-height: 0; /* This is to make flex size-filling work */
+
+      /* Adapt for Edge */
+      @supports (-ms-ime-align: auto) {
+        margin-bottom: 16px;
+      }
+
+      /* Adapt for IE11 */
+      @media screen and (-ms-high-contrast: none) {
+        margin-bottom: 16px;
+      }
     }
   }
 
@@ -245,27 +151,50 @@
   }
 
   .data-table {
-    height: 100%;
-    width: calc(100% - 243px);
-    position: absolute;
-    margin-left: @KpiTableWidth + 13px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    margin-left: 13px;
+    min-width: 0; /* This is to make flex size-filling work */
 
     .header-wrapper {
+      flex: none;
       overflow: scroll;
-      width: 100%;
+      margin-right: 8px;
     }
 
     .row-wrapper {
-      height: calc(~"100% - 97px");
-      width: 100%;
       overflow: scroll;
+      margin: 0;
       padding: 0;
-      margin-top: 0;
+      min-height: 0; /* This is to make flex size-filling work */
+
+      /* Style scrollbar for FF */
+      scrollbar-width: thin;
+      scrollbar-color: #d3d3d3 transparent;
+    }
+
+    /* Adapt for Edge */
+    @supports (-ms-ime-align: auto) {
+      .header-wrapper {
+        margin-right: 16px;
+      }
+    }
+
+    /* Adapt for IE11 */
+    @media screen and (-ms-high-contrast: none) {
+      width: 100%;
+      height: 100%;
+
+      .header-wrapper {
+        margin-right: 16px;
+      }
     }
   }
 
   // hide scrollbars
   .kpi-table .header-wrapper,
+  .kpi-table .row-wrapper,
   .data-table .header-wrapper {
     // stylelint-disable-next-line property-no-unknown 
     scrollbar-width: none;

src/masking.js

@@ -1,132 +0,0 @@
-import { addSeparators } from './utilities';
-
-export function ApplyPreMask (mask, value) { // aqui
-  if (mask.indexOf(';') >= 0) {
-    if (value >= 0) {
-      switch (mask.substring(0, mask.indexOf(';'))) {
-        case '#.##0':
-          return (addSeparators(value, '.', ',', 0));
-        case '#,##0':
-          return (addSeparators(value, ',', '.', 0));
-        case '+#.##0':
-          return (addSeparators(value, '.', ',', 0));
-        case '+#,##0':
-          return (addSeparators(value, ',', '.', 0));
-        default:
-          return (applyMask(mask.substring(0, mask.indexOf(';')), value));
-      }
-    } else {
-      const vMyValue = value * -1;
-      let vMyMask = mask.substring(mask.indexOf(';') + 1, mask.length);
-      vMyMask = vMyMask.replace('(', '');
-      vMyMask = vMyMask.replace(')', '');
-      switch (vMyMask) {
-        case '#.##0':
-          return (`(${addSeparators(vMyValue, '.', ',', 0)})`);
-        case '#,##0':
-          return (`(${addSeparators(vMyValue, ',', '.', 0)})`);
-        case '-#.##0':
-          return (`(${addSeparators(vMyValue, '.', ',', 0)})`);
-        case '-#,##0':
-          return (`(${addSeparators(vMyValue, ',', '.', 0)})`);
-        default:
-          return (`(${applyMask(vMyMask, vMyValue)})`);
-      }
-    }
-  } else {
-    return (applyMask(mask, value));
-  }
-}
-
-function applyMask (originalMask, originalValue) {
-  if (!originalMask || isNaN(Number(originalValue))) {
-    return originalValue;
-  }
-
-  let isNegative;
-  let result;
-  let integer;
-  // find prefix/suffix
-  let len = originalMask.length;
-  const start = originalMask.search(/[0-9\-\+#]/);
-  const prefix = start > 0 ? originalMask.substring(0, start) : '';
-  // reverse string: not an ideal method if there are surrogate pairs
-  let str = originalMask.split('')
-    .reverse()
-    .join('');
-  const end = str.search(/[0-9\-\+#]/);
-  let offset = len - end;
-  const substr = originalMask.substring(offset, offset + 1);
-  let index = offset + ((substr === '.' || (substr === ',')) ? 1 : 0);
-  const suffix = end > 0 ? originalMask.substring(index, len) : '';
-
-  // mask with prefix & suffix removed
-  let mask = originalMask.substring(start, index);
-
-  // convert any string to number according to formation sign.
-  let value = mask.charAt(0) === '-' ? -originalValue : Number(originalValue);
-  isNegative = value < 0 ? value = -value : 0; // process only abs(), and turn on flag.
-
-  // search for separator for grp & decimal, anything not digit, not +/- sign, not #.
-  result = mask.match(/[^\d\-\+#]/g);
-  const decimal = (result && result[result.length - 1]) || '.'; // treat the right most symbol as decimal
-  const group = (result && result[1] && result[0]) || ','; // treat the left most symbol as group separator
-
-  // split the decimal for the format string if any.
-  mask = mask.split(decimal);
-  // Fix the decimal first, toFixed will auto fill trailing zero.
-  value = value.toFixed(mask[1] && mask[1].length);
-  value = String(Number(value)); // convert number to string to trim off *all* trailing decimal zero(es)
-
-  // fill back any trailing zero according to format
-  const posTrailZero = mask[1] && mask[1].lastIndexOf('0'); // look for last zero in format
-  const part = value.split('.');
-  // integer will get !part[1]
-  if (!part[1] || (part[1] && part[1].length <= posTrailZero)) {
-    value = (Number(value)).toFixed(posTrailZero + 1);
-  }
-  const szSep = mask[0].split(group); // look for separator
-  mask[0] = szSep.join(''); // join back without separator for counting the pos of any leading 0.
-
-  const posLeadZero = mask[0] && mask[0].indexOf('0');
-  if (posLeadZero > -1) {
-    while (part[0].length < (mask[0].length - posLeadZero)) {
-      part[0] = `0${part[0]}`;
-    }
-  } else if (Number(part[0]) === 0) {
-    part[0] = '';
-  }
-
-  value = value.split('.');
-  value[0] = part[0];
-
-  // process the first group separator from decimal (.) only, the rest ignore.
-  // get the length of the last slice of split result.
-  const posSeparator = (szSep[1] && szSep[szSep.length - 1].length);
-  if (posSeparator) {
-    integer = value[0];
-    str = '';
-    offset = integer.length % posSeparator;
-    len = integer.length;
-    for (index = 0; index < len; index++) {
-      str += integer.charAt(index); // ie6 only support charAt for sz.
-      // -posSeparator so that won't trail separator on full length
-      // jshint -W018
-      if (!((index - offset + 1) % posSeparator) && index < len - posSeparator) {
-        str += group;
-      }
-    }
-    value[0] = str;
-  }
-  value[1] = (mask[1] && value[1]) ? decimal + value[1] : '';
-
-  // remove negative sign if result is zero
-  result = value.join('');
-  if (result === '0' || result === '') {
-    // remove negative sign if result is zero
-    isNegative = false;
-  }
-
-  // put back any negation, combine integer and fraction, and add back prefix & suffix
-  return prefix + ((isNegative ? '-' : '') + result) + suffix;
-}

src/paint.jsx

@@ -1,28 +0,0 @@
-import initializeStore from './store';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Root from './root.jsx';
-import { initializeCubes } from './dataset';
-
-export default async function paint ($element, layout, component) {
-  const cubes = await initializeCubes({
-    component,
-    layout
-  });
-  const state = await initializeStore({
-    $element,
-    component,
-    cubes,
-    layout
-  });
-  const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';
-  const jsx = (
-    <Root
-      qlik={component}
-      state={state}
-      editmodeClass={editmodeClass}
-    />
-  );
-
-  ReactDOM.render(jsx, $element[0]);
-}

src/root.jsx

@@ -4,51 +4,55 @@ 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 }) => (
-  <LinkedScrollWrapper>
-    <div className={`kpi-table ${editmodeClass}`}>
-      <HeadersTable
-        data={state.data}
-        general={state.general}
-        qlik={qlik}
-        styling={state.styling}
-      />
-      <LinkedScrollSection linkVertical>
-        <DataTable
-          data={state.data}
-          general={state.general}
-          qlik={qlik}
-          renderData={false}
-          styling={state.styling}
-        />
-      </LinkedScrollSection>
-    </div>
-    <div className={`data-table ${editmodeClass}`}>
-      <LinkedScrollSection linkHorizontal>
+const Root = ({ state, component, editmodeClass }) => (
+  <div className="root">
+    <LinkedScrollWrapper>
+      <div className={`kpi-table ${editmodeClass}`}>
         <HeadersTable
           data={state.data}
           general={state.general}
-          qlik={qlik}
+          isKpi
+          component={component}
           styling={state.styling}
         />
-      </LinkedScrollSection>
-      <LinkedScrollSection
-        linkHorizontal
-        linkVertical
-      >
-        <DataTable
-          data={state.data}
-          general={state.general}
-          qlik={qlik}
-          styling={state.styling}
-        />
-      </LinkedScrollSection>
-    </div>
-  </LinkedScrollWrapper>
+        <LinkedScrollSection linkVertical>
+          <DataTable
+            data={state.data}
+            general={state.general}
+            component={component}
+            renderData={false}
+            styling={state.styling}
+          />
+        </LinkedScrollSection>
+      </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 = {
-  qlik: PropTypes.shape({}).isRequired,
+  component: PropTypes.shape({}).isRequired,
   state: PropTypes.shape({
     data: PropTypes.object.isRequired,
     general: PropTypes.object.isRequired,

src/store.js

@@ -1,10 +1,11 @@
 import initializeTransformed from './initialize-transformed';
 
-async function initialize ({ $element, layout, component, cubes }) {
+async function initialize ({ $element, layout, component, dataCube, designList }) {
   const transformedProperties = await initializeTransformed({
     $element,
     component,
-    cubes,
+    dataCube,
+    designList,
     layout
   });
 

src/tooltip/index.jsx

@@ -25,23 +25,21 @@ class Tooltip extends React.PureComponent {
   }
 
   render () {
-    const { children, tooltipText } = this.props;
+    const { children, styling, tooltipText } = this.props;
     const { showTooltip } = this.state;
-
     return (
       <div
         onMouseMove={handleCalculateTooltipPosition}
         onMouseOut={this.handleRenderTooltip}
         onMouseOver={this.handleRenderTooltip}
+        style={{ fontFamily: styling.options.fontFamily }}
       >
         {children}
 
         {showTooltip
           ? (
-            <div
-              className="tooltip-wrapper"
-            >
-              <p>
+            <div className="tooltip-wrapper">
+              <p style={{ fontFamily: styling.options.fontFamily }}>
                 {tooltipText}
               </p>
             </div>
@@ -56,6 +54,11 @@ Tooltip.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
   ]).isRequired,
+  styling: PropTypes.shape({
+    options: PropTypes.shape({
+      fontFamily: PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired,
   tooltipText: PropTypes.string.isRequired
 };
 

src/utilities.js

@@ -9,21 +9,6 @@ export function distinctArray (array) {
     .map(entry => JSON.parse(entry));
 }
 
-export function addSeparators (number, thousandSeparator, decimalSeparator, numberOfDecimals) {
-  const numberString = number.toFixed(numberOfDecimals);
-  const numberStringParts = numberString.split('.');
-  let [
-    wholeNumber,
-    decimal
-  ] = numberStringParts;
-  decimal = numberStringParts.length > 1 ? decimalSeparator + decimal : '';
-  const regexCheckForThousand = /(\d+)(\d{3})/;
-  while (regexCheckForThousand.test(wholeNumber)) {
-    wholeNumber = wholeNumber.replace(regexCheckForThousand, `$1${thousandSeparator}$2`);
-  }
-  return wholeNumber + decimal;
-}
-
 export function Deferred () {
   this.promise = new Promise((resolve, reject) => {
     this.resolve = resolve;

stylelint.config.js

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