Update metric-semaphores.js

We recently had a bug on the color picker when used in extensions (QLIK-94131) so I went through all extensions to check their status, this was the only one with a potential problem.
The property notation should be as I changed it now (but after fixing the bug it will work anyway). However, there might be code elsewhere in the extension that mitigates the bug, so make sure this gets tested.

.circleci/config.yml

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

.gitignore

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

README.md

@@ -16,6 +16,11 @@ 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

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

assets/wbfolder.wbl

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

gulpfile.js

@@ -1,61 +1,23 @@
 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 pkg = require('./package.json');
+var WebpackDevServer = require('webpack-dev-server');
+var jeditor = require("gulp-json-editor");
 
-var DIST = './dist';
-var VERSION = process.env.VERSION || 'local-dev';
+var srcFiles = path.resolve('./src/**/*.*');
 
-gulp.task('qext', function () {
-	var qext = {
-		name: 'P&L pivot',
-		type: 'visualization',
-		description: pkg.description + '\nVersion: ' + VERSION,
-		version: VERSION,
-		icon: '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('remove-build-folder', function(){
+  return del([settings.buildDestination], { force: true });
 });
 
 gulp.task('zip-build', function(){
-  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));
+  return gulp.src(settings.buildDestination + '/**/*')
+    .pipe(zip(`${settings.name}_${settings.version}.zip`))
+    .pipe(gulp.dest(settings.buildDestination));
 });
 
 gulp.task('webpack-build', done => {
@@ -74,14 +36,40 @@ gulp.task('webpack-build', done => {
   });
 });
 
-gulp.task('build',
-  gulp.series('clean', 'webpack-build', 'qext', 'add-assets')
-);
+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('zip',
-  gulp.series('build', 'zip-build')
+gulp.task('build',
+  gulp.series('remove-build-folder', 'webpack-build', 'update-qext-version', '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

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

package.json

@@ -1,15 +1,18 @@
 {
   "name": "qlik-smart-pivot",
   "version": "0.0.1",
-  "description": "Profit & Loss reporting with color and font customizations.",
-  "homepage": "",
+  "description": "Formatted table for P&L reports.",
+  "keywords": "smart pivot qliksense extension",
   "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": {
@@ -21,6 +24,7 @@
     "@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",
@@ -29,8 +33,15 @@
     "eslint-loader": "2.1.1",
     "eslint-plugin-react": "7.11.1",
     "gulp": "4.0.0",
-    "gulp-util": "^3.0.7",
+    "gulp-json-editor": "2.4.3",
     "gulp-zip": "3.0.2",
+    "jasmine-core": "3.2.1",
+    "jasmine-enzyme": "7.0.1",
+    "karma": "3.0.0",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-jasmine": "1.1.2",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-webpack": "3.0.5",
     "less": "3.8.1",
     "less-loader": "4.1.0",
     "lodash.merge": "4.6.1",
@@ -38,7 +49,9 @@
     "stylelint": "8.4.0",
     "stylelint-webpack-plugin": "0.10.5",
     "text-loader": "0.0.1",
-    "webpack": "4.20.2"
+    "webpack": "4.20.2",
+    "webpack-cli": "3.1.2",
+    "webpack-dev-server": "3.1.10"
   },
   "dependencies": {
     "prop-types": "15.6.2",

resources/Accounts.csv

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

resources/Accounts2.csv

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

resources/QlikLook.csv

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

scripts/create-release.sh

@@ -2,8 +2,8 @@
 set -o errexit
 
 echo "Creating release for version: $VERSION"
-echo "Artifact name: ./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"
+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"
 
 
 # Usage

scripts/verify-files.sh

@@ -1,25 +0,0 @@
-#!/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

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

src/data-table/data-cell.jsx

@@ -108,12 +108,7 @@ DataCell.propTypes = {
   }).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.');
-      }
+      selectValues: PropTypes.func.isRequired
     }).isRequired
   }).isRequired,
   styleBuilder: PropTypes.shape({

src/data-table/header-padding.jsx

@@ -4,8 +4,7 @@ import PropTypes from 'prop-types';
 const HeaderPadding = ({ styleBuilder, styling }) => {
   if (styling.usePadding && !styleBuilder.hasCustomFileStyle()) {
     const paddingStyle = {
-      fontFamily: styling.options.fontFamily,
-      marginLeft: '15px'
+      fontFamily: styling.options.fontFamily
     };
     return (
       <span style={paddingStyle} />

src/data-table/row-header.jsx

@@ -25,14 +25,14 @@ class RowHeader extends React.PureComponent {
         onClick={this.handleSelect}
         style={rowStyle}
       >
+        <HeaderPadding
+          styleBuilder={styleBuilder}
+          styling={styling}
+        />
         <Tooltip
           isTooltipActive={!inEditState}
           tooltipText={entry.displayValue}
         >
-          <HeaderPadding
-            styleBuilder={styleBuilder}
-            styling={styling}
-          />
           {entry.displayValue}
         </Tooltip>
       </td>
@@ -46,12 +46,7 @@ RowHeader.propTypes = {
   }).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.');
-      }
+      selectValues: PropTypes.func.isRequired
     }).isRequired
   }).isRequired,
   rowStyle: PropTypes.shape({}).isRequired,

src/dataset.js

@@ -1,91 +0,0 @@
-import qlik from 'qlik';
-
-function createCube (definition, app) {
-  return new Promise(resolve => {
-    app.createCube(definition, resolve);
-  });
-}
-
-async function buildDataCube (originCubeDefinition, dimensionIndexes, app) {
-  const cubeDefinition = {
-    ...originCubeDefinition,
-    qInitialDataFetch: [
-      {
-        qHeight: 1000,
-        qWidth: 10
-      }
-    ],
-    qDimensions: [originCubeDefinition.qDimensions[dimensionIndexes.dimension1]],
-    qMeasures: originCubeDefinition.qMeasures
-  };
-  if (dimensionIndexes.dimension2) {
-    cubeDefinition.qDimensions.push(originCubeDefinition.qDimensions[dimensionIndexes.dimension2]);
-  }
-  const cube = await createCube(cubeDefinition, app);
-
-  return cube.qHyperCube.qDataPages[0].qMatrix;
-}
-
-async function buildDesignCube (originCubeDefinition, dimensionIndexes, app) {
-  if (!dimensionIndexes.design) {
-    return null;
-  }
-  const cube = await createCube({
-    qInitialDataFetch: [
-      {
-        qHeight: 1000,
-        qWidth: 1
-      }
-    ],
-    qDimensions: [originCubeDefinition.qDimensions[dimensionIndexes.design]]
-  }, app);
-
-  return cube.qHyperCube.qDataPages[0].qMatrix;
-}
-
-const STYLE_SEPARATOR_COUNT = 7;
-function findDesignDimension (qMatrix) {
-  return qMatrix[0].map(entry => (entry.qText.match(/;/g) || []).length).indexOf(STYLE_SEPARATOR_COUNT);
-}
-
-function getDimensionIndexes (dimensionsInformation, designDimensionIndex) {
-  const hasDesign = designDimensionIndex !== -1;
-  const nonDesignDimensionCount = hasDesign ? dimensionsInformation.length - 1 : dimensionsInformation.length;
-  const dimension1 = designDimensionIndex === 0 ? 1 : 0;
-  let dimension2 = false;
-  if (nonDesignDimensionCount === 2) {
-    dimension2 = hasDesign && designDimensionIndex < 2 ? 2 : 1;
-  }
-  const design = hasDesign && designDimensionIndex;
-  const firstMeasurementIndex = dimensionsInformation.length;
-  return {
-    design,
-    dimension1,
-    dimension2,
-    firstMeasurementIndex
-  };
-}
-
-export async function initializeCubes ({ component, layout }) {
-  const app = qlik.currApp(component);
-  const designDimensionIndex = findDesignDimension(layout.qHyperCube.qDataPages[0].qMatrix);
-  const dimensionsInformation = layout.qHyperCube.qDimensionInfo;
-  const dimensionIndexes = getDimensionIndexes(dimensionsInformation, designDimensionIndex);
-
-  let properties;
-  if (component.backendApi.isSnapshot) {
-    // Fetch properties of source
-    properties = (await app.getObjectProperties(layout.sourceObjectId)).properties;
-  } else {
-    properties = await component.backendApi.getProperties();
-  }
-
-  const originCubeDefinition = properties.qHyperCubeDef;
-  const designCube = await buildDesignCube(originCubeDefinition, dimensionIndexes, app);
-  const dataCube = await buildDataCube(originCubeDefinition, dimensionIndexes, app);
-
-  return {
-    design: designCube,
-    data: dataCube
-  };
-}

src/definition/metric-semaphores.js

@@ -23,7 +23,7 @@ const metricSemaphores = {
       ref: 'metricssemaphore',
       translation: 'Metrics affected (1,2,4,...)',
       type: 'string',
-      defaultValue: '-',
+      defaultValue: '0',
       show (data) {
         return !data.allmetrics;
       }
@@ -39,6 +39,7 @@ const metricSemaphores = {
       label: 'Critic Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 8,
         color: '#f93f17'
@@ -49,6 +50,7 @@ const metricSemaphores = {
       label: 'Critic Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 11,
         color: '#ffffff'
@@ -65,6 +67,7 @@ const metricSemaphores = {
       label: 'Medium Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 9,
         color: '#ffcf02'
@@ -75,6 +78,7 @@ const metricSemaphores = {
       label: 'Medium Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 12,
         color: '#000000'
@@ -85,6 +89,7 @@ const metricSemaphores = {
       label: 'Success Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 10,
         color: '#276e27'
@@ -95,6 +100,7 @@ const metricSemaphores = {
       label: 'Success Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 11,
         color: '#ffffff'

src/definition/table-format.js

@@ -1,8 +1,3 @@
-// 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;
-}
-
 const tableFormat = {
   type: 'items',
   label: 'Table Format',
@@ -11,8 +6,7 @@ const tableFormat = {
       ref: 'indentbool',
       type: 'boolean',
       label: 'Indent',
-      defaultValue: false,
-      show: data => !hasDesignDimension(data)
+      defaultValue: true
     },
     SeparatorColumns: {
       ref: 'separatorcols',
@@ -20,6 +14,21 @@ const tableFormat = {
       label: 'Separator Columns',
       defaultValue: false
     },
+    CustomFileBool: {
+      ref: 'customfilebool',
+      type: 'boolean',
+      label: 'Include External File',
+      defaultValue: false
+    },
+    CustomFile: {
+      ref: 'customfile',
+      label: 'Name of CSV file (; separated)',
+      type: 'string',
+      defaultValue: '',
+      show (data) {
+        return data.customfilebool;
+      }
+    },
     rowEvenBGColor: {
       component: 'color-picker',
       defaultValue: {
@@ -29,8 +38,7 @@ const tableFormat = {
       label: 'Even row background color',
       ref: 'rowEvenBGColor',
       type: 'object',
-      dualOutput: true,
-      show: data => !hasDesignDimension(data)
+      dualOutput: true
     },
     rowOddBGColor: {
       component: 'color-picker',
@@ -41,8 +49,7 @@ const tableFormat = {
       label: 'Odd row background color',
       ref: 'rowOddBGColor',
       type: 'object',
-      dualOutput: true,
-      show: data => !hasDesignDimension(data)
+      dualOutput: true
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',
@@ -92,7 +99,9 @@ const tableFormat = {
         }
       ],
       defaultValue: 'Black',
-      show: data => !hasDesignDimension(data)
+      show (data) {
+        return !data.customfilebool;
+      }
     },
     FontFamily: {
       ref: 'FontFamily',

src/headers-table/column-header.jsx

@@ -57,12 +57,7 @@ ColumnHeader.propTypes = {
   }).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.');
-      }
+      selectValues: PropTypes.func.isRequired
     }).isRequired
   }).isRequired,
   styling: PropTypes.shape({

src/headers-table/index.jsx

@@ -126,12 +126,7 @@ HeadersTable.propTypes = {
   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.');
-      }
+      selectValues: PropTypes.func.isRequired
     }).isRequired
   }).isRequired,
   styling: PropTypes.shape({

src/index.js

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

src/initialize-transformed.js

@@ -1,3 +1,4 @@
+import jQuery from 'jquery';
 import { distinctArray } from './utilities';
 
 export const HEADER_FONT_SIZE = {
@@ -107,16 +108,15 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 }
 
 let lastRow = 0;
-function generateDataSet (component, dimensionsInformation, measurementsInformation, cubes) {
+function generateDataSet (component, dimensionsInformation, measurementsInformation) {
   const dimension1 = [];
   const dimension2 = [];
   const measurements = generateMeasurements(measurementsInformation);
   let matrix = [];
 
   let previousDim1Entry;
-  const hasDesignDimension = cubes.design;
-  const hasSecondDimension = hasDesignDimension ? dimensionsInformation.length > 2 : dimensionsInformation.length > 1;
-  cubes.data.forEach(row => {
+  const hasSecondDimension = dimensionsInformation.length > 1;
+  component.backendApi.eachDataRow((rowIndex, row) => {
     lastRow += 1;
     const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
     dimension1.push(dimension1Entry);
@@ -172,7 +172,7 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
   };
 }
 
-function initializeTransformed ({ $element, component, cubes, layout }) {
+async function initializeTransformed ({ $element, layout, component }) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -183,29 +183,37 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
     dimension2,
     measurements,
     matrix
-  } = generateDataSet(component, dimensionsInformation, measurementsInformation, cubes);
+  } = generateDataSet(component, dimensionsInformation, measurementsInformation);
 
   const customSchemaBasic = [];
   const customSchemaFull = [];
   let customHeadersCount = 0;
 
-  if (cubes.design) {
-    const allTextLines = cubes.design.map(entry => entry[0].qText);
-    const headers = allTextLines[0].split(';');
-    customHeadersCount = headers.length;
-    for (let lineNumber = 0; lineNumber < allTextLines.length; lineNumber += 1) {
-      customSchemaFull[lineNumber] = new Array(headers.length);
-      const data = allTextLines[lineNumber].split(';');
+  function readCustomSchema () {
+    const url = `/Extensions/qlik-smart-pivot/${layout.customfile}`;
 
-      if (data.length === headers.length) {
-        for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
-          [customSchemaBasic[lineNumber]] = data;
-          customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
+    return jQuery.get(url).then(response => {
+      const allTextLines = response.split(/\r\n|\n/);
+      const headers = allTextLines[0].split(';');
+      customHeadersCount = headers.length;
+      for (let lineNumber = 0; lineNumber < allTextLines.length; lineNumber += 1) {
+        customSchemaFull[lineNumber] = new Array(headers.length);
+        const data = allTextLines[lineNumber].split(';');
+
+        if (data.length === headers.length) {
+          for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+            customSchemaBasic[lineNumber] = data[0];
+            customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
+          }
         }
       }
-    }
+    });
   }
 
+  const hasCustomSchema = (layout.customfilebool && layout.customfile.length > 4);
+  const schemaPromise = hasCustomSchema ? readCustomSchema() : Promise.resolve();
+  await schemaPromise;
+
   // top level properties could be reducers and then components connect to grab what they want,
   // possibly with reselect for some presentational transforms (moving some of the presentational logic like formatting and such)
   const transformedProperties = {
@@ -239,7 +247,7 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
         count: customHeadersCount,
         full: customSchemaFull
       },
-      hasCustomFileStyle: Boolean(cubes.design),
+      hasCustomFileStyle: layout.customfilebool,
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
         colorSchema: layout.HeaderColorSchema.color,
@@ -310,6 +318,7 @@ function initializeTransformed ({ $element, component, cubes, layout }) {
     });
   }
 
+
   return transformedProperties;
 }
 

src/paint.jsx

@@ -2,17 +2,11 @@ import initializeStore from './store';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Root from './root.jsx';
-import { initializeCubes } from './dataset';
 
 export default async function paint ($element, layout, component) {
-  const cubes = await initializeCubes({
-    component,
-    layout
-  });
   const state = await initializeStore({
     $element,
     component,
-    cubes,
     layout
   });
   const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';

src/store.js

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

src/tooltip/index.jsx

@@ -9,8 +9,7 @@ const handleCalculateTooltipPosition = (event) => {
   tooltip.style.left = `${event.clientX}px`;
   tooltip.style.top = `${event.clientY}px`;
 };
-
-class Tooltip extends React.PureComponent {
+class Tooltip extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
@@ -19,11 +18,20 @@ class Tooltip extends React.PureComponent {
     this.handleRenderTooltip = this.handleRenderTooltip.bind(this);
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    const { showTooltip } = this.state;
+    if (nextState.showTooltip === showTooltip) {
+      return false;
+    }
+    return true;
+  }
+
   handleRenderTooltip () {
     const { showTooltip } = this.state;
     this.setState({ showTooltip: !showTooltip });
   }
 
+
   render () {
     const { children, tooltipText } = this.props;
     const { showTooltip } = this.state;
@@ -52,11 +60,7 @@ class Tooltip extends React.PureComponent {
 }
 
 Tooltip.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]).isRequired,
+  children: PropTypes.string.isRequired,
   tooltipText: PropTypes.string.isRequired
 };
-
 export default Tooltip;

test/test-utilities/enzyme-setup.js

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

test/test-utilities/index.js

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

webpack.config.js

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