Use pie slices to compute number of decimals (#10391)

frontend/src/metabase/visualizations/visualizations/PieChart.jsx

@@ -214,19 +214,6 @@ export default class PieChart extends Component {
       });
 
     const total: number = rows.reduce((sum, row) => sum + row[metricIndex], 0);
-    const decimals = computeMaxDecimalsForValues(
-      rows.map(row => row[metricIndex] / total),
-      { style: "percent", maximumSignificantDigits: 3 },
-    );
-    const formatPercent = (percent, jsx = true) =>
-      formatValue(percent, {
-        ...settings.column(cols[metricIndex]),
-        jsx,
-        majorWidth: 0,
-        number_style: "percent",
-        _numberFormatter: undefined, // remove the passed formatter
-        decimals,
-      });
 
     const showPercentInTooltip =
       !PERCENT_REGEX.test(cols[metricIndex].name) &&
@@ -266,6 +253,20 @@ export default class PieChart extends Component {
       slices.push(otherSlice);
     }
 
+    const decimals = computeMaxDecimalsForValues(
+      slices.map(s => s.percentage),
+      { style: "percent", maximumSignificantDigits: 3 },
+    );
+    const formatPercent = (percent, jsx = true) =>
+      formatValue(percent, {
+        ...settings.column(cols[metricIndex]),
+        jsx,
+        majorWidth: 0,
+        number_style: "percent",
+        _numberFormatter: undefined, // remove the passed formatter
+        decimals,
+      });
+
     const legendTitles = slices.map(slice => [
       slice.key === "Other" ? slice.key : formatDimension(slice.key, true),
       settings["pie.show_legend_perecent"]

frontend/test/metabase/visualizations/components/Visualization-pie.unit.spec.js

+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+
+import { NumberColumn, StringColumn } from "../__support__/visualizations";
+
+import Visualization from "metabase/visualizations/components/Visualization";
+
+const series = rows => {
+  const cols = [
+    StringColumn({ name: "Name" }),
+    NumberColumn({ name: "Count" }),
+  ];
+  return [{ card: { display: "pie" }, data: { rows, cols } }];
+};
+
+describe("pie chart", () => {
+  afterEach(cleanup);
+
+  it("should render correct percentages in legend", () => {
+    const rows = [["foo", 1], ["bar", 2], ["baz", 2]];
+    const { getByText, getAllByText } = render(
+      <Visualization rawSeries={series(rows)} />,
+    );
+    getByText("20%");
+    expect(getAllByText("40%").length).toBe(2);
+  });
+
+  it("should use a consistent number of decimals", () => {
+    const rows = [["foo", 0.5], ["bar", 0.499], ["baz", 0.001]];
+    const { getByText } = render(<Visualization rawSeries={series(rows)} />);
+    getByText("50.0%");
+    getByText("49.9%");
+    getByText("0.1%");
+  });
+
+  it("should squash small slices into 'Other'", () => {
+    const rows = [["foo", 0.5], ["bar", 0.49], ["baz", 0.002], ["qux", 0.008]];
+    const { getByText } = render(<Visualization rawSeries={series(rows)} />);
+    getByText("50%");
+    getByText("49%");
+    getByText("1%");
+  });
+});