npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20250909-0406.1 → 0.0.0-nightly-20250910-0406.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/lib/components/DonutChart/DonutChart.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { Pie } from './Pie/index';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
+import { areArraysEqual, getColorFromToken, getNextColor, MIN_DONUT_RADIUS, useRtl } from '../../utilities/index';
 import { Legends } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
@@ -14,6 +14,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
  * Donutchart component.
  * {@docCategory DonutChart}
  */ export const DonutChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    var _props_legendProps;
     const _rootElem = React.useRef(null);
     const _uniqText = useId('_Pie_');
     /* eslint-disable @typescript-eslint/no-explicit-any */ let _calloutAnchorPoint;
@@ -24,11 +25,11 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
     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({
@@ -36,11 +37,25 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         y: 0
     });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const prevPropsRef = React.useRef(null);
     const _legendsRef = React.useRef(null);
     const _isRTL = useRtl();
     React.useEffect(()=>{
         _fitParentContainer();
     }, []);
+    React.useEffect(()=>{
+        if (prevPropsRef.current) {
+            var _prevProps_legendProps, _props_legendProps;
+            const prevProps = prevPropsRef.current;
+            if (!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();
@@ -81,19 +96,12 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
             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;
@@ -103,10 +111,23 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
             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;
@@ -114,7 +135,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         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);
@@ -126,7 +147,7 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
     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);
@@ -146,16 +167,18 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
         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;
         }
@@ -171,9 +194,16 @@ const MIN_LEGEND_CONTAINER_HEIGHT = 40;
      * 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/components/DonutChart/DonutChart.js.map CHANGED Viewed

	@@ -1 +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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"}
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 { 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/components/DonutChart/Pie/Pie.types.js.map CHANGED Viewed

	@@ -1 +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":"AAiGA,WAUC"}
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":"AAiGA,WAUC"}

package/lib/components/LineChart/LineChart.js CHANGED Viewed

@@ -10,9 +10,10 @@ import { find } from '../../utilities/index';
 import { CartesianChart } from '../../index';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
 import { tokens } from '@fluentui/react-theme';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, formatDate, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -932,7 +933,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
             }
         }
         const { xAxisCalloutData } = lineChartData[linenumber].data[index];
-        const formattedDate = xPointToHighlight instanceof Date ? formatDate(xPointToHighlight, props.useUTC) : xPointToHighlight;
+        const formattedDate = xPointToHighlight instanceof Date ? 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 = find(_calloutPoints, (element)=>{
@@ -967,7 +968,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         cy = targetRect.top + targetRect.height / 2;
         updatePosition(cx, cy);
         _uniqueCallOutID = circleId;
-        const formattedData = x instanceof Date ? formatDate(x, props.useUTC) : x;
+        const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
         const xVal = x instanceof Date ? x.getTime() : x;
         const found = find(_calloutPoints, (element)=>element.x === xVal);
         // if no points need to be called out then don't show vertical line and callout card
@@ -989,7 +990,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     }
     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 ? formatDate(x, props.useUTC) : x;
+        const formattedData = x instanceof Date ? 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 = find(_calloutPoints, (element)=>element.x === xVal);
@@ -1135,7 +1136,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         var _point_callOutAccessibilityData;
         const line = _points[lineIndex];
         const point = line.data[pointIndex];
-        const formattedDate = point.x instanceof Date ? formatDate(point.x, props.useUTC) : point.x;
+        const formattedDate = point.x instanceof Date ? formatDateToLocaleString(point.x, props.culture, props.useUTC) : point.x;
         const xValue = point.xAxisCalloutData || formattedDate;
         const legend = line.legend;
         const yValue = point.yAxisCalloutData || point.y;