feat: added conditional formatting enhancements string to pivot table (#35863)

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

@@ -31,6 +31,7 @@ import {
   QueryFormMetric,
   SMART_DATE_ID,
   validateNonEmpty,
+  QueryFormColumn,
 } from '@superset-ui/core';
 import { MetricsLayoutEnum } from '../types';
 
@@ -403,10 +404,21 @@ const config: ControlPanelConfig = {
               renderTrigger: true,
               label: t('Conditional formatting'),
               description: t('Apply conditional color formatting to metrics'),
+              shouldMapStateToProps() {
+                return true;
+              },
               mapStateToProps(explore, _, chart) {
-                const values =
+                const metrics =
                   (explore?.controls?.metrics?.value as QueryFormMetric[]) ??
                   [];
+                const columns =
+                  (explore?.controls?.groupbyColumns
+                    ?.value as QueryFormColumn[]) ?? [];
+                const rows =
+                  (explore?.controls?.groupbyRows
+                    ?.value as QueryFormColumn[]) ?? [];
+                const values = [...new Set([...metrics, ...columns, ...rows])];
+
                 const verboseMap = explore?.datasource?.hasOwnProperty(
                   'verbose_map',
                 )

superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.tsx

@@ -174,6 +174,33 @@ function displayHeaderCell(
   );
 }
 
+function getCellColor(
+  keys: string[],
+  aggValue: string | number | null,
+  cellColorFormatters: Record<string, CellColorFormatter[]> | undefined,
+): { backgroundColor: string | undefined } {
+  if (!cellColorFormatters) return { backgroundColor: undefined };
+
+  let backgroundColor: string | undefined;
+
+  for (const cellColorFormatter of Object.values(cellColorFormatters)) {
+    if (!Array.isArray(cellColorFormatter)) continue;
+
+    for (const key of keys) {
+      for (const formatter of cellColorFormatter) {
+        if (formatter.column === key) {
+          const result = formatter.getColorFromValue(aggValue);
+          if (result) {
+            backgroundColor = result;
+          }
+        }
+      }
+    }
+  }
+
+  return { backgroundColor };
+}
+
 interface HierarchicalNode {
   currentVal?: number;
   [key: string]: HierarchicalNode | number | undefined;
@@ -717,6 +744,7 @@ export class TableRenderer extends Component<
       highlightHeaderCellsOnHover,
       omittedHighlightHeaderGroups = [],
       highlightedHeaderCells,
+      cellColorFormatters,
       dateFormatters,
     } = this.props.tableOptions;
 
@@ -816,10 +844,17 @@ export class TableRenderer extends Component<
         };
         const headerCellFormattedValue =
           dateFormatters?.[attrName]?.(colKey[attrIdx]) ?? colKey[attrIdx];
+        const { backgroundColor } = getCellColor(
+          [attrName],
+          headerCellFormattedValue,
+          cellColorFormatters,
+        );
+        const style = { backgroundColor };
         attrValueCells.push(
           <th
             className={colLabelClass}
             key={`colKey-${flatColKey}`}
+            style={style}
             colSpan={colSpan}
             rowSpan={rowSpan}
             role="columnheader button"
@@ -1044,10 +1079,18 @@ export class TableRenderer extends Component<
 
         const headerCellFormattedValue =
           dateFormatters?.[rowAttrs[i]]?.(r) ?? r;
+
+        const { backgroundColor } = getCellColor(
+          [rowAttrs[i]],
+          headerCellFormattedValue,
+          cellColorFormatters,
+        );
+        const style = { backgroundColor };
         return (
           <th
             key={`rowKeyLabel-${i}`}
             className={valueCellClassName}
+            style={style}
             rowSpan={rowSpan}
             colSpan={colSpan}
             role="columnheader button"
@@ -1108,26 +1151,12 @@ export class TableRenderer extends Component<
       const aggValue = agg.value();
 
       const keys = [...rowKey, ...colKey];
-      let backgroundColor: string | undefined;
-      if (cellColorFormatters) {
-        Object.values(cellColorFormatters).forEach(cellColorFormatter => {
-          if (Array.isArray(cellColorFormatter)) {
-            keys.forEach(key => {
-              if (backgroundColor) {
-                return;
-              }
-              cellColorFormatter
-                .filter(formatter => formatter.column === key)
-                .forEach(formatter => {
-                  const formatterResult = formatter.getColorFromValue(aggValue);
-                  if (formatterResult) {
-                    backgroundColor = formatterResult;
-                  }
-                });
-            });
-          }
-        });
-      }
+
+      const { backgroundColor } = getCellColor(
+        keys,
+        aggValue,
+        cellColorFormatters,
+      );
 
       const style = agg.isSubtotal
         ? { fontWeight: 'bold' }