Merge pull request #47 from qlik-oss/DEB-153/Icon

Updated the icon to pivot-table

.circleci/config.yml

@@ -26,9 +26,6 @@ jobs:
             --blackduck.username="svc-blackduck" \
             --blackduck.password=${svc_blackduck} \
             --detect.project.name="viz-bundle-qlik-smart-pivot"
-      - run:
-          name: Run tests
-          command: npm run test-once
 
   bump-version:
     <<: *defaults
@@ -56,16 +53,18 @@ jobs:
           command: |
             export VERSION=$(scripts/get-bumped-version.sh)
             echo "Version: ${VERSION}"
-            npm run build
+            npm run build:zip
+            sudo chmod +x scripts/verify-files.sh
+            scripts/verify-files.sh
           environment:
             NODE_ENV: production
       - persist_to_workspace:
           root: ~/qlik-smart-pivot
           paths:
-            - build
+            - dist
       - store_artifacts:
-          path: build
-          destination: build
+          path: dist
+          destination: dist
   deploy:
     <<: *defaults
     steps:

.gitignore

@@ -19,7 +19,7 @@ $RECYCLE.BIN/
 
 # Temporary build files
 node_modules/
-build/
+dist/
 BUMPED_VERSION
 
 # =========================

README.md

@@ -16,11 +16,6 @@ It's specifically focused on financial reports, trying to solve some common need
 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).
 
 
-# If the import does not work at first time
-- remove [Accounts.csv](resources/Accounts.csv), [Accounts2.csv](resources/Accounts2.csv) and [Excel.png](resources/Excel.png), zip it again and import.
-- Then reintroduce [Accounts.csv](resources/Accounts.csv), [Accounts2.csv](resources/Accounts2.csv) and [Excel.png](resources/Excel.png), zip it again and import.
-
-
 # Installation
 
 1. Download the extension zip, `qlik-smart-pivot_<version>.zip`, from the latest release(https://github.com/qlik-oss/PLSmartPivot/releases/latest)

assets/qlik-smart-pivot.qext

@@ -1,16 +0,0 @@
-{
-	"name": "P&L pivot",
-	"description": "Profit & Loss reporting with color and font customizations.",
-	"type": "visualization",
-	"version": "X.Y.Z",
-	"icon": "table",
-	"preview": "",
-	"author": "Ivan Felipe Asensio <ivan.felipe@qlik.com>",
-	"homepage": "",
-	"keywords": "qlik-sense, visualization",
-	"license": "MIT",
-	"repository": "https://github.com/qlik-oss/PLSmartPivot",
-	"dependencies": {
-		"qlik-sense": ">=5.5.x"
-	}
-}

assets/wbfolder.wbl

@@ -1,3 +0,0 @@
-qlik-smart-pivot.js;
-qlik-smart-pivot.css;
-qlik-smart-pivot.qext

gulpfile.js

@@ -1,23 +1,61 @@
 var gulp = require('gulp');
+var gutil = require('gulp-util');
 var zip = require('gulp-zip');
 var del = require('del');
-var path = require('path');
-var settings = require('./settings');
 var webpackConfig = require('./webpack.config');
 var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
-var jeditor = require("gulp-json-editor");
+var pkg = require('./package.json');
 
-var srcFiles = path.resolve('./src/**/*.*');
+var DIST = './dist';
+var VERSION = process.env.VERSION || 'local-dev';
 
-gulp.task('remove-build-folder', function(){
-  return del([settings.buildDestination], { force: true });
+gulp.task('qext', function () {
+	var qext = {
+		name: 'P&L pivot',
+		type: 'visualization',
+		description: pkg.description + '\nVersion: ' + VERSION,
+		version: VERSION,
+		icon: 'pivot-table',
+		preview: 'qlik-smart-pivot.png',
+		keywords: 'qlik-sense, visualization',
+		author: pkg.author,
+		homepage: pkg.homepage,
+		license: pkg.license,
+		repository: pkg.repository,
+		dependencies: {
+			'qlik-sense': '>=5.5.x'
+		}
+	};
+	if (pkg.contributors) {
+		qext.contributors = pkg.contributors;
+	}
+	var src = require('stream').Readable({
+		objectMode: true
+	});
+	src._read = function () {
+		this.push(new gutil.File({
+			cwd: '',
+			base: '',
+			path: pkg.name + '.qext',
+			contents: Buffer.from(JSON.stringify(qext, null, 4))
+		}));
+		this.push(null);
+	};
+	return src.pipe(gulp.dest(DIST));
+});
+
+gulp.task('clean', function(){
+  return del([DIST], { force: true });
 });
 
 gulp.task('zip-build', function(){
-  return gulp.src(settings.buildDestination + '/**/*')
-    .pipe(zip(`${settings.name}_${settings.version}.zip`))
-    .pipe(gulp.dest(settings.buildDestination));
+  return gulp.src(DIST + '/**/*')
+    .pipe(zip(`${pkg.name}_${VERSION}.zip`))
+    .pipe(gulp.dest(DIST));
+});
+
+gulp.task('add-assets', function(){
+  return gulp.src('./assets/**/*').pipe(gulp.dest(DIST));
 });
 
 gulp.task('webpack-build', done => {
@@ -36,40 +74,14 @@ gulp.task('webpack-build', done => {
   });
 });
 
-gulp.task('update-qext-version', function () {
-  return gulp.src(`${settings.buildDestination}/${settings.name}.qext`)
-    .pipe(jeditor({
-      'version': settings.version
-    }))
-    .pipe(gulp.dest(settings.buildDestination));
-});
-
 gulp.task('build',
-  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', 'zip-build')
+  gulp.series('clean', 'webpack-build', 'qext', 'add-assets')
+);
+
+gulp.task('zip',
+  gulp.series('build', 'zip-build')
 );
 
 gulp.task('default',
   gulp.series('build')
 );
-
-gulp.task('watch', () => new Promise((resolve, reject) => {
-  webpackConfig.entry.unshift('webpack-dev-server/client?http://localhost:' + settings.port);
-  const compiler = webpack(webpackConfig);
-  const originalOutputFileSystem = compiler.outputFileSystem;
-  const devServer = new WebpackDevServer(compiler, {
-    headers: {
-      "Access-Control-Allow-Origin": "*"
-    },
-  }).listen(settings.port, 'localhost', error => {
-    compiler.outputFileSystem = originalOutputFileSystem;
-    if (error) {
-      console.error(error); // eslint-disable-line no-console
-      return reject(error);
-    }
-
-    // eslint-disable-next-line no-console
-    console.log('Listening at localhost:' + settings.port);
-
-    resolve(null, devServer);
-  });
-}));

karma.conf.js

@@ -1,69 +0,0 @@
-const path = require('path');
-const settings = require('./settings');
-
-module.exports = (config) => {
-  config.set({
-    browsers: ['SlimChromeHeadless'],
-    customLaunchers: {
-      SlimChromeHeadless: {
-        base: 'ChromeHeadless',
-        flags: [
-          '--headless',
-          '--disable-gpu',
-          '--disable-translate',
-          '--disable-extensions'
-        ]
-      }
-    },
-    files: [
-      {
-        pattern: 'src/**/*.spec.js',
-        watched: true
-      }
-    ],
-    frameworks: ['jasmine'],
-    preprocessors: {
-      'src/**/*.spec.{js, jsx}': [
-        'webpack',
-        'sourcemap'
-      ]
-    },
-    webpack: {
-      devtool: 'source-map',
-      externals: {
-        jquery: {
-          amd: 'jquery',
-          commonjs: 'jquery',
-          commonjs2: 'jquery',
-          root: '_'
-        }
-      },
-      mode: settings.mode,
-      module: {
-        rules: [
-          {
-            exclude: [/node_modules/],
-            loader: 'babel-loader',
-            options: {
-              plugins: [
-                '@babel/plugin-transform-async-to-generator',
-                '@babel/plugin-proposal-class-properties'],
-              presets: ['@babel/preset-react']
-            },
-            test: /\.(js|jsx)$/
-          },
-          {
-            loader: 'ignore-loader',
-            test: /\.less$/
-          }
-        ]
-      },
-      resolve: {
-        alias: {
-          'test-utilities': path.resolve('test/test-utilities')
-        },
-        modules: ['node_modules']
-      }
-    }
-  });
-};

package.json

@@ -1,18 +1,15 @@
 {
   "name": "qlik-smart-pivot",
   "version": "0.0.1",
-  "description": "Formatted table for P&L reports.",
-  "keywords": "smart pivot qliksense extension",
+  "description": "Profit & Loss reporting with color and font customizations.",
+  "homepage": "",
   "repository": "https://github.com/iviasensio/PLSmartPivot",
   "author": "Ivan Felipe Asensio <ivan.felipe@qlik.com>",
   "license": "MIT",
   "scripts": {
     "build": "gulp build",
+    "build:zip": "gulp zip",
     "eslint": "eslint src",
-    "eslint:fix": "eslint --fix src",
-    "test": "karma start karma.conf.js",
-    "test-once": "karma start karma.conf.js --single-run",
-    "watch": "gulp watch",
     "stylelint": "stylelint src/main.less"
   },
   "devDependencies": {
@@ -24,7 +21,6 @@
     "@babel/preset-react": "7.0.0",
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.4",
-    "copy-webpack-plugin": "4.5.3",
     "css-loader": "1.0.0",
     "del": "2.0.2",
     "enzyme": "3.8.0",
@@ -33,15 +29,8 @@
     "eslint-loader": "2.1.1",
     "eslint-plugin-react": "7.11.1",
     "gulp": "4.0.0",
-    "gulp-json-editor": "2.4.3",
+    "gulp-util": "^3.0.7",
     "gulp-zip": "3.0.2",
-    "jasmine-core": "3.2.1",
-    "jasmine-enzyme": "7.0.1",
-    "karma": "3.0.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-jasmine": "1.1.2",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "3.0.5",
     "less": "3.8.1",
     "less-loader": "4.1.0",
     "lodash.merge": "4.6.1",
@@ -49,9 +38,7 @@
     "stylelint": "8.4.0",
     "stylelint-webpack-plugin": "0.10.5",
     "text-loader": "0.0.1",
-    "webpack": "4.20.2",
-    "webpack-cli": "3.1.2",
-    "webpack-dev-server": "3.1.10"
+    "webpack": "4.20.2"
   },
   "dependencies": {
     "prop-types": "15.6.2",

resources/Accounts.csv

@@ -1,44 +0,0 @@
-Accounts;Bold;Background;FontStyle;LetterColor;Align;Size;Comment
-Revenues;;rgb(183, 219, 255);<italic>;;<center>;;<comment>
-Gross sales revenues;;;;;;;
-Less return & allowances;;;;;;;
-Net sales revenues;<bold>;#efefef;;;;;
-Cost of goods sold;<bold>;;;;;;
-Direct materials;;;;;;;
-Direct labor;;;;;;;
-Manufacturing overhead;;#b7dbff;<italic>;;<center>;;<comment>
-Indirect labor;;;;;;;
-Depreciation, manufacturing equip;;;;;;;
-Other mfr overhead;;;;;;;
-Net mfr overhead;<bold>;#CCC0FF;;;;;
-Net costs of goods sold;<bold>;#CCC0FF;;;;;
-Gross profit;<bold>;#C4C4C4;;;<center>;<large>;
-Operating expenses;<bold>;;<italic>;;;;
-Selling expenses;;;;;;;
-Sales salaries;;;;;;;
-Warranty expenses;;;;;;;
-Depreciation, store equipment;;;;;;;
-Other selling expenses3;;;;;;;
-Total selling expenses;<bold>;#CCC0FF;;;;;
-General & administrative expenses;;#b7dbff;<italic>;;<center>;;<comment>
-Administration salaries;;;;;;;
-Rent expenses;;;;;;;
-Depreciation, computers;;;;;;;
-Other general & admin expenses;;;;;;;
-total general & admin expenses;<bold>;#efefef;;;;;
-total operating expenses;<bold>;#CCC0FF;;;;;
-Operating income before taxes;<bold>;#C4C4C4;;<white>;;<large>;
-Financial revenue & expenses;;#b7dbff;<italic>;;<center>;;<comment>
-Revenue from investments;;;;;;;
-Less interest expenses;;;;;;;
-Net financial gain (expense);;;;;;;
-Income before tax & extraordinary items;<bold>;#C4C4C4;;<white>;;<large>;
-Less income tax on operations;;;;;;;
-Income before extraordinary items;;;;;;;
-Extraordinary items;;#b7dbff;<italic>;;<center>;;<comment>
-Sale of land;;;;;;;
-Less initial cost;;;;;;;
-Net gain on sale of land;<bold>;#efefef;;;;;
-Less income tax on gain;;;;;;;
-Extraordinary items after tax;<bold>;#efefef;;;;;
-Net Income (Profit);<bold>;#C4C4C4;;<white>;<center>;<large>;

resources/Accounts2.csv

@@ -1,21 +0,0 @@
-Accounts;Bold;Background;FontStyle;LetterColor;Align;Size;Comment
-Revenues;<bold>;;<italic>;;<center>;;<comment>
-Net sales revenues;<bold>;rgb(128, 191, 255);;;;;
-Cost of goods sold;<bold>;rgb(128, 191, 255);;;;;
-Manufacturing overhead;<bold>;;<italic>;;<center>;;<comment>
-Net mfr overhead;<bold>;rgb(128, 191, 255);;;;;
-Net costs of goods sold;<bold>;rgb(128, 191, 255);;;;;
-Gross profit;<bold>;rgb(0, 102, 204);<white>;;<center>;<large>;
-Operating expenses;<bold>;;<italic>;;;;
-Total selling expenses;<bold>;rgb(128, 191, 255);;;;;
-General & administrative expenses;<bold>;;<italic>;;<center>;;<comment>
-Other general & admin expenses;<bold>;rgb(128, 191, 255);<white>;;<center>;<large>;
-total general & admin expenses;<bold>;#efefef;;;;;
-total operating expenses;<bold>;rgb(128, 191, 255);;;;;
-Operating income before taxes;<bold>;rgb(0, 102, 204);;<white>;;<large>;
-Financial revenue & expenses;<bold>;;<italic>;;<center>;;<comment>
-Income before tax & extraordinary items;<bold>;rgb(0, 102, 204);;<white>;;<large>;
-Extraordinary items;<bold>;;<italic>;;<center>;;<comment>
-Net gain on sale of land;<bold>;rgb(0, 102, 204);<white>;;<center>;<large>;
-Extraordinary items after tax;<bold>;rgb(0, 102, 204);<white>;;<center>;<large>;
-Net Income (Profit);<bold>;#191970;;<white>;<center>;<large>;

resources/QlikLook.csv

@@ -1,21 +0,0 @@
-Accounts;Bold;Background;FontStyle;LetterColor;Align;Size;Comment
-Revenues;<bold>;;<italic>;;<center>;;<comment>
-Net sales revenues;<bold>;RGB(225,226,226);;;;;
-Cost of goods sold;<bold>;RGB(225,226,226);;;;;
-Manufacturing overhead;<bold>;;<italic>;;<center>;;<comment>
-Net mfr overhead;<bold>;RGB(225,226,226);;;;;
-Net costs of goods sold;<bold>;RGB(225,226,226);;;;;
-Gross profit;<bold>;RGB(193,216,47);;;<center>;<large>;
-Operating expenses;<bold>;;<italic>;;;;
-Total selling expenses;<bold>;RGB(225,226,226);;;;;
-General & administrative expenses;<bold>;;<italic>;;<center>;;<comment>
-Other general & admin expenses;<bold>;rgb(128, 191, 255);<white>;;<center>;<large>;
-total general & admin expenses;<bold>;#efefef;;;;;
-total operating expenses;<bold>;rgb(128, 191, 255);<white>;;;;
-Operating income before taxes;<bold>;RGB(193,216,47);;;;<large>;
-Financial revenue & expenses;<bold>;;<italic>;;<center>;;<comment>
-Income before tax & extraordinary items;<bold>;RGB(193,216,47);;;;<large>;
-Extraordinary items;<bold>;;<italic>;;<center>;;<comment>
-Net gain on sale of land;<bold>;RGB(193,216,47);;;<center>;<large>;
-Extraordinary items after tax;<bold>;RGB(193,216,47);;;<center>;<large>;
-Net Income (Profit);<bold>;#191970;;<white>;<center>;<large>;

scripts/create-release.sh

@@ -2,8 +2,8 @@
 set -o errexit
 
 echo "Creating release for version: $VERSION"
-echo "Artifact name: ./build/${3}_${VERSION}.zip"
-$HOME/bin/ghr -t ${ghoauth} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${VERSION} "./build/${3}_${4}.zip"
+echo "Artifact name: ./dist/${3}_${VERSION}.zip"
+$HOME/bin/ghr -t ${ghoauth} -u ${CIRCLE_PROJECT_USERNAME} -r ${CIRCLE_PROJECT_REPONAME} -c ${CIRCLE_SHA1} ${VERSION} "./dist/${3}_${4}.zip"
 
 
 # Usage

scripts/verify-files.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+# The build script has a known race-condition that sometimes causes it to not include all files
+# in the built zip. This script verifies the that the zip contains the correct number of files.
+
+set -o errexit
+
+echo "Verifying built file count"
+
+while read line; do
+    if [[ $line =~ ^\"name\": ]]; then
+        name=${line#*: \"}
+        name=${name%\"*}
+    fi
+done < package.json
+
+expected_file_count=$(($(find dist -type f | wc -l)-1))
+zip_file_count=$(zipinfo dist/${name}_${VERSION}.zip | grep ^- | wc -l)
+
+if [ "${expected_file_count}" -ne "${zip_file_count}" ]; then
+    # File count is incorrect
+    echo "Expected file count ${expected_file_count}, but was ${zip_file_count}"
+    exit 1
+fi
+echo "File count OK"
+exit 0

settings.js

@@ -1,13 +0,0 @@
-const path = require('path');
-const packageJSON = require('./package.json');
-
-const defaultBuildDestination = path.resolve("./build");
-
-module.exports = {
-  buildDestination: process.env.BUILD_PATH || defaultBuildDestination,
-  mode: process.env.NODE_ENV || 'development',
-  name: packageJSON.name,
-  version: process.env.VERSION || 'local-dev',
-  url: process.env.BUILD_URL || defaultBuildDestination,
-  port: process.env.PORT || 8085
-};

src/data-table/data-cell.jsx

@@ -3,9 +3,130 @@ import PropTypes from 'prop-types';
 import { ApplyPreMask } from '../masking';
 import { addSeparators } from '../utilities';
 import Tooltip from '../tooltip/index.jsx';
+
+class DataCell extends React.PureComponent {
+  constructor (props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect () {
+    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
+    const hasSecondDimension = dimensionCount > 1;
+    if (!allowFilteringByClick) {
+      return;
+    }
+
+    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
+
+    if (hasSecondDimension) {
+      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
+    }
+  }
+
+  render () {
+    const {
+      data,
+      general,
+      measurement,
+      styleBuilder,
+      styling
+    } = this.props;
+
+    let textAlignment = styling.options.textAlignment || 'Right';
+
+    let cellStyle = {
+      fontFamily: styling.options.fontFamily,
+      ...styleBuilder.getStyle(),
+      paddingLeft: '5px',
+      textAlign: textAlignment
+    };
+
+    const isEmptyCell = measurement.displayValue === '';
+    const isColumnPercentageBased = (/%/).test(measurement.format);
+    let formattedMeasurementValue;
+    if (isEmptyCell) {
+      formattedMeasurementValue = '';
+      cellStyle.cursor = 'default';
+    } else if (styleBuilder.hasComments()) {
+      formattedMeasurementValue = '.';
+    } else {
+      formattedMeasurementValue = formatMeasurementValue(measurement, styling);
+    }
+
+    const { conditionalColoring } = styling;
+    if (conditionalColoring.enabled) {
+      const isValidConditionalColoringValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
+      const isSpecifiedRow =
+        conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
+      const shouldHaveConditionalColoring = conditionalColoring.colorAllRows || isSpecifiedRow;
+      if (isValidConditionalColoringValue && shouldHaveConditionalColoring) {
+        const { color, textColor } = getConditionalColor(measurement, conditionalColoring);
+        cellStyle.backgroundColor = color.color;
+        cellStyle.color = textColor.color;
+      }
+    }
+
+    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';
+    }
+
+    return (
+      <td
+        className={`${cellClass}${general.cellSuffix}`}
+        onClick={isEmptyCell ? null : this.handleSelect}
+        style={cellStyle}
+      >
+        <Tooltip
+          styling={styling}
+          tooltipText={formattedMeasurementValue}
+        >
+          {formattedMeasurementValue}
+        </Tooltip>
+      </td>
+    );
+  }
+}
+
+DataCell.propTypes = {
+  data: PropTypes.shape({
+    headers: PropTypes.shape({
+      measurements: PropTypes.array.isRequired
+    }).isRequired
+  }).isRequired,
+  general: PropTypes.shape({
+    cellSuffix: 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,
+  styleBuilder: PropTypes.shape({
+    hasComments: PropTypes.func.isRequired
+  }).isRequired,
+  styling: PropTypes.shape({
+    symbolForNulls: PropTypes.any.isRequired
+  }).isRequired
+};
+
+export default DataCell;
+
 function formatMeasurementValue (measurement, styling) {
-  // TODO: measurement.name is a horrible propertyname, it's actually the column header
-  const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%';
+  const isColumnPercentageBased = (/%/).test(measurement.format);
   let formattedMeasurementValue = '';
   if (isColumnPercentageBased) {
     if (isNaN(measurement.value)) {
@@ -52,128 +173,12 @@ function formatMeasurementValue (measurement, styling) {
   return formattedMeasurementValue;
 }
 
-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;
 }
-class DataCell extends React.PureComponent {
-  constructor (props) {
-    super(props);
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-
-  handleSelect () {
-    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
-    const hasSecondDimension = dimensionCount > 1;
-    if (!allowFilteringByClick) {
-      return;
-    }
-
-    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
-
-    if (hasSecondDimension) {
-      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
-    }
-  }
-
-  render () {
-    const {
-      data,
-      general,
-      measurement,
-      styleBuilder,
-      styling
-    } = this.props;
-
-    const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
-    let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
-    if (styleBuilder.hasComments()) {
-      formattedMeasurementValue = '.';
-    }
-    let textAlignment = 'Right';
-    const textAlignmentProp = styling.options.textAlignment;
-    if (textAlignmentProp) {
-      textAlignment = textAlignmentProp;
-    }
-
-    let cellStyle = {
-      fontFamily: styling.options.fontFamily,
-      ...styleBuilder.getStyle(),
-      paddingLeft: '5px',
-      textAlign: textAlignment
-
-    };
-
-    const { 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
-      };
-    }
-
-    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';
-    }
-
-    return (
-      <td
-        className={`${cellClass}${general.cellSuffix}`}
-        onClick={this.handleSelect}
-        style={cellStyle}
-      >
-        <Tooltip
-          tooltipText={formattedMeasurementValue}
-        >
-          {formattedMeasurementValue}
-        </Tooltip>
-      </td>
-    );
-  }
-}
-
-DataCell.propTypes = {
-  data: PropTypes.shape({
-    headers: PropTypes.shape({
-      measurements: PropTypes.array.isRequired
-    }).isRequired
-  }).isRequired,
-  general: PropTypes.shape({
-    cellSuffix: PropTypes.string.isRequired
-  }).isRequired,
-  measurement: PropTypes.shape({
-    format: PropTypes.string,
-    name: PropTypes.string,
-    value: PropTypes.any
-  }).isRequired,
-  qlik: PropTypes.shape({
-    backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
-    }).isRequired
-  }).isRequired,
-  styleBuilder: PropTypes.shape({
-    hasComments: PropTypes.func.isRequired
-  }).isRequired,
-  styling: PropTypes.shape({
-    symbolForNulls: PropTypes.any.isRequired
-  }).isRequired
-};
-
-export default DataCell;

src/data-table/index.jsx

@@ -40,13 +40,15 @@ 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
+                    entry={dimensionEntry}
+                    qlik={qlik}
+                    rowStyle={rowStyle}
+                    styleBuilder={styleBuilder}
+                    styling={styling}
+                  /> : null
+                }
                 {renderData && injectSeparators(
                   matrix[dimensionIndex],
                   styling.useSeparatorColumns,
@@ -69,6 +71,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 (

src/data-table/row-header.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
+import Tooltip from '../tooltip/index.jsx';
 
 class RowHeader extends React.PureComponent {
   constructor (props) {
@@ -15,18 +16,26 @@ class RowHeader extends React.PureComponent {
   }
 
   render () {
-    const { entry, rowStyle, styleBuilder, styling } = this.props;
+    const { entry, rowStyle, styleBuilder, styling, qlik } = this.props;
+    const inEditState = qlik.inEditState();
+
     return (
       <td
         className="fdim-cells"
         onClick={this.handleSelect}
         style={rowStyle}
       >
-        <HeaderPadding
-          styleBuilder={styleBuilder}
+        <Tooltip
+          isTooltipActive={!inEditState}
           styling={styling}
-        />
-        {entry.displayValue}
+          tooltipText={entry.displayValue}
+        >
+          <HeaderPadding
+            styleBuilder={styleBuilder}
+            styling={styling}
+          />
+          {entry.displayValue}
+        </Tooltip>
       </td>
     );
   }
@@ -38,7 +47,12 @@ RowHeader.propTypes = {
   }).isRequired,
   qlik: PropTypes.shape({
     backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
     }).isRequired
   }).isRequired,
   rowStyle: PropTypes.shape({}).isRequired,

src/dataset.js

@@ -0,0 +1,59 @@
+import qlik from 'qlik';
+
+function createCube (definition, app) {
+  return new Promise(resolve => {
+    app.createCube(definition, resolve);
+  });
+}
+
+async function buildDataCube (originCubeDefinition, hasTwoDimensions, app) {
+  const cubeDefinition = {
+    ...originCubeDefinition,
+    qInitialDataFetch: [
+      {
+        qHeight: 1000,
+        qWidth: 10
+      }
+    ],
+    qDimensions: [originCubeDefinition.qDimensions[0]],
+    qMeasures: originCubeDefinition.qMeasures
+  };
+  if (hasTwoDimensions) {
+    cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[1]);
+  }
+  const cube = await createCube(cubeDefinition, app);
+  return cube.qHyperCube.qDataPages[0].qMatrix;
+}
+
+export async function initializeDataCube (component, layout) {
+  const app = qlik.currApp(component);
+
+  let properties;
+  if (component.backendApi.isSnapshot) {
+    // Fetch properties of source
+    properties = (await app.getObjectProperties(layout.sourceObjectId)).properties;
+  } else {
+    properties = await component.backendApi.getProperties();
+  }
+
+  return buildDataCube(
+    properties.qHyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
+}
+
+export function initializeDesignList (component, layout) {
+  if (!layout.stylingfield) {
+    return null;
+  }
+
+  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,169 @@
+const conditionalColoring = {
+  type: 'items',
+  label: 'Color by condition',
+  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 by condition',
+      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;
+      }
+    },
+    ThresholdPoor: {
+      ref: 'conditionalcoloring.threshold_poor',
+      translation: 'Poor is less than',
+      type: 'number',
+      defaultValue: -0.1,
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    ColorPoor: {
+      ref: 'conditionalcoloring.color_poor',
+      label: 'Poor color fill',
+      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 is less than',
+      type: 'number',
+      defaultValue: 0,
+      show (data) {
+        return data.conditionalcoloring.enabled;
+      }
+    },
+    ColorFair: {
+      ref: 'conditionalcoloring.color_fair',
+      label: 'Fair color fill',
+      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 color fill',
+      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

@@ -27,23 +27,23 @@ const header = {
       component: 'color-picker',
       defaultValue: {
         index: 6,
-        color: "#4477aa"
+        color: '#4477aa'
       },
-      dualOutput: true,
-      label: 'BackGround Header Color',
+      label: 'Background Header Color',
       ref: 'HeaderColorSchema',
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     HeaderTextColor: {
       ref: 'HeaderTextColorSchema',
       label: 'Text Header Color',
       component: 'color-picker',
-      dualOutput: true,
       defaultValue: {
         index: 1,
-        color: "#ffffff"
+        color: '#ffffff'
       },
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     HeaderFontSize: {
       ref: 'lettersizeheader',
@@ -60,7 +60,7 @@ const header = {
           label: 'Medium'
         }
       ],
-      defaultValue: 2
+      defaultValue: 1
     }
   }
 };

src/definition/index.js

@@ -1,8 +1,7 @@
 import pagination from './pagination';
 import header from './header';
-import formatted from './formatted';
-import conceptSemaphores from './concept-semaphores';
-import metricSemaphores from './metric-semaphores';
+import tableFormat from './table-format';
+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: formatted,
+        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,106 +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: '0',
-      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',
-      defaultValue: {
-        index: 8,
-        color: '#f93f17'
-      }
-    },
-    ColorStatus1Text: {
-      ref: 'colorstatus1text',
-      label: 'Critic Color Text',
-      type: 'object',
-      component: 'color-picker',
-      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',
-      defaultValue: {
-        index: 9,
-        color: '#ffcf02'
-      }
-    },
-    ColorStatus2Text: {
-      ref: 'colorstatus2text',
-      label: 'Medium Color Text',
-      type: 'object',
-      component: 'color-picker',
-      defaultValue: {
-        index: 12,
-        color: '#000000'
-      }
-    },
-    ColorStatus3: {
-      ref: 'colorstatus3',
-      label: 'Success Color Fill',
-      type: 'object',
-      component: 'color-picker',
-      defaultValue: {
-        index: 10,
-        color: '#276e27'
-      }
-    },
-    ColorStatus3Text: {
-      ref: 'colorstatus3text',
-      label: 'Success Color Text',
-      type: 'object',
-      component: 'color-picker',
-      defaultValue: {
-        index: 11,
-        color: '#ffffff'
-      }
-    }
-  }
-};
-
-export default metricSemaphores;

src/definition/pagination.js

@@ -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,59 @@
-const formatted = {
+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',
   items: {
+    StylingField: {
+      ref: 'stylingfield',
+      disabledRef: '',
+      type: 'string',
+      component: 'dropdown',
+      label: 'Style with field',
+      options: function () {
+        return getFieldList().then(function (items) {
+          items.unshift(
+            {
+              value: '',
+              label: 'None'
+            });
+          return items;
+        });
+      }
+    },
     IndentBool: {
       ref: 'indentbool',
       type: 'boolean',
       label: 'Indent',
-      defaultValue: true
+      defaultValue: false,
+      show: data => !hasDesignDimension(data)
     },
     SeparatorColumns: {
       ref: 'separatorcols',
@@ -14,31 +61,17 @@ const formatted = {
       label: 'Separator Columns',
       defaultValue: false
     },
-    CustomFileBool: {
-      ref: 'customfilebool',
-      type: 'boolean',
-      label: 'Include External File',
-      defaultValue: false
-    },
-    CustomFile: {
-      ref: 'customfile',
-      label: 'Name of CSV file (; separated)',
-      type: 'string',
-      defaultValue: '',
-      show (data) {
-        return data.customfilebool;
-      }
-    },
     rowEvenBGColor: {
       component: 'color-picker',
       defaultValue: {
         color: '#fff',
         index: 1
       },
-      dualOutput: true,
       label: 'Even row background color',
       ref: 'rowEvenBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true,
+      show: data => !hasDesignDimension(data)
     },
     rowOddBGColor: {
       component: 'color-picker',
@@ -46,10 +79,11 @@ const formatted = {
         color: '#b6d7ea',
         index: 4
       },
-      dualOutput: true,
       label: 'Odd row background color',
       ref: 'rowOddBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true,
+      show: data => !hasDesignDimension(data)
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',
@@ -99,9 +133,7 @@ const formatted = {
         }
       ],
       defaultValue: 'Black',
-      show (data) {
-        return !data.customfilebool;
-      }
+      show: data => !hasDesignDimension(data)
     },
     FontFamily: {
       ref: 'FontFamily',
@@ -110,35 +142,35 @@ const formatted = {
       label: 'FontFamily',
       options: [
         {
-          value: 'QlikView Sans',
+          value: 'QlikView Sans, -apple-system, sans-serif',
           label: 'QlikView Sans'
         },
         {
-          value: 'Arial',
+          value: 'Arial, -apple-system, sans-serif',
           label: 'Arial'
         },
         {
-          value: 'Calibri',
+          value: 'Calibri, -apple-system, sans-serif',
           label: 'Calibri'
         },
         {
-          value: 'Comic Sans MS',
+          value: 'Comic Sans MS, -apple-system, sans-serif',
           label: 'Comic Sans MS'
         },
         {
-          value: 'MS Sans Serif',
+          value: 'MS Sans Serif, -apple-system, sans-serif',
           label: 'MS Sans Serif'
         },
         {
-          value: 'Tahoma',
+          value: 'Tahoma, -apple-system, sans-serif',
           label: 'Tahoma'
         },
         {
-          value: 'Verdana',
+          value: 'Verdana, -apple-system, sans-serif',
           label: 'Verdana'
         }
       ],
-      defaultValue: 'QlikView Sans'
+      defaultValue: 'QlikView Sans, -apple-system, sans-serif'
     },
     DataFontSize: {
       ref: 'lettersize',
@@ -230,4 +262,4 @@ const formatted = {
   }
 };
 
-export default formatted;
+export default tableFormat;

src/headers-table/column-header.jsx

@@ -1,5 +1,6 @@
 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 {
@@ -16,11 +17,12 @@ class ColumnHeader extends React.PureComponent {
   render () {
     const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
     const inEditState = qlik.inEditState();
+    const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
     const style = {
       ...baseCSS,
-      fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`,
-      height: '45px',
+      fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
+      height: isMediumFontSize ? '45px' : '35px',
       verticalAlign: 'middle'
     };
 
@@ -33,6 +35,7 @@ class ColumnHeader extends React.PureComponent {
       >
         <Tooltip
           isTooltipActive={!inEditState}
+          styling={styling}
           tooltipText={entry.displayValue}
         >
           {entry.displayValue}
@@ -57,7 +60,12 @@ ColumnHeader.propTypes = {
   }).isRequired,
   qlik: PropTypes.shape({
     backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
     }).isRequired
   }).isRequired,
   styling: PropTypes.shape({

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

@@ -1,14 +1,16 @@
 import React from 'react';
 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 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: '80px',
+    fontSize: `${16 + styling.headerOptions.fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '90px' : '70px',
     verticalAlign: 'middle',
     width: '230px'
   };

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, qlik, styling, isKpi }) => {
   const baseCSS = {
     backgroundColor: styling.headerOptions.colorSchema,
     color: styling.headerOptions.textColor,
@@ -26,15 +26,17 @@ 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
+                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 +46,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',
@@ -126,13 +128,19 @@ HeadersTable.propTypes = {
   general: PropTypes.shape({}).isRequired,
   qlik: PropTypes.shape({
     backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
     }).isRequired
   }).isRequired,
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),
     options: PropTypes.shape({})
-  }).isRequired
+  }).isRequired,
+  isKpi: PropTypes.bool.isRequired
 };
 
 export default HeadersTable;

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

@@ -1,9 +1,13 @@
 import React from 'react';
 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 title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`;
   const { fontSizeAdjustment } = styling.headerOptions;
+  const isMediumFontSize = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
+
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
     let baseFontSize = 14;
@@ -15,8 +19,8 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     const cellStyle = {
       ...baseCSS,
       cursor: 'default',
-      fontSize: `${baseFontSize + fontSizeAdjustment} px`,
-      height: '25px',
+      fontSize: `${baseFontSize + fontSizeAdjustment}px`,
+      height: isMediumFontSize ? '45px' : '35px',
       verticalAlign: 'middle'
     };
     return (
@@ -24,32 +28,34 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
         className={`${cellClass}${general.cellSuffix}`}
         style={cellStyle}
       >
-        <span className="wrapclass25">
+        <Tooltip
+          tooltipText={title}
+          styling={styling}
+        >
           {title}
-        </span>
+        </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: '80px',
+    fontSize: `${15 + fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '90px' : '70px',
     verticalAlign: 'middle'
   };
   return (
     <th
-      className={`grid-cells2 ${general.cellSuffix}`}
+      className={`grid-cells2${general.cellSuffix}`}
       style={style}
     >
-      <span
-        className={`wrapclass${suffixWrap}`}
-        style={{ fontFamily: styling.headerOptions.fontFamily }}
+      <Tooltip
+        tooltipText={title}
+        styling={styling}
       >
         {title}
-      </span>
+      </Tooltip>
     </th>
   );
 };

src/index.js

@@ -10,27 +10,38 @@ export default {
   controller: [
     '$scope',
     '$timeout',
-    function () { }
+    function controller () {}
   ],
+  design: {
+    dimensions: {
+      max: 1,
+      min: 0
+    }
+  },
   data: {
     dimensions: {
-      max: 2,
+      max: function (nMeasures) {
+        return nMeasures < 9 ? 2 : 1;
+      },
       min: 1,
       uses: 'dimensions'
     },
     measures: {
-      max: 9,
+      max: function (nDims) {
+        return nDims < 2 ? 9 : 8;
+      },
       min: 1,
       uses: 'measures'
     }
   },
   definition,
   initialProperties: {
+    version: 1.0,
     qHyperCubeDef: {
       qDimensions: [],
       qInitialDataFetch: [
         {
-          qHeight: 1000,
+          qHeight: 1,
           qWidth: 10
         }
       ],

src/initialize-transformed.js

@@ -1,6 +1,10 @@
-import jQuery from 'jquery';
 import { distinctArray } from './utilities';
 
+export const HEADER_FONT_SIZE = {
+  SMALL: -1,
+  MEDIUM: 1
+};
+
 function getAlignment (option) {
   const alignmentOptions = {
     1: 'left',
@@ -13,9 +17,8 @@ function getAlignment (option) {
 
 function getFontSizeAdjustment (option) {
   const fontSizeAdjustmentOptions = {
-    1: -1,
-    2: 1,
-    3: 2
+    1: HEADER_FONT_SIZE.SMALL,
+    2: HEADER_FONT_SIZE.MEDIUM
   };
 
   return fontSizeAdjustmentOptions[option] || 0;
@@ -103,15 +106,16 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 }
 
 let lastRow = 0;
-function generateDataSet (component, dimensionsInformation, measurementsInformation) {
-  const dimension1 = [];
-  const dimension2 = [];
+function generateDataSet (
+  component, dimensionsInformation, measurementsInformation, dataCube) {
+
   const measurements = generateMeasurements(measurementsInformation);
+  let dimension1 = [];
+  let dimension2 = [];
   let matrix = [];
 
-  let previousDim1Entry;
   const hasSecondDimension = dimensionsInformation.length > 1;
-  component.backendApi.eachDataRow((rowIndex, row) => {
+  dataCube.forEach(row => {
     lastRow += 1;
     const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
     dimension1.push(dimension1Entry);
@@ -122,7 +126,7 @@ 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];
@@ -138,36 +142,65 @@ 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 (row.length == dimension2.length) {
+      // Row is saturated
+      return row;
+    }
+
+    // Row is not saturated, so must add empty cells to fill the gaps
+    let newRow = [];
+    let cellIndex = 0;
+    dimension2.forEach(dim => {
+      measurements.forEach(measurement => {
+        if (cellIndex < row.length
+          && row[cellIndex].parents.dimension2.elementNumber === dim.elementNumber
+          && row[cellIndex].parents.measurement.header === measurement.name) {
+          newRow.push(row[cellIndex]);
+          cellIndex++;
+        } else {
+          newRow.push({
+            displayValue: '',
+            parents: {
+              dimension1: { elementNumber: rowIndex },
+              dimension2: { elementNumber: dim.elementNumber },
+              measurement: { header: measurement.name }
+            }
+          });
+        }
+      });
+    });
+
+    return newRow;
+  });
 
   return {
-    dimension1: distinctArray(dimension1),
-    dimension2: distinctArray(dimension2),
+    dimension1: dimension1,
+    dimension2: dimension2,
     matrix,
     measurements
   };
 }
 
-async function initializeTransformed ({ $element, layout, component }) {
+function initializeTransformed ({ $element, component, dataCube, designList, layout }) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -178,37 +211,28 @@ async function initializeTransformed ({ $element, layout, component }) {
     dimension2,
     measurements,
     matrix
-  } = generateDataSet(component, dimensionsInformation, measurementsInformation);
+  } = generateDataSet(component, dimensionsInformation, measurementsInformation, dataCube);
 
   const customSchemaBasic = [];
   const customSchemaFull = [];
   let customHeadersCount = 0;
 
-  function readCustomSchema () {
-    const url = `/Extensions/qlik-smart-pivot/${layout.customfile}`;
+  if (designList && designList.length > 0) {
+    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(';');
 
-    return jQuery.get(url).then(response => {
-      const allTextLines = response.split(/\r\n|\n/);
-      const headers = allTextLines[0].split(';');
-      customHeadersCount = headers.length;
-      for (let lineNumber = 0; lineNumber < allTextLines.length; lineNumber += 1) {
-        customSchemaFull[lineNumber] = new Array(headers.length);
-        const data = allTextLines[lineNumber].split(';');
-
-        if (data.length === headers.length) {
-          for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
-            customSchemaBasic[lineNumber] = data[0];
-            customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
-          }
+      if (data.length === headers.length) {
+        for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+          [customSchemaBasic[lineNumber]] = data;
+          customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
         }
       }
-    });
+    }
   }
 
-  const hasCustomSchema = (layout.customfilebool && layout.customfile.length > 4);
-  const schemaPromise = hasCustomSchema ? readCustomSchema() : Promise.resolve();
-  await schemaPromise;
-
   // 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 = {
@@ -242,7 +266,7 @@ async function initializeTransformed ({ $element, layout, component }) {
         count: customHeadersCount,
         full: customSchemaFull
       },
-      hasCustomFileStyle: layout.customfilebool,
+      hasCustomFileStyle: Boolean(designList),
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
         colorSchema: layout.HeaderColorSchema.color,
@@ -257,39 +281,26 @@ async function initializeTransformed ({ $element, layout, component }) {
         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),
+        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
           }
         }
       },
@@ -313,7 +324,6 @@ async function initializeTransformed ({ $element, layout, component }) {
     });
   }
 
-
   return transformedProperties;
 }
 

src/main.less

@@ -24,38 +24,6 @@
     z-index: 110;
   }
 
-  .tooltip-wrapper {
-    min-width: 25px;
-    position: fixed;
-    padding: 5px;
-    padding-top: 15px;
-    background-color: #404040;
-    z-index: 100;
-    pointer-events: none;
-    border-radius: 5px;
-    height: 30px;
-    width: auto;
-    opacity: 0.9;
-    text-align: center;
-    transform: translate(-50%, -110%);
-
-    > p {
-      color: #fff;
-    }
-  }
-
-  .tooltip-wrapper::after {
-    content: "";
-    position: absolute;
-    bottom: -10px;
-    left: 50%;
-    border-width: 10px 10px 0;
-    border-style: solid;
-    border-color: #404040 transparent;
-    margin-left: -10px;
-    pointer-events: none;
-  }
-
   .icon-xls {
     text-align: left;
   }
@@ -83,6 +51,13 @@
     text-overflow: ellipsis;
     vertical-align: middle;
     cursor: default;
+
+    > div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: inherit;
+    }
   }
 
   .empty {
@@ -102,42 +77,9 @@
     text-align: right;
   }
 
-  /* This is for wrap text in headers */
-  .wrapclass25 {
-    width: 100%;
-    height: 25px;
-    white-space: pre-line;
-    overflow: hidden;
-    display: block;
-  }
-
-  .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 */
-
-  /* ***************** */
+  // ***************** 
+  // Medium column size 
+  // ***************** 
 
   .grid-cells {
     position: relative;
@@ -156,11 +98,9 @@
     ._cell(52px);
   }
 
-  /* ***************** */
-
-  /* Small column size */
-
-  /* ***************** */
+  // ***************** 
+  // Small column size 
+  // ***************** 
   .grid-cells-s {
     ._cell(67px);
   }
@@ -177,12 +117,9 @@
     ._cell(52px);
   }
 
-  /* ***************** */
-
-  /* large column size */
-
-  /* ***************** */
-
+  // ***************** 
+  // Large column size 
+  // ***************** 
   .grid-cells-l {
     ._cell(82px);
   }
@@ -199,9 +136,9 @@
     ._cell(66px);
   }
 
-  /* END OF GRID CELLS */
+  // END OF GRID CELLS
 
-  /* First Column */
+  // First Column 
   .fdim-cells {
     min-width: 230px !Important;
     max-width: 230px !Important;
@@ -246,10 +183,6 @@
     line-height: 1em !important;
   }
 
-  .data-table .fdim-cells {
-    display: none;
-  }
-
   .kpi-table {
     width: @KpiTableWidth !important;
     overflow: hidden !important;
@@ -263,7 +196,7 @@
     box-shadow: 4px 2px 8px #e1e1e1;
 
     .row-wrapper {
-      height: calc(~"100% - 97px");
+      height: calc(~"100% - 92px");
       overflow: scroll;
       position: absolute;
       padding: 0;
@@ -271,6 +204,10 @@
     }
   }
 
+  .row-wrapper .fdim-cells {
+    padding-left: 12px;
+  }
+
   .data-table {
     height: 100%;
     width: calc(100% - 243px);
@@ -283,7 +220,7 @@
     }
 
     .row-wrapper {
-      height: calc(~"100% - 97px");
+      height: calc(~"100% - 92px");
       width: 100%;
       overflow: scroll;
       padding: 0;
@@ -293,10 +230,8 @@
 
   // hide scrollbars
   .kpi-table .header-wrapper,
-  .kpi-table .row-wrapper,
-  .data-table .header-wrapper,
-  .data-table .row-wrapper {
-    /* stylelint-disable-next-line property-no-unknown */
+  .data-table .header-wrapper {
+    // stylelint-disable-next-line property-no-unknown 
     scrollbar-width: none;
     -ms-overflow-style: none; // IE 10+
     -moz-overflow: -moz-scrollbars-none; // Firefox
@@ -305,4 +240,38 @@
       display: none; // Safari and Chrome
     }
   }
+
+  .tooltip-wrapper {
+    min-width: 25px;
+    position: fixed;
+    padding: 5px;
+    padding-top: 8px;
+    background-color: #404040;
+    z-index: 100;
+    pointer-events: none;
+    border-radius: 5px;
+    height: 30px;
+    width: auto;
+    opacity: 0.9;
+    text-align: center;
+    transform: translate(-50%, -110%);
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      border-width: 10px 10px 0;
+      border-style: solid;
+      border-color: #404040 transparent;
+      margin-left: -10px;
+      pointer-events: none;
+    }
+
+    > p {
+      color: #fff;
+    }
+  }
 }
+
+/* eslint-enable */

src/paint.jsx

@@ -2,19 +2,24 @@ import initializeStore from './store';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './root.jsx';
+import { initializeDataCube, initializeDesignList } from './dataset';
 
 export default async function paint ($element, layout, component) {
+  const dataCube = await initializeDataCube(component, layout);
+  const designList = await initializeDesignList(component, layout);
   const state = await initializeStore({
     $element,
     component,
+    dataCube,
+    designList,
     layout
   });
   const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';
   const jsx = (
     <Root
+      editmodeClass={editmodeClass}
       qlik={component}
       state={state}
-      editmodeClass={editmodeClass}
     />
   );
 

src/root.jsx

@@ -10,6 +10,7 @@ const Root = ({ state, qlik, editmodeClass }) => (
       <HeadersTable
         data={state.data}
         general={state.general}
+        isKpi
         qlik={qlik}
         styling={state.styling}
       />
@@ -28,6 +29,7 @@ const Root = ({ state, qlik, editmodeClass }) => (
         <HeadersTable
           data={state.data}
           general={state.general}
+          isKpi={false}
           qlik={qlik}
           styling={state.styling}
         />

src/store.js

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

src/tooltip/index.jsx

@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const handleCalculateTooltipPosition = (event) => {
-  const tooltipClassName = 'tooltip-wrapper';
-  const tooltip = document.getElementsByClassName(tooltipClassName);
-
-  tooltip[0].style.left = event.clientX + 'px';
-  tooltip[0].style.top = event.clientY + 'px';
+  const tooltip = document.querySelector('.tooltip-wrapper');
+  if (!tooltip) {
+    return;
+  }
+  tooltip.style.left = `${event.clientX}px`;
+  tooltip.style.top = `${event.clientY}px`;
 };
-class Tooltip extends React.Component {
+
+class Tooltip extends React.PureComponent {
   constructor (props) {
     super(props);
     this.state = {
@@ -17,38 +19,27 @@ class Tooltip extends React.Component {
     this.handleRenderTooltip = this.handleRenderTooltip.bind(this);
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    const { showTooltip } = this.state;
-    if (nextState.showTooltip === showTooltip) {
-      return false;
-    }
-    return true;
-  }
-
   handleRenderTooltip () {
     const { showTooltip } = this.state;
     this.setState({ showTooltip: !showTooltip });
   }
 
-
   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>
@@ -59,7 +50,16 @@ class Tooltip extends React.Component {
 }
 
 Tooltip.propTypes = {
-  children: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired,
+  styling: PropTypes.shape({
+    options: PropTypes.shape({
+      fontFamily: PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired,
   tooltipText: PropTypes.string.isRequired
 };
+
 export default Tooltip;

test/test-utilities/enzyme-setup.js

@@ -1,10 +0,0 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import jasmineEnzyme from 'jasmine-enzyme';
-Enzyme.configure({ adapter: new Adapter() });
-
-beforeEach(() => {
-  jasmineEnzyme();
-});
-
-export * from 'enzyme';

test/test-utilities/index.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { mount } from 'test-utilities/enzyme-setup';
-
-export function mountedComponent (Model, Component, props = {}) {
-  const component = mount((
-    <Component {...props} />
-  )).find(Component);
-  return new Model(component);
-}

webpack.config.js

@@ -1,8 +1,11 @@
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
-const settings = require('./settings');
+const packageJSON = require('./package.json');
+const path = require('path');
 
-console.log('Webpack mode:', settings.mode); // eslint-disable-line no-console
+const DIST = path.resolve("./dist");
+const MODE = process.env.NODE_ENV || 'development';
+
+console.log('Webpack mode:', MODE); // eslint-disable-line no-console
 
 const config = {
   devtool: 'source-map',
@@ -13,13 +16,15 @@ const config = {
       commonjs: 'jquery',
       commonjs2: 'jquery',
       root: '_'
+    },
+    qlik: {
+      amd: 'qlik',
+      commonjs: 'qlik',
+      commonjs2: 'qlik',
+      root: '_'
     }
   },
-  mode: settings.mode,
-  // TODO: breaks core-js for some reason
-  // resolve: {
-  //   extensions: ['js', 'jsx']
-  // },
+  mode: MODE,
   module: {
     rules: [
       {
@@ -59,22 +64,11 @@ const config = {
     ]
   },
   output: {
-    filename: `${settings.name}.js`,
+    filename: `${packageJSON.name}.js`,
     libraryTarget: 'amd',
-    path: settings.buildDestination
+    path: DIST
   },
   plugins: [
-    new CopyWebpackPlugin([
-      `assets/${settings.name}.qext`,
-      `assets/${settings.name}.png`,
-      'assets/wbfolder.wbl',
-      'resources/Excel.png',
-
-      // TODO: remove entries below this line
-      'resources/Accounts.csv',
-      'resources/Accounts2.csv',
-      'resources/QlikLook.csv'
-    ], {}),
     new StyleLintPlugin({
       files: '**/*.less'
     })