@fluentui/react-charting 5.23.89 → 5.23.90

package/lib/components/LineChart/LineChart.base.js

@@ -725,25 +725,35 @@ var LineChartBase = /** @class */ (function (_super) {
         var _this_1 = this;
         var _a = this.props, legendProps = _a.legendProps, _b = _a.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _b === void 0 ? false : _b;
         var isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-        var legendDataItems = data.map(function (point) {
-            var color = point.color;
+        var mapLegendToPoints = {};
+        data.forEach(function (point) {
+            if (point.legend) {
+                if (!mapLegendToPoints[point.legend]) {
+                    mapLegendToPoints[point.legend] = [];
+                }
+                mapLegendToPoints[point.legend].push(point);
+            }
+        });
+        var legendDataItems = Object.entries(mapLegendToPoints).map(function (_a) {
+            var legendTitle = _a[0], points = _a[1];
+            var representativePoint = points[0];
             // mapping data to the format Legends component needs
-            var legend = __assign(__assign({ title: point.legend, color: color, action: function () {
+            var legend = __assign(__assign({ title: legendTitle, color: representativePoint.color, action: function () {
                     if (isLegendMultiSelectEnabled) {
-                        _this_1._handleMultipleLineLegendSelectionAction(point);
+                        points.forEach(function (p) { return _this_1._handleMultipleLineLegendSelectionAction(p); });
                     }
                     else {
-                        _this_1._handleSingleLegendSelectionAction(point);
+                        points.forEach(function (p) { return _this_1._handleSingleLegendSelectionAction(p); });
                     }
                 }, onMouseOutAction: function () {
                     _this_1.setState({ activeLegend: '' });
                 }, hoverAction: function () {
                     _this_1._handleChartMouseLeave();
-                    _this_1.setState({ activeLegend: point.legend });
-                } }, (point.legendShape && {
-                shape: point.legendShape,
+                    _this_1.setState({ activeLegend: legendTitle });
+                } }, (representativePoint.legendShape && {
+                shape: representativePoint.legendShape,
             })), (allowMultipleShapesForPoints && {
-                shape: Points[point.index % Object.keys(pointTypes).length],
+                shape: Points[representativePoint.index % Object.keys(pointTypes).length],
             }));
             return legend;
         });