diff --git a/README.md b/README.md index a0802c1..25292f5 100644 --- 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 index c41e534..f485145 100644 --- a/dist/weather-chart-card.js +++ b/dist/weather-chart-card.js @@ -1455,7 +1455,20 @@ class WeatherCardEditor extends s { Rounding Temperatures -
+
+ this._valueChanged(e, 'forecast.precipitation_type')} + @closed=${(ev) => ev.stopPropagation()} + > + Rainfall + Probability + +
= 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 index d249e58..2067192 100644 --- 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 index 650c4ce..e3f4f15 100644 --- a/src/weather-card-editor.js +++ b/src/weather-card-editor.js @@ -624,7 +624,20 @@ class WeatherCardEditor extends LitElement { Rounding Temperatures
-
+
+ this._valueChanged(e, 'forecast.precipitation_type')} + @closed=${(ev) => ev.stopPropagation()} + > + Rainfall + Probability + +