@spteck/fluentui-react-charts 1.0.12 → 1.0.14

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

@@ -779,8 +779,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', '#097223', '#a4262c', '#3f0c7aff', '#024339ff', '#791d2dff', '#005a9e', '#8764b8', '#376102ff'];
 };
 /**
  * Returns animation configuration for instant interactions.
@@ -807,7 +809,7 @@ function createFluentTooltip(theme) {
   var fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
   var tooltipBg = theme.colorNeutralBackground1;
   var tooltipTitleColor = theme.colorNeutralForeground1;
-  var tooltipBodyColor = theme.colorNeutralForeground2;
+  //const tooltipBodyColor = theme.colorNeutralForeground1;
   var borderColor = theme.colorNeutralStroke2;
   var callbacks = {
     title: function title(context) {
@@ -892,7 +894,6 @@ function createFluentTooltip(theme) {
     cornerRadius: 4,
     padding: 10,
     titleColor: tooltipTitleColor,
-    bodyColor: tooltipBodyColor,
     titleFont: {
       family: fontFamily,
       size: fontSize
@@ -1769,7 +1770,7 @@ function ComboChart(_ref) {
         return {
           type: series.type,
           label: series.label,
-          // default yAxis assignment: legacy uses single 'y', dual uses 'y-bar'/'y-line'
+          // 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) {
@@ -1777,6 +1778,8 @@ function ComboChart(_ref) {
             });
             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',
@@ -1854,6 +1857,7 @@ function ComboChart(_ref) {
             type: 'linear',
             position: 'left',
             stacked: true,
+            offset: true,
             ticks: {
               color: labelColor,
               font: {
@@ -1886,7 +1890,6 @@ function ComboChart(_ref) {
     return _extends({}, base, {
       scales: {
         x: {
-          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1899,9 +1902,7 @@ function ComboChart(_ref) {
           }
         },
         y: {
-          type: 'linear',
           position: 'left',
-          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1911,7 +1912,8 @@ function ComboChart(_ref) {
           },
           grid: {
             color: gridColor
-          }
+          },
+          stacked: false
         }
       }
     });
@@ -3426,6 +3428,7 @@ var chartProps = function chartProps(chart) {
   };
 };
 var getChartComponent = function getChartComponent(chart, theme) {
+  var _chart$axesMode;
   var type = chart.type;
   var fuiTheme = theme != null ? theme : webLightTheme;
   switch (type) {
@@ -3459,6 +3462,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 {