@spteck/fluentui-react-charts 1.0.12 → 1.0.13

package/README.md

@@ -304,31 +304,6 @@ const targetData = [
   title="Sales vs Target"
   theme={webLightTheme}
 />
- 
-> Note: ComboChart supports a backward-compatible dual-axis layout via the `axesMode` prop.
-> - Default: `axesMode="legacy"` — preserves previous behavior: a single y-axis named `y` and a non-stacked x-axis.
-> - Dual mode: `axesMode="dual"` — enables a stacked x-axis and two named y-axes: `y-bar` (left) and `y-line` (right).
-
-Usage examples:
-
-```tsx
-// legacy (default) — unchanged behavior for existing consumers
-<ComboChart
-  data={[{ label: 'Sales', data: salesData, type: 'bar' }]}
-  getPrimary={(d) => d.month}
-  getSecondary={(d) => d.value}
-/>
-
-// dual mode — bars default to 'y-bar' (stacked on x), lines default to 'y-line'
-<ComboChart
-  data={[
-    { label: 'Sales', data: salesData, type: 'bar' },
-    { label: 'Target', data: targetData, type: 'line' }
-  ]}
-  getPrimary={(d) => d.month}
-  getSecondary={(d) => d.value}
-  axesMode="dual"
-/>
 ```
 
 #### BubbleChart

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

@@ -14,7 +14,7 @@ export interface ComboChartProps<T> {
     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.
+     * 'dual' enables named y-axes ('y-bar' and 'y-line') and stacked x for bars.
      */
     axesMode?: 'legacy' | 'dual';
 }

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) {
@@ -1776,7 +1778,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) {
@@ -1784,6 +1786,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',
@@ -1861,6 +1865,7 @@ function ComboChart(_ref) {
             type: 'linear',
             position: 'left',
             stacked: true,
+            offset: true,
             ticks: {
               color: labelColor,
               font: {
@@ -1893,7 +1898,6 @@ function ComboChart(_ref) {
     return _extends({}, base, {
       scales: {
         x: {
-          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1906,9 +1910,7 @@ function ComboChart(_ref) {
           }
         },
         y: {
-          type: 'linear',
           position: 'left',
-          stacked: false,
           ticks: {
             color: labelColor,
             font: {
@@ -1918,7 +1920,8 @@ function ComboChart(_ref) {
           },
           grid: {
             color: gridColor
-          }
+          },
+          stacked: false
         }
       }
     });
@@ -3433,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) {
@@ -3466,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 {