From b55903b478f65ca6f9d504ba5f2ece6fc8d3cc2e Mon Sep 17 00:00:00 2001 From: Conglei Date: Wed, 4 Sep 2019 16:00:25 -0700 Subject: [PATCH] fix(tablevis): Set proper width for each column (#189) * fix(tablevis): set the width for each column n * fix(fix comments): fix comments from pr * fix(revert to charwidth): revert to charwidth --- .../src/Table.tsx | 21 +++++++++++++- .../src/legacy/transformProps.ts | 3 +- .../src/transformProps.ts | 3 +- .../stories/plugin-chart-table/Stories.jsx | 28 +++++++++++++++++++ .../stories/plugin-chart-table/bigData.js | 21 ++++++++++++++ 5 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx index f9d12fb8e85b6..534f531b8f776 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx @@ -9,6 +9,7 @@ import { getRenderer, ColumnType, heightType, Cell } from './renderer'; type Props = { data: ParentRow[]; height: number; + width: number; alignPositiveNegative?: boolean; colorPositiveNegative?: boolean; columns: ColumnType[]; @@ -34,6 +35,10 @@ const defaultProps = { const SEARCH_BAR_HEIGHT = 40; +const CHAR_WIDTH = 10; + +const MAX_COLUMN_WIDTH = 500; + export type TableProps = Props & Readonly; type InternalTableProps = TableProps & WithStylesProps; @@ -148,6 +153,7 @@ class TableVis extends React.PureComponent { alignPositiveNegative, colorPositiveNegative, height, + width, tableFilter, styles, includeSearch, @@ -176,6 +182,18 @@ class TableVis extends React.PureComponent { } }); + const keys = dataToRender && dataToRender.length > 0 ? Object.keys(dataToRender[0].data) : []; + let calculatedWidth = 0; + keys.forEach(key => { + const maxLength = Math.max(...data.map(d => String(d.data[key]).length), key.length); + columnMetadata[key] = { + maxWidth: MAX_COLUMN_WIDTH, + width: maxLength * CHAR_WIDTH, + ...columnMetadata[key], + }; + calculatedWidth += Math.min(maxLength * CHAR_WIDTH, MAX_COLUMN_WIDTH); + }); + const tableHeight = includeSearch ? height - SEARCH_BAR_HEIGHT : height; return ( @@ -199,12 +217,13 @@ class TableVis extends React.PureComponent { )} 0 ? Object.keys(dataToRender[0].data) : []} + keys={keys} columnMetadata={columnMetadata} zebra rowHeight={heightType} renderers={renderers} height={tableHeight} + width={Math.max(calculatedWidth, width)} /> ); diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts index 7ef2b3930d0ea..2fe712f83cf90 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/legacy/transformProps.ts @@ -26,7 +26,7 @@ import processData from '../processData'; const NOOP = () => {}; export default function transformProps(chartProps: ChartProps) { - const { height, datasource, initialValues, formData, hooks, queryData } = chartProps; + const { height, datasource, initialValues, formData, hooks, queryData, width } = chartProps; const { onAddFilter = NOOP } = hooks; @@ -67,6 +67,7 @@ export default function transformProps(chartProps: ChartProps) { return { height, + width, data: processedData, alignPositiveNegative: alignPn, colorPositiveNegative: colorPn, diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts index 191a5d5cb3488..f5dc535ccad0e 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/transformProps.ts @@ -86,7 +86,7 @@ function transformData(data: PlainObject[], formData: PlainObject) { const NOOP = () => {}; export default function transformProps(chartProps: ChartProps) { - const { height, datasource, initialValues, formData, hooks, queryData } = chartProps; + const { height, width, datasource, initialValues, formData, hooks, queryData } = chartProps; const { onAddFilter = NOOP } = hooks; @@ -137,5 +137,6 @@ export default function transformProps(chartProps: ChartProps) { orderDesc, pageLength: pageLength && parseInt(pageLength, 10), tableFilter, + width, }; } diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx index 5024f190f130d..1ab6a1d6b9e10 100644 --- a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx @@ -3,6 +3,7 @@ import React from 'react'; import { SuperChart } from '@superset-ui/chart'; import dataLegacy from './dataLegacy'; import data from './data'; +import bigData from './bigData'; export default [ { @@ -95,4 +96,31 @@ export default [ storyName: 'TableFilter', storyPath: 'plugin-chart-table|TableChartPlugin', }, + { + renderStory: () => ( + + ), + storyName: 'BigTable', + storyPath: 'plugin-chart-table|TableChartPlugin', + }, ]; diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js new file mode 100644 index 0000000000000..2fa09c79d52df --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/bigData.js @@ -0,0 +1,21 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable no-magic-numbers */ +/* eslint-disable sort-keys */ +const LONG_STRING = `The quick brown fox jumps over the lazy dog`; +const SHORT_STRING = 'Superset'; + +const ROW_COUNT = 30; +const COLUMN_COUNT = 20; + +export const keys = Array(COLUMN_COUNT) + .fill(0) + .map((_, i) => `Column Name ${i}`); + +const item = {}; +keys.forEach(key => { + item[key] = Math.random() < 0.5 ? LONG_STRING : SHORT_STRING; +}); + +export default Array(ROW_COUNT) + .fill(0) + .map(_ => ({ ...item }));