Ensure forecast temperatures are properly positioned + show em-dash when n/a (#9066)

Co-authored-by: Zack Barett <zackbarett@hey.com>

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;
+};

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`
       <div class="flex">
         <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
@@ -169,9 +175,9 @@ class MoreInfoWeather extends LitElement {
             <div class="section">
               ${this.hass.localize("ui.card.weather.forecast")}:
             </div>
-            ${this.stateObj.attributes.forecast.map(
+            ${this.stateObj.attributes.forecast.map((item) =>
-              (item) => html`
+              this._showValue(item.templow) || this._showValue(item.temperature)
-                <div class="flex">
+                ? html`<div class="flex">
                     ${item.condition
                       ? html`
                           <ha-svg-icon
@@ -179,7 +185,7 @@ class MoreInfoWeather extends LitElement {
                           ></ha-svg-icon>
                         `
                       : ""}
-                  ${!this._showValue(item.templow)
+                    ${hourly
                       ? html`
                           <div class="main">
                             ${formatTimeWeekday(
@@ -188,29 +194,30 @@ class MoreInfoWeather extends LitElement {
                             )}
                           </div>
                         `
-                    : ""}
+                      : html`
-                  ${this._showValue(item.templow)
-                    ? html`
                           <div class="main">
                             ${formatDateWeekday(
                               new Date(item.datetime),
                               this.hass.locale
                             )}
                           </div>
+                        `}
                     <div class="templow">
-                          ${formatNumber(item.templow, this.hass.locale)}
+                      ${this._showValue(item.templow)
-                          ${getWeatherUnit(this.hass, "temperature")}
+                        ? `${formatNumber(item.templow, this.hass.locale)}
+                          ${getWeatherUnit(this.hass, "temperature")}`
+                        : hourly
+                        ? ""
+                        : "—"}
                     </div>
-                      `
-                    : ""}
                     <div class="temp">
                       ${this._showValue(item.temperature)
                         ? `${formatNumber(item.temperature, this.hass.locale)}
                         ${getWeatherUnit(this.hass, "temperature")}`
-                      : ""}
+                        : "—"}
                     </div>
-                </div>
+                  </div>`
-              `
+                : ""
             )}
           `
         : ""}

src/panels/lovelace/cards/hui-weather-forecast-card.ts

@@ -24,6 +24,7 @@ import {
   getWeatherStateIcon,
   getWeatherUnit,
   getWind,
+  isForecastHourly,
   weatherAttrIcons,
   WeatherEntity,
   weatherSVGStyles,
@@ -177,24 +178,16 @@ 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();
-
-      hourly = timeDiff < DAY_IN_MILLISECONDS;
-
     if (hourly) {
-        const dateFirst = new Date(forecast[0].datetime);
+      const dateFirst = new Date(forecast![0].datetime);
-        const datelast = new Date(forecast[forecast.length - 1].datetime);
+      const datelast = new Date(forecast![forecast!.length - 1].datetime);
       const dayDiff = datelast.getTime() - dateFirst.getTime();
 
       dayNight = dayDiff > DAY_IN_MILLISECONDS;
     }
-    }
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
     const name = this._config.name ?? computeStateName(stateObj);
@@ -288,8 +281,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         ${forecast
           ? html`
               <div class="forecast">
-                ${forecast.map(
+                ${forecast.map((item) =>
-                  (item) => html`
+                  this._showValue(item.templow) ||
+                  this._showValue(item.temperature)
+                    ? html`
                         <div>
                           <div>
                             ${dayNight
@@ -300,7 +295,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                                   )}
                                   <div class="daynight">
                                     ${item.daytime === undefined || item.daytime
-                                  ? this.hass!.localize("ui.card.weather.day")
+                                      ? this.hass!.localize(
+                                          "ui.card.weather.day"
+                                        )
                                       : this.hass!.localize(
                                           "ui.card.weather.night"
                                         )}<br />
@@ -320,37 +317,40 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                                   )}
                                 `}
                           </div>
-                      ${item.condition !== undefined && item.condition !== null
+                          ${this._showValue(item.condition)
                             ? html`
                                 <div class="forecast-image-icon">
                                   ${getWeatherStateIcon(
-                                item.condition,
+                                    item.condition!,
                                     this,
-                                !(item.daytime || item.daytime === undefined)
+                                    !(
+                                      item.daytime || item.daytime === undefined
+                                    )
                                   )}
                                 </div>
                               `
                             : ""}
-                      ${item.temperature !== undefined &&
-                      item.temperature !== null
-                        ? html`
                           <div class="temp">
-                              ${formatNumber(
+                            ${this._showValue(item.temperature)
+                              ? html`${formatNumber(
                                   item.temperature,
                                   this.hass!.locale
-                              )}°
+                                )}°`
+                              : "—"}
                           </div>
-                          `
-                        : ""}
-                      ${item.templow !== undefined && item.templow !== null
-                        ? html`
                           <div class="templow">
-                              ${formatNumber(item.templow, this.hass!.locale)}°
+                            ${this._showValue(item.templow)
-                            </div>
+                              ? html`${formatNumber(
-                          `
+                                  item.templow!,
-                        : ""}
+                                  this.hass!.locale
+                                )}°`
+                              : hourly
+                              ? ""
+                              : "—"}
+                          </div>
                         </div>
                       `
+                    : ""
                 )}
               </div>
             `
@@ -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,