Merge pull request #29 from qlik-oss/feature/QPE-427

[QPE-427] Replace csv styling with dimension styling

resources/Accounts.csv

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

resources/Accounts2.csv

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

resources/QlikLook.csv

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

src/data-table/data-cell.jsx

@@ -3,64 +3,7 @@ import PropTypes from 'prop-types';
 import { ApplyPreMask } from '../masking';
 import { addSeparators } from '../utilities';
 import Tooltip from '../tooltip/index.jsx';
-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) === '%';
-  let formattedMeasurementValue = '';
-  if (isColumnPercentageBased) {
-    if (isNaN(measurement.value)) {
-      formattedMeasurementValue = styling.symbolForNulls;
-    } else {
-      formattedMeasurementValue = ApplyPreMask('0,00%', measurement.value);
-    }
-  } else {
-    let magnitudeDivider;
-    switch (measurement.magnitude.toLowerCase()) {
-      case 'k':
-        magnitudeDivider = 1000;
-        break;
-      case 'm':
-        magnitudeDivider = 1000000;
-        break;
-      default:
-        magnitudeDivider = 1;
-    }
-    const formattingStringWithoutMagnitude = measurement.format.replace(/k|K|m|M/gi, '');
-    if (isNaN(measurement.value)) {
-      formattedMeasurementValue = styling.symbolForNulls;
-    } else {
-      let preFormatValue = measurement.value;
-      if (isColumnPercentageBased) {
-        preFormatValue *= 100;
-      }
-      switch (formattingStringWithoutMagnitude) {
-        case '#.##0':
-          formattedMeasurementValue = addSeparators((preFormatValue / magnitudeDivider), '.', ',', 0);
-          break;
-        case '#,##0':
-          formattedMeasurementValue = addSeparators((preFormatValue / magnitudeDivider), ',', '.', 0);
-          break;
-        default:
-          formattedMeasurementValue = ApplyPreMask(
-            formattingStringWithoutMagnitude,
-            (preFormatValue / magnitudeDivider)
-          );
-          break;
-      }
-    }
-  }
-  return formattedMeasurementValue;
-}
 
-function getSemaphoreColors (measurement, semaphoreColors) {
-  if (measurement.value < semaphoreColors.status.critical) {
-    return semaphoreColors.statusColors.critical;
-  }
-  if (measurement.value < semaphoreColors.status.medium) {
-    return semaphoreColors.statusColors.medium;
-  }
-  return semaphoreColors.statusColors.normal;
-}
 class DataCell extends React.PureComponent {
   constructor (props) {
     super(props);
@@ -90,7 +33,7 @@ class DataCell extends React.PureComponent {
       styling
     } = this.props;
 
-    const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
+    const isColumnPercentageBased = (/%/).test(measurement.format);
     let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     if (styleBuilder.hasComments()) {
       formattedMeasurementValue = '.';
@@ -177,3 +120,61 @@ DataCell.propTypes = {
 };
 
 export default DataCell;
+
+function formatMeasurementValue (measurement, styling) {
+  const isColumnPercentageBased = (/%/).test(measurement.format);
+  let formattedMeasurementValue = '';
+  if (isColumnPercentageBased) {
+    if (isNaN(measurement.value)) {
+      formattedMeasurementValue = styling.symbolForNulls;
+    } else {
+      formattedMeasurementValue = ApplyPreMask('0,00%', measurement.value);
+    }
+  } else {
+    let magnitudeDivider;
+    switch (measurement.magnitude.toLowerCase()) {
+      case 'k':
+        magnitudeDivider = 1000;
+        break;
+      case 'm':
+        magnitudeDivider = 1000000;
+        break;
+      default:
+        magnitudeDivider = 1;
+    }
+    const formattingStringWithoutMagnitude = measurement.format.replace(/k|K|m|M/gi, '');
+    if (isNaN(measurement.value)) {
+      formattedMeasurementValue = styling.symbolForNulls;
+    } else {
+      let preFormatValue = measurement.value;
+      if (isColumnPercentageBased) {
+        preFormatValue *= 100;
+      }
+      switch (formattingStringWithoutMagnitude) {
+        case '#.##0':
+          formattedMeasurementValue = addSeparators((preFormatValue / magnitudeDivider), '.', ',', 0);
+          break;
+        case '#,##0':
+          formattedMeasurementValue = addSeparators((preFormatValue / magnitudeDivider), ',', '.', 0);
+          break;
+        default:
+          formattedMeasurementValue = ApplyPreMask(
+            formattingStringWithoutMagnitude,
+            (preFormatValue / magnitudeDivider)
+          );
+          break;
+      }
+    }
+  }
+  return formattedMeasurementValue;
+}
+
+function getSemaphoreColors (measurement, semaphoreColors) {
+  if (measurement.value < semaphoreColors.status.critical) {
+    return semaphoreColors.statusColors.critical;
+  }
+  if (measurement.value < semaphoreColors.status.medium) {
+    return semaphoreColors.statusColors.medium;
+  }
+  return semaphoreColors.statusColors.normal;
+}

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>
     );
   }

src/dataset.js

@@ -0,0 +1,83 @@
+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 properties = await component.backendApi.getProperties();
+  const originCubeDefinition = properties.qHyperCubeDef;
+  const app = qlik.currApp(component);
+  const designDimensionIndex = findDesignDimension(layout.qHyperCube.qDataPages[0].qMatrix);
+  const dimensionsInformation = layout.qHyperCube.qDimensionInfo;
+  const dimensionIndexes = getDimensionIndexes(dimensionsInformation, designDimensionIndex);
+  const designCube = await buildDesignCube(originCubeDefinition, dimensionIndexes, app);
+  const dataCube = await buildDataCube(originCubeDefinition, dimensionIndexes, app);
+
+  return {
+    design: designCube,
+    data: dataCube
+  };
+}

src/definition/header.js

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

src/definition/index.js

@@ -1,6 +1,6 @@
 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';
 
@@ -21,7 +21,7 @@ const definition = {
     settings: {
       items: {
         ConceptSemaphores: conceptSemaphores,
-        Formatted: formatted,
+        Formatted: tableFormat,
         Header: header,
         MetricSemaphores: metricSemaphores,
         Pagination: pagination

src/definition/metric-semaphores.js

@@ -23,7 +23,7 @@ const metricSemaphores = {
       ref: 'metricssemaphore',
       translation: 'Metrics affected (1,2,4,...)',
       type: 'string',
-      defaultValue: '0',
+      defaultValue: '-',
       show (data) {
         return !data.allmetrics;
       }

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,31 +20,17 @@ const formatted = {
       label: 'Separator Columns',
       defaultValue: false
     },
-    CustomFileBool: {
-      ref: 'customfilebool',
-      type: 'boolean',
-      label: 'Include External File',
-      defaultValue: false
-    },
-    CustomFile: {
-      ref: 'customfile',
-      label: 'Name of CSV file (; separated)',
-      type: 'string',
-      defaultValue: '',
-      show (data) {
-        return data.customfilebool;
-      }
-    },
     rowEvenBGColor: {
       component: 'color-picker',
       defaultValue: {
         color: '#fff',
         index: 1
       },
-      dualOutput: true,
       label: 'Even row background color',
       ref: 'rowEvenBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true,
+      show: data => !hasDesignDimension(data)
     },
     rowOddBGColor: {
       component: 'color-picker',
@@ -46,10 +38,11 @@ const formatted = {
         color: '#b6d7ea',
         index: 4
       },
-      dualOutput: true,
       label: 'Odd row background color',
       ref: 'rowOddBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true,
+      show: data => !hasDesignDimension(data)
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',
@@ -99,9 +92,7 @@ const formatted = {
         }
       ],
       defaultValue: 'Black',
-      show (data) {
-        return !data.customfilebool;
-      }
+      show: data => !hasDesignDimension(data)
     },
     FontFamily: {
       ref: 'FontFamily',
@@ -110,35 +101,35 @@ const formatted = {
       label: 'FontFamily',
       options: [
         {
-          value: 'QlikView Sans',
+          value: 'QlikView Sans, -apple-system, sans-serif',
           label: 'QlikView Sans'
         },
         {
-          value: 'Arial',
+          value: 'Arial, -apple-system, sans-serif',
           label: 'Arial'
         },
         {
-          value: 'Calibri',
+          value: 'Calibri, -apple-system, sans-serif',
           label: 'Calibri'
         },
         {
-          value: 'Comic Sans MS',
+          value: 'Comic Sans MS, -apple-system, sans-serif',
           label: 'Comic Sans MS'
         },
         {
-          value: 'MS Sans Serif',
+          value: 'MS Sans Serif, -apple-system, sans-serif',
           label: 'MS Sans Serif'
         },
         {
-          value: 'Tahoma',
+          value: 'Tahoma, -apple-system, sans-serif',
           label: 'Tahoma'
         },
         {
-          value: 'Verdana',
+          value: 'Verdana, -apple-system, sans-serif',
           label: 'Verdana'
         }
       ],
-      defaultValue: 'QlikView Sans'
+      defaultValue: 'QlikView Sans, -apple-system, sans-serif'
     },
     DataFontSize: {
       ref: 'lettersize',
@@ -230,4 +221,4 @@ const formatted = {
   }
 };
 
-export default formatted;
+export default tableFormat;

src/headers-table/column-header.jsx

@@ -19,7 +19,7 @@ class ColumnHeader extends React.PureComponent {
 
     const style = {
       ...baseCSS,
-      fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`,
+      fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
       height: '45px',
       verticalAlign: 'middle'
     };

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

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExportButton from '../export-button.jsx';
+import { HEADER_FONT_SIZE } from '../initialize-transformed';
 
 const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSecondDimension, styling }) => {
   const rowSpan = hasSecondDimension ? 2 : 1;
+  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
   const style = {
     ...baseCSS,
     cursor: 'default',
-    fontSize: `${16 + styling.headerOptions.fontSizeAdjustment} px`,
-    height: '80px',
+    fontSize: `${16 + styling.headerOptions.fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '100px' : '80px',
     verticalAlign: 'middle',
     width: '230px'
   };

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: '80px',
+    fontSize: `${15 + fontSizeAdjustment}px`,
+    height: isMediumFontSize ? '100px' : '80px',
     verticalAlign: 'middle'
   };
   return (

src/index.js

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

src/initialize-transformed.js

@@ -1,6 +1,10 @@
-import jQuery from 'jquery';
 import { distinctArray } from './utilities';
 
+export const HEADER_FONT_SIZE = {
+  SMALL: -1,
+  MEDIUM: 1
+};
+
 function getAlignment (option) {
   const alignmentOptions = {
     1: 'left',
@@ -13,8 +17,8 @@ function getAlignment (option) {
 
 function getFontSizeAdjustment (option) {
   const fontSizeAdjustmentOptions = {
-    1: -1,
-    2: 1,
+    1: HEADER_FONT_SIZE.SMALL,
+    2: HEADER_FONT_SIZE.MEDIUM,
     3: 2
   };
 
@@ -103,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);
@@ -167,7 +172,7 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
   };
 }
 
-async function initializeTransformed ({ $element, layout, component }) {
+function initializeTransformed ({ $element, component, cubes, layout }) {
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -178,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 = {
@@ -242,7 +239,7 @@ async function initializeTransformed ({ $element, layout, component }) {
         count: customHeadersCount,
         full: customSchemaFull
       },
-      hasCustomFileStyle: layout.customfilebool,
+      hasCustomFileStyle: Boolean(cubes.design),
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
         colorSchema: layout.HeaderColorSchema.color,
@@ -313,7 +310,6 @@ async function initializeTransformed ({ $element, layout, component }) {
     });
   }
 
-
   return transformedProperties;
 }
 

src/main.less

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

src/paint.jsx

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

src/store.js

@@ -1,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
   });
 

src/tooltip/index.jsx

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

webpack.config.js

@@ -13,13 +13,15 @@ const config = {
       commonjs: 'jquery',
       commonjs2: 'jquery',
       root: '_'
+    },
+    qlik: {
+      amd: 'qlik',
+      commonjs: 'qlik',
+      commonjs2: 'qlik',
+      root: '_'
     }
   },
   mode: settings.mode,
-  // TODO: breaks core-js for some reason
-  // resolve: {
-  //   extensions: ['js', 'jsx']
-  // },
   module: {
     rules: [
       {
@@ -68,12 +70,7 @@ const config = {
       `assets/${settings.name}.qext`,
       `assets/${settings.name}.png`,
       'assets/wbfolder.wbl',
-      'resources/Excel.png',
-
-      // TODO: remove entries below this line
-      'resources/Accounts.csv',
-      'resources/Accounts2.csv',
-      'resources/QlikLook.csv'
+      'resources/Excel.png'
     ], {}),
     new StyleLintPlugin({
       files: '**/*.less'