From a02685669acd6680d4bcdc1f80319cf4e4b7af4a Mon Sep 17 00:00:00 2001
From: mentalilll <inZaneX@web.de>
Date: Tue, 2 Apr 2024 00:01:41 +0200
Subject: [PATCH] - fixed request bug - fixed triangle bug

---
 dist/bar.js          | 88 ++++++++++++++++++++++++--------------------
 dist/ha-vpd-chart.js |  4 ++
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/dist/bar.js b/dist/bar.js
index 096d891..f6e3cf2 100644
--- a/dist/bar.js
+++ b/dist/bar.js
@@ -74,6 +74,7 @@ export const bar = {
                 this.content.appendChild(card);
             });
         }
+
         this.updateBars();
 
     },
@@ -98,47 +99,55 @@ export const bar = {
             bar.querySelector('.vpd-value').innerText = `${vpd} kPa`;
             bar.querySelector('.vpd-rh').innerText = `${this.rh_text}: ${humidity}%`;
             bar.querySelector('.vpd-temp').innerText = `${this.air_text}: ${temperature}°C`;
+
             if (this.enable_ghostmap) {
-                this.renderMiniHistory(sensor).then((data) => {
-                    const canvas = bar.querySelector('canvas');
-                    const ctx = canvas.getContext('2d');
-                    ctx.reset();
-                    canvas.width = 80;
-                    canvas.height = 20;
-
-                    const padding = 0;
-                    const pointRadius = 1;
-                    const width = canvas.width - 2 * padding;
-                    const height = canvas.height - 2 * padding;
-                    const sensorData = data['sensor-' + index];
-                    const maxY = Math.max(...sensorData.map(data => parseFloat(data.vpd)));
-                    const minY = Math.min(...sensorData.map(data => parseFloat(data.vpd)));
-                    const scaleX = width / (sensorData.length - 1);
-                    const scaleY = height / (maxY - minY);
-
-                    var previousX;
-                    var previousY;
-
-                    sensorData.forEach((data, index) => {
-                        const x = index * scaleX + padding;
-                        const y = padding + height - (parseFloat(data.vpd) - minY) * scaleY;
-                        var color = this.getColorForVpd(parseFloat(data.vpd));
-
-                        ctx.beginPath();
-                        ctx.moveTo(x, y);
-                        ctx.lineTo(previousX, previousY);
-                        ctx.strokeStyle = color;
-                        ctx.stroke();
-
-                        ctx.beginPath();
-                        ctx.arc(x, y, pointRadius, 0, Math.PI * 2);
-                        ctx.fillStyle = color;
-                        ctx.fill();
-
-                        previousX = x;
-                        previousY = y;
+                if(!this.updateRunning) {
+
+                    this.renderMiniHistory(sensor).then((data) => {
+                        this.updateRunning = true;
+                        const canvas = bar.querySelector('canvas');
+                        const ctx = canvas.getContext('2d');
+                        ctx.reset();
+                        canvas.width = 80;
+                        canvas.height = 20;
+
+                        const padding = 0;
+                        const pointRadius = 1;
+                        const width = canvas.width - 2 * padding;
+                        const height = canvas.height - 2 * padding;
+                        const sensorData = data['sensor-' + index];
+                        const maxY = Math.max(...sensorData.map(data => parseFloat(data.vpd)));
+                        const minY = Math.min(...sensorData.map(data => parseFloat(data.vpd)));
+                        const scaleX = width / (sensorData.length - 1);
+                        const scaleY = height / (maxY - minY);
+
+                        var previousX;
+                        var previousY;
+
+                        sensorData.forEach((data, index) => {
+                            const x = index * scaleX + padding;
+                            const y = padding + height - (parseFloat(data.vpd) - minY) * scaleY;
+                            var color = this.getColorForVpd(parseFloat(data.vpd));
+
+                            ctx.beginPath();
+                            ctx.moveTo(x, y);
+                            ctx.lineTo(previousX, previousY);
+                            ctx.strokeStyle = color;
+                            ctx.stroke();
+
+                            ctx.beginPath();
+                            ctx.arc(x, y, pointRadius, 0, Math.PI * 2);
+                            ctx.fillStyle = color;
+                            ctx.fill();
+
+                            previousX = x;
+                            previousY = y;
+                        });
+                        setTimeout(() => {
+                            this.updateRunning = false;
+                        }, 15000);
                     });
-                });
+                }
             }
             let vpdState = bar.querySelector('.vpd-state');
             vpdState.className = `vpd-state ${this.getPhaseClass(vpd)} tooltip`;
@@ -160,7 +169,6 @@ export const bar = {
     async renderMiniHistory(sensor) {
 
             const data = [];
-
             for (const [index, sensor] of this.config.sensors.entries()) {
                 data['sensor-'+index] = [];
                 const temperaturesPromise = this.getEntityHistory(sensor.temperature);
diff --git a/dist/ha-vpd-chart.js b/dist/ha-vpd-chart.js
index 561d7c7..fecacd0 100644
--- a/dist/ha-vpd-chart.js
+++ b/dist/ha-vpd-chart.js
@@ -50,6 +50,7 @@ class HaVpdChart extends HTMLElement {
         this.enable_axes = true;
         this.enable_ghostmap = true;
         this.enable_triangle = false;
+        this.updateRunning = false;
     }
 
     set hass(hass) {
@@ -101,6 +102,9 @@ class HaVpdChart extends HTMLElement {
         if('enable_ghostmap' in config) {
             this.enable_ghostmap = config.enable_ghostmap;
         }
+        if('enable_triangle' in config) {
+            this.enable_triangle = config.enable_triangle;
+        }
         if('enable_tooltip' in config) {
             this.enable_tooltip = config.enable_tooltip;
         }