fix pie chart crashes when small (#49038) (#49044)

Co-authored-by: Aleksandr Lesnenko <alxnddr@users.noreply.github.com>

frontend/src/metabase/visualizations/echarts/pie/util/label.ts

@@ -85,21 +85,29 @@ const calcMaxRectLengthWithinDonut = (
   innerRadius: number,
   outerRadius: number,
 ): number => {
-  const [topLeft, topRight] = getDonutHorizontalChordCoords(
-    topY,
-    innerRadius,
-    outerRadius,
-  );
-  const [bottomLeft, bottomRight] = getDonutHorizontalChordCoords(
-    bottomY,
-    innerRadius,
-    outerRadius,
-  );
+  try {
+    const [topLeft, topRight] = getDonutHorizontalChordCoords(
+      topY,
+      innerRadius,
+      outerRadius,
+    );
+    const [bottomLeft, bottomRight] = getDonutHorizontalChordCoords(
+      bottomY,
+      innerRadius,
+      outerRadius,
+    );
 
-  const leftX = Math.max(topLeft[0], bottomLeft[0]);
-  const rightX = Math.min(topRight[0], bottomRight[0]);
+    const leftX = Math.max(topLeft[0], bottomLeft[0]);
+    const rightX = Math.min(topRight[0], bottomRight[0]);
 
-  return rightX - leftX;
+    return rightX - leftX;
+  } catch {
+    console.warn(
+      `Could not calculate max rectangle length for innerRadius=${innerRadius} outerRadius=${outerRadius} topY=${topY} bottomY=${bottomY}`,
+    );
+
+    return 0;
+  }
 };
 
 /**
@@ -129,7 +137,6 @@ const isNearXAxis = (
  * @param fontSize - The font size of the label.
  * @param labelPosition - The position of the label, either "horizontal" or "radial".
  * @returns The available length for the label.
- * @throws Error if the outer radius is not bigger than the inner radius.
  */
 export const calcAvailableDonutSliceLabelLength = (
   innerRadius: number,
@@ -139,13 +146,19 @@ export const calcAvailableDonutSliceLabelLength = (
   fontSize: number,
   labelPosition: "horizontal" | "radial",
 ): number => {
+  const donutThickness = outerRadius - innerRadius;
+  if (donutThickness <= 2 * fontSize) {
+    return 0;
+  }
+
   if (innerRadius >= outerRadius) {
-    throw new Error(
+    console.warn(
       `Outer radius must be bigger than inner. Outer: ${outerRadius} inner: ${innerRadius}`,
     );
+
+    return 0;
   }
 
-  const donutThickness = outerRadius - innerRadius;
   const arcAngle = endAngle - startAngle;
   const innerCordLength = calcChordLength(innerRadius, arcAngle);
 

frontend/src/metabase/visualizations/echarts/pie/util/label.unit.spec.ts

@@ -76,8 +76,8 @@ describe("pie chart label utilities", () => {
   });
 
   describe("calcAvailableDonutSliceLabelLength", () => {
-    it("throws error when outer radius is not bigger than inner radius", () => {
-      expect(() =>
+    it("returns 0 when outer radius is not bigger than inner radius", () => {
+      expect(
         calcAvailableDonutSliceLabelLength(
           5,
           5,
@@ -86,9 +86,9 @@ describe("pie chart label utilities", () => {
           12,
           "horizontal",
         ),
-      ).toThrow("Outer radius must be bigger than inner");
+      ).toBe(0);
 
-      expect(() =>
+      expect(
         calcAvailableDonutSliceLabelLength(
           10,
           5,
@@ -97,8 +97,24 @@ describe("pie chart label utilities", () => {
           12,
           "horizontal",
         ),
-      ).toThrow("Outer radius must be bigger than inner");
-    });
+      ).toBe(0);
+    });
+
+    it.each([50, 100])(
+      "returns 0 when donut thickness is less than the double of the label font size",
+      fontSize => {
+        expect(
+          calcAvailableDonutSliceLabelLength(
+            50,
+            100,
+            0,
+            Math.PI / 2,
+            fontSize,
+            "horizontal",
+          ),
+        ).toBe(0);
+      },
+    );
 
     it("calculates radial label length correctly", () => {
       const result = calcAvailableDonutSliceLabelLength(