Merge pull request #10 from flixlix/display-zero

Configure zero value display on individual devices

README.md

@@ -160,6 +160,7 @@ Using individual devices for consumption.
 | name        | `string` | Car / Motorcycle | Name to appear as a label next to the circle. |
 | icon | `string`            | `mdi:car-electric` / `mdi:motorbike-electric` | Icon path (eg: `mdi:home`) to display inside the circle of the device. |
 | color          | `string`        | `#d0cc5b` / `#964cb5` |  HEX Value of a color to display as the stroke of the circle and line connecting to your home. |
+| display_zero | `boolean` | `false` | If true, the device will be displayed even if the entity state is 0 or not a number (eg: unavailable). |
 
 ![image](https://user-images.githubusercontent.com/61006057/227382826-7918ecdc-f578-421e-8d5e-6400e366802e.png)
 

src/power-flow-card-plus-config.ts

@@ -7,17 +7,20 @@ export interface PowerFlowCardConfig extends LovelaceCardConfig {
     battery_charge?: string;
     grid: string | ComboEntity;
     solar?: string;
+    home?: string;
     individual2?: {
       entity?: string;
       name?: string;
       icon?: string;
       color?: string;
+      display_zero?: boolean;
     };
     individual1?: {
       entity?: string;
       name?: string;
       icon?: string;
       color?: string;
+      display_zero?: boolean;
     };
   };
   dashboard_link?: string;

src/power-flow-card-plus.ts

@@ -75,6 +75,9 @@ export class PowerFlowCard extends LitElement {
       `entity "${entityId ?? "Unknown"}" is not available or misconfigured`
     );
 
+  private entityExists = (entityId: string): boolean =>
+    entityId in this.hass.states;
+
   private entityAvailable = (entityId: string): boolean =>
     isNumberValue(this.hass.states[entityId]?.state);
 
@@ -122,8 +125,8 @@ export class PowerFlowCard extends LitElement {
 
   private openDetails(entityId?: string | undefined): void {
     if (!entityId || !this._config.clickable_entities) return;
-    /* if entity is not available */
-    if (!this.entityAvailable(entityId)) return;
+    /* also needs to open details if entity is unavailable, but not if entity doesn't exist is hass states */
+    if (!this.entityExists(entityId)) return;
     const e = new CustomEvent("hass-more-info", {
       composed: true,
       detail: { entityId },
@@ -146,8 +149,18 @@ export class PowerFlowCard extends LitElement {
     const hasGrid = entities.grid !== undefined;
 
     const hasBattery = entities.battery !== undefined;
-    const hasIndividual2 = entities.individual2 !== undefined;
-    const hasIndividual1 = entities.individual1 !== undefined;
+
+    const hasIndividual2 =
+      (entities.individual2 !== undefined &&
+        entities.individual2?.display_zero === true) ||
+      (this.getEntityStateWatts(entities.individual2?.entity) > 0 &&
+        this.entityAvailable(entities.individual2?.entity!));
+
+    const hasIndividual1 =
+      (entities.individual1 !== undefined &&
+        entities.individual1?.display_zero === true) ||
+      (this.getEntityStateWatts(entities.individual1?.entity) > 0 &&
+        this.entityAvailable(entities.individual1?.entity!));
     const hasSolarProduction = entities.solar !== undefined;
     const hasReturnToGrid =
       hasGrid &&
@@ -174,7 +187,10 @@ export class PowerFlowCard extends LitElement {
       this._config.entities.individual2?.icon || "mdi:motorbike-electric";
     const individual2Color: string =
       this._config.entities.individual2?.color! || "#964CB5";
-    this.style.setProperty("--individualtwo-color", individual2Color); /* dynamically update color of entity depending on use input */
+    this.style.setProperty(
+      "--individualtwo-color",
+      individual2Color
+    ); /* dynamically update color of entity depending on use input */
     if (hasIndividual2) {
       const individual2Entity =
         this.hass.states[this._config.entities.individual2?.entity!];
@@ -191,7 +207,10 @@ export class PowerFlowCard extends LitElement {
       this._config.entities.individual1?.icon || "mdi:car-electric";
     const individual1Color: string =
       this._config.entities.individual1?.color! || "#D0CC5B";
-    this.style.setProperty("--individualone-color", individual1Color); /* dynamically update color of entity depending on use input */
+    this.style.setProperty(
+      "--individualone-color",
+      individual1Color
+    ); /* dynamically update color of entity depending on use input */
     if (hasIndividual1) {
       const individual1Entity =
         this.hass.states[this._config.entities.individual1?.entity!];