From 5186bbb2cea5fc1405eae6c9ff68cbbce6e2212e Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Thu, 9 Apr 2020 23:34:40 -0700 Subject: [PATCH 1/3] feat: allow toggling of bar chart backgrounds --- package.json | 5 ++++- .../storybook/stories/plugins/table/TableStories.tsx | 1 + packages/superset-ui-demo/tsconfig.json | 1 + plugins/table/src/ReactDataTable.tsx | 6 ++++-- plugins/table/src/transformProps.ts | 4 ++++ plugins/table/test/testData.ts | 1 + 6 files changed, 15 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index fc7c41884c..fdcb363214 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,10 @@ }, "eslint": { "rules": { - "arrow-parens": ["warn", "as-needed"] + "arrow-parens": [ + "warn", + "as-needed" + ] }, "overrides": [ { diff --git a/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx b/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx index c56baff203..2dd9fda5d9 100644 --- a/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx +++ b/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx @@ -89,6 +89,7 @@ export const basic = () => ( orderDesc: true, pageLength: 0, percentMetrics: null, + hideCellBars: true, tableFilter: false, tableTimestampFormat: '%Y-%m-%d %H:%M:%S', timeseriesLimitMetric: null, diff --git a/packages/superset-ui-demo/tsconfig.json b/packages/superset-ui-demo/tsconfig.json index 385c5ba1a9..4b0dc7536b 100644 --- a/packages/superset-ui-demo/tsconfig.json +++ b/packages/superset-ui-demo/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../../tsconfig.json", "compilerOptions": { + "jsx": "react", "outDir": "../../build/lib", "rootDir": "../../", "emitDeclarationOnly": false, diff --git a/plugins/table/src/ReactDataTable.tsx b/plugins/table/src/ReactDataTable.tsx index 3481c5ac1f..200a75ae0e 100644 --- a/plugins/table/src/ReactDataTable.tsx +++ b/plugins/table/src/ReactDataTable.tsx @@ -52,6 +52,7 @@ export default function ReactDataTable(props: DataTableProps) { metrics: aggMetrics, pageLength, percentMetrics, + hideCellBars = false, tableTimestampFormat, // orderDesc, // TODO: add back the broken dashboard filters feature @@ -236,15 +237,16 @@ export default function ReactDataTable(props: DataTableProps) { const keyIsMetric = metricsSet.has(key); const text = cellText(key, format, val); const isHtml = !keyIsMetric && isProbablyHTML(text); + const showCellBar = keyIsMetric && !hideCellBars; return ( diff --git a/plugins/table/src/transformProps.ts b/plugins/table/src/transformProps.ts index 38a3a6f628..7722995c6b 100644 --- a/plugins/table/src/transformProps.ts +++ b/plugins/table/src/transformProps.ts @@ -38,6 +38,7 @@ export interface DataTableProps { alignPositiveNegative: boolean; colorPositiveNegative: boolean; columns: DataColumnMeta[]; + hideCellBars: boolean; metrics: string[]; percentMetrics: string[]; includeSearch: boolean; @@ -55,6 +56,7 @@ export interface DataTableProps { export interface TableChartFormData { alignPn?: boolean; colorPn?: boolean; + hideCellBars?: boolean; includeSearch?: boolean; orderDesc?: boolean; pageLength?: string; @@ -80,6 +82,7 @@ export default function transformProps(chartProps: ChartProps): DataTableProps { const { alignPn = true, colorPn = true, + hideCellBars = false, includeSearch = false, orderDesc = false, pageLength = 0, @@ -118,6 +121,7 @@ export default function transformProps(chartProps: ChartProps): DataTableProps { percentMetrics, alignPositiveNegative: alignPn, colorPositiveNegative: colorPn, + hideCellBars, includeSearch, orderDesc, pageLength: pageLength ? parseInt(pageLength, 10) : 0, diff --git a/plugins/table/test/testData.ts b/plugins/table/test/testData.ts index 35c963e908..eba8da426d 100644 --- a/plugins/table/test/testData.ts +++ b/plugins/table/test/testData.ts @@ -21,6 +21,7 @@ import { ChartProps } from '@superset-ui/chart'; const basicFormData = { alignPn: false, colorPn: false, + hideCellBars: false, includeSearch: false, orderDesc: true, pageLength: 0, From 1ae05780a2a620e52b5ffd0a5e50fcc1b7b2f9ca Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Sun, 12 Apr 2020 23:17:10 -0700 Subject: [PATCH 2/3] fix: inverting bar-chart-bg hide/show --- .../storybook/stories/plugins/table/TableStories.tsx | 2 +- plugins/table/src/ReactDataTable.tsx | 4 ++-- plugins/table/src/transformProps.ts | 8 ++++---- plugins/table/test/testData.ts | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx b/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx index 2dd9fda5d9..aa38524627 100644 --- a/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx +++ b/packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx @@ -89,7 +89,7 @@ export const basic = () => ( orderDesc: true, pageLength: 0, percentMetrics: null, - hideCellBars: true, + showCellBars: true, tableFilter: false, tableTimestampFormat: '%Y-%m-%d %H:%M:%S', timeseriesLimitMetric: null, diff --git a/plugins/table/src/ReactDataTable.tsx b/plugins/table/src/ReactDataTable.tsx index 200a75ae0e..78de5ac8f9 100644 --- a/plugins/table/src/ReactDataTable.tsx +++ b/plugins/table/src/ReactDataTable.tsx @@ -52,7 +52,7 @@ export default function ReactDataTable(props: DataTableProps) { metrics: aggMetrics, pageLength, percentMetrics, - hideCellBars = false, + showCellBars = true, tableTimestampFormat, // orderDesc, // TODO: add back the broken dashboard filters feature @@ -237,7 +237,7 @@ export default function ReactDataTable(props: DataTableProps) { const keyIsMetric = metricsSet.has(key); const text = cellText(key, format, val); const isHtml = !keyIsMetric && isProbablyHTML(text); - const showCellBar = keyIsMetric && !hideCellBars; + const showCellBar = keyIsMetric && showCellBars; return ( Date: Sun, 12 Apr 2020 23:47:13 -0700 Subject: [PATCH 3/3] fix: keeping metrics right aligned --- plugins/table/src/ReactDataTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/table/src/ReactDataTable.tsx b/plugins/table/src/ReactDataTable.tsx index 78de5ac8f9..22f6c52376 100644 --- a/plugins/table/src/ReactDataTable.tsx +++ b/plugins/table/src/ReactDataTable.tsx @@ -244,7 +244,7 @@ export default function ReactDataTable(props: DataTableProps) { // only set innerHTML for actual html content, this saves time dangerouslySetInnerHTML={isHtml ? { __html: text } : undefined} data-sort={val} - className={showCellBar ? 'text-right' : ''} + className={keyIsMetric ? 'text-right' : ''} style={{ backgroundImage: showCellBar ? cellBar(key, val as number) : undefined, }}