feat(explorer): Add configs and formatting to discrete comparison columns (#29553)

superset-frontend/plugins/plugin-chart-table/test/testData.ts

@@ -23,6 +23,7 @@ import {
   GenericDataType,
   QueryMode,
   supersetTheme,
+  ComparisonType,
 } from '@superset-ui/core';
 import { TableChartProps, TableChartFormData } from '../src/types';
 
@@ -175,6 +176,131 @@ const advanced: TableChartProps = {
   ],
 };
 
+const comparison: TableChartProps = {
+  ...basic,
+  rawFormData: {
+    ...basicFormData,
+    table_timestamp_format: 'smart_date',
+    metrics: ['metric_1', 'metric_2'],
+    percent_metrics: ['percent_metric_1'],
+    column_config: {},
+    align_pn: true,
+    color_pn: true,
+    show_cell_bars: true,
+    include_search: true,
+    page_length: 10,
+    server_pagination: false,
+    order_desc: false,
+    query_mode: QueryMode.Aggregate,
+    show_totals: true,
+    conditional_formatting: [],
+    allow_rearrange_columns: true,
+    allow_render_html: false,
+    time_compare: ['P1D'],
+    comparison_color_enabled: true,
+    comparison_color_scheme: 'Green',
+    comparison_type: ComparisonType.Values,
+  },
+  queriesData: [
+    {
+      ...basicQueryResult,
+      data: [
+        {
+          metric_1: 100,
+          metric_2: 200,
+          percent_metric_1: 0.5,
+          date: '2023-01-01',
+        },
+        {
+          metric_1: 110,
+          metric_2: 210,
+          percent_metric_1: 0.55,
+          date: '2023-01-02',
+        },
+      ],
+      colnames: ['metric_1', 'metric_2', 'percent_metric_1', 'date'],
+      coltypes: [
+        GenericDataType.Numeric,
+        GenericDataType.Numeric,
+        GenericDataType.Numeric,
+        GenericDataType.Temporal,
+      ],
+    },
+    {
+      ...basicQueryResult,
+      data: [
+        {
+          metric_1: 10,
+          metric_2: 20,
+          percent_metric_1: 0.05,
+          date: '2023-01-01',
+        },
+        {
+          metric_1: 11,
+          metric_2: 21,
+          percent_metric_1: 0.055,
+          date: '2023-01-02',
+        },
+      ],
+    },
+  ],
+  filterState: { filters: {} },
+  ownState: {},
+  hooks: {
+    onAddFilter: jest.fn(),
+    setDataMask: jest.fn(),
+    onContextMenu: jest.fn(),
+  },
+  emitCrossFilters: true,
+};
+
+const comparisonWithConfig: TableChartProps = {
+  ...comparison,
+  height: 400,
+  width: 400,
+  rawFormData: {
+    ...comparison.rawFormData,
+    table_timestamp_format: 'smart_date',
+    metrics: ['metric_1'],
+    percent_metrics: ['percent_metric_1'],
+    column_config: {
+      'Main metric_1': { d3NumberFormat: '.2f' },
+      '# metric_1': { d3NumberFormat: '.1f' },
+      '△ metric_1': { d3NumberFormat: '.0f' },
+      '% metric_1': { d3NumberFormat: '.3f' },
+    },
+    time_compare: ['1 year ago'],
+    comparison_color_enabled: true,
+    comparison_type: ComparisonType.Values,
+  },
+  datasource: {
+    ...comparison.datasource,
+    columnFormats: { metric_1: '.2f' },
+    currencyFormats: {},
+    verboseMap: { metric_1: 'Metric 1' },
+  },
+  queriesData: [
+    {
+      ...basicQueryResult,
+      data: [{ metric_1: 100, 'metric_1__1 year ago': 80 }],
+      colnames: ['metric_1', 'metric_1__1 year ago'],
+      coltypes: [GenericDataType.Numeric, GenericDataType.Numeric],
+    },
+    {
+      ...basicQueryResult,
+      data: [{ rowcount: 1 }],
+    },
+  ],
+  filterState: { filters: {} },
+  ownState: {},
+  hooks: {
+    onAddFilter: jest.fn(),
+    setDataMask: jest.fn(),
+    onContextMenu: jest.fn(),
+  },
+  emitCrossFilters: false,
+};
+
 const raw = {
   ...advanced,
   rawFormData: {
@@ -226,6 +352,8 @@ export default {
   basic,
   advanced,
   advancedWithCurrency,
+  comparison,
+  comparisonWithConfig,
   empty,
   raw,
 };