test(big-number): add regression test for null colorPicker in transformProps

Adds BRAND_COLOR to the @superset-ui/core mock and a test verifying
that transformProps does not crash when colorPicker is null, and that
mainColor is undefined (so the ?? BRAND_COLOR fallback takes effect).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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();
+  });
 });

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,