fix apexcharts#4809 heatmap: align different ticks and gaps in timese…

…ries

dist/apexcharts.amd.js.LICENSE.txt

@@ -1,12 +1,12 @@
 /*!
 * @svgdotjs/svg.resize.js - An extension for svg.js which allows to resize elements which are selected
-* @version 2.0.4
+* @version 2.0.2
 * https://github.com/svgdotjs/svg.resize.js
 *
 * @copyright [object Object]
 * @license MIT
 *
-* BUILT: Fri Sep 13 2024 12:43:14 GMT+0200 (Central European Summer Time)
+* BUILT: Mon Jul 01 2024 15:05:58 GMT+0200 (Central European Summer Time)
 */
 
 /*!

dist/apexcharts.js

@@ -28491,7 +28491,16 @@
           }
           var x1 = 0;
           var shadeIntensity = w.config.plotOptions.heatmap.shadeIntensity;
-          for (var j = 0; j < heatSeries[i].length; j++) {
+          var j = 0;
+          for (var 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;
             var heatColor = this.helpers.getShadeColor(w.config.chart.type, i, j, this.negRange);
             var color = heatColor.color;
             var heatColorProps = heatColor.colorProps;
@@ -28561,6 +28570,7 @@
               elSeries.add(dataLabels);
             }
             x1 = x1 + xDivision;
+            j++;
           }
           y1 = y1 + yDivision;
           ret.add(elSeries);
@@ -34566,13 +34576,13 @@
 
   /*!
   * @svgdotjs/svg.resize.js - An extension for svg.js which allows to resize elements which are selected
-  * @version 2.0.4
+  * @version 2.0.2
   * https://github.com/svgdotjs/svg.resize.js
   *
   * @copyright [object Object]
   * @license MIT
   *
-  * BUILT: Fri Sep 13 2024 12:43:14 GMT+0200 (Central European Summer Time)
+  * BUILT: Mon Jul 01 2024 15:05:58 GMT+0200 (Central European Summer Time)
   */
   /*!
   * @svgdotjs/svg.select.js - An extension of svg.js which allows to select elements with mouse
@@ -34849,6 +34859,7 @@
       this.lastCoordinates = null;
       this.eventType = "";
       this.lastEvent = null;
+      this.angle = 0;
       this.handleResize = this.handleResize.bind(this);
       this.resize = this.resize.bind(this);
       this.endResize = this.endResize.bind(this);
@@ -34918,6 +34929,7 @@
       const endPoint = this.snapToGrid(this.el.point(getCoordsFromEvent(e)));
       let dx = endPoint.x - this.startPoint.x;
       let dy = endPoint.y - this.startPoint.y;
+      console.log("endPoint", endPoint, "startPoint", this.startPoint, dx, dy);
       if (this.preserveAspectRatio && this.aroundCenter) {
         dx *= 2;
         dy *= 2;
@@ -34964,7 +34976,7 @@
       }).defaultPrevented) {
         return;
       }
-      this.el.size(box.width, box.height).move(box.x, box.y);
+      this.el.move(box.x, box.y).size(box.width, box.height);
     }
     movePoint(e) {
       this.lastEvent = e;
@@ -34984,36 +34996,32 @@
     }
     rotate(e) {
       this.lastEvent = e;
-      const startPoint = this.startPoint;
       const endPoint = this.el.point(getCoordsFromEvent(e));
-      const { cx, cy } = this.box;
-      const dx1 = startPoint.x - cx;
-      const dy1 = startPoint.y - cy;
+      const cx = this.box.cx;
+      const cy = this.box.cy;
+      const dx1 = this.startPoint.x - cx;
+      const dy1 = this.startPoint.y - cy;
       const dx2 = endPoint.x - cx;
       const dy2 = endPoint.y - cy;
       const c = Math.sqrt(dx1 * dx1 + dy1 * dy1) * Math.sqrt(dx2 * dx2 + dy2 * dy2);
       if (c === 0) {
         return;
       }
       let angle = Math.acos((dx1 * dx2 + dy1 * dy2) / c) / Math.PI * 180;
-      if (!angle) return;
-      if (endPoint.x < startPoint.x) {
+      if (endPoint.x < this.startPoint.x) {
         angle = -angle;
       }
-      const matrix = new Matrix(this.el);
-      const { x: ox, y: oy } = new Point(cx, cy).transformO(matrix);
-      const { rotate } = matrix.decompose();
-      const resultAngle = this.snapToAngle(rotate + angle) - rotate;
+      this.angle = this.snapToAngle(this.angle + angle);
       if (this.el.dispatch("resize", {
-        box: this.box,
-        angle: resultAngle,
+        box: this.startBox,
+        angle: this.angle,
         eventType: this.eventType,
         event: e,
         handler: this
       }).defaultPrevented) {
         return;
       }
-      this.el.transform(matrix.rotateO(resultAngle, ox, oy));
+      this.el.transform({ rotate: this.angle });
     }
     endResize(ev) {
       if (this.eventType !== "rot" && this.eventType !== "point") {

samples/vanilla-js/heatmap/space.html

@@ -0,0 +1,113 @@
+<!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>Simple HeatMap</title>
+
+    <link href="../../assets/styles.css" rel="stylesheet" />
+
+    <style>
+
+        #chart, #chart2 {
+      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>
+    <div id="chart2"></div>
+
+    <script>
+      // A 24 hour time interval
+      const end = new Date("2022-11-11T22:30: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'
+        },
+        series: data,
+      };
+
+      const options2 = JSON.parse(JSON.stringify(options))
+      options2.chart.type = 'line'
+
+      var chart = new ApexCharts(document.querySelector("#chart"), options);
+      var chart2 = new ApexCharts(document.querySelector("#chart2"), options2);
+
+      chart.render();
+      chart2.render();
+    </script>
+  </body>
+</html>

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,
@@ -186,6 +197,7 @@ export default class HeatMap {
         }
 
         x1 = x1 + xDivision
+        j++;
       }
 
       y1 = y1 + yDivision