fix aggressive legend truncation (#48207)

* fix aggressive legend truncation

* add e2e test

* revert LegendVertical changes

* update legendTitles calculation in PieChart

* restore size prop in LegendVertical

* fix e2e test

e2e/test/scenarios/visualizations-charts/legend.cy.spec.js

@@ -344,14 +344,14 @@ describe("scenarios > visualizations > legend", () => {
       pieSlices().should("have.length", 3);
       cy.findByText("18,760").should("not.exist");
       cy.findByText("17,418").should("exist");
-      getPieChartLegendItemPercentage("TX").should("not.exist");
+      getPieChartLegendItemPercentage("TX").should("have.text", "");
 
       hideSeries(3); // "Other" slice
 
       pieSlices().should("have.length", 2);
       cy.findByText("17,418").should("not.exist");
       cy.findByText("1,660").should("exist");
-      getPieChartLegendItemPercentage("Other").should("not.exist");
+      getPieChartLegendItemPercentage("Other").should("have.text", "");
       getPieChartLegendItemPercentage("MT").should("have.text", "52.5%");
       getPieChartLegendItemPercentage("MN").should("have.text", "47.5%");
 

e2e/test/scenarios/visualizations-charts/pie_chart.cy.spec.js

@@ -77,6 +77,30 @@ describe("scenarios > visualizations > pie chart", () => {
     ].map(args => checkLegendItemAriaCurrent(args[0], args[1]));
   });
 
+  it("should not truncate legend titles when enabling percentages (metabase#48207)", () => {
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "pie",
+      visualization_settings: {
+        "pie.percent_visibility": "off",
+      },
+    });
+
+    cy.findByTestId("viz-settings-button").click();
+
+    leftSidebar().within(() => {
+      cy.findByText("Display").click();
+      cy.findByText("In legend").click();
+    });
+
+    cy.findByTestId("chart-legend").within(() => {
+      cy.findByText("Widget").then(([element]) => {
+        // When text is truncated, offsetWidth will be less than scrollWidth
+        expect(element.offsetWidth).to.eq(element.scrollWidth);
+      });
+    });
+  });
+
   it("should instantly toggle the total after changing the setting", () => {
     visitQuestionAdhoc({
       dataset_query: testQuery,

frontend/src/metabase/visualizations/visualizations/PieChart/PieChart.tsx

@@ -106,17 +106,19 @@ export function PieChart(props: VisualizationProps) {
       const label = s.data.name;
 
       // Hidden slices don't have a percentage
-      if (s.data.normalizedPercentage === 0) {
-        return label;
-      }
+      const sliceHidden = s.data.normalizedPercentage === 0;
+      const percentDisabled =
+        settings["pie.percent_visibility"] !== "legend" &&
+        settings["pie.percent_visibility"] !== "both";
 
-      const percent =
-        settings["pie.percent_visibility"] === "legend" ||
-        settings["pie.percent_visibility"] === "both"
-          ? formatters.formatPercent(s.data.normalizedPercentage, "legend")
-          : undefined;
+      if (sliceHidden || percentDisabled) {
+        return [label];
+      }
 
-      return [label, percent];
+      return [
+        label,
+        formatters.formatPercent(s.data.normalizedPercentage, "legend"),
+      ];
     });
 
   const hiddenSlicesLegendIndices = chartModel.slices