Use correct series names from chart settings to be show in tooltips (#15435)

frontend/src/metabase/visualizations/lib/apply_tooltips.js

@@ -2,6 +2,7 @@
 
 import d3 from "d3";
 import moment from "moment";
+import { getIn } from "icepick";
 
 import { formatValue } from "metabase/lib/formatting";
 
@@ -23,7 +24,7 @@ export function getClickHoverObject(
     settings,
   },
 ) {
-  let { cols } = series[0].data;
+  let { cols } = series[seriesIndex].data;
   const { card } = series[seriesIndex];
 
   const isMultiseries = series.length > 1;
@@ -31,14 +32,14 @@ export function getClickHoverObject(
   const isBar = classList.includes("bar");
   const isSingleSeriesBar = isBar && !isMultiseries;
 
-  // always format the second column as the series name?
   function getColumnDisplayName(col) {
+    const title = getIn(settings, ["series_settings", col.name, "title"]);
     // don't replace with series title for breakout multiseries since the series title is shown in the breakout value
-    if (col === cols[1] && !isBreakoutMultiseries && seriesTitle) {
-      return seriesTitle;
-    } else {
-      return getFriendlyName(col);
+    if (!isBreakoutMultiseries && title) {
+      return title;
     }
+
+    return getFriendlyName(col);
   }
 
   let data = [];

frontend/test/metabase/scenarios/visualizations/scatter.cy.spec.js

+import { restore, visitQuestionAdhoc, popover } from "__support__/cypress";
+import { SAMPLE_DATASET } from "__support__/cypress_sample_dataset";
+
+const { ORDERS, ORDERS_ID } = SAMPLE_DATASET;
+
+const testQuery = {
+  database: 1,
+  query: {
+    "source-table": ORDERS_ID,
+    aggregation: [["count"], ["distinct", ["field-id", ORDERS.PRODUCT_ID]]],
+    breakout: [["datetime-field", ["field-id", ORDERS.CREATED_AT], "month"]],
+  },
+  type: "query",
+};
+
+describe("scenarios > visualizations > scatter", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsNormalUser();
+    cy.server();
+    cy.route("POST", "/api/dataset").as("dataset");
+  });
+
+  it("should show correct labels in tooltip (metabase#15150)", () => {
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "scatter",
+      visualization_settings: {
+        "graph.dimensions": ["CREATED_AT"],
+        "graph.metrics": ["count", "count_2"],
+      },
+    });
+
+    cy.wait("@dataset");
+
+    cy.get(".bubble")
+      .last()
+      .trigger("mousemove");
+
+    popover().within(() => {
+      cy.findByText("Created At:");
+      cy.findByText("Count:");
+      cy.findByText("Distinct values of Product ID:");
+    });
+  });
+
+  it("should show correct labels in tooltip when display name has manually set (metabase#11395)", () => {
+    visitQuestionAdhoc({
+      dataset_query: testQuery,
+      display: "scatter",
+      visualization_settings: {
+        "graph.dimensions": ["CREATED_AT"],
+        "graph.metrics": ["count", "count_2"],
+        series_settings: {
+          count: {
+            title: "Orders count",
+          },
+          count_2: {
+            title: "Products count",
+          },
+        },
+      },
+    });
+
+    cy.wait("@dataset");
+
+    cy.get(".bubble")
+      .last()
+      .trigger("mousemove");
+
+    popover().within(() => {
+      cy.findByText("Created At:");
+      cy.findByText("Orders count:");
+      cy.findByText("Products count:");
+    });
+  });
+});

frontend/test/metabase/visualizations/components/LineAreaBarRenderer-bar.unit.spec.js

@@ -39,11 +39,13 @@ function MainSeries(chartType, settings = {}, { key = "A", value = 1 } = {}) {
     data: {
       cols: [
         StringColumn({
+          name: "Category",
           display_name: "Category",
           source: "breakout",
           field_ref: ["field-id", 1],
         }),
         NumberColumn({
+          name: "Sum",
           display_name: "Sum",
           source: "aggregation",
           field_ref: ["field-id", 2],
@@ -226,6 +228,9 @@ describe("LineAreaBarRenderer-bar", () => {
       [
         MainSeries("bar", {
           series: () => ({ ...DEFAULT_SERIES_SETTINGS, title: "Foo" }),
+          series_settings: {
+            Sum: { title: "Foo" },
+          },
         }),
       ],
       { onHoverChange },