From a7aa854968abaf2c27ec68f4f21dc1a7b333c484 Mon Sep 17 00:00:00 2001
From: Evan Rusackas <evan@preset.io>
Date: Mon, 11 May 2026 09:54:08 -0700
Subject: [PATCH] fix(big-number): guard against null colorPicker in
 transformProps (#39110)

Co-authored-by: Amin Ghadersohi <amin.ghadersohi@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../transformProps.test.ts                    | 27 +++++++++++++++++++
 .../BigNumberWithTrendline/transformProps.ts  | 10 ++++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts
index c769ad97165..6ce84f5ffe4 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.test.ts
@@ -56,6 +56,7 @@ jest.mock('@superset-ui/chart-controls', () => ({
 }));
 
 jest.mock('@superset-ui/core', () => ({
+  BRAND_COLOR: '#00A699',
   GenericDataType: { Temporal: 2, String: 1 },
   extractTimegrain: jest.fn(() => 'P1D'),
   getMetricLabel: jest.fn(metric => metric),
@@ -280,4 +281,30 @@ describe('BigNumberWithTrendline transformProps', () => {
     expect(result.bigNumber).toBe(360);
     expect(result.subheader).toBe('50.0% WoW');
   });
+
+  test('should not crash and should return undefined mainColor when colorPicker is null', () => {
+    const chartProps = {
+      width: 400,
+      height: 300,
+      queriesData: [
+        {
+          data: [
+            { __timestamp: 1, value: 100 },
+          ] as unknown as BigNumberDatum[],
+          colnames: ['__timestamp', 'value'],
+          coltypes: ['TEMPORAL', 'NUMERIC'],
+        },
+      ],
+      formData: { ...baseFormData, colorPicker: null },
+      rawFormData: baseRawFormData,
+      hooks: baseHooks,
+      datasource: baseDatasource,
+      theme: { colors: { grayscale: { light5: '#eee' } } },
+    };
+
+    const result = transformProps(
+      chartProps as unknown as BigNumberWithTrendlineChartProps,
+    );
+    expect(result.mainColor).toBeUndefined();
+  });
 });
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
index 0010a19f8c3..23708f7a41c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -18,6 +18,7 @@
  */
 import { t } from '@apache-superset/core/translation';
 import {
+  BRAND_COLOR,
   extractTimegrain,
   getNumberFormatter,
   NumberFormats,
@@ -140,8 +141,9 @@ export default function transformProps(
   const compareLag = Number(compareLag_) || 0;
   let formattedSubheader = subheader;
 
-  const { r, g, b } = colorPicker;
-  const mainColor = `rgb(${r}, ${g}, ${b})`;
+  const mainColor = colorPicker
+    ? `rgb(${colorPicker.r}, ${colorPicker.g}, ${colorPicker.b})`
+    : undefined;
 
   const xAxisLabel = getXAxisLabel(rawFormData) as string;
   let trendLineData: TimeSeriesDatum[] | undefined;
@@ -290,12 +292,12 @@ export default function transformProps(
             symbol: 'circle',
             symbolSize: 10,
             showSymbol: false,
-            color: mainColor,
+            color: mainColor ?? BRAND_COLOR,
             areaStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
                 {
                   offset: 0,
-                  color: mainColor,
+                  color: mainColor ?? BRAND_COLOR,
                 },
                 {
                   offset: 1,