merge conflicts solved

src/data-table/data-cell.jsx

@@ -5,7 +5,7 @@ import { addSeparators } from '../utilities';
 
 function formatMeasurementValue (measurement, styling) {
   // TODO: measurement.name is a horrible propertyname, it's actually the column header
-  const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
+  const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%';
   let formattedMeasurementValue = '';
   if (isColumnPercentageBased) {
     if (isNaN(measurement.value)) {
@@ -62,52 +62,74 @@ function getSemaphoreColors (measurement, semaphoreColors) {
   return semaphoreColors.statusColors.normal;
 }
 
-const DataCell = ({ data, general, measurement, styleBuilder, styling }) => {
-  const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
-  let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
-  if (styleBuilder.hasComments()) {
-    formattedMeasurementValue = '.';
+class DataCell extends React.PureComponent {
+  constructor (props) {
+    super(props);
+
+    this.handleSelect = this.handleSelect.bind(this);
   }
 
-  let cellStyle = {
-    fontFamily: styling.options.fontFamily,
-    ...styleBuilder.getStyle(),
-    paddingRight: '4px',
-    textAlign: 'right'
+  handleSelect () {
+    const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
+    const hasSecondDimension = dimensionCount > 1;
+    if (!allowFilteringByClick) {
+      return;
+    }
 
-  };
-  const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
-  const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-  const shouldHaveSemaphoreColors = fieldsToApplyTo.applyToMetric && (fieldsToApplyTo.applyToAll || fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1);
-  if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
-    const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
-    cellStyle = {
-      backgroundColor,
-      color,
-      fontFamily: styling.options.fontFamily,
-      fontSize: styleBuilder.getStyle().fontSize,
-      paddingLeft: '4px',
-      textAlign: 'right'
-    };
+    qlik.backendApi.selectValues(0, [measurement.parents.dimension1.elementNumber], true);
+
+    if (hasSecondDimension) {
+      qlik.backendApi.selectValues(1, [measurement.parents.dimension2.elementNumber], true);
+    }
   }
 
-  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';
+  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;
+    }
+
+    const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
+    const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
+    const shouldHaveSemaphoreColors = fieldsToApplyTo.applyToMetric && (fieldsToApplyTo.applyToAll || fieldsToApplyTo.specificFields.indexOf(measurement.name) !== -1);
+    let cellStyle;
+    if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
+      const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
+      cellStyle = {
+        backgroundColor,
+        color,
+        fontFamily: styling.options.fontFamily,
+        ...styleBuilder.getStyle(),
+        paddingLeft: '4px',
+        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}
+      >
+        {formattedMeasurementValue}
+      </td>
+    );
   }
-
-  return (
-    <td
-      className={`${cellClass}${general.cellSuffix}`}
-      style={cellStyle}
-    >
-      {formattedMeasurementValue}
-    </td>
-  );
-};
-
+}
 DataCell.propTypes = {
   data: PropTypes.shape({
     headers: PropTypes.shape({
@@ -122,6 +144,11 @@ DataCell.propTypes = {
     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,

src/data-table/index.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import StyleBuilder from '../style-builder';
 import DataCell from './data-cell.jsx';
 import HeaderPadding from './header-padding.jsx';
+import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const DataTable = ({ data, general, styling }) => {
+const DataTable = ({ data, general, qlik, renderData, styling }) => {
   const {
     headers: {
       dimension1,
@@ -17,79 +18,85 @@ const DataTable = ({ data, general, styling }) => {
   return (
     <div className="row-wrapper">
       <table>
-        {dimension1.map((dimensionEntry, dimensionIndex) => {
-          const rowHeaderText = dimensionEntry.displayValue || '';
-          if (rowHeaderText === '-') {
-            return null;
-          }
-          const styleBuilder = new StyleBuilder(styling);
-          if (styling.hasCustomFileStyle) {
-            styleBuilder.parseCustomFileStyle(rowHeaderText);
-          } else {
-            styleBuilder.applyStandardAttributes(dimensionIndex);
-            styleBuilder.applyCustomStyle({
-              fontSize: `${14 + styling.options.fontSizeAdjustment}px`
-            });
-          }
-          const rowStyle = {
-            fontFamily: styling.options.fontFamily,
-            width: '230px',
-            ...styleBuilder.getStyle()
-          };
+        <tbody>
+          {dimension1.map((dimensionEntry, dimensionIndex) => {
+            const rowHeaderText = dimensionEntry.displayValue || '';
+            if (rowHeaderText === '-') {
+              return null;
+            }
+            const styleBuilder = new StyleBuilder(styling);
+            if (styling.hasCustomFileStyle) {
+              styleBuilder.parseCustomFileStyle(rowHeaderText);
+            } else {
+              styleBuilder.applyStandardAttributes(dimensionIndex);
+              styleBuilder.applyCustomStyle({
+                fontSize: `${14 + styling.options.fontSizeAdjustment}px`
+              });
+            }
+            const rowStyle = {
+              fontFamily: styling.options.fontFamily,
+              width: '230px',
+              ...styleBuilder.getStyle()
+            };
 
-          return (
-            <tr key={dimensionEntry.displayValue}>
-              <td
-                className="fdim-cells"
-                style={rowStyle}
-              >
-                <HeaderPadding
+            return (
+              <tr key={dimensionEntry.displayValue}>
+                <RowHeader
+                  entry={dimensionEntry}
+                  qlik={qlik}
+                  rowStyle={rowStyle}
                   styleBuilder={styleBuilder}
                   styling={styling}
                 />
-                {dimensionEntry.displayValue}
-              </td>
-              {injectSeparators(
-                matrix[dimensionIndex],
-                styling.useSeparatorColumns,
-                { atEvery: measurements.length }
-              ).map(measurementData => {
-                if (measurementData.isSeparator) {
-                  const separatorStyle = {
-                    color: 'white',
-                    fontFamily: styling.options.fontFamily,
-                    fontSize: `${12 + styling.options.fontSizeAdjustment}px`
-                  };
+                {renderData && injectSeparators(
+                  matrix[dimensionIndex],
+                  styling.useSeparatorColumns,
+                  { atEvery: measurements.length }
+                ).map((measurementData, index) => {
+                  if (measurementData.isSeparator) {
+                    const separatorStyle = {
+                      color: 'white',
+                      fontFamily: styling.options.fontFamily,
+                      fontSize: `${12 + styling.options.fontSizeAdjustment}px`
+                    };
 
+                    return (
+                      <td
+                        className="empty"
+                        key={`${dimensionEntry.displayValue}-${index}-separator`}
+                        style={separatorStyle}
+                      >
+                        *
+                      </td>
+                    );
+                  }
+                  const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
+                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}`;
                   return (
-                    <td
-                      className="empty"
-                      key={`${dimensionEntry.displayValue}-${measurementData.name}-separator`}
-                      style={separatorStyle}
-                    >
-                      *
-                    </td>
+                    <DataCell
+                      data={data}
+                      general={general}
+                      key={`${dimensionEntry.displayValue}-${id}`}
+                      measurement={measurementData}
+                      qlik={qlik}
+                      styleBuilder={styleBuilder}
+                      styling={styling}
+                    />
                   );
-                }
-                return (
-                  <DataCell
-                    data={data}
-                    general={general}
-                    key={`${dimensionEntry.displayValue}-${measurementData.name}`}
-                    measurement={measurementData}
-                    styleBuilder={styleBuilder}
-                    styling={styling}
-                  />
-                );
-              })}
-            </tr>
-          );
-        })}
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
       </table>
     </div>
   );
 };
 
+DataTable.defaultProps = {
+  renderData: true
+};
+
 DataTable.propTypes = {
   data: PropTypes.shape({
     headers: PropTypes.shape({
@@ -98,6 +105,8 @@ DataTable.propTypes = {
     matrix: PropTypes.arrayOf(PropTypes.array.isRequired).isRequired
   }).isRequired,
   general: PropTypes.shape({}).isRequired,
+  qlik: PropTypes.shape({}).isRequired,
+  renderData: PropTypes.bool,
   styling: PropTypes.shape({
     hasCustomFileStyle: PropTypes.bool.isRequired
   }).isRequired

src/data-table/row-header.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeaderPadding from './header-padding.jsx';
+
+class RowHeader extends React.PureComponent {
+  constructor (props) {
+    super(props);
+
+    this.handleSelect = this.handleSelect.bind(this);
+  }
+
+  handleSelect () {
+    const { entry, qlik } = this.props;
+    qlik.backendApi.selectValues(0, [entry.elementNumber], true);
+  }
+
+  render () {
+    const { entry, rowStyle, styleBuilder, styling } = this.props;
+    return (
+      <td
+        className="fdim-cells"
+        onClick={this.handleSelect}
+        style={rowStyle}
+      >
+        <HeaderPadding
+          styleBuilder={styleBuilder}
+          styling={styling}
+        />
+        {entry.displayValue}
+      </td>
+    );
+  }
+}
+
+RowHeader.propTypes = {
+  entry: PropTypes.shape({
+    displayValue: PropTypes.string.isRequired
+  }).isRequired,
+  qlik: PropTypes.shape({
+    backendApi: PropTypes.shape({
+      selectValues: PropTypes.func.isRequired
+    }).isRequired
+  }).isRequired,
+  rowStyle: PropTypes.shape({}).isRequired,
+  styleBuilder: PropTypes.shape({}).isRequired,
+  styling: PropTypes.shape({}).isRequired
+};
+
+export default RowHeader;