feat: added grid zero tolerance

README.md

@@ -116,6 +116,7 @@ At least one of _grid_, _battery_, or _solar_ is required. All entites (except _
 | display_state | "two_way" or "one_way" or "one_way_no_zero" | `two_way` | If set to `two_way` the production will always be shown simultaneously, no matter the state. If set to `one_way` only the direction that is active will be shown (since this card only shows instantaneous power, there will be no overlaps ✅). If set to `one_way_no_zero` the behavior will be the same as `one_way` but you will still the consumption direction when every state is `0`. |
 | color_circle | `boolean` or "production" or "consumption" | `false` | If set to `true`, the color of the grid circle changes depending on if you are consuming from the grid or returning to it. If set to `production`, circle color will match the production. If set to `consumption`, circle color will match the consumption. If set to `false`, circle color will match the consumption. |
 | secondary_info | `object` | `undefined` | Check [Secondary Info Object](#secondary-info-configuration) |
+| display_zero_tolerance | `number` | `0` | If the state of the entity is less than this number, it will be considered zero. This is to avoid having the grid circle show a small amount of consumption when the battery is trying to correct itself to the grid. |
 
 #### Solar Configuration
 

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

@@ -24,6 +24,7 @@ export interface PowerFlowCardPlusConfig extends LovelaceCardConfig {
       display_state?: "two_way" | "one_way" | "one_way_no_zero";
       color_circle: boolean | "production" | "consumption";
       secondary_info?: SecondaryInfoType;
+      display_zero_tolerance?: number;
     };
     solar?: {
       entity: string;

src/power-flow-card-plus.ts

@@ -45,10 +45,11 @@ class PowerFlowCardPlus extends LitElement {
     };
   }
 
-  static async getConfigElement(): Promise<LovelaceCardEditor> {
+  // do not use ui editor for now, as it is not working
+  /* static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import("./ui-editor/ui-editor");
     return document.createElement("power-flow-card-plus-editor");
-  }
+  } */
 
   public getCardSize(): Promise<number> | number {
     return 3;
@@ -190,13 +191,20 @@ class PowerFlowCardPlus extends LitElement {
 
     if (hasGrid) {
       if (typeof entities.grid!.entity === "string") {
-        if (this.entityInverted("grid")) totalFromGrid = Math.abs(Math.min(this.getEntityStateWatts(entities.grid?.entity), 0));
-        else totalFromGrid = Math.max(this.getEntityStateWatts(entities.grid?.entity), 0);
+        if (this.entityInverted("grid")) {
+          totalFromGrid = Math.abs(Math.min(this.getEntityStateWatts(entities.grid?.entity), 0));
+        } else {
+          totalFromGrid = Math.max(this.getEntityStateWatts(entities.grid?.entity), 0);
+        }
       } else {
         totalFromGrid = this.getEntityStateWatts(entities.grid!.entity!.consumption);
       }
     }
 
+    if (this._config.entities.grid?.display_zero_tolerance !== undefined) {
+      totalFromGrid = totalFromGrid! > this._config.entities.grid?.display_zero_tolerance ? totalFromGrid : 0;
+    }
+
     const hasGridSecondary =
       entities.grid?.secondary_info?.entity !== undefined &&
       (this.getEntityState(entities.grid?.secondary_info?.entity) > (entities?.grid?.secondary_info?.display_zero_tolerance ?? 0) ||
@@ -225,6 +233,10 @@ class PowerFlowCardPlus extends LitElement {
       }
     }
 
+    if (this._config.entities.grid?.display_zero_tolerance !== undefined) {
+      totalToGrid = totalToGrid! > this._config.entities.grid?.display_zero_tolerance ? totalToGrid : 0;
+    }
+
     const gridIconColorType = this._config.entities.grid?.color_icon;
     this.style.setProperty(
       "--icon-grid-color",
@@ -550,7 +562,7 @@ class PowerFlowCardPlus extends LitElement {
         value: homeNonFossilCircumference,
         color: "var(--energy-non-fossil-color)",
       },
-    }
+    };
 
     /* return source object with largest value property */
     const homeLargestSource = Object.keys(homeSources).reduce((a, b) => (homeSources[a].value > homeSources[b].value ? a : b));