fix(color): ensure createLinearScale always returns a color for null/NaN input

superset-frontend/packages/superset-ui-core/src/color/SequentialScheme.ts

@@ -51,7 +51,10 @@ export default class SequentialScheme extends ColorScheme {
    * want to interpolate range to have the same number of elements with domain instead.
    */
   createLinearScale(domain: number[] = [0, 1], modifyRange = false) {
-    const scale = scaleLinear<string>().interpolate(interpolateHcl).clamp(true);
+    const scale = scaleLinear<string>()
+      .interpolate(interpolateHcl)
+      .clamp(true)
+      .unknown(this.colors[0]);
 
     return modifyRange || domain.length === this.colors.length
       ? scale.domain(domain).range(this.getColors(domain.length))

superset-frontend/packages/superset-ui-core/test/color/SequentialScheme.test.ts

@@ -61,6 +61,20 @@ describe('SequentialScheme', () => {
         expect(scale(2)).toEqual('rgb(0, 0, 0)');
       });
     });
+    describe('null and NaN inputs', () => {
+      test('returns first color for null input', () => {
+        const scale = scheme.createLinearScale([0, 100]);
+        expect(scale(null as unknown as number)).toEqual('#fff');
+      });
+      test('returns first color for undefined input', () => {
+        const scale = scheme.createLinearScale([0, 100]);
+        expect(scale(undefined as unknown as number)).toEqual('#fff');
+      });
+      test('returns first color for NaN input', () => {
+        const scale = scheme.createLinearScale([0, 100]);
+        expect(scale(NaN)).toEqual('#fff');
+      });
+    });
     describe('modifyRange', () => {
       const scheme3 = new SequentialScheme({
         id: 'test-scheme3',

superset-frontend/plugins/legacy-plugin-chart-world-map/test/WorldMap.test.ts

@@ -506,12 +506,11 @@ test('assigns fill colors from sequential scheme when colorBy is metric', () =>
     name: 'United States',
     m1: 100,
   });
-  // fillColor should be a valid color string from the sequential scale
   expect(data.USA.fillColor).toMatch(/^(#|rgb)/);
   expect(data.CAN.fillColor).toMatch(/^(#|rgb)/);
 });
 
-test('falls back to theme.colorBorder when metric values are null', () => {
+test('returns a valid color for null metric values', () => {
   WorldMap(container, {
     ...baseProps,
     colorBy: ColorBy.Metric,
@@ -529,7 +528,7 @@ test('falls back to theme.colorBorder when metric values are null', () => {
   } as any);
 
   const data = lastDatamapConfig?.data as Record<string, { fillColor: string }>;
-  expect(data.USA.fillColor).toBe('#e0e0e0');
+  expect(data.USA.fillColor).toMatch(/^(#|rgb)/);
 });
 
 test('does not throw with empty data and metric coloring', () => {