diff --git a/frontend/src/metabase/visualizations/visualizations/PieChart.jsx b/frontend/src/metabase/visualizations/visualizations/PieChart.jsx index decc4409e0c37aedd0935827de5a4e3e69c8f594..29830ce8b2c32d450f1060d022e19ffa511d4363 100644 --- a/frontend/src/metabase/visualizations/visualizations/PieChart.jsx +++ b/frontend/src/metabase/visualizations/visualizations/PieChart.jsx @@ -284,20 +284,19 @@ export default class PieChart extends Component { slices.map(s => s.percentage), { style: "percent", maximumSignificantDigits: 3 }, ); - const formatPercent = (percent, jsx = true) => + const formatPercent = percent => formatValue(percent, { - ...settings.column(cols[metricIndex]), - jsx, + column: cols[metricIndex], + jsx: true, 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"] - ? formatPercent(slice.percentage, true) + ? formatPercent(slice.percentage) : undefined, ]); const legendColors = slices.map(slice => slice.color); diff --git a/frontend/test/metabase/visualizations/components/Visualization-pie.unit.spec.js b/frontend/test/metabase/visualizations/components/Visualization-pie.unit.spec.js index cedfd8c9ca912b5a6686c3b831cc4a2097d9f244..333c2caa0e137b6c128b84580eef5594d32f451a 100644 --- a/frontend/test/metabase/visualizations/components/Visualization-pie.unit.spec.js +++ b/frontend/test/metabase/visualizations/components/Visualization-pie.unit.spec.js @@ -41,6 +41,23 @@ describe("pie chart", () => { getAllByText("1%"); }); + it("should not use column formatting in the legend", () => { + const cols = [ + StringColumn({ name: "name" }), + NumberColumn({ name: "count" }), + ]; + const column_settings = { '["name","count"]': { scale: 123 } }; + const series = [ + { + card: { display: "pie", visualization_settings: { column_settings } }, + data: { rows: [["foo", 1]], cols }, + }, + ]; + const { getAllByText } = render(<Visualization rawSeries={series} />); + getAllByText("100%"); // shouldn't multiply legend percent by `scale` + getAllByText("123"); // should multiply the count in the center by `scale` + }); + it("should show a condensed tooltip for squashed slices", () => { const rows = [["foo", 0.5], ["bar", 0.49], ["baz", 0.002], ["qux", 0.008]]; const { container, getAllByText, queryAllByText } = render(