@spteck/fluentui-react-charts 1.0.11 → 1.0.12

package/dist/fluentui-react-charts.esm.js

@@ -1712,7 +1712,9 @@ function ComboChart(_ref) {
     _ref$showDataLabels = _ref.showDataLabels,
     showDataLabels = _ref$showDataLabels === void 0 ? false : _ref$showDataLabels,
     _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    _ref$axesMode = _ref.axesMode,
+    axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode;
   var _useState = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1767,7 +1769,8 @@ function ComboChart(_ref) {
         return {
           type: series.type,
           label: series.label,
-          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : 'y',
+          // default yAxis assignment: legacy uses single 'y', dual uses 'y-bar'/'y-line'
+          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : axesMode === 'dual' ? series.type === 'bar' ? 'y-bar' : 'y-line' : 'y',
           data: allCategories.map(function (cat) {
             var found = series.data.find(function (d) {
               return getPrimary(d) === cat;
@@ -1798,7 +1801,7 @@ function ComboChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = useMemo(function () {
-    return _extends({
+    var base = _extends({
       responsive: true,
       maintainAspectRatio: false
     }, getInstantInteractionAnimations(), {
@@ -1829,9 +1832,61 @@ function ComboChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme)
-      },
+      }
+    });
+    if (axesMode === 'dual') {
+      return _extends({}, base, {
+        scales: {
+          x: {
+            stacked: true,
+            ticks: {
+              color: labelColor,
+              font: {
+                family: fontFamily,
+                size: fontSize
+              }
+            },
+            grid: {
+              color: gridColor
+            }
+          },
+          'y-bar': {
+            type: 'linear',
+            position: 'left',
+            stacked: true,
+            ticks: {
+              color: labelColor,
+              font: {
+                family: fontFamily,
+                size: fontSize
+              }
+            },
+            grid: {
+              color: gridColor
+            }
+          },
+          'y-line': {
+            type: 'linear',
+            position: 'right',
+            stacked: false,
+            ticks: {
+              color: labelColor,
+              font: {
+                family: fontFamily,
+                size: fontSize
+              }
+            },
+            grid: {
+              color: gridColor
+            }
+          }
+        }
+      });
+    }
+    return _extends({}, base, {
       scales: {
         x: {
+          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1844,7 +1899,9 @@ function ComboChart(_ref) {
           }
         },
         y: {
+          type: 'linear',
           position: 'left',
+          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1854,12 +1911,11 @@ function ComboChart(_ref) {
           },
           grid: {
             color: gridColor
-          },
-          stacked: false
+          }
         }
       }
     });
-  }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
+  }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip, getInstantInteractionAnimations, axesMode]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {