precipitation_type reintroduced

mlamberts78 · Mar 4, 2024 · d09e15b · d09e15b
1 parent e25edf8
commit d09e15b
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -66,7 +66,8 @@ HACS is a third party community store and is not included in Home Assistant out
 
 | Name                 | Type    | Default                  | Description                                                                                        |
 | -------------------- | ------- | -------------------------|--------------------------------------------------------------------------------------------------- |
-| show_probability     | boolean | false                    | Show precipitation probability. (Only when available in the forecast data)                         |
+| precipitation_type   | string  | rainfall                 | Show precipitation in 'rainfall' or 'probability'.                                                 |
+| show_probability     | boolean | false                    | Show also probability value when precipitation_type = rainfall. (Only when available)              |
 | labels_font_size     | number  | 11                       | Font size for temperature and precipitation labels.                                                |
 | precip_bar_size      | number  | 100                      | Adjusts the thickness of precipitation bars (1-100).                                               |
 | temperature1_color   | string  | rgba(255, 152, 0, 1.0)   | Temperature first line chart color.                                                                |

diff --git a/dist/weather-chart-card.js b/dist/weather-chart-card.js
@@ -1455,7 +1455,20 @@ class WeatherCardEditor extends s {
               Rounding Temperatures
             </label>
           </div>
-         <div class="switch-container">
+	  <div class="textfield-container">
+          <ha-select
+            naturalMenuWidth
+            fixedMenuPosition
+            label="Precipitation Type (Probability if supported by the weather entity)"
+            .configValue=${'forecast.precipitation_type'}
+            .value=${forecastConfig.precipitation_type}
+            @change=${(e) => this._valueChanged(e, 'forecast.precipitation_type')}
+            @closed=${(ev) => ev.stopPropagation()}
+          >
+            <ha-list-item .value=${'rainfall'}>Rainfall</ha-list-item>
+            <ha-list-item .value=${'probability'}>Probability</ha-list-item>
+          </ha-select>
+         <div class="switch-container" ?hidden=${forecastConfig.precipitation_type !== 'rainfall'}>
              <ha-switch
                @change="${(e) => this._valueChanged(e, 'forecast.show_probability')}"
                .checked="${forecastConfig.show_probability !== false}"
@@ -17699,6 +17712,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
     animated_icons: false,
     icon_style: 'style1',
     forecast: {
+      precipitation_type: 'rainfall',
       show_probability: false,
       labels_font_size: '11',
       precip_bar_size: '100',
@@ -17742,6 +17756,7 @@ setConfig(config) {
     show_description: false,
     ...config,
     forecast: {
+      precipitation_type: 'rainfall',
       show_probability: false,
       labels_font_size: 11,
       chart_height: 180,
@@ -18064,7 +18079,11 @@ drawChart({ config, language, weather, forecastItems } = this) {
   }
   var tempUnit = this._hass.config.unit_system.temperature;
   var lengthUnit = this._hass.config.unit_system.length;
-  var precipUnit = lengthUnit === 'km' ? this.ll('units')['mm'] : this.ll('units')['in'];
+  if (config.forecast.precipitation_type === 'probability') {
+    var precipUnit = '%';
+  } else {
+    var precipUnit = lengthUnit === 'km' ? this.ll('units')['mm'] : this.ll('units')['in'];
+  }
   var forecast = this.forecasts ? this.forecasts.slice(0, forecastItems) : [];
   if (forecast.length >= 3 && new Date(forecast[2].datetime) - new Date(forecast[1].datetime) < 864e5) {
     var mode = 'hourly';
@@ -18090,7 +18109,11 @@ drawChart({ config, language, weather, forecastItems } = this) {
         tempLow[i] = Math.round(tempLow[i]);
       }
     }
-    precip.push(d.precipitation);
+    if (config.forecast.precipitation_type === 'probability') {
+      precip.push(d.precipitation_probability);
+    } else {
+      precip.push(d.precipitation);
+    }
   }
   var style = getComputedStyle(document.body);
   var backgroundColor = style.getPropertyValue('--card-background-color');
@@ -18106,10 +18129,14 @@ drawChart({ config, language, weather, forecastItems } = this) {
 
   let precipMax;
 
-  if (mode === 'hourly') {
-    precipMax = lengthUnit === 'km' ? 4 : 1;
+  if (config.forecast.precipitation_type === 'probability') {
+    precipMax = 100;
   } else {
-    precipMax = lengthUnit === 'km' ? 20 : 1;
+    if (mode === 'hourly') {
+      precipMax = lengthUnit === 'km' ? 4 : 1;
+    } else {
+      precipMax = lengthUnit === 'km' ? 20 : 1;
+    }
   }
 
   Chart.defaults.color = textColor;
@@ -18150,26 +18177,32 @@ drawChart({ config, language, weather, forecastItems } = this) {
         display: function (context) {
           return context.dataset.data[context.dataIndex] > 0 ? 'auto' : false;
         },
-        formatter: function (value, context) {
-          const rainfall = context.dataset.data[context.dataIndex];
-          const probability = forecast[context.dataIndex].precipitation_probability;
+      formatter: function (value, context) {
+        const precipitationType = config.forecast.precipitation_type;
 
-          let formattedValue;
+        const rainfall = context.dataset.data[context.dataIndex];
+        const probability = forecast[context.dataIndex].precipitation_probability;
+
+        let formattedValue;
+        if (precipitationType === 'rainfall') {
           if (probability !== undefined && probability !== null && config.forecast.show_probability) {
             formattedValue = `${rainfall > 9 ? Math.round(rainfall) : rainfall.toFixed(1)} ${precipUnit}\n${Math.round(probability)}%`;
           } else {
             formattedValue = `${rainfall > 9 ? Math.round(rainfall) : rainfall.toFixed(1)} ${precipUnit}`;
           }
+        } else {
+          formattedValue = `${rainfall > 9 ? Math.round(rainfall) : rainfall.toFixed(1)} ${precipUnit}`;
+        }
 
-          formattedValue = formattedValue.replace('\n', '\n\n');
+        formattedValue = formattedValue.replace('\n', '\n\n');
 
-          return formattedValue;
-        },
+        return formattedValue;
+      },
         textAlign: 'center',
         textBaseline: 'middle',
         align: 'top',
         anchor: 'start',
-        offset: -8,
+        offset: -10,
       },
     },
   ];
@@ -18319,16 +18352,17 @@ drawChart({ config, language, weather, forecastItems } = this) {
                 hour12: config.use_12hour_format,
               });
             },
-            label: function (context) {
-              var label = context.dataset.label;
-              var value = context.formattedValue;
-              var probability = forecast[context.dataIndex].precipitation_probability;
-              var unit = context.datasetIndex === 2 ? precipUnit : tempUnit;
-              if (context.datasetIndex === 2 && config.forecast.show_probability && probability !== undefined && probability !== null) {
-                return label + ': ' + value + ' ' + precipUnit + ' / ' + Math.round(probability) + '%';
-              } else {
-                return label + ': ' + value + ' ' + unit;
-              }
+    label: function (context) {
+      var label = context.dataset.label;
+      var value = context.formattedValue;
+      var probability = forecast[context.dataIndex].precipitation_probability;
+      var unit = context.datasetIndex === 2 ? precipUnit : tempUnit;
+
+      if (config.forecast.precipitation_type === 'rainfall' && context.datasetIndex === 2 && config.forecast.show_probability && probability !== undefined && probability !== null) {
+        return label + ': ' + value + ' ' + precipUnit + ' / ' + Math.round(probability) + '%';
+      } else {
+        return label + ': ' + value + ' ' + unit;
+      }
             },
           },
         },
@@ -18363,7 +18397,11 @@ updateChart({ config, language, weather, forecastItems } = this) {
         tempLow[i] = Math.round(tempLow[i]);
       }
     }
-     precip.push(d.precipitation);
+    if (config.forecast.precipitation_type === 'probability') {
+      precip.push(d.precipitation_probability);
+    } else {
+      precip.push(d.precipitation);
+    }
   }
 
   if (this.forecastChart) {

diff --git a/src/main.js b/src/main.js
@@ -45,6 +45,7 @@ static getStubConfig(hass, unusedEntities, allEntities) {
     animated_icons: false,
     icon_style: 'style1',
     forecast: {
+      precipitation_type: 'rainfall',
       show_probability: false,
       labels_font_size: '11',
       precip_bar_size: '100',
@@ -88,6 +89,7 @@ setConfig(config) {
     show_description: false,
     ...config,
     forecast: {
+      precipitation_type: 'rainfall',
       show_probability: false,
       labels_font_size: 11,
       chart_height: 180,
@@ -410,7 +412,11 @@ drawChart({ config, language, weather, forecastItems } = this) {
   }
   var tempUnit = this._hass.config.unit_system.temperature;
   var lengthUnit = this._hass.config.unit_system.length;
-  var precipUnit = lengthUnit === 'km' ? this.ll('units')['mm'] : this.ll('units')['in'];
+  if (config.forecast.precipitation_type === 'probability') {
+    var precipUnit = '%';
+  } else {
+    var precipUnit = lengthUnit === 'km' ? this.ll('units')['mm'] : this.ll('units')['in'];
+  }
   var forecast = this.forecasts ? this.forecasts.slice(0, forecastItems) : [];
   if (forecast.length >= 3 && new Date(forecast[2].datetime) - new Date(forecast[1].datetime) < 864e5) {
     var mode = 'hourly';
@@ -436,7 +442,11 @@ drawChart({ config, language, weather, forecastItems } = this) {
         tempLow[i] = Math.round(tempLow[i]);
       }
     }
-    precip.push(d.precipitation);
+    if (config.forecast.precipitation_type === 'probability') {
+      precip.push(d.precipitation_probability);
+    } else {
+      precip.push(d.precipitation);
+    }
   }
   var style = getComputedStyle(document.body);
   var backgroundColor = style.getPropertyValue('--card-background-color');
@@ -452,10 +462,14 @@ drawChart({ config, language, weather, forecastItems } = this) {
 
   let precipMax;
 
-  if (mode === 'hourly') {
-    precipMax = lengthUnit === 'km' ? 4 : 1;
+  if (config.forecast.precipitation_type === 'probability') {
+    precipMax = 100;
   } else {
-    precipMax = lengthUnit === 'km' ? 20 : 1;
+    if (mode === 'hourly') {
+      precipMax = lengthUnit === 'km' ? 4 : 1;
+    } else {
+      precipMax = lengthUnit === 'km' ? 20 : 1;
+    }
   }
 
   Chart.defaults.color = textColor;
@@ -496,26 +510,32 @@ drawChart({ config, language, weather, forecastItems } = this) {
         display: function (context) {
           return context.dataset.data[context.dataIndex] > 0 ? 'auto' : false;
         },
-        formatter: function (value, context) {
-          const rainfall = context.dataset.data[context.dataIndex];
-          const probability = forecast[context.dataIndex].precipitation_probability;
+      formatter: function (value, context) {
+        const precipitationType = config.forecast.precipitation_type;
+
+        const rainfall = context.dataset.data[context.dataIndex];
+        const probability = forecast[context.dataIndex].precipitation_probability;
 
-          let formattedValue;
+        let formattedValue;
+        if (precipitationType === 'rainfall') {
           if (probability !== undefined && probability !== null && config.forecast.show_probability) {
             formattedValue = `${rainfall > 9 ? Math.round(rainfall) : rainfall.toFixed(1)} ${precipUnit}\n${Math.round(probability)}%`;
           } else {
             formattedValue = `${rainfall > 9 ? Math.round(rainfall) : rainfall.toFixed(1)} ${precipUnit}`;
           }
+        } else {
+          formattedValue = `${rainfall > 9 ? Math.round(rainfall) : rainfall.toFixed(1)} ${precipUnit}`;
+        }
 
-          formattedValue = formattedValue.replace('\n', '\n\n');
+        formattedValue = formattedValue.replace('\n', '\n\n');
 
-          return formattedValue;
-        },
+        return formattedValue;
+      },
         textAlign: 'center',
         textBaseline: 'middle',
         align: 'top',
         anchor: 'start',
-        offset: -8,
+        offset: -10,
       },
     },
   ];
@@ -665,16 +685,17 @@ drawChart({ config, language, weather, forecastItems } = this) {
                 hour12: config.use_12hour_format,
               });
             },
-            label: function (context) {
-              var label = context.dataset.label;
-              var value = context.formattedValue;
-              var probability = forecast[context.dataIndex].precipitation_probability;
-              var unit = context.datasetIndex === 2 ? precipUnit : tempUnit;
-              if (context.datasetIndex === 2 && config.forecast.show_probability && probability !== undefined && probability !== null) {
-                return label + ': ' + value + ' ' + precipUnit + ' / ' + Math.round(probability) + '%';
-              } else {
-                return label + ': ' + value + ' ' + unit;
-              }
+    label: function (context) {
+      var label = context.dataset.label;
+      var value = context.formattedValue;
+      var probability = forecast[context.dataIndex].precipitation_probability;
+      var unit = context.datasetIndex === 2 ? precipUnit : tempUnit;
+
+      if (config.forecast.precipitation_type === 'rainfall' && context.datasetIndex === 2 && config.forecast.show_probability && probability !== undefined && probability !== null) {
+        return label + ': ' + value + ' ' + precipUnit + ' / ' + Math.round(probability) + '%';
+      } else {
+        return label + ': ' + value + ' ' + unit;
+      }
             },
           },
         },
@@ -709,7 +730,11 @@ updateChart({ config, language, weather, forecastItems } = this) {
         tempLow[i] = Math.round(tempLow[i]);
       }
     }
-     precip.push(d.precipitation);
+    if (config.forecast.precipitation_type === 'probability') {
+      precip.push(d.precipitation_probability);
+    } else {
+      precip.push(d.precipitation);
+    }
   }
 
   if (this.forecastChart) {

diff --git a/src/weather-card-editor.js b/src/weather-card-editor.js
@@ -624,7 +624,20 @@ class WeatherCardEditor extends LitElement {
               Rounding Temperatures
             </label>
           </div>
-         <div class="switch-container">
+	  <div class="textfield-container">
+          <ha-select
+            naturalMenuWidth
+            fixedMenuPosition
+            label="Precipitation Type (Probability if supported by the weather entity)"
+            .configValue=${'forecast.precipitation_type'}
+            .value=${forecastConfig.precipitation_type}
+            @change=${(e) => this._valueChanged(e, 'forecast.precipitation_type')}
+            @closed=${(ev) => ev.stopPropagation()}
+          >
+            <ha-list-item .value=${'rainfall'}>Rainfall</ha-list-item>
+            <ha-list-item .value=${'probability'}>Probability</ha-list-item>
+          </ha-select>
+         <div class="switch-container" ?hidden=${forecastConfig.precipitation_type !== 'rainfall'}>
              <ha-switch
                @change="${(e) => this._valueChanged(e, 'forecast.show_probability')}"
                .checked="${forecastConfig.show_probability !== false}"