- added debounce function

- added localization for en, de, da, cz, pl, es, it, ru (for others -> feature request) - fixed jump bug on load - fixed css selection for right system - fixed ghostmap bug and check if sensor exists before request history - added select sensor dropdown - use native checkboxes from HA - changed calculation logic - removed leafOffset <2 checks - modified README.md
mentalilll · Sep 19, 2024 · 82969f6 · 82969f6
1 parent 67b0f9b
commit 82969f6
Show file tree

Hide file tree

Showing 18 changed files with 712 additions and 209 deletions.
diff --git a/README.md b/README.md
@@ -120,6 +120,7 @@ sensors:
   - temperature: sensor.temperature_2
     humidity: sensor.humidity_2
     leaf_temperature: sensor.infrared_sensor #optional
+    show_calculated_rh: true # optional 
     name: Tent 1
   - temperature: sensor.temperature_tent_2
     humidity: sensor.humidity_tent_2
@@ -169,6 +170,7 @@ calculateVPD: |2-
 | is_bar_view                     | boolean        | optional     | `true`                                  | Enable Bar view of this chart for fast information of sensors                                       |
 | enable_axes                     | boolean        | optional     | `true`                                  | Enable Axes on the Chart                                                                            |
 | enable_ghostmap                 | boolean        | optional     | `true`                                  | Enable Ghostmap on the Chart                                                                        |
+| enable_ghostclick               | boolean        | optional     | `true`                                  | Enable Ghostclick instead of Hover                                                                  |
 | enable_triangle                 | boolean        | optional     | `true`                                  | Enable Triangle instead of Circle for tooltip marker                                                |
 | enable_crosshair                | boolean        | optional     | `true`                                  | Enable MouseHover Crosshair                                                                         |
 | enable_fahrenheit               | boolean        | optional     | `false`                                 | Enable Fahrenheit instead of Celsius                                                                |

diff --git a/dist/bar.css b/dist/bar.css
@@ -1,3 +1,7 @@
+.vpd-bar-view {
+    display: block !important;
+}
+
 .vpd-bar-view .type-custom-ha-vpd-chart {
     margin-bottom: 5px;
 }

diff --git a/dist/bar.js b/dist/bar.js
@@ -1,10 +1,9 @@
 export const bar = {
-    buildBarChart() {
-        if (!this.content) {
-            this.innerHTML = `
-                <ha-card class="vpd-bar-view">
+    async initializeBar() {
+        this.htmlTemplate = `
+            <ha-card class="vpd-bar-view" style="display:none;">
                     <style>
-                         @import '/local/community/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}'
+                        @import '##url##?v=${window.vpdChartVersion}'                    
                     </style>
                     <div class="card-content"></div>
                     <div class="highlight mousePointer" style="opacity:0">
@@ -15,8 +14,25 @@ export const bar = {
                         <div class="clearfix"></div>
                     </div>
                 </ha-card>
-            `;
-            this.content = this.querySelector("div.card-content");
+        `;
+        await fetch(`/hacsfiles/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}`)
+            .then(response => {
+                if (response.ok) {
+                    this.innerHTML = this.htmlTemplate.replace('##url##', `/hacsfiles/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}`);
+                    this.content = this.querySelector("div.card-content");
+                    return;
+                }
+                throw new Error('fallback to local/community');
+            })
+            .catch(error => {
+                this.innerHTML = this.htmlTemplate.replace('##url##', `/local/community/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}`);
+                this.content = this.querySelector("div.card-content");
+            });
+
+    },
+    async buildBarChart() {
+        if (!this.content) {
+            await this.initializeBar();
             if (this._hass) {
                 let vpd = 0;
 
@@ -115,7 +131,7 @@ export const bar = {
 
             let showHumidity = humidity;
             if (sensor.show_calculated_rh === true) {
-                showHumidity = this.calculateRH(temperature - 2, temperature, vpd).toFixed(1);
+                showHumidity = this.calculateRH(leafTemperature, temperature, vpd).toFixed(1);
             }
             let sensorName = sensor.name;
             if (sensorName === undefined) {

diff --git a/dist/chart.css b/dist/chart.css
@@ -11,7 +11,7 @@ div.vpd-chart-view, div.vpd-chart-view .vpd-card-container {
 }
 
 .vpd-chart-view {
-    display: grid;
+    display: grid !important;
 }
 
 .vpd-chart-view .gray-danger-zone {

diff --git a/dist/chart.js b/dist/chart.js
@@ -1,34 +1,52 @@
 export const chart = {
-    initializeChart() {
+    async initializeChart() {
         this.zoomLevel = 1;
         this.minZoom = 1;
         this.maxZoom = 3;
-        this.innerHTML = `
-        <ha-card>
-            <div class="vpd-chart-view">
-                <style>
-                    @import '/local/community/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}'
-                </style>
-                <div id="vpd-card-container" class="vpd-card-container"></div>
-                <div id="ghostmap"></div>
-                <div id="sensors"></div>
-                <div class="mouse-custom-tooltip" style="opacity: 0;"></div>
-                <div id="mouse-tooltip">
-                    <div class="horizontal-line mouse-horizontal-line" style="opacity: 0;"></div>
-                    <div class="vertical-line mouse-vertical-line" style="opacity: 0;"></div>
+        this.htmlTemplate = `
+            <ha-card>
+                <div class="vpd-chart-view"  style="display:none;">
+                    <style>
+                        @import '##url##?v=${window.vpdChartVersion}'
+                    </style>
+                    <div id="vpd-card-container" class="vpd-card-container"></div>
+                    <div id="ghostmap"></div>
+                    <div id="sensors"></div>
+                    <div class="mouse-custom-tooltip" style="opacity: 0;"></div>
+                    <div id="mouse-tooltip">
+                        <div class="horizontal-line mouse-horizontal-line" style="opacity: 0;"></div>
+                        <div class="vertical-line mouse-vertical-line" style="opacity: 0;"></div>
+                    </div>
+                    <div class="vpd-legend"></div>
                 </div>
-                <div class="vpd-legend"></div>
-            </div>
-        </ha-card>
-    `;
-        this.content = this.querySelector("div.vpd-card-container");
-        this.sensordom = this.querySelector("div#sensors");
-        this.ghostmapDom = this.querySelector("div#ghostmap");
-        this.mouseTooltip = this.querySelector("div#mouse-tooltip");
+            </ha-card>
+        `;
+        await fetch(`/hacsfiles/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}`)
+            .then(response => {
+                if (response.ok) {
+                    this.innerHTML = this.htmlTemplate.replace('##url##', `/hacsfiles/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}`);
+                    this.content = this.querySelector("div.vpd-card-container");
+                    this.sensordom = this.querySelector("div#sensors");
+                    this.ghostmapDom = this.querySelector("div#ghostmap");
+                    this.mouseTooltip = this.querySelector("div#mouse-tooltip");
+                    return;
+                }
+                throw new Error('fallback to local/community');
+            })
+            .catch(error => {
+                this.innerHTML = this.htmlTemplate.replace('##url##', `/local/community/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}`);
+                this.content = this.querySelector("div.vpd-card-container");
+                this.sensordom = this.querySelector("div#sensors");
+                this.ghostmapDom = this.querySelector("div#ghostmap");
+                this.mouseTooltip = this.querySelector("div#mouse-tooltip");
+            });
+
     },
-    buildChart() {
+    async buildChart() {
         if (!this.content) {
-            this.initializeChart.call(this);
+
+            await this.initializeChart.call(this);
+
             const table = this.buildTable();
             if (!table.isConnected) {
                 this.content.appendChild(table);

diff --git a/dist/ghostmap.js b/dist/ghostmap.js
@@ -21,12 +21,14 @@ export const ghostmap = {
         const ghostmap = this.querySelector('#ghostmap');
 
         const sensorPromises = this.config.sensors.map(async (sensor, index) => {
-            const [temperatures, humidities] = await Promise.all([
-                this.getEntityHistory(sensor.temperature, this.config.ghostmap_hours),
-                this.getEntityHistory(sensor.humidity, this.config.ghostmap_hours)
-            ]);
+            if (this._hass.states[sensor.humidity] && this._hass.states[sensor.temperature]) {
+                const [temperatures, humidities] = await Promise.all([
+                    this.getEntityHistory(sensor.temperature, this.config.ghostmap_hours),
+                    this.getEntityHistory(sensor.humidity, this.config.ghostmap_hours)
+                ]);
 
-            this.processSensorData(fragment, temperatures, humidities, index);
+                this.processSensorData(fragment, temperatures, humidities, index);
+            }
         });
 
         await Promise.all(sensorPromises);

diff --git a/dist/ha-vpd-chart-editor.css b/dist/ha-vpd-chart-editor.css
@@ -298,4 +298,54 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 input[type="color"]::-webkit-color-swatch {
     border: none;
     border-radius: 4px;
+}
+
+[data-title] {
+    position: relative;
+}
+
+[data-title]:hover:after {
+    opacity: 1;
+    transition: all 0.1s ease 0.5s;
+    visibility: visible;
+    position: absolute;
+}
+
+[data-title]:after {
+    content: attr(data-title);
+    width: auto;
+    position: absolute;
+    bottom: -1.6em;
+    left: 100%;
+    padding: 4px 4px 4px 8px;
+    white-space: nowrap;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-color: hsla(0, 0%, 20%, 0.9);
+    color: #ffffff;
+    text-align: center;
+    font-style: normal;
+    font-size: 12px;
+    opacity: 0;
+    z-index: 99999;
+    visibility: hidden;
+}
+
+.vpd-chart-config ha-textfield {
+    width: 100%;
+}
+
+.vpd-chart-config .infoIcon {
+    position: relative;
+}
+
+.vpd-chart-config .infoIcon:hover {
+    position: absolute;
+    cursor: pointer;
+}
+
+.vpd-chart-config .infoIcon i {
+    line-height: 25px;
+    margin-left: 5px;
 }