Merge pull request #31 from qlik-oss/QPE-637-header-format-fixes

[QPE 637] Header format fixes

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;;;;;;;
@@ -25,7 +25,7 @@ Administration salaries;;;;;;;
 Rent expenses;;;;;;;
 Depreciation, computers;;;;;;;
 Other general & admin expenses;;;;;;;
-total general & admin expenses;<bold>;<soft>;;;;;
+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>
@@ -38,7 +38,7 @@ 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>;;;;;
+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>

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>

src/data-table/data-cell.jsx

@@ -3,9 +3,126 @@ 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: PropTypes.func.isRequired
+    }).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,124 +170,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 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 shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1);
-    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: PropTypes.func.isRequired
-    }).isRequired
-  }).isRequired,
-  styleBuilder: PropTypes.shape({
-    hasComments: PropTypes.func.isRequired
-  }).isRequired,
-  styling: PropTypes.shape({
-    symbolForNulls: PropTypes.any.isRequired
-  }).isRequired
-};
-
-export default DataCell;

src/data-table/header-padding.jsx

@@ -4,8 +4,7 @@ import PropTypes from 'prop-types';
 const HeaderPadding = ({ styleBuilder, styling }) => {
   if (styling.usePadding && !styleBuilder.hasCustomFileStyle()) {
     const paddingStyle = {
-      fontFamily: styling.options.fontFamily,
-      marginLeft: '15px'
+      fontFamily: styling.options.fontFamily
     };
     return (
       <span style={paddingStyle} />

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,7 +16,9 @@ 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"
@@ -26,7 +29,12 @@ class RowHeader extends React.PureComponent {
           styleBuilder={styleBuilder}
           styling={styling}
         />
-        {entry.displayValue}
+        <Tooltip
+          isTooltipActive={!inEditState}
+          tooltipText={entry.displayValue}
+        >
+          {entry.displayValue}
+        </Tooltip>
       </td>
     );
   }

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

@@ -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/table-format.js

@@ -1,4 +1,4 @@
-const formatted = {
+const tableFormat = {
   type: 'items',
   label: 'Table Format',
   items: {
@@ -33,23 +33,23 @@ const formatted = {
       component: 'color-picker',
       defaultValue: {
         color: '#fff',
-        index: 6
+        index: 1
       },
-      dualOutput: true,
       label: 'Even row background color',
       ref: 'rowEvenBGColor',
-      type: 'object'
+      type: 'object',
+      dualOutput: true
     },
     rowOddBGColor: {
       component: 'color-picker',
       defaultValue: {
-        color: '#fff',
-        index: 6
+        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: '70px',
+    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
   };
 
@@ -271,11 +276,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

@@ -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;
   }
@@ -76,13 +44,20 @@
   td,
   th {
     border: 1px solid #fff;
-    padding: 5px;
     border-collapse: collapse;
+    padding: 5px !important; // prevent overwriting from single object
     white-space: nowrap;
     overflow: hidden;
     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;
@@ -228,10 +197,6 @@
     min-width: 522px;
   }
 
-  .grid-cells::before {
-    content: "\00a0";
-  }
-
   .grid {
     height: 50px;
     width: 350px;
@@ -275,6 +240,10 @@
     }
   }
 
+  .row-wrapper .fdim-cells {
+    padding-left: 12px;
+  }
+
   .data-table {
     height: 100%;
     width: calc(100% - 243px);
@@ -297,10 +266,8 @@
 
   // hide scrollbars
   .kpi-table .header-wrapper,
-  .kpi-table .row-wrapper,
-  .data-table .header-wrapper,
-  .data-table .row-wrapper {
-    /* stylelint-disable-next-line property-no-unknown */
+  .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
@@ -309,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/style-builder.js

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

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) {