feat: allow toggling of table viz's bar chart backgrounds (#352)

* feat: allow toggling of bar chart backgrounds

* fix: inverting bar-chart-bg hide/show

* fix: keeping metrics right aligned

package.json

@@ -142,7 +142,10 @@
     },
     "eslint": {
       "rules": {
-        "arrow-parens": ["warn", "as-needed"]
+        "arrow-parens": [
+          "warn",
+          "as-needed"
+        ]
       },
       "overrides": [
         {

packages/superset-ui-demo/storybook/stories/plugins/table/TableStories.tsx

@@ -89,6 +89,7 @@ export const basic = () => (
       orderDesc: true,
       pageLength: 0,
       percentMetrics: null,
+      showCellBars: true,
       tableFilter: false,
       tableTimestampFormat: '%Y-%m-%d %H:%M:%S',
       timeseriesLimitMetric: null,

packages/superset-ui-demo/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "jsx": "react",
     "outDir": "../../build/lib",
     "rootDir": "../../",
     "emitDeclarationOnly": false,

plugins/table/src/ReactDataTable.tsx

@@ -52,6 +52,7 @@ export default function ReactDataTable(props: DataTableProps) {
     metrics: aggMetrics,
     pageLength,
     percentMetrics,
+    showCellBars = true,
     tableTimestampFormat,
     // orderDesc,
     // TODO: add back the broken dashboard filters feature
@@ -236,6 +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 && showCellBars;
               return (
                 <td
                   key={key}
@@ -244,7 +246,7 @@ export default function ReactDataTable(props: DataTableProps) {
                   data-sort={val}
                   className={keyIsMetric ? 'text-right' : ''}
                   style={{
-                    backgroundImage: keyIsMetric ? cellBar(key, val as number) : undefined,
+                    backgroundImage: showCellBar ? cellBar(key, val as number) : undefined,
                   }}
                   title={keyIsMetric || percentMetricsSet.has(key) ? String(val) : ''}
                 >

plugins/table/src/transformProps.ts

@@ -38,6 +38,7 @@ export interface DataTableProps {
   alignPositiveNegative: boolean;
   colorPositiveNegative: boolean;
   columns: DataColumnMeta[];
+  showCellBars: boolean;
   metrics: string[];
   percentMetrics: string[];
   includeSearch: boolean;
@@ -55,6 +56,7 @@ export interface DataTableProps {
 export interface TableChartFormData {
   alignPn?: boolean;
   colorPn?: boolean;
+  showCellBars?: boolean;
   includeSearch?: boolean;
   orderDesc?: boolean;
   pageLength?: string;
@@ -80,6 +82,7 @@ export default function transformProps(chartProps: ChartProps): DataTableProps {
   const {
     alignPn = true,
     colorPn = true,
+    showCellBars = true,
     includeSearch = false,
     orderDesc = false,
     pageLength = 0,
@@ -118,6 +121,7 @@ export default function transformProps(chartProps: ChartProps): DataTableProps {
     percentMetrics,
     alignPositiveNegative: alignPn,
     colorPositiveNegative: colorPn,
+    showCellBars,
     includeSearch,
     orderDesc,
     pageLength: pageLength ? parseInt(pageLength, 10) : 0,

plugins/table/test/testData.ts

@@ -21,6 +21,7 @@ import { ChartProps } from '@superset-ui/chart';
 const basicFormData = {
   alignPn: false,
   colorPn: false,
+  showCellBars: true,
   includeSearch: false,
   orderDesc: true,
   pageLength: 0,