Merge pull request #70 from qlik-oss/QLIK-95962/SpanWidth

Add option to fit cells to chart width
qlik-oss · May 29, 2019 · 79339a8 · 79339a8
2 parents c22b7f5 + a6faeeb
commit 79339a8
Show file tree

Hide file tree

Showing 10 changed files with 367 additions and 266 deletions.
diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx
@@ -42,7 +42,7 @@ class DataCell extends React.PureComponent {
 
   render () {
     const {
-      general,
+      cellWidth,
       measurement,
       styleBuilder,
       styling
@@ -55,17 +55,15 @@ class DataCell extends React.PureComponent {
       ...styleBuilder.getStyle(),
       paddingLeft: '5px',
       textAlign: textAlignment,
-      minWidth: general.cellWidth,
-      maxWidth: general.cellWidth
+      minWidth: cellWidth,
+      maxWidth: cellWidth
     };
 
     const isEmptyCell = measurement.displayValue === '';
     let formattedMeasurementValue;
-    if (isEmptyCell) {
+    if (isEmptyCell || styleBuilder.hasComments()) {
       formattedMeasurementValue = '';
       cellStyle.cursor = 'default';
-    } else if (styleBuilder.hasComments()) {
-      formattedMeasurementValue = '.';
     } else {
       formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     }
@@ -104,6 +102,7 @@ class DataCell extends React.PureComponent {
 }
 
 DataCell.propTypes = {
+  cellWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
       dimension1: PropTypes.array.isRequired,
@@ -114,9 +113,7 @@ DataCell.propTypes = {
       dimensionCount: PropTypes.number.isRequired
     }).isRequired
   }).isRequired,
-  general: PropTypes.shape({
-    cellWidth: PropTypes.string.isRequired
-  }).isRequired,
+  general: PropTypes.shape({}).isRequired,
   measurement: PropTypes.shape({
     format: PropTypes.string,
     name: PropTypes.string,

diff --git a/src/data-table/index.jsx b/src/data-table/index.jsx
@@ -5,102 +5,114 @@ import DataCell from './data-cell.jsx';
 import RowHeader from './row-header.jsx';
 import { injectSeparators } from '../utilities';
 
-const DataTable = ({ data, general, component, renderData, styling }) => {
-  const {
-    headers: {
-      dimension1,
-      measurements
-    },
-    matrix
-  } = data;
+class DataTable extends React.PureComponent {
+  render () {
+    const {
+      cellWidth,
+      columnSeparatorWidth,
+      component,
+      data,
+      general,
+      renderData,
+      styling
+    } = this.props;
 
-  return (
-    <div className="row-wrapper">
-      <table>
-        <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()
-            };
+    const {
+      headers: {
+        dimension1,
+        measurements
+      },
+      matrix
+    } = data;
 
-            return (
-              <tr key={dimensionEntry.displayValue}>
-                {!renderData ?
-                  <RowHeader
-                    altState={data.meta.altState}
-                    entry={dimensionEntry}
-                    component={component}
-                    rowStyle={rowStyle}
-                    styleBuilder={styleBuilder}
-                    styling={styling}
-                  /> : null
-                }
-                {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`
-                    };
+    const separatorStyle = {
+      minWidth: columnSeparatorWidth,
+      maxWidth: columnSeparatorWidth
+    };
 
-                    return (
-                      <td
-                        className="empty"
-                        key={`${dimensionEntry.displayValue}-${index}-separator`}
-                        style={separatorStyle}
-                      >
-                        *
-                      </td>
-                    );
-                  }
+    return (
+      <div className="row-wrapper">
+        <table>
+          <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()
+              };
 
-                  const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
-                  const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}-${measurement.index}`;
-                  return (
-                    <DataCell
-                      data={data}
-                      general={general}
-                      key={`${dimensionEntry.displayValue}-${id}`}
-                      measurement={measurementData}
+              return (
+                <tr key={dimensionEntry.displayValue}>
+                  {!renderData ?
+                    <RowHeader
+                      altState={data.meta.altState}
                       component={component}
+                      entry={dimensionEntry}
+                      rowStyle={rowStyle}
                       styleBuilder={styleBuilder}
                       styling={styling}
-                    />
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
-  );
-};
+                    /> : null
+                  }
+                  {renderData && injectSeparators(
+                    matrix[dimensionIndex],
+                    columnSeparatorWidth,
+                    { atEvery: measurements.length }
+                  ).map((measurementData, index) => {
+                    if (measurementData.isSeparator) {
+                      return (
+                        <td
+                          className="empty"
+                          key={`${dimensionEntry.displayValue}-${index}-separator`}
+                          style={separatorStyle}
+                        />
+                      );
+                    }
+
+                    const { dimension1: dimension1Info, dimension2, measurement } = measurementData.parents;
+                    const id = `${dimension1Info.elementNumber}-${dimension2 && dimension2.elementNumber}-${measurement.header}-${measurement.index}`;
+                    return (
+                      <DataCell
+                        cellWidth={cellWidth}
+                        component={component}
+                        data={data}
+                        general={general}
+                        key={`${dimensionEntry.displayValue}-${id}`}
+                        measurement={measurementData}
+                        styleBuilder={styleBuilder}
+                        styling={styling}
+                      />
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
 
 DataTable.defaultProps = {
   renderData: true
 };
 
 DataTable.propTypes = {
+  cellWidth: PropTypes.string.isRequired,
+  columnSeparatorWidth: PropTypes.string.isRequired,
   data: PropTypes.shape({
     headers: PropTypes.shape({
       dimension1: PropTypes.array.isRequired

diff --git a/src/definition/table-format.js b/src/definition/table-format.js
@@ -209,6 +209,23 @@ const tableFormat = {
       ],
       defaultValue: 'right'
     },
+    FitChartWidth: {
+      ref: 'fitchartwidth',
+      type: 'boolean',
+      component: 'switch',
+      label: 'Fill chart width',
+      options: [
+        {
+          value: true,
+          label: 'On'
+        },
+        {
+          value: false,
+          label: 'Off'
+        }
+      ],
+      defaultValue: false
+    },
     ColumnWidthSlider: {
       type: 'number',
       component: 'slider',
@@ -217,7 +234,8 @@ const tableFormat = {
       min: 20,
       max: 250,
       step: 10,
-      defaultValue: 50
+      defaultValue: 50,
+      show: data => !data.fitchartwidth
     },
     SymbolForNulls: {
       ref: 'symbolfornulls',

diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx
@@ -17,7 +17,7 @@ class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { baseCSS, cellWidth, colSpan, entry, styling, component } = this.props;
+    const { baseCSS, cellWidth, colSpan, component, entry, styling } = this.props;
     const inEditState = component.inEditState();
     const isMediumFontSize = styling.headerOptions.fontSizeAdjustment === HEADER_FONT_SIZE.MEDIUM;
 
@@ -55,7 +55,7 @@ ColumnHeader.defaultProps = {
 
 ColumnHeader.propTypes = {
   baseCSS: PropTypes.shape({}).isRequired,
-  cellWidth: PropTypes.string,
+  cellWidth: PropTypes.string.isRequired,
   colSpan: PropTypes.number,
   entry: PropTypes.shape({
     displayValue: PropTypes.string.isRequired,