Consistently handle infinite and empty values in scalar visualizations (#29805)

* update and test number display for gauge viz

* update and test numeric display for progress viz

* display null in scalar viz

frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx

@@ -3,6 +3,7 @@
  */
 /* eslint-disable react/prop-types */
 import React, { useMemo } from "react";
+import { t } from "ttag";
 
 import Icon from "metabase/components/Icon";
 import Tooltip from "metabase/core/components/Tooltip";
@@ -53,7 +54,7 @@ const ScalarValue = ({
       fontSize={fontSize}
       data-testid="scalar-value"
     >
-      {value}
+      {value ?? t`null`}
     </ScalarValueWrapper>
   );
 };

frontend/src/metabase/visualizations/visualizations/Gauge.jsx → frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx

@@ -14,6 +14,7 @@ import { columnSettings } from "metabase/visualizations/lib/settings/column";
 import ChartSettingGaugeSegments from "metabase/visualizations/components/settings/ChartSettingGaugeSegments";
 import { isNumeric } from "metabase-lib/types/utils/isa";
 import { GaugeArcPath } from "./Gauge.styled";
+import { getValue } from "./utils";
 
 const MAX_WIDTH = 500;
 const PADDING_BOTTOM = 10;
@@ -207,7 +208,7 @@ export default class Gauge extends Component {
       ])
       .clamp(true);
 
-    const value = rows[0][0] || 0;
+    const value = getValue(rows);
     const column = cols[0];
 
     const valuePosition = (value, distance) => {

frontend/src/metabase/visualizations/visualizations/Gauge/index.js

+export { default } from "./Gauge";

frontend/src/metabase/visualizations/visualizations/Gauge/utils.ts

+export const getValue = (rows: unknown[][]) => {
+  const rawValue = rows[0] && rows[0][0];
+
+  if (rawValue === "Infinity") {
+    return Infinity;
+  }
+
+  if (typeof rawValue !== "number") {
+    return 0;
+  }
+
+  return rawValue;
+};

frontend/src/metabase/visualizations/visualizations/Gauge/utils.unit.spec.ts

+import { getValue } from "./utils";
+
+describe("Visualizations > Gauge > utils", () => {
+  const valueTestCases = [
+    [[[null]], 0],
+    [[[undefined]], 0],
+    [[["foo"]], 0],
+    [[[""]], 0],
+    [[[0]], 0],
+    [[[1]], 1],
+    [
+      [
+        [1, 2, 3],
+        [4, 5, 6],
+      ],
+      1,
+    ],
+    [[3], 0],
+    [[["Infinity"]], Infinity],
+  ];
+
+  valueTestCases.forEach(([input, output]) => {
+    it(`should return ${output} for ${JSON.stringify(input)}`, () => {
+      expect(getValue(input as unknown[][])).toEqual(output);
+    });
+  });
+});

frontend/src/metabase/visualizations/visualizations/Progress.jsx → frontend/src/metabase/visualizations/visualizations/Progress/Progress.jsx

@@ -13,6 +13,8 @@ import { color } from "metabase/lib/colors";
 import { columnSettings } from "metabase/visualizations/lib/settings/column";
 import { isNumeric } from "metabase-lib/types/utils/isa";
 
+import { getValue } from "./utils";
+
 const BORDER_RADIUS = 5;
 const MAX_BAR_HEIGHT = 65;
 
@@ -136,7 +138,8 @@ export default class Progress extends Component {
       onVisualizationClick,
       visualizationIsClickable,
     } = this.props;
-    const value = rows[0] && typeof rows[0][0] === "number" ? rows[0][0] : 0;
+
+    const value = getValue(rows);
     const column = cols[0];
     const goal = settings["progress.goal"] || 0;
 

frontend/src/metabase/visualizations/visualizations/Progress/index.js

+export { default } from "./Progress";

frontend/src/metabase/visualizations/visualizations/Progress/utils.ts

+export const getValue = (rows: unknown[][]) => {
+  const rawValue = rows[0] && rows[0][0];
+
+  if (rawValue === "Infinity") {
+    return Infinity;
+  }
+
+  if (typeof rawValue !== "number") {
+    return 0;
+  }
+
+  return rawValue;
+};

frontend/src/metabase/visualizations/visualizations/Progress/utils.unit.spec.ts

+import { getValue } from "./utils";
+
+describe("Visualizations > Progress > utils", () => {
+  const valueTestCases = [
+    [[[null]], 0],
+    [[[undefined]], 0],
+    [[["foo"]], 0],
+    [[[""]], 0],
+    [[[0]], 0],
+    [[[1]], 1],
+    [
+      [
+        [1, 2, 3],
+        [4, 5, 6],
+      ],
+      1,
+    ],
+    [[3], 0],
+    [[["Infinity"]], Infinity],
+  ];
+
+  valueTestCases.forEach(([input, output]) => {
+    it(`should return ${output} for ${JSON.stringify(input)}`, () => {
+      expect(getValue(input as unknown[][])).toEqual(output);
+    });
+  });
+});