Fix multiseries titles showing column names instead of card name. Resolves #3545

frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx

@@ -71,7 +71,7 @@ export default class LineAreaBarChart extends Component {
     }
 
     static transformSeries(series) {
-        let newSeries = [].concat(...series.map(transformSingleSeries));
+        let newSeries = [].concat(...series.map((s) => transformSingleSeries(s, series)));
         if (_.isEqual(series, newSeries) || newSeries.length === 0) {
             return series;
         } else {
@@ -214,7 +214,7 @@ function getColumnsFromNames(cols, names) {
     return names.map(name => _.findWhere(cols, { name }));
 }
 
-function transformSingleSeries(s) {
+function transformSingleSeries(s, series) {
     const { card, data } = s;
 
     // HACK: prevents cards from being transformed too many times
@@ -248,7 +248,13 @@ function transformSingleSeries(s) {
         ).all().map(o => ({
             card: {
                 ...card,
-                name: o.key,
+                // if multiseries include the card title as well as the breakout value
+                name: [
+                    // show series title if it's multiseries
+                    series.length > 1 && card.name,
+                    // always show grouping value
+                    o.key
+                ].filter(n => n).join(": "),
                 _transformed: true,
             },
             data: {
@@ -264,7 +270,12 @@ function transformSingleSeries(s) {
             return {
                 card: {
                     ...card,
-                    name: getFriendlyName(col),
+                    name: [
+                        // show series title if it's multiseries
+                        series.length > 1 && card.name,
+                        // show column name if there are multiple metrics
+                        metricIndexes.length > 1 && getFriendlyName(col)
+                    ].filter(n => n).join(": "),
                     _transformed: true,
                 },
                 data: {

frontend/test/unit/visualizations/components/Visualization.spec.js

@@ -83,7 +83,7 @@ describe("Visualization", () => {
             it("should render dashboard multiseries titles", () => {
                 let viz = renderVisualization({ series: [LineCard("Foo"), LineCard("Bar")], isDashboard: true });
                 expect(getTitles(viz)).toEqual([
-                    ["Foo_col1", "Bar_col1"]
+                    ["Foo_name", "Bar_name"]
                 ]);
             });
             it("should render dashboard multiseries titles and chart setting title", () => {
@@ -93,13 +93,13 @@ describe("Visualization", () => {
                 ], isDashboard: true });
                 expect(getTitles(viz)).toEqual([
                     ["Foo_title"],
-                    ["Foo_col1", "Bar_col1"]
+                    ["Foo_name", "Bar_name"]
                 ]);
             });
-            it("should render multiple breakout multiseries titles", () => {
+            it("should render multiple breakout multiseries titles (with both card titles and breakout values)", () => {
                 let viz = renderVisualization({ series: [MultiseriesLineCard("Foo"), MultiseriesLineCard("Bar")], isDashboard: true });
                 expect(getTitles(viz)).toEqual([
-                    ["Foo_cat1", "Foo_cat2", "Bar_cat1", "Bar_cat2"]
+                    ["Foo_name: Foo_cat1", "Foo_name: Foo_cat2", "Bar_name: Bar_cat1", "Bar_name: Bar_cat2"]
                 ]);
             });
         });