Make the number formatting, global or otherwise, apply to percentages in pie charts (#14995)

* obey those number separator settings

* make it lint

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

@@ -288,6 +288,7 @@ export default class PieChart extends Component {
     const formatPercent = percent =>
       formatValue(percent, {
         column: cols[metricIndex],
+        number_separators: settings.column(cols[metricIndex]).number_separators,
         jsx: true,
         majorWidth: 0,
         number_style: "percent",

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

@@ -54,6 +54,22 @@ describe("pie chart", () => {
     getAllByText("123"); // should multiply the count in the center by `scale`
   });
 
+  it("should obey number separator settings", () => {
+    const cols = [
+      StringColumn({ name: "name" }),
+      NumberColumn({ name: "count" }),
+    ];
+    const column_settings = { '["name","count"]': { number_separators: ", " } };
+    const series = [
+      {
+        card: { display: "pie", visualization_settings: { column_settings } },
+        data: { rows: [["foo", 0.501], ["bar", 0.499]], cols },
+      },
+    ];
+    const { getAllByText } = render(<Visualization rawSeries={series} />);
+    getAllByText("50,1%");
+  });
+
   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(