From: Jonatan Date: Mon, 17 Oct 2022 18:28:31 +0000 (+0200) Subject: fix: label text not centered when applied rotation (#10773) X-Git-Tag: v4.0.0-alpha.3~8 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f5cb133551ff0e56061320e8ef2c5ba126faa94e;p=thirdparty%2FChart.js.git fix: label text not centered when applied rotation (#10773) * fix: label text not centered on tick when rotated #10485 * fix: label text not centered on tick when rotated #10485 --- diff --git a/src/core/core.scale.js b/src/core/core.scale.js index f741e2e60..cae728b4a 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1241,6 +1241,9 @@ export default class Scale extends Element { if (mirror) { textOffset *= -1; } + if (rotation !== 0 && !optsAtIndex.showLabelBackdrop) { + x += (lineHeight / 2) * Math.sin(rotation); + } } else { y = pixel; textOffset = (1 - lineCount) * lineHeight / 2; diff --git a/test/fixtures/core.layouts/refit-vertical-boxes.png b/test/fixtures/core.layouts/refit-vertical-boxes.png index c28d8c7dd..a01b75831 100644 Binary files a/test/fixtures/core.layouts/refit-vertical-boxes.png and b/test/fixtures/core.layouts/refit-vertical-boxes.png differ diff --git a/test/fixtures/core.scale/autoSkip/fit-after.png b/test/fixtures/core.scale/autoSkip/fit-after.png index c1def9722..8ca5b8d48 100644 Binary files a/test/fixtures/core.scale/autoSkip/fit-after.png and b/test/fixtures/core.scale/autoSkip/fit-after.png differ diff --git a/test/fixtures/core.scale/label-align-inner-rotate.png b/test/fixtures/core.scale/label-align-inner-rotate.png index d3aca46fa..cd21b4177 100644 Binary files a/test/fixtures/core.scale/label-align-inner-rotate.png and b/test/fixtures/core.scale/label-align-inner-rotate.png differ diff --git a/test/fixtures/core.scale/ticks/rotated-long.png b/test/fixtures/core.scale/ticks/rotated-long.png index 04bc0b644..e50ec2721 100644 Binary files a/test/fixtures/core.scale/ticks/rotated-long.png and b/test/fixtures/core.scale/ticks/rotated-long.png differ diff --git a/test/fixtures/core.scale/ticks/rotated-multi-line.png b/test/fixtures/core.scale/ticks/rotated-multi-line.png index 4c46fc3a0..ca9a7ef79 100644 Binary files a/test/fixtures/core.scale/ticks/rotated-multi-line.png and b/test/fixtures/core.scale/ticks/rotated-multi-line.png differ diff --git a/test/fixtures/scale.linear/min-max-skip/no-collision.png b/test/fixtures/scale.linear/min-max-skip/no-collision.png index dfd659613..57180871d 100644 Binary files a/test/fixtures/scale.linear/min-max-skip/no-collision.png and b/test/fixtures/scale.linear/min-max-skip/no-collision.png differ diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png index 358ef0172..f2e445b4d 100644 Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-1.png differ diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png index ef7e97d90..6e2a3d6b7 100644 Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-2.png differ diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png index a6c31dfaf..c0c3ddd6e 100644 Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-3.png differ diff --git a/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png b/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png index 9bdae09e5..33792bcd4 100644 Binary files a/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png and b/test/fixtures/scale.linear/min-max-skip/rotated-case-4.png differ diff --git a/test/fixtures/scale.linear/rotated-45.png b/test/fixtures/scale.linear/rotated-45.png index 933aa2280..04b8539a7 100644 Binary files a/test/fixtures/scale.linear/rotated-45.png and b/test/fixtures/scale.linear/rotated-45.png differ diff --git a/test/fixtures/scale.linear/rotated-5.png b/test/fixtures/scale.linear/rotated-5.png index 64b9fcf8a..4c833348f 100644 Binary files a/test/fixtures/scale.linear/rotated-5.png and b/test/fixtures/scale.linear/rotated-5.png differ diff --git a/test/fixtures/scale.linear/rotated-85.png b/test/fixtures/scale.linear/rotated-85.png index edf09fae3..da9e20e75 100644 Binary files a/test/fixtures/scale.linear/rotated-85.png and b/test/fixtures/scale.linear/rotated-85.png differ diff --git a/test/fixtures/scale.time/labels-date.png b/test/fixtures/scale.time/labels-date.png index 865729c65..2e88d0b0a 100644 Binary files a/test/fixtures/scale.time/labels-date.png and b/test/fixtures/scale.time/labels-date.png differ diff --git a/test/fixtures/scale.time/labels-strings.png b/test/fixtures/scale.time/labels-strings.png index 865729c65..2e88d0b0a 100644 Binary files a/test/fixtures/scale.time/labels-strings.png and b/test/fixtures/scale.time/labels-strings.png differ diff --git a/test/fixtures/scale.time/offset-auto-skip-ticks.png b/test/fixtures/scale.time/offset-auto-skip-ticks.png index 48630badf..a7168a277 100644 Binary files a/test/fixtures/scale.time/offset-auto-skip-ticks.png and b/test/fixtures/scale.time/offset-auto-skip-ticks.png differ diff --git a/test/fixtures/scale.time/ticks-round.png b/test/fixtures/scale.time/ticks-round.png index eb1317eaa..4a463d56c 100644 Binary files a/test/fixtures/scale.time/ticks-round.png and b/test/fixtures/scale.time/ticks-round.png differ diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index 3b30e5600..aedde2a14 100644 --- a/test/specs/core.scale.tests.js +++ b/test/specs/core.scale.tests.js @@ -700,5 +700,35 @@ describe('Core.scale', function() { expect(chart.scales.xavier.axis).toBe('y'); }); + it('should center labels when rotated in x axis', () => { + const chart = window.acquireChart({ + type: 'line', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [{ + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3] + }] + }, + options: { + scales: { + x: { + ticks: { + minRotation: 90, + } + } + } + } + }); + const mapper = item => parseFloat(item.translation[0].toFixed(2)); + const expected = [20.15, 113.6, 207.05, 300.5, 393.95, 487.4]; + const actual = chart.scales.x._labelItems.map(mapper); + const len = expected.length; + for (let i = 0; i < len; ++i) { + const actualValue = actual[i]; + const expectedValue = expected[i]; + expect(actualValue).toBeCloseTo(expectedValue, 1); + } + }); }); });