From: Jukka Kurkela Date: Sat, 10 Apr 2021 13:01:38 +0000 (+0300) Subject: Support mirror option on x-axis (#8867) X-Git-Tag: v3.1.0~8 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=7fab66ccd1637808868fc8b70b753642e82bd3b3;p=thirdparty%2FChart.js.git Support mirror option on x-axis (#8867) --- diff --git a/src/core/core.scale.js b/src/core/core.scale.js index dbdbb18c3..cca092319 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -640,7 +640,7 @@ export default class Scale extends Element { if (isHorizontal) { // A horizontal axis is more constrained by the height. - const labelHeight = sin * widest.width + cos * highest.height; + const labelHeight = tickOpts.mirror ? 0 : sin * widest.width + cos * highest.height; minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding); } else { // A vertical axis is more constrained by the width. Labels are the @@ -1122,26 +1122,27 @@ export default class Scale extends Element { const {position, ticks: optionTicks} = options; const isHorizontal = me.isHorizontal(); const ticks = me.ticks; - const {align, crossAlign, padding} = optionTicks; + const {align, crossAlign, padding, mirror} = optionTicks; const tl = getTickMarkLength(options.grid); const tickAndPadding = tl + padding; + const hTickAndPadding = mirror ? -padding : tickAndPadding; const rotation = -toRadians(me.labelRotation); const items = []; let i, ilen, tick, label, x, y, textAlign, pixel, font, lineHeight, lineCount, textOffset; let textBaseline = 'middle'; if (position === 'top') { - y = me.bottom - tickAndPadding; + y = me.bottom - hTickAndPadding; textAlign = me._getXAxisLabelAlignment(); } else if (position === 'bottom') { - y = me.top + tickAndPadding; + y = me.top + hTickAndPadding; textAlign = me._getXAxisLabelAlignment(); } else if (position === 'left') { - const ret = this._getYAxisLabelAlignment(tl); + const ret = me._getYAxisLabelAlignment(tl); textAlign = ret.textAlign; x = ret.x; } else if (position === 'right') { - const ret = this._getYAxisLabelAlignment(tl); + const ret = me._getYAxisLabelAlignment(tl); textAlign = ret.textAlign; x = ret.x; } else if (axis === 'x') { @@ -1161,7 +1162,7 @@ export default class Scale extends Element { const value = position[positionAxisID]; x = me.chart.scales[positionAxisID].getPixelForValue(value); } - textAlign = this._getYAxisLabelAlignment(tl).textAlign; + textAlign = me._getYAxisLabelAlignment(tl).textAlign; } if (axis === 'y') { @@ -1207,6 +1208,9 @@ export default class Scale extends Element { textOffset = labelSizes.highest.height - lineCount * lineHeight; } } + if (mirror) { + textOffset *= -1; + } } else { y = pixel; textOffset = (1 - lineCount) * lineHeight / 2; @@ -1262,7 +1266,7 @@ export default class Scale extends Element { if (position === 'left') { if (mirror) { textAlign = 'left'; - x = me.right - padding; + x = me.right + padding; } else { x = me.right - tickAndPadding; diff --git a/test/fixtures/core.scale/ticks-mirror-x.js b/test/fixtures/core.scale/ticks-mirror-x.js new file mode 100644 index 000000000..ec151e580 --- /dev/null +++ b/test/fixtures/core.scale/ticks-mirror-x.js @@ -0,0 +1,30 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [{ + data: [1, -1, 3], + }], + labels: ['Label1', 'Label2', 'Label3'] + }, + options: { + scales: { + x: { + ticks: { + mirror: true + } + }, + y: { + display: false + } + } + } + }, + options: { + spriteText: true, + canvas: { + height: 256, + width: 512 + } + } +}; diff --git a/test/fixtures/core.scale/ticks-mirror-x.png b/test/fixtures/core.scale/ticks-mirror-x.png new file mode 100644 index 000000000..e9fe6537c Binary files /dev/null and b/test/fixtures/core.scale/ticks-mirror-x.png differ diff --git a/test/fixtures/core.scale/ticks-mirror.png b/test/fixtures/core.scale/ticks-mirror.png index dc483b516..35fba6e52 100644 Binary files a/test/fixtures/core.scale/ticks-mirror.png and b/test/fixtures/core.scale/ticks-mirror.png differ