Made the table cell keys more unique

-This makes it possible to use the same measurement
 multiple times within the same smart-pivot chart.

Issue: DEB-232

src/data-table/index.jsx

@@ -73,7 +73,7 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
                   }
 
                   const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
-                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
+                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}-${measurement.index}`;
                   return (
                     <DataCell
                       data={data}

src/dataset.js

@@ -31,7 +31,13 @@ export async function initializeDataCube (component, layout) {
   }
 
   const app = qlik.currApp(component);
-  const hyperCubeDef = (await component.backendApi.getProperties()).qHyperCubeDef;
+  const properties = (await component.backendApi.getProperties());
+
+  // If this is a master object, fetch the hyperCubeDef of the original object
+  const hyperCubeDef = properties.qExtendsId
+    ? (await app.getObjectProperties(properties.qExtendsId)).properties.qHyperCubeDef
+    : properties.qHyperCubeDef;
+
   return buildDataCube(hyperCubeDef, layout.qHyperCube.qDimensionInfo.length === 2, app);
 }
 

src/definition/conditional-coloring.js

@@ -1,6 +1,6 @@
 const conditionalColoring = {
   type: 'items',
-  label: 'Color by condition',
+  label: 'Color by performance',
   items: {
     Enabled: {
       ref: 'conditionalcoloring.enabled',
@@ -22,7 +22,7 @@ const conditionalColoring = {
     ColorAllRows: {
       ref: 'conditionalcoloring.colorall',
       type: 'boolean',
-      label: 'Color all rows by condition',
+      label: 'Color all rows',
       component: 'switch',
       defaultValue: true,
       options: [
@@ -83,7 +83,7 @@ const conditionalColoring = {
     },
     Measures: {
       ref: 'conditionalcoloring.measures',
-      translation: 'Measure indices (ex: 0,3)',
+      translation: 'Measures by index (ex: 0,3)',
       type: 'string',
       defaultValue: '',
       show (data) {
@@ -93,7 +93,7 @@ const conditionalColoring = {
     },
     ThresholdPoor: {
       ref: 'conditionalcoloring.threshold_poor',
-      translation: 'Poor is less than',
+      translation: 'Poor range limit',
       type: 'number',
       defaultValue: -0.1,
       show (data) {
@@ -102,7 +102,7 @@ const conditionalColoring = {
     },
     ColorPoor: {
       ref: 'conditionalcoloring.color_poor',
-      label: 'Poor color fill',
+      label: 'Poor background color',
       type: 'object',
       component: 'color-picker',
       dualOutput: true,
@@ -130,7 +130,7 @@ const conditionalColoring = {
     },
     ThresholdFair: {
       ref: 'conditionalcoloring.threshold_fair',
-      translation: 'Fair is less than',
+      translation: 'Fair range limit',
       type: 'number',
       defaultValue: 0,
       show (data) {
@@ -139,7 +139,7 @@ const conditionalColoring = {
     },
     ColorFair: {
       ref: 'conditionalcoloring.color_fair',
-      label: 'Fair color fill',
+      label: 'Fair background color',
       type: 'object',
       component: 'color-picker',
       dualOutput: true,
@@ -167,7 +167,7 @@ const conditionalColoring = {
     },
     ColorGood: {
       ref: 'conditionalcoloring.color_good',
-      label: 'Good color fill',
+      label: 'Good background color',
       type: 'object',
       component: 'color-picker',
       dualOutput: true,

src/definition/header.js

@@ -1,10 +1,10 @@
 const header = {
   type: 'items',
-  label: 'Header Format',
+  label: 'Header format',
   items: {
     Align: {
       ref: 'HeaderAlign',
-      translation: 'Header Alignment',
+      translation: 'Header alignment',
       type: 'number',
       component: 'buttongroup',
       options: [
@@ -29,14 +29,14 @@ const header = {
         index: 6,
         color: '#4477aa'
       },
-      label: 'Background Header Color',
+      label: 'Background color',
       ref: 'HeaderColorSchema',
       type: 'object',
       dualOutput: true
     },
     HeaderTextColor: {
       ref: 'HeaderTextColorSchema',
-      label: 'Text Header Color',
+      label: 'Text color',
       component: 'color-picker',
       defaultValue: {
         index: 1,
@@ -47,7 +47,7 @@ const header = {
     },
     HeaderFontSize: {
       ref: 'lettersizeheader',
-      translation: 'Font Size',
+      translation: 'Font size',
       type: 'number',
       component: 'buttongroup',
       options: [

src/definition/pagination.js

@@ -6,7 +6,7 @@ const pagination = {
       ref: 'maxloops',
       type: 'number',
       component: 'dropdown',
-      label: 'Max Pagination Loops',
+      label: 'Max pagination loops',
       options: [
         {
           value: 1,

src/definition/table-format.js

@@ -29,14 +29,14 @@ function getFieldList () {
 
 const tableFormat = {
   type: 'items',
-  label: 'Table Format',
+  label: 'Table format',
   items: {
     StylingField: {
       ref: 'stylingfield',
       disabledRef: '',
       type: 'string',
       component: 'dropdown',
-      label: 'Style with field',
+      label: 'Style template field',
       options: function () {
         return getFieldList().then(function (items) {
           items.unshift(
@@ -58,7 +58,7 @@ const tableFormat = {
     SeparatorColumns: {
       ref: 'separatorcols',
       type: 'boolean',
-      label: 'Separator Columns',
+      label: 'Column separators',
       defaultValue: false
     },
     rowEvenBGColor: {
@@ -89,7 +89,7 @@ const tableFormat = {
       ref: 'BodyTextColorSchema',
       type: 'string',
       component: 'dropdown',
-      label: 'Text Body Color',
+      label: 'Text body color',
       options: [
         {
           value: 'Black',
@@ -139,7 +139,7 @@ const tableFormat = {
       ref: 'FontFamily',
       type: 'string',
       component: 'dropdown',
-      label: 'FontFamily',
+      label: 'Font family',
       options: [
         {
           value: 'QlikView Sans, -apple-system, sans-serif',
@@ -174,7 +174,7 @@ const tableFormat = {
     },
     DataFontSize: {
       ref: 'lettersize',
-      translation: 'Font Size',
+      translation: 'Font size',
       type: 'number',
       component: 'buttongroup',
       options: [
@@ -191,7 +191,7 @@ const tableFormat = {
     },
     textAlignment: {
       ref: 'cellTextAlignment',
-      label: 'Cell Text alignment',
+      label: 'Cell text alignment',
       component: 'buttongroup',
       options: [
         {
@@ -212,7 +212,7 @@ const tableFormat = {
     ColumnWidthSlider: {
       type: 'number',
       component: 'slider',
-      label: 'Column Width',
+      label: 'Column width',
       ref: 'columnwidthslider',
       min: 1,
       max: 3,
@@ -246,7 +246,7 @@ const tableFormat = {
       ref: 'filteroncellclick',
       type: 'boolean',
       component: 'switch',
-      label: 'Filter data when cell clicked',
+      label: 'Allow selection in cells',
       options: [
         {
           value: true,

src/headers-table/index.jsx

@@ -42,7 +42,7 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
                 baseCSS={baseCSS}
                 general={general}
                 hasSecondDimension={hasSecondDimension}
-                key={`${measurementEntry.displayValue}-${measurementEntry.name}`}
+                key={`${measurementEntry.displayValue}-${measurementEntry.name}-${measurementEntry.index}`}
                 measurement={measurementEntry}
                 styling={styling}
               />
@@ -104,7 +104,7 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
                     dimensionEntry={dimensionEntry}
                     general={general}
                     hasSecondDimension={hasSecondDimension}
-                    key={`${measurementEntry.displayValue}-${measurementEntry.name}-${dimensionEntry.name}`}
+                    key={`${measurementEntry.displayValue}-${measurementEntry.name}-${measurementEntry.index}-${dimensionEntry.name}`}
                     measurement={measurementEntry}
                     styling={styling}
                   />

src/main.less

@@ -37,6 +37,10 @@
     width: auto;
   }
 
+  tr {
+    height: 25px;
+  }
+  
   td,
   th {
     padding: 5px !important; // prevent overwriting from single object