Merge pull request #23 from qlik-oss/feature/QPE-615

[QPE-615] fix metric semaphore colors

resources/Accounts.csv

@@ -2,7 +2,7 @@
 Revenues;;rgb(183, 219, 255);<italic>;;<center>;;<comment>
 Gross sales revenues;;;;;;;
 Less return & allowances;;;;;;;
-Net sales revenues;<bold>;<soft>;;;;;
+Net sales revenues;<bold>;#efefef;;;;;
 Cost of goods sold;<bold>;;;;;;
 Direct materials;;;;;;;
 Direct labor;;;;;;;
@@ -10,35 +10,35 @@ 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>;
+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>;<violete>;;;;;
+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>;<soft>;;;;;
-total operating expenses;<bold>;<violete>;;;;;
-Operating income before taxes;<bold>;<dark>;;<white>;;<large>;
+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>;<dark>;;<white>;;<large>;
+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>;<soft>;;;;;
+Net gain on sale of land;<bold>;#efefef;;;;;
 Less income tax on gain;;;;;;;
-Extraordinary items after tax;<bold>;<soft>;;;;;
-Net Income (Profit);<bold>;<dark>;;<white>;<center>;<large>;
+Extraordinary items after tax;<bold>;#efefef;;;;;
+Net Income (Profit);<bold>;#C4C4C4;;<white>;<center>;<large>;

resources/Accounts2.csv

@@ -10,7 +10,7 @@ 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 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>
@@ -18,4 +18,4 @@ 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>;
+Net Income (Profit);<bold>;#191970;;<white>;<center>;<large>;

resources/QlikLook.csv

@@ -10,7 +10,7 @@ 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 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>
@@ -18,4 +18,4 @@ 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>;
+Net Income (Profit);<bold>;#191970;;<white>;<center>;<large>;

src/data-table/data-cell.jsx

@@ -53,10 +53,10 @@ 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;
@@ -111,7 +111,9 @@ class DataCell extends React.PureComponent {
 
     const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
     const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-    const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1);
+    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 = {
@@ -146,6 +148,7 @@ class DataCell extends React.PureComponent {
     );
   }
 }
+
 DataCell.propTypes = {
   data: PropTypes.shape({
     headers: PropTypes.shape({

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;

src/definition/formatted.js

@@ -29,57 +29,27 @@ const formatted = {
         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;
-      }
+    rowEvenBGColor: {
+      component: 'color-picker',
+      defaultValue: {
+        color: '#fff',
+        index: 1
+      },
+      dualOutput: true,
+      label: 'Even row background color',
+      ref: 'rowEvenBGColor',
+      type: 'object'
+    },
+    rowOddBGColor: {
+      component: 'color-picker',
+      defaultValue: {
+        color: '#b6d7ea',
+        index: 4
+      },
+      dualOutput: true,
+      label: 'Odd row background color',
+      ref: 'rowOddBGColor',
+      type: 'object'
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',

src/definition/header.js

@@ -24,102 +24,26 @@ const header = {
       defaultValue: 2
     },
     headercolors: {
+      component: 'color-picker',
+      defaultValue: {
+        index: 6,
+        color: "#4477aa"
+      },
+      dualOutput: true,
+      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'
     },
     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',
+      dualOutput: true,
+      defaultValue: {
+        index: 1,
+        color: "#ffffff"
+      },
+      type: 'object'
     },
     HeaderFontSize: {
       ref: 'lettersizeheader',

src/definition/index.js

@@ -3,8 +3,6 @@ import header from './header';
 import formatted from './formatted';
 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',
@@ -22,13 +20,11 @@ const definition = {
     },
     settings: {
       items: {
-        ColorLibrary: colorLibrary,
         ConceptSemaphores: conceptSemaphores,
         Formatted: formatted,
         Header: header,
         MetricSemaphores: metricSemaphores,
-        Pagination: pagination,
-        PijamaColorLibrary: pijamaColorLibrary
+        Pagination: pagination
       },
       uses: 'settings'
     },

src/definition/metric-semaphores.js

@@ -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'
       }
     }

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;

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

@@ -36,7 +36,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     ...baseCSS,
     cursor: 'default',
     fontSize: `${15 + fontSizeAdjustment} px`,
-    height: '70px',
+    height: '80px',
     verticalAlign: 'middle'
   };
   return (

src/initialize-transformed.js

@@ -1,32 +1,6 @@
 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
-  };
-}
-
 function getAlignment (option) {
   const alignmentOptions = {
     1: 'left',
@@ -194,7 +168,6 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
 }
 
 async function initializeTransformed ({ $element, layout, component }) {
-  const colors = initializeColors({ layout });
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -264,7 +237,6 @@ async function initializeTransformed ({ $element, layout, component }) {
       dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
     },
     styling: {
-      colors,
       customCSV: {
         basic: customSchemaBasic,
         count: customHeadersCount,
@@ -273,13 +245,13 @@ async function initializeTransformed ({ $element, layout, component }) {
       hasCustomFileStyle: layout.customfilebool,
       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.ColorSchema}P`],
+        backgroundColor: layout.rowEvenBGColor,
+        backgroundColorOdd: layout.rowOddBGColor,
         color: layout.BodyTextColorSchema,
         fontFamily: layout.FontFamily,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
@@ -299,11 +271,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: {

src/main.less

@@ -38,7 +38,7 @@
     opacity: 0.9;
     text-align: center;
     transform: translate(-50%, -110%);
-    
+
     > p {
       color: #fff;
     }
@@ -228,10 +228,6 @@
     min-width: 522px;
   }
 
-  .grid-cells::before {
-    content: "\00a0";
-  }
-
   .grid {
     height: 50px;
     width: 350px;

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`; },