feat: round_temperature on weather forecast card

src/data/weather.ts

@@ -179,6 +179,22 @@ const cardinalDirections = [
   "N",
 ];
 
+export function weatherTempRound(
+  value: number | undefined,
+  decimals: number | undefined
+): number | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (decimals === undefined) {
+    return value;
+  }
+  const rounded = Number.isInteger(value)
+    ? value.toString()
+    : value.toFixed(decimals);
+  return Number(rounded);
+}
+
 const getWindBearingText = (degree: number | string): string => {
   const degreenum = typeof degree === "number" ? degree : parseInt(degree, 10);
   if (isFinite(degreenum)) {
@@ -256,9 +272,15 @@ export const getWeatherUnit = (
 export const getSecondaryWeatherAttribute = (
   hass: HomeAssistant,
   stateObj: WeatherEntity,
-  forecast: ForecastAttribute[]
+  forecast: ForecastAttribute[],
+  temperatureFractionDigits?: number
 ): TemplateResult | undefined => {
-  const extrema = getWeatherExtrema(hass, stateObj, forecast);
+  const extrema = getWeatherExtrema(
+    hass,
+    stateObj,
+    forecast,
+    temperatureFractionDigits
+  );
 
   if (extrema) {
     return extrema;
@@ -298,7 +320,8 @@ export const getSecondaryWeatherAttribute = (
 const getWeatherExtrema = (
   hass: HomeAssistant,
   stateObj: WeatherEntity,
-  forecast: ForecastAttribute[]
+  forecast: ForecastAttribute[],
+  temperatureFractionDigits?: number
 ): TemplateResult | undefined => {
   if (!forecast?.length) {
     return undefined;
@@ -313,13 +336,13 @@ const getWeatherExtrema = (
       break;
     }
     if (!tempHigh || fc.temperature > tempHigh) {
-      tempHigh = fc.temperature;
+      tempHigh = weatherTempRound(fc.temperature, temperatureFractionDigits);
     }
     if (!tempLow || (fc.templow && fc.templow < tempLow)) {
-      tempLow = fc.templow;
+      tempLow = weatherTempRound(fc.templow, temperatureFractionDigits);
     }
     if (!fc.templow && (!tempLow || fc.temperature < tempLow)) {
-      tempLow = fc.temperature;
+      tempLow = weatherTempRound(fc.temperature, temperatureFractionDigits);
     }
   }
 

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

@@ -23,6 +23,7 @@ import {
   subscribeForecast,
   weatherAttrIcons,
   weatherSVGStyles,
+  weatherTempRound,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
@@ -266,6 +267,20 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       this._config.name
     );
 
+    const temperatureFractionDigits = this._config.round_temperature
+      ? 0
+      : undefined;
+
+    const isSecondaryInfoAttributeTemperature =
+      this._config.secondary_info_attribute?.includes("temperature") ||
+      this._config.secondary_info_attribute === "dew_point";
+
+    const isSecondaryInfoNumber =
+      this._config.secondary_info_attribute &&
+      !Number.isNaN(
+        +stateObj.attributes[this._config.secondary_info_attribute]
+      );
+
     return html`
       <ha-card
         class=${classMap({
@@ -312,7 +327,11 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                         ? html`
                             ${formatNumber(
                               stateObj.attributes.temperature,
-                              this.hass.locale
+                              this.hass.locale,
+                              {
+                                maximumFractionDigits:
+                                  temperatureFractionDigits,
+                              }
                             )}&nbsp;<span
                               >${getWeatherUnit(
                                 this.hass.config,
@@ -350,14 +369,26 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                               : html`
                                   ${this.hass.formatEntityAttributeValue(
                                     stateObj,
-                                    this._config.secondary_info_attribute
+                                    this._config.secondary_info_attribute,
+                                    temperatureFractionDigits === 0 &&
+                                      isSecondaryInfoNumber &&
+                                      isSecondaryInfoAttributeTemperature
+                                      ? weatherTempRound(
+                                          stateObj.attributes[
+                                            this._config
+                                              .secondary_info_attribute
+                                          ],
+                                          temperatureFractionDigits
+                                        )
+                                      : undefined
                                   )}
                                 `}
                           `
                         : getSecondaryWeatherAttribute(
                             this.hass,
                             stateObj,
-                            forecast!
+                            forecast!,
+                            temperatureFractionDigits
                           )}
                     </div>
                   </div>
@@ -425,15 +456,24 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                             ${this._showValue(item.temperature)
                               ? html`${formatNumber(
                                   item.temperature,
-                                  this.hass!.locale
+                                  this.hass!.locale,
+
+                                  {
+                                    maximumFractionDigits:
+                                      temperatureFractionDigits,
+                                  }
                                 )}°`
                               : "—"}
                           </div>
                           <div class="templow">
                             ${this._showValue(item.templow)
                               ? html`${formatNumber(
                                   item.templow!,
-                                  this.hass!.locale
+                                  this.hass!.locale,
+                                  {
+                                    maximumFractionDigits:
+                                      temperatureFractionDigits,
+                                  }
                                 )}°`
                               : hourly
                                 ? ""

src/panels/lovelace/cards/types.ts

@@ -590,6 +590,7 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
   forecast_type?: ForecastType;
   forecast_slots?: number;
   secondary_info_attribute?: keyof TranslationDict["ui"]["card"]["weather"]["attributes"];
+  round_temperature?: boolean;
   theme?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -37,6 +37,7 @@ const cardConfigStruct = assign(
     forecast_type: optional(string()),
     forecast_slots: optional(number()),
     secondary_info_attribute: optional(string()),
+    round_temperature: optional(boolean()),
     tap_action: optional(actionConfigStruct),
     hold_action: optional(actionConfigStruct),
     double_tap_action: optional(actionConfigStruct),
@@ -156,6 +157,10 @@ export class HuiWeatherForecastCardEditor
           },
           context: { entity: "entity" },
         },
+        {
+          name: "round_temperature",
+          selector: { boolean: {} },
+        },
         {
           name: "",
           type: "grid",

src/translations/en.json

@@ -304,6 +304,7 @@
       },
       "weather": {
         "attributes": {
+          "dew_point": "Dew point",
           "air_pressure": "Air pressure",
           "humidity": "Humidity",
           "temperature": "Temperature",
@@ -7953,6 +7954,7 @@
               "suggested_cards": "Suggested cards",
               "other_cards": "Other cards",
               "custom_cards": "Custom cards",
+              "round_temperature": "Round temperature",
               "features": "Features",
               "actions": "Actions",
               "content": "Content"