Implement improved stack setting logic

frontend/src/metabase/visualizations/components/settings/ChartNestedSettingSeries.jsx

@@ -43,10 +43,13 @@ export default class ChartNestedSettingSeries extends React.Component {
       objectSettingsWidgets,
       object,
       allComputedSettings,
+      settings,
     } = this.props;
     const objectKey = object && getObjectKey(object);
     const isSelected = single => objectKey === getObjectKey(single);
 
+    const isStacked = settings["stackable.stack_type"] != null;
+
     return (
       <div>
         {objects.map(single => {
@@ -71,16 +74,18 @@ export default class ChartNestedSettingSeries extends React.Component {
                     onChangeObjectSettings(single, { title: e.target.value })
                   }
                 />
-                <ButtonGroup
-                  className="align-self-stretch ml1"
-                  value={settings.display}
-                  options={["line", "area", "bar"]}
-                  optionValueFn={o => o}
-                  optionNameFn={o => <Icon name={o} />}
-                  onChange={value =>
-                    onChangeObjectSettings(single, { display: value })
-                  }
-                />
+                {!isStacked ? (
+                  <ButtonGroup
+                    className="align-self-stretch ml1"
+                    value={settings.display}
+                    options={["line", "area", "bar"]}
+                    optionValueFn={o => o}
+                    optionNameFn={o => <Icon name={o} />}
+                    onChange={value =>
+                      onChangeObjectSettings(single, { display: value })
+                    }
+                  />
+                ) : null}
                 {objects.length > 1 ? (
                   <Icon
                     className="ml2 text-medium cursor-pointer"

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

@@ -456,6 +456,15 @@ function setChartColor({ series, settings, chartType }, chart, groups, index) {
   }
 }
 
+// returns the series "display" type, either from the series settings or stack_display setting
+function getSeriesDisplay(settings, single) {
+  if (settings["stackable.stack_type"] != null) {
+    return settings["stackable.stack_display"];
+  } else {
+    return settings.series(single).display;
+  }
+}
+
 /// Return a sequence of little charts for each of the groups.
 function getCharts(
   props,
@@ -470,7 +479,7 @@ function getCharts(
   const { yAxisSplit } = yAxisProps;
 
   const isHeterogenous =
-    _.uniq(series.map(single => settings.series(single).display)).length > 1;
+    _.uniq(series.map(single => getSeriesDisplay(settings, single))).length > 1;
   const isHeterogenousOrdinal =
     settings["graph.x_axis.scale"] === "ordinal" && isHeterogenous;
 
@@ -493,8 +502,9 @@ function getCharts(
   }
 
   return groups.map((group, index) => {
-    const seriesSettings = settings.series(series[index]);
-    const seriesChartType = seriesSettings.display || chartType;
+    const single = series[index];
+    const seriesSettings = settings.series(single);
+    const seriesChartType = getSeriesDisplay(settings, single) || chartType;
 
     const chart = getDcjsChart(seriesChartType, parent);
 
@@ -749,7 +759,10 @@ export default function lineAreaBar(
   }
 
   // HACK: compositeChart + ordinal X axis shenanigans. See https://github.com/dc-js/dc.js/issues/678 and https://github.com/dc-js/dc.js/issues/662
-  const hasBar = _.any(series, s => settings.series(s).display === "bar");
+  const hasBar = _.any(
+    series,
+    single => getSeriesDisplay(settings, single) === "bar",
+  );
   parent._rangeBandPadding(hasBar ? BAR_PADDING_RATIO : 1);
 
   applyXAxisSettings(parent, props.series, xAxisProps);

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

@@ -245,26 +245,70 @@ export const LINE_SETTINGS_2 = {
   },
 };
 
+const STACKABLE_DISPLAY_TYPES = new Set(["area", "bar"]);
+
 export const STACKABLE_SETTINGS = {
   "stackable.stack_type": {
     section: t`Display`,
     title: t`Stacking`,
     widget: "radio",
-    getProps: (series, vizSettings) => ({
+    props: {
       options: [
         { name: t`Don't stack`, value: null },
         { name: t`Stack`, value: "stacked" },
         { name: t`Stack - 100%`, value: "normalized" },
       ],
-    }),
-    getDefault: ([{ card, data }], vizSettings) =>
+    },
+    isValid: (series, settings) => {
+      if (settings["stackable.stack_type"] != null) {
+        const displays = series.map(single => settings.series(single).display);
+        const hasStackable = _.any(displays, display =>
+          STACKABLE_DISPLAY_TYPES.has(display),
+        );
+        return hasStackable;
+      }
+      return true;
+    },
+    getDefault: ([{ card, data }], settings) =>
       // legacy setting and default for D-M-M+ charts
-      vizSettings["stackable.stacked"] ||
-      (card.display === "area" && vizSettings["graph.metrics"].length > 1)
+      settings["stackable.stacked"] ||
+      (card.display === "area" && settings["graph.metrics"].length > 1)
         ? "stacked"
         : null,
-    getHidden: series => series.length < 2,
-    readDependencies: ["graph.metrics"],
+    getHidden: (series, settings) => {
+      if (series.length < 2) {
+        return true;
+      }
+      const displays = series.map(single => settings.series(single).display);
+      return !_.any(displays, display => STACKABLE_DISPLAY_TYPES.has(display));
+    },
+    readDependencies: ["graph.metrics", "series"],
+  },
+  "stackable.stack_display": {
+    section: t`Display`,
+    title: t`Stacked chart type`,
+    widget: "buttonGroup",
+    props: {
+      options: [
+        { icon: "area", name: t`Area`, value: "area" },
+        { icon: "bar", name: t`Bar`, value: "bar" },
+      ],
+    },
+    getDefault: (series, settings) => {
+      const displays = series.map(single => settings.series(single).display);
+      const firstStackable = _.find(displays, display =>
+        STACKABLE_DISPLAY_TYPES.has(display),
+      );
+      if (firstStackable) {
+        return firstStackable;
+      }
+      if (STACKABLE_DISPLAY_TYPES.has(series[0].card.display)) {
+        return series[0].card.display;
+      }
+      return "bar";
+    },
+    getHidden: (series, settings) => settings["stackable.stack_type"] == null,
+    readDependencies: ["stackable.stack_type", "series"],
   },
 };