@spteck/fluentui-react-charts 1.0.9 → 1.0.11

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

@@ -789,8 +789,25 @@ var lightenColor = function lightenColor(hex, amount) {
 var getFluentPalette = function getFluentPalette(_theme) {
   return ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
 };
+/**
+ * Returns animation configuration for instant interactions.
+ * Disables hover/tooltip animations for immediate response.
+ */
+var getInstantInteractionAnimations = function getInstantInteractionAnimations() {
+  return {
+    animation: false,
+    transitions: {
+      active: {
+        animation: {
+          duration: 0
+        }
+      }
+    }
+  };
+};
 /**
  * Smart Fluent tooltip generator with chart-type awareness.
+ * Optimized for fast performance with reduced animation delays.
  */
 function createFluentTooltip(theme) {
   var fontFamily = theme.fontFamilyBase;
@@ -891,6 +908,10 @@ function createFluentTooltip(theme) {
       family: fontFamily,
       size: fontSize
     },
+    // Performance optimizations for faster tooltip display
+    animation: {
+      duration: 0
+    },
     callbacks: callbacks
   };
 }
@@ -933,7 +954,8 @@ function useChartUtils(theme) {
       getFluentPalette: getFluentPalette,
       createFluentTooltip: createFluentTooltip,
       createAxisLabelFormatter: createAxisLabelFormatter,
-      debounce: debounce
+      debounce: debounce,
+      getInstantInteractionAnimations: getInstantInteractionAnimations
     };
   }, [theme]);
 }
@@ -1036,7 +1058,8 @@ function AreaChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1099,9 +1122,10 @@ function AreaChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1158,7 +1182,7 @@ function AreaChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1197,7 +1221,8 @@ function BarChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
@@ -1261,9 +1286,10 @@ function BarChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1346,7 +1372,7 @@ function BarChart(_ref) {
           }
         }
       })
-    };
+    });
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1388,7 +1414,8 @@ function BarHorizontalChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1447,10 +1474,11 @@ function BarHorizontalChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       indexAxis: 'y',
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1507,7 +1535,7 @@ function BarHorizontalChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1547,7 +1575,8 @@ function BubbleChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var styles = useGraphGlobalStyles();
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
@@ -1602,9 +1631,10 @@ function BubbleChart(_ref) {
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
     var _data$2;
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1660,7 +1690,7 @@ function BubbleChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, showDataLabels, theme, getPrimary, getSecondary, data, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1701,7 +1731,8 @@ function ComboChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1774,9 +1805,10 @@ function ComboChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -1833,7 +1865,7 @@ function ComboChart(_ref) {
           stacked: false
         }
       }
-    };
+    });
   }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -1892,7 +1924,8 @@ function DoughnutChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var _useState = React.useState([]),
     hiddenLabels = _useState[0],
     setHiddenLabels = _useState[1];
@@ -1967,9 +2000,10 @@ function DoughnutChart(_ref) {
     });
   }, [allLabels, valueMap, colors]);
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         legend: {
           display: false
@@ -2001,7 +2035,7 @@ function DoughnutChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, theme, showDataLabels, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2042,7 +2076,8 @@ function FloatingBarChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2102,9 +2137,10 @@ function FloatingBarChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2159,7 +2195,7 @@ function FloatingBarChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2201,7 +2237,8 @@ function LineChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2264,9 +2301,10 @@ function LineChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2321,7 +2359,7 @@ function LineChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2429,9 +2467,10 @@ function PieChart(_ref) {
     chartData = _useMemo2.chartData,
     legendEntries = _useMemo2.legendEntries;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         tooltip: createFluentTooltip(theme),
         legend: {
@@ -2460,7 +2499,7 @@ function PieChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2521,7 +2560,8 @@ function PolarChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.webLightTheme : _ref$theme;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
-    lightenColor = _useChartUtils.lightenColor;
+    lightenColor = _useChartUtils.lightenColor,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var _useState = React.useState([]),
     hiddenLabels = _useState[0],
     setHiddenLabels = _useState[1];
@@ -2584,9 +2624,10 @@ function PolarChart(_ref) {
     };
   }, [filteredLabels, values, visibleColors]);
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2633,7 +2674,7 @@ function PolarChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2673,7 +2714,8 @@ function RadarChart(_ref) {
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
-    getFluentPalette = _useChartUtils.getFluentPalette;
+    getFluentPalette = _useChartUtils.getFluentPalette,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2732,9 +2774,10 @@ function RadarChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2787,7 +2830,7 @@ function RadarChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2826,7 +2869,8 @@ function ScatterChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -2874,9 +2918,10 @@ function ScatterChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -2934,7 +2979,7 @@ function ScatterChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -2974,7 +3019,8 @@ function StackedLineChart(_ref) {
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
+    createFluentTooltip = _useChartUtils.createFluentTooltip,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -3037,9 +3083,10 @@ function StackedLineChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -3096,7 +3143,7 @@ function StackedLineChart(_ref) {
           }
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -3138,7 +3185,8 @@ function SteamChart(_ref) {
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
-    getFluentPalette = _useChartUtils.getFluentPalette;
+    getFluentPalette = _useChartUtils.getFluentPalette,
+    getInstantInteractionAnimations = _useChartUtils.getInstantInteractionAnimations;
   var seriesColors = React.useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -3212,13 +3260,10 @@ function SteamChart(_ref) {
     labelColor = _useMemo.labelColor,
     gridColor = _useMemo.gridColor;
   var options = React.useMemo(function () {
-    return {
+    return _extends({
       responsive: true,
-      maintainAspectRatio: false,
-      animation: {
-        duration: 800,
-        easing: 'easeOutQuart'
-      },
+      maintainAspectRatio: false
+    }, getInstantInteractionAnimations(), {
       plugins: {
         title: {
           display: !!title,
@@ -3284,7 +3329,7 @@ function SteamChart(_ref) {
           max: showPercent ? 100 : undefined
         }
       }
-    };
+    });
   }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
@@ -4108,6 +4153,7 @@ exports.SteamChart = SteamChart;
 exports.createAxisLabelFormatter = createAxisLabelFormatter;
 exports.createFluentTooltip = createFluentTooltip;
 exports.getFluentPalette = getFluentPalette;
+exports.getInstantInteractionAnimations = getInstantInteractionAnimations;
 exports.lightenColor = lightenColor;
 exports.useChartUtils = useChartUtils;
 exports.useGraphUtils = useChartUtils;