feat: add formatting column and formatting object to conditional formating table (#35897)

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

@@ -74,7 +74,11 @@ import {
   TableOutlined,
 } from '@ant-design/icons';
 import { isEmpty, debounce, isEqual } from 'lodash';
-import { ColorFormatters, ColorSchemeEnum } from '@superset-ui/chart-controls';
+import {
+  ColorFormatters,
+  ObjectFormattingEnum,
+  ColorSchemeEnum,
+} from '@superset-ui/chart-controls';
 import {
   DataColumnMeta,
   SearchOption,
@@ -874,12 +878,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         isUsingTimeComparison &&
         Array.isArray(basicColorFormatters) &&
         basicColorFormatters.length > 0;
+      const generalShowCellBars =
+        config.showCellBars === undefined ? showCellBars : config.showCellBars;
       const valueRange =
         !hasBasicColorFormatters &&
-        !hasColumnColorFormatters &&
-        (config.showCellBars === undefined
-          ? showCellBars
-          : config.showCellBars) &&
+        generalShowCellBars &&
         (isMetric || isRawRecords || isPercentMetric) &&
         getValueRange(key, alignPositiveNegative);
 
@@ -914,6 +917,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
 
           let backgroundColor;
           let color;
+          let backgroundColorCellBar;
+          let valueRangeFlag = true;
           let arrow = '';
           const originKey = column.key.substring(column.label.length).trim();
           if (!hasColumnColorFormatters && hasBasicColorFormatters) {
@@ -934,18 +939,43 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                 formatter.getColorFromValue(valueToFormat);
               if (!formatterResult) return;
 
-              if (formatter.toTextColor) {
+              if (
+                formatter.objectFormatting === ObjectFormattingEnum.TEXT_COLOR
+              ) {
                 color = formatterResult.slice(0, -2);
+              } else if (
+                formatter.objectFormatting === ObjectFormattingEnum.CELL_BAR
+              ) {
+                if (generalShowCellBars)
+                  backgroundColorCellBar = formatterResult.slice(0, -2);
               } else {
                 backgroundColor = formatterResult;
+                valueRangeFlag = false;
               }
             };
             columnColorFormatters
-              .filter(formatter => formatter.column === column.key)
-              .forEach(formatter => applyFormatter(formatter, value));
+              .filter(formatter => {
+                if (formatter.columnFormatting) {
+                  return formatter.columnFormatting === column.key;
+                }
+                return formatter.column === column.key;
+              })
+              .forEach(formatter => {
+                let valueToFormat;
+                if (formatter.columnFormatting) {
+                  valueToFormat = row.original[formatter.column];
+                } else {
+                  valueToFormat = value;
+                }
+                applyFormatter(formatter, valueToFormat);
+              });
 
             columnColorFormatters
-              .filter(formatter => formatter.toAllRow)
+              .filter(
+                formatter =>
+                  formatter.columnFormatting ===
+                  ObjectFormattingEnum.ENTIRE_ROW,
+              )
               .forEach(formatter =>
                 applyFormatter(formatter, row.original[formatter.column]),
               );
@@ -968,6 +998,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             text-align: ${sharedStyle.textAlign};
             white-space: ${value instanceof Date ? 'nowrap' : undefined};
             position: relative;
+            font-weight: ${color
+              ? `${theme.fontWeightBold}`
+              : `${theme.fontWeightNormal}`};
             background: ${backgroundColor || undefined};
             padding-left: ${column.isChildColumn
               ? `${theme.sizeUnit * 5}px`
@@ -981,6 +1014,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
             top: 0;
             ${valueRange &&
             typeof value === 'number' &&
+            valueRangeFlag &&
             `
                 width: ${`${cellWidth({
                   value: value as number,
@@ -992,11 +1026,14 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                   valueRange,
                   alignPositiveNegative,
                 })}%`};
-                background-color: ${cellBackground({
-                  value: value as number,
-                  colorPositiveNegative,
-                  theme,
-                })};
+                background-color: ${
+                  (backgroundColorCellBar && `${backgroundColorCellBar}99`) ||
+                  cellBackground({
+                    value: value as number,
+                    colorPositiveNegative,
+                    theme,
+                  })
+                };
               `}
           `;
 

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

@@ -40,6 +40,7 @@ import {
   isRegularMetric,
   isPercentMetric,
   ConditionalFormattingConfig,
+  ObjectFormattingEnum,
   ColorSchemeEnum,
 } from '@superset-ui/chart-controls';
 import { t } from '@apache-superset/core';
@@ -781,12 +782,16 @@ const config: ControlPanelConfig = {
                         item.colorScheme &&
                         !['Green', 'Red'].includes(item.colorScheme)
                       ) {
-                        if (!item.toAllRow || !item.toTextColor) {
+                        if (item.columnFormatting === undefined) {
                           // eslint-disable-next-line no-param-reassign
                           array[index] = {
                             ...item,
-                            toAllRow: item.toAllRow ?? false,
-                            toTextColor: item.toTextColor ?? false,
+                            ...(item.toTextColor === true && {
+                              objectFormatting: ObjectFormattingEnum.TEXT_COLOR,
+                            }),
+                            ...(item.toAllRow === true && {
+                              columnFormatting: ObjectFormattingEnum.ENTIRE_ROW,
+                            }),
                           };
                         }
                       }
@@ -795,6 +800,23 @@ const config: ControlPanelConfig = {
                 }
                 const { colnames, coltypes } =
                   chart?.queriesResponse?.[0] ?? {};
+                const allColumns =
+                  Array.isArray(colnames) && Array.isArray(coltypes)
+                    ? [
+                        {
+                          value: ObjectFormattingEnum.ENTIRE_ROW,
+                          label: t('entire row'),
+                          dataType: GenericDataType.String,
+                        },
+                        ...colnames.map((colname: string, index: number) => ({
+                          value: colname,
+                          label: Array.isArray(verboseMap)
+                            ? colname
+                            : (verboseMap[colname] ?? colname),
+                          dataType: coltypes[index],
+                        })),
+                      ]
+                    : [];
                 const numericColumns =
                   Array.isArray(colnames) && Array.isArray(coltypes)
                     ? colnames.reduce((acc, colname, index) => {
@@ -826,10 +848,7 @@ const config: ControlPanelConfig = {
                   removeIrrelevantConditions: chartStatus === 'success',
                   columnOptions,
                   verboseMap,
-                  conditionalFormattingFlag: {
-                    toAllRowCheck: true,
-                    toColorTextCheck: true,
-                  },
+                  allColumns,
                   extraColorChoices,
                 };
               },

superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import '@testing-library/jest-dom';
+import { ObjectFormattingEnum } from '@superset-ui/chart-controls';
 import {
   render,
   screen,
@@ -1250,7 +1251,7 @@ describe('plugin-chart-table', () => {
                         column: 'sum__num',
                         operator: '>',
                         targetValue: 2467,
-                        toAllRow: true,
+                        columnFormatting: ObjectFormattingEnum.ENTIRE_ROW,
                       },
                     ],
                   },
@@ -1286,7 +1287,7 @@ describe('plugin-chart-table', () => {
                         column: 'sum__num',
                         operator: '>',
                         targetValue: 2467,
-                        toTextColor: true,
+                        objectFormatting: ObjectFormattingEnum.TEXT_COLOR,
                       },
                     ],
                   },
@@ -1319,8 +1320,8 @@ describe('plugin-chart-table', () => {
                         column: 'sum__num',
                         operator: '>',
                         targetValue: 2467,
-                        toAllRow: true,
-                        toTextColor: true,
+                        columnFormatting: ObjectFormattingEnum.ENTIRE_ROW,
+                        objectFormatting: ObjectFormattingEnum.TEXT_COLOR,
                       },
                     ],
                   },