Merge pull request #4838 from dschweinbenz/fix/4809-heatmap-gaps

Fix heatmap gaps and ticket alignment
apexcharts · Nov 29, 2024 · e71682a · e71682a
2 parents 4356a6b + ae9b24c
commit e71682a
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 2 deletions.
diff --git a/samples/vanilla-js/heatmap/inconsistent-timeseries.html b/samples/vanilla-js/heatmap/inconsistent-timeseries.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>HeatMap with inconsistent timeseries</title>
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+        #chart {
+          max-width: 650px;
+          margin: 35px auto;
+        }
+    </style>
+
+    <script>
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
+        )
+      window.Promise ||
+        document.write(
+          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
+        )
+    </script>
+
+    <script src="../../../dist/apexcharts.js"></script>
+  </head>
+
+  <body>
+    <div id="chart"></div>
+
+    <script>
+      const end = new Date("2024-11-29T10:00:00.000Z").getTime();
+      const start = end - 12 * 60 * 60 * 1000;
+
+      const timeSeries = () => {
+        let series = [];
+        for (let i = start; i < end; i += 30 * 60 * 1000) {
+          series.push({
+            x: (new Date(i).getTime()),
+            y: Math.floor(Math.random() * 100).toFixed(0),
+          });
+        }
+        return series;
+      };
+      let data1 = timeSeries()
+      data1.splice(0,10)
+      data1.splice(3,2)
+      const data2 = timeSeries()
+      data2.splice(data2.length - 10,10);
+      const data3 = timeSeries()
+      let data = [
+        {
+            name: "Series 1",
+            data: data1,
+          },
+        {
+            name: "Series 2",
+            data: data2,
+          },
+        {
+            name: "Series 3",
+            data: data3,
+          },
+      ];
+
+      var options = {
+        chart: {
+          height: 200,
+          width: 630,
+          type: "heatmap"
+        },
+        tooltip: {
+          x: { show: true, format: 'MMM dd HH:mm' },
+        },
+        xaxis: {
+          labels: {
+            datetimeFormatter: {
+              year: 'yyyy',
+              month: 'yyyy MMM',
+              day: 'MMM dd',
+              hour: 'HH:mm',
+            },
+          },
+          type: 'datetime'
+        },
+        plotOptions: {
+          heatmap: {
+        colorScale: {
+          ranges: [
+          {
+            from: 0,
+            to: 100,
+            name: 'orange',
+            color: '#FFB200'
+          }]
+        }
+        }
+        },
+        series: data,
+      };
+
+      var chart = new ApexCharts(document.querySelector("#chart"), options);
+
+      chart.render();
+    </script>
+  </body>
+</html>
diff --git a/src/charts/HeatMap.js b/src/charts/HeatMap.js
@@ -76,7 +76,18 @@ 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++) {
+
+        // 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(
           w.config.chart.type,
           i,
@@ -114,7 +125,6 @@ export default class HeatMap {
           cx: x1,
           cy: y1,
         })
-
         rect.node.classList.add('apexcharts-heatmap-rect')
         elSeries.add(rect)
 
@@ -186,6 +196,7 @@ export default class HeatMap {
         }
 
         x1 = x1 + xDivision
+        j++;
       }
 
       y1 = y1 + yDivision