fix pie chart tooltip (#42465)

* fix pie chart tooltip

* add unit test

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

@@ -360,6 +360,7 @@ export default class PieChart extends Component {
         : {
             key: t`Other`,
             value: otherTotal,
+            displayValue: otherTotal,
             percentage: otherTotal / total,
             color: color("text-light"),
           };
@@ -443,8 +444,10 @@ export default class PieChart extends Component {
           event: event && event.nativeEvent,
           stackedTooltipModel: getTooltipModel(
             others.map(o => ({
+              ...o,
               key: formatDimension(o.key, false),
               value: o.displayValue,
+              color: undefined,
             })),
             null,
             getFriendlyName(cols[dimensionIndex]),

frontend/src/metabase/visualizations/visualizations/PieChart/utils.unit.spec.ts

@@ -19,6 +19,33 @@ const slices = [
   },
 ];
 
+const slicesWithOther = [
+  {
+    key: "foo",
+    value: 100,
+    displayValue: 100,
+    percentage: 0.28571429,
+    rowIndex: 0,
+    color: "green",
+  },
+  {
+    key: "bar",
+    value: 200,
+    displayValue: 200,
+    percentage: 0.57142857,
+    rowIndex: 1,
+    color: "red",
+  },
+  {
+    key: "Other",
+    value: 50,
+    displayValue: 50,
+    percentage: 0.14285714,
+    rowIndex: 2,
+    color: "grey",
+  },
+];
+
 const stateSlices = [
   {
     key: "AK",
@@ -146,6 +173,20 @@ describe("utils", () => {
       expect(showPercentages).toBe(true);
     });
 
+    it("should return a `value` for the `other` slice #42458", () => {
+      const { bodyRows } = getTooltipModel(
+        slicesWithOther,
+        0,
+        dimensionColumnName,
+        dimensionFormatter,
+        metricFormatter,
+      );
+
+      expect(bodyRows?.[bodyRows.length - 1].value).toBe(
+        slicesWithOther[slicesWithOther.length - 1].displayValue,
+      );
+    });
+
     it("is not affected by minimum slice percentage setting #32430 #33342", () => {
       const smallSliceIndex = stateSlices.length - 1;
       const { headerRows } = getTooltipModel(