Weather card: Add wind speed direction (#7202)

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

src/data/weather.ts

@@ -48,7 +48,7 @@ const snowyStates = new Set<string>(["snowy", "snowy-rainy"]);
 
 const lightningStates = new Set<string>(["lightning", "lightning-rainy"]);
 
-export const cardinalDirections = [
+const cardinalDirections = [
   "N",
   "NNE",
   "NE",
@@ -77,13 +77,29 @@ const getWindBearingText = (degree: string): string => {
   return degree;
 };
 
-export const getWindBearing = (bearing: string): string => {
+const getWindBearing = (bearing: string): string => {
   if (bearing != null) {
     return getWindBearingText(bearing);
   }
   return "";
 };
 
+export const getWind = (
+  hass: HomeAssistant,
+  speed: string,
+  bearing: string
+): string => {
+  if (bearing !== null) {
+    const cardinalDirection = getWindBearing(bearing);
+    return `${speed} ${getWeatherUnit(hass!, "wind_speed")} (${
+      hass.localize(
+        `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
+      ) || cardinalDirection
+    })`;
+  }
+  return `${speed} ${getWeatherUnit(hass!, "wind_speed")}`;
+};
+
 export const getWeatherUnit = (
   hass: HomeAssistant,
   measure: string
@@ -210,7 +226,7 @@ export const weatherSVGStyles = css`
   }
 `;
 
-export const getWeatherStateSVG = (
+const getWeatherStateSVG = (
   state: string,
   nightTime?: boolean
 ): SVGTemplateResult => {

src/dialogs/more-info/controls/more-info-weather.ts

@@ -11,6 +11,8 @@ import {
 import { html, TemplateResult } from "lit-html";
 import { HomeAssistant } from "../../../types";
 
+import { getWind, getWeatherUnit } from "../../../data/weather";
+
 import {
   mdiAlertCircleOutline,
   mdiEye,
@@ -33,26 +35,6 @@ import {
   mdiWeatherWindyVariant,
 } from "@mdi/js";
 
-const cardinalDirections = [
-  "N",
-  "NNE",
-  "NE",
-  "ENE",
-  "E",
-  "ESE",
-  "SE",
-  "SSE",
-  "S",
-  "SSW",
-  "SW",
-  "WSW",
-  "W",
-  "WNW",
-  "NW",
-  "NNW",
-  "N",
-];
-
 const weatherIcons = {
   "clear-night": mdiWeatherNight,
   cloudy: mdiWeatherCloudy,
@@ -106,7 +88,8 @@ class MoreInfoWeather extends LitElement {
           ${this.hass.localize("ui.card.weather.attributes.temperature")}
         </div>
         <div>
-          ${this.stateObj.attributes.temperature} ${this.getUnit("temperature")}
+          ${this.stateObj.attributes.temperature}
+          ${getWeatherUnit(this.hass, "temperature")}
         </div>
       </div>
       ${this._showValue(this.stateObj.attributes.pressure)
@@ -118,7 +101,7 @@ class MoreInfoWeather extends LitElement {
               </div>
               <div>
                 ${this.stateObj.attributes.pressure}
-                ${this.getUnit("air_pressure")}
+                ${getWeatherUnit(this.hass, "air_pressure")}
               </div>
             </div>
           `
@@ -142,7 +125,8 @@ class MoreInfoWeather extends LitElement {
                 ${this.hass.localize("ui.card.weather.attributes.wind_speed")}
               </div>
               <div>
-                ${this.getWind(
+                ${getWind(
+                  this.hass,
                   this.stateObj.attributes.wind_speed,
                   this.stateObj.attributes.wind_bearing
                 )}
@@ -158,7 +142,8 @@ class MoreInfoWeather extends LitElement {
                 ${this.hass.localize("ui.card.weather.attributes.visibility")}
               </div>
               <div>
-                ${this.stateObj.attributes.visibility} ${this.getUnit("length")}
+                ${this.stateObj.attributes.visibility}
+                ${getWeatherUnit(this.hass, "length")}
               </div>
             </div>
           `
@@ -191,12 +176,14 @@ class MoreInfoWeather extends LitElement {
                           ${this.computeDate(item.datetime)}
                         </div>
                         <div class="templow">
-                          ${item.templow} ${this.getUnit("temperature")}
+                          ${item.templow}
+                          ${getWeatherUnit(this.hass, "temperature")}
                         </div>
                       `
                     : ""}
                   <div class="temp">
-                    ${item.temperature} ${this.getUnit("temperature")}
+                    ${item.temperature}
+                    ${getWeatherUnit(this.hass, "temperature")}
                   </div>
                 </div>
               `;
@@ -269,41 +256,6 @@ class MoreInfoWeather extends LitElement {
     });
   }
 
-  private getUnit(measure: string): string {
-    const lengthUnit = this.hass.config.unit_system.length || "";
-    switch (measure) {
-      case "air_pressure":
-        return lengthUnit === "km" ? "hPa" : "inHg";
-      case "length":
-        return lengthUnit;
-      case "precipitation":
-        return lengthUnit === "km" ? "mm" : "in";
-      default:
-        return this.hass.config.unit_system[measure] || "";
-    }
-  }
-
-  private windBearingToText(degree: string): string {
-    const degreenum = parseInt(degree, 10);
-    if (isFinite(degreenum)) {
-      // eslint-disable-next-line no-bitwise
-      return cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
-    }
-    return degree;
-  }
-
-  private getWind(speed: string, bearing: string) {
-    if (bearing != null) {
-      const cardinalDirection = this.windBearingToText(bearing);
-      return `${speed} ${this.getUnit("length")}/h (${
-        this.hass.localize(
-          `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
-        ) || cardinalDirection
-      })`;
-    }
-    return `${speed} ${this.getUnit("length")}/h`;
-  }
-
   private _showValue(item: string): boolean {
     return typeof item !== "undefined" && item !== null;
   }

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

@@ -23,6 +23,7 @@ import {
   getSecondaryWeatherAttribute,
   getWeatherUnit,
   getWeatherStateIcon,
+  getWind,
   weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant, WeatherEntity } from "../../../types";
@@ -224,13 +225,21 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                       ${this.hass!.localize(
                         `ui.card.weather.attributes.${this._config.secondary_info_attribute}`
                       )}
-                      ${stateObj.attributes[
+                      ${this._config.secondary_info_attribute === "wind_speed"
-                        this._config.secondary_info_attribute
+                        ? getWind(
-                      ]}
+                            this.hass,
-                      ${getWeatherUnit(
+                            stateObj.attributes.wind_speed,
-                        this.hass,
+                            stateObj.attributes.wind_bearing
-                        this._config.secondary_info_attribute
+                          )
-                      )}
+                        : html`
+                            ${stateObj.attributes[
+                              this._config.secondary_info_attribute
+                            ]}
+                            ${getWeatherUnit(
+                              this.hass,
+                              this._config.secondary_info_attribute
+                            )}
+                          `}
                     `
                   : getSecondaryWeatherAttribute(this.hass, stateObj)}
               </div>

src/types.ts

@@ -360,5 +360,7 @@ export type WeatherEntity = HassEntityBase & {
     temperature: number;
     humidity?: number;
     forecast?: ForecastAttribute[];
+    wind_speed: string;
+    wind_bearing: string;
   };
 };