Align state display with Home Assistant

src/cards/chips-card/chips/alarm-control-panel-chip.ts

@@ -7,7 +7,6 @@ import {
   actionHandler,
   ActionHandlerEvent,
   computeRTL,
-  computeStateDisplay,
   handleAction,
   hasAction,
   HomeAssistant,
@@ -82,15 +81,7 @@ export class AlarmControlPanelChip extends LitElement implements LovelaceChip {
     const iconColor = getStateColor(stateObj.state);
     const iconPulse = shouldPulse(stateObj.state);
 
-    const stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    const stateDisplay = this.hass.formatEntityState(stateObj);
 
     const iconStyle = {};
     if (iconColor) {

src/cards/chips-card/chips/entity-chip.ts

@@ -1,3 +1,4 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -13,7 +14,6 @@ import {
   actionHandler,
   ActionHandlerEvent,
   computeRTL,
-  computeStateDisplay,
   getEntityPicture,
   handleAction,
   hasAction,
@@ -31,7 +31,6 @@ import {
   LovelaceChip,
 } from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
-import { HassEntity } from "home-assistant-js-websocket";
 
 @customElement(computeChipComponentName("entity"))
 export class EntityChip extends LitElement implements LovelaceChip {
@@ -84,15 +83,7 @@ export class EntityChip extends LitElement implements LovelaceChip {
       ? getEntityPicture(stateObj)
       : undefined;
 
-    const stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    const stateDisplay = this.hass.formatEntityState(stateObj);
 
     const active = isActive(stateObj);
 

src/cards/chips-card/chips/light-chip.ts

@@ -6,7 +6,6 @@ import {
   actionHandler,
   ActionHandlerEvent,
   computeRTL,
-  computeStateDisplay,
   handleAction,
   hasAction,
   HomeAssistant,
@@ -80,15 +79,7 @@ export class LightChip extends LitElement implements LovelaceChip {
     const name = this._config.name || stateObj.attributes.friendly_name || "";
     const icon = this._config.icon;
 
-    const stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    const stateDisplay = this.hass.formatEntityState(stateObj);
 
     const active = isActive(stateObj);
 

src/cards/chips-card/chips/weather-chip.ts

@@ -1,10 +1,10 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import {
   actionHandler,
   ActionHandlerEvent,
   computeRTL,
-  computeStateDisplay,
   formatNumber,
   handleAction,
   hasAction,
@@ -20,7 +20,6 @@ import {
 } from "../../../utils/lovelace/chip/types";
 import { LovelaceChipEditor } from "../../../utils/lovelace/types";
 import { getWeatherStateSVG, weatherSVGStyles } from "../../../utils/weather";
-import { HassEntity } from "home-assistant-js-websocket";
 
 @customElement(computeChipComponentName("weather"))
 export class WeatherChip extends LitElement implements LovelaceChip {
@@ -71,23 +70,15 @@ export class WeatherChip extends LitElement implements LovelaceChip {
     const displayLabels: string[] = [];
 
     if (this._config.show_conditions) {
-      const stateDisplay = this.hass.formatEntityState
-        ? this.hass.formatEntityState(stateObj)
-        : computeStateDisplay(
-            this.hass.localize,
-            stateObj,
-            this.hass.locale,
-            this.hass.config,
-            this.hass.entities
-          );
+      const stateDisplay = this.hass.formatEntityState(stateObj);
       displayLabels.push(stateDisplay);
     }
 
     if (this._config.show_temperature) {
-      const temperatureDisplay = `${formatNumber(
-        stateObj.attributes.temperature,
-        this.hass.locale
-      )} ${this.hass.config.unit_system.temperature}`;
+      const temperatureDisplay = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "temperature"
+      );
       displayLabels.push(temperatureDisplay);
     }
 
@@ -104,7 +95,7 @@ export class WeatherChip extends LitElement implements LovelaceChip {
       >
         ${weatherIcon}
         ${displayLabels.length > 0
-          ? html`<span>${displayLabels.join(" / ")}</span>`
+          ? html`<span>${displayLabels.join(" ⸱ ")}</span>`
           : nothing}
       </mushroom-chip>
     `;

src/cards/climate-card/climate-card.ts

@@ -14,7 +14,6 @@ import {
   ActionHandlerEvent,
   ClimateEntity,
   computeRTL,
-  computeStateDisplay,
   formatNumber,
   handleAction,
   hasAction,
@@ -167,22 +166,13 @@ export class ClimateCard
     const appearance = computeAppearance(this._config);
     const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    let stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    let stateDisplay = this.hass.formatEntityState(stateObj);
     if (stateObj.attributes.current_temperature !== null) {
-      const temperature = formatNumber(
-        stateObj.attributes.current_temperature,
-        this.hass.locale
+      const temperature = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_temperature"
       );
-      const unit = this.hass.config.unit_system.temperature;
-      stateDisplay += ` - ${temperature} ${unit}`;
+      stateDisplay += ` ⸱ ${temperature}`;
     }
     const rtl = computeRTL(this.hass);
 

src/cards/cover-card/cover-card.ts

@@ -12,9 +12,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
-  computeStateDisplay,
   CoverEntity,
   handleAction,
   hasAction,
@@ -195,17 +193,14 @@ export class CoverCard
     const appearance = computeAppearance(this._config);
     const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    let stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.position) {
-      stateDisplay += ` - ${this.position}${blankBeforePercent(this.hass.locale)}%`;
+      const position = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_position",
+        this.position
+      );
+      stateDisplay += ` ⸱ ${position}`;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/fan-card/fan-card.ts

@@ -13,9 +13,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
-  computeStateDisplay,
   handleAction,
   hasAction,
   HomeAssistant,
@@ -137,17 +135,14 @@ export class FanCard
     const appearance = computeAppearance(this._config);
     const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    let stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.percentage != null && stateObj.state === "on") {
-      stateDisplay = `${this.percentage}${blankBeforePercent(this.hass.locale)}%`;
+      const percentage = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "percentage",
+        this.percentage
+      );
+      stateDisplay = percentage;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/humidifier-card/humidifier-card.ts

@@ -4,9 +4,7 @@ import { classMap } from "lit/directives/class-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
-  computeStateDisplay,
   handleAction,
   hasAction,
   HomeAssistant,
@@ -110,17 +108,14 @@ export class HumidifierCard
     const appearance = computeAppearance(this._config);
     const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    let stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.humidity) {
-      stateDisplay = `${this.humidity}${blankBeforePercent(this.hass.locale)}%`;
+      const humidity = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "current_humidity",
+        this.humidity
+      );
+      stateDisplay = humidity;
     }
 
     const rtl = computeRTL(this.hass);

src/cards/light-card/light-card.ts

@@ -12,9 +12,7 @@ import { styleMap } from "lit/directives/style-map.js";
 import {
   actionHandler,
   ActionHandlerEvent,
-  blankBeforePercent,
   computeRTL,
-  computeStateDisplay,
   handleAction,
   hasAction,
   HomeAssistant,
@@ -46,7 +44,6 @@ import "./controls/light-color-control";
 import "./controls/light-color-temp-control";
 import { LightCardConfig } from "./light-card-config";
 import {
-  getBrightness,
   getRGBColor,
   isColorLight,
   isColorSuperLight,
@@ -158,12 +155,12 @@ export class LightCard
     const stateObj = this._stateObj;
 
     if (!stateObj) return;
-    this.brightness = getBrightness(stateObj);
+    this.brightness = stateObj.attributes.brightness;
   }
 
   private onCurrentBrightnessChange(e: CustomEvent<{ value?: number }>): void {
     if (e.detail.value != null) {
-      this.brightness = e.detail.value;
+      this.brightness = (e.detail.value * 255) / 100;
     }
   }
 
@@ -196,17 +193,14 @@ export class LightCard
     const appearance = computeAppearance(this._config);
     const picture = computeEntityPicture(stateObj, appearance.icon_type);
 
-    let stateDisplay = this.hass.formatEntityState
-      ? this.hass.formatEntityState(stateObj)
-      : computeStateDisplay(
-          this.hass.localize,
-          stateObj,
-          this.hass.locale,
-          this.hass.config,
-          this.hass.entities
-        );
+    let stateDisplay = this.hass.formatEntityState(stateObj);
     if (this.brightness != null) {
-      stateDisplay = `${this.brightness}${blankBeforePercent(this.hass.locale)}%`;
+      const brightness = this.hass.formatEntityAttributeValue(
+        stateObj,
+        "brightness",
+        this.brightness
+      );
+      stateDisplay = brightness;
     }
 
     const rtl = computeRTL(this.hass);