From 136e1c642a4c68f0bb30d63988a0e00eb8299a22 Mon Sep 17 00:00:00 2001 From: Dennis Schweinbenz Date: Thu, 28 Nov 2024 15:35:50 +0100 Subject: [PATCH 1/4] fix apexcharts#4809 heatmap: align different ticks and gaps in timeseries --- src/charts/HeatMap.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/charts/HeatMap.js b/src/charts/HeatMap.js index 04056aa68..95ad9d10d 100644 --- a/src/charts/HeatMap.js +++ b/src/charts/HeatMap.js @@ -12,6 +12,7 @@ import Filters from '../modules/Filters' export default class HeatMap { constructor(ctx, xyRatios) { + this.ctx = ctx this.w = ctx.w @@ -76,7 +77,16 @@ export default class HeatMap { let x1 = 0 let shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity - for (let j = 0; j < heatSeries[i].length; j++) { + let j = 0; + for (let dIndex = 0; dIndex < w.globals.dataPoints; dIndex++) { + + if ((w.globals.minX + (w.globals.minXDiff * dIndex)) < w.globals.seriesX[i][j]) { + x1 = x1 + xDivision; + continue; + } + + if (j >= heatSeries[i].length) break; + let heatColor = this.helpers.getShadeColor( w.config.chart.type, i, @@ -114,7 +124,6 @@ export default class HeatMap { cx: x1, cy: y1, }) - rect.node.classList.add('apexcharts-heatmap-rect') elSeries.add(rect) @@ -186,6 +195,7 @@ export default class HeatMap { } x1 = x1 + xDivision + j++; } y1 = y1 + yDivision From 39bf7d7a0a97c79c01a6e67c4c30bf4977d97419 Mon Sep 17 00:00:00 2001 From: Dennis Schweinbenz Date: Thu, 28 Nov 2024 15:37:56 +0100 Subject: [PATCH 2/4] fix apexcharts#4809 added comments --- src/charts/HeatMap.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/charts/HeatMap.js b/src/charts/HeatMap.js index 95ad9d10d..bc1a09657 100644 --- a/src/charts/HeatMap.js +++ b/src/charts/HeatMap.js @@ -80,11 +80,13 @@ export default class HeatMap { let j = 0; for (let dIndex = 0; dIndex < w.globals.dataPoints; dIndex++) { + // Recognize gaps and align values based on x axis if ((w.globals.minX + (w.globals.minXDiff * dIndex)) < w.globals.seriesX[i][j]) { x1 = x1 + xDivision; continue; } + // Stop loop if index is out of array length if (j >= heatSeries[i].length) break; let heatColor = this.helpers.getShadeColor( From 6dcaadb64fd1569af7835ec438940d3944df260f Mon Sep 17 00:00:00 2001 From: Dennis Schweinbenz Date: Thu, 28 Nov 2024 15:39:26 +0100 Subject: [PATCH 3/4] fix apexcharts#4809 reverted empty line --- src/charts/HeatMap.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/charts/HeatMap.js b/src/charts/HeatMap.js index bc1a09657..f8c0627fd 100644 --- a/src/charts/HeatMap.js +++ b/src/charts/HeatMap.js @@ -12,7 +12,6 @@ import Filters from '../modules/Filters' export default class HeatMap { constructor(ctx, xyRatios) { - this.ctx = ctx this.w = ctx.w From ae9b24ca23a0a40febdcdaa4bb39e31e69bbde08 Mon Sep 17 00:00:00 2001 From: Dennis Schweinbenz Date: Fri, 29 Nov 2024 10:12:38 +0100 Subject: [PATCH 4/4] fix apexcharts#4809 heatmap: added example --- .../heatmap/inconsistent-timeseries.html | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 samples/vanilla-js/heatmap/inconsistent-timeseries.html diff --git a/samples/vanilla-js/heatmap/inconsistent-timeseries.html b/samples/vanilla-js/heatmap/inconsistent-timeseries.html new file mode 100644 index 000000000..2c144fa4c --- /dev/null +++ b/samples/vanilla-js/heatmap/inconsistent-timeseries.html @@ -0,0 +1,115 @@ + + + + + + + HeatMap with inconsistent timeseries + + + + + + + + + + + +
+ + + +