Update metric-semaphores.js

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

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/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

@@ -39,6 +39,7 @@ const metricSemaphores = {
       label: 'Critic Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 8,
         color: '#f93f17'
@@ -49,6 +50,7 @@ const metricSemaphores = {
       label: 'Critic Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 11,
         color: '#ffffff'
@@ -65,6 +67,7 @@ const metricSemaphores = {
       label: 'Medium Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 9,
         color: '#ffcf02'
@@ -75,6 +78,7 @@ const metricSemaphores = {
       label: 'Medium Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 12,
         color: '#000000'
@@ -85,6 +89,7 @@ const metricSemaphores = {
       label: 'Success Color Fill',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 10,
         color: '#276e27'
@@ -95,6 +100,7 @@ const metricSemaphores = {
       label: 'Success Color Text',
       type: 'object',
       component: 'color-picker',
+      dualOutput: true,
       defaultValue: {
         index: 11,
         color: '#ffffff'

src/definition/table-format.js

@@ -1,4 +1,4 @@
-const formatted = {
+const tableFormat = {
   type: 'items',
   label: 'Table Format',
   items: {
@@ -35,10 +35,10 @@ const formatted = {
         color: '#fff',
         index: 1
       },
-      dualOutput: true,
       label: 'Even row background color',
       ref: 'rowEvenBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     rowOddBGColor: {
       component: 'color-picker',
@@ -46,10 +46,10 @@ const formatted = {
         color: '#b6d7ea',
         index: 4
       },
-      dualOutput: true,
       label: 'Odd row background color',
       ref: 'rowOddBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',
@@ -110,35 +110,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 +230,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/initialize-transformed.js

@@ -1,6 +1,11 @@
 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 +18,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
   };
 

src/main.less

@@ -24,38 +24,6 @@
     z-index: 110;
   }
 
-  .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%);
-
-    > 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;
   }
@@ -88,6 +56,7 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      font-family: inherit;
     }
   }
 
@@ -108,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 {
@@ -139,11 +109,9 @@
     width: 100%;
   }
 
-  /* ***************** */
-
-  /* Medium column size */
-
-  /* ***************** */
+  // ***************** 
+  // Medium column size 
+  // ***************** 
 
   .grid-cells {
     position: relative;
@@ -162,11 +130,9 @@
     ._cell(52px);
   }
 
-  /* ***************** */
-
-  /* Small column size */
-
-  /* ***************** */
+  // ***************** 
+  // Small column size 
+  // ***************** 
   .grid-cells-s {
     ._cell(67px);
   }
@@ -183,12 +149,9 @@
     ._cell(52px);
   }
 
-  /* ***************** */
-
-  /* large column size */
-
-  /* ***************** */
-
+  // ***************** 
+  // Large column size 
+  // ***************** 
   .grid-cells-l {
     ._cell(82px);
   }
@@ -205,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;
@@ -304,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
@@ -313,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/tooltip/index.jsx

@@ -2,11 +2,12 @@ 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 {
   constructor (props) {