(superset) branch master updated: fix(world-map): preserve bubbles and exclude only null metrics from color scale (#39926)

[kg...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

kgabryje pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 7275116f4cd fix(world-map): preserve bubbles and exclude only null metrics from color scale (#39926)
7275116f4cd is described below

commit 7275116f4cd4fe16a6203a5e2a556f7d4df55c66
Author: Jean Massucatto <ma...@gmail.com>
AuthorDate: Tue Jun 2 13:05:49 2026 -0300

    fix(world-map): preserve bubbles and exclude only null metrics from color scale (#39926)
---
 .../legacy-plugin-chart-world-map/src/WorldMap.ts  |  5 +-
 .../test/WorldMap.test.ts                          | 57 ++++++++++++++++++++--
 2 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.ts
index 9388c379dd1..663976185d6 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.ts
@@ -150,7 +150,8 @@ function WorldMap(element: HTMLElement, props: WorldMapProps): void {
       fillColor: colorFn(d.name, sliceId),
     }));
   } else {
-    const rawExtents = d3Extent(filteredData, d => d.m1);
+    const colorableData = filteredData.filter(d => d.m1 != null);
+    const rawExtents = d3Extent(colorableData, d => d.m1);
     const extents: [number, number] =
       rawExtents[0] != null && rawExtents[1] != null
         ? [rawExtents[0], rawExtents[1]]
@@ -163,7 +164,7 @@ function WorldMap(element: HTMLElement, props: WorldMapProps): void {
     processedData = filteredData.map(d => ({
       ...d,
       radius: radiusScale(Math.sqrt(d.m2)),
-      fillColor: colorFn(d.m1) ?? theme.colorBorder,
+      fillColor: d.m1 != null ? colorFn(d.m1) ?? theme.colorBorder : theme.colorBorder,
     }));
   }
 
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/test/WorldMap.test.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/test/WorldMap.test.ts
index 4476bcefe85..641391578a3 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/test/WorldMap.test.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/test/WorldMap.test.ts
@@ -511,7 +511,7 @@ test('assigns fill colors from sequential scheme when colorBy is metric', () =>
   expect(data.CAN.fillColor).toMatch(/^(#|rgb)/);
 });
 
-test('falls back to theme.colorBorder when metric values are null', () => {
+test('renders countries with null metric as no-data fill when colorBy is metric', () => {
   WorldMap(container, {
     ...baseProps,
     colorBy: ColorBy.Metric,
@@ -519,17 +519,66 @@ test('falls back to theme.colorBorder when metric values are null', () => {
       {
         country: 'USA',
         name: 'United States',
+        m1: 100,
+        m2: 200,
+        code: 'US',
+        latitude: 37.0902,
+        longitude: -95.7129,
+      },
+      {
+        country: 'CAN',
+        name: 'Canada',
         m1: null as unknown as number,
+        m2: 100,
+        code: 'CA',
+        latitude: 56.1304,
+        longitude: -106.3468,
+      },
+    ],
+  });
+
+  const data = lastDatamapConfig?.data as Record<
+    string,
+    WorldMapDataEntry & { fillColor: string }
+  >;
+  expect(data).toHaveProperty('USA');
+  expect(data).toHaveProperty('CAN');
+  expect(data.CAN.fillColor).toBe('#e0e0e0');
+});
+
+test('renders countries with zero metric using the color scale when colorBy is metric', () => {
+  WorldMap(container, {
+    ...baseProps,
+    colorBy: ColorBy.Metric,
+    data: [
+      {
+        country: 'USA',
+        name: 'United States',
+        m1: 100,
         m2: 200,
         code: 'US',
         latitude: 37.0902,
         longitude: -95.7129,
       },
+      {
+        country: 'MEX',
+        name: 'Mexico',
+        m1: 0,
+        m2: 50,
+        code: 'MX',
+        latitude: 23.6345,
+        longitude: -102.5528,
+      },
     ],
-  } as any);
+  });
 
-  const data = lastDatamapConfig?.data as Record<string, { fillColor: string }>;
-  expect(data.USA.fillColor).toBe('#e0e0e0');
+  const data = lastDatamapConfig?.data as Record<
+    string,
+    WorldMapDataEntry & { fillColor: string }
+  >;
+  expect(data).toHaveProperty('MEX');
+  expect(data.MEX.fillColor).toMatch(/^(#|rgb)/);
+  expect(data.MEX.fillColor).not.toBe('#e0e0e0');
 });
 
 test('does not throw with empty data and metric coloring', () => {