@fluentui/react-charts 9.3.6 → 9.3.8

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

@@ -21,9 +21,9 @@ const _index1 = require("../../utilities/index");
 const _index2 = require("../../index");
 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");
+const _hooks = require("../../utilities/hooks");
 var PointSize = /*#__PURE__*/ function(PointSize) {
     PointSize[PointSize["hoverSize"] = 11] = "hoverSize";
     PointSize[PointSize["invisibleSize"] = 1] = "invisibleSize";
@@ -122,7 +122,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
     let lines;
     let _renderedColorFillBars;
     const _colorFillBars = _react.useRef([]);
-    let _tooltipId = (0, _reactutilities.useId)('LineChartTooltipId_');
     let _rectId = (0, _reactutilities.useId)('containerRectLD');
     let _staticHighlightCircle = (0, _reactutilities.useId)('staticHighlightCircle');
     let _firstRenderOptimization = true;
@@ -130,9 +129,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
     const _colorFillBarId = (0, _reactutilities.useId)('_colorFillBarId');
     const _isRTL = (0, _index1.useRtl)();
     let xAxisCalloutAccessibilityData = {};
-    const cartesianChartRef = _react.useRef(null);
+    const { cartesianChartRef, legendsRef: _legendsRef } = (0, _hooks.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('');
@@ -170,21 +168,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
         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 (0, _imageexportutils.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 === _index1.XAxisTypes.NumericAxis) {
-            domainNRangeValue = (0, _index1.domainRangeOfNumericForAreaLineScatterCharts)(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode);
+            domainNRangeValue = (0, _index1.domainRangeOfNumericForAreaLineScatterCharts)(points, margins, width, isRTL, props.xScaleType, _hasMarkersMode, props.xMinValue, props.xMaxValue);
         } else if (xAxisType === _index1.XAxisTypes.DateAxis) {
             domainNRangeValue = (0, _index1.domainRangeOfDateForAreaLineScatterVerticalBarCharts)(points, margins, width, isRTL, tickValues, chartType, barWidth, _hasMarkersMode);
         } else {
@@ -242,7 +229,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
         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 } = (0, _index1.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale, useSecondaryYScale ? props.secondaryYScaleType : props.yScaleType);
         let yPadding = {
             start: 0,
@@ -445,10 +431,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                 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);
@@ -479,7 +468,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                         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);
                         },
@@ -542,7 +530,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                         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',
@@ -562,7 +549,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                         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',
@@ -579,6 +566,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                     cy: 0,
                     fill: _reacttheme.tokens.colorNeutralBackground1,
                     strokeWidth: DEFAULT_LINE_STROKE_SIZE,
+                    tabIndex: isLegendSelected ? 0 : undefined,
                     stroke: lineColor,
                     visibility: 'hidden',
                     onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
@@ -602,11 +590,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                                 cx: xPoint,
                                 cy: yPoint,
                                 fill: activePoint === _circleId ? _reacttheme.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
                             }));
                         }
@@ -644,7 +634,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                             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,
@@ -667,7 +657,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                             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,
@@ -706,7 +695,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                                 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,
@@ -728,7 +717,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                                 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,
@@ -863,27 +851,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
                 "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 = (0, _d3selection.select)(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 && (0, _index1.tooltipOfAxislabels)(tooltipProps);
-        }
         return lines;
     }
     function _createColorFillBars(containerHeight) {
@@ -956,6 +923,50 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
             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 (!(0, _index1.isPlottable)(xPoint, yPoint)) {
+            return;
+        }
+        const found = (0, _index1.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}`;
+            (0, _d3selection.select)(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${xPoint}`).attr('cy', `${yPoint}`).attr('visibility', 'visibility');
+            (0, _d3selection.select)(`#${_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 ? (0, _chartutilities.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;
@@ -1000,29 +1011,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
         }
         const { xAxisCalloutData } = lineChartData[linenumber].data[index];
         const formattedDate = xPointToHighlight instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
-        const found = (0, _index1.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}`;
-            (0, _d3selection.select)(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
-            (0, _d3selection.select)(`#${_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;
@@ -1199,6 +1189,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
         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);
     }
@@ -1225,7 +1219,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
         color: lineColor,
         XValue: hoverXValue,
         descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps ? props.getCalloutDescriptionMessage(stackCalloutProps) : undefined,
-        'data-is-focusable': true,
+        tabIndex: 0,
         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
         ...props.calloutProps,
         isPopoverOpen: isPopoverOpen,
@@ -1247,7 +1241,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
     };
     return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement(_index2.CartesianChart, {
         ...props,
-        chartTitle: props.data.chartTitle,
+        chartTitle: _getChartTitle(),
         points: points,
         chartType: _index1.ChartTypes.LineChart,
         calloutProps: calloutProps,
@@ -1267,7 +1261,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef(({ isCalloutForStack = true, .
         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;