@fluentui/react-charts 0.0.0-nightly-20251210-0407.1 → 0.0.0-nightly-20251212-0406.1

package/lib/components/LineChart/LineChart.js

@@ -464,7 +464,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);
                         },
@@ -527,7 +526,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',
@@ -547,7 +545,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',
@@ -564,6 +562,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),
@@ -587,11 +586,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
                             }));
                         }
@@ -629,7 +630,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,
@@ -652,7 +653,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,
@@ -691,7 +691,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,
@@ -713,7 +713,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,
@@ -941,6 +940,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;
@@ -985,35 +1028,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];
-        // 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 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('');
-        }
+        _updateLargeDatasetHighlightAndCallout(linenumber, lineHeight, pointToHighlight, xAxisCalloutData, formattedDate, yScale);
     };
     function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
         _uniqueCallOutID = circleId;
@@ -1216,7 +1232,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,