@spteck/fluentui-react-charts 1.1.5 → 1.1.6

package/dist/charts/lineChart/LineChart.d.ts

@@ -13,6 +13,8 @@ export interface LineChartProps<T> {
     theme?: Theme;
     paletteId?: number;
     renderTooltipLabel?: (item: TooltipItem<'line'>) => string | number | undefined;
+    numberFormat?: Intl.NumberFormatOptions | ((v: number) => string);
+    locale?: string | string[];
 }
-export declare function LineChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, }: LineChartProps<T>): React.JSX.Element;
+export declare function LineChart<T extends object>({ data, getPrimary, getSecondary, title, showDataLabels, theme, renderTooltipLabel, paletteId, numberFormat, locale, }: LineChartProps<T>): React.JSX.Element;
 export default LineChart;

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

@@ -859,6 +859,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) {
@@ -879,22 +885,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 '';
@@ -2387,7 +2393,9 @@ function LineChart(_ref) {
     theme = _ref$theme === void 0 ? reactComponents.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 = React.useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -2496,7 +2504,9 @@ function LineChart(_ref) {
           display: false
         },
         tooltip: createFluentTooltip(theme, {
-          extraField: renderTooltipLabel
+          extraField: renderTooltipLabel,
+          numberFormat: numberFormat,
+          locale: locale
         })
       },
       scales: {
@@ -3576,7 +3586,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) {