@spteck/fluentui-react-charts 1.1.5 → 1.1.7

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

@@ -852,6 +852,12 @@ opts) {
       var dataset = item.dataset;
       var datasetLabel = 'label' in dataset && typeof dataset.label === 'string' ? dataset.label : 'Value';
       var raw = item.raw;
+      // Prepare number formatter based on opts
+      var numberFormatter = typeof (opts == null ? void 0 : opts.numberFormat) === 'function' ? opts.numberFormat : new Intl.NumberFormat(opts == null ? void 0 : opts.locale, typeof (opts == null ? void 0 : opts.numberFormat) === 'object' ? opts == null ? void 0 : opts.numberFormat : undefined).format;
+      // Helper to format numeric values for tooltips using the configured formatter
+      var formatVal = function formatVal(v) {
+        return typeof v === 'number' ? numberFormatter(v) : String(v);
+      };
       // determine extraField value, precedence: dataset.extraField > opts.extraField
       var extra;
       if (dataset && dataset.extraField !== undefined) {
@@ -872,22 +878,22 @@ opts) {
         var x = raw.x,
           y = raw.y,
           r = raw.r;
-        return datasetLabel + " \u2014 x: " + x + ", y: " + y + ", r: " + r + suffix;
+        return datasetLabel + " \u2014 x: " + formatVal(x) + ", y: " + formatVal(y) + ", r: " + formatVal(r) + suffix;
       }
       //   Scatter format { x, y }
       if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw) {
         var _x = raw.x,
           _y = raw.y;
-        return datasetLabel + " \u2014 x: " + _x + ", y: " + _y + suffix;
+        return datasetLabel + " \u2014 x: " + formatVal(_x) + ", y: " + formatVal(_y) + suffix;
       }
       //  Floating bar [min, max]
       if (Array.isArray(raw) && raw.length === 2) {
         var min = raw[0],
           max = raw[1];
-        return datasetLabel + ": " + min + " \u2013 " + max + suffix;
+        return datasetLabel + ": " + formatVal(min) + " \u2013 " + formatVal(max) + suffix;
       }
       //  Default: single number or string
-      return datasetLabel + ": " + raw + suffix;
+      return datasetLabel + ": " + formatVal(raw) + suffix;
     },
     beforeTitle: function beforeTitle() {
       return '';
@@ -1104,7 +1110,9 @@ function AreaChart(_ref) {
     stacked = _ref$stacked === void 0 ? false : _ref$stacked,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1213,7 +1221,9 @@ function AreaChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1245,7 +1255,7 @@ function AreaChart(_ref) {
         }
       }
     });
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1274,7 +1284,9 @@ function BarChart(_ref) {
     theme = _ref.theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1383,7 +1395,9 @@ function BarChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: _extends({
@@ -1441,7 +1455,7 @@ function BarChart(_ref) {
         }
       })
     });
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1472,7 +1486,9 @@ function BarHorizontalChart(_ref) {
     theme = _ref.theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1578,7 +1594,9 @@ function BarHorizontalChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1610,7 +1628,7 @@ function BarHorizontalChart(_ref) {
         }
       }
     });
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1640,7 +1658,9 @@ function BubbleChart(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1740,7 +1760,9 @@ function BubbleChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -1771,7 +1793,7 @@ function BubbleChart(_ref) {
         }
       }
     });
-  }, [title, showDataLabels, theme, getPrimary, getSecondary, data, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
+  }, [title, showDataLabels, theme, getPrimary, getSecondary, data, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -1804,7 +1826,9 @@ function ComboChart(_ref) {
     axesMode = _ref$axesMode === void 0 ? 'legacy' : _ref$axesMode,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -1925,7 +1949,9 @@ function ComboChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       }
     });
@@ -2064,7 +2090,9 @@ function DoughnutChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
@@ -2154,7 +2182,9 @@ function DoughnutChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         title: {
           display: !!title,
@@ -2213,7 +2243,9 @@ function FloatingBarChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2319,7 +2351,9 @@ function FloatingBarChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -2349,7 +2383,7 @@ function FloatingBarChart(_ref) {
         }
       }
     });
-  }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
+  }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -2380,7 +2414,9 @@ function LineChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2489,7 +2525,9 @@ function LineChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -2550,7 +2588,9 @@ function PieChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor;
@@ -2635,7 +2675,9 @@ function PieChart(_ref) {
     }, getInstantInteractionAnimations(), {
       plugins: {
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -2724,7 +2766,9 @@ function PolarChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useChartUtils = useChartUtils(theme),
     getFluentPalette = _useChartUtils.getFluentPalette,
     lightenColor = _useChartUtils.lightenColor,
@@ -2822,7 +2866,9 @@ function PolarChart(_ref) {
           }
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -2844,7 +2890,7 @@ function PolarChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip]);
+  }, [theme, title, showDataLabels, createFluentTooltip, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -2875,7 +2921,9 @@ function RadarChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -2975,7 +3023,9 @@ function RadarChart(_ref) {
           }
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         }),
         legend: {
           display: false
@@ -3006,7 +3056,7 @@ function RadarChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize]);
+  }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3035,7 +3085,9 @@ function ScatterChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       return data.map(function (s) {
         return s.label;
@@ -3128,7 +3180,9 @@ function ScatterChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3161,7 +3215,7 @@ function ScatterChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3190,7 +3244,9 @@ function StackedLineChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3299,7 +3355,9 @@ function StackedLineChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3331,7 +3389,7 @@ function StackedLineChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3360,7 +3418,9 @@ function SteamChart(_ref) {
     theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     renderTooltipLabel = _ref.renderTooltipLabel,
     _ref$paletteId = _ref.paletteId,
-    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId;
+    paletteId = _ref$paletteId === void 0 ? 1 : _ref$paletteId,
+    numberFormat = _ref.numberFormat,
+    locale = _ref.locale;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -3482,7 +3542,9 @@ function SteamChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       interaction: {
@@ -3523,7 +3585,7 @@ function SteamChart(_ref) {
         }
       }
     });
-  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent]);
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent, numberFormat, locale]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
@@ -3569,7 +3631,10 @@ var chartProps = function chartProps(chart) {
     },
     // forward optional renderTooltipLabel if provided on the chart config
     renderTooltipLabel: chart.renderTooltipLabel,
-    paletteId: chart.paletteId
+    paletteId: chart.paletteId,
+    // forward optional number formatting options
+    numberFormat: chart.numberFormat,
+    locale: chart.locale
   };
 };
 var getChartComponent = function getChartComponent(chart, theme) {