fix pie chart total graphic not being removed (#46349)

* fix pie chart total graphic not being removed

* add e2e test

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

@@ -6,6 +6,7 @@ import {
   popover,
   tableHeaderClick,
   pieSlices,
+  leftSidebar,
 } from "e2e/support/helpers";
 
 const { PRODUCTS, PRODUCTS_ID } = SAMPLE_DATABASE;
@@ -58,6 +59,32 @@ describe("scenarios > visualizations > pie chart", () => {
       ["Widget", "false"],
     ].map(args => checkLegendItemAriaCurrent(args[0], args[1]));
   });
+
+  it("should instantly toggle the total after changing the setting", () => {
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "pie",
+    });
+
+    cy.findByTestId("viz-settings-button").click();
+
+    leftSidebar().within(() => {
+      cy.findByText("Display").click();
+      cy.findByText("Show total").click();
+    });
+
+    cy.findByTestId("query-visualization-root").within(() => {
+      cy.findByText("TOTAL").should("not.exist");
+    });
+
+    leftSidebar().within(() => {
+      cy.findByText("Show total").click();
+    });
+
+    cy.findByTestId("query-visualization-root").within(() => {
+      cy.findByText("TOTAL").should("be.visible");
+    });
+  });
 });
 
 function ensurePieChartRendered(rows, totalValue) {

frontend/src/metabase/visualizations/echarts/pie/option.ts

@@ -25,27 +25,33 @@ function getSliceByKey(key: PieSliceData["key"], slices: PieSlice[]) {
 }
 
 function getTotalGraphicOption(
+  settings: ComputedVisualizationSettings,
   chartModel: PieChartModel,
   formatters: PieChartFormatters,
   renderingContext: RenderingContext,
   hoveredIndex: number | undefined,
   outerRadius: number,
 ) {
+  let valueText = "";
+  let labelText = "";
+
   // Don't display any text if there isn't enough width
-  if (outerRadius * 2 < DIMENSIONS.totalDiameterThreshold) {
-    return undefined;
+  const hasSufficientWidth =
+    outerRadius * 2 >= DIMENSIONS.totalDiameterThreshold;
+
+  if (hasSufficientWidth && settings["pie.show_total"]) {
+    valueText = formatters.formatMetric(
+      hoveredIndex != null
+        ? chartModel.slices[hoveredIndex].data.displayValue
+        : chartModel.total,
+    );
+    labelText =
+      hoveredIndex != null
+        ? formatters
+            .formatDimension(chartModel.slices[hoveredIndex].data.key)
+            .toUpperCase()
+        : TOTAL_TEXT;
   }
-  const valueText = formatters.formatMetric(
-    hoveredIndex != null
-      ? chartModel.slices[hoveredIndex].data.displayValue
-      : chartModel.total,
-  );
-  const labelText =
-    hoveredIndex != null
-      ? formatters
-          .formatDimension(chartModel.slices[hoveredIndex].data.key)
-          .toUpperCase()
-      : TOTAL_TEXT;
 
   return {
     type: "group",
@@ -150,15 +156,14 @@ export function getPieChartOption(
   );
 
   // "Show total" setting
-  const graphicOption = settings["pie.show_total"]
-    ? getTotalGraphicOption(
-        chartModel,
-        formatters,
-        renderingContext,
-        hoveredIndex,
-        outerRadius,
-      )
-    : undefined;
+  const graphicOption = getTotalGraphicOption(
+    settings,
+    chartModel,
+    formatters,
+    renderingContext,
+    hoveredIndex,
+    outerRadius,
+  );
 
   // "Show percentages: On the chart" setting
   const formatSlicePercent = (key: PieSliceData["key"]) => {