enable pointStyleWidth for all legend style (#10639)

diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md
index 04045b3fdf2554b59f3382081fd75ea05e5d9787..3438c16c0d51be35a592d6f8bd9449e389e66514 100644 (file)
--- a/docs/configuration/legend.md
+++ b/docs/configuration/legend.md
@@ -66,7 +66,7 @@ Namespace: `options.plugins.legend.labels`
 | [`pointStyle`](elements.md#point-styles) | [`pointStyle`](elements.md#types) | `'circle'` | If specified, this style of point is used for the legend. Only used if `usePointStyle` is true.
 | `textAlign` | `string` | `'center'` | Horizontal alignment of the label text. Options are: `'left'`, `'right'` or `'center'`.
 | `usePointStyle` | `boolean` | `false` | Label style will match corresponding point style (size is based on pointStyleWidth or the minimum value between boxWidth and font.size).
-| `pointStyleWidth` | `number` | `null` | If `usePointStyle` is true, the width of the point style used for the legend (only for `circle`, `rect` and `line` point stlye).
+| `pointStyleWidth` | `number` | `null` | If `usePointStyle` is true, the width of the point style used for the legend.
 | `useBorderRadius` | `boolean` | `false` | Label borderRadius will match coresponding borderRadius.
 | `borderRadius` | `number` | `undefined` | Override the borderRadius to use.
 

diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js
index d79f6fb112fc4dba422b162cafd69eba5596e931..365386549ba6667b2c268b22881bf6cfabb40fb0 100644 (file)
--- a/src/helpers/helpers.canvas.js
+++ b/src/helpers/helpers.canvas.js
@@ -131,7 +131,7 @@ export function drawPoint(ctx, options, x, y) {
 }
 
 export function drawPointLegend(ctx, options, x, y, w) {
-  let type, xOffset, yOffset, size, cornerRadius, width;
+  let type, xOffset, yOffset, size, cornerRadius, width, xOffsetW, yOffsetW;
   const style = options.pointStyle;
   const rotation = options.rotation;
   const radius = options.radius;
@@ -166,11 +166,12 @@ export function drawPointLegend(ctx, options, x, y, w) {
     ctx.closePath();
     break;
   case 'triangle':
-    ctx.moveTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
+    width = w ? w / 2 : radius;
+    ctx.moveTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
     rad += TWO_THIRDS_PI;
-    ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
+    ctx.lineTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
     rad += TWO_THIRDS_PI;
-    ctx.lineTo(x + Math.sin(rad) * radius, y - Math.cos(rad) * radius);
+    ctx.lineTo(x + Math.sin(rad) * width, y - Math.cos(rad) * radius);
     ctx.closePath();
     break;
   case 'rectRounded':
@@ -184,11 +185,13 @@ export function drawPointLegend(ctx, options, x, y, w) {
     cornerRadius = radius * 0.516;
     size = radius - cornerRadius;
     xOffset = Math.cos(rad + QUARTER_PI) * size;
+    xOffsetW = Math.cos(rad + QUARTER_PI) * (w ? w / 2 - cornerRadius : size);
     yOffset = Math.sin(rad + QUARTER_PI) * size;
-    ctx.arc(x - xOffset, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);
-    ctx.arc(x + yOffset, y - xOffset, cornerRadius, rad - HALF_PI, rad);
-    ctx.arc(x + xOffset, y + yOffset, cornerRadius, rad, rad + HALF_PI);
-    ctx.arc(x - yOffset, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);
+    yOffsetW = Math.sin(rad + QUARTER_PI) * (w ? w / 2 - cornerRadius : size);
+    ctx.arc(x - xOffsetW, y - yOffset, cornerRadius, rad - PI, rad - HALF_PI);
+    ctx.arc(x + yOffsetW, y - xOffset, cornerRadius, rad - HALF_PI, rad);
+    ctx.arc(x + xOffsetW, y + yOffset, cornerRadius, rad, rad + HALF_PI);
+    ctx.arc(x - yOffsetW, y + xOffset, cornerRadius, rad + HALF_PI, rad + PI);
     ctx.closePath();
     break;
   case 'rect':
@@ -201,39 +204,47 @@ export function drawPointLegend(ctx, options, x, y, w) {
     rad += QUARTER_PI;
     /* falls through */
   case 'rectRot':
+    xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
     xOffset = Math.cos(rad) * radius;
     yOffset = Math.sin(rad) * radius;
-    ctx.moveTo(x - xOffset, y - yOffset);
-    ctx.lineTo(x + yOffset, y - xOffset);
-    ctx.lineTo(x + xOffset, y + yOffset);
-    ctx.lineTo(x - yOffset, y + xOffset);
+    yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+    ctx.moveTo(x - xOffsetW, y - yOffset);
+    ctx.lineTo(x + yOffsetW, y - xOffset);
+    ctx.lineTo(x + xOffsetW, y + yOffset);
+    ctx.lineTo(x - yOffsetW, y + xOffset);
     ctx.closePath();
     break;
   case 'crossRot':
     rad += QUARTER_PI;
     /* falls through */
   case 'cross':
+    xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
     xOffset = Math.cos(rad) * radius;
     yOffset = Math.sin(rad) * radius;
-    ctx.moveTo(x - xOffset, y - yOffset);
-    ctx.lineTo(x + xOffset, y + yOffset);
-    ctx.moveTo(x + yOffset, y - xOffset);
-    ctx.lineTo(x - yOffset, y + xOffset);
+    yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+    ctx.moveTo(x - xOffsetW, y - yOffset);
+    ctx.lineTo(x + xOffsetW, y + yOffset);
+    ctx.moveTo(x + yOffsetW, y - xOffset);
+    ctx.lineTo(x - yOffsetW, y + xOffset);
     break;
   case 'star':
+    xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
     xOffset = Math.cos(rad) * radius;
     yOffset = Math.sin(rad) * radius;
-    ctx.moveTo(x - xOffset, y - yOffset);
-    ctx.lineTo(x + xOffset, y + yOffset);
-    ctx.moveTo(x + yOffset, y - xOffset);
-    ctx.lineTo(x - yOffset, y + xOffset);
+    yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+    ctx.moveTo(x - xOffsetW, y - yOffset);
+    ctx.lineTo(x + xOffsetW, y + yOffset);
+    ctx.moveTo(x + yOffsetW, y - xOffset);
+    ctx.lineTo(x - yOffsetW, y + xOffset);
     rad += QUARTER_PI;
+    xOffsetW = Math.cos(rad) * (w ? w / 2 : radius);
     xOffset = Math.cos(rad) * radius;
     yOffset = Math.sin(rad) * radius;
-    ctx.moveTo(x - xOffset, y - yOffset);
-    ctx.lineTo(x + xOffset, y + yOffset);
-    ctx.moveTo(x + yOffset, y - xOffset);
-    ctx.lineTo(x - yOffset, y + xOffset);
+    yOffsetW = Math.sin(rad) * (w ? w / 2 : radius);
+    ctx.moveTo(x - xOffsetW, y - yOffset);
+    ctx.lineTo(x + xOffsetW, y + yOffset);
+    ctx.moveTo(x + yOffsetW, y - xOffset);
+    ctx.lineTo(x - yOffsetW, y + xOffset);
     break;
   case 'line':
     xOffset = w ? w / 2 : Math.cos(rad) * radius;
@@ -243,7 +254,7 @@ export function drawPointLegend(ctx, options, x, y, w) {
     break;
   case 'dash':
     ctx.moveTo(x, y);
-    ctx.lineTo(x + Math.cos(rad) * radius, y + Math.sin(rad) * radius);
+    ctx.lineTo(x + Math.cos(rad) * (w ? w / 2 : radius), y + Math.sin(rad) * radius);
     break;
   }
 

diff --git a/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.json b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.json
new file mode 100644 (file)
index 0000000..ad3c2c8
--- /dev/null
+++ b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.json
@@ -0,0 +1,111 @@
+ {
+    "config": {
+        "type": "line",
+        "data": {
+            "labels": ["A", "B", "C"],
+            "datasets": [{
+                "data": [10, 10, 10],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "line"
+            },
+                       {
+                "data": [15, 15, 15],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "triangle"
+            },
+                       {
+                "data": [20, 20, 20],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "rectRounded"
+            },
+                       {
+                "data": [30, 30, 30],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": ""
+            },
+                       {
+                "data": [40, 40, 40],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "rect"
+            },
+                       {
+                "data": [25, 25, 25],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "rectRot"
+            },
+                       {
+                "data": [35, 35, 35],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "crossRot"
+            },
+                       {
+                "data": [45, 45, 45],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "cross"
+            },
+                       {
+                "data": [50, 50, 50],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "star"
+            },
+                       {
+                "data": [55, 55, 55],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "dash"
+            }]
+        },
+        "options": {
+            "plugins": {
+                "legend": {
+                    "display": true,
+                    "labels": {
+                        "usePointStyle": true                        
+                    }
+                }
+            },
+            "scales": {
+                "x": {
+                    "display": false
+                },
+                "y": {
+                    "display": false
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 512,
+            "width": 1024
+        }
+    }
+}
\ No newline at end of file

diff --git a/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.png b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.png
new file mode 100644 (file)
index 0000000..d646921
Binary files /dev/null and b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width-default.png differ

diff --git a/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.json b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.json
new file mode 100644 (file)
index 0000000..b359ca4
--- /dev/null
+++ b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.json
@@ -0,0 +1,112 @@
+ {
+    "config": {
+        "type": "line",
+        "data": {
+            "labels": ["A", "B", "C"],
+            "datasets": [{
+                "data": [10, 10, 10],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "line"
+            },
+                       {
+                "data": [15, 15, 15],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "triangle"
+            },
+                       {
+                "data": [20, 20, 20],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "rectRounded"
+            },
+                       {
+                "data": [30, 30, 30],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": ""
+            },
+                       {
+                "data": [40, 40, 40],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "rect"
+            },
+                       {
+                "data": [25, 25, 25],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "rectRot"
+            },
+                       {
+                "data": [35, 35, 35],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "crossRot"
+            },
+                       {
+                "data": [45, 45, 45],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "cross"
+            },
+                       {
+                "data": [50, 50, 50],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "star"
+            },
+                       {
+                "data": [55, 55, 55],
+                "backgroundColor": "#00ff00",
+                               "borderColor": "#ff0000",
+                "borderWidth": 1,
+                "label": "",
+                "pointStyle": "dash"
+            }]
+        },
+        "options": {
+            "plugins": {
+                "legend": {
+                    "display": true,
+                    "labels": {
+                        "usePointStyle": true,
+                        "pointStyleWidth": 75
+                    }
+                }
+            },
+            "scales": {
+                "x": {
+                    "display": false
+                },
+                "y": {
+                    "display": false
+                }
+            }
+        }
+    },
+    "options": {
+        "canvas": {
+            "height": 512,
+            "width": 1024
+        }
+    }
+}
\ No newline at end of file

diff --git a/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.png b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.png
new file mode 100644 (file)
index 0000000..e28ed49
Binary files /dev/null and b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.png differ