Fixed cellspacing on IE, Edge and FF

Issue: DEB-183

src/data-table/data-cell.jsx

@@ -54,17 +54,21 @@ class DataCell extends React.PureComponent {
       formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     }
 
-    const { conditionalColoring } = styling;
-    if (conditionalColoring.enabled) {
-      const isValidConditionalColoringValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-      const isSpecifiedRow =
-        conditionalColoring.rows.indexOf(measurement.parents.dimension1.header) !== -1;
-      const shouldHaveConditionalColoring = conditionalColoring.colorAllRows || isSpecifiedRow;
-      if (isValidConditionalColoringValue && shouldHaveConditionalColoring) {
-        const { color, textColor } = getConditionalColor(measurement, conditionalColoring);
-        cellStyle.backgroundColor = color.color;
-        cellStyle.color = textColor.color;
-      }
+    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';
@@ -81,7 +85,6 @@ class DataCell extends React.PureComponent {
         style={cellStyle}
       >
         <Tooltip
-          styling={styling}
           tooltipText={formattedMeasurementValue}
         >
           {formattedMeasurementValue}
@@ -173,12 +176,12 @@ function formatMeasurementValue (measurement, styling) {
   return formattedMeasurementValue;
 }
 
-function getConditionalColor (measurement, conditionalColoring) {
-  if (measurement.value < conditionalColoring.threshold.poor) {
-    return conditionalColoring.colors.poor;
+function getSemaphoreColors (measurement, semaphoreColors) {
+  if (measurement.value < semaphoreColors.status.critical) {
+    return semaphoreColors.statusColors.critical;
   }
-  if (measurement.value < conditionalColoring.threshold.fair) {
-    return conditionalColoring.colors.fair;
+  if (measurement.value < semaphoreColors.status.medium) {
+    return semaphoreColors.statusColors.medium;
   }
-  return conditionalColoring.colors.good;
+  return semaphoreColors.statusColors.normal;
 }

src/data-table/index.jsx

@@ -40,15 +40,13 @@ const DataTable = ({ data, general, qlik, renderData, styling }) => {
 
             return (
               <tr key={dimensionEntry.displayValue}>
-                {!renderData ?
-                  <RowHeader
-                    entry={dimensionEntry}
-                    qlik={qlik}
-                    rowStyle={rowStyle}
-                    styleBuilder={styleBuilder}
-                    styling={styling}
-                  /> : null
-                }
+                <RowHeader
+                  entry={dimensionEntry}
+                  qlik={qlik}
+                  rowStyle={rowStyle}
+                  styleBuilder={styleBuilder}
+                  styling={styling}
+                />
                 {renderData && injectSeparators(
                   matrix[dimensionIndex],
                   styling.useSeparatorColumns,

src/data-table/row-header.jsx

@@ -27,7 +27,6 @@ class RowHeader extends React.PureComponent {
       >
         <Tooltip
           isTooltipActive={!inEditState}
-          styling={styling}
           tooltipText={entry.displayValue}
         >
           <HeaderPadding

src/definition/concept-semaphores.js

@@ -0,0 +1,96 @@
+const conceptSemaphores = {
+  items: {
+    AllConcepts: {
+      component: 'switch',
+      defaultValue: true,
+      label: 'All concepts affected',
+      options: [
+        {
+          label: 'On',
+          value: true
+        },
+        {
+          label: 'Off',
+          value: false
+        }
+      ],
+      ref: 'allsemaphores',
+      type: 'boolean'
+    },
+    ConceptsAffected1: {
+      defaultValue: '',
+      ref: 'conceptsemaphore1',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 1',
+      type: 'string'
+    },
+    ConceptsAffected2: {
+      defaultValue: '',
+      ref: 'conceptsemaphore2',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 2',
+      type: 'string'
+    },
+    ConceptsAffected3: {
+      defaultValue: '',
+      ref: 'conceptsemaphore3',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 3',
+      type: 'string'
+    },
+    ConceptsAffected4: {
+      defaultValue: '',
+      ref: 'conceptsemaphore4',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 4',
+      type: 'string'
+    },
+    ConceptsAffected5: {
+      defaultValue: '',
+      ref: 'conceptsemaphore5',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 5',
+      type: 'string'
+    },
+    ConceptsAffected6: {
+      defaultValue: '',
+      ref: 'conceptsemaphore6',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 6',
+      type: 'string'
+    },
+    ConceptsAffected7: {
+      defaultValue: '',
+      ref: 'conceptsemaphore7',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 7',
+      type: 'string'
+    },
+    ConceptsAffected8: {
+      defaultValue: '',
+      ref: 'conceptsemaphore8',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 8',
+      type: 'string'
+    },
+    ConceptsAffected9: {
+      defaultValue: '',
+      ref: 'conceptsemaphore9',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 9',
+      type: 'string'
+    },
+    // eslint-disable-next-line sort-keys
+    ConceptsAffected10: {
+      defaultValue: '',
+      ref: 'conceptsemaphore10',
+      show: data => !data.allsemaphores,
+      translation: 'Concept 10',
+      type: 'string'
+    }
+  },
+  label: 'Concept Semaphores',
+  type: 'items'
+};
+
+export default conceptSemaphores;

src/definition/conditional-coloring.js

@@ -1,169 +0,0 @@
-const conditionalColoring = {
-  type: 'items',
-  label: 'Color by condition',
-  items: {
-    Enabled: {
-      ref: 'conditionalcoloring.enabled',
-      type: 'boolean',
-      label: 'Enabled',
-      component: 'switch',
-      defaultValue: false,
-      options: [
-        {
-          value: true,
-          label: 'On'
-        },
-        {
-          value: false,
-          label: 'Off'
-        }
-      ]
-    },
-    ColorAllRows: {
-      ref: 'conditionalcoloring.colorall',
-      type: 'boolean',
-      label: 'Color all rows by condition',
-      component: 'switch',
-      defaultValue: true,
-      options: [
-        {
-          value: true,
-          label: 'All rows'
-        },
-        {
-          value: false,
-          label: 'Specified rows'
-        }
-      ],
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    Rows: {
-      type: 'array',
-      ref: 'conditionalcoloring.rows',
-      label: 'Rows to color',
-      itemTitleRef: function (data) {
-        return data.rowname;
-      },
-      allowAdd: true,
-      allowRemove: true,
-      addTranslation: 'Add row to color',
-      items: {
-        Row: {
-          ref: 'rowname',
-          label: 'Name of row',
-          type: 'string',
-          defaultValue: ''
-        }
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled && !data.conditionalcoloring.colorall;
-      }
-    },
-    ThresholdPoor: {
-      ref: 'conditionalcoloring.threshold_poor',
-      translation: 'Poor is less than',
-      type: 'number',
-      defaultValue: -0.1,
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    ColorPoor: {
-      ref: 'conditionalcoloring.color_poor',
-      label: 'Poor color fill',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 10,
-        color: '#f93f17'
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    TextColorPoor: {
-      ref: 'conditionalcoloring.textcolor_poor',
-      label: 'Poor text color',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 1,
-        color: '#ffffff'
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    ThresholdFair: {
-      ref: 'conditionalcoloring.threshold_fair',
-      translation: 'Fair is less than',
-      type: 'number',
-      defaultValue: 0,
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    ColorFair: {
-      ref: 'conditionalcoloring.color_fair',
-      label: 'Fair color fill',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 8,
-        color: '#ffcf02'
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    TextColorFair: {
-      ref: 'conditionalcoloring.textcolor_fair',
-      label: 'Fair text color',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 15,
-        color: '#000000'
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    ColorGood: {
-      ref: 'conditionalcoloring.color_good',
-      label: 'Good color fill',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 3,
-        color: '#276e27'
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    },
-    TextColorGood: {
-      ref: 'conditionalcoloring.textcolor_good',
-      label: 'Good text color',
-      type: 'object',
-      component: 'color-picker',
-      dualOutput: true,
-      defaultValue: {
-        index: 1,
-        color: '#ffffff'
-      },
-      show (data) {
-        return data.conditionalcoloring.enabled;
-      }
-    }
-  }
-};
-
-export default conditionalColoring;

src/definition/index.js

@@ -1,7 +1,8 @@
 import pagination from './pagination';
 import header from './header';
 import tableFormat from './table-format';
-import conditionalColoring from './conditional-coloring';
+import conceptSemaphores from './concept-semaphores';
+import metricSemaphores from './metric-semaphores';
 
 const definition = {
   component: 'accordion',
@@ -22,9 +23,10 @@ const definition = {
     },
     settings: {
       items: {
+        ConceptSemaphores: conceptSemaphores,
         Formatted: tableFormat,
         Header: header,
-        ConditionalColoring: conditionalColoring,
+        MetricSemaphores: metricSemaphores,
         Pagination: pagination
       },
       uses: 'settings'

src/definition/metric-semaphores.js

@@ -0,0 +1,112 @@
+const metricSemaphores = {
+  type: 'items',
+  label: 'Metric Semaphores',
+  items: {
+    AllMetrics: {
+      ref: 'allmetrics',
+      type: 'boolean',
+      component: 'switch',
+      label: 'All metrics affected',
+      options: [
+        {
+          value: true,
+          label: 'On'
+        },
+        {
+          value: false,
+          label: 'Off'
+        }
+      ],
+      defaultValue: false
+    },
+    MetricsAffected: {
+      ref: 'metricssemaphore',
+      translation: 'Metrics affected (1,2,4,...)',
+      type: 'string',
+      defaultValue: '-',
+      show (data) {
+        return !data.allmetrics;
+      }
+    },
+    MetricStatus1: {
+      ref: 'metricsstatus1',
+      translation: 'Critic is less than',
+      type: 'number',
+      defaultValue: -0.1
+    },
+    ColorStatus1: {
+      ref: 'colorstatus1',
+      label: 'Critic Color Fill',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 8,
+        color: '#f93f17'
+      }
+    },
+    ColorStatus1Text: {
+      ref: 'colorstatus1text',
+      label: 'Critic Color Text',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 11,
+        color: '#ffffff'
+      }
+    },
+    MetricStatus2: {
+      ref: 'metricsstatus2',
+      translation: 'Medium is less than',
+      type: 'number',
+      defaultValue: 0
+    },
+    ColorStatus2: {
+      ref: 'colorstatus2',
+      label: 'Medium Color Fill',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 9,
+        color: '#ffcf02'
+      }
+    },
+    ColorStatus2Text: {
+      ref: 'colorstatus2text',
+      label: 'Medium Color Text',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 12,
+        color: '#000000'
+      }
+    },
+    ColorStatus3: {
+      ref: 'colorstatus3',
+      label: 'Success Color Fill',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 10,
+        color: '#276e27'
+      }
+    },
+    ColorStatus3Text: {
+      ref: 'colorstatus3text',
+      label: 'Success Color Text',
+      type: 'object',
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 11,
+        color: '#ffffff'
+      }
+    }
+  }
+};
+
+export default metricSemaphores;

src/headers-table/column-header.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { HEADER_FONT_SIZE } from '../initialize-transformed';
 import Tooltip from '../tooltip/index.jsx';
 
 class ColumnHeader extends React.PureComponent {
@@ -17,12 +16,11 @@ class ColumnHeader extends React.PureComponent {
   render () {
     const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
     const inEditState = qlik.inEditState();
-    const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
     const style = {
       ...baseCSS,
       fontSize: `${14 + styling.headerOptions.fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '45px' : '35px',
+      height: '45px',
       verticalAlign: 'middle'
     };
 
@@ -35,7 +33,6 @@ class ColumnHeader extends React.PureComponent {
       >
         <Tooltip
           isTooltipActive={!inEditState}
-          styling={styling}
           tooltipText={entry.displayValue}
         >
           {entry.displayValue}

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

@@ -10,7 +10,7 @@ const ExportColumnHeader = ({ baseCSS, general, title, allowExcelExport, hasSeco
     ...baseCSS,
     cursor: 'default',
     fontSize: `${16 + styling.headerOptions.fontSizeAdjustment}px`,
-    height: isMediumFontSize ? '90px' : '70px',
+    height: isMediumFontSize ? '100px' : '80px',
     verticalAlign: 'middle',
     width: '230px'
   };

src/headers-table/index.jsx

@@ -5,7 +5,7 @@ import ColumnHeader from './column-header.jsx';
 import MeasurementColumnHeader from './measurement-column-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
+const HeadersTable = ({ data, general, qlik, styling }) => {
   const baseCSS = {
     backgroundColor: styling.headerOptions.colorSchema,
     color: styling.headerOptions.textColor,
@@ -26,17 +26,15 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
       <table className="header">
         <tbody>
           <tr>
-            {isKpi ?
-              <ExportColumnHeader
-                allowExcelExport={general.allowExcelExport}
-                baseCSS={baseCSS}
-                general={general}
-                hasSecondDimension={hasSecondDimension}
-                styling={styling}
-                title={dimension1[0].name}
-              /> : null
-            }
-            {!isKpi && !hasSecondDimension && measurements.map(measurementEntry => (
+            <ExportColumnHeader
+              allowExcelExport={general.allowExcelExport}
+              baseCSS={baseCSS}
+              general={general}
+              hasSecondDimension={hasSecondDimension}
+              styling={styling}
+              title={dimension1[0].name}
+            />
+            {!hasSecondDimension && measurements.map(measurementEntry => (
               <MeasurementColumnHeader
                 baseCSS={baseCSS}
                 general={general}
@@ -46,7 +44,7 @@ const HeadersTable = ({ data, general, qlik, styling, isKpi }) => {
                 styling={styling}
               />
             ))}
-            {!isKpi && hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
+            {hasSecondDimension && injectSeparators(dimension2, styling.useSeparatorColumns).map((entry, index) => {
               if (entry.isSeparator) {
                 const separatorStyle = {
                   color: 'white',
@@ -139,8 +137,7 @@ HeadersTable.propTypes = {
   styling: PropTypes.shape({
     headerOptions: PropTypes.shape({}),
     options: PropTypes.shape({})
-  }).isRequired,
-  isKpi: PropTypes.bool.isRequired
+  }).isRequired
 };
 
 export default HeadersTable;

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

@@ -6,7 +6,7 @@ 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 = fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
+  const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
   if (hasSecondDimension) {
     const isPercentageFormat = measurement.format.substring(measurement.format.length - 1) === '%';
@@ -20,7 +20,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
       ...baseCSS,
       cursor: 'default',
       fontSize: `${baseFontSize + fontSizeAdjustment}px`,
-      height: isMediumFontSize ? '45px' : '35px',
+      height: isMediumFontSize ? '50px' : '25px',
       verticalAlign: 'middle'
     };
     return (
@@ -28,21 +28,24 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
         className={`${cellClass}${general.cellSuffix}`}
         style={cellStyle}
       >
-        <Tooltip
-          tooltipText={title}
-          styling={styling}
-        >
-          {title}
-        </Tooltip>
+        <span className="wrapclass25">
+          <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: isMediumFontSize ? '90px' : '70px',
+    height: isMediumFontSize ? '100px' : '80px',
     verticalAlign: 'middle'
   };
   return (
@@ -50,12 +53,12 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
       className={`grid-cells2${general.cellSuffix}`}
       style={style}
     >
-      <Tooltip
-        tooltipText={title}
-        styling={styling}
+      <span
+        className={`wrapclass${suffixWrap}`}
+        style={{ fontFamily: styling.headerOptions.fontFamily }}
       >
         {title}
-      </Tooltip>
+      </span>
     </th>
   );
 };

src/initialize-transformed.js

@@ -18,7 +18,8 @@ function getAlignment (option) {
 function getFontSizeAdjustment (option) {
   const fontSizeAdjustmentOptions = {
     1: HEADER_FONT_SIZE.SMALL,
-    2: HEADER_FONT_SIZE.MEDIUM
+    2: HEADER_FONT_SIZE.MEDIUM,
+    3: 2
   };
 
   return fontSizeAdjustmentOptions[option] || 0;
@@ -281,26 +282,39 @@ function initializeTransformed ({ $element, component, dataCube, designList, lay
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
         textAlignment: layout.cellTextAlignment
       },
-      conditionalColoring: {
-        enabled: layout.conditionalcoloring.enabled,
-        colorAllRows: layout.conditionalcoloring.colorall,
-        rows: layout.conditionalcoloring.rows.map(row => row.rowname),
-        threshold: {
-          poor: layout.conditionalcoloring.threshold_poor,
-          fair: layout.conditionalcoloring.threshold_fair
+      semaphoreColors: {
+        fieldsToApplyTo: {
+          applyToAll: layout.allsemaphores,
+          applyToMetric: layout.allmetrics,
+          specificFields: [
+            layout.conceptsemaphore1,
+            layout.conceptsemaphore2,
+            layout.conceptsemaphore3,
+            layout.conceptsemaphore4,
+            layout.conceptsemaphore5,
+            layout.conceptsemaphore6,
+            layout.conceptsemaphore7,
+            layout.conceptsemaphore9,
+            layout.conceptsemaphore10
+          ],
+          metricsSpecificFields: layout.metricssemaphore.split(',').map(entry => Number(entry))
         },
-        colors: {
-          poor: {
-            color: layout.conditionalcoloring.color_poor,
-            textColor: layout.conditionalcoloring.textcolor_poor
+        status: {
+          critical: layout.metricsstatus1,
+          medium: layout.metricsstatus2
+        },
+        statusColors: {
+          critical: {
+            backgroundColor: layout.colorstatus1.color,
+            color: layout.colorstatus1text.color
           },
-          fair: {
-            color: layout.conditionalcoloring.color_fair,
-            textColor: layout.conditionalcoloring.textcolor_fair
+          medium: {
+            backgroundColor: layout.colorstatus2.color,
+            color: layout.colorstatus2text.color
           },
-          good: {
-            color: layout.conditionalcoloring.color_good,
-            textColor: layout.conditionalcoloring.textcolor_good
+          normal: {
+            backgroundColor: layout.colorstatus3.color,
+            color: layout.colorstatus3text.color
           }
         }
       },

src/main.less

@@ -1,6 +1,5 @@
 /* eslint-disable */
 .qv-object-qlik-smart-pivot {
-  @TableBorder: 1px solid #d3d3d3;
   @KpiTableWidth: 230px;
 
   *,
@@ -33,18 +32,13 @@
   }
 
   table {
-    border-collapse: collapse;
-    border-spacing: 0;
+    border-collapse: separate;
+    border-spacing: 1px;
     width: auto;
-    border-left: @TableBorder;
-    border-right: @TableBorder;
-    border-top: @TableBorder;
   }
 
   td,
   th {
-    border: 1px solid #fff;
-    border-collapse: collapse;
     padding: 5px !important; // prevent overwriting from single object
     white-space: nowrap;
     overflow: hidden;
@@ -70,13 +64,44 @@
   th.main-kpi {
     text-align: center;
     vertical-align: middle;
-    border-bottom: @TableBorder;
   }
 
   .numeric {
     text-align: right;
   }
 
+  // This is for wrap text in headers 
+  .wrapclass25 {
+    width: 100%;
+    height: inherit;
+    white-space: pre-line;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+  }
+
+  .wrapclass45 {
+    width: 100%;
+    height: 45px;
+    white-space: pre-line;
+    overflow: hidden;
+    display: block;
+  }
+
+  .wrapclass70 {
+    width: 100%;
+    height: 70px;
+    white-space: pre-line;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 20px;
+  }
+
+  .wrapclassEmpty {
+    width: 100%;
+  }
+
   // ***************** 
   // Medium column size 
   // ***************** 
@@ -183,6 +208,10 @@
     line-height: 1em !important;
   }
 
+  .data-table .fdim-cells {
+    display: none;
+  }
+
   .kpi-table {
     width: @KpiTableWidth !important;
     overflow: hidden !important;
@@ -196,7 +225,7 @@
     box-shadow: 4px 2px 8px #e1e1e1;
 
     .row-wrapper {
-      height: calc(~"100% - 92px");
+      height: calc(~"100% - 97px");
       overflow: scroll;
       position: absolute;
       padding: 0;
@@ -220,7 +249,7 @@
     }
 
     .row-wrapper {
-      height: calc(~"100% - 92px");
+      height: calc(~"100% - 97px");
       width: 100%;
       overflow: scroll;
       padding: 0;

src/root.jsx

@@ -10,7 +10,6 @@ const Root = ({ state, qlik, editmodeClass }) => (
       <HeadersTable
         data={state.data}
         general={state.general}
-        isKpi
         qlik={qlik}
         styling={state.styling}
       />
@@ -29,7 +28,6 @@ const Root = ({ state, qlik, editmodeClass }) => (
         <HeadersTable
           data={state.data}
           general={state.general}
-          isKpi={false}
           qlik={qlik}
           styling={state.styling}
         />

src/tooltip/index.jsx

@@ -25,21 +25,23 @@ class Tooltip extends React.PureComponent {
   }
 
   render () {
-    const { children, styling, tooltipText } = this.props;
+    const { children, tooltipText } = this.props;
     const { showTooltip } = this.state;
+
     return (
       <div
         onMouseMove={handleCalculateTooltipPosition}
         onMouseOut={this.handleRenderTooltip}
         onMouseOver={this.handleRenderTooltip}
-        style={{ fontFamily: styling.options.fontFamily }}
       >
         {children}
 
         {showTooltip
           ? (
-            <div className="tooltip-wrapper">
-              <p style={{ fontFamily: styling.options.fontFamily }}>
+            <div
+              className="tooltip-wrapper"
+            >
+              <p>
                 {tooltipText}
               </p>
             </div>
@@ -54,11 +56,6 @@ Tooltip.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node
   ]).isRequired,
-  styling: PropTypes.shape({
-    options: PropTypes.shape({
-      fontFamily: PropTypes.string.isRequired
-    }).isRequired
-  }).isRequired,
   tooltipText: PropTypes.string.isRequired
 };