@spteck/fluentui-react-charts 1.0.11 → 1.0.13

package/dist/charts/ComboChart/ComboChart.d.ts

@@ -12,6 +12,11 @@ export interface ComboChartProps<T> {
     title?: string;
     showDataLabels?: boolean;
     theme?: Theme;
+    /**
+     * 'legacy' keeps previous behaviour (single 'y' axis, non-stacked x).
+     * 'dual' enables named y-axes ('y-bar' and 'y-line') and stacked x for bars.
+     */
+    axesMode?: 'legacy' | 'dual';
 }
-export declare function ComboChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, }: ComboChartProps<T>): React.JSX.Element;
+export declare function ComboChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, axesMode, }: ComboChartProps<T>): React.JSX.Element;
 export default ComboChart;

package/dist/fluentui-react-charts.cjs.development.js

@@ -786,8 +786,10 @@ var lightenColor = function lightenColor(hex, amount) {
   };
   return "#" + toHex(r) + toHex(g) + toHex(b);
 };
-var getFluentPalette = function getFluentPalette(_theme) {
-  return ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
+var getFluentPalette = function getFluentPalette(theme) {
+  // Check if theme is dark by looking at global color tokens
+  var isDark = theme.colorNeutralBackground1.startsWith('#1') || theme.colorNeutralBackground1 === '#000000';
+  return isDark ? ['#2899f5', '#ff8c00', '#32cd32', '#f06b71', '#c390f2', '#00b7c3', '#ffb900', '#b4a0ff', '#60cdff', '#92c353'] : ['#0078d4', '#d83b01', '#107c10', '#a4262c', '#5c2d91', '#008272', '#c43148', '#005a9e', '#8764b8', '#498205'];
 };
 /**
  * Returns animation configuration for instant interactions.
@@ -814,7 +816,7 @@ function createFluentTooltip(theme) {
   var fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
   var tooltipBg = theme.colorNeutralBackground1;
   var tooltipTitleColor = theme.colorNeutralForeground1;
-  var tooltipBodyColor = theme.colorNeutralForeground2;
+  var tooltipBodyColor = theme.colorNeutralForeground1;
   var borderColor = theme.colorNeutralStroke2;
   var callbacks = {
     title: function title(context) {
@@ -1719,7 +1721,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 ? reactComponents.webLightTheme : _ref$theme;
+    theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme,
+    _ref$axesMode = _ref.axesMode,
+    axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode;
   var _useState = React.useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1774,13 +1778,16 @@ function ComboChart(_ref) {
         return {
           type: series.type,
           label: series.label,
-          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : 'y',
+          // Respect explicit series yAxisID if provided (retro-compatibility).
+          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;
             });
             return found ? getSecondary(found) : 0;
           }),
+          // In dual mode, group bars into a common stack so they stack on x axis
+          stack: axesMode === 'dual' && series.type === 'bar' ? 'barStack' : undefined,
           backgroundColor: seriesColors[series.label],
           borderColor: seriesColors[series.label],
           fill: series.type === 'bar',
@@ -1805,7 +1812,7 @@ function ComboChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return _extends({
+    var base = _extends({
       responsive: true,
       maintainAspectRatio: false
     }, getInstantInteractionAnimations(), {
@@ -1836,7 +1843,59 @@ 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,
+            offset: 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: {
           ticks: {
@@ -1866,7 +1925,7 @@ function ComboChart(_ref) {
         }
       }
     });
-  }, [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", {
@@ -3377,6 +3436,7 @@ var chartProps = function chartProps(chart) {
   };
 };
 var getChartComponent = function getChartComponent(chart, theme) {
+  var _chart$axesMode;
   var type = chart.type;
   var fuiTheme = theme != null ? theme : reactComponents.webLightTheme;
   switch (type) {
@@ -3410,6 +3470,8 @@ var getChartComponent = function getChartComponent(chart, theme) {
     case 'multiple-axes':
       return React__default.createElement(ComboChart, Object.assign({}, chartProps(chart), {
         theme: fuiTheme,
+        // allow the originating chart descriptor to opt into dual axes
+        axesMode: (_chart$axesMode = chart.axesMode) != null ? _chart$axesMode : 'dual',
         data: chart.data.map(function (series) {
           var _series$type;
           return {