@fluentui/react-charting 5.23.89 → 5.23.90

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

@@ -716,25 +716,35 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             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 = tslib_1.__assign(tslib_1.__assign({ title: point.legend, color: color, action: function () {
+                var legend = tslib_1.__assign(tslib_1.__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: index_3.Points[point.index % Object.keys(index_3.pointTypes).length],
+                    shape: index_3.Points[representativePoint.index % Object.keys(index_3.pointTypes).length],
                 }));
                 return legend;
             });