fix(ag-grid): fix conditional formatting theme colors and module extensibility (#35605)

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

@@ -74,6 +74,23 @@ function isPositiveNumber(value: string | number | null | undefined) {
   );
 }
 
+const calculateDifferences = (
+  originalValue: number,
+  comparisonValue: number,
+) => {
+  const valueDifference = originalValue - comparisonValue;
+  let percentDifferenceNum;
+  if (!originalValue && !comparisonValue) {
+    percentDifferenceNum = 0;
+  } else if (!originalValue || !comparisonValue) {
+    percentDifferenceNum = originalValue ? 1 : -1;
+  } else {
+    percentDifferenceNum =
+      (originalValue - comparisonValue) / Math.abs(comparisonValue);
+  }
+  return { valueDifference, percentDifferenceNum };
+};
+
 const processComparisonTotals = (
   comparisonSuffix: string,
   totals?: DataRecord[],
@@ -149,23 +166,6 @@ const getComparisonColFormatter = (
   return formatter;
 };
 
-const calculateDifferences = (
-  originalValue: number,
-  comparisonValue: number,
-) => {
-  const valueDifference = originalValue - comparisonValue;
-  let percentDifferenceNum;
-  if (!originalValue && !comparisonValue) {
-    percentDifferenceNum = 0;
-  } else if (!originalValue || !comparisonValue) {
-    percentDifferenceNum = originalValue ? 1 : -1;
-  } else {
-    percentDifferenceNum =
-      (originalValue - comparisonValue) / Math.abs(comparisonValue);
-  }
-  return { valueDifference, percentDifferenceNum };
-};
-
 const processComparisonDataRecords = memoizeOne(
   function processComparisonDataRecords(
     originalData: DataRecord[] | undefined,
@@ -471,6 +471,7 @@ const transformProps = (
     filterState,
     hooks: { setDataMask = () => {} },
     emitCrossFilters,
+    theme,
   } = chartProps;
 
   const {
@@ -494,6 +495,36 @@ const transformProps = (
 
   const allowRearrangeColumns = true;
 
+  // Calculate time comparison settings early since they're used in multiple places
+  const isUsingTimeComparison =
+    !isEmpty(time_compare) &&
+    queryMode === QueryMode.Aggregate &&
+    comparison_type === ComparisonType.Values &&
+    isFeatureEnabled(FeatureFlag.TableV2TimeComparisonEnabled);
+
+  const nonCustomNorInheritShifts = ensureIsArray(formData.time_compare).filter(
+    (shift: string) => shift !== 'custom' && shift !== 'inherit',
+  );
+  const customOrInheritShifts = ensureIsArray(formData.time_compare).filter(
+    (shift: string) => shift === 'custom' || shift === 'inherit',
+  );
+
+  let timeOffsets: string[] = [];
+
+  if (isUsingTimeComparison && !isEmpty(nonCustomNorInheritShifts)) {
+    timeOffsets = nonCustomNorInheritShifts;
+  }
+
+  // Shifts for custom or inherit time comparison
+  if (isUsingTimeComparison && !isEmpty(customOrInheritShifts)) {
+    if (customOrInheritShifts.includes('custom')) {
+      timeOffsets = timeOffsets.concat([formData.start_date_offset]);
+    }
+    if (customOrInheritShifts.includes('inherit')) {
+      timeOffsets = timeOffsets.concat(['inherit']);
+    }
+  }
+
   const calculateBasicStyle = (
     percentDifferenceNum: number,
     colorOption: ColorSchemeEnum,
@@ -606,12 +637,6 @@ const transformProps = (
       : undefined;
   };
 
-  const isUsingTimeComparison =
-    !isEmpty(time_compare) &&
-    queryMode === QueryMode.Aggregate &&
-    comparison_type === ComparisonType.Values &&
-    isFeatureEnabled(FeatureFlag.TableV2TimeComparisonEnabled);
-
   let hasServerPageLengthChanged = false;
 
   const pageLengthFromMap = serverPageLengthMap.get(slice_id);
@@ -624,28 +649,6 @@ const transformProps = (
 
   const timeGrain = extractTimegrain(formData);
 
-  const nonCustomNorInheritShifts = ensureIsArray(formData.time_compare).filter(
-    (shift: string) => shift !== 'custom' && shift !== 'inherit',
-  );
-  const customOrInheritShifts = ensureIsArray(formData.time_compare).filter(
-    (shift: string) => shift === 'custom' || shift === 'inherit',
-  );
-
-  let timeOffsets: string[] = [];
-
-  if (isUsingTimeComparison && !isEmpty(nonCustomNorInheritShifts)) {
-    timeOffsets = nonCustomNorInheritShifts;
-  }
-
-  // Shifts for custom or inherit time comparison
-  if (isUsingTimeComparison && !isEmpty(customOrInheritShifts)) {
-    if (customOrInheritShifts.includes('custom')) {
-      timeOffsets = timeOffsets.concat([formData.start_date_offset]);
-    }
-    if (customOrInheritShifts.includes('inherit')) {
-      timeOffsets = timeOffsets.concat(['inherit']);
-    }
-  }
   const comparisonSuffix = isUsingTimeComparison
     ? ensureIsArray(timeOffsets)[0]
     : '';
@@ -685,7 +688,7 @@ const transformProps = (
   const basicColorFormatters =
     comparisonColorEnabled && getBasicColorFormatter(baseQuery?.data, columns);
   const columnColorFormatters =
-    getColorFormatters(conditionalFormatting, passedData) ?? [];
+    getColorFormatters(conditionalFormatting, passedData, theme) ?? [];
 
   const basicColorColumnFormatters = getBasicColorFormatterForColumn(
     baseQuery?.data,