If dimension value doesn't contain qText use qNum

Issue: DEB-168

src/data-table/data-cell.jsx

@@ -85,7 +85,6 @@ class DataCell extends React.PureComponent {
         style={cellStyle}
       >
         <Tooltip
-          styling={styling}
           tooltipText={formattedMeasurementValue}
         >
           {formattedMeasurementValue}

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/pagination.js

@@ -55,7 +55,7 @@ const pagination = {
       ref: 'errormessage',
       label: 'Default error message',
       type: 'string',
-      defaultValue: 'Unable to display all the data. Apply more filters to limit the amount of displayed data.'
+      defaultValue: 'Ups! It seems you asked for too many data. Please filter more to see the whole picture.'
     }
   }
 };

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;
@@ -67,7 +68,7 @@ function generateMeasurements (information) {
 
 function generateDimensionEntry (information, data) {
   return {
-    displayValue: data.qText,
+    displayValue: data.qText || data.qNum,
     elementNumber: data.qElemNumber,
     name: information.qFallbackTitle,
     value: data.qNum

src/main.less

@@ -77,6 +77,38 @@
     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 +215,10 @@
     line-height: 1em !important;
   }
 
+  .data-table .fdim-cells {
+    display: none;
+  }
+
   .kpi-table {
     width: @KpiTableWidth !important;
     overflow: hidden !important;
@@ -196,7 +232,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 +256,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
 };