Merge pull request #59 from qlik-oss/DEB-217/CellFormatting

Fixed cell number formatting

.circleci/config.yml

@@ -19,8 +19,13 @@ jobs:
           name: Install dependencies
           command: npm install
       - run:
-          name: Run tests
-          command: npm run test-once
+          name: BlackDuck scan
+          command: curl -s https://blackducksoftware.github.io/hub-detect/hub-detect.sh | bash -s -- \
+            --blackduck.url="https://qliktech.blackducksoftware.com" \
+            --blackduck.trust.cert=true \
+            --blackduck.username="svc-blackduck" \
+            --blackduck.password=${svc_blackduck} \
+            --detect.project.name="viz-bundle-qlik-smart-pivot"
 
   bump-version:
     <<: *defaults
@@ -48,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:

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   globals: {
     angular: false,
+    beforeEach: false,
     define: false,
     describe: false,
     document: false,
@@ -41,12 +42,12 @@ module.exports = {
     "no-cond-assign": ["warn"],
     "no-fallthrough": ["warn"],
     "no-undef": ["error"],
-    "no-unused-vars": ["warn"],
-    "no-use-before-define": ["warn", { "functions": false, "classes": false, "variables": false }],
+    "no-unused-vars": ["error"],
+    "no-use-before-define": ["error", { "functions": false, "classes": false, "variables": false }],
     "no-useless-escape": ["warn"],
     "no-useless-return": ["warn"],
     "no-underscore-dangle": ["warn", { "allow": ["_id"] }],
-    "no-redeclare": ["warn"],
+    "no-redeclare": ["error"],
     "no-restricted-syntax": ["warn"],
     "operator-linebreak": ["warn", "before"],
     "prefer-promise-reject-errors": ["warn"],
@@ -57,9 +58,83 @@ module.exports = {
     "no-implied-eval": ["error"],
     "no-debugger": ["warn"],
     "no-unreachable": ["warn"],
-    "quotes": ["warn", "single", { "avoidEscape": true }]
+    "quotes": ["warn", "single", { "avoidEscape": true }],
+    "sort-imports": ["off"],
+    "max-lines-per-function": ["off"], // marks the entire functions, a bit too noisy
+    "complexity": ["warn"],
+    "camelcase": ["warn"],
+    "max-statements": ["off"],  // marks the entire functions, a bit too noisy
+    "sort-vars": ["off"], // not much value for the work
+    "init-declarations": ["off"],
+    "capitalized-comments": ["off"],
+    "one-var": ["off"],
+    "no-var": ["error"],
+    "no-plusplus": ["warn"],
+    "vars-on-top": ["off"],
+    "no-magic-numbers": ["off"], // useful, but also complains for reasonable checks with actual numbers
+    "new-cap": ["warn"],
+    "block-scoped-var": ["warn"],
+    "require-unicode-regexp": ["off"],
+    "no-negated-condition": ["warn"],
+    "operator-assignment": ["off"],
+    "no-extra-parens": ["off"],
+    "quote-props": ["off"],
+    "prefer-template": ["warn"],
+    "no-lonely-if": ["warn"],
+    "sort-keys": ["off"], // not much value for the work
+    "no-implicit-coercion": ["warn"],
+    "no-inline-comments": ["off"],
+    "spaced-comment": ["warn"],
+    "require-jsdoc": ["off"],
+    "func-style": ["off"],
+    "func-names": ["off"],
+    "id-length": ["warn"],
+    "prefer-arrow-callback": ["warn"],
+    "dot-location": ["off"],
+    "line-comment-position": ["off"],
+    "no-warning-comments": ["warn"],
+    "multiline-comment-style": ["off"],
+    "consistent-return": ["warn"],
+    "no-else-return": ["warn"],
+    "array-bracket-newline": ["warn"],
+    "array-element-newline": ["warn"],
+    "object-shorthand": ["warn"],
+    "eqeqeq": ["warn"],
+    "no-empty-function": ["off"],
+    "function-paren-newline": ["warn"],
+    "no-invalid-this": ["warn"],
+    "newline-per-chained-call": ["warn"],
+    "no-unused-expressions": ["warn"],
+    "strict": ["warn"],
+    "no-ternary": ["off"],
+    "multiline-ternary": ["off"],
+    "no-param-reassign": ["error"],
+    "prefer-destructuring": ["warn"],
+    "arrow-parens": ["off"],
+    "no-array-constructor": ["warn"],
+    "default-case": ["warn"],
+    "no-alert": ["warn"],
+    "max-params": ["warn"],
+    "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
+    "prefer-const": ["warn"],
+    "class-methods-use-this":["warn"],
+    // plugin:react
+    "react/jsx-indent": ["warn", 2],
+    "react/jsx-indent-props": ["warn", 2],
+    "react/forbid-prop-types": ["warn"],
+    "react/no-array-index-key": ["warn"],
+    "react/jsx-sort-props": ["warn"],
+    "react/require-default-props": ["warn"],
+    "react/sort-prop-types": ["warn"],
+    "react/jsx-max-props-per-line": ["warn"],
+    "react/jsx-no-literals": ["off"],
+    "react/jsx-max-depth": ["off"], // rule throws exception in single-dimension-measure
+    "react/jsx-filename-extension": ["warn"],
+    "react/prefer-stateless-function": ["warn"],
+    "react/no-set-state": ["warn"]
   },
   extends: [
-    "eslint:recommended"
+    "eslint:all",
+    "plugin:react/all"
   ]
 }

.gitattributes

@@ -22,6 +22,7 @@
 *.scss  text eol=lf
 *.html  text eol=lf
 *.js    text eol=lf
+*.jsx   text eol=lf
 *.json  text eol=lf
 *.md    text eol=lf
 *.sh    text eol=lf

.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": "Smart pivot",
-	"description": "Formatted table for P&L reports.",
-	"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,43 +0,0 @@
-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: false }
-    ],
-    frameworks: ['jasmine'],
-    preprocessors: {
-      'src/*.spec.js': ['webpack', 'sourcemap']
-    },
-    webpack: {
-      devtool: 'source-map',
-      mode: settings.mode,
-      externals: {
-        jquery: {
-          amd: 'jquery',
-          commonjs: 'jquery',
-          commonjs2: 'jquery',
-          root: '_'
-        },
-      },
-      module: {
-        rules: [
-          {
-            test: /\.js$/,
-            exclude: [/node_modules/],
-            loaders: ['babel-loader']
-          },
-          { test: /\.less$/, loader: 'ignore-loader' },
-          { test: /\.json$/, loader: 'ignore-loader' }
-        ]
-      }
-    }
-  });
-};

package.json

@@ -1,48 +1,48 @@
 {
   "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": {
     "@babel/core": "7.1.2",
+    "@babel/plugin-proposal-class-properties": "7.3.3",
+    "@babel/plugin-transform-async-to-generator": "7.1.0",
     "@babel/polyfill": "7.0.0",
     "@babel/preset-env": "7.1.0",
+    "@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",
+    "enzyme-adapter-react-16": "1.9.1",
     "eslint": "5.7.0",
     "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",
-    "jquery": "3.3.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",
     "style-loader": "0.23.1",
     "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",
+    "react": "16.7.0",
+    "react-dom": "16.7.0"
   }
 }

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>;<soft>;;;;;
-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>;<violete>;;;;;
-Net costs of goods sold;<bold>;<violete>;;;;;
-Gross profit;<bold>;<dark>;;;<center>;<large>;
-Operating expenses;<bold>;;<italic>;;;;
-Selling expenses;;;;;;;
-Sales salaries;;;;;;;
-Warranty expenses;;;;;;;
-Depreciation, store equipment;;;;;;;
-Other selling expenses3;;;;;;;
-Total selling expenses;<bold>;<violete>;;;;;
-General & administrative expenses;;#b7dbff;<italic>;;<center>;;<comment>
-Administration salaries;;;;;;;
-Rent expenses;;;;;;;
-Depreciation, computers;;;;;;;
-Other general & admin expenses;;;;;;;
-total general & admin expenses;<bold>;<soft>;;;;;
-total operating expenses;<bold>;<violete>;;;;;
-Operating income before taxes;<bold>;<dark>;;<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>;<dark>;;<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>;<soft>;;;;;
-Less income tax on gain;;;;;;;
-Extraordinary items after tax;<bold>;<soft>;;;;;
-Net Income (Profit);<bold>;<dark>;;<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>;<soft>;;;;;
-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>;<night>;;<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>;<soft>;;;;;
-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>;<night>;;<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/PLSmartPivot.css

@@ -1,294 +0,0 @@
-.qv-object-PLSmartPivot div.qv-object-content-container {
-	overflow-x:scroll;
-	overflow-y:hidden;
-	z-index:110
-}
-
-.qv-object-PLSmartPivot icon-xls {
-	text-align:left
-}
-.qv-object-PLSmartPivot button {
-	width: 100%;
-}
-.qv-object-PLSmartPivot table{
-    border-collapse:collapse;
-    border-spacing:0;
-    width:auto;
-    border-left:1px solid #d3d3d3;
-    border-right:1px solid #d3d3d3;
-    border-top:1px solid #d3d3d3
-    }
-.qv-object-PLSmartPivot td, th{
-    border: 1px solid #ffffff;
-    padding:5px;
-    border-collapse: collapse;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    cursor: default;    
-    }
-
-.qv-object-PLSmartPivot .empty{
-    width:3%;
-    background:#ffffff;
-    min-width:4px !important;
-    max-width:4px !important;
-    /*border-right:1px solid white;
-    box-shadow:4px 2px 8px #e1e1e1
-    border-bottom:0;
-    border-top:0;
-    border-left:1px solid #d3d3d3;
-    border-right:1px solid #d3d3d3;
-    border-top:#fff 1px solid;
-    border-bottom:#fff 1px solid*/
-    }
-
-.qv-object-PLSmartPivot th.main-kpi{
-    text-align:center;
-    vertical-align:middle;
-    border-bottom:1px solid #d3d3d3
-    }
-.qv-object-PLSmartPivot .numeric{
-    text-align:right
-    }
-.grid{
-    height:50px;
-    width:350px
-    }
-.header-wrapper{
-    position:absolute;
-    top:0;
-    z-index:1
-    }
-/*popups for headers*/
-.tooltip
-{
-    position: fixed!important;
-    color: RGB(70,70,70);
-    background-color: RGB(245,239,207);
-    text-align: center;
-    border: groove;
-}
-/*end popups*/
-.row-wrapper{
-    position:absolute;
-    top:97px;
-    height:100%!Important;
-    overflow-x:hidden;
-    overflow-y:scroll;
-    padding:0;
-    margin-top:0;   
-    }
-
-/*This is for wrap text in headers*/
-.qv-object-PLSmartPivot .wrapclass25{
-	width:100%;
-	height:25px;
-	white-space: pre-line;
-	overflow: hidden;
-	display:block;
-}
-.qv-object-PLSmartPivot .wrapclass45{
-	width:100%;
-	height:45px;
-	white-space: pre-line;
-	overflow: hidden;
-	display:block;	
-}
-.qv-object-PLSmartPivot .wrapclass70{
-	width:100%;
-	height:70px;
-	white-space: pre-line;
-	overflow: hidden;
-	display:inline-block;
-	vertical-align: middle;
-	line-height: 20px;
-}
-.qv-object-PLSmartPivot .wrapclassEmpty{
-	width:100%;	
-}
-/*******************/
-/* Medium column size*/
-/*******************/
-/*body*/
-.qv-object-PLSmartPivot .grid-cells{
-    min-width:70px!Important;
-    max-width:70px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*header*/
-.qv-object-PLSmartPivot .grid-cells2{
-    min-width:69px!Important;
-    max-width:69px!Important;
-    cursor: pointer;
-    
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*body*/
-.qv-object-PLSmartPivot .grid-cells-small{
-    min-width:52px!Important;
-    max-width:52px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*header*/
-.qv-object-PLSmartPivot .grid-cells2-small{
-    min-width:51px!Important;
-    max-width:51px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*******************/
-/* Small column size*/
-/*******************/
-
-/*body*/
-.qv-object-PLSmartPivot .grid-cells-s{
-    min-width:67px!Important;
-    max-width:67px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*header*/
-.qv-object-PLSmartPivot .grid-cells2-s{
-    min-width:66px!Important;
-    max-width:66px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*body*/
-.qv-object-PLSmartPivot .grid-cells-small-s{
-    min-width:52px!Important;
-    max-width:52px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*header*/
-.qv-object-PLSmartPivot .grid-cells2-small-s{
-    min-width:51px!Important;
-    max-width:51px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-
-/*******************/
-/* large column size*/
-/*******************/
-/*body*/
-.qv-object-PLSmartPivot .grid-cells-l{
-    min-width:82px!Important;
-    max-width:82px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*header*/
-.qv-object-PLSmartPivot .grid-cells2-l{
-    min-width:81px!Important;
-    max-width:81px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*body*/
-.qv-object-PLSmartPivot .grid-cells-small-l{
-    min-width:66px!Important;
-    max-width:66px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-    
-/*header*/
-.qv-object-PLSmartPivot .grid-cells2-small-l{
-    min-width:65px!Important;
-    max-width:65px!Important;
-    cursor: pointer;
-    /*padding:5px 10px;
-    margin:0;*/
-    }
-/*END OF GRID CELLS*/
-
-/*First Column*/
-.qv-object-PLSmartPivot .fdim-cells{
-    min-width:230px!Important;
-    max-width:230px!Important;
-    cursor: pointer;
-    background-color:white;
-    /*padding:0 20px*/
-    }
-
-.qv-object-PLSmartPivot .fdim-cells:hover {
-    /*cursor: default;*/
-    background-color:#808080 !important;
-    color:#ffffff;
-}
-.qv-object-PLSmartPivot tbody tr:hover {
-    cursor: default;
-    background-color:#808080 !important;
-    color:#ffffff;
-}
-.qv-object-PLSmartPivot .grid-cells-header{
-    /*padding:15px 10px*/
-    padding:0px
-    }
-.qv-object-PLSmartPivot .grid-cells-title{
-    min-width:522px
-    }
-
-/*estos dos hcen referencia a la primera columna*/
-.kpi-table .fdim-cells{
-    /*padding:5px 10px*/
-    }
-.data-table .fdim-cells{
-    display:none
-    }
-.kpi-table{
-    width:240px !important;
-    overflow:hidden !important;
-    display:table;
-    height:100%;
-    z-index:100;
-    /*background:white;*/
-    left:258px;
-    margin:0;
-    padding:0;
-    z-index:999;
-    position:absolute;
-    top:0;
-    left:0;
-    border-right:1px solid white;
-    box-shadow:4px 2px 8px #e1e1e1
-    }
-.kpi-table .row-wrapper{
-    overflow:hidden
-    }
-.data-table{
-    width:272px !important;
-    float:left;
-    display:table;
-    height:100%;
-    z-index:90;
-    position:absolute;
-    margin-left:253px;
-    -ms-overflow-style:none
-    }

src/PLSmartPivot.less

@@ -1,220 +0,0 @@
-@TableBorder: 1px solid #d3d3d3;
-@KpiTableWidth: 230px;
-
-._cell(@Width: 50px) {
-	min-width: @Width!important;
-	max-width: @Width!important;
-	cursor: pointer;
-	line-height: 1em!important;
-}
-
-.qv-object-PLSmartPivot {
-	* {
-		box-sizing: border-box;
-	}
-
-	div.qv-object-content-container {
-		overflow-x: scroll;
-		overflow-y: hidden;
-		z-index: 110;
-	}
-
-	.icon-xls {
-		text-align: left;
-	}
-
-	button {
-		width: 100%;
-	}
-
-	table {
-		border-collapse: collapse;
-		border-spacing: 0;
-		width: auto;
-		border-left: @TableBorder;
-		border-right: @TableBorder;
-		border-top: @TableBorder;
-	}
-
-	td, th {
-		border: 1px solid #ffffff;
-		padding: 5px;
-		border-collapse: collapse;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		vertical-align: middle;
-		cursor: default;
-	}
-
-	.empty {
-		width: 3%;
-		background: #ffffff;
-		min-width: 4px !important;
-		max-width: 4px !important;
-	}
-
-	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: 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*/
-	/*******************/
-	.grid-cells { ._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;
-		max-width: 230px !Important;
-		cursor: pointer;
-		background-color: white;
-	}
-
-	.fdim-cells:hover {
-		/*cursor: default;*/
-		background-color: #808080 !important;
-		color: #ffffff;
-	}
-
-	tbody tr:hover {
-		cursor: default;
-		background-color: #808080 !important;
-		color: #ffffff;
-	}
-
-	.grid-cells-header {
-		padding: 0px;
-	}
-
-	.grid-cells-title {
-		min-width: 522px;
-	}
-
-	.grid-cells:before {
-		content: "\00a0";
-	}
-}
-
-.grid {
-	height: 50px;
-	width: 350px;
-}
-
-.header-wrapper {
-	position: absolute;
-	top: 0;
-	z-index: 1;
-}
-/*popups for headers*/
-.tooltip {
-	position: fixed !important;
-	color: RGB(70,70,70);
-	background-color: RGB(245,239,207);
-	text-align: center;
-	border: groove;
-}
-/*end popups*/
-.row-wrapper {
-	position: absolute;
-	top: 97px;
-	height: 100% !Important;
-	overflow-x: hidden;
-	overflow-y: scroll;
-	padding: 0;
-	margin-top: 0;
-}
-
-/*estos dos hcen referencia a la primera columna*/
-.kpi-table .fdim-cells {
-	line-height: 1em!important;
-}
-
-.data-table .fdim-cells {
-	display: none;
-}
-
-.kpi-table {
-	width: @KpiTableWidth !important;
-	overflow: hidden !important;
-	display: table;
-	height: 100%;
-	z-index: 100;
-	left: 258px;
-	margin: 0;
-	padding: 0;
-	z-index: 999;
-	position: absolute;
-	top: 0;
-	left: 0;
-	border-right: 1px solid white;
-	box-shadow: 4px 2px 8px #e1e1e1;
-}
-
-.kpi-table .row-wrapper {
-	overflow: hidden;
-}
-
-.data-table {
-	width: 272px !important;
-	float: left;
-	display: table;
-	height: 100%;
-	z-index: 90;
-	position: absolute;
-	margin-left: @KpiTableWidth + 13px;
-	-ms-overflow-style: none;
-}

src/data-table/data-cell.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 || styleBuilder.hasComments()) {
+      formattedMeasurementValue = '';
+      cellStyle.cursor = 'default';
+    } 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 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;
+      }
+    }
+
+    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) {
+  if (isNaN(measurement.value)) {
+    return styling.symbolForNulls;
+  } else {
+    return measurement.displayValue;
+  }
+}
+
+function getConditionalColor (measurement, conditionalColoring) {
+  if (measurement.value < conditionalColoring.threshold.poor) {
+    return conditionalColoring.colors.poor;
+  }
+  if (measurement.value < conditionalColoring.threshold.fair) {
+    return conditionalColoring.colors.fair;
+  }
+  return conditionalColoring.colors.good;
+}

src/data-table/header-padding.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const HeaderPadding = ({ styleBuilder, styling }) => {
+  if (styling.usePadding && !styleBuilder.hasCustomFileStyle()) {
+    const paddingStyle = {
+      fontFamily: styling.options.fontFamily,
+      marginLeft: '15px'
+    };
+    return (
+      <span style={paddingStyle} />
+    );
+  }
+  return null;
+};
+
+HeaderPadding.propTypes = {
+  styleBuilder: PropTypes.shape({
+    hasCustomFileStyle: PropTypes.func.isRequired
+  }).isRequired,
+  styling: PropTypes.shape({
+    options: PropTypes.shape({
+      fontFamily: PropTypes.string.isRequired
+    }).isRequired
+  }).isRequired
+};
+
+export default HeaderPadding;

src/data-table/index.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleBuilder from '../style-builder';
+import DataCell from './data-cell.jsx';
+import RowHeader from './row-header.jsx';
+import { injectSeparators } from '../utilities';
+
+const DataTable = ({ data, general, qlik, renderData, styling }) => {
+  const {
+    headers: {
+      dimension1,
+      measurements
+    },
+    matrix
+  } = data;
+
+  return (
+    <div className="row-wrapper">
+      <table>
+        <tbody>
+          {dimension1.map((dimensionEntry, dimensionIndex) => {
+            const rowHeaderText = dimensionEntry.displayValue || '';
+            if (rowHeaderText === '-') {
+              return null;
+            }
+            const styleBuilder = new StyleBuilder(styling);
+            if (styling.hasCustomFileStyle) {
+              styleBuilder.parseCustomFileStyle(rowHeaderText);
+            } else {
+              styleBuilder.applyStandardAttributes(dimensionIndex);
+              styleBuilder.applyCustomStyle({
+                fontSize: `${14 + styling.options.fontSizeAdjustment}px`
+              });
+            }
+            const rowStyle = {
+              fontFamily: styling.options.fontFamily,
+              width: '230px',
+              ...styleBuilder.getStyle()
+            };
+
+            return (
+              <tr key={dimensionEntry.displayValue}>
+                {!renderData ?
+                  <RowHeader
+                    entry={dimensionEntry}
+                    qlik={qlik}
+                    rowStyle={rowStyle}
+                    styleBuilder={styleBuilder}
+                    styling={styling}
+                  /> : null
+                }
+                {renderData && injectSeparators(
+                  matrix[dimensionIndex],
+                  styling.useSeparatorColumns,
+                  { atEvery: measurements.length }
+                ).map((measurementData, index) => {
+                  if (measurementData.isSeparator) {
+                    const separatorStyle = {
+                      color: 'white',
+                      fontFamily: styling.options.fontFamily,
+                      fontSize: `${12 + styling.options.fontSizeAdjustment}px`
+                    };
+
+                    return (
+                      <td
+                        className="empty"
+                        key={`${dimensionEntry.displayValue}-${index}-separator`}
+                        style={separatorStyle}
+                      >
+                        *
+                      </td>
+                    );
+                  }
+
+                  const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
+                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
+                  return (
+                    <DataCell
+                      data={data}
+                      general={general}
+                      key={`${dimensionEntry.displayValue}-${id}`}
+                      measurement={measurementData}
+                      qlik={qlik}
+                      styleBuilder={styleBuilder}
+                      styling={styling}
+                    />
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+DataTable.defaultProps = {
+  renderData: true
+};
+
+DataTable.propTypes = {
+  data: PropTypes.shape({
+    headers: PropTypes.shape({
+      dimension1: PropTypes.array.isRequired
+    }).isRequired,
+    matrix: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired
+  }).isRequired,
+  general: PropTypes.shape({}).isRequired,
+  qlik: PropTypes.shape({}).isRequired,
+  renderData: PropTypes.bool,
+  styling: PropTypes.shape({
+    hasCustomFileStyle: PropTypes.bool.isRequired
+  }).isRequired
+};
+
+export default DataTable;

src/data-table/row-header.jsx

@@ -0,0 +1,63 @@
+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) {
+    super(props);
+
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect () {
+    const { entry, qlik } = this.props;
+    qlik.backendApi.selectValues(0, [entry.elementNumber], true);
+  }
+
+  render () {
+    const { entry, rowStyle, styleBuilder, styling, qlik } = this.props;
+    const inEditState = qlik.inEditState();
+
+    return (
+      <td
+        className="fdim-cells"
+        onClick={this.handleSelect}
+        style={rowStyle}
+      >
+        <Tooltip
+          isTooltipActive={!inEditState}
+          styling={styling}
+          tooltipText={entry.displayValue}
+        >
+          <HeaderPadding
+            styleBuilder={styleBuilder}
+            styling={styling}
+          />
+          {entry.displayValue}
+        </Tooltip>
+      </td>
+    );
+  }
+}
+
+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
+  }).isRequired,
+  rowStyle: PropTypes.shape({}).isRequired,
+  styleBuilder: PropTypes.shape({}).isRequired,
+  styling: PropTypes.shape({}).isRequired
+};
+
+export default RowHeader;

src/dataset.js

@@ -0,0 +1,64 @@
+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) {
+  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;
+
+  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;
+  }
+
+  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/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

@@ -0,0 +1,68 @@
+const header = {
+  type: 'items',
+  label: 'Header format',
+  items: {
+    Align: {
+      ref: 'HeaderAlign',
+      translation: 'Header alignment',
+      type: 'number',
+      component: 'buttongroup',
+      options: [
+        {
+          value: 1,
+          label: 'Left'
+        },
+        {
+          value: 2,
+          label: 'Center'
+        },
+        {
+          value: 3,
+          label: 'Right'
+        }
+      ],
+      defaultValue: 2
+    },
+    headercolors: {
+      component: 'color-picker',
+      defaultValue: {
+        index: 6,
+        color: '#4477aa'
+      },
+      label: 'Background color',
+      ref: 'HeaderColorSchema',
+      type: 'object',
+      dualOutput: true
+    },
+    HeaderTextColor: {
+      ref: 'HeaderTextColorSchema',
+      label: 'Text color',
+      component: 'color-picker',
+      defaultValue: {
+        index: 1,
+        color: '#ffffff'
+      },
+      type: 'object',
+      dualOutput: true
+    },
+    HeaderFontSize: {
+      ref: 'lettersizeheader',
+      translation: 'Font size',
+      type: 'number',
+      component: 'buttongroup',
+      options: [
+        {
+          value: 1,
+          label: 'Small'
+        },
+        {
+          value: 2,
+          label: 'Medium'
+        }
+      ],
+      defaultValue: 1
+    }
+  }
+};
+
+export default header;

src/definition/index.js

@@ -0,0 +1,56 @@
+import pagination from './pagination';
+import header from './header';
+import tableFormat from './table-format';
+import conditionalColoring from './conditional-coloring';
+
+const definition = {
+  component: 'accordion',
+  items: {
+    data: {
+      items: {
+        dimensions: {
+          disabledRef: ''
+        },
+        measures: {
+          disabledRef: ''
+        }
+      },
+      uses: 'data'
+    },
+    sorting: {
+      uses: 'sorting'
+    },
+    settings: {
+      items: {
+        Formatted: tableFormat,
+        Header: header,
+        ConditionalColoring: conditionalColoring,
+        Pagination: pagination
+      },
+      uses: 'settings'
+    },
+    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'
+};
+
+export default definition;

src/definition/pagination.js

@@ -0,0 +1,63 @@
+const pagination = {
+  type: 'items',
+  label: 'Pagination',
+  items: {
+    MaxPaginationLoops: {
+      ref: 'maxloops',
+      type: 'number',
+      component: 'dropdown',
+      label: 'Max pagination loops',
+      options: [
+        {
+          value: 1,
+          label: '10k cells'
+        },
+        {
+          value: 2,
+          label: '20k cells'
+        },
+        {
+          value: 3,
+          label: '30k cells'
+        },
+        {
+          value: 4,
+          label: '40k cells'
+        },
+        {
+          value: 5,
+          label: '50k cells'
+        },
+        {
+          value: 6,
+          label: '60k cells'
+        },
+        {
+          value: 7,
+          label: '70k cells'
+        },
+        {
+          value: 8,
+          label: '80k cells'
+        },
+        {
+          value: 9,
+          label: '90k cells'
+        },
+        {
+          value: 10,
+          label: '100k cells'
+        }
+      ],
+      defaultValue: 2
+    },
+    ErrorMessage: {
+      ref: 'errormessage',
+      label: 'Default error message',
+      type: 'string',
+      defaultValue: 'Unable to display all the data. Apply more filters to limit the amount of displayed data.'
+    }
+  }
+};
+
+export default pagination;

src/definition/table-format.js

@@ -0,0 +1,265 @@
+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 template field',
+      options: function () {
+        return getFieldList().then(function (items) {
+          items.unshift(
+            {
+              value: '',
+              label: 'None'
+            });
+          return items;
+        });
+      }
+    },
+    IndentBool: {
+      ref: 'indentbool',
+      type: 'boolean',
+      label: 'Indent',
+      defaultValue: false,
+      show: data => !hasDesignDimension(data)
+    },
+    SeparatorColumns: {
+      ref: 'separatorcols',
+      type: 'boolean',
+      label: 'Column separators',
+      defaultValue: false
+    },
+    rowEvenBGColor: {
+      component: 'color-picker',
+      defaultValue: {
+        color: '#fff',
+        index: 1
+      },
+      label: 'Even row background color',
+      ref: 'rowEvenBGColor',
+      type: 'object',
+      dualOutput: true,
+      show: data => !hasDesignDimension(data)
+    },
+    rowOddBGColor: {
+      component: 'color-picker',
+      defaultValue: {
+        color: '#b6d7ea',
+        index: 4
+      },
+      label: 'Odd row background color',
+      ref: 'rowOddBGColor',
+      type: 'object',
+      dualOutput: true,
+      show: data => !hasDesignDimension(data)
+    },
+    BodyTextColor: {
+      ref: 'BodyTextColorSchema',
+      type: 'string',
+      component: 'dropdown',
+      label: 'Text body color',
+      options: [
+        {
+          value: 'Black',
+          label: 'Black'
+        },
+        {
+          value: 'DimGray',
+          label: 'DimGray'
+        },
+        {
+          value: 'ForestGreen',
+          label: 'ForestGreen'
+        },
+        {
+          value: 'Gainsboro',
+          label: 'Gainsboro'
+        },
+        {
+          value: 'Indigo',
+          label: 'Indigo'
+        },
+        {
+          value: 'Navy',
+          label: 'Navy'
+        },
+        {
+          value: 'Purple',
+          label: 'Purple'
+        },
+        {
+          value: 'WhiteSmoke',
+          label: 'WhiteSmoke'
+        },
+        {
+          value: 'White',
+          label: 'White'
+        },
+        {
+          value: 'YellowGreen',
+          label: 'YellowGreen'
+        }
+      ],
+      defaultValue: 'Black',
+      show: data => !hasDesignDimension(data)
+    },
+    FontFamily: {
+      ref: 'FontFamily',
+      type: 'string',
+      component: 'dropdown',
+      label: 'Font family',
+      options: [
+        {
+          value: 'QlikView Sans, -apple-system, sans-serif',
+          label: 'QlikView Sans'
+        },
+        {
+          value: 'Arial, -apple-system, sans-serif',
+          label: 'Arial'
+        },
+        {
+          value: 'Calibri, -apple-system, sans-serif',
+          label: 'Calibri'
+        },
+        {
+          value: 'Comic Sans MS, -apple-system, sans-serif',
+          label: 'Comic Sans MS'
+        },
+        {
+          value: 'MS Sans Serif, -apple-system, sans-serif',
+          label: 'MS Sans Serif'
+        },
+        {
+          value: 'Tahoma, -apple-system, sans-serif',
+          label: 'Tahoma'
+        },
+        {
+          value: 'Verdana, -apple-system, sans-serif',
+          label: 'Verdana'
+        }
+      ],
+      defaultValue: 'QlikView Sans, -apple-system, sans-serif'
+    },
+    DataFontSize: {
+      ref: 'lettersize',
+      translation: 'Font size',
+      type: 'number',
+      component: 'buttongroup',
+      options: [
+        {
+          value: 1,
+          label: 'Small'
+        },
+        {
+          value: 2,
+          label: 'Medium'
+        }
+      ],
+      defaultValue: 1
+    },
+    textAlignment: {
+      ref: 'cellTextAlignment',
+      label: 'Cell text alignment',
+      component: 'buttongroup',
+      options: [
+        {
+          value: 'left',
+          label: 'Left'
+        },
+        {
+          value: 'center',
+          label: 'Center'
+        },
+        {
+          value: 'right',
+          label: 'Right'
+        }
+      ],
+      defaultValue: 'right'
+    },
+    ColumnWidthSlider: {
+      type: 'number',
+      component: 'slider',
+      label: 'Column width',
+      ref: 'columnwidthslider',
+      min: 1,
+      max: 3,
+      step: 1,
+      defaultValue: 2
+    },
+    SymbolForNulls: {
+      ref: 'symbolfornulls',
+      label: 'Symbol for Nulls',
+      type: 'string',
+      defaultValue: ' '
+    },
+    AllowExportXLS: {
+      ref: 'allowexportxls',
+      type: 'boolean',
+      component: 'switch',
+      label: 'Allow export to Excel',
+      options: [
+        {
+          value: true,
+          label: 'On'
+        },
+        {
+          value: false,
+          label: 'Off'
+        }
+      ],
+      defaultValue: true
+    },
+    FilterOnCellClick: {
+      ref: 'filteroncellclick',
+      type: 'boolean',
+      component: 'switch',
+      label: 'Allow selection in cells',
+      options: [
+        {
+          value: true,
+          label: 'On'
+        },
+        {
+          value: false,
+          label: 'Off'
+        }
+      ],
+      defaultValue: true
+    }
+  }
+};
+
+export default tableFormat;

src/excel-export.js

@@ -0,0 +1,107 @@
+function cleanupNodes (node) {
+  const removables = node.querySelectorAll('.tooltip,input');
+  [].forEach.call(removables, removeable => {
+    if (removeable.parentNode) {
+      removeable.parentNode.removeChild(removeable);
+    }
+  });
+}
+
+function buildTableHTML (id, title, subtitle, footnote) {
+  const titleHTML = `<p style="font-size:15pt"><b>${title}</b></p>`;
+  const subtitleHTML = `<p style="font-size:11pt">${subtitle}</p>`;
+  const footnoteHTML = `<p style="font-size:11pt">${footnote}</p>`;
+  const container = document.querySelector(`[tid="${id}"]`);
+  const kpiTableClone = container.querySelector('.kpi-table').cloneNode(true);
+  const dataTableClone = container.querySelector('.data-table').cloneNode(true);
+  cleanupNodes(kpiTableClone);
+  cleanupNodes(kpiTableClone);
+
+  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
+      xmlns:o="urn:schemas-microsoft-com:office:office"
+      xmlns:x="urn:schemas-microsoft-com:office:excel"
+      xmlns="http://www.w3.org/TR/REC-html40"
+    >
+      <head>
+        <meta charset="UTF-8">
+        <!--[if gte mso 9]>
+          <xml>
+            <x:ExcelWorkbook>
+              <x:ExcelWorksheets>
+                <x:ExcelWorksheet>
+                  <x:Name>${title || 'Analyze'}</x:Name>
+                  <x:WorksheetOptions>
+                    <x:DisplayGridlines/>
+                  </x:WorksheetOptions>
+                </x:ExcelWorksheet>
+              </x:ExcelWorksheets>
+            </x:ExcelWorkbook>
+          </xml>
+        <![endif]-->
+      </head>
+      <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 : ''}
+      </body>
+    </html>
+    `.split('>.<')
+    .join('><')
+    .split('>*<')
+    .join('><');
+
+  return tableHTML;
+}
+
+function downloadXLS (html) {
+  const filename = 'analysis.xls';
+  const blobObject = new Blob([html]);
+
+  // IE/Edge
+  if (window.navigator.msSaveOrOpenBlob) {
+    return window.navigator.msSaveOrOpenBlob(blobObject, filename);
+  }
+
+  const link = window.document.createElement('a');
+  link.href = URL.createObjectURL(blobObject);
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  return true;
+}
+
+export function exportXLS (id, title, subtitle, footnote) {
+  // original was removing icon when starting export, disable and some spinner instead, shouldn't take enough time to warrant either..?
+  const table = buildTableHTML(id, title, subtitle, footnote);
+  downloadXLS(table);
+}

src/export-button.jsx

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

src/haiku.spec.js

@@ -1,9 +0,0 @@
-/* https://randomhaiku.com */
-
-describe('behind the money', () => {
-  describe('Canada and Panda work.', () => {
-    it('Tiger starts blowing.', () => {
-      expect(true).toBeTruthy();
-    });
-  });
-});

src/headers-table/column-header.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HEADER_FONT_SIZE } from '../initialize-transformed';
+import Tooltip from '../tooltip/index.jsx';
+
+class ColumnHeader extends React.PureComponent {
+  constructor (props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect () {
+    const { entry, qlik } = this.props;
+    qlik.backendApi.selectValues(1, [entry.elementNumber], true);
+  }
+
+  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: isMediumFontSize ? '43px' : '33px',
+      verticalAlign: 'middle'
+    };
+
+    return (
+      <th
+        className={`grid-cells2${cellSuffix}`}
+        colSpan={colSpan}
+        onClick={this.handleSelect}
+        style={style}
+      >
+        <Tooltip
+          isTooltipActive={!inEditState}
+          styling={styling}
+          tooltipText={entry.displayValue}
+        >
+          {entry.displayValue}
+        </Tooltip>
+      </th>
+    );
+  }
+}
+
+ColumnHeader.defaultProps = {
+  cellSuffix: '',
+  colSpan: 1
+};
+
+ColumnHeader.propTypes = {
+  baseCSS: PropTypes.shape({}).isRequired,
+  cellSuffix: PropTypes.string,
+  colSpan: PropTypes.number,
+  entry: PropTypes.shape({
+    elementNumber: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  qlik: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
+  }).isRequired,
+  styling: PropTypes.shape({
+    headerOptions: PropTypes.shape({
+      fontSizeAdjustment: PropTypes.number.isRequired
+    }).isRequired
+  }).isRequired
+};
+
+export default ColumnHeader;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExportButton from '../export-button.jsx';
+import { HEADER_FONT_SIZE } from '../initialize-transformed';
+
+const ExportColumnHeader = ({ id, 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 ? '90px' : '70px',
+    verticalAlign: 'middle',
+    width: '230px'
+  };
+
+  return (
+    <th
+      className="fdim-cells"
+      rowSpan={rowSpan}
+      style={style}
+    >
+      <ExportButton
+        id={id}
+        excelExport={allowExcelExport}
+        general={general}
+      />
+      {title}
+    </th>
+  );
+};
+
+ExportColumnHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  allowExcelExport: PropTypes.bool.isRequired,
+  baseCSS: PropTypes.shape({}).isRequired,
+  general: PropTypes.shape({}).isRequired,
+  hasSecondDimension: PropTypes.bool.isRequired,
+  styling: PropTypes.shape({
+    headerOptions: PropTypes.shape({
+      fontSizeAdjustment: PropTypes.number.isRequired
+    }).isRequired
+  }).isRequired,
+  title: PropTypes.string.isRequired
+};
+
+export default ExportColumnHeader;

src/headers-table/index.componentModel.js

@@ -0,0 +1,5 @@
+function Model (component) {
+  this.component = component;
+}
+
+export default Model;

src/headers-table/index.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ExportColumnHeader from './export-column-header.jsx';
+import ColumnHeader from './column-header.jsx';
+import MeasurementColumnHeader from './measurement-column-header.jsx';
+import { injectSeparators } from '../utilities';
+
+const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
+  const baseCSS = {
+    backgroundColor: styling.headerOptions.colorSchema,
+    color: styling.headerOptions.textColor,
+    fontFamily: styling.options.fontFamily,
+    textAlign: styling.headerOptions.alignment
+  };
+
+  const {
+    dimension1,
+    dimension2,
+    measurements
+  } = data.headers;
+
+  const hasSecondDimension = dimension2.length > 0;
+
+  return (
+    <div className="header-wrapper">
+      <table className="header">
+        <tbody>
+          <tr>
+            {isKpi ?
+              <ExportColumnHeader
+                id={qlik.options.id}
+                allowExcelExport={general.allowExcelExport}
+                baseCSS={baseCSS}
+                general={general}
+                hasSecondDimension={hasSecondDimension}
+                styling={styling}
+                title={dimension1[0].name}
+              /> : null
+            }
+            {!isKpi && !hasSecondDimension && measurements.map(measurementEntry => (
+              <MeasurementColumnHeader
+                baseCSS={baseCSS}
+                general={general}
+                hasSecondDimension={hasSecondDimension}
+                key={`${measurementEntry.displayValue}-${measurementEntry.name}`}
+                measurement={measurementEntry}
+                styling={styling}
+              />
+            ))}
+            {!isKpi && hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
+              if (entry.isSeparator) {
+                const separatorStyle = {
+                  color: 'white',
+                  fontFamily: styling.options.fontFamily,
+                  fontSize: `${13 + styling.headerOptions.fontSizeAdjustment}px`
+                };
+
+                return (
+                  <th
+                    className="empty"
+                    key={index}
+                    style={separatorStyle}
+                  >
+                    *
+                  </th>
+                );
+              }
+              return (
+                <ColumnHeader
+                  baseCSS={baseCSS}
+                  cellSuffix={general.cellSuffix}
+                  colSpan={measurements.length}
+                  entry={entry}
+                  key={entry.displayValue}
+                  qlik={qlik}
+                  styling={styling}
+                />
+              );
+            })}
+          </tr>
+          {!isKpi && hasSecondDimension && (
+            <tr>
+              {injectSeparators(dimension2, styling.useSeparatorColumns).map((dimensionEntry, index) => {
+                if (dimensionEntry.isSeparator) {
+                  const separatorStyle = {
+                    color: 'white',
+                    fontFamily: styling.options.fontFamily,
+                    fontSize: `${12 + styling.headerOptions.fontSizeAdjustment}px`
+                  };
+
+                  return (
+                    <th
+                      className="empty"
+                      key={index}
+                      style={separatorStyle}
+                    >
+                      *
+                    </th>
+                  );
+                }
+                return measurements.map(measurementEntry => (
+                  <MeasurementColumnHeader
+                    baseCSS={baseCSS}
+                    dimensionEntry={dimensionEntry}
+                    general={general}
+                    hasSecondDimension={hasSecondDimension}
+                    key={`${measurementEntry.displayValue}-${measurementEntry.name}-${dimensionEntry.name}`}
+                    measurement={measurementEntry}
+                    styling={styling}
+                  />
+                ));
+              })}
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+HeadersTable.propTypes = {
+  data: PropTypes.shape({
+    headers: PropTypes.shape({
+      dimension1: PropTypes.array,
+      dimension2: PropTypes.array,
+      measurements: PropTypes.array
+    })
+  }).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,
+  styling: PropTypes.shape({
+    headerOptions: PropTypes.shape({}),
+    options: PropTypes.shape({})
+  }).isRequired,
+  isKpi: PropTypes.bool.isRequired
+};
+
+export default HeadersTable;

src/headers-table/index.spec.js

@@ -0,0 +1,43 @@
+import merge from 'lodash.merge';
+import Model from './index.componentModel';
+import Component from './index.jsx';
+import { mountedComponent } from 'test-utilities';
+import sampleState from 'test-utilities/capex-sample-state';
+
+
+describe('<HeadersTable />', () => {
+  const { data, general, styling } = sampleState;
+  const defaultProps = {
+    data,
+    general,
+    qlik: {
+      backendApi: {
+        selectValues: () => {}
+      },
+      inEditState: () => {}
+    },
+    styling
+  };
+
+  function setup (otherProps = {}) {
+    const props = merge(defaultProps, otherProps);
+
+    return mountedComponent(Model, Component, props);
+  }
+
+  it('should render without exploding when 2 dimensions', () => {
+    const model = setup();
+    expect(model.component).toBeDefined();
+  });
+
+  it('should render without exploding when 1 dimension', () => {
+    const noSecondDimensionProps = {
+      data: {
+        ...defaultProps.data.headers,
+        dimension2: []
+      }
+    };
+    const model = setup(noSecondDimensionProps);
+    expect(model.component).toBeDefined();
+  });
+});

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

@@ -0,0 +1,81 @@
+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;
+    let cellClass = 'grid-cells2';
+    if (isPercentageFormat) {
+      baseFontSize = 13;
+      cellClass = 'grid-cells2-small';
+    }
+    const cellStyle = {
+      ...baseCSS,
+      fontSize: `${baseFontSize + fontSizeAdjustment}px`,
+      height: isMediumFontSize ? '45px' : '35px',
+      verticalAlign: 'middle'
+    };
+    return (
+      <th
+        className={`${cellClass}${general.cellSuffix}`}
+        style={cellStyle}
+      >
+        <Tooltip
+          tooltipText={title}
+          styling={styling}
+        >
+          {title}
+        </Tooltip>
+      </th>
+    );
+  }
+
+  const style = {
+    ...baseCSS,
+    fontSize: `${15 + fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '90px' : '70px',
+    verticalAlign: 'middle'
+  };
+  return (
+    <th
+      className={`grid-cells2${general.cellSuffix}`}
+      style={style}
+    >
+      <Tooltip
+        tooltipText={title}
+        styling={styling}
+      >
+        {title}
+      </Tooltip>
+    </th>
+  );
+};
+
+MeasurementColumnHeader.defaultProps = {
+  hasSecondDimension: false
+};
+
+MeasurementColumnHeader.propTypes = {
+  baseCSS: PropTypes.shape({}).isRequired,
+  general: PropTypes.shape({
+    cellSuffix: PropTypes.string.isRequired
+  }).isRequired,
+  hasSecondDimension: PropTypes.bool,
+  measurement: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  styling: PropTypes.shape({
+    headerOptions: PropTypes.shape({
+      fontSizeAdjustment: PropTypes.number.isRequired
+    }).isRequired
+  }).isRequired
+};
+
+export default MeasurementColumnHeader;

src/index.js

@@ -1,791 +1,90 @@
+import definition from './definition';
+import { initializeDataCube, initializeDesignList } from './dataset';
+import initializeStore from './store';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Root from './root.jsx';
+import './main.less';
 
-import $ from 'jquery';
-import style from 'text-loader!./PLSmartPivot.css';
-import paint from './paint';
-
-$('<style>').html(style).appendTo('head');
+if (!window._babelPolyfill) { // eslint-disable-line no-underscore-dangle
+  require('@babel/polyfill'); // eslint-disable-line global-require
+}
 
 export default {
+  controller: [
+    '$scope',
+    '$timeout',
+    function controller () {}
+  ],
+  design: {
+    dimensions: {
+      max: 1,
+      min: 0
+    }
+  },
+  data: {
+    dimensions: {
+      max: function (nMeasures) {
+        return nMeasures < 9 ? 2 : 1;
+      },
+      min: 1,
+      uses: 'dimensions'
+    },
+    measures: {
+      max: function (nDims) {
+        return nDims < 2 ? 9 : 8;
+      },
+      min: 1,
+      uses: 'measures'
+    }
+  },
+  definition,
   initialProperties: {
     version: 1.0,
     qHyperCubeDef: {
       qDimensions: [],
-      qMeasures: [],
-      qInitialDataFetch: [{
-        qWidth: 10,
-        qHeight: 1000
-      }]
-    },
-  },
-  definition: {
-    type: 'items',
-    component: 'accordion',
-    items: {
-      dimensions: {
-        uses: 'dimensions',
-        min: 1,
-        max: 2
-      },
-      measures: {
-        uses: 'measures',
-        min: 1,
-        max: 9
-      },
-      sorting: {
-        uses: 'sorting'
-      },
-
-      settings: {
-        uses: 'settings',
-        items: {
-          Pagination: {
-            type: 'items',
-            label: 'Pagination',
-            items: {
-              MaxPaginationLoops: {
-                ref: 'maxloops',
-                type: 'number',
-                component: 'dropdown',
-                label: 'Max Pagination Loops',
-                options:
-                  [{
-                    value: 1,
-                    label: '10k cells'
-                  }, {
-                    value: 2,
-                    label: '20k cells'
-                  }, {
-                    value: 3,
-                    label: '30k cells'
-                  }, {
-                    value: 4,
-                    label: '40k cells'
-                  }, {
-                    value: 5,
-                    label: '50k cells'
-                  }, {
-                    value: 6,
-                    label: '60k cells'
-                  }, {
-                    value: 7,
-                    label: '70k cells'
-                  }, {
-                    value: 8,
-                    label: '80k cells'
-                  }, {
-                    value: 9,
-                    label: '90k cells'
-                  }, {
-                    value: 10,
-                    label: '100k cells'
-                  }
-
-                  ],
-                defaultValue: 2,
-              },
-              ErrorMessage: {
-                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.',
-              },
-            },
-          },
-          Header: {
-            type: 'items',
-            label: 'Header Format',
-            items: {
-              Align: {
-                ref: 'HeaderAlign',
-                translation: 'Header Alignment',
-                type: 'number',
-                component: 'buttongroup',
-                options: [{
-                  value: 1,
-                  label: 'Left'
-                }, {
-                  value: 2,
-                  label: 'Center'
-                }, {
-                  value: 3,
-                  label: 'Right'
-                }],
-                defaultValue: 2,
-              },
-              headercolors: {
-                ref: 'HeaderColorSchema',
-                type: 'string',
-                component: 'dropdown',
-                label: 'BackGround Header Color',
-                options:
-                  [{
-                    value: 'Clean',
-                    label: 'Clean'
-                  }, {
-                    value: 'Soft',
-                    label: 'Soft'
-                  }, {
-                    value: 'Dark',
-                    label: 'Dark'
-                  }, {
-                    value: 'Night',
-                    label: 'Night'
-                  }, {
-                    value: 'Blue',
-                    label: 'Blue'
-                  }, {
-                    value: 'Orange',
-                    label: 'Orange'
-                  }, {
-                    value: 'Red',
-                    label: 'Red'
-                  }, {
-                    value: 'Green',
-                    label: 'Green'
-                  }, {
-                    value: 'Violete',
-                    label: 'Violete'
-                  }, {
-                    value: 'Custom',
-                    label: 'Custom'
-                  }
-
-                  ],
-                defaultValue: 'Night',
-              },
-              HeaderTextColor: {
-                ref: 'HeaderTextColorSchema',
-                type: 'string',
-                component: 'dropdown',
-                label: 'Text Header Color',
-                options:
-                  [{
-                    value: 'Black',
-                    label: 'Black'
-                  }, {
-                    value: 'DimGray',
-                    label: 'DimGray'
-                  }, {
-                    value: 'ForestGreen',
-                    label: 'ForestGreen'
-                  }, {
-                    value: 'Gainsboro',
-                    label: 'Gainsboro'
-                  }, {
-                    value: 'Indigo',
-                    label: 'Indigo'
-                  }, {
-                    value: 'Navy',
-                    label: 'Navy'
-                  }, {
-                    value: 'Purple',
-                    label: 'Purple'
-                  }, {
-                    value: 'WhiteSmoke',
-                    label: 'WhiteSmoke'
-                  }, {
-                    value: 'White',
-                    label: 'White'
-                  }, {
-                    value: 'YellowGreen',
-                    label: 'YellowGreen'
-                  }
-                  ],
-                defaultValue: 'WhiteSmoke',
-              },
-              HeaderFontSize: {
-                ref: 'lettersizeheader',
-                translation: 'Font Size',
-                type: 'number',
-                component: 'buttongroup',
-                options: [{
-                  value: 1,
-                  label: 'Small'
-                }, {
-                  value: 2,
-                  label: 'Medium'
-                  //}, {
-                  //	value: 3,
-                  //	label: "Large"
-                }],
-                defaultValue: 2
-              },
-            }
-          },
-          Formatted: {
-            type: 'items',
-            label: 'Table Format',
-            items: {
-              IndentBool: {
-                ref: 'indentbool',
-                type: 'boolean',
-                label: 'Indent',
-                defaultValue: true
-              },
-              SeparatorColumns: {
-                ref: 'separatorcols',
-                type: 'boolean',
-                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: function (data) {
-                  return data.customfilebool;
-                }
-              },
-              colors: {
-                ref: 'ColorSchema',
-                type: 'string',
-                component: 'dropdown',
-                label: 'BackGround Style',
-                options:
-                  [{
-                    value: 'Clean',
-                    label: 'Clean'
-                  }, {
-                    value: 'Soft',
-                    label: 'Soft'
-                  }, {
-                    value: 'Dark',
-                    label: 'Dark'
-                  }, {
-                    value: 'Night',
-                    label: 'Night'
-                  }, {
-                    value: 'Blue',
-                    label: 'Blue'
-                  }, {
-                    value: 'Orange',
-                    label: 'Orange'
-                  }, {
-                    value: 'Red',
-                    label: 'Red'
-                  }, {
-                    value: 'Green',
-                    label: 'Green'
-                  }, {
-                    value: 'Violete',
-                    label: 'Violete'
-                  }, {
-                    value: 'Custom',
-                    label: 'Custom'
-                  }
-
-                  ],
-                defaultValue: 'Clean',
-                show: function (data) {
-                  return data.customfilebool == false;
-                }
-              },
-              BodyTextColor: {
-                ref: 'BodyTextColorSchema',
-                type: 'string',
-                component: 'dropdown',
-                label: 'Text Body Color',
-                options:
-                  [{
-                    value: 'Black',
-                    label: 'Black'
-                  }, {
-                    value: 'DimGray',
-                    label: 'DimGray'
-                  }, {
-                    value: 'ForestGreen',
-                    label: 'ForestGreen'
-                  }, {
-                    value: 'Gainsboro',
-                    label: 'Gainsboro'
-                  }, {
-                    value: 'Indigo',
-                    label: 'Indigo'
-                  }, {
-                    value: 'Navy',
-                    label: 'Navy'
-                  }, {
-                    value: 'Purple',
-                    label: 'Purple'
-                  }, {
-                    value: 'WhiteSmoke',
-                    label: 'WhiteSmoke'
-                  }, {
-                    value: 'White',
-                    label: 'White'
-                  }, {
-                    value: 'YellowGreen',
-                    label: 'YellowGreen'
-                  }
-                  ],
-                defaultValue: 'Black',
-                show: function (data) {
-                  return data.customfilebool == false;
-                }
-              },
-              FontFamily: {
-                ref: 'FontFamily',
-                type: 'string',
-                component: 'dropdown',
-                label: 'FontFamily',
-                options:
-                  [{
-                    value: 'Arial',
-                    label: 'Arial'
-                  }, {
-                    value: 'Calibri',
-                    label: 'Calibri'
-                  }, {
-                    value: 'Comic Sans MS',
-                    label: 'Comic Sans MS'
-                  }, {
-                    value: 'MS Sans Serif',
-                    label: 'MS Sans Serif'
-                  }, {
-                    value: 'Tahoma',
-                    label: 'Tahoma'
-                  }, {
-                    value: 'Verdana',
-                    label: 'Verdana'
-                  }
-
-
-                  ],
-                defaultValue: 'Calibri'
-              },
-              DataFontSize: {
-                ref: 'lettersize',
-                translation: 'Font Size',
-                type: 'number',
-                component: 'buttongroup',
-                options: [{
-                  value: 1,
-                  label: 'Small'
-                }, {
-                  value: 2,
-                  label: 'Medium'
-                  //}, {
-                  //	value: 3,
-                  //	label: "Large"
-                }],
-                defaultValue: 2
-              },
-              ColumnWidthSlider: {
-                type: 'number',
-                component: 'slider',
-                label: 'Column Width',
-                ref: 'columnwidthslider',
-                min: 1,
-                max: 3,
-                step: 1,
-                defaultValue: 2
-              },
-              SymbolForNulls: {
-                ref: 'symbolfornulls',
-                label: 'Symbol for Nulls',
-                type: 'string',
-                defaultValue: ' '
-              },
-              AllowExportXLS: {
-                ref: 'allowexportxls',
-                type: 'boolean',
-                component: 'switch',
-                label: 'Allow export to Excel',
-                options: [{
-                  value: true,
-                  label: 'On'
-                }, {
-                  value: false,
-                  label: 'Off'
-                }],
-                defaultValue: true
-              },
-              FilterOnCellClick: {
-                ref: 'filteroncellclick',
-                type: 'boolean',
-                component: 'switch',
-                label: 'Filter data when cell clicked',
-                options: [{
-                  value: true,
-                  label: 'On'
-                }, {
-                  value: false,
-                  label: 'Off'
-                }],
-                defaultValue: true
-              }
-            }
-          },
-          ConceptSemaphores: {
-            type: 'items',
-            label: 'Concept Semaphores',
-            items: {
-              AllConcepts: {
-                ref: 'allsemaphores',
-                type: 'boolean',
-                component: 'switch',
-                label: 'All concepts affected',
-                options: [{
-                  value: true,
-                  label: 'On'
-                }, {
-                  value: false,
-                  label: 'Off'
-                }],
-                defaultValue: true
-              },
-              ConceptsAffected1: {
-                ref: 'conceptsemaphore1',
-                translation: 'Concept 1',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected2: {
-                ref: 'conceptsemaphore2',
-                translation: 'Concept 2',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected3: {
-                ref: 'conceptsemaphore3',
-                translation: 'Concept 3',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected4: {
-                ref: 'conceptsemaphore4',
-                translation: 'Concept 4',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected5: {
-                ref: 'conceptsemaphore5',
-                translation: 'Concept 5',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected6: {
-                ref: 'conceptsemaphore6',
-                translation: 'Concept 6',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected7: {
-                ref: 'conceptsemaphore7',
-                translation: 'Concept 7',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected8: {
-                ref: 'conceptsemaphore8',
-                translation: 'Concept 8',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected9: {
-                ref: 'conceptsemaphore9',
-                translation: 'Concept 9',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-              ConceptsAffected10: {
-                ref: 'conceptsemaphore10',
-                translation: 'Concept 10',
-                type: 'string',
-                defaultValue: '',
-                show: function (data) {
-                  return data.allsemaphores == false;
-                }
-              },
-            }
-          },
-          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: function (data) {
-                  return data.allmetrics == false;
-                }
-              },
-              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: 7,
-                  color: '#f93f17'
-                }
-              },
-              ColorStatus1Text: {
-                ref: 'colorstatus1text',
-                label: 'Critic Color Text',
-                type: 'object',
-                component: 'color-picker',
-                defaultValue: {
-                  index: 10,
-                  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: 8,
-                  color: '#ffcf02'
-                }
-              },
-              ColorStatus2Text: {
-                ref: 'colorstatus2text',
-                label: 'Medium Color Text',
-                type: 'object',
-                component: 'color-picker',
-                defaultValue: {
-                  index: 11,
-                  color: '#000000'
-                }
-              },
-              ColorStatus3: {
-                ref: 'colorstatus3',
-                label: 'Success Color Fill',
-                type: 'object',
-                component: 'color-picker',
-                defaultValue: {
-                  index: 9,
-                  color: '#276e27'
-                }
-              },
-              ColorStatus3Text: {
-                ref: 'colorstatus3text',
-                label: 'Success Color Text',
-                type: 'object',
-                component: 'color-picker',
-                defaultValue: {
-                  index: 10,
-                  color: '#ffffff'
-                }
-              },
-
-            }
-          },
-          ColorLibrary: {
-            type: 'items',
-            label: 'Primary Colors Library',
-            items: {
-              ColLibClean: {
-                ref: 'collibclean',
-                translation: 'Clean',
-                type: 'string',
-                defaultValue: '#ffffff',
-              },
-              ColLibSoft: {
-                ref: 'collibsoft',
-                translation: 'Soft',
-                type: 'string',
-                defaultValue: '#efefef',
-              },
-              ColLibDark: {
-                ref: 'collibdark',
-                translation: 'Dark',
-                type: 'string',
-                defaultValue: '#c4c4c4',
-              },
-              ColLibNight: {
-                ref: 'collibnight',
-                translation: 'Night',
-                type: 'string',
-                defaultValue: '#808080',
-              },
-              ColLibRed: {
-                ref: 'collibred',
-                translation: 'Red',
-                type: 'string',
-                defaultValue: '#d58b94',
-              },
-              ColLibOrange: {
-                ref: 'colliborange',
-                translation: 'Orange',
-                type: 'string',
-                defaultValue: '#fd6600',
-              },
-              ColLibViolete: {
-                ref: 'collibviolete',
-                translation: 'Violete',
-                type: 'string',
-                defaultValue: '#ccc0ff',
-              },
-              ColLibBlue: {
-                ref: 'collibblue',
-                translation: 'Blue',
-                type: 'string',
-                defaultValue: '#4575b4',
-              },
-              ColLibGreen: {
-                ref: 'collibgreen',
-                translation: 'Green',
-                type: 'string',
-                defaultValue: '#7bb51c',
-              },
-              ColLibCustom: {
-                ref: 'collibcustom',
-                label: 'Custom',
-                type: 'string',
-                defaultValue: '#ffcccc',
-              },
-            }
-          },
-          PijamaColorLibrary: {
-            type: 'items',
-            label: 'Pijama Colors Library',
-            items: {
-              ColLibCleanP: {
-                ref: 'collibcleanp',
-                translation: 'Clean',
-                type: 'string',
-                defaultValue: '#ffffff',
-              },
-              ColLibSoftP: {
-                ref: 'collibsoftp',
-                translation: 'Soft',
-                type: 'string',
-                defaultValue: '#ffffff',
-              },
-              ColLibDarkP: {
-                ref: 'collibdarkp',
-                translation: 'Dark',
-                type: 'string',
-                defaultValue: '#efefef',
-              },
-              ColLibNightP: {
-                ref: 'collibnightp',
-                translation: 'Night',
-                type: 'string',
-                defaultValue: '#c4c4c4',
-              },
-              ColLibRedP: {
-                ref: 'collibredp',
-                translation: 'Red',
-                type: 'string',
-                defaultValue: '#ffcccc',
-              },
-              ColLibOrangeP: {
-                ref: 'colliborangep',
-                translation: 'Orange',
-                type: 'string',
-                defaultValue: '#ffcc66',
-              },
-              ColLibVioleteP: {
-                ref: 'collibvioletep',
-                translation: 'Violete',
-                type: 'string',
-                defaultValue: '#e6e6ff',
-              },
-              ColLibBlueP: {
-                ref: 'collibbluep',
-                translation: 'Blue',
-                type: 'string',
-                defaultValue: '#b3d9ff',
-              },
-              ColLibGreenP: {
-                ref: 'collibgreenp',
-                translation: 'Green',
-                type: 'string',
-                defaultValue: '#98fb98',
-              },
-              ColLibCustomP: {
-                ref: 'collibcustomp',
-                label: 'Custom',
-                type: 'string',
-                defaultValue: '#ffffff',
-              },
-            }
-          }
+      qInitialDataFetch: [
+        {
+          qHeight: 1,
+          qWidth: 10
         }
-      }
+      ],
+      qMeasures: []
     }
   },
+  support: {
+    export: true,
+    exportData: true,
+    snapshot: true
+  },
+  paint: async function ($element, layout) {
+    const dataCube = await initializeDataCube(this, layout);
+    const designList = await initializeDesignList(this, layout);
+    const state = await initializeStore({
+      $element,
+      component: this,
+      dataCube,
+      designList,
+      layout
+    });
+    const editmodeClass = this.inAnalysisState() ? '' : 'edit-mode';
+    const jsx = (
+      <Root
+        editmodeClass={editmodeClass}
+        qlik={this}
+        state={state}
+      />
+    );
+
+    ReactDOM.render(jsx, $element[0]);
+  },
   snapshot: {
     canTakeSnapshot: true
   },
-  controller: [
-    '$scope',
-    '$timeout',
-    function () { }
-  ],
-  paint: function ($element) {
-    try {
-      paint($element, this);
-    }
-    catch (e) {
-      console.error(e); // eslint-disable-line no-console
-      throw e;
-    }
-  }
+  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

@@ -0,0 +1,363 @@
+import { distinctArray } from './utilities';
+
+export const HEADER_FONT_SIZE = {
+  SMALL: -1,
+  MEDIUM: 1
+};
+
+function getAlignment (option) {
+  const alignmentOptions = {
+    1: 'left',
+    2: 'center',
+    3: 'right'
+  };
+
+  return alignmentOptions[option] || 'left';
+}
+
+function getFontSizeAdjustment (option) {
+  const fontSizeAdjustmentOptions = {
+    1: HEADER_FONT_SIZE.SMALL,
+    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),
+      name: measurement.qFallbackTitle
+    };
+
+    return transformedMeasurement;
+  });
+}
+
+function generateDimensionEntry (information, data) {
+  return {
+    displayValue: data.qText || data.qNum,
+    elementNumber: data.qElemNumber,
+    name: information.qFallbackTitle,
+    value: data.qNum
+  };
+}
+
+function generateMatrixCell ({ cell, dimension1Information, dimension2Information, measurementInformation }) {
+  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: {
+        elementNumber: dimension1Information.qElemNumber,
+        header: dimension1Information.qText
+      },
+      measurement: {
+        header: measurementInformation.name,
+        index: measurementInformation.index
+      }
+    },
+    value: cell.qNum
+  };
+
+  if (dimension2Information) {
+    matrixCell.parents.dimension2 = {
+      elementNumber: dimension2Information.qElemNumber
+    };
+  }
+
+  return matrixCell;
+}
+
+let lastRow = 0;
+function generateDataSet (
+  component, dimensionsInformation, measurementsInformation, dataCube) {
+
+  const measurements = generateMeasurements(measurementsInformation);
+  let dimension1 = [];
+  let dimension2 = [];
+  let matrix = [];
+
+  const hasSecondDimension = dimensionsInformation.length > 1;
+  dataCube.forEach(row => {
+    lastRow += 1;
+    const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
+    dimension1.push(dimension1Entry);
+    let dimension2Entry;
+    let firstDataCell = 1;
+    if (hasSecondDimension) {
+      dimension2Entry = generateDimensionEntry(dimensionsInformation[1], row[1]);
+      dimension2.push(dimension2Entry);
+      firstDataCell = 2;
+    }
+    let matrixRow = row
+      .slice(firstDataCell, row.length)
+      .map((cell, cellIndex) => {
+        const measurementInformation = measurements[cellIndex];
+        measurementInformation.index = cellIndex;
+        const dimension1Information = row[0]; // eslint-disable-line prefer-destructuring
+        const dimension2Information = hasSecondDimension ? row[1] : null;
+        const generatedCell = generateMatrixCell({
+          cell,
+          dimension1Information,
+          dimension2Information,
+          measurementInformation
+        });
+
+        return generatedCell;
+      });
+
+    let appendToRowIndex = matrix.length;
+    if (hasSecondDimension) {
+      // See if there already is a row for the current dim1
+      for (let i = 0; i < matrix.length; i++) {
+        if (matrix[i][0].parents.dimension1.header === matrixRow[0].parents.dimension1.header) {
+          appendToRowIndex = i;
+          matrixRow = matrix[i].concat(matrixRow);
+        }
+      }
+    }
+    matrix[appendToRowIndex] = matrixRow;
+  });
+
+  // filter header dimensions to only have distinct values
+  dimension1 = distinctArray(dimension1);
+  dimension2 = distinctArray(dimension2);
+
+  // Make sure all rows are saturated, otherwise data risks being displayed in the wrong column
+  matrix = matrix.map((row, rowIndex) => {
+    if ((hasSecondDimension && row.length == (dimension2.length * measurements.length))
+      || (!hasSecondDimension && row.length == measurements.length)) {
+      // Row is saturated
+      return row;
+    }
+
+    // Row is not saturated, so must add empty cells to fill the gaps
+    let newRow = [];
+    if (hasSecondDimension) {
+      // Got a second dimension, so need to add measurements for all values of the second dimension
+      let rowDataIndex = 0;
+      dimension2.forEach(dim => {
+        rowDataIndex = appendMissingCells(
+          row, newRow, rowDataIndex, measurements, rowIndex, dim.elementNumber);
+      });
+    } else {
+      appendMissingCells(row, newRow, 0, measurements, rowIndex);
+    }
+
+    return newRow;
+  });
+
+  return {
+    dimension1: dimension1,
+    dimension2: dimension2,
+    matrix,
+    measurements
+  };
+}
+
+/*
+ * 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;
+  const rowCount = component.backendApi.getRowCount();
+  const maxLoops = layout.maxloops;
+  const {
+    dimension1,
+    dimension2,
+    measurements,
+    matrix
+  } = generateDataSet(component, dimensionsInformation, measurementsInformation, dataCube);
+
+  const customSchemaBasic = [];
+  const customSchemaFull = [];
+  let customHeadersCount = 0;
+
+  if (designList && designList.length > 0) {
+    const headers = designList[0].split(';');
+    customHeadersCount = headers.length;
+    for (let lineNumber = 0; lineNumber < designList.length; lineNumber += 1) {
+      customSchemaFull[lineNumber] = new Array(headers.length);
+      const data = designList[lineNumber].split(';');
+
+      if (data.length === headers.length) {
+        for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+          [customSchemaBasic[lineNumber]] = data;
+          customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
+        }
+      }
+    }
+  }
+
+  // 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 = {
+    data: {
+      headers: {
+        dimension1, // column headers
+        dimension2, // parent row headers if exists
+        measurements // row headers, looped for each dimension2 if exists
+      },
+      matrix, // 2d array of all rows/cells to render in body of datatable
+      meta: {
+        dimensionCount: dimensionsInformation.length
+      }
+    },
+    general: {
+      allowExcelExport: layout.allowexportxls,
+      allowFilteringByClick: layout.filteroncellclick,
+      cellSuffix: getCellSuffix(layout.columnwidthslider), // TOOD: move to matrix cells or is it headers.measurements?
+      errorMessage: layout.errormessage,
+      footnote: layout.footnote,
+      maxLoops,
+      subtitle: layout.subtitle,
+      title: layout.title
+    },
+    selection: {
+      dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
+    },
+    styling: {
+      customCSV: {
+        basic: customSchemaBasic,
+        count: customHeadersCount,
+        full: customSchemaFull
+      },
+      hasCustomFileStyle: Boolean(designList),
+      headerOptions: {
+        alignment: getAlignment(layout.HeaderAlign),
+        colorSchema: layout.HeaderColorSchema.color,
+        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader),
+        textColor: layout.HeaderTextColorSchema.color
+      },
+      options: {
+        backgroundColor: layout.rowEvenBGColor,
+        backgroundColorOdd: layout.rowOddBGColor,
+        color: layout.BodyTextColorSchema,
+        fontFamily: layout.FontFamily,
+        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
+        textAlignment: layout.cellTextAlignment
+      },
+      conditionalColoring: {
+        enabled: layout.conditionalcoloring.enabled,
+        colorAllRows: layout.conditionalcoloring.colorall,
+        rows: layout.conditionalcoloring.rows.map(row => row.rowname),
+        colorAllMeasures: typeof layout.conditionalcoloring.colorallmeasures === 'undefined'
+          || layout.conditionalcoloring.colorallmeasures,
+        measures: !layout.conditionalcoloring.measures
+          ? [] : layout.conditionalcoloring.measures.split(',').map(index => Number(index)),
+        threshold: {
+          poor: layout.conditionalcoloring.threshold_poor,
+          fair: layout.conditionalcoloring.threshold_fair
+        },
+        colors: {
+          poor: {
+            color: layout.conditionalcoloring.color_poor,
+            textColor: layout.conditionalcoloring.textcolor_poor
+          },
+          fair: {
+            color: layout.conditionalcoloring.color_fair,
+            textColor: layout.conditionalcoloring.textcolor_fair
+          },
+          good: {
+            color: layout.conditionalcoloring.color_good,
+            textColor: layout.conditionalcoloring.textcolor_good
+          }
+        }
+      },
+      symbolForNulls: layout.symbolfornulls,
+      usePadding: layout.indentbool,
+      useSeparatorColumns: dimensionCount === 1 ? false : layout.separatorcols
+    }
+  };
+
+  if (rowCount > lastRow && rowCount <= (maxLoops * 1000)) {
+    const requestPage = [
+      {
+        qHeight: Math.min(1000, rowCount - lastRow),
+        qLeft: 0,
+        qTop: matrix.length,
+        qWidth: 10 // should be # of columns
+      }
+    ];
+    component.backendApi.getData(requestPage).then(() => {
+      component.paint($element, layout);
+    });
+  }
+
+  return transformedProperties;
+}
+
+export default initializeTransformed;

src/linked-scroll/index.js

@@ -0,0 +1,2 @@
+export { default as LinkedScrollWrapper } from './linked-scroll-wrapper.jsx';
+export { default as LinkedScrollSection } from './linked-scroll-section.jsx';

src/linked-scroll/linked-scroll-section.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LinkedScrollContext } from './linked-scroll-wrapper.jsx';
+
+class LinkedScrollSection extends React.PureComponent {
+  static contextType = LinkedScrollContext;
+
+  componentDidMount () {
+    const { link } = this.context;
+    link(this);
+  }
+
+  componentWillUnmount () {
+    const { unlink } = this.context;
+    unlink(this);
+  }
+
+  render () {
+    const { children } = this.props;
+
+    return children;
+  }
+}
+
+LinkedScrollSection.propTypes = {
+  children: PropTypes.any
+};
+
+export default LinkedScrollSection;

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+export const LinkedScrollContext = React.createContext();
+
+class LinkedScrollWrapper extends React.PureComponent {
+  constructor (props) {
+    super(props);
+
+    this.linkComponent = this.linkComponent.bind(this);
+    this.unlinkComponent = this.unlinkComponent.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.scrollElements = [];
+
+    this.linkActions = {
+      link: this.linkComponent,
+      unlink: this.unlinkComponent
+    };
+  }
+
+  linkComponent (component) {
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = ReactDOM.findDOMNode(component);
+    const element = {
+      component,
+      node
+    };
+    this.scrollElements.push(element);
+    node.onscroll = this.handleScroll.bind(this, element);
+  }
+
+  unlinkComponent (component) {
+    const componentIndex = this.scrollElements.map(element => element.component).indexOf(component);
+    if (componentIndex !== -1) {
+      this.scrollElements.removeAt(componentIndex);
+      // eslint-disable-next-line react/no-find-dom-node
+      const node = ReactDOM.findDOMNode(component);
+      node.onscroll = null;
+    }
+  }
+
+  handleScroll (element) {
+    window.requestAnimationFrame(() => {
+      this.sync(element);
+    });
+  }
+
+  sync (scrollElement) {
+    this.scrollElements.forEach(element => {
+      if (scrollElement === element) {
+        return;
+      }
+      element.node.onscroll = null;
+      if (element.component.props.linkHorizontal) {
+        element.node.scrollLeft = scrollElement.node.scrollLeft;
+      }
+
+      if (element.component.props.linkVertical) {
+        element.node.scrollTop = scrollElement.node.scrollTop;
+      }
+      window.requestAnimationFrame(() => {
+        element.node.onscroll = this.handleScroll.bind(this, element);
+      });
+    });
+  }
+
+  render () {
+    const { children } = this.props;
+    return (
+      <LinkedScrollContext.Provider value={this.linkActions}>
+        {children}
+      </LinkedScrollContext.Provider>
+    );
+  }
+}
+
+LinkedScrollWrapper.propTypes = {
+  children: PropTypes.any
+};
+
+export default LinkedScrollWrapper;

src/main.less

@@ -0,0 +1,313 @@
+/* eslint-disable */
+.qv-object-qlik-smart-pivot {
+  @KpiTableWidth: 230px;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .edit-mode {
+    pointer-events: none;
+  }
+
+  ._cell(@Width: 50px) {
+    min-width: @Width !important;
+    max-width: @Width !important;
+    cursor: pointer;
+    line-height: 1em !important;
+  }
+
+  div.qv-object-content-container {
+    z-index: 110;
+  }
+
+  .icon-xls {
+    text-align: left;
+  }
+
+  button {
+    width: 100%;
+  }
+
+  table {
+    border-collapse: separate;
+    border-spacing: 1px;
+    width: auto;
+  }
+
+  tr {
+    height: 25px;
+  }
+  
+  td,
+  th {
+    padding: 5px !important; // prevent overwriting from single object
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    cursor: default;
+
+    > div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: inherit;
+    }
+  }
+
+  .empty {
+    width: 3%;
+    background: #fff;
+    min-width: 4px !important;
+    max-width: 4px !important;
+  }
+
+  th.main-kpi {
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  .numeric {
+    text-align: right;
+  }
+
+  // ***************** 
+  // 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;
+    max-width: 230px !Important;
+    cursor: pointer;
+    background-color: #fff;
+  }
+
+  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;
+  }
+
+  .tooltip {
+    position: fixed !important;
+    color: rgb(70, 70, 70);
+    background-color: rgb(245, 239, 207);
+    text-align: center;
+    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;
+  }
+
+  .kpi-table {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    flex: none;
+    width: @KpiTableWidth !important;
+    margin: 0;
+    padding: 0;
+
+    .header-wrapper {
+      flex: none;
+      box-shadow: 4px 2px 8px #e1e1e1;
+    }
+
+    .row-wrapper {
+      overflow: scroll;
+      margin: 0;
+      margin-bottom: 8px;
+      padding: 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;
+      }
+    }
+  }
+
+  .row-wrapper .fdim-cells {
+    padding-left: 12px;
+  }
+
+  .data-table {
+    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;
+      margin-right: 8px;
+    }
+
+    .row-wrapper {
+      overflow: scroll;
+      margin: 0;
+      padding: 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;
+    -ms-overflow-style: none; // IE 10+
+    -moz-overflow: -moz-scrollbars-none; // Firefox
+
+    &::-webkit-scrollbar {
+      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/root.componentModel.js

@@ -0,0 +1,5 @@
+function Model (component) {
+  this.component = component;
+}
+
+export default Model;

src/root.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeadersTable from './headers-table/index.jsx';
+import DataTable from './data-table/index.jsx';
+import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
+
+const Root = ({ state, qlik, editmodeClass }) => (
+  <div className="root">
+    <LinkedScrollWrapper>
+      <div className={`kpi-table ${editmodeClass}`}>
+        <HeadersTable
+          data={state.data}
+          general={state.general}
+          isKpi
+          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>
+          <HeadersTable
+            data={state.data}
+            general={state.general}
+            isKpi={false}
+            qlik={qlik}
+            styling={state.styling}
+          />
+        </LinkedScrollSection>
+        <LinkedScrollSection
+          linkHorizontal
+          linkVertical
+        >
+          <DataTable
+            data={state.data}
+            general={state.general}
+            qlik={qlik}
+            styling={state.styling}
+          />
+        </LinkedScrollSection>
+      </div>
+    </LinkedScrollWrapper>
+  </div>
+);
+
+Root.propTypes = {
+  qlik: PropTypes.shape({}).isRequired,
+  state: PropTypes.shape({
+    data: PropTypes.object.isRequired,
+    general: PropTypes.object.isRequired,
+    styling: PropTypes.object.isRequired
+  }).isRequired,
+  editmodeClass: PropTypes.string.isRequired
+};
+
+export default Root;

src/root.spec.js

@@ -0,0 +1,29 @@
+import merge from 'lodash.merge';
+import Model from './root.componentModel';
+import Component from './root.jsx';
+import { mountedComponent } from 'test-utilities';
+import sampleState from 'test-utilities/capex-sample-state';
+
+describe('<Root />', () => {
+  const state = sampleState;
+  const defaultProps = {
+    qlik: {
+      backendApi: {
+        selectValues: () => {}
+      },
+      inEditState: () => {}
+    },
+    state
+  };
+
+  function setup (otherProps = {}) {
+    const props = merge(defaultProps, otherProps);
+
+    return mountedComponent(Model, Component, props);
+  }
+
+  it('should render without exploding', () => {
+    const model = setup();
+    expect(model.component).toBeDefined();
+  });
+});

src/store.js

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

src/style-builder.js

@@ -0,0 +1,103 @@
+function StyleBuilder (styling) {
+  const {
+    customCSV,
+    options
+  } = styling;
+  let style = {
+    fontSize: `${14 + options.fontSizeAdjustment}px`
+  };
+  let hasComments = false;
+  let commentColor;
+  let hasCustomFileStyle = false;
+
+  function applyStandardAttributes (rowNumber) {
+    const hasBackgroundColor = options.backgroundColor && options.backgroundColor.color;
+    const hasOddBackgroundColor = options.backgroundColorOdd && options.backgroundColorOdd.color;
+    if (hasBackgroundColor && hasOddBackgroundColor) {
+      const isEven = rowNumber % 2 === 0;
+      style.backgroundColor = isEven ? options.backgroundColor.color : options.backgroundColorOdd.color;
+      style.color = options.color;
+    }
+    style.fontSize = `${13 + options.fontSizeAdjustment}px`;
+  }
+
+  function applyColor (color) {
+    style.backgroundColor = color;
+    commentColor = color;
+  }
+
+  /* eslint-disable sort-keys*/
+  const properties = {
+    '<comment>': () => { hasComments = true; },
+    // text
+    '<bold>': () => { style.fontWeight = 'bold'; },
+    '<italic>': () => { style.fontStyle = 'italic'; },
+    '<oblique>': () => { style.fontStyle = 'oblique'; },
+    // font color
+    '<white>': () => { style.color = 'white'; },
+    // font size
+    '<large>': () => { style.fontSize = `${15 + options.fontSizeAdjustment}px`; },
+    '<medium>': () => { style.fontSize = `${14 + options.fontSizeAdjustment}px`; },
+    '<small>': () => { style.fontSize = `${13 + options.fontSizeAdjustment}px`; },
+    // text alignment
+    '<center>': () => { style.textAlign = 'center'; }
+  };
+  /* eslint-enable sort-keys */
+
+  // TODO: need to improve this, it has way too many false positives
+  function isCSSColor (property) {
+    const isHexColor = property.substring(0, 1) === '#';
+    const isRGBColor = property.substring(0, 3).toUpperCase() === 'RGB';
+
+    return isHexColor || isRGBColor;
+  }
+
+  function applyProperty (property) {
+    if (!property || property === 'none') {
+      return;
+    }
+    if (isCSSColor(property)) {
+      applyColor(property);
+      return;
+    }
+    if (properties[property]) {
+      properties[property]();
+    } else {
+      console.error(`Custom property ${property} does not exist`); // eslint-disable-line no-console
+    }
+  }
+
+  function applyCustomStyle (customStyle) {
+    style = {
+      ...style,
+      ...customStyle
+    };
+  }
+
+  function parseCustomFileStyle (columnText) {
+    for (let csvAttribute = 1; csvAttribute < customCSV.count; csvAttribute += 1) {
+      let customAttribute = '';
+      if (customCSV.basic.indexOf(columnText) < 0) {
+        customAttribute = 'none';
+      } else {
+        hasCustomFileStyle = true;
+        customAttribute = customCSV.full[customCSV.basic.indexOf(columnText)][csvAttribute];
+      }
+      applyProperty(customAttribute);
+    }
+  }
+
+  return {
+    applyCustomStyle,
+    applyProperty,
+    applyStandardAttributes,
+    getCommentColor: () => commentColor,
+    getStyle: () => style,
+    hasComments: () => hasComments,
+    hasCustomFileStyle: () => hasCustomFileStyle,
+    hasFontSize: () => Boolean(style.fontSize),
+    parseCustomFileStyle
+  };
+}
+
+export default StyleBuilder;

src/tooltip/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const handleCalculateTooltipPosition = (event) => {
+  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.PureComponent {
+  constructor (props) {
+    super(props);
+    this.state = {
+      showTooltip: false
+    };
+    this.handleRenderTooltip = this.handleRenderTooltip.bind(this);
+  }
+
+  handleRenderTooltip () {
+    const { showTooltip } = this.state;
+    this.setState({ showTooltip: !showTooltip });
+  }
+
+  render () {
+    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 style={{ fontFamily: styling.options.fontFamily }}>
+                {tooltipText}
+              </p>
+            </div>
+          ) : null}
+      </div>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  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;

src/utilities.js

@@ -0,0 +1,39 @@
+export function onlyUnique (value, index, self) {
+  return self.indexOf(value) === index;
+}
+
+export function distinctArray (array) {
+  return array
+    .map(entry => JSON.stringify(entry))
+    .filter(onlyUnique)
+    .map(entry => JSON.parse(entry));
+}
+
+export function Deferred () {
+  this.promise = new Promise((resolve, reject) => {
+    this.resolve = resolve;
+    this.reject = reject;
+  });
+}
+
+export function injectSeparators (array, shouldHaveSeparator, suppliedOptions) {
+  const defaultOptions = {
+    atEvery: 1,
+    separator: { isSeparator: true }
+  };
+  const options = {
+    ...defaultOptions,
+    ...suppliedOptions
+  };
+
+  if (!shouldHaveSeparator) {
+    return array;
+  }
+  return array.reduce((result, entry, index) => {
+    result.push(entry);
+    if (index < array.length - 1 && (index + 1) % options.atEvery === 0) {
+      result.push(options.separator);
+    }
+    return result;
+  }, []);
+}

stylelint.config.js

@@ -1,35 +1,129 @@
-"use strict";
-
 module.exports = {
-  rules: {
-    "at-rule-no-unknown": true,
-    "block-no-empty": true,
-    "color-no-invalid-hex": true,
-    "comment-no-empty": true,
-    "declaration-block-no-duplicate-properties": [
-      true,
+  'rules': {
+    'at-rule-empty-line-before': [
+      'always',
       {
-        ignore: ["consecutive-duplicates-with-different-values"]
+        except: [
+          'blockless-after-same-name-blockless',
+          'first-nested'
+        ],
+        ignore: ['after-comment']
       }
     ],
-    "declaration-block-no-shorthand-property-overrides": true,
-    "font-family-no-duplicate-names": true,
-    "font-family-no-missing-generic-family-keyword": true,
-    "function-calc-no-unspaced-operator": true,
-    "function-linear-gradient-no-nonstandard-direction": true,
-    "keyframe-declaration-no-important": true,
-    "media-feature-name-no-unknown": true,
-    "no-descending-specificity": true,
-    "no-duplicate-at-import-rules": true,
-    "no-duplicate-selectors": true,
-    "no-empty-source": true,
-    "no-extra-semicolons": true,
-    "no-invalid-double-slash-comments": true,
-    "property-no-unknown": true,
-    "selector-pseudo-class-no-unknown": true,
-    "selector-pseudo-element-no-unknown": true,
-    "selector-type-no-unknown": true,
-    "string-no-newline": true,
-    "unit-no-unknown": true
+    'at-rule-name-case': 'lower',
+    'at-rule-name-space-after': 'always-single-line',
+    'at-rule-semicolon-newline-after': 'always',
+    'block-closing-brace-empty-line-before': 'never',
+    'block-closing-brace-newline-after': 'always',
+    'block-closing-brace-newline-before': 'always-multi-line',
+    'block-closing-brace-space-before': 'always-single-line',
+    'block-opening-brace-newline-after': 'always-multi-line',
+    'block-opening-brace-space-after': 'always-single-line',
+    'block-opening-brace-space-before': 'always',
+    'color-hex-case': 'lower',
+    'color-hex-length': 'short',
+    'color-named': 'never',
+    'comment-empty-line-before': [
+      'always',
+      {
+        except: ['first-nested'],
+        ignore: ['stylelint-commands']
+      }
+    ],
+    'comment-whitespace-inside': 'always',
+    'custom-property-empty-line-before': [
+      'always',
+      {
+        except: [
+          'after-custom-property',
+          'first-nested'
+        ],
+        ignore: [
+          'after-comment',
+          'inside-single-line-block'
+        ]
+      }
+    ],
+    'declaration-bang-space-after': 'never',
+    'declaration-bang-space-before': 'always',
+    'declaration-block-semicolon-newline-after': 'always-multi-line',
+    'declaration-block-semicolon-space-after': 'always-single-line',
+    'declaration-block-semicolon-space-before': 'never',
+    'declaration-block-single-line-max-declarations': 1,
+    'declaration-block-trailing-semicolon': 'always',
+    'declaration-colon-newline-after': 'always-multi-line',
+    'declaration-colon-space-after': 'always-single-line',
+    'declaration-colon-space-before': 'never',
+    'declaration-empty-line-before': [
+      'always',
+      {
+        except: [
+          'after-declaration',
+          'first-nested'
+        ],
+        ignore: [
+          'after-comment',
+          'inside-single-line-block'
+        ]
+      }
+    ],
+    'declaration-no-important': [
+      true,
+      {
+        severity: 'warning'
+      }
+    ],
+    'function-comma-newline-after': 'always-multi-line',
+    'function-comma-space-after': 'always-single-line',
+    'function-comma-space-before': 'never',
+    'function-max-empty-lines': 0,
+    'function-name-case': 'lower',
+    'function-parentheses-newline-inside': 'always-multi-line',
+    'function-parentheses-space-inside': 'never-single-line',
+    'function-whitespace-after': 'always',
+    'indentation': 2,
+    'length-zero-no-unit': true,
+    'max-empty-lines': 1,
+    'max-nesting-depth': 5,
+    'media-feature-colon-space-after': 'always',
+    'media-feature-colon-space-before': 'never',
+    'media-feature-name-case': 'lower',
+    'media-feature-parentheses-space-inside': 'never',
+    'media-feature-range-operator-space-after': 'always',
+    'media-feature-range-operator-space-before': 'always',
+    'media-query-list-comma-newline-after': 'always-multi-line',
+    'media-query-list-comma-space-after': 'always-single-line',
+    'media-query-list-comma-space-before': 'never',
+    'no-extra-semicolons': true,
+    'no-missing-end-of-source-newline': true,
+    'number-leading-zero': 'always',
+    'number-no-trailing-zeros': true,
+    'property-case': 'lower',
+    'rule-empty-line-before': [
+      'always-multi-line',
+      {
+        except: ['first-nested'],
+        ignore: ['after-comment']
+      }
+    ],
+    'selector-attribute-brackets-space-inside': 'never',
+    'selector-attribute-operator-space-after': 'never',
+    'selector-attribute-operator-space-before': 'never',
+    'selector-combinator-space-after': 'always',
+    'selector-combinator-space-before': 'always',
+    'selector-descendant-combinator-no-non-space': true,
+    'selector-list-comma-newline-after': 'always',
+    'selector-list-comma-space-before': 'never',
+    'selector-max-empty-lines': 0,
+    'selector-pseudo-class-case': 'lower',
+    'selector-pseudo-class-parentheses-space-inside': 'never',
+    'selector-pseudo-element-case': 'lower',
+    'selector-pseudo-element-colon-notation': 'double',
+    'selector-type-case': 'lower',
+    'unit-case': 'lower',
+    'value-list-comma-newline-after': 'always-multi-line',
+    'value-list-comma-space-after': 'always-single-line',
+    'value-list-comma-space-before': 'never',
+    'value-list-max-empty-lines': 0
   }
 };

webpack.config.js

@@ -1,20 +1,15 @@
-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',
-  entry: [
-    './src/index.js'
-  ],
-  mode: settings.mode,
-  output: {
-    path: settings.buildDestination,
-    filename: settings.name + '.js',
-    libraryTarget: 'amd'
-  },
+  entry: ['./src/index.js'],
   externals: {
     jquery: {
       amd: 'jquery',
@@ -22,47 +17,61 @@ const config = {
       commonjs2: 'jquery',
       root: '_'
     },
+    qlik: {
+      amd: 'qlik',
+      commonjs: 'qlik',
+      commonjs2: 'qlik',
+      root: '_'
+    }
   },
+  mode: MODE,
   module: {
     rules: [
       {
         enforce: 'pre',
-        test: /\.js$/,
         exclude: /(node_modules|Library)/,
         loader: 'eslint-loader',
         options: {
           failOnError: true
-        }
+        },
+        test: /\.(js|jsx)$/
       },
       {
-        test: /.js$/,
         exclude: /node_modules/,
+        test: /\.(js|jsx)$/,
         use: {
           loader: 'babel-loader',
           options: {
-            presets: ['@babel/preset-env']
+            plugins: [
+              '@babel/plugin-transform-async-to-generator',
+              '@babel/plugin-proposal-class-properties'
+            ],
+            presets: [
+              '@babel/preset-env',
+              '@babel/preset-react'
+            ]
           }
         }
       },
       {
         test: /.less$/,
-        use: ['style-loader', 'css-loader', 'less-loader']
+        use: [
+          'style-loader',
+          'css-loader',
+          'less-loader'
+        ]
       }
     ]
   },
+  output: {
+    filename: `${packageJSON.name}.js`,
+    libraryTarget: 'amd',
+    path: DIST
+  },
   plugins: [
-    new CopyWebpackPlugin([
-      'assets/' + settings.name + '.qext',
-      'assets/' + settings.name + '.png',
-      'assets/wbfolder.wbl',
-
-      // TODO: remove entries below this line
-      'resources/Accounts.csv',
-      'resources/Accounts2.csv',
-      'resources/QlikLook.csv',
-      'resources/Excel.png',
-    ], {}),
-    new StyleLintPlugin()
+    new StyleLintPlugin({
+      files: '**/*.less'
+    })
   ]
 };