fix color range for null values in table (#29410)

* fix color range for null values in table

* add another test case

frontend/src/metabase/visualizations/lib/table_format.js

@@ -156,16 +156,16 @@ export function compileFormatter(
 
 // NOTE: implement `extent` like this rather than using d3.extent since rows may
 // be a Java `List` rather than a JavaScript Array when used in Pulse formatting
-function extent(rows, colIndex) {
+export function extent(rows, colIndex) {
   let min = Infinity;
   let max = -Infinity;
   const length = rows.length;
   for (let i = 0; i < length; i++) {
     const value = rows[i][colIndex];
-    if (value < min) {
+    if (value != null && value < min) {
       min = value;
     }
-    if (value > max) {
+    if (value != null && value > max) {
       max = value;
     }
   }

frontend/test/metabase/visualizations/lib/table_format.unit.spec.js

@@ -3,6 +3,7 @@ import {
   canCompareSubstrings,
   OPERATOR_FORMATTER_FACTORIES,
   compileFormatter,
+  extent,
 } from "metabase/visualizations/lib/table_format";
 
 describe("compileFormatter", () => {
@@ -139,3 +140,21 @@ describe("canCompareSubstrings", () => {
     expect(canCompareSubstrings("", "")).toBe(false);
   });
 });
+
+describe("extent", () => {
+  it("should correctly compute the extents for each column", () => {
+    const rows = [
+      [-12, 4, 8],
+      [0, -3, 2],
+      [-1, 0, 17],
+    ];
+
+    expect(extent(rows, 0)).toEqual([-12, 0]);
+    expect(extent(rows, 1)).toEqual([-3, 4]);
+    expect(extent(rows, 2)).toEqual([2, 17]);
+  });
+
+  it("should ignore null and undefined values", () => {
+    expect(extent([[null], [1], [undefined]], 0)).toEqual([1, 1]);
+  });
+});