@fluentui/react-charts 0.0.0-nightly-20250909-0406.1 → 0.0.0-nightly-20250910-0406.1

package/lib-commonjs/components/DonutChart/DonutChart.js

@@ -21,6 +21,7 @@ const _ChartPopover = require("../CommonComponents/ChartPopover");
 const _imageexportutils = require("../../utilities/image-export-utils");
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps;
     const _rootElem = _react.useRef(null);
     const _uniqText = (0, _reactutilities.useId)('_Pie_');
     /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
@@ -31,11 +32,11 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     const [legend, setLegend] = _react.useState('');
     const [_width, setWidth] = _react.useState(props.width || 200);
     const [_height, setHeight] = _react.useState(props.height || 200);
-    const [activeLegend, setActiveLegend] = _react.useState('');
+    const [activeLegend, setActiveLegend] = _react.useState(undefined);
     const [color, setColor] = _react.useState('');
     const [xCalloutValue, setXCalloutValue] = _react.useState('');
     const [yCalloutValue, setYCalloutValue] = _react.useState('');
-    const [selectedLegend, setSelectedLegend] = _react.useState('');
+    const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [focusedArcId, setFocusedArcId] = _react.useState('');
     const [dataPointCalloutProps, setDataPointCalloutProps] = _react.useState();
     const [clickPosition, setClickPosition] = _react.useState({
@@ -43,11 +44,25 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
+    const prevPropsRef = _react.useRef(null);
     const _legendsRef = _react.useRef(null);
     const _isRTL = (0, _index1.useRtl)();
     _react.useEffect(()=>{
         _fitParentContainer();
     }, []);
+    _react.useEffect(()=>{
+        if (prevPropsRef.current) {
+            var _prevProps_legendProps, _props_legendProps;
+            const prevProps = prevPropsRef.current;
+            if (!(0, _index1.areArraysEqual)((_prevProps_legendProps = prevProps.legendProps) === null || _prevProps_legendProps === void 0 ? void 0 : _prevProps_legendProps.selectedLegends, (_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends)) {
+                var _props_legendProps1;
+                setSelectedLegends(((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends) || []);
+            }
+        }
+        prevPropsRef.current = props;
+    }, [
+        props
+    ]);
     _react.useEffect(()=>{
         if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {
             _fitParentContainer();
@@ -88,19 +103,12 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             const legend = {
                 title: point.legend,
                 color,
-                action: ()=>{
-                    if (selectedLegend === point.legend) {
-                        setSelectedLegend('');
-                    } else {
-                        setSelectedLegend(point.legend);
-                    }
-                },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
                     setActiveLegend(point.legend);
                 },
                 onMouseOutAction: ()=>{
-                    setActiveLegend('');
+                    setActiveLegend(undefined);
                 }
             };
             return legend;
@@ -110,10 +118,23 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             centerLegends: true,
             overflowText: props.legendsOverflowText,
             ...props.legendProps,
+            // eslint-disable-next-line react/jsx-no-bind
+            onChange: _onLegendSelectionChange,
             legendRef: _legendsRef
         });
         return legends;
     }
+    function _onLegendSelectionChange(selectedLegends, event, currentLegend) {
+        var _props_legendProps, _props_legendProps1;
+        if (props.legendProps && ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends)) {
+            setSelectedLegends(selectedLegends);
+        } else {
+            setSelectedLegends(selectedLegends.slice(-1));
+        }
+        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
+            props.legendProps.onChange(selectedLegends, event, currentLegend);
+        }
+    }
     function _focusCallback(data, id, e) {
         let cx = 0;
         let cy = 0;
@@ -121,7 +142,7 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         cx = targetRect.left + targetRect.width / 2;
         cy = targetRect.top + targetRect.height / 2;
         updatePosition(cx, cy);
-        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));
         setValue(data.data.toString());
         setLegend(data.legend);
         setColor(data.color);
@@ -133,7 +154,7 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     function _hoverCallback(data, e) {
         if (_calloutAnchorPoint !== data) {
             _calloutAnchorPoint = data;
-            setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);
+            setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));
             setValue(data.data.toString());
             setLegend(data.legend);
             setColor(data.color);
@@ -153,16 +174,18 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         setPopoverOpen(false);
     }
     function _valueInsideDonut(valueInsideDonut, data) {
-        const highlightedLegend = _getHighlightedLegend();
-        if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {
-            let legendValue = valueInsideDonut;
-            data.map((point, index)=>{
-                if (point.legend === highlightedLegend || isPopoverOpen && point.legend === legend) {
-                    legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data;
+        const highlightedLegends = _getHighlightedLegend();
+        if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {
+            const pointValue = data.find((point)=>_isLegendHighlighted(point.legend));
+            return pointValue ? pointValue.yAxisCalloutData ? pointValue.yAxisCalloutData : pointValue.data : valueInsideDonut;
+        } else if (highlightedLegends.length > 0) {
+            let totalValue = 0;
+            data.forEach((point)=>{
+                if (highlightedLegends.includes(point.legend)) {
+                    totalValue += point.data;
                 }
-                return;
             });
-            return legendValue;
+            return totalValue;
         } else {
             return valueInsideDonut;
         }
@@ -178,9 +201,16 @@ const DonutChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
      * This function returns
      * the selected legend if there is one
      * or the hovered legend if none of the legends is selected.
-     * Note: This won't work in case of multiple legends selection.
      */ function _getHighlightedLegend() {
-        return selectedLegend || activeLegend;
+        return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [
+            activeLegend
+        ] : [];
+    }
+    function _isLegendHighlighted(legend) {
+        return _getHighlightedLegend().includes(legend);
+    }
+    function _noLegendsHighlighted() {
+        return _getHighlightedLegend().length === 0;
     }
     function _isChartEmpty() {
         return !(props.data && props.data.chartData && props.data.chartData.filter((d)=>d.data > 0).length > 0);

package/lib-commonjs/components/DonutChart/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string>('');\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\n\n    React.useEffect(() => {\n      if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n        _fitParentContainer();\n      }\n      prevSize.current.height = props.height;\n      prevSize.current.width = props.width;\n    }, [props.width, props.height]);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    function _elevateToMinimums(data: ChartDataPoint[]) {\n      let sumOfData = 0;\n      const minPercent = 0.01;\n      const elevatedData: ChartDataPoint[] = [];\n      data.forEach(item => {\n        sumOfData += item.data!;\n      });\n      data.forEach(item => {\n        elevatedData.push(\n          minPercent * sumOfData > item.data! && item.data! > 0\n            ? {\n                ...item,\n                data: minPercent * sumOfData,\n                yAxisCalloutData:\n                  item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n              }\n            : item,\n        );\n      });\n      return elevatedData;\n    }\n    function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n      const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n        const color: string = point.color!;\n        // mapping data to the format Legends component needs\n        const legend: Legend = {\n          title: point.legend!,\n          color,\n          action: () => {\n            if (selectedLegend === point.legend) {\n              setSelectedLegend('');\n            } else {\n              setSelectedLegend(point.legend!);\n            }\n          },\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend('');\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(selectedLegend === '' || selectedLegend === data.legend);\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        updatePosition(e.clientX, e.clientY);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegend = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegend !== '' || isPopoverOpen)) {\n        let legendValue = valueInsideDonut;\n        data!.map((point: ChartDataPoint, index: number) => {\n          if (point.legend === highlightedLegend || (isPopoverOpen && point.legend === legend)) {\n            legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n          }\n          return;\n        });\n        return legendValue;\n      } else {\n        return valueInsideDonut;\n      }\n    }\n\n    function _toLocaleString(data: string | number | undefined) {\n      const localeString = formatToLocaleString(data, props.culture);\n      if (!localeString) {\n        return data;\n      }\n      return localeString?.toString();\n    }\n\n    /**\n     * This function returns\n     * the selected legend if there is one\n     * or the hovered legend if none of the legends is selected.\n     * Note: This won't work in case of multiple legends selection.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegend || activeLegend;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\n    }\n\n    function updatePosition(newX: number, newY: number) {\n      const threshold = 1; // Set a threshold for movement\n      const { x, y } = clickPosition;\n      // Calculate the distance moved\n      const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n      // Update the position only if the distance moved is greater than the threshold\n      if (distance > threshold) {\n        setClickPosition({ x: newX, y: newY });\n        setPopoverOpen(true);\n      }\n    }\n\n    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points);\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut =\n      props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div\n        className={classes.root}\n        ref={(rootElem: HTMLDivElement | null) => (_rootElem.current = rootElem)}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegend","setSelectedLegend","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","undefined","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","action","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","legendProps","legendRef","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegend","_getHighlightedLegend","legendValue","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","length","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport * as React from 'react';\nimport { Pie } from './Pie/index';\nimport { DonutChartProps } from './DonutChart.types';\nimport { useDonutChartStyles } from './useDonutChartStyles.styles';\nimport { ChartDataPoint } from '../../DonutChart';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';\nimport { Legend, Legends, LegendContainer } from '../../index';\nimport { useId } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { ImageExportOptions } from '../../types/index';\nimport { toImage } from '../../utilities/image-export-utils';\n\nconst MIN_LEGEND_CONTAINER_HEIGHT = 40;\n\n// Create a DonutChart variant which uses these default styles and this styled subcomponent.\n/**\n * Donutchart component.\n * {@docCategory DonutChart}\n */\nexport const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwardRef<HTMLDivElement, DonutChartProps>(\n  (props, forwardedRef) => {\n    const _rootElem = React.useRef<HTMLDivElement | null>(null);\n    const _uniqText: string = useId('_Pie_');\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n    let _calloutAnchorPoint: ChartDataPoint | null;\n    let _emptyChartId: string | null;\n    const legendContainer = React.useRef<HTMLDivElement | null>(null);\n    const prevSize = React.useRef<{ width?: number; height?: number }>({});\n\n    const [value, setValue] = React.useState<string | undefined>('');\n    const [legend, setLegend] = React.useState<string | undefined>('');\n    const [_width, setWidth] = React.useState<number | undefined>(props.width || 200);\n    const [_height, setHeight] = React.useState<number | undefined>(props.height || 200);\n    const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);\n    const [color, setColor] = React.useState<string | undefined>('');\n    const [xCalloutValue, setXCalloutValue] = React.useState<string>('');\n    const [yCalloutValue, setYCalloutValue] = React.useState<string>('');\n    const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n    const [focusedArcId, setFocusedArcId] = React.useState<string>('');\n    const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();\n    const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n    const [isPopoverOpen, setPopoverOpen] = React.useState(false);\n    const prevPropsRef = React.useRef<DonutChartProps | null>(null);\n    const _legendsRef = React.useRef<LegendContainer>(null);\n    const _isRTL: boolean = useRtl();\n\n    React.useEffect(() => {\n      _fitParentContainer();\n    }, []);\n\n    React.useEffect(() => {\n      if (prevPropsRef.current) {\n        const prevProps = prevPropsRef.current;\n        if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n          setSelectedLegends(props.legendProps?.selectedLegends || []);\n        }\n      }\n      prevPropsRef.current = props;\n    }, [props]);\n\n    React.useEffect(() => {\n      if (prevSize.current.height !== props.height || prevSize.current.width !== props.width) {\n        _fitParentContainer();\n      }\n      prevSize.current.height = props.height;\n      prevSize.current.width = props.width;\n    }, [props.width, props.height]);\n\n    React.useImperativeHandle(\n      props.componentRef,\n      () => ({\n        chartContainer: _rootElem.current,\n        toImage: (opts?: ImageExportOptions): Promise<string> => {\n          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);\n        },\n      }),\n      [],\n    );\n\n    function _elevateToMinimums(data: ChartDataPoint[]) {\n      let sumOfData = 0;\n      const minPercent = 0.01;\n      const elevatedData: ChartDataPoint[] = [];\n      data.forEach(item => {\n        sumOfData += item.data!;\n      });\n      data.forEach(item => {\n        elevatedData.push(\n          minPercent * sumOfData > item.data! && item.data! > 0\n            ? {\n                ...item,\n                data: minPercent * sumOfData,\n                yAxisCalloutData:\n                  item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n              }\n            : item,\n        );\n      });\n      return elevatedData;\n    }\n    function _createLegends(chartData: ChartDataPoint[]): JSXElement {\n      const legendDataItems = chartData.map((point: ChartDataPoint, index: number) => {\n        const color: string = point.color!;\n        // mapping data to the format Legends component needs\n        const legend: Legend = {\n          title: point.legend!,\n          color,\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(point.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend(undefined);\n          },\n        };\n        return legend;\n      });\n      const legends = (\n        <Legends\n          legends={legendDataItems}\n          centerLegends\n          overflowText={props.legendsOverflowText}\n          {...props.legendProps}\n          // eslint-disable-next-line react/jsx-no-bind\n          onChange={_onLegendSelectionChange}\n          legendRef={_legendsRef}\n        />\n      );\n      return legends;\n    }\n    function _onLegendSelectionChange(\n      selectedLegends: string[],\n      event: React.MouseEvent<HTMLButtonElement>,\n      currentLegend?: Legend,\n    ): void {\n      if (props.legendProps && props.legendProps?.canSelectMultipleLegends) {\n        setSelectedLegends(selectedLegends);\n      } else {\n        setSelectedLegends(selectedLegends.slice(-1));\n      }\n      if (props.legendProps?.onChange) {\n        props.legendProps.onChange(selectedLegends, event, currentLegend);\n      }\n    }\n\n    function _focusCallback(data: ChartDataPoint, id: string, e: React.FocusEvent<SVGPathElement>): void {\n      let cx = 0;\n      let cy = 0;\n\n      const targetRect = (e.target as SVGPathElement).getBoundingClientRect();\n      cx = targetRect.left + targetRect.width / 2;\n      cy = targetRect.top + targetRect.height / 2;\n      updatePosition(cx, cy);\n      setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n      setValue(data.data!.toString());\n      setLegend(data.legend);\n      setColor(data.color!);\n      setXCalloutValue(data.xAxisCalloutData!);\n      setYCalloutValue(data.yAxisCalloutData!);\n      setFocusedArcId(id);\n      setDataPointCalloutProps(data);\n    }\n\n    function _hoverCallback(data: ChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n      if (_calloutAnchorPoint !== data) {\n        _calloutAnchorPoint = data;\n        setPopoverOpen(_noLegendsHighlighted() || _isLegendHighlighted(data.legend));\n        setValue(data.data!.toString());\n        setLegend(data.legend);\n        setColor(data.color!);\n        setXCalloutValue(data.xAxisCalloutData!);\n        setYCalloutValue(data.yAxisCalloutData!);\n        setDataPointCalloutProps(data);\n        updatePosition(e.clientX, e.clientY);\n      }\n    }\n    function _onBlur(): void {\n      setFocusedArcId('');\n    }\n\n    function _hoverLeave(): void {\n      /**/\n    }\n\n    function _handleChartMouseLeave() {\n      _calloutAnchorPoint = null;\n      setPopoverOpen(false);\n    }\n\n    function _valueInsideDonut(valueInsideDonut: string | number | undefined, data: ChartDataPoint[]) {\n      const highlightedLegends = _getHighlightedLegend();\n      if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 || isPopoverOpen)) {\n        const pointValue = data.find(point => _isLegendHighlighted(point.legend));\n        return pointValue\n          ? pointValue.yAxisCalloutData\n            ? pointValue.yAxisCalloutData\n            : pointValue.data!\n          : valueInsideDonut;\n      } else if (highlightedLegends.length > 0) {\n        let totalValue = 0;\n        data.forEach(point => {\n          if (highlightedLegends.includes(point.legend!)) {\n            totalValue += point.data!;\n          }\n        });\n        return totalValue;\n      } else {\n        return valueInsideDonut;\n      }\n    }\n\n    function _toLocaleString(data: string | number | undefined) {\n      const localeString = formatToLocaleString(data, props.culture);\n      if (!localeString) {\n        return data;\n      }\n      return localeString?.toString();\n    }\n\n    /**\n     * This function returns\n     * the selected legend if there is one\n     * or the hovered legend if none of the legends is selected.\n     */\n    function _getHighlightedLegend() {\n      return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n    }\n\n    function _isLegendHighlighted(legend: string | undefined): boolean {\n      return _getHighlightedLegend().includes(legend!);\n    }\n\n    function _noLegendsHighlighted(): boolean {\n      return _getHighlightedLegend().length === 0;\n    }\n\n    function _isChartEmpty(): boolean {\n      return !(\n        props.data &&\n        props.data.chartData &&\n        props.data.chartData!.filter((d: ChartDataPoint) => d.data! > 0).length > 0\n      );\n    }\n\n    function _addDefaultColors(donutChartDataPoint?: ChartDataPoint[]): ChartDataPoint[] {\n      return donutChartDataPoint\n        ? donutChartDataPoint.map((item, index) => {\n            let defaultColor: string;\n            if (typeof item.color === 'undefined') {\n              defaultColor = getNextColor(index, 0);\n            } else {\n              defaultColor = getColorFromToken(item.color);\n            }\n            return { ...item, defaultColor };\n          })\n        : [];\n    }\n\n    function updatePosition(newX: number, newY: number) {\n      const threshold = 1; // Set a threshold for movement\n      const { x, y } = clickPosition;\n      // Calculate the distance moved\n      const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n      // Update the position only if the distance moved is greater than the threshold\n      if (distance > threshold) {\n        setClickPosition({ x: newX, y: newY });\n        setPopoverOpen(true);\n      }\n    }\n\n    /**\n     * When screen resizes, along with screen, chart also auto adjusted.\n     * This method used to adjust height and width of the charts.\n     */\n    function _fitParentContainer(): void {\n      //_reqID = requestAnimationFrame(() => {\n      let legendContainerHeight;\n      if (props.hideLegend) {\n        // If there is no legend, need not to allocate some space from total chart space.\n        legendContainerHeight = 0;\n      } else {\n        const legendContainerComputedStyles = legendContainer.current && getComputedStyle(legendContainer.current);\n        legendContainerHeight =\n          ((legendContainer.current && legendContainer.current.getBoundingClientRect().height) ||\n            MIN_LEGEND_CONTAINER_HEIGHT) +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginTop) || '0') +\n          parseFloat((legendContainerComputedStyles && legendContainerComputedStyles.marginBottom) || '0');\n      }\n      if (props.parentRef || _rootElem.current) {\n        const container = props.parentRef ? props.parentRef : _rootElem.current!;\n        const currentContainerWidth = container.getBoundingClientRect().width;\n        const currentContainerHeight =\n          container.getBoundingClientRect().height > legendContainerHeight\n            ? container.getBoundingClientRect().height\n            : 200;\n        const shouldResize =\n          _width !== currentContainerWidth || _height !== currentContainerHeight - legendContainerHeight;\n        if (shouldResize) {\n          setWidth(currentContainerWidth);\n          setHeight(currentContainerHeight - legendContainerHeight);\n        }\n      }\n      //});\n    }\n\n    const { data, hideLegend = false } = props;\n    const points = _addDefaultColors(data?.chartData);\n\n    const classes = useDonutChartStyles(props);\n\n    const legendBars = _createLegends(points);\n    const donutMarginHorizontal = props.hideLabels ? 0 : 80;\n    const donutMarginVertical = props.hideLabels ? 0 : 40;\n    const outerRadius = Math.min(_width! - donutMarginHorizontal, _height! - donutMarginVertical) / 2;\n    const chartData = _elevateToMinimums(points.filter((d: ChartDataPoint) => d.data! >= 0));\n    const valueInsideDonut =\n      props.innerRadius! > MIN_DONUT_RADIUS ? _valueInsideDonut(props.valueInsideDonut!, chartData!) : '';\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div\n        className={classes.root}\n        ref={(rootElem: HTMLDivElement | null) => (_rootElem.current = rootElem)}\n        onMouseLeave={_handleChartMouseLeave}\n      >\n        {props.xAxisAnnotation && (\n          <text className={classes.axisAnnotation} x={_width! / 2} y={_height! - 10} textAnchor=\"middle\">\n            {props.xAxisAnnotation}\n          </text>\n        )}\n        <div className={classes.chartWrapper} {...focusAttributes}>\n          <svg className={classes.chart} aria-label={data?.chartTitle} width={_width} height={_height}>\n            <Pie\n              width={_width!}\n              height={_height!}\n              outerRadius={outerRadius}\n              innerRadius={props.innerRadius!}\n              data={chartData!}\n              onFocusCallback={_focusCallback}\n              hoverOnCallback={_hoverCallback}\n              hoverLeaveCallback={_hoverLeave}\n              uniqText={_uniqText}\n              onBlurCallback={_onBlur}\n              activeArc={_getHighlightedLegend()}\n              focusedArcId={focusedArcId || ''}\n              href={props.href!}\n              valueInsideDonut={_toLocaleString(valueInsideDonut)}\n              showLabelsInPercent={props.showLabelsInPercent}\n              hideLabels={props.hideLabels}\n            />\n          </svg>\n        </div>\n        <ChartPopover\n          xCalloutValue={xCalloutValue}\n          yCalloutValue={yCalloutValue}\n          culture={props.culture ?? 'en-us'}\n          clickPosition={clickPosition}\n          isPopoverOpen={!props.hideTooltip && isPopoverOpen}\n          legend={legend!}\n          YValue={value!}\n          color={color}\n          isCalloutForStack={false}\n          customCallout={{\n            customizedCallout: props.onRenderCalloutPerDataPoint\n              ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n            customCalloutProps: props.calloutPropsPerDataPoint\n              ? props.calloutPropsPerDataPoint(dataPointCalloutProps!)\n              : undefined,\n          }}\n          isCartesian={false}\n        />\n        {!hideLegend && (\n          <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n            {legendBars}\n          </div>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId!} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\n\nDonutChart.displayName = 'DonutChart';\nDonutChart.defaultProps = {\n  innerRadius: 0,\n  hideLabels: true,\n};\n"],"names":["React","Pie","useDonutChartStyles","formatToLocaleString","areArraysEqual","getColorFromToken","getNextColor","MIN_DONUT_RADIUS","useRtl","Legends","useId","useFocusableGroup","ChartPopover","toImage","MIN_LEGEND_CONTAINER_HEIGHT","DonutChart","forwardRef","props","forwardedRef","_rootElem","useRef","_uniqText","_calloutAnchorPoint","_emptyChartId","legendContainer","prevSize","value","setValue","useState","legend","setLegend","_width","setWidth","width","_height","setHeight","height","activeLegend","setActiveLegend","undefined","color","setColor","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","selectedLegends","setSelectedLegends","legendProps","focusedArcId","setFocusedArcId","dataPointCalloutProps","setDataPointCalloutProps","clickPosition","setClickPosition","x","y","isPopoverOpen","setPopoverOpen","prevPropsRef","_legendsRef","_isRTL","useEffect","_fitParentContainer","current","prevProps","useImperativeHandle","componentRef","chartContainer","opts","toSVG","_elevateToMinimums","data","sumOfData","minPercent","elevatedData","forEach","item","push","yAxisCalloutData","toLocaleString","_createLegends","chartData","legendDataItems","map","point","index","title","hoverAction","_handleChartMouseLeave","onMouseOutAction","legends","centerLegends","overflowText","legendsOverflowText","onChange","_onLegendSelectionChange","legendRef","event","currentLegend","canSelectMultipleLegends","slice","_focusCallback","id","e","cx","cy","targetRect","target","getBoundingClientRect","left","top","updatePosition","_noLegendsHighlighted","_isLegendHighlighted","toString","xAxisCalloutData","_hoverCallback","clientX","clientY","_onBlur","_hoverLeave","_valueInsideDonut","valueInsideDonut","highlightedLegends","_getHighlightedLegend","length","pointValue","find","totalValue","includes","_toLocaleString","localeString","culture","_isChartEmpty","filter","d","_addDefaultColors","donutChartDataPoint","defaultColor","newX","newY","threshold","distance","Math","sqrt","pow","legendContainerHeight","hideLegend","legendContainerComputedStyles","getComputedStyle","parseFloat","marginTop","marginBottom","parentRef","container","currentContainerWidth","currentContainerHeight","shouldResize","points","classes","legendBars","donutMarginHorizontal","hideLabels","donutMarginVertical","outerRadius","min","innerRadius","focusAttributes","div","className","root","ref","rootElem","onMouseLeave","xAxisAnnotation","text","axisAnnotation","textAnchor","chartWrapper","svg","chart","aria-label","chartTitle","onFocusCallback","hoverOnCallback","hoverLeaveCallback","uniqText","onBlurCallback","activeArc","href","showLabelsInPercent","hideTooltip","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerDataPoint","customCalloutProps","calloutPropsPerDataPoint","isCartesian","role","style","opacity","displayName","defaultProps"],"mappings":"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"}

package/lib-commonjs/components/DonutChart/Pie/Pie.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/Pie/Pie.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\n\nexport interface PieProps {\n  /**\n   * Width of the Pie.\n   */\n  width: number;\n  /**\n   * Height of the Pie.\n   */\n  height: number;\n  /**\n   * outerRadius of the Pie.\n   */\n  outerRadius: number;\n  /**\n   * innerRadius of the Pie.\n   */\n  innerRadius: number;\n  /**\n   * Data to render in the Pie.\n   */\n  data: ChartDataPoint[];\n  /**\n   * shape for pie.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  pie?: any;\n\n  pieForFocusRing?: any;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string;\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: PieStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n}\n\nexport interface PieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * Style set for the inside donut string\n   */\n  insideDonutString: string;\n}\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/DonutChart/Pie/Pie.types.ts"],"sourcesContent":["import { ChartDataPoint } from '../index';\n\nexport interface PieProps {\n  /**\n   * Width of the Pie.\n   */\n  width: number;\n  /**\n   * Height of the Pie.\n   */\n  height: number;\n  /**\n   * outerRadius of the Pie.\n   */\n  outerRadius: number;\n  /**\n   * innerRadius of the Pie.\n   */\n  innerRadius: number;\n  /**\n   * Data to render in the Pie.\n   */\n  data: ChartDataPoint[];\n  /**\n   * shape for pie.\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  pie?: any;\n\n  pieForFocusRing?: any;\n\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  hoverOnCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering over the legend\n   */\n  onFocusCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  onBlurCallback?: Function;\n  /**\n   * Defines the function that is executed upon hovering Leave the legend\n   */\n  hoverLeaveCallback?: Function;\n  /**\n   * Uniq string for chart\n   */\n  uniqText?: string;\n  /**\n   * Active Arc for chart\n   */\n  activeArc?: string[];\n\n  /**\n   * string for callout id\n   */\n  calloutId?: string;\n\n  /**\n   * internal prop for href\n   */\n  href?: string;\n\n  /**\n   * props for inside donut value\n   */\n  valueInsideDonut?: string | number;\n\n  /**\n   * id of the focused arc\n   */\n  focusedArcId?: string;\n\n  /**\n   * Prop to show the arc labels in percentage format\n   */\n  showLabelsInPercent?: boolean;\n\n  /**\n   * Prop to hide the arc labels\n   */\n  hideLabels?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: PieStyles;\n\n  /**\n   * Additional CSS class(es) to apply to the Chart.\n   */\n  className?: string;\n}\n\nexport interface PieStyles {\n  /**\n   * Style set for the card header component root\n   */\n  root: string;\n\n  /**\n   * Style set for the inside donut string\n   */\n  insideDonutString: string;\n}\n"],"names":[],"mappings":""}

package/lib-commonjs/components/LineChart/LineChart.js

@@ -22,6 +22,7 @@ const _EventAnnotation = require("./eventAnnotation/EventAnnotation");
 const _reacttheme = require("@fluentui/react-theme");
 const _imageexportutils = require("../../utilities/image-export-utils");
 const _scatterpolarutils = require("../../utilities/scatterpolar-utils");
+const _chartutilities = require("@fluentui/chart-utilities");
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -937,7 +938,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
             }
         }
         const { xAxisCalloutData } = lineChartData[linenumber].data[index];
-        const formattedDate = xPointToHighlight instanceof Date ? (0, _index1.formatDate)(xPointToHighlight, props.useUTC) : xPointToHighlight;
+        const formattedDate = xPointToHighlight instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
         const modifiedXVal = xPointToHighlight instanceof Date ? xPointToHighlight.getTime() : xPointToHighlight;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const found = (0, _index1.find)(_calloutPoints, (element)=>{
@@ -972,7 +973,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         cy = targetRect.top + targetRect.height / 2;
         updatePosition(cx, cy);
         _uniqueCallOutID = circleId;
-        const formattedData = x instanceof Date ? (0, _index1.formatDate)(x, props.useUTC) : x;
+        const formattedData = x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
         const xVal = x instanceof Date ? x.getTime() : x;
         const found = (0, _index1.find)(_calloutPoints, (element)=>element.x === xVal);
         // if no points need to be called out then don't show vertical line and callout card
@@ -994,7 +995,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     }
     function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor) {
         mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
-        const formattedData = x instanceof Date ? (0, _index1.formatDate)(x, props.useUTC) : x;
+        const formattedData = x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
         const xVal = x instanceof Date ? x.getTime() : x;
         const yVal = y instanceof Date ? y.getTime() : y;
         const found = (0, _index1.find)(_calloutPoints, (element)=>element.x === xVal);
@@ -1140,7 +1141,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
         var _point_callOutAccessibilityData;
         const line = _points[lineIndex];
         const point = line.data[pointIndex];
-        const formattedDate = point.x instanceof Date ? (0, _index1.formatDate)(point.x, props.useUTC) : point.x;
+        const formattedDate = point.x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(point.x, props.culture, props.useUTC) : point.x;
         const xValue = point.xAxisCalloutData || formattedDate;
         const legend = line.legend;
         const yValue = point.yAxisCalloutData || point.y;