@fluentui/react-charts 0.0.0-nightly-20250815-0407.1 → 0.0.0-nightly-20250819-0407.1

package/lib/components/LineChart/LineChart.js

@@ -437,7 +437,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 const circleId = `${_circleId}_${i}`;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                 const currentMarkerSize = _points[i].data[0].markerSize;
-                pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
+                var _points_i_data__text;
+                pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
                     id: circleId,
                     key: circleId,
                     r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
@@ -452,7 +453,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
                     stroke: activePoint === circleId ? lineColor : '',
                     role: "img",
-                    "aria-label": _getAriaLabel(i, 0),
+                    "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);
@@ -460,7 +461,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                     onBlur: _handleMouseOut,
                     ..._getClickHandler(_points[i].data[0].onDataPointClick)
-                }));
+                }), _points[i].data[0].text && /*#__PURE__*/ React.createElement("text", {
+                    key: `${circleId}-label`,
+                    x: _xAxisScale(x1),
+                    y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
+                    className: classes.markerLabel,
+                    opacity: isLegendSelected ? 1 : 0.1
+                }, _points[i].data[0].text)));
             }
             let gapIndex = 0;
             var _points_i_gaps_sort;
@@ -562,7 +569,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                     const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
                     let currentMarkerSize = _points[i].data[j - 1].markerSize;
-                    pointsForLine.push(((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions8.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('markers')) ? /*#__PURE__*/ React.createElement("circle", {
+                    var _points_i_data__text1;
+                    pointsForLine.push(((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions8.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('markers')) ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
                         id: circleId,
                         key: circleId,
                         r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
@@ -580,8 +588,14 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         stroke: lineColor,
                         strokeWidth: strokeWidth,
                         role: "img",
-                        "aria-label": _getAriaLabel(i, j - 1)
-                    }) : /*#__PURE__*/ React.createElement("path", {
+                        "aria-label": (_points_i_data__text1 = _points[i].data[j - 1].text) !== null && _points_i_data__text1 !== void 0 ? _points_i_data__text1 : _getAriaLabel(i, j - 1)
+                    }), _points[i].data[j - 1].text && /*#__PURE__*/ React.createElement("text", {
+                        key: `${circleId}-label`,
+                        x: _xAxisScale(x1),
+                        y: yScale(y1) + 12,
+                        fontSize: 12,
+                        className: classes.markerLabel
+                    }, _points[i].data[j - 1].text)) : /*#__PURE__*/ React.createElement("path", {
                         id: circleId,
                         key: circleId,
                         d: path,
@@ -609,9 +623,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         path = _getPath(_xAxisScale(x2), yScale(y2), lastCircleId, j, true, _points[i].index);
                         const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
                         currentMarkerSize = _points[i].data[j].markerSize;
+                        var _points_i_data_j_text;
                         pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
                             key: `${lastCircleId}_container`
-                        }, ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) ? /*#__PURE__*/ React.createElement("circle", {
+                        }, ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
                             id: lastCircleId,
                             key: lastCircleId,
                             r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
@@ -629,8 +644,14 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             stroke: lineColor,
                             strokeWidth: strokeWidth,
                             role: "img",
-                            "aria-label": _getAriaLabel(i, j)
-                        }) : /*#__PURE__*/ React.createElement("path", {
+                            "aria-label": (_points_i_data_j_text = _points[i].data[j].text) !== null && _points_i_data_j_text !== void 0 ? _points_i_data_j_text : _getAriaLabel(i, j)
+                        }), _points[i].data[j].text && /*#__PURE__*/ React.createElement("text", {
+                            key: `${lastCircleId}-label`,
+                            x: _xAxisScale(x2),
+                            y: yScale(y2) + 12,
+                            fontSize: 12,
+                            className: classes.markerLabel
+                        }, _points[i].data[j].text)) : /*#__PURE__*/ React.createElement("path", {
                             id: lastCircleId,
                             key: lastCircleId,
                             d: path,