From 01b6fee0532a0cdc588b9a16eca1fab7da8dddf9 Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Wed, 10 Jan 2024 15:02:05 +0100 Subject: [PATCH 1/7] Added check for columns with pointPlacement --- ts/Core/Axis/Axis.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/ts/Core/Axis/Axis.ts b/ts/Core/Axis/Axis.ts index 95838547897..ae2b6d4393d 100644 --- a/ts/Core/Axis/Axis.ts +++ b/ts/Core/Axis/Axis.ts @@ -3934,10 +3934,20 @@ class Axis { tickPositions.forEach(function (pos: number, i: number): void { axis.renderTick(pos, i, slideInTicks); }); + // In a categorized axis, the tick marks are displayed // between labels. So we need to add a tick mark and // grid line at the left edge of the X axis. - if (tickmarkOffset && (axis.min === 0 || axis.single)) { + if ( + !axis.series.find( // #20166 + (series): string | number | false | undefined => ( + series.is('column') && + series.options.pointPlacement + ) + ) && + tickmarkOffset && + (axis.min === 0 || axis.single) + ) { if (!ticks[-1]) { ticks[-1] = new Tick(axis, -1, null as any, true); } From 56a0bd3411660174902a3a90539a845ac3102fe7 Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Thu, 11 Jan 2024 12:44:17 +0100 Subject: [PATCH 2/7] Altered conditional to catch all cartesian series --- ts/Core/Axis/Axis.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/Core/Axis/Axis.ts b/ts/Core/Axis/Axis.ts index ae2b6d4393d..4a25c620a81 100644 --- a/ts/Core/Axis/Axis.ts +++ b/ts/Core/Axis/Axis.ts @@ -3941,7 +3941,7 @@ class Axis { if ( !axis.series.find( // #20166 (series): string | number | false | undefined => ( - series.is('column') && + series.xAxis && series.options.pointPlacement ) ) && From c7e60d8771ffcb0e3e2ea21d8a0de02389702488 Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Thu, 11 Jan 2024 13:02:39 +0100 Subject: [PATCH 3/7] Added unit-test --- samples/unit-tests/axis/pointplacement/demo.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/samples/unit-tests/axis/pointplacement/demo.js b/samples/unit-tests/axis/pointplacement/demo.js index c8b42caa14c..e333e3cf435 100644 --- a/samples/unit-tests/axis/pointplacement/demo.js +++ b/samples/unit-tests/axis/pointplacement/demo.js @@ -40,6 +40,11 @@ QUnit.test('Axis pointPlacement', assert => { 'No padded ticks' ); + assert.strictEqual( + axis.ticks[-1], null, + 'No tick at -1 when pointPlacement is set for cartesian series' + ); + controller.pan([200, 60], [400, 60]); const rangeBefore = axis.max - axis.min; From 82ccc4b776295ee6a194d7960a40102ee46e4561 Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Thu, 11 Jan 2024 15:24:04 +0100 Subject: [PATCH 4/7] Fixed unit test now tests for undefined --- samples/unit-tests/axis/pointplacement/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/unit-tests/axis/pointplacement/demo.js b/samples/unit-tests/axis/pointplacement/demo.js index e333e3cf435..7a76f4ba33b 100644 --- a/samples/unit-tests/axis/pointplacement/demo.js +++ b/samples/unit-tests/axis/pointplacement/demo.js @@ -41,7 +41,7 @@ QUnit.test('Axis pointPlacement', assert => { ); assert.strictEqual( - axis.ticks[-1], null, + axis.ticks[-1], undefined, 'No tick at -1 when pointPlacement is set for cartesian series' ); From 9a317df4b08642e292bad6a4c6e53e7bddf14cac Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Fri, 12 Jan 2024 09:58:12 +0100 Subject: [PATCH 5/7] Made fix work for bar chart --- ts/Core/Axis/Axis.ts | 20 ++++++++++++-------- ts/Core/Axis/Color/ColorAxis.ts | 7 ++++++- ts/Core/Axis/Color/ColorAxisDefaults.ts | 2 +- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/ts/Core/Axis/Axis.ts b/ts/Core/Axis/Axis.ts index 4a25c620a81..1d10ae774f9 100644 --- a/ts/Core/Axis/Axis.ts +++ b/ts/Core/Axis/Axis.ts @@ -3931,20 +3931,25 @@ class Axis { // Major ticks. Pull out the first item and render it last so that // we can get the position of the neighbour label. #808. if (tickPositions.length) { // #1300 + + const extraTick = axis.series.find( // #20166 + (series): string | number | false | undefined => ( + series.xAxis && series.options.pointPlacement + ) + ); + + if (extraTick && chart.inverted) { + tickPositions.pop(); + } + tickPositions.forEach(function (pos: number, i: number): void { axis.renderTick(pos, i, slideInTicks); }); - // In a categorized axis, the tick marks are displayed // between labels. So we need to add a tick mark and // grid line at the left edge of the X axis. if ( - !axis.series.find( // #20166 - (series): string | number | false | undefined => ( - series.xAxis && - series.options.pointPlacement - ) - ) && + !extraTick && tickmarkOffset && (axis.min === 0 || axis.single) ) { @@ -3953,7 +3958,6 @@ class Axis { } ticks[-1].render(-1); } - } // Alternate grid color diff --git a/ts/Core/Axis/Color/ColorAxis.ts b/ts/Core/Axis/Color/ColorAxis.ts index e8a5c3e1ae0..b0f64ee0750 100644 --- a/ts/Core/Axis/Color/ColorAxis.ts +++ b/ts/Core/Axis/Color/ColorAxis.ts @@ -239,6 +239,11 @@ class ColorAxis extends Axis implements AxisLike { if (userOptions.dataClasses) { axis.initDataClasses(userOptions); } + + if (userOptions.title) { + merge(axis.options.title, userOptions.title); + } + axis.initStops(); // Override original axis properties @@ -280,7 +285,6 @@ class ColorAxis extends Axis implements AxisLike { // Forced options { showEmpty: false, - title: null, visible: this.chart.options.legend.enabled && userOptions.visible !== false } @@ -327,6 +331,7 @@ class ColorAxis extends Axis implements AxisLike { */ public getOffset(): void { const axis = this; + const renderer = axis.chart.renderer; const group = axis.legendItem?.group; const sideOffset = axis.chart.axisOffset[axis.side]; diff --git a/ts/Core/Axis/Color/ColorAxisDefaults.ts b/ts/Core/Axis/Color/ColorAxisDefaults.ts index 089949debb1..49852a5c89a 100644 --- a/ts/Core/Axis/Color/ColorAxisDefaults.ts +++ b/ts/Core/Axis/Color/ColorAxisDefaults.ts @@ -74,7 +74,7 @@ import { Palette } from '../../Color/Palettes.js'; * categories, crosshair, dateTimeLabelFormats, left, * lineWidth, linkedTo, maxZoom, minRange, minTickInterval, * offset, opposite, pane, plotBands, plotLines, - * reversedStacks, scrollbar, showEmpty, title, top, + * reversedStacks, scrollbar, showEmpty, top, * zoomEnabled * @product highcharts highstock highmaps * @type {*|Array<*>} From 8ce9b77bbafdcb5cbcbee777f87c03cdaffeef9d Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Mon, 15 Jan 2024 09:45:13 +0100 Subject: [PATCH 6/7] Somehow axis breaks do not break tests now --- ts/Core/Axis/Axis.ts | 21 ++++++++------------- 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/ts/Core/Axis/Axis.ts b/ts/Core/Axis/Axis.ts index 1d10ae774f9..8dc73686216 100644 --- a/ts/Core/Axis/Axis.ts +++ b/ts/Core/Axis/Axis.ts @@ -3931,26 +3931,21 @@ class Axis { // Major ticks. Pull out the first item and render it last so that // we can get the position of the neighbour label. #808. if (tickPositions.length) { // #1300 - - const extraTick = axis.series.find( // #20166 - (series): string | number | false | undefined => ( - series.xAxis && series.options.pointPlacement - ) - ); - - if (extraTick && chart.inverted) { - tickPositions.pop(); - } - tickPositions.forEach(function (pos: number, i: number): void { - axis.renderTick(pos, i, slideInTicks); + if ( + (isNumber(axis.max) && pos <= axis.max) && + (isNumber(axis.min) && pos >= axis.min) + ) { + axis.renderTick(pos, i, slideInTicks); + } }); // In a categorized axis, the tick marks are displayed // between labels. So we need to add a tick mark and // grid line at the left edge of the X axis. if ( - !extraTick && tickmarkOffset && + (isNumber(axis.max) && axis.max >= -1) && + (isNumber(axis.min) && axis.min <= -1) && (axis.min === 0 || axis.single) ) { if (!ticks[-1]) { From 81e45067b6f416930e976e0c5b359ebec50f757e Mon Sep 17 00:00:00 2001 From: Markus Knutson Barstad Date: Tue, 16 Jan 2024 13:11:57 +0100 Subject: [PATCH 7/7] WIP: GridLines are gone but failing tests --- ts/Core/Axis/Axis.ts | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/ts/Core/Axis/Axis.ts b/ts/Core/Axis/Axis.ts index 8dc73686216..c6543468a41 100644 --- a/ts/Core/Axis/Axis.ts +++ b/ts/Core/Axis/Axis.ts @@ -981,7 +981,6 @@ class Axis { cHeight = (old && chart.oldChartHeight) || chart.chartHeight, cWidth = (old && chart.oldChartWidth) || chart.chartWidth, transB = axis.transB; - let translatedValue = options.translatedValue, force = options.force, x1: number, @@ -989,7 +988,6 @@ class Axis { x2: number, y2: number, skip: boolean; - // eslint-disable-next-line valid-jsdoc /** * Check if x is between a and b. If not, either move to a/b @@ -1030,9 +1028,16 @@ class Axis { x1 = x2 = Math.round(translatedValue + transB); y1 = y2 = Math.round(cHeight - translatedValue - transB); - if (!isNumber(translatedValue)) { // No min or max + + if ( + !axis.horiz ? + (y1 < axisTop || y1 > axisTop + axis.height) : + (x1 < axisLeft || x1 > axisLeft + axis.width) || + // #7175, don't force it when path is invalid + !isNumber(translatedValue) + ) { skip = true; - force = false; // #7175, don't force it when path is invalid + force = false; } else if (axis.horiz) { y1 = axisTop; y2 = cHeight - axis.bottom; @@ -3932,22 +3937,12 @@ class Axis { // we can get the position of the neighbour label. #808. if (tickPositions.length) { // #1300 tickPositions.forEach(function (pos: number, i: number): void { - if ( - (isNumber(axis.max) && pos <= axis.max) && - (isNumber(axis.min) && pos >= axis.min) - ) { - axis.renderTick(pos, i, slideInTicks); - } + axis.renderTick(pos, i, slideInTicks); }); // In a categorized axis, the tick marks are displayed // between labels. So we need to add a tick mark and // grid line at the left edge of the X axis. - if ( - tickmarkOffset && - (isNumber(axis.max) && axis.max >= -1) && - (isNumber(axis.min) && axis.min <= -1) && - (axis.min === 0 || axis.single) - ) { + if (tickmarkOffset && (axis.min === 0 || axis.single)) { if (!ticks[-1]) { ticks[-1] = new Tick(axis, -1, null as any, true); }