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

superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx

@@ -18,7 +18,6 @@
  * under the License.
  */
 import {
-  ChartDataResponseResult,
   ensureIsArray,
   GenericDataType,
   isAdhocColumn,
@@ -145,6 +144,21 @@ const percentMetricsControl: typeof sharedControls.metrics = {
   validators: [],
 };
 
+/**
+ * Generate comparison column names for a given column.
+ */
+const generateComparisonColumns = (colname: string) => [
+  `${t('Main')} ${colname}`,
+  `# ${colname}`,
+  `△ ${colname}`,
+  `% ${colname}`,
+];
+/**
+ * Generate column types for the comparison columns.
+ */
+const generateComparisonColumnTypes = (count: number) =>
+  Array(count).fill(GenericDataType.Numeric);
+
 const processComparisonColumns = (columns: any[], suffix: string) =>
   columns
     .map(col => {
@@ -470,10 +484,37 @@ const config: ControlPanelConfig = {
                 return true;
               },
               mapStateToProps(explore, _, chart) {
+                const timeComparisonStatus =
+                  !!explore?.controls?.time_compare?.value;
+
+                const { colnames: _colnames, coltypes: _coltypes } =
+                  chart?.queriesResponse?.[0] ?? {};
+                let colnames: string[] = _colnames || [];
+                let coltypes: GenericDataType[] = _coltypes || [];
+
+                if (timeComparisonStatus) {
+                  /**
+                   * Replace numeric columns with sets of comparison columns.
+                   */
+                  const updatedColnames: string[] = [];
+                  const updatedColtypes: GenericDataType[] = [];
+                  colnames.forEach((colname, index) => {
+                    if (coltypes[index] === GenericDataType.Numeric) {
+                      updatedColnames.push(
+                        ...generateComparisonColumns(colname),
+                      );
+                      updatedColtypes.push(...generateComparisonColumnTypes(4));
+                    } else {
+                      updatedColnames.push(colname);
+                      updatedColtypes.push(coltypes[index]);
+                    }
+                  });
+
+                  colnames = updatedColnames;
+                  coltypes = updatedColtypes;
+                }
                 return {
-                  queryResponse: chart?.queriesResponse?.[0] as
-                    | ChartDataResponseResult
-                    | undefined,
+                  columnsPropsObject: { colnames, coltypes },
                 };
               },
             },

superset-frontend/plugins/plugin-chart-table/src/transformProps.ts

@@ -20,6 +20,7 @@ import memoizeOne from 'memoize-one';
 import {
   ComparisonType,
   CurrencyFormatter,
+  Currency,
   DataRecord,
   ensureIsArray,
   extractTimegrain,
@@ -53,6 +54,7 @@ import {
   DataColumnMeta,
   TableChartProps,
   TableChartTransformedProps,
+  TableColumnConfig,
 } from './types';
 
 const { PERCENT_3_POINT } = NumberFormats;
@@ -293,6 +295,48 @@ const processColumns = memoizeOne(function processColumns(
   ];
 }, isEqualColumns);
 
+const getComparisonColConfig = (
+  label: string,
+  parentColKey: string,
+  columnConfig: Record<string, TableColumnConfig>,
+) => {
+  const comparisonKey = `${label} ${parentColKey}`;
+  const comparisonColConfig = columnConfig[comparisonKey] || {};
+  return comparisonColConfig;
+};
+
+const getComparisonColFormatter = (
+  label: string,
+  parentCol: DataColumnMeta,
+  columnConfig: Record<string, TableColumnConfig>,
+  savedFormat: string | undefined,
+  savedCurrency: Currency | undefined,
+) => {
+  const currentColConfig = getComparisonColConfig(
+    label,
+    parentCol.key,
+    columnConfig,
+  );
+  const hasCurrency = currentColConfig.currencyFormat?.symbol;
+  const currentColNumberFormat =
+    // fallback to parent's number format if not set
+    currentColConfig.d3NumberFormat || parentCol.config?.d3NumberFormat;
+  let { formatter } = parentCol;
+  if (label === '%') {
+    formatter = getNumberFormatter(currentColNumberFormat || PERCENT_3_POINT);
+  } else if (currentColNumberFormat || hasCurrency) {
+    const currency = currentColConfig.currencyFormat || savedCurrency;
+    const numberFormat = currentColNumberFormat || savedFormat;
+    formatter = currency
+      ? new CurrencyFormatter({
+          d3Format: numberFormat,
+          currency,
+        })
+      : getNumberFormatter(numberFormat);
+  }
+  return formatter;
+};
+
 const processComparisonColumns = (
   columns: DataColumnMeta[],
   props: TableChartProps,
@@ -301,12 +345,11 @@ const processComparisonColumns = (
   columns
     .map(col => {
       const {
-        datasource: { columnFormats },
+        datasource: { columnFormats, currencyFormats },
         rawFormData: { column_config: columnConfig = {} },
       } = props;
-      const config = columnConfig[col.key] || {};
       const savedFormat = columnFormats?.[col.key];
-      const numberFormat = config.d3NumberFormat || savedFormat;
+      const savedCurrency = currencyFormats?.[col.key];
       if (
         (col.isMetric || col.isPercentMetric) &&
         !col.key.includes(comparisonSuffix) &&
@@ -317,22 +360,53 @@ const processComparisonColumns = (
             ...col,
             label: t('Main'),
             key: `${t('Main')} ${col.key}`,
+            config: getComparisonColConfig(t('Main'), col.key, columnConfig),
+            formatter: getComparisonColFormatter(
+              t('Main'),
+              col,
+              columnConfig,
+              savedFormat,
+              savedCurrency,
+            ),
           },
           {
             ...col,
             label: `#`,
             key: `# ${col.key}`,
+            config: getComparisonColConfig(`#`, col.key, columnConfig),
+            formatter: getComparisonColFormatter(
+              `#`,
+              col,
+              columnConfig,
+              savedFormat,
+              savedCurrency,
+            ),
           },
           {
             ...col,
             label: `△`,
             key: `△ ${col.key}`,
+            config: getComparisonColConfig(`△`, col.key, columnConfig),
+            formatter: getComparisonColFormatter(
+              `△`,
+              col,
+              columnConfig,
+              savedFormat,
+              savedCurrency,
+            ),
           },
           {
             ...col,
-            formatter: getNumberFormatter(numberFormat || PERCENT_3_POINT),
             label: `%`,
             key: `% ${col.key}`,
+            config: getComparisonColConfig(`%`, col.key, columnConfig),
+            formatter: getComparisonColFormatter(
+              `%`,
+              col,
+              columnConfig,
+              savedFormat,
+              savedCurrency,
+            ),
           },
         ];
       }