From: Jukka Kurkela Date: Tue, 15 Dec 2020 06:50:13 +0000 (+0200) Subject: Fix legend alignment issues (#8168) X-Git-Tag: v3.0.0-beta.8~64 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=979cd4131be137617fecf14cbf2fb98d9e2e5e32;p=thirdparty%2FChart.js.git Fix legend alignment issues (#8168) --- diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index a1614187c..3fbed828c 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -231,7 +231,7 @@ export class Legend extends Element { */ _draw() { const me = this; - const {options: opts, height: legendHeight, width: legendWidth, columnSizes, lineWidths, ctx, legendHitBoxes} = me; + const {options: opts, columnSizes, lineWidths, ctx, legendHitBoxes} = me; const {align, labels: labelOpts} = opts; const defaultColor = defaults.color; const rtlHelper = getRtlAdapter(opts.rtl, me.left, me.width); @@ -320,14 +320,14 @@ export class Legend extends Element { const titleHeight = this._computeTitleHeight(); if (isHorizontal) { cursor = { - x: me.left + _alignStartEnd(align, padding, legendWidth - lineWidths[0]), + x: _alignStartEnd(align, me.left + padding, me.right - lineWidths[0]), y: me.top + padding + titleHeight, line: 0 }; } else { cursor = { x: me.left + padding, - y: me.top + _alignStartEnd(align, padding, legendHeight - columnSizes[0].height) + titleHeight, + y: _alignStartEnd(align, me.top + titleHeight + padding, me.bottom - columnSizes[0].height), line: 0 }; } @@ -347,12 +347,12 @@ export class Legend extends Element { if (i > 0 && x + width + padding > me.right) { y = cursor.y += lineHeight; cursor.line++; - x = cursor.x = me.left + _alignStartEnd(align, padding, legendWidth - lineWidths[cursor.line]); + x = cursor.x = _alignStartEnd(align, me.left + padding, me.right - lineWidths[cursor.line]); } } else if (i > 0 && y + lineHeight > me.bottom) { x = cursor.x = x + columnSizes[cursor.line].width + padding; cursor.line++; - y = cursor.y = me.top + _alignStartEnd(align, padding, legendHeight - columnSizes[cursor.line].height); + y = cursor.y = _alignStartEnd(align, me.top + titleHeight + padding, me.bottom - columnSizes[cursor.line].height); } const realX = rtlHelper.x(x); @@ -393,7 +393,8 @@ export class Legend extends Element { const ctx = me.ctx; const position = titleOpts.position; const halfFontSize = titleFont.size / 2; - let y = me.top + titlePadding.top + halfFontSize; + const topPaddingPlusHalfFontSize = titlePadding.top + halfFontSize; + let y; // These defaults are used when the legend is vertical. // When horizontal, they are computed below. @@ -403,11 +404,12 @@ export class Legend extends Element { if (this.isHorizontal()) { // Move left / right so that the title is above the legend lines maxWidth = Math.max(...me.lineWidths); + y = me.top + topPaddingPlusHalfFontSize; left = _alignStartEnd(opts.align, left, me.right - maxWidth); } else { // Move down so that the title is above the legend stack in every alignment const maxHeight = me.columnSizes.reduce((acc, size) => Math.max(acc, size.height), 0); - y = _alignStartEnd(opts.align, y, me.height - maxHeight); + y = topPaddingPlusHalfFontSize + _alignStartEnd(opts.align, me.top, me.bottom - maxHeight - opts.labels.padding - me._computeTitleHeight()); } // Now that we know the left edge of the inner legend box, compute the correct diff --git a/test/fixtures/plugin.legend/title/bottom-center-center.js b/test/fixtures/plugin.legend/title/bottom-center-center.js new file mode 100644 index 000000000..487e86708 --- /dev/null +++ b/test/fixtures/plugin.legend/title/bottom-center-center.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'bottom', + align: 'center', + title: { + display: true, + position: 'center', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/bottom-center-center.png b/test/fixtures/plugin.legend/title/bottom-center-center.png new file mode 100644 index 000000000..7782dc715 Binary files /dev/null and b/test/fixtures/plugin.legend/title/bottom-center-center.png differ diff --git a/test/fixtures/plugin.legend/title/bottom-end-end.js b/test/fixtures/plugin.legend/title/bottom-end-end.js new file mode 100644 index 000000000..71c3e9680 --- /dev/null +++ b/test/fixtures/plugin.legend/title/bottom-end-end.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'bottom', + align: 'end', + title: { + display: true, + position: 'end', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/bottom-end-end.png b/test/fixtures/plugin.legend/title/bottom-end-end.png new file mode 100644 index 000000000..1fb3cbeb1 Binary files /dev/null and b/test/fixtures/plugin.legend/title/bottom-end-end.png differ diff --git a/test/fixtures/plugin.legend/title/bottom-start-start.js b/test/fixtures/plugin.legend/title/bottom-start-start.js new file mode 100644 index 000000000..18f2d5a82 --- /dev/null +++ b/test/fixtures/plugin.legend/title/bottom-start-start.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'bottom', + align: 'start', + title: { + display: true, + position: 'start', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/bottom-start-start.png b/test/fixtures/plugin.legend/title/bottom-start-start.png new file mode 100644 index 000000000..def10089a Binary files /dev/null and b/test/fixtures/plugin.legend/title/bottom-start-start.png differ diff --git a/test/fixtures/plugin.legend/title/left-center-center.js b/test/fixtures/plugin.legend/title/left-center-center.js new file mode 100644 index 000000000..f834ab67c --- /dev/null +++ b/test/fixtures/plugin.legend/title/left-center-center.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'left', + align: 'center', + title: { + display: true, + position: 'center', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/left-center-center.png b/test/fixtures/plugin.legend/title/left-center-center.png new file mode 100644 index 000000000..7ffd40094 Binary files /dev/null and b/test/fixtures/plugin.legend/title/left-center-center.png differ diff --git a/test/fixtures/plugin.legend/title/left-end-end.js b/test/fixtures/plugin.legend/title/left-end-end.js new file mode 100644 index 000000000..ecb01b0dc --- /dev/null +++ b/test/fixtures/plugin.legend/title/left-end-end.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'left', + align: 'end', + title: { + display: true, + position: 'end', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/left-end-end.png b/test/fixtures/plugin.legend/title/left-end-end.png new file mode 100644 index 000000000..a60610ab5 Binary files /dev/null and b/test/fixtures/plugin.legend/title/left-end-end.png differ diff --git a/test/fixtures/plugin.legend/title/left-start-start.js b/test/fixtures/plugin.legend/title/left-start-start.js new file mode 100644 index 000000000..feb9bef66 --- /dev/null +++ b/test/fixtures/plugin.legend/title/left-start-start.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'left', + align: 'start', + title: { + display: true, + position: 'start', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/left-start-start.png b/test/fixtures/plugin.legend/title/left-start-start.png new file mode 100644 index 000000000..c1d4267a3 Binary files /dev/null and b/test/fixtures/plugin.legend/title/left-start-start.png differ diff --git a/test/fixtures/plugin.legend/title/right-center-center.js b/test/fixtures/plugin.legend/title/right-center-center.js new file mode 100644 index 000000000..bc35dccac --- /dev/null +++ b/test/fixtures/plugin.legend/title/right-center-center.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'right', + align: 'center', + title: { + display: true, + position: 'center', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/right-center-center.png b/test/fixtures/plugin.legend/title/right-center-center.png new file mode 100644 index 000000000..9900784a4 Binary files /dev/null and b/test/fixtures/plugin.legend/title/right-center-center.png differ diff --git a/test/fixtures/plugin.legend/title/right-end-end.js b/test/fixtures/plugin.legend/title/right-end-end.js new file mode 100644 index 000000000..1dad12c10 --- /dev/null +++ b/test/fixtures/plugin.legend/title/right-end-end.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'right', + align: 'end', + title: { + display: true, + position: 'end', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/right-end-end.png b/test/fixtures/plugin.legend/title/right-end-end.png new file mode 100644 index 000000000..ec2acbf13 Binary files /dev/null and b/test/fixtures/plugin.legend/title/right-end-end.png differ diff --git a/test/fixtures/plugin.legend/title/right-start-start.js b/test/fixtures/plugin.legend/title/right-start-start.js new file mode 100644 index 000000000..fee2f38ef --- /dev/null +++ b/test/fixtures/plugin.legend/title/right-start-start.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'right', + align: 'start', + title: { + display: true, + position: 'start', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/right-start-start.png b/test/fixtures/plugin.legend/title/right-start-start.png new file mode 100644 index 000000000..89c5286ef Binary files /dev/null and b/test/fixtures/plugin.legend/title/right-start-start.png differ diff --git a/test/fixtures/plugin.legend/title/top-center-center.js b/test/fixtures/plugin.legend/title/top-center-center.js new file mode 100644 index 000000000..4ea2e46f0 --- /dev/null +++ b/test/fixtures/plugin.legend/title/top-center-center.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'top', + align: 'center', + title: { + display: true, + position: 'center', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/top-center-center.png b/test/fixtures/plugin.legend/title/top-center-center.png new file mode 100644 index 000000000..0a1a3f33a Binary files /dev/null and b/test/fixtures/plugin.legend/title/top-center-center.png differ diff --git a/test/fixtures/plugin.legend/title/top-end-end.js b/test/fixtures/plugin.legend/title/top-end-end.js new file mode 100644 index 000000000..faa873985 --- /dev/null +++ b/test/fixtures/plugin.legend/title/top-end-end.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'top', + align: 'end', + title: { + display: true, + position: 'end', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/top-end-end.png b/test/fixtures/plugin.legend/title/top-end-end.png new file mode 100644 index 000000000..76b8a0ba0 Binary files /dev/null and b/test/fixtures/plugin.legend/title/top-end-end.png differ diff --git a/test/fixtures/plugin.legend/title/top-start-start.js b/test/fixtures/plugin.legend/title/top-start-start.js new file mode 100644 index 000000000..9a893fbaf --- /dev/null +++ b/test/fixtures/plugin.legend/title/top-start-start.js @@ -0,0 +1,36 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {label: 'a', data: []}, + {label: 'b', data: []}, + {label: 'c', data: []} + ] + }, + options: { + plugins: { + legend: { + position: 'top', + align: 'start', + title: { + display: true, + position: 'start', + text: 'title' + } + } + }, + scales: { + x: {display: false}, + y: {display: false} + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 256 + } + } +}; diff --git a/test/fixtures/plugin.legend/title/top-start-start.png b/test/fixtures/plugin.legend/title/top-start-start.png new file mode 100644 index 000000000..b29e80e22 Binary files /dev/null and b/test/fixtures/plugin.legend/title/top-start-start.png differ