diff --git a/src/data/weather.ts b/src/data/weather.ts
index be668288d1..e3ef7fa9ec 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -436,3 +436,19 @@ export const getWeatherStateIcon = (
return undefined;
};
+
+const DAY_IN_MILLISECONDS = 86400000;
+
+export const isForecastHourly = (
+ forecast?: ForecastAttribute[]
+): boolean | undefined => {
+ if (forecast && forecast?.length && forecast?.length > 2) {
+ const date1 = new Date(forecast[1].datetime);
+ const date2 = new Date(forecast[2].datetime);
+ const timeDiff = date2.getTime() - date1.getTime();
+
+ return timeDiff < DAY_IN_MILLISECONDS;
+ }
+
+ return undefined;
+};
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index f34308ff61..8d401f4cd7 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -33,7 +33,11 @@ import { formatDateWeekday } from "../../../common/datetime/format_date";
import { formatTimeWeekday } from "../../../common/datetime/format_time";
import { formatNumber } from "../../../common/number/format_number";
import "../../../components/ha-svg-icon";
-import { getWeatherUnit, getWind } from "../../../data/weather";
+import {
+ getWeatherUnit,
+ getWind,
+ isForecastHourly,
+} from "../../../data/weather";
import { HomeAssistant } from "../../../types";
const weatherIcons = {
@@ -82,6 +86,8 @@ class MoreInfoWeather extends LitElement {
return html``;
}
+ const hourly = isForecastHourly(this.stateObj.attributes.forecast);
+
return html`
@@ -169,48 +175,49 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.forecast")}:
- ${this.stateObj.attributes.forecast.map(
- (item) => html`
-
- ${item.condition
- ? html`
-
- `
- : ""}
- ${!this._showValue(item.templow)
- ? html`
-
- ${formatTimeWeekday(
- new Date(item.datetime),
- this.hass.locale
- )}
-
- `
- : ""}
- ${this._showValue(item.templow)
- ? html`
-
- ${formatDateWeekday(
- new Date(item.datetime),
- this.hass.locale
- )}
-
-
- ${formatNumber(item.templow, this.hass.locale)}
- ${getWeatherUnit(this.hass, "temperature")}
-
- `
- : ""}
-
- ${this._showValue(item.temperature)
- ? `${formatNumber(item.temperature, this.hass.locale)}
- ${getWeatherUnit(this.hass, "temperature")}`
+ ${this.stateObj.attributes.forecast.map((item) =>
+ this._showValue(item.templow) || this._showValue(item.temperature)
+ ? html`
+ ${item.condition
+ ? html`
+
+ `
: ""}
-
-
- `
+ ${hourly
+ ? html`
+
+ ${formatTimeWeekday(
+ new Date(item.datetime),
+ this.hass.locale
+ )}
+
+ `
+ : html`
+
+ ${formatDateWeekday(
+ new Date(item.datetime),
+ this.hass.locale
+ )}
+
+ `}
+
+ ${this._showValue(item.templow)
+ ? `${formatNumber(item.templow, this.hass.locale)}
+ ${getWeatherUnit(this.hass, "temperature")}`
+ : hourly
+ ? ""
+ : "—"}
+
+
+ ${this._showValue(item.temperature)
+ ? `${formatNumber(item.temperature, this.hass.locale)}
+ ${getWeatherUnit(this.hass, "temperature")}`
+ : "—"}
+
+
`
+ : ""
)}
`
: ""}
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 0d599a383a..7ec93b41e7 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -24,6 +24,7 @@ import {
getWeatherStateIcon,
getWeatherUnit,
getWind,
+ isForecastHourly,
weatherAttrIcons,
WeatherEntity,
weatherSVGStyles,
@@ -177,23 +178,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
: undefined;
const weather = !forecast || this._config?.show_current !== false;
- let hourly: boolean | undefined;
+ const hourly = isForecastHourly(forecast);
let dayNight: boolean | undefined;
- if (forecast?.length && forecast?.length > 2) {
- const date1 = new Date(forecast[1].datetime);
- const date2 = new Date(forecast[2].datetime);
- const timeDiff = date2.getTime() - date1.getTime();
+ if (hourly) {
+ const dateFirst = new Date(forecast![0].datetime);
+ const datelast = new Date(forecast![forecast!.length - 1].datetime);
+ const dayDiff = datelast.getTime() - dateFirst.getTime();
- hourly = timeDiff < DAY_IN_MILLISECONDS;
-
- if (hourly) {
- const dateFirst = new Date(forecast[0].datetime);
- const datelast = new Date(forecast[forecast.length - 1].datetime);
- const dayDiff = datelast.getTime() - dateFirst.getTime();
-
- dayNight = dayDiff > DAY_IN_MILLISECONDS;
- }
+ dayNight = dayDiff > DAY_IN_MILLISECONDS;
}
const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
@@ -288,69 +281,76 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
${forecast
? html`
- ${forecast.map(
- (item) => html`
-
-
- ${dayNight
- ? html`
- ${new Date(item.datetime).toLocaleDateString(
- this.hass!.language,
- { weekday: "short" }
- )}
-
- ${item.daytime === undefined || item.daytime
- ? this.hass!.localize("ui.card.weather.day")
- : this.hass!.localize(
- "ui.card.weather.night"
- )}
-
- `
- : hourly
- ? html`
- ${formatTime(
- new Date(item.datetime),
- this.hass!.locale
- )}
- `
- : html`
- ${new Date(item.datetime).toLocaleDateString(
- this.hass!.language,
- { weekday: "short" }
- )}
- `}
-
- ${item.condition !== undefined && item.condition !== null
- ? html`
-
- ${getWeatherStateIcon(
- item.condition,
- this,
- !(item.daytime || item.daytime === undefined)
- )}
-
- `
- : ""}
- ${item.temperature !== undefined &&
- item.temperature !== null
- ? html`
-
- ${formatNumber(
- item.temperature,
- this.hass!.locale
- )}°
-
- `
- : ""}
- ${item.templow !== undefined && item.templow !== null
- ? html`
-
- ${formatNumber(item.templow, this.hass!.locale)}°
-
- `
- : ""}
-
- `
+ ${forecast.map((item) =>
+ this._showValue(item.templow) ||
+ this._showValue(item.temperature)
+ ? html`
+
+
+ ${dayNight
+ ? html`
+ ${new Date(item.datetime).toLocaleDateString(
+ this.hass!.language,
+ { weekday: "short" }
+ )}
+
+ ${item.daytime === undefined || item.daytime
+ ? this.hass!.localize(
+ "ui.card.weather.day"
+ )
+ : this.hass!.localize(
+ "ui.card.weather.night"
+ )}
+
+ `
+ : hourly
+ ? html`
+ ${formatTime(
+ new Date(item.datetime),
+ this.hass!.locale
+ )}
+ `
+ : html`
+ ${new Date(item.datetime).toLocaleDateString(
+ this.hass!.language,
+ { weekday: "short" }
+ )}
+ `}
+
+ ${this._showValue(item.condition)
+ ? html`
+
+ ${getWeatherStateIcon(
+ item.condition!,
+ this,
+ !(
+ item.daytime || item.daytime === undefined
+ )
+ )}
+
+ `
+ : ""}
+
+ ${this._showValue(item.temperature)
+ ? html`${formatNumber(
+ item.temperature,
+ this.hass!.locale
+ )}°`
+ : "—"}
+
+
+ ${this._showValue(item.templow)
+ ? html`${formatNumber(
+ item.templow!,
+ this.hass!.locale
+ )}°`
+ : hourly
+ ? ""
+ : "—"}
+
+
+ `
+ : ""
)}
`
@@ -402,6 +402,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
this._veryVeryNarrow = card.offsetWidth < 245;
}
+ private _showValue(item?: any): boolean {
+ return typeof item !== "undefined" && item !== null;
+ }
+
static get styles(): CSSResultGroup {
return [
weatherSVGStyles,