Added more-info link to ppfd bubble

maziggy · Nov 3, 2024 · 355bf17 · 355bf17
1 parent 4dcd274
commit 355bf17
Showing 1 changed file with 21 additions and 9 deletions.
diff --git a/dist/ppfdChart.min.js b/dist/ppfdChart.min.js
@@ -204,17 +204,29 @@ class PPFDCustomCard extends LitElement {
         const marker = this.shadowRoot.querySelector(".marker");
         const chartBar = this.shadowRoot.querySelector(".chart-bar");
 
-        const minPPFD = 100;
-        const maxPPFD = 1200;
-        const barWidth = chartBar ? chartBar.offsetWidth : 0;
+        if (!chartBar) return;
 
-        let position = ((currentPPFD - minPPFD) / (maxPPFD - minPPFD)) * barWidth;
-        position = Math.max(0, Math.min(position, barWidth));
+        clearTimeout(this._throttleTimeout);
+        this._throttleTimeout = setTimeout(() => {
+            const minPPFD = 100;
+            const maxPPFD = 1200;
+            const barWidth = chartBar.offsetWidth;
 
-        if (marker) {
-            marker.style.left = `${position}px`;
-            marker.innerText = `${currentPPFD}`;
-        }
+            let position = ((currentPPFD - minPPFD) / (maxPPFD - minPPFD)) * barWidth;
+            position = Math.max(0, Math.min(position, barWidth));
+
+            if (marker) {
+                marker.style.left = `${position}px`;
+                marker.innerText = `${currentPPFD}`;
+
+                // Add an onclick event to open the more-info dialog
+                marker.onclick = () => {
+                    const event = new Event('hass-more-info', { bubbles: true, composed: true });
+                    event.detail = { entityId: this.entity };
+                    this.dispatchEvent(event);
+                };
+            }
+        }, 100);
     }
 
     updateLastUpdated(lastUpdated) {