Add a feature to display any attribute of an entity in the Gauge Card (#25258)

* Add a feature to display any attribute of an entity in the Gauge Card

* Extract list of non numeric attributes into a constant and reuse it in number card as well as in numeric condition

src/data/entity_attributes.ts

@@ -107,3 +107,70 @@ export const DOMAIN_ATTRIBUTES_FORMATERS: Record<
     },
   },
 };
+
+export const NON_NUMERIC_ATTRIBUTES = [
+  "access_token",
+  "auto_update",
+  "available_modes",
+  "away_mode",
+  "changed_by",
+  "code_format",
+  "color_modes",
+  "current_activity",
+  "device_class",
+  "editable",
+  "effect_list",
+  "effect",
+  "entity_picture",
+  "event_type",
+  "event_types",
+  "fan_mode",
+  "fan_modes",
+  "fan_speed_list",
+  "forecast",
+  "friendly_name",
+  "frontend_stream_type",
+  "has_date",
+  "has_time",
+  "hs_color",
+  "hvac_mode",
+  "hvac_modes",
+  "icon",
+  "media_album_name",
+  "media_artist",
+  "media_content_type",
+  "media_position_updated_at",
+  "media_title",
+  "next_dawn",
+  "next_dusk",
+  "next_midnight",
+  "next_noon",
+  "next_rising",
+  "next_setting",
+  "operation_list",
+  "operation_mode",
+  "options",
+  "preset_mode",
+  "preset_modes",
+  "release_notes",
+  "release_summary",
+  "release_url",
+  "restored",
+  "rgb_color",
+  "rgbw_color",
+  "shuffle",
+  "sound_mode_list",
+  "sound_mode",
+  "source_list",
+  "source_type",
+  "source",
+  "state_class",
+  "supported_features",
+  "swing_mode",
+  "swing_mode",
+  "swing_modes",
+  "title",
+  "token",
+  "unit_of_measurement",
+  "xy_color",
+];

src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts

@@ -18,6 +18,7 @@ import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import type { NumericStateCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
+import { NON_NUMERIC_ATTRIBUTES } from "../../../../../data/entity_attributes";
 
 const numericStateConditionStruct = object({
   alias: optional(string()),
@@ -85,72 +86,7 @@ export default class HaNumericStateCondition extends LitElement {
           name: "attribute",
           selector: {
             attribute: {
-              hide_attributes: [
+              hide_attributes: NON_NUMERIC_ATTRIBUTES,
-                "access_token",
-                "auto_update",
-                "available_modes",
-                "away_mode",
-                "changed_by",
-                "code_format",
-                "color_modes",
-                "current_activity",
-                "device_class",
-                "editable",
-                "effect_list",
-                "effect",
-                "entity_picture",
-                "event_type",
-                "event_types",
-                "fan_mode",
-                "fan_modes",
-                "fan_speed_list",
-                "forecast",
-                "friendly_name",
-                "frontend_stream_type",
-                "has_date",
-                "has_time",
-                "hs_color",
-                "hvac_mode",
-                "hvac_modes",
-                "icon",
-                "media_album_name",
-                "media_artist",
-                "media_content_type",
-                "media_position_updated_at",
-                "media_title",
-                "next_dawn",
-                "next_dusk",
-                "next_midnight",
-                "next_noon",
-                "next_rising",
-                "next_setting",
-                "operation_list",
-                "operation_mode",
-                "options",
-                "preset_mode",
-                "preset_modes",
-                "release_notes",
-                "release_summary",
-                "release_url",
-                "restored",
-                "rgb_color",
-                "rgbw_color",
-                "shuffle",
-                "sound_mode_list",
-                "sound_mode",
-                "source_list",
-                "source_type",
-                "source",
-                "state_class",
-                "supported_features",
-                "swing_mode",
-                "swing_mode",
-                "swing_modes",
-                "title",
-                "token",
-                "unit_of_measurement",
-                "xy_color",
-              ],
             },
           },
           context: {

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -109,12 +109,18 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    if (isNaN(entityState)) {
+    const valueToDisplay = this._config.attribute
+      ? stateObj.attributes[this._config.attribute]
+      : stateObj.state;
+
+    if (isNaN(valueToDisplay)) {
       return html`
         <hui-warning
           >${this.hass.localize(
-            "ui.panel.lovelace.warning.entity_non_numeric",
+            this._config.attribute
-            { entity: this._config.entity }
+              ? "ui.panel.lovelace.warning.attribute_not_numeric"
+              : "ui.panel.lovelace.warning.entity_non_numeric",
+            { entity: this._config.entity, attribute: this._config.attribute }
           )}</hui-warning
         >
       `;
@@ -141,7 +147,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         <ha-gauge
           .min=${this._config.min!}
           .max=${this._config.max!}
-          .value=${stateObj.state}
+          .value=${valueToDisplay}
           .formatOptions=${getNumberFormatOptions(
             stateObj,
             this.hass.entities[stateObj.entity_id]

src/panels/lovelace/cards/types.ts

@@ -233,6 +233,7 @@ export interface GaugeSegment {
 
 export interface GaugeCardConfig extends LovelaceCardConfig {
   entity: string;
+  attribute?: string;
   name?: string;
   unit?: string;
   min?: number;

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

@@ -23,6 +23,7 @@ import type { UiAction } from "../../components/hui-action-editor";
 import type { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { NON_NUMERIC_ATTRIBUTES } from "../../../../data/entity_attributes";
 
 const TAP_ACTIONS: UiAction[] = [
   "more-info",
@@ -44,6 +45,7 @@ const cardConfigStruct = assign(
   object({
     name: optional(string()),
     entity: optional(string()),
+    attribute: optional(string()),
     unit: optional(string()),
     min: optional(number()),
     max: optional(number()),
@@ -76,7 +78,7 @@ export class HuiGaugeCardEditor
   }
 
   private _schema = memoizeOne(
-    (showSeverity: boolean) =>
+    (showSeverity: boolean, entityId?: string) =>
       [
         {
           name: "entity",
@@ -86,6 +88,15 @@ export class HuiGaugeCardEditor
             },
           },
         },
+        {
+          name: "attribute",
+          selector: {
+            attribute: {
+              entity_id: entityId,
+              hide_attributes: NON_NUMERIC_ATTRIBUTES,
+            },
+          },
+        },
         {
           name: "",
           type: "grid",
@@ -182,7 +193,10 @@ export class HuiGaugeCardEditor
       return nothing;
     }
 
-    const schema = this._schema(this._config!.severity !== undefined);
+    const schema = this._schema(
+      this._config!.severity !== undefined,
+      this._config!.entity
+    );
     const data = {
       show_severity: this._config!.severity !== undefined,
       ...this._config,
@@ -275,6 +289,10 @@ export class HuiGaugeCardEditor
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`;
+      case "attribute":
+        return this.hass!.localize(
+          "ui.panel.lovelace.editor.card.generic.attribute"
+        );
       default:
         // "green" | "yellow" | "red"
         return this.hass!.localize(

src/translations/en.json

@@ -7828,6 +7828,7 @@
         },
         "warning": {
           "attribute_not_found": "Attribute {attribute} not available in: {entity}",
+          "attribute_not_numeric": "Attribute {attribute} is non-numeric",
           "entity_not_found": "Entity not available: {entity}",
           "entity_non_numeric": "Entity is non-numeric: {entity}",
           "entity_unavailable": "Entity is currently unavailable: {entity}",