@fluentui/react-charts 9.3.6 → 9.3.8

package/lib/components/LineChart/LineChart.js

@@ -11,10 +11,10 @@ import { find, findCalloutPoints } 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, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfNumericForAreaLineScatterCharts, createStringYAxis, useRtl, getCurveFactory, isScatterPolarSeries, getDomainPaddingForMarkers, isPlottable, getRangeForScatterMarkerSize } from '../../utilities/index';
 import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+import { useImageExport } from '../../utilities/hooks';
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -117,7 +117,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
     let lines;
     let _renderedColorFillBars;
     const _colorFillBars = React.useRef([]);
-    let _tooltipId = useId('LineChartTooltipId_');
     let _rectId = useId('containerRectLD');
     let _staticHighlightCircle = useId('staticHighlightCircle');
     let _firstRenderOptimization = true;
@@ -125,9 +124,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
     const _colorFillBarId = useId('_colorFillBarId');
     const _isRTL = useRtl();
     let xAxisCalloutAccessibilityData = {};
-    const cartesianChartRef = React.useRef(null);
+    const { cartesianChartRef, legendsRef: _legendsRef } = useImageExport(props.componentRef, props.hideLegend);
     let _yScaleSecondary;
-    const _legendsRef = React.useRef(null);
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
     const [hoverXValue, setHoverXValue] = React.useState('');
     const [activeLegend, setActiveLegend] = React.useState('');
@@ -165,21 +163,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
         props.width,
         props.data
     ]);
-    React.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return toImage((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
-            }
-        };
-    }, []);
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues) {
         let domainNRangeValue;
         if (xAxisType === XAxisTypes.NumericAxis) {
-            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode);
+            domainNRangeValue = domainRangeOfNumericForAreaLineScatterCharts(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode, props.xMinValue, props.xMaxValue);
         } else if (xAxisType === XAxisTypes.DateAxis) {
             domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth, _hasMarkersMode);
         } else {
@@ -237,7 +224,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
     function _getNumericMinMaxOfY(points, yAxisType, useSecondaryYScale) {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
         const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
         let yPadding = {
             start: 0,
@@ -440,10 +426,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 useSecondaryYScale,
                 xScaleType: props.xScaleType,
                 yScaleType: props.yScaleType,
-                secondaryYScaleType: props.secondaryYScaleType
+                secondaryYScaleType: props.secondaryYScaleType,
+                xMinValue: props.xMinValue,
+                xMaxValue: props.xMaxValue,
+                yMinValue: props.yMinValue,
+                yMaxValue: props.yMaxValue
             }) : 0;
             if (_points[i].data.length === 1) {
-                // eslint-disable-next-line @typescript-eslint/no-shadow
                 const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
                 const xPoint = _xAxisScale(x1);
                 const yPoint = yScale(y1);
@@ -474,7 +463,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         stroke: activePoint === circleId ? lineColor : '',
                         role: "img",
                         "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
-                        "data-is-focusable": isLegendSelected,
                         ref: (e)=>{
                             _refCallback(e, circleId);
                         },
@@ -537,7 +525,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         key: lineId,
                         d: line(lineData),
                         fill: "transparent",
-                        "data-is-focusable": true,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
                         strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
@@ -557,7 +544,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         key: lineId,
                         d: line(lineData),
                         fill: "transparent",
-                        "data-is-focusable": false,
+                        tabIndex: -1,
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
                         strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
@@ -574,6 +561,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     cy: 0,
                     fill: tokens.colorNeutralBackground1,
                     strokeWidth: DEFAULT_LINE_STROKE_SIZE,
+                    tabIndex: isLegendSelected ? 0 : undefined,
                     stroke: lineColor,
                     visibility: 'hidden',
                     onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
@@ -597,11 +585,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 cx: xPoint,
                                 cy: yPoint,
                                 fill: activePoint === _circleId ? tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
+                                tabIndex: isLegendSelected ? 0 : undefined,
                                 stroke: perPointColor || lineColor,
                                 strokeWidth: 1,
                                 opacity: isLegendSelected ? 1 : 0.1,
-                                onMouseMove: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
-                                onMouseOver: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
+                                onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
+                                onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
+                                onFocus: (event)=>_onFocusLargeDataset(i, verticaLineHeight, event, yScale, k),
                                 onMouseOut: _handleMouseOut
                             }));
                         }
@@ -639,7 +629,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
                             cx: xPoint1,
                             cy: yPoint1,
-                            "data-is-focusable": isLegendSelected,
+                            tabIndex: isLegendSelected ? 0 : undefined,
                             onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseOut: _handleMouseOut,
@@ -662,7 +652,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             id: circleId,
                             key: circleId,
                             d: path,
-                            "data-is-focusable": isLegendSelected,
                             onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                             onMouseOut: _handleMouseOut,
@@ -701,7 +690,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
                                 cx: xPoint2,
                                 cy: yPoint2,
-                                "data-is-focusable": isLegendSelected,
+                                tabIndex: isLegendSelected ? 0 : undefined,
                                 onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
@@ -723,7 +712,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                                 id: lastCircleId,
                                 key: lastCircleId,
                                 d: path,
-                                "data-is-focusable": isLegendSelected,
                                 onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
                                 onMouseOut: _handleMouseOut,
@@ -858,27 +846,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 "aria-label": `${legendVal}, line ${i + 1} of ${_points.length} with ${_points[i].data.length} data points.`
             }, bordersForLine, linesForLine, pointsForLine));
         }
-        // Removing un wanted tooltip div from DOM, when prop not provided.
-        if (!props.showXAxisLablesTooltip) {
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-        }
-        // Used to display tooltip at x axis labels.
-        if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
-            const xAxisElement = d3Select(xElement).call(_xAxisScale);
-            try {
-                document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
-            // eslint-disable-next-line no-empty
-            } catch (e) {}
-            const tooltipProps = {
-                tooltipCls: classes.tooltip,
-                id: _tooltipId,
-                axis: xAxisElement
-            };
-            xAxisElement && tooltipOfAxislabels(tooltipProps);
-        }
         return lines;
     }
     function _createColorFillBars(containerHeight) {
@@ -951,6 +918,50 @@ const PATH_MULTIPLY_SIZE = 2.5;
             refElement: element
         });
     }
+    // Helper function to update highlight circle, vertical line, and callout for large datasets
+    const _updateLargeDatasetHighlightAndCallout = (linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale)=>{
+        // Check if this point is plottable. If not, close the popover and return.
+        const xPoint = _xAxisScale(pointToHighlight.x);
+        const yPoint = yScale(pointToHighlight.y);
+        if (!isPlottable(xPoint, yPoint)) {
+            return;
+        }
+        const found = findCalloutPoints(calloutPointsRef.current, pointToHighlight.x);
+        const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
+        // if no points need to be called out then don't show vertical line and callout card
+        if (found && pointToHighlightUpdated) {
+            _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
+            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${xPoint}`).attr('cy', `${yPoint}`).attr('visibility', 'visibility');
+            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${xPoint}, ${yPoint})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yPoint}`);
+            const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
+            const rect = targetElement.getBoundingClientRect();
+            setNearestCircleToHighlight(pointToHighlight);
+            updatePosition(rect.x, rect.y);
+            setStackCalloutProps(found);
+            setYValueHover(found.values);
+            setDataPointCalloutProps(found);
+            xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue(formattedDate);
+            setActivePoint('');
+        }
+        if (!found) {
+            setPopoverOpen(false);
+            setNearestCircleToHighlight(pointToHighlight);
+            setActivePoint('');
+        }
+    };
+    const _onFocusLargeDataset = (linenumber, lineHeight, focusEvent, yScale, pointIndex)=>{
+        focusEvent.persist();
+        const { data } = props;
+        const { lineChartData } = data;
+        // For focus events, we use the provided point index directly
+        const pointToHighlight = lineChartData[linenumber].data[pointIndex];
+        if (!pointToHighlight) {
+            return;
+        }
+        const { xAxisCalloutData } = pointToHighlight;
+        const formattedDate = pointToHighlight.x instanceof Date ? formatDateToLocaleString(pointToHighlight.x, props.culture, props.useUTC) : pointToHighlight.x;
+        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
+    };
     const _onMouseOverLargeDataset = (linenumber, lineHeight, mouseEvent, yScale)=>{
         mouseEvent.persist();
         const { data } = props;
@@ -995,29 +1006,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
         }
         const { xAxisCalloutData } = lineChartData[linenumber].data[index];
         const formattedDate = xPointToHighlight instanceof Date ? formatDateToLocaleString(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
-        const found = findCalloutPoints(calloutPointsRef.current, xPointToHighlight);
         const pointToHighlight = lineChartData[linenumber].data[index];
-        const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
-        // if no points need to be called out then don't show vertical line and callout card
-        if (found && pointToHighlightUpdated) {
-            _uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
-            d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
-            d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
-            const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
-            const rect = targetElement.getBoundingClientRect();
-            setNearestCircleToHighlight(pointToHighlight);
-            updatePosition(rect.x, rect.y);
-            setStackCalloutProps(found);
-            setYValueHover(found.values);
-            setDataPointCalloutProps(found);
-            xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue(formattedDate);
-            setActivePoint('');
-        }
-        if (!found) {
-            setPopoverOpen(false);
-            setNearestCircleToHighlight(pointToHighlight);
-            setActivePoint('');
-        }
+        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
     };
     function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
         _uniqueCallOutID = circleId;
@@ -1194,6 +1184,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
         const yValue = point.yAxisCalloutData || point.y;
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
+    function _getChartTitle() {
+        const { chartTitle, lineChartData } = props.data;
+        return (chartTitle ? `${chartTitle}. ` : '') + `Line chart with ${(lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0} lines. `;
+    }
     function _isChartEmpty() {
         return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
     }
@@ -1220,7 +1214,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         color: lineColor,
         XValue: hoverXValue,
         descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
-        'data-is-focusable': true,
+        tabIndex: 0,
         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
         ...props.calloutProps,
         isPopoverOpen: isPopoverOpen,
@@ -1242,7 +1236,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
     };
     return !_isChartEmpty() ? /*#__PURE__*/ React.createElement(CartesianChart, {
         ...props,
-        chartTitle: props.data.chartTitle,
+        chartTitle: _getChartTitle(),
         points: points,
         chartType: ChartTypes.LineChart,
         calloutProps: calloutProps,
@@ -1262,7 +1256,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
         onChartMouseLeave: _handleChartMouseLeave,
         enableFirstRenderOptimization: props.enablePerfOptimization && _firstRenderOptimization,
         componentRef: cartesianChartRef,
-        /* eslint-disable react/jsx-no-bind */ // eslint-disable-next-line react/no-children-prop
         children: (props)=>{
             _xAxisScale = props.xScale;
             _yScalePrimary = props.yScalePrimary;