From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Mon, 26 Oct 2020 12:16:00 +0000 (-0400)
Subject: Enable overriding the legend pointStyle using new `pointStyle` option (#7959)
X-Git-Tag: v3.0.0-beta.5~15
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4ed650acbe0f2fd2d07d4d02aab339a4099785fe;p=thirdparty%2FChart.js.git

Enable overriding the legend pointStyle using new `pointStyle` option (#7959)
---

diff --git a/docs/docs/configuration/legend.md b/docs/docs/configuration/legend.md
index c9532a5bf..d130057de 100644
--- a/docs/docs/configuration/legend.md
+++ b/docs/docs/configuration/legend.md
@@ -57,6 +57,7 @@ The legend label configuration is nested below the legend configuration using th
 | `generateLabels` | `function` | | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See [Legend Item](#legend-item-interface) for details.
 | `filter` | `function` | `null` | Filters legend items out of the legend. Receives 2 parameters, a [Legend Item](#legend-item-interface) and the chart data.
 | `sort` | `function` | `null` | Sorts legend items. Receives 3 parameters, two [Legend Items](#legend-item-interface) and the chart data.
+| `pointStyle` | | | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
 | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on the minimum value between boxWidth and font.size).
 
 ## Legend Title Configuration
diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index c5de3d9c2..0329570d3 100644
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -740,8 +740,9 @@ export default {
 			// lineWidth :
 			generateLabels(chart) {
 				const datasets = chart.data.datasets;
-				const options = chart.options.legend || {};
-				const usePointStyle = options.labels && options.labels.usePointStyle;
+				const {labels} = chart.legend.options;
+				const usePointStyle = labels.usePointStyle;
+				const overrideStyle = labels.pointStyle;
 
 				return chart._getSortedDatasetMetas().map((meta) => {
 					const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);
@@ -756,7 +757,7 @@ export default {
 						lineJoin: style.borderJoinStyle,
 						lineWidth: style.borderWidth,
 						strokeStyle: style.borderColor,
-						pointStyle: style.pointStyle,
+						pointStyle: overrideStyle || style.pointStyle,
 						rotation: style.rotation,
 
 						// Below is extra data used for toggling the datasets
diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js
index 738e85167..cc6c17fa0 100644
--- a/test/specs/plugin.legend.tests.js
+++ b/test/specs/plugin.legend.tests.js
@@ -622,6 +622,74 @@ describe('Legend block tests', function() {
 		}]);
 	});
 
+	it('should draw correctly when usePointStyle is true and pointStyle override is set', function() {
+		var chart = window.acquireChart({
+			type: 'line',
+			data: {
+				datasets: [{
+					label: 'dataset1',
+					backgroundColor: '#f31',
+					borderCapStyle: 'butt',
+					borderDash: [2, 2],
+					borderDashOffset: 5.5,
+					borderWidth: 0,
+					borderColor: '#f31',
+					pointStyle: 'crossRot',
+					pointBackgroundColor: 'rgba(0,0,0,0.1)',
+					pointBorderWidth: 5,
+					pointBorderColor: 'green',
+					data: []
+				}, {
+					label: 'dataset2',
+					backgroundColor: '#f31',
+					borderJoinStyle: 'miter',
+					borderWidth: 2,
+					borderColor: '#f31',
+					pointStyle: 'crossRot',
+					pointRotation: 15,
+					data: []
+				}],
+				labels: []
+			},
+			options: {
+				legend: {
+					labels: {
+						usePointStyle: true,
+						pointStyle: 'star'
+					}
+				}
+			}
+		});
+
+		expect(chart.legend.legendItems).toEqual([{
+			text: 'dataset1',
+			fillStyle: 'rgba(0,0,0,0.1)',
+			hidden: false,
+			lineCap: undefined,
+			lineDash: undefined,
+			lineDashOffset: undefined,
+			lineJoin: undefined,
+			lineWidth: 5,
+			strokeStyle: 'green',
+			pointStyle: 'star',
+			rotation: undefined,
+			datasetIndex: 0
+		}, {
+			text: 'dataset2',
+			fillStyle: '#f31',
+			hidden: false,
+			lineCap: undefined,
+			lineDash: undefined,
+			lineDashOffset: undefined,
+			lineJoin: undefined,
+			lineWidth: 2,
+			strokeStyle: '#f31',
+			pointStyle: 'star',
+			rotation: 15,
+			datasetIndex: 1
+		}]);
+	});
+
 	describe('config update', function() {
 		it ('should update the options', function() {
 			var chart = acquireChart({
diff --git a/types/plugins/index.d.ts b/types/plugins/index.d.ts
index 0c0e8a701..2a28b848c 100644
--- a/types/plugins/index.d.ts
+++ b/types/plugins/index.d.ts
@@ -170,6 +170,11 @@ export interface ILegendOptions {
      */
     sort(a: ILegendItem, b: ILegendItem, data: IChartData): number;
 
+    /**
+     * Override point style for the legend. Only applies if usePointStyle is true
+     */
+    pointStyle: PointStyle;
+
     /**
      * Label style will match corresponding point style (size is based on the mimimum value between boxWidth and font.size).
      * @default false