Aligned build to Dashboard bundle extensions build

-Part of the work to streamline how the extensions are handled, irregardless of what bundle. Issue: DEB-130, DEB-133
Merge pull request #33 from qlik-oss/snapshotFix
2019-03-27 09:53:09 +01:00 · 2019-03-20 10:28:52 +01:00 · 2019-03-19 10:38:29 +01:00 · 2019-03-18 06:57:13 +01:00 · 2019-02-28 15:58:14 +01:00 · 2019-02-28 15:56:44 +01:00
55 changed files with 1916 additions and 3756 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -26,9 +26,6 @@ jobs:
            --blackduck.username="svc-blackduck" \
            --blackduck.password=${svc_blackduck} \
            --detect.project.name="viz-bundle-qlik-smart-pivot"
-      - run:
-          name: Run tests
-          command: npm run test-once

  bump-version:
    <<: *defaults
@@ -56,16 +53,18 @@ jobs:
          command: |
            export VERSION=$(scripts/get-bumped-version.sh)
            echo "Version: ${VERSION}"
-            npm run build
+            npm run build:zip
+            sudo chmod +x scripts/verify-files.sh
+            scripts/verify-files.sh
          environment:
            NODE_ENV: production
      - persist_to_workspace:
          root: ~/qlik-smart-pivot
          paths:
-            - build
+            - dist
      - store_artifacts:
-          path: build
-          destination: build
+          path: dist
+          destination: dist
  deploy:
    <<: *defaults
    steps:
--- a/.eslintrc.js
+++ b/.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"],
@@ -63,11 +64,11 @@ module.exports = {
    "complexity": ["warn"],
    "camelcase": ["warn"],
    "max-statements": ["off"],  // marks the entire functions, a bit too noisy
-    "sort-vars": ["warn"],
+    "sort-vars": ["off"], // not much value for the work
    "init-declarations": ["off"],
    "capitalized-comments": ["off"],
    "one-var": ["off"],
-    "no-var": ["warn"],
+    "no-var": ["error"],
    "no-plusplus": ["warn"],
    "vars-on-top": ["off"],
    "no-magic-numbers": ["off"], // useful, but also complains for reasonable checks with actual numbers
@@ -80,7 +81,7 @@ module.exports = {
    "quote-props": ["off"],
    "prefer-template": ["warn"],
    "no-lonely-if": ["warn"],
-    "sort-keys": ["warn"],
+    "sort-keys": ["off"], // not much value for the work
    "no-implicit-coercion": ["warn"],
    "no-inline-comments": ["off"],
    "spaced-comment": ["warn"],
@@ -107,7 +108,7 @@ module.exports = {
    "strict": ["warn"],
    "no-ternary": ["off"],
    "multiline-ternary": ["off"],
-    "no-param-reassign": ["warn"],
+    "no-param-reassign": ["error"],
    "prefer-destructuring": ["warn"],
    "arrow-parens": ["off"],
    "no-array-constructor": ["warn"],
@@ -116,7 +117,7 @@ module.exports = {
    "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],
@@ -129,7 +130,8 @@ module.exports = {
    "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/prefer-stateless-function": ["warn"],
+    "react/no-set-state": ["warn"]
  },
  extends: [
    "eslint:all",
--- a/.gitignore
+++ b/.gitignore
@@ -19,7 +19,7 @@ $RECYCLE.BIN/

 # Temporary build files
 node_modules/
-build/
+dist/
 BUMPED_VERSION

 # =========================
--- a/README.md
+++ b/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)
--- a/resources/Excel.png
+++ b/resources/Excel.png
--- a/assets/qlik-smart-pivot.png
+++ b/assets/qlik-smart-pivot.png
--- a/assets/qlik-smart-pivot.qext
+++ b/assets/qlik-smart-pivot.qext
@@ -1,16 +0,0 @@
-{
-	"name": "P&L pivot",
-	"description": "Profit & Loss reporting with color and font customizations.",
-	"type": "visualization",
-	"version": "X.Y.Z",
-	"icon": "table",
-	"preview": "",
-	"author": "Ivan Felipe Asensio <ivan.felipe@qlik.com>",
-	"homepage": "",
-	"keywords": "qlik-sense, visualization",
-	"license": "MIT",
-	"repository": "https://github.com/qlik-oss/PLSmartPivot",
-	"dependencies": {
-		"qlik-sense": ">=5.5.x"
-	}
-}
--- a/assets/wbfolder.wbl
+++ b/assets/wbfolder.wbl
@@ -1,3 +0,0 @@
-qlik-smart-pivot.js;
-qlik-smart-pivot.css;
-qlik-smart-pivot.qext
--- a/gulpfile.js
+++ b/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: '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);
-  });
-}));
--- a/karma.conf.js
+++ b/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' }
-        ]
-      }
-    }
-  });
-};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,51 +1,44 @@
 {
  "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",
-    "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",
--- a/resources/Accounts.csv
+++ b/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>;
--- a/resources/Accounts2.csv
+++ b/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>;
--- a/resources/P&LSmartPivot_demo.qvf
+++ b/resources/P&LSmartPivot_demo.qvf
--- a/resources/QlikLook.csv
+++ b/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>;
--- a/scripts/create-release.sh
+++ b/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
--- a/scripts/verify-files.sh
+++ b/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
--- a/settings.js
+++ b/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
-};
--- a/src/data-table/data-cell.jsx
+++ b/src/data-table/data-cell.jsx
@@ -2,10 +2,132 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApplyPreMask } from '../masking';
 import { addSeparators } from '../utilities';
+import Tooltip from '../tooltip/index.jsx';
+
+class DataCell extends React.PureComponent {
+  constructor (props) {
+    super(props);
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect () {
+    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
+    const hasSecondDimension = dimensionCount > 1;
+    if (!allowFilteringByClick) {
+      return;
+    }
+
+    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
+
+    if (hasSecondDimension) {
+      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
+    }
+  }
+
+  render () {
+    const {
+      data,
+      general,
+      measurement,
+      styleBuilder,
+      styling
+    } = this.props;
+
+    const isColumnPercentageBased = (/%/).test(measurement.format);
+    let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
+    if (styleBuilder.hasComments()) {
+      formattedMeasurementValue = '.';
+    }
+    let textAlignment = 'Right';
+    const textAlignmentProp = styling.options.textAlignment;
+    if (textAlignmentProp) {
+      textAlignment = textAlignmentProp;
+    }
+
+    let cellStyle = {
+      fontFamily: styling.options.fontFamily,
+      ...styleBuilder.getStyle(),
+      paddingLeft: '5px',
+      textAlign: textAlignment
+
+    };
+
+    const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
+    const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
+    const dimension1Row = measurement.parents.dimension1.elementNumber;
+    const isSpecifiedMetricField = fieldsToApplyTo.metricsSpecificFields.indexOf(dimension1Row) !== -1;
+    const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || isSpecifiedMetricField);
+    if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
+      const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
+      cellStyle = {
+        ...styleBuilder.getStyle(),
+        backgroundColor,
+        color,
+        fontFamily: styling.options.fontFamily,
+        paddingLeft: '5px',
+        textAlign: textAlignment
+      };
+    }
+
+    let cellClass = 'grid-cells';
+    const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0;
+    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions;
+    if (shouldUseSmallCells) {
+      cellClass = 'grid-cells-small';
+    }
+
+    return (
+      <td
+        className={`${cellClass}${general.cellSuffix}`}
+        onClick={this.handleSelect}
+        style={cellStyle}
+      >
+        <Tooltip
+          tooltipText={formattedMeasurementValue}
+        >
+          {formattedMeasurementValue}
+        </Tooltip>
+      </td>
+    );
+  }
+}
+
+DataCell.propTypes = {
+  data: PropTypes.shape({
+    headers: PropTypes.shape({
+      measurements: PropTypes.array.isRequired
+    }).isRequired
+  }).isRequired,
+  general: PropTypes.shape({
+    cellSuffix: PropTypes.string.isRequired
+  }).isRequired,
+  measurement: PropTypes.shape({
+    format: PropTypes.string,
+    name: PropTypes.string,
+    value: PropTypes.any
+  }).isRequired,
+  qlik: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
+    }).isRequired
+  }).isRequired,
+  styleBuilder: PropTypes.shape({
+    hasComments: PropTypes.func.isRequired
+  }).isRequired,
+  styling: PropTypes.shape({
+    symbolForNulls: PropTypes.any.isRequired
+  }).isRequired
+};
+
+export default DataCell;

 function formatMeasurementValue (measurement, styling) {
-  // TODO: measurement.name is a horrible propertyname, it's actually the column header
-  const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%';
+  const isColumnPercentageBased = (/%/).test(measurement.format);
  let formattedMeasurementValue = '';
  if (isColumnPercentageBased) {
    if (isNaN(measurement.value)) {
@@ -53,109 +175,11 @@ function formatMeasurementValue (measurement, styling) {
 }

 function getSemaphoreColors (measurement, semaphoreColors) {
-  if (measurement < semaphoreColors.status.critical) {
+  if (measurement.value < semaphoreColors.status.critical) {
    return semaphoreColors.statusColors.critical;
  }
-  if (measurement < semaphoreColors.status.medium) {
+  if (measurement.value < semaphoreColors.status.medium) {
    return semaphoreColors.statusColors.medium;
  }
  return semaphoreColors.statusColors.normal;
 }
-
-class DataCell extends React.PureComponent {
-  constructor (props) {
-    super(props);
-
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-
-  handleSelect () {
-    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
-    const hasSecondDimension = dimensionCount > 1;
-    if (!allowFilteringByClick) {
-      return;
-    }
-
-    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
-
-    if (hasSecondDimension) {
-      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
-    }
-  }
-
-  render () {
-    const { data, general, measurement, styleBuilder, styling } = this.props;
-    const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
-    let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
-    if (styleBuilder.hasComments()) {
-      formattedMeasurementValue = '.';
-    }
-
-    let cellStyle = {
-      fontFamily: styling.options.fontFamily,
-      ...styleBuilder.getStyle(),
-      paddingLeft: '4px',
-      textAlign: 'right'
-
-    };
-    const { semaphoreColors } = styling;
-    const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-    const shouldHaveSemaphoreColors = semaphoreColors.fieldsToApplyTo.applyToAll || semaphoreColors.fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1;
-    if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
-      const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
-      cellStyle = {
-        backgroundColor,
-        color,
-        fontFamily: styling.options.fontFamily,
-        fontSize: styleBuilder.getStyle().fontSize,
-        paddingLeft: '4px',
-        textAlign: 'right'
-      };
-    }
-
-    let cellClass = 'grid-cells';
-    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1;
-    if (shouldUseSmallCells) {
-      cellClass = 'grid-cells-small';
-    }
-
-    return (
-      <td
-        className={`${cellClass}${general.cellSuffix}`}
-        onClick={this.handleSelect}
-        style={cellStyle}
-      >
-        {formattedMeasurementValue}
-      </td>
-    );
-  }
-}
-
-DataCell.propTypes = {
-  data: PropTypes.shape({
-    headers: PropTypes.shape({
-      measurements: PropTypes.array.isRequired
-    }).isRequired
-  }).isRequired,
-  general: PropTypes.shape({
-    cellSuffix: PropTypes.string.isRequired
-  }).isRequired,
-  measurement: PropTypes.shape({
-    format: PropTypes.string,
-    name: PropTypes.string,
-    value: PropTypes.any
-  }).isRequired,
-  qlik: PropTypes.shape({
-    backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
-    }).isRequired
-  }).isRequired,
-  styleBuilder: PropTypes.shape({
-    hasComments: PropTypes.func.isRequired
-  }).isRequired,
-  styling: PropTypes.shape({
-    symbolForNulls: PropTypes.any.isRequired
-  }).isRequired
-};
-
-export default DataCell;
--- a/src/data-table/index.jsx
+++ b/src/data-table/index.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import StyleBuilder from '../style-builder';
 import DataCell from './data-cell.jsx';
-import HeaderPadding from './header-padding.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';

--- a/src/data-table/row-header.jsx
+++ b/src/data-table/row-header.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import HeaderPadding from './header-padding.jsx';
+import Tooltip from '../tooltip/index.jsx';

 class RowHeader extends React.PureComponent {
  constructor (props) {
@@ -15,18 +16,25 @@ class RowHeader extends React.PureComponent {
  }

  render () {
-    const { entry, rowStyle, styleBuilder, styling } = this.props;
+    const { entry, rowStyle, styleBuilder, styling, qlik } = this.props;
+    const inEditState = qlik.inEditState();
+
    return (
      <td
        className="fdim-cells"
        onClick={this.handleSelect}
        style={rowStyle}
      >
-        <HeaderPadding
-          styleBuilder={styleBuilder}
-          styling={styling}
-        />
-        {entry.displayValue}
+        <Tooltip
+          isTooltipActive={!inEditState}
+          tooltipText={entry.displayValue}
+        >
+          <HeaderPadding
+            styleBuilder={styleBuilder}
+            styling={styling}
+          />
+          {entry.displayValue}
+        </Tooltip>
      </td>
    );
  }
@@ -38,7 +46,12 @@ RowHeader.propTypes = {
  }).isRequired,
  qlik: PropTypes.shape({
    backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
    }).isRequired
  }).isRequired,
  rowStyle: PropTypes.shape({}).isRequired,
--- a/src/dataset.js
+++ b/src/dataset.js
@@ -0,0 +1,91 @@
+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
+  };
+}
--- a/src/definition/color-library.js
+++ b/src/definition/color-library.js
@@ -1,68 +0,0 @@
-const 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'
-    }
-  }
-};
-
-export default colorLibrary;
--- a/src/definition/header.js
+++ b/src/definition/header.js
@@ -24,102 +24,26 @@ const header = {
      defaultValue: 2
    },
    headercolors: {
+      component: 'color-picker',
+      defaultValue: {
+        index: 6,
+        color: '#4477aa'
+      },
+      label: 'Background Header Color',
      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'
+      type: 'object',
+      dualOutput: true
    },
    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'
+      component: 'color-picker',
+      defaultValue: {
+        index: 1,
+        color: '#ffffff'
+      },
+      type: 'object',
+      dualOutput: true
    },
    HeaderFontSize: {
      ref: 'lettersizeheader',
@@ -136,7 +60,7 @@ const header = {
          label: 'Medium'
        }
      ],
-      defaultValue: 2
+      defaultValue: 1
    }
  }
 };
--- a/src/definition/index.js
+++ b/src/definition/index.js
@@ -1,33 +1,30 @@
 import pagination from './pagination';
 import header from './header';
-import formatted from './formatted';
+import tableFormat from './table-format';
 import conceptSemaphores from './concept-semaphores';
 import metricSemaphores from './metric-semaphores';
-import colorLibrary from './color-library';
-import pijamaColorLibrary from './pijama-color-library';

 const definition = {
  component: 'accordion',
  items: {
-    dimensions: {
-      max: 2,
-      min: 1,
-      uses: 'dimensions'
-    },
-    measures: {
-      max: 9,
-      min: 1,
-      uses: 'measures'
+    data: {
+      items: {
+        dimensions: {
+          disabledRef: ''
+        },
+        measures: {
+          disabledRef: ''
+        }
+      },
+      uses: 'data'
    },
    settings: {
      items: {
-        ColorLibrary: colorLibrary,
        ConceptSemaphores: conceptSemaphores,
-        Formatted: formatted,
+        Formatted: tableFormat,
        Header: header,
        MetricSemaphores: metricSemaphores,
-        Pagination: pagination,
-        PijamaColorLibrary: pijamaColorLibrary
+        Pagination: pagination
      },
      uses: 'settings'
    },
--- a/src/definition/metric-semaphores.js
+++ b/src/definition/metric-semaphores.js
@@ -23,9 +23,9 @@ const metricSemaphores = {
      ref: 'metricssemaphore',
      translation: 'Metrics affected (1,2,4,...)',
      type: 'string',
-      defaultValue: '0',
+      defaultValue: '-',
      show (data) {
-        return data.allmetrics == false;
+        return !data.allmetrics;
      }
    },
    MetricStatus1: {
@@ -40,7 +40,7 @@ const metricSemaphores = {
      type: 'object',
      component: 'color-picker',
      defaultValue: {
-        index: 7,
+        index: 8,
        color: '#f93f17'
      }
    },
@@ -50,7 +50,7 @@ const metricSemaphores = {
      type: 'object',
      component: 'color-picker',
      defaultValue: {
-        index: 10,
+        index: 11,
        color: '#ffffff'
      }
    },
@@ -66,7 +66,7 @@ const metricSemaphores = {
      type: 'object',
      component: 'color-picker',
      defaultValue: {
-        index: 8,
+        index: 9,
        color: '#ffcf02'
      }
    },
@@ -76,7 +76,7 @@ const metricSemaphores = {
      type: 'object',
      component: 'color-picker',
      defaultValue: {
-        index: 11,
+        index: 12,
        color: '#000000'
      }
    },
@@ -86,7 +86,7 @@ const metricSemaphores = {
      type: 'object',
      component: 'color-picker',
      defaultValue: {
-        index: 9,
+        index: 10,
        color: '#276e27'
      }
    },
@@ -96,7 +96,7 @@ const metricSemaphores = {
      type: 'object',
      component: 'color-picker',
      defaultValue: {
-        index: 10,
+        index: 11,
        color: '#ffffff'
      }
    }
--- a/src/definition/pijama-color-library.js
+++ b/src/definition/pijama-color-library.js
@@ -1,68 +0,0 @@
-const 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'
-    }
-  }
-};
-
-export default pijamaColorLibrary;
--- a/src/definition/table-format.js
+++ b/src/definition/table-format.js
@@ -1,4 +1,9 @@
-const formatted = {
+// 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',
  items: {
@@ -6,7 +11,8 @@ const formatted = {
      ref: 'indentbool',
      type: 'boolean',
      label: 'Indent',
-      defaultValue: true
+      defaultValue: false,
+      show: data => !hasDesignDimension(data)
    },
    SeparatorColumns: {
      ref: 'separatorcols',
@@ -14,72 +20,29 @@ const formatted = {
      label: 'Separator Columns',
      defaultValue: false
    },
-    CustomFileBool: {
-      ref: 'customfilebool',
-      type: 'boolean',
-      label: 'Include External File',
-      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)
    },
-    CustomFile: {
-      ref: 'customfile',
-      label: 'Name of CSV file (; separated)',
-      type: 'string',
-      defaultValue: '',
-      show (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 (data) {
-        return data.customfilebool == false;
-      }
+    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',
@@ -129,9 +92,7 @@ const formatted = {
        }
      ],
      defaultValue: 'Black',
-      show (data) {
-        return data.customfilebool == false;
-      }
+      show: data => !hasDesignDimension(data)
    },
    FontFamily: {
      ref: 'FontFamily',
@@ -140,31 +101,35 @@ const formatted = {
      label: 'FontFamily',
      options: [
        {
-          value: 'Arial',
+          value: 'QlikView Sans, -apple-system, sans-serif',
+          label: 'QlikView Sans'
+        },
+        {
+          value: 'Arial, -apple-system, sans-serif',
          label: 'Arial'
        },
        {
-          value: 'Calibri',
+          value: 'Calibri, -apple-system, sans-serif',
          label: 'Calibri'
        },
        {
-          value: 'Comic Sans MS',
+          value: 'Comic Sans MS, -apple-system, sans-serif',
          label: 'Comic Sans MS'
        },
        {
-          value: 'MS Sans Serif',
+          value: 'MS Sans Serif, -apple-system, sans-serif',
          label: 'MS Sans Serif'
        },
        {
-          value: 'Tahoma',
+          value: 'Tahoma, -apple-system, sans-serif',
          label: 'Tahoma'
        },
        {
-          value: 'Verdana',
+          value: 'Verdana, -apple-system, sans-serif',
          label: 'Verdana'
        }
      ],
-      defaultValue: 'Calibri'
+      defaultValue: 'QlikView Sans, -apple-system, sans-serif'
    },
    DataFontSize: {
      ref: 'lettersize',
@@ -181,7 +146,27 @@ const formatted = {
          label: 'Medium'
        }
      ],
-      defaultValue: 2
+      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',
@@ -236,4 +221,4 @@ const formatted = {
  }
 };

-export default formatted;
+export default tableFormat;
--- a/src/excel-export.js
+++ b/src/excel-export.js
@@ -1,73 +1,86 @@
-import $ from 'jquery';
-
-const isIE = /* @cc_on!@*/false || Boolean(document.documentMode);
-const isChrome = Boolean(window.chrome) && Boolean(window.chrome.webstore);
-const isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
-const isFirefox = typeof InstallTrigger !== 'undefined';
-
-export function enableExcelExport (layout, f) {
-  let myTitle = '';
-  let mySubTitle = '';
-  let myFootNote = '';
-  if (layout.title.length > 0) {
-    myTitle += '<p style="font-size:15pt"><b>';
-    myTitle += layout.title;
-    myTitle += '</b></p>';
-  }
-  if (layout.subtitle.length > 0) {
-    mySubTitle += '<p style="font-size:11pt">';
-    mySubTitle += layout.subtitle;
-    mySubTitle += '</p>';
-  }
-  if (layout.footnote.length > 0) {
-    myFootNote += '<p style="font-size:11pt"><i>Note:</i>';
-    myFootNote += layout.footnote;
-    myFootNote += '</p>';
-  }
-
-  $('.icon-xls').on('click', () => {
-    $('.header-wrapper th').children('.tooltip')
-      .remove(); // remove some popup effects when exporting
-    $('.header-wrapper th').children('.icon-xls')
-      .remove(); // remove the xls icon when exporting
-    if (isChrome || isSafari) {
-      const $clonedDiv = $('.data-table').clone(true); // .kpi-table a secas exporta la 1ªcol
-      let vEncodeHead = '<html><head><meta charset="UTF-8"></head>';
-      vEncodeHead += myTitle + mySubTitle + myFootNote;
-      const vEncode = encodeURIComponent($clonedDiv.html());
-      let vDecode = `${vEncodeHead + vEncode}</html>`;
-
-      $clonedDiv.find('tr.header');
-      vDecode = vDecode.split('%3E.%3C').join('%3E%3C');
-      window.open(`data:application/vnd.ms-excel,${vDecode}`);
-      $.preventDefault();
-    }
-    if (isIE) {
-      let a = '<html><head><meta charset="UTF-8"></head>';
-      a += myTitle + mySubTitle + myFootNote;
-      a += f;
-      a = a.split('>.<').join('><');
-      a += '</html>';
-
-      const w = window.open();
-      w.document.open();
-      w.document.write(a);
-      w.document.close();
-      w.document.execCommand('SaveAs', true, 'Analysis.xls' || 'c:\TMP');
-      w.close();
-    }
-
-    if (isFirefox) {
-      const $clonedDiv = $('.data-table').clone(true);// .kpi-table a secas exporta la 1ªcol
-      let vEncodeHead = '<html><head><meta charset="UTF-8"></head>';
-      vEncodeHead += myTitle + mySubTitle + myFootNote;
-      const vEncode = encodeURIComponent($clonedDiv.html());
-      let vDecode = `${vEncodeHead + vEncode}</html>`;
-
-      $clonedDiv.find('tr.header');
-      vDecode = vDecode.split('>.<').join('><');
-      window.open(`data:application/vnd.ms-excel,${vDecode}`);
-      $.preventDefault();
+function removeAllTooltips (node) {
+  const tooltips = node.querySelectorAll('.tooltip');
+  [].forEach.call(tooltips, tooltip => {
+    if (tooltip.parentNode) {
+      tooltip.parentNode.removeChild(tooltip);
    }
  });
 }
+
+function buildTableHTML (title, subtitle, footnote) {
+  const titleHTML = `<p style="font-size:15pt"><b>${title}</b></p>`;
+  const subtitleHTML = `<p style="font-size:11pt">${subtitle}</p>`;
+  const footnoteHTML = `<p style="font-size:11pt"><i>Note:</i>${footnote}</p>`;
+  const dataTableClone = document.querySelector('.data-table').cloneNode(true);
+
+  removeAllTooltips(dataTableClone);
+
+  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 : ''}
+        ${footnoteHTML.length > 0 ? footnoteHTML : ''}
+        ${dataTableClone.outerHTML}
+      </body>
+    </html>
+    `.split('>.<')
+    .join('><')
+    .split('>*<')
+    .join('><');
+
+  return tableHTML;
+}
+
+function downloadXLS (html) {
+  const filename = 'analysis.xls';
+  // IE/Edge
+  if (window.navigator.msSaveOrOpenBlob) {
+    const blobObject = new Blob([html]);
+    return window.navigator.msSaveOrOpenBlob(blobObject, filename);
+  }
+
+  const dataURI = generateDataURI(html);
+  const link = window.document.createElement('a');
+  link.href = dataURI;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  return true;
+}
+
+function generateDataURI (html) {
+  const dataType = 'data:application/vnd.ms-excel;base64,';
+  const data = window.btoa(unescape(encodeURIComponent(html)));
+
+  return `${dataType}${data}`;
+}
+
+export function exportXLS (title, subtitle, footnote) {
+  // original was removing icon when starting export, disable and some spinner instead, shouldn't take enough time to warrant either..?
+  const table = buildTableHTML(title, subtitle, footnote);
+  downloadXLS(table);
+}
--- a/src/export-button.jsx
+++ b/src/export-button.jsx
@@ -1,13 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { exportXLS } from './excel-export';

-// TODO: move interaction logic in here from excel-export.js
 class ExportButton extends React.PureComponent {
+  constructor (props) {
+    super(props);
+    this.handleExport = this.handleExport.bind(this);
+  }
+
+  handleExport () {
+    const { excelExport, general } = this.props;
+    const { title, subtitle, footnote } = general;
+    if (excelExport) {
+      exportXLS(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"
      />
@@ -20,7 +34,8 @@ ExportButton.defaultProps = {
 };

 ExportButton.propTypes = {
-  excelExport: PropTypes.bool
+  excelExport: PropTypes.bool,
+  general: PropTypes.shape({}).isRequired
 };

 export default ExportButton;
--- a/src/haiku.spec.js
+++ b/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();
-    });
-  });
-});
--- a/src/headers-table/column-header.jsx
+++ b/src/headers-table/column-header.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Tooltip from '../tooltip/index.jsx';

 class ColumnHeader extends React.PureComponent {
  constructor (props) {
    super(props);
-
    this.handleSelect = this.handleSelect.bind(this);
  }

@@ -14,10 +14,12 @@ class ColumnHeader extends React.PureComponent {
  }

  render () {
-    const { baseCSS, cellSuffix, colSpan, entry, styling } = this.props;
+    const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
+    const inEditState = qlik.inEditState();
+
    const style = {
      ...baseCSS,
-      fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`,
+      fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
      height: '45px',
      verticalAlign: 'middle'
    };
@@ -29,7 +31,12 @@ class ColumnHeader extends React.PureComponent {
        onClick={this.handleSelect}
        style={style}
      >
-        {entry.displayValue}
+        <Tooltip
+          isTooltipActive={!inEditState}
+          tooltipText={entry.displayValue}
+        >
+          {entry.displayValue}
+        </Tooltip>
      </th>
    );
  }
@@ -50,7 +57,12 @@ ColumnHeader.propTypes = {
  }).isRequired,
  qlik: PropTypes.shape({
    backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
    }).isRequired
  }).isRequired,
  styling: PropTypes.shape({
--- a/src/headers-table/export-column-header.jsx
+++ b/src/headers-table/export-column-header.jsx
@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExportButton from '../export-button.jsx';
+import { HEADER_FONT_SIZE } from '../initialize-transformed';

-const ExportColumnHeader = ({ baseCSS, title, allowExcelExport, hasSecondDimension, styling }) => {
+const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
  const rowSpan = hasSecondDimension ? 2 : 1;
+  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
  const style = {
    ...baseCSS,
    cursor: 'default',
-    fontSize: `${16 + styling.headerOptions.fontSizeAdjustment} px`,
-    height: '80px',
+    fontSize: `${16 + styling.headerOptions.fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '100px' : '80px',
    verticalAlign: 'middle',
    width: '230px'
  };
@@ -19,7 +21,10 @@ const ExportColumnHeader = ({ baseCSS, title, allowExcelExport, hasSecondDimensi
      rowSpan={rowSpan}
      style={style}
    >
-      <ExportButton excelExport={allowExcelExport} />
+      <ExportButton
+        excelExport={allowExcelExport}
+        general={general}
+      />
      {title}
    </th>
  );
@@ -28,6 +33,7 @@ const ExportColumnHeader = ({ baseCSS, title, allowExcelExport, hasSecondDimensi
 ExportColumnHeader.propTypes = {
  allowExcelExport: PropTypes.bool.isRequired,
  baseCSS: PropTypes.shape({}).isRequired,
+  general: PropTypes.shape({}).isRequired,
  hasSecondDimension: PropTypes.bool.isRequired,
  styling: PropTypes.shape({
    headerOptions: PropTypes.shape({
--- a/src/headers-table/index.componentModel.js
+++ b/src/headers-table/index.componentModel.js
@@ -0,0 +1,5 @@
+function Model (component) {
+  this.component = component;
+}
+
+export default Model;
--- a/src/headers-table/index.jsx
+++ b/src/headers-table/index.jsx
@@ -29,6 +29,7 @@ const HeadersTable = ({ data, general, qlik, styling }) => {
            <ExportColumnHeader
              allowExcelExport={general.allowExcelExport}
              baseCSS={baseCSS}
+              general={general}
              hasSecondDimension={hasSecondDimension}
              styling={styling}
              title={dimension1[0].name}
@@ -125,7 +126,12 @@ HeadersTable.propTypes = {
  general: PropTypes.shape({}).isRequired,
  qlik: PropTypes.shape({
    backendApi: PropTypes.shape({
-      selectValues: PropTypes.func.isRequired
+      selectValues: function (props, propName) {
+        if (props.isSnapshot || typeof props[propName] === 'function') {
+          return null;
+        }
+        return new Error('Missing implementation of qlik.backendApi.selectValues.');
+      }
    }).isRequired
  }).isRequired,
  styling: PropTypes.shape({
--- a/src/headers-table/index.spec.js
+++ b/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();
+  });
+});
--- a/src/headers-table/measurement-column-header.jsx
+++ b/src/headers-table/measurement-column-header.jsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { HEADER_FONT_SIZE } from '../initialize-transformed';
+import Tooltip from '../tooltip/index.jsx';

 const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measurement, styling }) => {
  const title = `${measurement.name} ${measurement.magnitudeLabelSuffix}`;
  const { fontSizeAdjustment } = styling.headerOptions;
+  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
+
  if (hasSecondDimension) {
    const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
    let baseFontSize = 14;
@@ -15,8 +19,8 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
    const cellStyle = {
      ...baseCSS,
      cursor: 'default',
-      fontSize: `${baseFontSize + fontSizeAdjustment} px`,
-      height: '25px',
+      fontSize: `${baseFontSize + fontSizeAdjustment}px`,
+      height: isMediumFontSize ? '50px' : '25px',
      verticalAlign: 'middle'
    };
    return (
@@ -25,18 +29,23 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
        style={cellStyle}
      >
        <span className="wrapclass25">
-          {title}
+          <Tooltip
+            tooltipText={title}
+          >
+            {title}
+          </Tooltip>
        </span>
      </th>
    );
  }
+
  const isLong = (title.length > 11 && fontSizeAdjustment === 0) || (title.length > 12 && fontSizeAdjustment === -2);
  const suffixWrap = isLong ? '70' : 'empty';
  const style = {
    ...baseCSS,
    cursor: 'default',
-    fontSize: `${15 + fontSizeAdjustment} px`,
-    height: '70px',
+    fontSize: `${15 + fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '100px' : '80px',
    verticalAlign: 'middle'
  };
  return (
--- a/src/index.js
+++ b/src/index.js
@@ -10,21 +10,45 @@ export default {
  controller: [
    '$scope',
    '$timeout',
-    function () { }
+    function controller () {}
  ],
+  design: {
+    dimensions: {
+      max: 1,
+      min: 0
+    }
+  },
+  data: {
+    dimensions: {
+      max: 3,
+      min: 1,
+      uses: 'dimensions'
+    },
+    measures: {
+      max: 8,
+      min: 1,
+      uses: 'measures'
+    }
+  },
  definition,
  initialProperties: {
+    version: 1.0,
    qHyperCubeDef: {
      qDimensions: [],
      qInitialDataFetch: [
        {
-          qHeight: 1000,
+          qHeight: 1,
          qWidth: 10
        }
      ],
      qMeasures: []
    }
  },
+  support: {
+    export: true,
+    exportData: true,
+    snapshot: true
+  },
  paint ($element, layout) {
    try {
      paint($element, layout, this);
--- a/src/initialize-transformed.js
+++ b/src/initialize-transformed.js
@@ -1,31 +1,9 @@
-import jQuery from 'jquery';
 import { distinctArray } from './utilities';

-// TODO: rename colors
-function initializeColors ({ layout }) {
-  return {
-    vColLibBlue: layout.collibblue,
-    vColLibBlueP: layout.collibbluep,
-    vColLibClean: layout.collibclean,
-    vColLibCleanP: layout.collibcleanp,
-    vColLibCustom: layout.collibcustom,
-    vColLibCustomP: layout.collibcustomp,
-    vColLibDark: layout.collibdark,
-    vColLibDarkP: layout.collibdarkp,
-    vColLibGreen: layout.collibgreen,
-    vColLibGreenP: layout.collibgreenp,
-    vColLibNight: layout.collibnight,
-    vColLibNightP: layout.collibnightp,
-    vColLibOrange: layout.colliborange,
-    vColLibOrangeP: layout.colliborangep,
-    vColLibRed: layout.collibred,
-    vColLibRedP: layout.collibredp,
-    vColLibSoft: layout.collibsoft,
-    vColLibSoftP: layout.collibsoftp,
-    vColLibViolete: layout.collibviolete,
-    vColLibVioleteP: layout.collibvioletep
-  };
-}
+export const HEADER_FONT_SIZE = {
+  SMALL: -1,
+  MEDIUM: 1
+};

 function getAlignment (option) {
  const alignmentOptions = {
@@ -39,8 +17,8 @@ function getAlignment (option) {

 function getFontSizeAdjustment (option) {
  const fontSizeAdjustmentOptions = {
-    1: -2,
-    2: 0,
+    1: HEADER_FONT_SIZE.SMALL,
+    2: HEADER_FONT_SIZE.MEDIUM,
    3: 2
  };

@@ -129,15 +107,16 @@ function generateMatrixCell ({ cell, dimension1Information, dimension2Informatio
 }

 let lastRow = 0;
-function generateDataSet (component, dimensionsInformation, measurementsInformation) {
+function generateDataSet (component, dimensionsInformation, measurementsInformation, cubes) {
  const dimension1 = [];
  const dimension2 = [];
  const measurements = generateMeasurements(measurementsInformation);
  let matrix = [];

  let previousDim1Entry;
-  const hasSecondDimension = dimensionsInformation.length > 1;
-  component.backendApi.eachDataRow((rowIndex, row) => {
+  const hasDesignDimension = cubes.design;
+  const hasSecondDimension = hasDesignDimension ? dimensionsInformation.length > 2 : dimensionsInformation.length > 1;
+  cubes.data.forEach(row => {
    lastRow += 1;
    const dimension1Entry = generateDimensionEntry(dimensionsInformation[0], row[0]);
    dimension1.push(dimension1Entry);
@@ -193,8 +172,7 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
  };
 }

-async function initializeTransformed ({ $element, layout, component }) {
-  const colors = initializeColors({ layout });
+function initializeTransformed ({ $element, component, cubes, layout }) {
  const dimensionsInformation = component.backendApi.getDimensionInfos();
  const measurementsInformation = component.backendApi.getMeasureInfos();
  const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -205,37 +183,29 @@ async function initializeTransformed ({ $element, layout, component }) {
    dimension2,
    measurements,
    matrix
-  } = generateDataSet(component, dimensionsInformation, measurementsInformation);
+  } = generateDataSet(component, dimensionsInformation, measurementsInformation, cubes);

  const customSchemaBasic = [];
  const customSchemaFull = [];
  let customHeadersCount = 0;

-  function readCustomSchema () {
-    const url = `/Extensions/qlik-smart-pivot/${layout.customfile}`;
+  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(';');

-    return jQuery.get(url).then(response => {
-      const allTextLines = response.split(/\r\n|\n/);
-      const headers = allTextLines[0].split(';');
-      customHeadersCount = headers.length;
-      for (let lineNumber = 0; lineNumber < allTextLines.length; lineNumber += 1) {
-        customSchemaFull[lineNumber] = new Array(headers.length);
-        const data = allTextLines[lineNumber].split(';');
-
-        if (data.length === headers.length) {
-          for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
-            customSchemaBasic[lineNumber] = data[0];
-            customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
-          }
+      if (data.length === headers.length) {
+        for (let headerIndex = 0; headerIndex < headers.length; headerIndex += 1) {
+          [customSchemaBasic[lineNumber]] = data;
+          customSchemaFull[lineNumber][headerIndex] = data[headerIndex];
        }
      }
-    });
+    }
  }

-  const hasCustomSchema = (layout.customfilebool && layout.customfile.length > 4);
-  const schemaPromise = hasCustomSchema ? readCustomSchema() : Promise.resolve();
-  await schemaPromise;
-
  // top level properties could be reducers and then components connect to grab what they want,
  // possibly with reselect for some presentational transforms (moving some of the presentational logic like formatting and such)
  const transformedProperties = {
@@ -255,35 +225,39 @@ async function initializeTransformed ({ $element, layout, component }) {
      allowFilteringByClick: layout.filteroncellclick,
      cellSuffix: getCellSuffix(layout.columnwidthslider), // TOOD: move to matrix cells or is it headers.measurements?
      errorMessage: layout.errormessage,
-      maxLoops
+      footnote: layout.footnote,
+      maxLoops,
+      subtitle: layout.subtitle,
+      title: layout.title
    },
    selection: {
      dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
    },
    styling: {
-      colors,
      customCSV: {
        basic: customSchemaBasic,
        count: customHeadersCount,
        full: customSchemaFull
      },
-      hasCustomFileStyle: layout.customfilebool,
+      hasCustomFileStyle: Boolean(cubes.design),
      headerOptions: {
        alignment: getAlignment(layout.HeaderAlign),
-        colorSchema: colors[`vColLib${layout.HeaderColorSchema}`],
+        colorSchema: layout.HeaderColorSchema.color,
        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader),
-        textColor: layout.HeaderTextColorSchema
+        textColor: layout.HeaderTextColorSchema.color
      },
      options: {
-        backgroundColor: colors[`vColLib${layout.ColorSchema}`],
-        backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`],
+        backgroundColor: layout.rowEvenBGColor,
+        backgroundColorOdd: layout.rowOddBGColor,
        color: layout.BodyTextColorSchema,
        fontFamily: layout.FontFamily,
-        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize)
+        fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
+        textAlignment: layout.cellTextAlignment
      },
      semaphoreColors: {
        fieldsToApplyTo: {
          applyToAll: layout.allsemaphores,
+          applyToMetric: layout.allmetrics,
          specificFields: [
            layout.conceptsemaphore1,
            layout.conceptsemaphore2,
@@ -294,11 +268,12 @@ async function initializeTransformed ({ $element, layout, component }) {
            layout.conceptsemaphore7,
            layout.conceptsemaphore9,
            layout.conceptsemaphore10
-          ]
+          ],
+          metricsSpecificFields: layout.metricssemaphore.split(',').map(entry => Number(entry))
        },
        status: {
-          critical: layout.metricstatus1,
-          medium: layout.metricstatus2
+          critical: layout.metricsstatus1,
+          medium: layout.metricsstatus2
        },
        statusColors: {
          critical: {
@@ -335,7 +310,6 @@ async function initializeTransformed ({ $element, layout, component }) {
    });
  }

-
  return transformedProperties;
 }

--- a/src/linked-scroll/index.js
+++ b/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';
--- a/src/linked-scroll/linked-scroll-section.jsx
+++ b/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;
--- a/src/linked-scroll/linked-scroll-wrapper.jsx
+++ b/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;
--- a/src/main.less
+++ b/src/main.less
@@ -1,215 +1,313 @@
+/* eslint-disable */
 .qv-object-qlik-smart-pivot {
  @TableBorder: 1px solid #d3d3d3;
  @KpiTableWidth: 230px;

-  ._cell(@Width: 50px) {
-  	min-width: @Width!important;
-  	max-width: @Width!important;
-  	cursor: pointer;
-  	line-height: 1em!important;
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
  }

-	div.qv-object-content-container {
-		overflow-x: scroll;
-		overflow-y: hidden;
-		z-index: 110;
-	}
+  .edit-mode {
+    pointer-events: none;
+  }

-	.icon-xls {
-		text-align: left;
-	}
+  ._cell(@Width: 50px) {
+    min-width: @Width !important;
+    max-width: @Width !important;
+    cursor: pointer;
+    line-height: 1em !important;
+  }

-	button {
-		width: 100%;
-	}
+  div.qv-object-content-container {
+    z-index: 110;
+  }

-	table {
-		border-collapse: collapse;
-		border-spacing: 0;
-		width: auto;
-		border-left: @TableBorder;
-		border-right: @TableBorder;
-		border-top: @TableBorder;
-	}
+  .icon-xls {
+    text-align: left;
+  }

-	td, th {
-		border: 1px solid #ffffff;
-		padding: 5px;
-		border-collapse: collapse;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		vertical-align: middle;
-		cursor: default;
-	}
+  button {
+    width: 100%;
+  }

-	.empty {
-		width: 3%;
-		background: #ffffff;
-		min-width: 4px !important;
-		max-width: 4px !important;
-	}
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: auto;
+    border-left: @TableBorder;
+    border-right: @TableBorder;
+    border-top: @TableBorder;
+  }

-	th.main-kpi {
-		text-align: center;
-		vertical-align: middle;
-		border-bottom: @TableBorder;
-	}
+  td,
+  th {
+    border: 1px solid #fff;
+    border-collapse: collapse;
+    padding: 5px !important; // prevent overwriting from single object
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    cursor: default;

-	.numeric {
-		text-align: right;
-	}
-	/*This is for wrap text in headers*/
-	.wrapclass25 {
-		width: 100%;
-		height: 25px;
-		white-space: pre-line;
-		overflow: hidden;
-		display: block;
-	}
+    > div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: inherit;
+    }
+  }

-	.wrapclass45 {
-		width: 100%;
-		height: 45px;
-		white-space: pre-line;
-		overflow: hidden;
-		display: block;
-	}
+  .empty {
+    width: 3%;
+    background: #fff;
+    min-width: 4px !important;
+    max-width: 4px !important;
+  }

-	.wrapclass70 {
-		width: 100%;
-		height: 70px;
-		white-space: pre-line;
-		overflow: hidden;
-		display: inline-block;
-		vertical-align: middle;
-		line-height: 20px;
-	}
+  th.main-kpi {
+    text-align: center;
+    vertical-align: middle;
+    border-bottom: @TableBorder;
+  }

-	.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); }
+  .numeric {
+    text-align: right;
+  }

-	/*END OF GRID CELLS*/
-	/*First Column*/
-	.fdim-cells {
-		min-width: 230px !Important;
-		max-width: 230px !Important;
-		cursor: pointer;
-		background-color: white;
-	}
+  // This is for wrap text in headers 
+  .wrapclass25 {
+    width: 100%;
+    height: inherit;
+    white-space: pre-line;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }

-	.fdim-cells:hover {
-		/*cursor: default;*/
-		background-color: #808080 !important;
-		color: #ffffff;
-	}
+  .wrapclass45 {
+    width: 100%;
+    height: 45px;
+    white-space: pre-line;
+    overflow: hidden;
+    display: block;
+  }

-	tbody tr:hover {
-		cursor: default;
-		background-color: #808080 !important;
-		color: #ffffff;
-	}
+  .wrapclass70 {
+    width: 100%;
+    height: 70px;
+    white-space: pre-line;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 20px;
+  }

-	.grid-cells-header {
-		padding: 0px;
-	}
+  .wrapclassEmpty {
+    width: 100%;
+  }

-	.grid-cells-title {
-		min-width: 522px;
-	}
+  // ***************** 
+  // Medium column size 
+  // ***************** 

-	.grid-cells:before {
-		content: "\00a0";
-	}
+  .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;
+  }
+
+  .fdim-cells:hover {
+    background-color: #808080 !important;
+    color: #fff;
+  }
+
+  tbody tr:hover {
+    cursor: default;
+    background-color: #808080 !important;
+    color: #fff;
+  }
+
+  .grid-cells-header {
+    padding: 0;
+  }
+
+  .grid-cells-title {
+    min-width: 522px;
+  }

  .grid {
-  	height: 50px;
-  	width: 350px;
+    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;
+    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: calc(~"100% - 97px");
-  	overflow-x: hidden;
-  	overflow-y: scroll;
-  	padding: 0;
-  	margin-top: 0;
-  }
-
-  .kpi-table .fdim-cells, .data-table td {
-  	line-height: 1em!important;
+  .kpi-table .fdim-cells,
+  .data-table td {
+    line-height: 1em !important;
  }

  .data-table .fdim-cells {
-  	display: none;
+    display: none;
  }

  .kpi-table {
-  	width: @KpiTableWidth !important;
-  	overflow: hidden !important;
-  	display: table;
-  	height: 100%;
-  	margin: 0;
-  	padding: 0;
-  	z-index: 100;
-  	position: absolute;
-  	top: 0;
-  	left: 0;
-  	border-right: 1px solid white;
-  	box-shadow: 4px 2px 8px #e1e1e1;
+    width: @KpiTableWidth !important;
+    overflow: hidden !important;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-right: 1px solid #fff;
+    box-shadow: 4px 2px 8px #e1e1e1;
+
+    .row-wrapper {
+      height: calc(~"100% - 97px");
+      overflow: scroll;
+      position: absolute;
+      padding: 0;
+      margin-top: 0;
+    }
  }

-  .kpi-table .row-wrapper {
-  	overflow: hidden;
+  .row-wrapper .fdim-cells {
+    padding-left: 12px;
  }

  .data-table {
-  	width: 272px !important;
-  	float: left;
-  	display: table;
-  	height: 100%;
-  	z-index: 90;
-  	position: absolute;
-  	margin-left: @KpiTableWidth + 13px;
-  	-ms-overflow-style: none;
+    height: 100%;
+    width: calc(100% - 243px);
+    position: absolute;
+    margin-left: @KpiTableWidth + 13px;
+
+    .header-wrapper {
+      overflow: scroll;
+      width: 100%;
+    }
+
+    .row-wrapper {
+      height: calc(~"100% - 97px");
+      width: 100%;
+      overflow: scroll;
+      padding: 0;
+      margin-top: 0;
+    }
+  }
+
+  // hide scrollbars
+  .kpi-table .header-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 */
--- a/src/masking.js
+++ b/src/masking.js
@@ -13,7 +13,7 @@ export function ApplyPreMask (mask, value) { // aqui
        case '+#,##0':
          return (addSeparators(value, ',', '.', 0));
        default:
-          return (ApplyMask(mask.substring(0, mask.indexOf(';')), value));
+          return (applyMask(mask.substring(0, mask.indexOf(';')), value));
      }
    } else {
      const vMyValue = value * -1;
@@ -30,46 +30,47 @@ export function ApplyPreMask (mask, value) { // aqui
        case '-#,##0':
          return (`(${addSeparators(vMyValue, ',', '.', 0)})`);
        default:
-          return (`(${ApplyMask(vMyMask, vMyValue)})`);
+          return (`(${applyMask(vMyMask, vMyValue)})`);
      }
    }
  } else {
-    return (ApplyMask(mask, value));
+    return (applyMask(mask, value));
  }
 }

-function ApplyMask (mask, value) {
-  if (!mask || isNaN(Number(value))) {
-    return value; // return as it is.
+function applyMask (originalMask, originalValue) {
+  if (!originalMask || isNaN(Number(originalValue))) {
+    return originalValue;
  }

-  let isNegative, result, decimal, group, posLeadZero, posTrailZero, posSeparator,
-    part, szSep, integer,
-
-    // find prefix/suffix
-    len = mask.length,
-    start = mask.search(/[0-9\-\+#]/),
-    prefix = start > 0 ? mask.substring(0, start) : '',
-    // reverse string: not an ideal method if there are surrogate pairs
-    str = mask.split('').reverse()
-      .join(''),
-    end = str.search(/[0-9\-\+#]/),
-    offset = len - end,
-    substr = mask.substring(offset, offset + 1),
-    indx = offset + ((substr === '.' || (substr === ',')) ? 1 : 0),
-    suffix = end > 0 ? mask.substring(indx, len) : '';
+  let isNegative;
+  let result;
+  let integer;
+  // find prefix/suffix
+  let len = originalMask.length;
+  const start = originalMask.search(/[0-9\-\+#]/);
+  const prefix = start > 0 ? originalMask.substring(0, start) : '';
+  // reverse string: not an ideal method if there are surrogate pairs
+  let str = originalMask.split('')
+    .reverse()
+    .join('');
+  const end = str.search(/[0-9\-\+#]/);
+  let offset = len - end;
+  const substr = originalMask.substring(offset, offset + 1);
+  let index = offset + ((substr === '.' || (substr === ',')) ? 1 : 0);
+  const suffix = end > 0 ? originalMask.substring(index, len) : '';

  // mask with prefix & suffix removed
-  mask = mask.substring(start, indx);
+  let mask = originalMask.substring(start, index);

  // convert any string to number according to formation sign.
-  value = mask.charAt(0) === '-' ? -value : Number(value);
+  let value = mask.charAt(0) === '-' ? -originalValue : Number(originalValue);
  isNegative = value < 0 ? value = -value : 0; // process only abs(), and turn on flag.

  // search for separator for grp & decimal, anything not digit, not +/- sign, not #.
  result = mask.match(/[^\d\-\+#]/g);
-  decimal = (result && result[result.length - 1]) || '.'; // treat the right most symbol as decimal
-  group = (result && result[1] && result[0]) || ','; // treat the left most symbol as group separator
+  const decimal = (result && result[result.length - 1]) || '.'; // treat the right most symbol as decimal
+  const group = (result && result[1] && result[0]) || ','; // treat the left most symbol as group separator

  // split the decimal for the format string if any.
  mask = mask.split(decimal);
@@ -78,16 +79,16 @@ function ApplyMask (mask, value) {
  value = String(Number(value)); // convert number to string to trim off *all* trailing decimal zero(es)

  // fill back any trailing zero according to format
-  posTrailZero = mask[1] && mask[1].lastIndexOf('0'); // look for last zero in format
-  part = value.split('.');
+  const posTrailZero = mask[1] && mask[1].lastIndexOf('0'); // look for last zero in format
+  const part = value.split('.');
  // integer will get !part[1]
  if (!part[1] || (part[1] && part[1].length <= posTrailZero)) {
    value = (Number(value)).toFixed(posTrailZero + 1);
  }
-  szSep = mask[0].split(group); // look for separator
+  const szSep = mask[0].split(group); // look for separator
  mask[0] = szSep.join(''); // join back without separator for counting the pos of any leading 0.

-  posLeadZero = mask[0] && mask[0].indexOf('0');
+  const posLeadZero = mask[0] && mask[0].indexOf('0');
  if (posLeadZero > -1) {
    while (part[0].length < (mask[0].length - posLeadZero)) {
      part[0] = `0${part[0]}`;
@@ -101,17 +102,17 @@ function ApplyMask (mask, value) {

  // process the first group separator from decimal (.) only, the rest ignore.
  // get the length of the last slice of split result.
-  posSeparator = (szSep[1] && szSep[szSep.length - 1].length);
+  const posSeparator = (szSep[1] && szSep[szSep.length - 1].length);
  if (posSeparator) {
    integer = value[0];
    str = '';
    offset = integer.length % posSeparator;
    len = integer.length;
-    for (indx = 0; indx < len; indx++) {
-      str += integer.charAt(indx); // ie6 only support charAt for sz.
+    for (index = 0; index < len; index++) {
+      str += integer.charAt(index); // ie6 only support charAt for sz.
      // -posSeparator so that won't trail separator on full length
      // jshint -W018
-      if (!((indx - offset + 1) % posSeparator) && indx < len - posSeparator) {
+      if (!((index - offset + 1) % posSeparator) && index < len - posSeparator) {
        str += group;
      }
    }
--- a/src/paint.jsx
+++ b/src/paint.jsx
@@ -1,89 +1,28 @@
-import $ from 'jquery';
 import initializeStore from './store';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import HeadersTable from './headers-table/index.jsx';
-import DataTable from './data-table/index.jsx';
+import Root from './root.jsx';
+import { initializeCubes } from './dataset';

 export default async function paint ($element, layout, component) {
-  const state = await initializeStore({
-    $element,
+  const cubes = await initializeCubes({
    component,
    layout
  });
-
+  const state = await initializeStore({
+    $element,
+    component,
+    cubes,
+    layout
+  });
+  const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';
  const jsx = (
-    <React.Fragment>
-      <div className="kpi-table">
-        <HeadersTable
-          data={state.data}
-          general={state.general}
-          qlik={component}
-          styling={state.styling}
-        />
-        <DataTable
-          data={state.data}
-          general={state.general}
-          qlik={component}
-          renderData={false}
-          styling={state.styling}
-        />
-      </div>
-      <div className="data-table">
-        <HeadersTable
-          data={state.data}
-          general={state.general}
-          qlik={component}
-          styling={state.styling}
-        />
-        <DataTable
-          data={state.data}
-          general={state.general}
-          qlik={component}
-          styling={state.styling}
-        />
-      </div>
-    </React.Fragment>
+    <Root
+      qlik={component}
+      state={state}
+      editmodeClass={editmodeClass}
+    />
  );

  ReactDOM.render(jsx, $element[0]);
-
-
-  // TODO: skipped the following as they weren't blockers for letting react handle rendering,
-  // they are however the only reason we still depend on jQuery and should be removed as part of unnecessary dependencies issue
-  $(`[tid="${layout.qInfo.qId}"] .data-table .row-wrapper`).on('scroll', function () {
-    $(`[tid="${layout.qInfo.qId}"] .kpi-table .row-wrapper`).scrollTop($(this).scrollTop());
-  });
-
-  // freeze first column
-  $(`[tid="${layout.qInfo.qId}"] .qv-object-content-container`).on('scroll', (t) => {
-    $(`[tid="${layout.qInfo.qId}"] .kpi-table`).css('left', `${Math.round(t.target.scrollLeft)}px`);
-  });
-
-  // TODO: fixing tooltips has a seperate issue, make sure to remove this as part of that issue
-  $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () {
-    $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500)
-      .show(0);
-    $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`)
-      .remove();
-
-    const element = $(this);
-    const offset = element.offset();
-    const toolTip = $('<div class="tooltip"></div>');
-
-    toolTip.css({
-      left: offset.left,
-      top: offset.top
-    });
-
-    toolTip.text(element.text());
-    $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip);
-  }, () => {
-    $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0)
-      .hide(0);
-  });
-
-  // TODO: excel export is broken in most browsers, fixing it has an issue of it's own (leaving it disabled for now)
-  // import { enableExcelExport } from './excel-export';
-  // enableExcelExport(layout, html);
 }
--- a/src/root.componentModel.js
+++ b/src/root.componentModel.js
@@ -0,0 +1,5 @@
+function Model (component) {
+  this.component = component;
+}
+
+export default Model;
--- a/src/root.jsx
+++ b/src/root.jsx
@@ -0,0 +1,60 @@
+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 }) => (
+  <LinkedScrollWrapper>
+    <div className={`kpi-table ${editmodeClass}`}>
+      <HeadersTable
+        data={state.data}
+        general={state.general}
+        qlik={qlik}
+        styling={state.styling}
+      />
+      <LinkedScrollSection linkVertical>
+        <DataTable
+          data={state.data}
+          general={state.general}
+          qlik={qlik}
+          renderData={false}
+          styling={state.styling}
+        />
+      </LinkedScrollSection>
+    </div>
+    <div className={`data-table ${editmodeClass}`}>
+      <LinkedScrollSection linkHorizontal>
+        <HeadersTable
+          data={state.data}
+          general={state.general}
+          qlik={qlik}
+          styling={state.styling}
+        />
+      </LinkedScrollSection>
+      <LinkedScrollSection
+        linkHorizontal
+        linkVertical
+      >
+        <DataTable
+          data={state.data}
+          general={state.general}
+          qlik={qlik}
+          styling={state.styling}
+        />
+      </LinkedScrollSection>
+    </div>
+  </LinkedScrollWrapper>
+);
+
+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;
--- a/src/root.spec.js
+++ b/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();
+  });
+});
--- a/src/store.js
+++ b/src/store.js
@@ -1,9 +1,10 @@
 import initializeTransformed from './initialize-transformed';

-async function initialize ({ $element, layout, component }) {
+async function initialize ({ $element, layout, component, cubes }) {
  const transformedProperties = await initializeTransformed({
    $element,
    component,
+    cubes,
    layout
  });

--- a/src/style-builder.js
+++ b/src/style-builder.js
@@ -1,6 +1,5 @@
 function StyleBuilder (styling) {
  const {
-    colors,
    customCSV,
    options
  } = styling;
@@ -12,9 +11,13 @@ function StyleBuilder (styling) {
  let hasCustomFileStyle = false;

  function applyStandardAttributes (rowNumber) {
-    const isEven = rowNumber % 2 === 0;
-    style.backgroundColor = isEven ? options.backgroundColor : options.backgroundColorOdd;
-    style.color = options.color;
+    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`;
  }

@@ -30,16 +33,7 @@ function StyleBuilder (styling) {
    '<bold>': () => { style.fontWeight = 'bold'; },
    '<italic>': () => { style.fontStyle = 'italic'; },
    '<oblique>': () => { style.fontStyle = 'oblique'; },
-    // background and comment color
-    '<dark>': () => applyColor(colors.vColLibDark),
-    '<night>': () => applyColor(colors.vColLibNight),
-    '<soft>': () => applyColor(colors.vColLibSoft),
-    '<red>': () => applyColor(colors.vColLibRed),
-    '<orange>': () => applyColor(colors.vColLibOrange),
-    '<violete>': () => applyColor(colors.vColLibViolete),
-    '<blue>': () => applyColor(colors.vColLibBlue),
-    '<green>': () => applyColor(colors.vColLibGreen),
-    // font color TODO: this is a color just like the others, but it applies to text instead.. any way to make it less weird?
+    // font color
    '<white>': () => { style.color = 'white'; },
    // font size
    '<large>': () => { style.fontSize = `${15 + options.fontSizeAdjustment}px`; },
--- a/src/tooltip/index.jsx
+++ b/src/tooltip/index.jsx
@@ -0,0 +1,62 @@
+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, tooltipText } = this.props;
+    const { showTooltip } = this.state;
+
+    return (
+      <div
+        onMouseMove={handleCalculateTooltipPosition}
+        onMouseOut={this.handleRenderTooltip}
+        onMouseOver={this.handleRenderTooltip}
+      >
+        {children}
+
+        {showTooltip
+          ? (
+            <div
+              className="tooltip-wrapper"
+            >
+              <p>
+                {tooltipText}
+              </p>
+            </div>
+          ) : null}
+      </div>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired,
+  tooltipText: PropTypes.string.isRequired
+};
+
+export default Tooltip;
--- a/src/utilities.js
+++ b/src/utilities.js
@@ -9,17 +9,19 @@ export function distinctArray (array) {
    .map(entry => JSON.parse(entry));
 }

-export function addSeparators (nStr, thousandsSep, decimalSep, numDecimals) {
-  let x1;
-  nStr = nStr.toFixed(numDecimals);
-  const x = nStr.split('.');
-  x1 = x[0];
-  const x2 = x.length > 1 ? decimalSep + x[1] : '';
-  const rgx = /(\d+)(\d{3})/;
-  while (rgx.test(x1)) {
-    x1 = x1.replace(rgx, `$1${thousandsSep}$2`);
+export function addSeparators (number, thousandSeparator, decimalSeparator, numberOfDecimals) {
+  const numberString = number.toFixed(numberOfDecimals);
+  const numberStringParts = numberString.split('.');
+  let [
+    wholeNumber,
+    decimal
+  ] = numberStringParts;
+  decimal = numberStringParts.length > 1 ? decimalSeparator + decimal : '';
+  const regexCheckForThousand = /(\d+)(\d{3})/;
+  while (regexCheckForThousand.test(wholeNumber)) {
+    wholeNumber = wholeNumber.replace(regexCheckForThousand, `$1${thousandSeparator}$2`);
  }
-  return x1 + x2;
+  return wholeNumber + decimal;
 }

 export function Deferred () {
--- a/stylelint.config.js
+++ b/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': 3,
+    '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
  }
 };
--- a/webpack.config.js
+++ b/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,29 +17,35 @@ const config = {
      commonjs2: 'jquery',
      root: '_'
    },
+    qlik: {
+      amd: 'qlik',
+      commonjs: 'qlik',
+      commonjs2: 'qlik',
+      root: '_'
+    }
  },
-  // TODO: breaks core-js for some reason
-  // resolve: {
-  //   extensions: ['js', 'jsx']
-  // },
+  mode: MODE,
  module: {
    rules: [
      {
        enforce: 'pre',
-        test: /\.(js|jsx)$/,
        exclude: /(node_modules|Library)/,
        loader: 'eslint-loader',
        options: {
          failOnError: true
-        }
+        },
+        test: /\.(js|jsx)$/
      },
      {
-        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
+        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
-            plugins: ['@babel/plugin-transform-async-to-generator'],
+            plugins: [
+              '@babel/plugin-transform-async-to-generator',
+              '@babel/plugin-proposal-class-properties'
+            ],
            presets: [
              '@babel/preset-env',
              '@babel/preset-react'
@@ -54,23 +55,23 @@ const config = {
      },
      {
        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'
+    })
  ]
 };
Author	SHA1	Message	Date
Albert Backenhof	141be3f962	Aligned build to Dashboard bundle extensions build -Part of the work to streamline how the extensions are handled, irregardless of what bundle. Issue: DEB-130, DEB-133	2019-03-27 09:53:09 +01:00
Albert Backenhof	433a725f33	Merge pull request #33 from qlik-oss/snapshotFix New preview image and fixed snapshot	2019-03-20 10:28:52 +01:00
Albert Backenhof	769d5cfa3f	New preview image and fixed snapshot -SnapshotApi doesn't have a getProperties so fetching the source properties from qlik-app instead. -The snapshot still cannot be rendered in the "printing-snapshot" test page because of limitations on that page.	2019-03-19 10:38:29 +01:00
Albert Backenhof	9d925b6205	Merge pull request #29 from qlik-oss/feature/QPE-427 [QPE-427] Replace csv styling with dimension styling	2019-03-18 06:57:13 +01:00
Kristoffer Lind	35d489c2e2	add updated demo app	2019-02-28 15:58:14 +01:00
Kristoffer Lind	9ef9981305	remove demo app	2019-02-28 15:56:44 +01:00
Kristoffer Lind	398192e057	fix indent and hide when design dimension is applied	2019-02-28 15:36:56 +01:00
Kristoffer Lind	4421217cb0	set default for metric semaphores to apply to nothing	2019-02-28 15:36:56 +01:00
Kristoffer Lind	c92be00ca7	update app with corrected colors for sheet 4	2019-02-28 15:36:56 +01:00
Kristoffer Lind	c66dfdc06c	only show row colors when it does not have design dimension	2019-02-28 15:36:55 +01:00
Kristoffer Lind	a882b1d6aa	update demo app so its no longer saved with faulty colors	2019-02-28 15:36:55 +01:00
Kristoffer Lind	554b029569	remove unused options include external csv file and path	2019-02-28 15:36:55 +01:00
Kristoffer Lind	4a15628325	remove csv files	2019-02-28 15:36:55 +01:00
Kristoffer Lind	fdb2aaaef4	use originHyperCubeDefinition as basis for dynamically created hyperCubes	2019-02-28 15:36:55 +01:00
Kristoffer Lind	a400e9c233	use createDimension for design cube aswell	2019-02-28 15:36:55 +01:00
Kristoffer Lind	091c564a75	apply styling from dimension	2019-02-28 15:36:54 +01:00
Kristoffer Lind	99eba8afcb	split qHyperCube into two cubes, one for data and one for design	2019-02-28 15:36:54 +01:00
giovanni hanselius	cb78a2f2f9	Merge pull request #31 from qlik-oss/QPE-637-header-format-fixes [QPE 637] Header format fixes	2019-02-28 12:48:09 +01:00
Balazs Gobel	f255efbf5d	Handle medium header font size better and prevent cutting text off	2019-02-28 12:40:29 +01:00
giovanni hanselius	2f2d08fedd	Merge pull request #30 from qlik-oss/QPE-636-table-format-fixes [QPE 636] Table format fixes	2019-02-28 11:02:46 +01:00
Balazs Gobel	ac8b70bc84	Use correct fallback for all fonts	2019-02-28 10:49:24 +01:00
giovanni hanselius	0f2a4f9805	Merge pull request #27 from qlik-oss/QPE-631-IE-errors [QPE 631] Prevent console errors in IE on cell hover	2019-02-28 09:33:55 +01:00
Balazs Gobel	85228412cc	show correct color in the color picker	2019-02-27 21:43:09 +01:00
Balazs Gobel	03dfc0ce93	prevent infinite loop in angular color picker - dualOutput must be the last line	2019-02-27 21:39:59 +01:00
Balazs Gobel	48427df559	enable changing font size in headers	2019-02-27 21:39:31 +01:00
Balazs Gobel	7fda7aa2d9	better defaults when missing font family	2019-02-27 20:54:50 +01:00
Balazs Gobel	4ba12b8b2d	show user-selected font-family for the cells	2019-02-27 20:51:18 +01:00
Balazs Gobel	07af7b509e	Make table format work again - working color picker - working font size - working cell text alignment - this is all by preventing the infinite loop in angular	2019-02-27 20:45:06 +01:00
Balazs Gobel	b7ff83e1da	prevent console errors in IE on cell hover	2019-02-27 20:37:02 +01:00
giovanni hanselius	621359d6f9	Merge pull request #28 from qlik-oss/QPE-634-column-width-fix [QPE 634] Fix column width	2019-02-27 15:06:04 +01:00
Balazs Gobel	a71f80f8fa	minor cleanup	2019-02-27 14:26:27 +01:00
Balazs Gobel	a6cbfcda70	Fix column width issue - Look at the value format to determine if column is percentage based	2019-02-27 14:25:50 +01:00
giovanni hanselius	de2e9c16ac	Merge pull request #25 from qlik-oss/QPE-549-tooltip-design [QPE 549] Minor adjustments for tooltip	2019-02-27 12:30:42 +01:00
giovanni hanselius	ad0c0dacba	Merge pull request #24 from qlik-oss/QPE-622-visible-scrollbar [QPE 622] show scrollbar for easier scrolling	2019-02-27 11:14:01 +01:00
giovanni hanselius	97564cf8b1	Merge pull request #26 from qlik-oss/QPE-600-same-padding-in-single-object-mode [QPE 600] Use same layout in single onject mode as in normal mode	2019-02-27 11:03:33 +01:00
Balazs Gobel	7fa44c06b0	Use same layout in single onject mode as in normal mode - same padding for single object mode	2019-02-26 16:02:40 +01:00
Balazs Gobel	dae192b7af	Minor adjustments for tooltip - Added tooltip for row header - Better vertical alignment - Move static styling to css	2019-02-26 15:44:17 +01:00
Balazs Gobel	5abfd5b7e5	show scrollbar for easier scrolling	2019-02-26 15:10:00 +01:00
giovanni hanselius	65f5d70654	Merge pull request #23 from qlik-oss/feature/QPE-615 [QPE-615] fix metric semaphore colors	2019-02-26 14:34:17 +01:00
Kristoffer Lind	da7ba5c3a8	fix default indexes for metric colors	2019-02-26 14:23:42 +01:00
Kristoffer Lind	6e5df323d8	update sample state	2019-02-26 11:37:31 +01:00
Kristoffer Lind	aad92678db	fix metric semaphore colors	2019-02-26 11:31:24 +01:00
giovanni hanselius	15226d8598	Merge pull request #17 from qlik-oss/QPE-426 [QPE-426] color pickers	2019-02-25 15:25:29 +01:00
Balazs Gobel	a5fc586859	Merge branch 'master' into QPE-426	2019-02-25 15:14:13 +01:00
giovanni hanselius	980c0387bf	Merge pull request #14 from qlik-oss/feature/QPE-549 [QPE-549] tooltip	2019-02-25 14:45:13 +01:00
Balazs Gobel	710d4a8842	Fix tests	2019-02-25 13:41:11 +01:00
Balazs Gobel	ebb5a7cf16	Additional merge conflict fixes	2019-02-25 12:59:02 +01:00
Balazs Gobel	7107f485be	resolve additional merge conflict: removed obsolete code	2019-02-25 12:55:48 +01:00
Balazs Gobel	633fd39b80	Merge branch 'master' into feature/QPE-549 # Conflicts: # src/main.less # src/paint.jsx	2019-02-25 12:50:47 +01:00
Christopher Lebond	9eeaecb994	Merge pull request #22 from qlik-oss/fix-merge-issues remove some duplicated css from merge conflicts	2019-02-22 16:11:48 +01:00
Kristoffer Lind	7305175049	fix semaphore alignment	2019-02-22 16:08:51 +01:00
Kristoffer Lind	f99281ff47	hide scrollbars in firefox	2019-02-22 16:04:24 +01:00
Kristoffer Lind	557cd1aeb6	remove some duplicated css	2019-02-22 16:04:24 +01:00
Christopher Lebond	ca5f442fe0	Merge pull request #8 from qlik-oss/feature/QPE-585 [QPE 585] Minor design fixes	2019-02-22 15:37:56 +01:00
ahmed-Bazzara	585243bb73	merge confloicts solved	2019-02-22 14:49:36 +01:00
Kristoffer Lind	a25b2c40c0	removed a few more pieces of the colors library	2019-02-22 14:30:18 +01:00
ahmed-Bazzara	46d6520273	update app added colors set to have a fallback value	2019-02-22 14:29:23 +01:00
ahmed-Bazzara	19286f6c56	color libraries deleted and Qlik's color-pickers introduced	2019-02-22 14:29:23 +01:00
Ahmed Bazzara	8b760646ab	Merge pull request #12 from qlik-oss/feature/QPE-564 [QPE-564] test setup for components and some initial tests	2019-02-22 14:21:04 +01:00
ahmed-Bazzara	b5f25e5e18	babel/plugin-proposal-class-properties added to karma.conf	2019-02-22 14:17:08 +01:00
Ahmed Bazzara	b335b4883e	Merge pull request #9 from qlik-oss/feature/QPE-586-stylelint [QPE 586] Added stricter stylelint	2019-02-22 13:51:53 +01:00
ahmed-Bazzara	94e4203a0b	merge conflicts solved	2019-02-22 13:51:09 +01:00
ahmed-Bazzara	221e2d365c	merge conflicts solved	2019-02-22 13:45:19 +01:00
Christopher Lebond	6797f7d561	Merge pull request #13 from qlik-oss/feature/QPE-569-change-eslint-rules [QPE-569] Fix most of the eslint warnings	2019-02-22 13:21:45 +01:00
Christopher Lebond	f843779b64	Merge pull request #21 from qlik-oss/feature/QPE-474 [QPE-474] replace jquery scroll linking	2019-02-22 13:13:57 +01:00
ahmed-Bazzara	951d534343	merge conflicts solved	2019-02-22 12:59:57 +01:00
ahmed-Bazzara	c5acb43a7a	merge conflicts solved	2019-02-22 12:59:38 +01:00
ahmed-Bazzara	979c036b49	settings file reverted	2019-02-22 12:44:44 +01:00
ahmed-Bazzara	63c877face	merge conflicts solved	2019-02-22 12:40:30 +01:00
ahmed-Bazzara	9809587c68	merge conflicts solved	2019-02-22 12:12:00 +01:00
ahmed-Bazzara	808f4df3e3	merge conflicts solved	2019-02-22 12:01:41 +01:00
ahmed-Bazzara	bbadc711dc	merge conflicts resolved	2019-02-22 11:56:38 +01:00
Christopher Lebond	47b4d1aa5b	Merge pull request #15 from qlik-oss/feature/QPE-484 [QPE-484] Edit mode interactions	2019-02-22 11:28:35 +01:00
ahmed-Bazzara	18e2b2024e	fixing alignment between cells and row-headers	2019-02-22 11:26:17 +01:00
Christopher Lebond	614d768eea	Merge pull request #10 from qlik-oss/QPE-477 [QPE-477] Definition object is Qlik standard	2019-02-22 10:41:36 +01:00
Kristoffer Lind	807a609a90	fix rebase issue	2019-02-22 10:24:41 +01:00
Kristoffer Lind	82257be3a8	fix review comments	2019-02-21 18:49:07 +01:00
Kristoffer Lind	734fe33537	update sample state	2019-02-21 18:48:42 +01:00
Kristoffer Lind	347e6b7408	test setup for components and some initial tests	2019-02-21 18:38:30 +01:00
ahmed-Bazzara	bdf231f88d	code enhancements	2019-02-21 18:17:45 +01:00
ahmed-Bazzara	88ad73bd41	tooltip position now follow the mouse	2019-02-21 18:17:45 +01:00
ahmed-Bazzara	530f0919f1	tooltip positioning tweaked	2019-02-21 18:17:45 +01:00
ahmed-Bazzara	79b89a3b25	all logic for tooltip has been moved to it's component data-cell & column-header components reseted to pure ones	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	4520d6a48a	handling tooltip logic within it	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	98678d4a13	jQuery commented code deleted	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	da57204c41	console log removed	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	906a11c6b4	tooltip component cleaned	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	c66ad78e48	tooltip added to column header comopnent changed to normal component to hold state in it	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	6994bf51a3	showTooltip boolean changed name skipping values that are header rows	2019-02-21 18:17:44 +01:00
ahmed-Bazzara	521d508604	commented jqeury from paint.js for tooltip	2019-02-21 18:17:43 +01:00
ahmed-Bazzara	3946f6c894	mind width set to tooltip text inside it is center aligned	2019-02-21 18:16:38 +01:00
ahmed-Bazzara	aeccbf5d17	tooltip disabled in edit state	2019-02-21 18:16:38 +01:00
ahmed-Bazzara	95e330a50d	tooltip added	2019-02-21 18:16:38 +01:00
Kristoffer Lind	555000be54	fix rebase issues	2019-02-21 17:49:05 +01:00
Kristoffer Lind	c367f24dd9	replace jquery scroll linking with components (fixing some bugs and getting rid of jquery)	2019-02-21 17:38:51 +01:00
giovanni hanselius	0b3b7b3f57	Merge pull request #19 from qlik-oss/QPE-554 [QPE-554] text alignemt	2019-02-21 17:37:00 +01:00
giovanni hanselius	44b33b4c92	Merge pull request #16 from qlik-oss/feature/QPE-550 [QPE-550] fix excel export	2019-02-21 16:48:34 +01:00
giovanni hanselius	61b339b146	Merge pull request #18 from qlik-oss/QPE-479 [QPE-479] Qlik defaults	2019-02-21 15:42:31 +01:00
ahmed-Bazzara	27b84c5623	code enhancements	2019-02-21 12:29:16 +01:00
ahmed-Bazzara	24edf1c6f4	values of text alignement property set to have lowercase	2019-02-21 12:02:42 +01:00
giovanni hanselius	fc363d7739	Merge pull request #20 from qlik-oss/export exporting image and PDF enabled	2019-02-20 16:01:27 +01:00
ahmed-Bazzara	35d4dde118	exporting image and PDF enabled	2019-02-20 15:50:54 +01:00
ahmed-Bazzara	e70e76a401	small font size is set to be default and its value matched to Qlik defalut font size	2019-02-20 15:44:36 +01:00
ahmed-Bazzara	a804c31658	tooltip position now follow the mouse	2019-02-19 16:58:39 +01:00
ahmed-Bazzara	9efe580d18	tooltip positioning tweaked	2019-02-19 15:41:30 +01:00
ahmed-Bazzara	bcb9d30237	sending the alignment value straight from props instead of numbers	2019-02-19 14:55:50 +01:00
Kristoffer Lind	fa60dd5248	remove unused component	2019-02-19 10:25:14 +01:00
Balazs Gobel	fd653de0e1	Fix most of the eslint warnings	2019-02-19 10:23:24 +01:00
ahmed-Bazzara	ec140efc56	Text alignment property added	2019-02-18 16:42:39 +01:00
ahmed-Bazzara	34477d7ef1	qlik font added to the fonts dropdown and was made a default value	2019-02-18 16:12:40 +01:00
ahmed-Bazzara	48970cb4f4	all logic for tooltip has been moved to it's component data-cell & column-header components reseted to pure ones	2019-02-15 11:33:43 +01:00
ahmed-Bazzara	fe4b5a72ec	handling tooltip logic within it	2019-02-15 09:56:32 +01:00
ahmed-Bazzara	8b41022ddc	jQuery commented code deleted	2019-02-15 09:32:55 +01:00
ahmed-Bazzara	9c66c09899	console log removed	2019-02-15 09:26:16 +01:00
ahmed-Bazzara	09d9055643	tooltip component cleaned	2019-02-15 08:56:26 +01:00
ahmed-Bazzara	b1204e0929	tooltip added to column header comopnent changed to normal component to hold state in it	2019-02-15 08:56:02 +01:00
ahmed-Bazzara	d130ca266d	showTooltip boolean changed name skipping values that are header rows	2019-02-15 08:55:13 +01:00
ahmed-Bazzara	f730dc2827	commented jqeury from paint.js for tooltip	2019-02-15 08:54:11 +01:00
ahmed-Bazzara	b5f74395f7	mind width set to tooltip text inside it is center aligned	2019-02-15 08:53:35 +01:00
Kristoffer Lind	b86806d4cd	cleanup tooltips (resulted in whatever header was last hovered to be appended to each column header in xls)	2019-02-14 15:14:23 +01:00
ahmed-Bazzara	dfac9ad5e9	tooltip disabled in edit state	2019-02-14 14:04:15 +01:00
ahmed-Bazzara	db67b864ee	edit mode interaction prevented	2019-02-14 13:54:17 +01:00
ahmed-Bazzara	377d642fe2	tooltip added	2019-02-14 13:02:59 +01:00
Kristoffer Lind	c3651a37da	Merge branch 'master' into feature/QPE-550	2019-02-14 12:36:55 +01:00
Kristoffer Lind	8b843e028a	fix excel export	2019-02-14 11:08:34 +01:00
ahmed-Bazzara	c47b401a1d	typo in definiton object	2019-02-12 12:05:01 +01:00
ahmed-Bazzara	3c330465dd	Definition object is Qlik standard	2019-02-12 12:03:05 +01:00
Balazs Gobel	8984affe87	minor cleanup	2019-02-12 11:25:22 +01:00
Balazs Gobel	ce1e196b78	Follow the same principle as the old application - Restyle table cells only when metric semaphore is enabled	2019-02-12 11:25:22 +01:00
Balazs Gobel	e3b7a7640e	Fixed misalignment when it's only one dimension	2019-02-12 11:25:22 +01:00
Balazs Gobel	68dccf8575	Fix pixel misalignment between table header and body	2019-02-12 11:25:22 +01:00
Balazs Gobel	8e100f286b	Fix alternating colours	2019-02-12 11:25:22 +01:00
Balazs Gobel	f7ceb5c2bf	Added stricter stylint rules	2019-02-12 11:24:13 +01:00