stack area chart with breakouts (#28625)

frontend/src/metabase/visualizations/lib/settings/graph.js

@@ -358,12 +358,19 @@ export const STACKABLE_SETTINGS = {
       }
       return true;
     },
-    getDefault: ([{ card, data }], settings) =>
+    getDefault: ([{ card, data }], settings) => {
       // legacy setting and default for D-M-M+ charts
-      settings["stackable.stacked"] ||
-      (card.display === "area" && settings["graph.metrics"].length > 1)
-        ? "stacked"
-        : null,
+      if (settings["stackable.stacked"]) {
+        return settings["stackable.stacked"];
+      }
+
+      const shouldStack =
+        card.display === "area" &&
+        (settings["graph.metrics"].length > 1 ||
+          settings["graph.dimensions"].length > 1);
+
+      return shouldStack ? "stacked" : null;
+    },
     getHidden: (series, settings) => {
       const displays = series.map(single => settings.series(single).display);
       const stackableDisplays = displays.filter(display =>
@@ -371,7 +378,7 @@ export const STACKABLE_SETTINGS = {
       );
       return stackableDisplays.length <= 1;
     },
-    readDependencies: ["graph.metrics", "series"],
+    readDependencies: ["graph.metrics", "graph.dimensions", "series"],
   },
   "stackable.stack_display": {
     section: t`Display`,

frontend/src/metabase/visualizations/lib/settings/graph.unit.spec.js

+import { STACKABLE_SETTINGS } from "./graph";
+
+describe("STACKABLE_SETTINGS", () => {
+  describe("stackable.stack_type", () => {
+    describe("getDefault", () => {
+      const getDefault = STACKABLE_SETTINGS["stackable.stack_type"].getDefault;
+
+      it("should return stacked if area chart has more than 1 metric", () => {
+        const value = getDefault([{ card: { display: "area" } }], {
+          "graph.metrics": ["foo", "bar"],
+          "graph.dimensions": [],
+        });
+
+        expect(value).toBe("stacked");
+      });
+
+      it("should return stacked if area chart has more than 1 dimension", () => {
+        const value = getDefault([{ card: { display: "area" } }], {
+          "graph.metrics": [],
+          "graph.dimensions": ["foo", "bar"],
+        });
+
+        expect(value).toBe("stacked");
+      });
+
+      it("should return null if area chart has 1 metric and 1 dimension", () => {
+        const value = getDefault([{ card: { display: "area" } }], {
+          "graph.metrics": ["foo"],
+          "graph.dimensions": ["bar"],
+        });
+
+        expect(value).toBeNull();
+      });
+
+      it("should return the legacy 'stackable.stacked' value if present", () => {
+        const value = getDefault([{ card: { display: "area" } }], {
+          "stackable.stacked": "normalized",
+          "graph.metrics": ["foo", "bar"],
+          "graph.dimensions": ["bar"],
+        });
+
+        expect(value).toBe("normalized");
+      });
+    });
+  });
+});

src/metabase/pulse/render/body.clj

@@ -347,7 +347,9 @@
                       (= (:stackable.stack_type viz-settings) "stacked")
                       (and
                        (= (:display card) :area)
-                       (> (count (:graph.metrics viz-settings)) 1)))]
+                       (or
+                        (> (count (:graph.metrics viz-settings)) 1)
+                        (> (count (:graph.dimensions viz-settings)) 1))))]
     (if stacked
       (assoc viz-settings :stackable.stack_type "stacked")
       viz-settings)))