From: Dominic Jean Date: Thu, 1 Sep 2022 10:37:12 +0000 (-0400) Subject: enable pointStyleWidth for all legend style (#10639) X-Git-Tag: v4.0.0~33 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=0edb2ac604a4a93bcddfdaefc112bf4bd73b21fa;p=thirdparty%2FChart.js.git enable pointStyleWidth for all legend style (#10639) --- diff --git a/docs/configuration/legend.md b/docs/configuration/legend.md index 04045b3fd..3438c16c0 100644 --- 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 d79f6fb11..365386549 100644 --- 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 index 000000000..ad3c2c84e --- /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 index 000000000..d64692122 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 index 000000000..b359ca4a6 --- /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 index 000000000..e28ed492c Binary files /dev/null and b/test/fixtures/plugin.legend/pointStyle-width/legend-pointStyle-width.png differ