From 166ba7b65083dfda958c0d63e2a93f3dbd41680f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <luca.ziegler.felix@gmail.com>
Date: Mon, 29 Jan 2024 12:19:35 +0100
Subject: [PATCH 1/7] fix: :bug: no watt_threshold provided to displayValue

---
 package.json                                  |  2 +-
 src/components/battery.ts                     | 36 +++++++++++++------
 src/components/grid.ts                        | 25 ++++++++++---
 src/components/home.ts                        |  2 +-
 src/components/individualLeftBottomElement.ts |  7 ++--
 src/components/individualLeftTopElement.ts    |  2 +-
 .../individualRightBottomElement.ts           |  2 +-
 src/components/individualRightTopElement.ts   |  8 ++---
 src/components/nonFossil.ts                   |  2 +-
 src/components/solar.ts                       | 16 +++++++--
 src/components/spans/generalSecondarySpan.ts  | 12 +++++--
 .../spans/individualSecondarySpan.ts          | 15 ++++----
 src/power-flow-card-plus.ts                   | 36 ++++++++++++++-----
 src/utils/displayNonFossilState.ts            | 30 +++++++++++-----
 src/utils/displayValue.ts                     | 24 ++++++++-----
 15 files changed, 153 insertions(+), 66 deletions(-)

diff --git a/package.json b/package.json
index 178178b..37e1d74 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "power-flow-card-plus",
-  "version": "0.2-alpha",
+  "version": "0.2.0-beta",
   "description": "A power flow card for Home Assistant",
   "keywords": [
     "home-assistant",
diff --git a/src/components/battery.ts b/src/components/battery.ts
index c35944f..1198690 100644
--- a/src/components/battery.ts
+++ b/src/components/battery.ts
@@ -1,10 +1,11 @@
 import { html } from "lit";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
-import { ConfigEntities } from "../power-flow-card-plus-config";
+import { ConfigEntities, PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 import { displayValue } from "../utils/displayValue";
 
 export const batteryElement = (
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   {
     battery,
     entities,
@@ -47,13 +48,14 @@ export const batteryElement = (
             }}
             id="battery-state-of-charge-text"
           >
-            ${displayValue(
-              main.hass,
-              battery.state_of_charge.state,
-              battery.state_of_charge.unit,
-              battery.state_of_charge.unit_white_space,
-              battery.state_of_charge.decimals
-            )}
+            ${displayValue({
+              hass: main.hass,
+              value: battery.state_of_charge.state,
+              unit: battery.state_of_charge.unit,
+              unitWhiteSpace: battery.state_of_charge.unit_white_space,
+              decimals: battery.state_of_charge.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
           </span>`
         : null}
       <ha-icon
@@ -87,7 +89,14 @@ export const batteryElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-down"}></ha-icon>
-            ${displayValue(main.hass, battery.state.toBattery)}</span
+            ${displayValue({
+              hass: main.hass,
+              value: battery.state.toBattery,
+              unit: battery.unit,
+              unitWhiteSpace: battery.unit_white_space,
+              decimals: battery.decimals,
+              watt_threshold: config.watt_threshold,
+            })}</span
           >`
         : ""}
       ${entities.battery?.display_state === "two_way" ||
@@ -110,7 +119,14 @@ export const batteryElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-up"}></ha-icon>
-            ${displayValue(main.hass, battery.state.fromBattery)}</span
+            ${displayValue({
+              hass: main.hass,
+              value: battery.state.fromBattery,
+              unit: battery.unit,
+              unitWhiteSpace: battery.unit_white_space,
+              decimals: battery.decimals,
+              watt_threshold: config.watt_threshold,
+            })}</span
           >`
         : ""}
     </div>
diff --git a/src/components/grid.ts b/src/components/grid.ts
index 04feaaa..234121a 100644
--- a/src/components/grid.ts
+++ b/src/components/grid.ts
@@ -3,10 +3,11 @@ import { PowerFlowCardPlus } from "../power-flow-card-plus";
 import { displayValue } from "../utils/displayValue";
 import { generalSecondarySpan } from "./spans/generalSecondarySpan";
 import { TemplatesObj } from "../type";
-import { ConfigEntities } from "../power-flow-card-plus-config";
+import { ConfigEntities, PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 
 export const gridElement = (
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   { entities, grid, templatesObj }: { entities: ConfigEntities; grid: any; templatesObj: TemplatesObj }
 ) => {
   return html`<div class="circle-container grid">
@@ -35,7 +36,7 @@ export const gridElement = (
         }
       }}
     >
-      ${generalSecondarySpan(main.hass, main, templatesObj, grid, "grid")}
+      ${generalSecondarySpan(main.hass, main, config, templatesObj, grid, "grid")}
       <ha-icon .icon=${grid.icon}></ha-icon>
       ${(entities.grid?.display_state === "two_way" ||
         entities.grid?.display_state === undefined ||
@@ -57,7 +58,15 @@ export const gridElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-left"}></ha-icon>
-            ${displayValue(main.hass, grid.state.toGrid)}
+
+            ${displayValue({
+              hass: main.hass,
+              value: grid.state.toGrid,
+              unit: grid.unit,
+              unitWhiteSpace: grid.unit_white_space,
+              decimals: grid.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
           </span>`
         : null}
       ${((entities.grid?.display_state === "two_way" ||
@@ -80,7 +89,15 @@ export const gridElement = (
               }
             }}
           >
-            <ha-icon class="small" .icon=${"mdi:arrow-right"}></ha-icon>${displayValue(main.hass, grid.state.fromGrid)}
+            <ha-icon class="small" .icon=${"mdi:arrow-right"}></ha-icon>
+            ${displayValue({
+              hass: main.hass,
+              value: grid.state.fromGrid,
+              unit: grid.unit,
+              unitWhiteSpace: grid.unit_white_space,
+              decimals: grid.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
           </span>`
         : ""}
       ${grid.powerOutage?.isOutage && !grid.powerOutage?.entityGenerator ? html`<span class="grid power-outage">${grid.powerOutage.name}</span>` : ""}
diff --git a/src/components/home.ts b/src/components/home.ts
index 62f5043..cd40446 100644
--- a/src/components/home.ts
+++ b/src/components/home.ts
@@ -50,7 +50,7 @@ export const homeElement = (
       }
     }}
   >
-    ${generalSecondarySpan(main.hass, main, templatesObj, home, "home")}
+    ${generalSecondarySpan(main.hass, main, config, templatesObj, home, "home")}
     <ha-icon .icon=${home.icon}></ha-icon>
     ${homeUsageToDisplay}
     <svg class="home-circle-sections">
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
index b79682b..632d558 100644
--- a/src/components/individualLeftBottomElement.ts
+++ b/src/components/individualLeftBottomElement.ts
@@ -62,11 +62,8 @@ export const individualLeftBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(hass, main, templatesObj, individualObj, 1, "left-bottom")}
-      <ha-icon
-        id="individual-left-bottom-icon"
-        .icon=${individualObj?.icon}
-      ></ha-icon>
+      ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
+      <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-top"
             >${individualObj?.showDirection
diff --git a/src/components/individualLeftTopElement.ts b/src/components/individualLeftTopElement.ts
index 7d39394..7df16d4 100644
--- a/src/components/individualLeftTopElement.ts
+++ b/src/components/individualLeftTopElement.ts
@@ -37,7 +37,7 @@ export const individualLeftTopElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 0, "left-top")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 0, "left-top")}
       <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">
diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
index 6b01f5e..3a33906 100644
--- a/src/components/individualRightBottomElement.ts
+++ b/src/components/individualRightBottomElement.ts
@@ -45,7 +45,7 @@ export const individualRightBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 3, "right-bottom")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 3, "right-bottom")}
       <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">
diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
index 90d4dcc..8628b06 100644
--- a/src/components/individualRightTopElement.ts
+++ b/src/components/individualRightTopElement.ts
@@ -46,12 +46,8 @@ export const individualRightTopElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 2, "right-top")}
-      <ha-icon
-        id="individual-right-top-icon"
-        .icon=${individualObj.icon}
-        
-      ></ha-icon>
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 2, "right-top")}
+      <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">
             ${individualObj?.showDirection
diff --git a/src/components/nonFossil.ts b/src/components/nonFossil.ts
index 89dfc53..a47cb8c 100644
--- a/src/components/nonFossil.ts
+++ b/src/components/nonFossil.ts
@@ -37,7 +37,7 @@ export const nonFossilElement = (
             }
           }}
         >
-          ${generalSecondarySpan(main.hass, main, templatesObj, nonFossil, "low-carbon")}
+          ${generalSecondarySpan(main.hass, main, config, templatesObj, nonFossil, "low-carbon")}
           <ha-icon .icon=${nonFossil.icon} class="low-carbon"></ha-icon>
           ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
           (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
diff --git a/src/components/solar.ts b/src/components/solar.ts
index 0303d45..ec4e88e 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -1,12 +1,13 @@
 import { html } from "lit";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
-import { ConfigEntities } from "../power-flow-card-plus-config";
+import { ConfigEntities, PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 import { generalSecondarySpan } from "./spans/generalSecondarySpan";
 import { displayValue } from "../utils/displayValue";
 import { TemplatesObj } from "../type";
 
 export const solarElement = (
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   {
     entities,
     solar,
@@ -30,10 +31,19 @@ export const solarElement = (
         }
       }}
     >
-      ${generalSecondarySpan(main.hass, main, templatesObj, solar, "solar")}
+      ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
       <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
-        ? html` <span class="solar"> ${displayValue(main.hass, solar.state.total as number)}</span>`
+        ? html` <span class="solar">
+            ${displayValue({
+              hass: main.hass,
+              value: solar.state.total as number,
+              unit: solar.state.unit,
+              unitWhiteSpace: solar.state.unit_white_space,
+              decimals: solar.state.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
+          </span>`
         : ""}
     </div>
   </div>`;
diff --git a/src/components/spans/generalSecondarySpan.ts b/src/components/spans/generalSecondarySpan.ts
index 89fa2a7..5034923 100644
--- a/src/components/spans/generalSecondarySpan.ts
+++ b/src/components/spans/generalSecondarySpan.ts
@@ -4,15 +4,23 @@ import { HomeAssistant } from "custom-card-helpers";
 import { displayValue } from "../../utils/displayValue";
 import { PowerFlowCardPlus } from "../../power-flow-card-plus";
 import { TemplatesObj } from "../../type";
+import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 
-export const generalSecondarySpan = (hass: HomeAssistant, main: PowerFlowCardPlus, templatesObj: TemplatesObj, field, key: string) => {
+export const generalSecondarySpan = (hass: HomeAssistant, main: PowerFlowCardPlus, config: PowerFlowCardPlusConfig, templatesObj: TemplatesObj, field, key: string) => {
   return html` ${field?.secondary?.has || field?.secondary?.template
     ? html` ${baseSecondarySpan({
         main,
         className: key,
         entityId: field.secondary.entity,
         icon: field.secondary.icon,
-        value: displayValue(hass, field.secondary.state, field.secondary.unit, field.secondary.unit_white_space, field.secondary.decimals),
+        value: displayValue({
+          hass,
+          value: field.secondary.state,
+          unit: field.secondary.unit,
+          unitWhiteSpace: field.secondary.unit_white_space,
+          decimals: field.secondary.decimals,
+          watt_threshold: config.watt_threshold,
+        }),
         template: templatesObj[`${key}Secondary`],
       })}`
     : ""}`;
diff --git a/src/components/spans/individualSecondarySpan.ts b/src/components/spans/individualSecondarySpan.ts
index 7bedf4d..c0ffde3 100644
--- a/src/components/spans/individualSecondarySpan.ts
+++ b/src/components/spans/individualSecondarySpan.ts
@@ -6,12 +6,14 @@ import { displayValue } from "../../utils/displayValue";
 import { isNumberValue } from "../../utils/utils";
 import { baseSecondarySpan } from "./baseSecondarySpan";
 import { IndividualObject } from "../../states/raw/individual/getIndividualObject";
+import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 
 export type IndividualKey = `left-top` | `left-bottom` | `right-top` | `right-bottom`;
 
 export const individualSecondarySpan = (
   hass: HomeAssistant,
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   templatesObj: TemplatesObj,
   individual: IndividualObject,
   index: number,
@@ -20,13 +22,14 @@ export const individualSecondarySpan = (
   const templateResult: string | undefined = templatesObj.individual[index];
 
   const value = individual?.secondary?.has
-    ? displayValue(
+    ? displayValue({
         hass,
-        individual?.secondary?.state,
-        individual?.secondary?.unit || undefined,
-        individual?.secondary.unit_white_space,
-        individual?.secondary.decimals || 0
-      )
+        value: individual.secondary.state,
+        unit: individual.secondary?.unit ?? undefined,
+        unitWhiteSpace: individual.secondary.unit_white_space,
+        decimals: individual.secondary.decimals ?? undefined,
+        watt_threshold: config.watt_threshold,
+      })
     : undefined;
 
   const shouldShowSecondary = () => {
diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts
index 14c5fb4..cbaa77c 100644
--- a/src/power-flow-card-plus.ts
+++ b/src/power-flow-card-plus.ts
@@ -389,11 +389,23 @@ export class PowerFlowCardPlus extends LitElement {
     const homeUsageToDisplay =
       entities.home?.override_state && entities.home.entity
         ? entities.home?.subtract_individual
-          ? displayValue(this.hass, getEntityStateWatts(this.hass, entities.home.entity) - totalIndividualConsumption)
-          : displayValue(this.hass, getEntityStateWatts(this.hass, entities.home!.entity))
+          ? displayValue({
+              hass: this.hass,
+              value: getEntityStateWatts(this.hass, entities.home.entity) - totalIndividualConsumption,
+              watt_threshold: this._config.watt_threshold,
+            })
+          : displayValue({
+              hass: this.hass,
+              value: getEntityStateWatts(this.hass, entities.home.entity),
+              watt_threshold: this._config.watt_threshold,
+            })
         : entities.home?.subtract_individual
-        ? displayValue(this.hass, totalHomeConsumption - totalIndividualConsumption || 0)
-        : displayValue(this.hass, totalHomeConsumption);
+        ? displayValue({
+            hass: this.hass,
+            value: totalHomeConsumption - totalIndividualConsumption || 0,
+            watt_threshold: this._config.watt_threshold,
+          })
+        : displayValue({ hass: this.hass, value: totalHomeConsumption, watt_threshold: this._config.watt_threshold });
 
     const totalLines =
       grid.state.toHome +
@@ -464,7 +476,15 @@ export class PowerFlowCardPlus extends LitElement {
     const getIndividualDisplayState = (field?: IndividualObject) => {
       if (!field) return "";
       if (field?.state === undefined) return "";
-      return displayValue(this.hass, field?.state, field?.unit, field?.unit_white_space, field?.decimals);
+      // return displayValue(this.hass, field?.state, field?.unit, field?.unit_white_space, field?.decimals);
+      return displayValue({
+        hass: this.hass,
+        value: field?.state,
+        unit: field?.unit,
+        unitWhiteSpace: field?.unit_white_space,
+        decimals: field?.decimals,
+        watt_threshold: this._config.watt_threshold,
+      });
     };
 
     const individualKeys = ["left-top", "left-bottom", "right-top", "right-bottom"];
@@ -520,7 +540,7 @@ export class PowerFlowCardPlus extends LitElement {
                   templatesObj,
                 })}
                 ${solar.has
-                  ? solarElement(this, {
+                  ? solarElement(this, this._config, {
                       entities,
                       solar,
                       templatesObj,
@@ -550,7 +570,7 @@ export class PowerFlowCardPlus extends LitElement {
             : html``}
           <div class="row">
             ${grid.has
-              ? gridElement(this, {
+              ? gridElement(this, this._config, {
                   entities,
                   grid,
                   templatesObj,
@@ -577,7 +597,7 @@ export class PowerFlowCardPlus extends LitElement {
             ? html`<div class="row">
                 <div class="spacer"></div>
 
-                ${battery.has ? batteryElement(this, { battery, entities }) : html`<div class="spacer"></div>`}
+                ${battery.has ? batteryElement(this, this._config, { battery, entities }) : html`<div class="spacer"></div>`}
                 ${individualFieldLeftBottom
                   ? individualLeftBottomElement(this, this.hass, this._config, {
                       displayState: getIndividualDisplayState(individualFieldLeftBottom),
diff --git a/src/utils/displayNonFossilState.ts b/src/utils/displayNonFossilState.ts
index 0a60658..a3752e0 100644
--- a/src/utils/displayNonFossilState.ts
+++ b/src/utils/displayNonFossilState.ts
@@ -36,15 +36,27 @@ export const displayNonFossilState = (
         nonFossilFuelWatts = 0;
       }
     }
-    result = displayValue(hass, nonFossilFuelWatts, undefined, unitWhiteSpace);
-  } else {
-    let nonFossilFuelPercentage: number = 100 - (getEntityState(hass, entityFossil) ?? 0);
-    if (displayZeroTolerance) {
-      if (nonFossilFuelPercentage < displayZeroTolerance) {
-        nonFossilFuelPercentage = 0;
-      }
+    return displayValue({
+      hass,
+      value: nonFossilFuelWatts,
+      unit: undefined,
+      unitWhiteSpace,
+      decimals: 0,
+      watt_threshold: config.watt_threshold,
+    });
+  }
+  let nonFossilFuelPercentage: number = 100 - (getEntityState(hass, entityFossil) ?? 0);
+  if (displayZeroTolerance) {
+    if (nonFossilFuelPercentage < displayZeroTolerance) {
+      nonFossilFuelPercentage = 0;
     }
-    result = displayValue(hass, nonFossilFuelPercentage, unitOfMeasurement, unitWhiteSpace, 0);
   }
-  return result;
+  return displayValue({
+    hass,
+    value: nonFossilFuelPercentage,
+    unit: undefined,
+    unitWhiteSpace,
+    decimals: 0,
+    watt_threshold: config.watt_threshold,
+  });
 };
diff --git a/src/utils/displayValue.ts b/src/utils/displayValue.ts
index 263226f..c7bfb3c 100644
--- a/src/utils/displayValue.ts
+++ b/src/utils/displayValue.ts
@@ -1,19 +1,27 @@
 import { HomeAssistant, formatNumber } from "custom-card-helpers";
 import { isNumberValue, round } from "./utils";
 
-export const displayValue = (
-  hass: HomeAssistant,
-  value: number | string | null,
-  unit?: string | undefined,
-  unitWhiteSpace?: boolean | undefined,
-  decimals?: number | undefined
-): string => {
+export const displayValue = ({
+  hass,
+  value,
+  unit,
+  unitWhiteSpace = true,
+  decimals,
+  watt_threshold,
+}: {
+  hass: HomeAssistant;
+  value: number | string | null;
+  unit?: string | undefined;
+  unitWhiteSpace?: boolean | undefined;
+  decimals?: number | undefined;
+  watt_threshold: number;
+}): string => {
   if (value === null) return "0";
 
   if (!isNumberValue(value)) return value.toString();
 
   const valueInNumber = Number(value);
-  const isKW = unit === undefined && valueInNumber >= 1000;
+  const isKW = unit === undefined && valueInNumber >= watt_threshold;
   const v = formatNumber(isKW ? round(valueInNumber / 1000, decimals ?? 2) : round(valueInNumber, decimals ?? 0), hass.locale);
   return `${v}${unitWhiteSpace === false ? "" : " "}${unit || (isKW ? "kW" : "W")}`;
 };

From b4420ca650fb69a61163697792232f36b11aa3b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <luca.ziegler.felix@gmail.com>
Date: Sat, 3 Feb 2024 12:04:39 +0100
Subject: [PATCH 2/7] fix: secondary classes

---
 src/components/individualLeftBottomElement.ts | 2 +-
 src/components/spans/baseSecondarySpan.ts     | 2 ++
 src/type.ts                                   | 5 ++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
index 632d558..fa17019 100644
--- a/src/components/individualLeftBottomElement.ts
+++ b/src/components/individualLeftBottomElement.ts
@@ -65,7 +65,7 @@ export const individualLeftBottomElement = (
       ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
       <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
-        ? html` <span class="individual-bottom individual-left-top"
+        ? html` <span class="individual-bottom individual-left-bottom"
             >${individualObj?.showDirection
               ? html`<ha-icon class="small" .icon=${individualObj?.invertAnimation ? "mdi:arrow-up" : "mdi:arrow-down"}></ha-icon>`
               : ""}${displayState}
diff --git a/src/components/spans/baseSecondarySpan.ts b/src/components/spans/baseSecondarySpan.ts
index a48b6d5..d817875 100644
--- a/src/components/spans/baseSecondarySpan.ts
+++ b/src/components/spans/baseSecondarySpan.ts
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 import { PowerFlowCardPlus } from "../../power-flow-card-plus";
+import { offlineStr } from "../../type";
 
 type BaseSecondarySpan = {
   main: PowerFlowCardPlus;
@@ -12,6 +13,7 @@ type BaseSecondarySpan = {
 };
 
 export const baseSecondarySpan = ({ main, className, template, value, entityId, icon }: BaseSecondarySpan) => {
+  if (value && offlineStr.includes(value)) return html``;
   if (value || template) {
     return html`<span
       class="secondary-info ${className}"
diff --git a/src/type.ts b/src/type.ts
index 66b82e1..99df2b5 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -134,4 +134,7 @@ export type GridObject = {
       type?: boolean | "production" | "consumption";
     };
   };
-};
\ No newline at end of file
+};
+
+export type OfflineStr = "unavailable" | "unknown";
+export const offlineStr = ["unavailable", "unknown"];
\ No newline at end of file

From 525a1049f7afca77970d108f491bf423a7b4cc5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <luca.ziegler.felix@gmail.com>
Date: Mon, 29 Jan 2024 12:19:35 +0100
Subject: [PATCH 3/7] fix: :bug: no watt_threshold provided to displayValue

---
 package.json                                  |  2 +-
 src/components/battery.ts                     | 36 +++++++++++++------
 src/components/grid.ts                        | 25 ++++++++++---
 src/components/home.ts                        |  2 +-
 src/components/individualLeftBottomElement.ts |  2 +-
 src/components/individualLeftTopElement.ts    |  2 +-
 .../individualRightBottomElement.ts           |  2 +-
 src/components/individualRightTopElement.ts   |  2 +-
 src/components/nonFossil.ts                   |  2 +-
 src/components/solar.ts                       | 16 +++++++--
 src/components/spans/generalSecondarySpan.ts  | 12 +++++--
 .../spans/individualSecondarySpan.ts          | 15 ++++----
 src/power-flow-card-plus.ts                   | 36 ++++++++++++++-----
 src/utils/displayNonFossilState.ts            | 30 +++++++++++-----
 src/utils/displayValue.ts                     | 24 ++++++++-----
 15 files changed, 151 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index 9ce85d7..462cd48 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "power-flow-card-plus",
-  "version": "0.2.0-414",
+  "version": "0.2.0",
   "description": "A power flow card for Home Assistant",
   "keywords": [
     "home-assistant",
diff --git a/src/components/battery.ts b/src/components/battery.ts
index c35944f..1198690 100644
--- a/src/components/battery.ts
+++ b/src/components/battery.ts
@@ -1,10 +1,11 @@
 import { html } from "lit";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
-import { ConfigEntities } from "../power-flow-card-plus-config";
+import { ConfigEntities, PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 import { displayValue } from "../utils/displayValue";
 
 export const batteryElement = (
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   {
     battery,
     entities,
@@ -47,13 +48,14 @@ export const batteryElement = (
             }}
             id="battery-state-of-charge-text"
           >
-            ${displayValue(
-              main.hass,
-              battery.state_of_charge.state,
-              battery.state_of_charge.unit,
-              battery.state_of_charge.unit_white_space,
-              battery.state_of_charge.decimals
-            )}
+            ${displayValue({
+              hass: main.hass,
+              value: battery.state_of_charge.state,
+              unit: battery.state_of_charge.unit,
+              unitWhiteSpace: battery.state_of_charge.unit_white_space,
+              decimals: battery.state_of_charge.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
           </span>`
         : null}
       <ha-icon
@@ -87,7 +89,14 @@ export const batteryElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-down"}></ha-icon>
-            ${displayValue(main.hass, battery.state.toBattery)}</span
+            ${displayValue({
+              hass: main.hass,
+              value: battery.state.toBattery,
+              unit: battery.unit,
+              unitWhiteSpace: battery.unit_white_space,
+              decimals: battery.decimals,
+              watt_threshold: config.watt_threshold,
+            })}</span
           >`
         : ""}
       ${entities.battery?.display_state === "two_way" ||
@@ -110,7 +119,14 @@ export const batteryElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-up"}></ha-icon>
-            ${displayValue(main.hass, battery.state.fromBattery)}</span
+            ${displayValue({
+              hass: main.hass,
+              value: battery.state.fromBattery,
+              unit: battery.unit,
+              unitWhiteSpace: battery.unit_white_space,
+              decimals: battery.decimals,
+              watt_threshold: config.watt_threshold,
+            })}</span
           >`
         : ""}
     </div>
diff --git a/src/components/grid.ts b/src/components/grid.ts
index 04feaaa..234121a 100644
--- a/src/components/grid.ts
+++ b/src/components/grid.ts
@@ -3,10 +3,11 @@ import { PowerFlowCardPlus } from "../power-flow-card-plus";
 import { displayValue } from "../utils/displayValue";
 import { generalSecondarySpan } from "./spans/generalSecondarySpan";
 import { TemplatesObj } from "../type";
-import { ConfigEntities } from "../power-flow-card-plus-config";
+import { ConfigEntities, PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 
 export const gridElement = (
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   { entities, grid, templatesObj }: { entities: ConfigEntities; grid: any; templatesObj: TemplatesObj }
 ) => {
   return html`<div class="circle-container grid">
@@ -35,7 +36,7 @@ export const gridElement = (
         }
       }}
     >
-      ${generalSecondarySpan(main.hass, main, templatesObj, grid, "grid")}
+      ${generalSecondarySpan(main.hass, main, config, templatesObj, grid, "grid")}
       <ha-icon .icon=${grid.icon}></ha-icon>
       ${(entities.grid?.display_state === "two_way" ||
         entities.grid?.display_state === undefined ||
@@ -57,7 +58,15 @@ export const gridElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-left"}></ha-icon>
-            ${displayValue(main.hass, grid.state.toGrid)}
+
+            ${displayValue({
+              hass: main.hass,
+              value: grid.state.toGrid,
+              unit: grid.unit,
+              unitWhiteSpace: grid.unit_white_space,
+              decimals: grid.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
           </span>`
         : null}
       ${((entities.grid?.display_state === "two_way" ||
@@ -80,7 +89,15 @@ export const gridElement = (
               }
             }}
           >
-            <ha-icon class="small" .icon=${"mdi:arrow-right"}></ha-icon>${displayValue(main.hass, grid.state.fromGrid)}
+            <ha-icon class="small" .icon=${"mdi:arrow-right"}></ha-icon>
+            ${displayValue({
+              hass: main.hass,
+              value: grid.state.fromGrid,
+              unit: grid.unit,
+              unitWhiteSpace: grid.unit_white_space,
+              decimals: grid.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
           </span>`
         : ""}
       ${grid.powerOutage?.isOutage && !grid.powerOutage?.entityGenerator ? html`<span class="grid power-outage">${grid.powerOutage.name}</span>` : ""}
diff --git a/src/components/home.ts b/src/components/home.ts
index 62f5043..cd40446 100644
--- a/src/components/home.ts
+++ b/src/components/home.ts
@@ -50,7 +50,7 @@ export const homeElement = (
       }
     }}
   >
-    ${generalSecondarySpan(main.hass, main, templatesObj, home, "home")}
+    ${generalSecondarySpan(main.hass, main, config, templatesObj, home, "home")}
     <ha-icon .icon=${home.icon}></ha-icon>
     ${homeUsageToDisplay}
     <svg class="home-circle-sections">
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
index a7df3ea..fa17019 100644
--- a/src/components/individualLeftBottomElement.ts
+++ b/src/components/individualLeftBottomElement.ts
@@ -62,7 +62,7 @@ export const individualLeftBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(hass, main, templatesObj, individualObj, 1, "left-bottom")}
+      ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
       <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-bottom"
diff --git a/src/components/individualLeftTopElement.ts b/src/components/individualLeftTopElement.ts
index 7d39394..7df16d4 100644
--- a/src/components/individualLeftTopElement.ts
+++ b/src/components/individualLeftTopElement.ts
@@ -37,7 +37,7 @@ export const individualLeftTopElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 0, "left-top")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 0, "left-top")}
       <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">
diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
index 6b01f5e..3a33906 100644
--- a/src/components/individualRightBottomElement.ts
+++ b/src/components/individualRightBottomElement.ts
@@ -45,7 +45,7 @@ export const individualRightBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 3, "right-bottom")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 3, "right-bottom")}
       <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">
diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
index 1f80389..8628b06 100644
--- a/src/components/individualRightTopElement.ts
+++ b/src/components/individualRightTopElement.ts
@@ -46,7 +46,7 @@ export const individualRightTopElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, templatesObj, individualObj, 2, "right-top")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 2, "right-top")}
       <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon}></ha-icon>
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">
diff --git a/src/components/nonFossil.ts b/src/components/nonFossil.ts
index 89dfc53..a47cb8c 100644
--- a/src/components/nonFossil.ts
+++ b/src/components/nonFossil.ts
@@ -37,7 +37,7 @@ export const nonFossilElement = (
             }
           }}
         >
-          ${generalSecondarySpan(main.hass, main, templatesObj, nonFossil, "low-carbon")}
+          ${generalSecondarySpan(main.hass, main, config, templatesObj, nonFossil, "low-carbon")}
           <ha-icon .icon=${nonFossil.icon} class="low-carbon"></ha-icon>
           ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
           (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
diff --git a/src/components/solar.ts b/src/components/solar.ts
index 0303d45..ec4e88e 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -1,12 +1,13 @@
 import { html } from "lit";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
-import { ConfigEntities } from "../power-flow-card-plus-config";
+import { ConfigEntities, PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 import { generalSecondarySpan } from "./spans/generalSecondarySpan";
 import { displayValue } from "../utils/displayValue";
 import { TemplatesObj } from "../type";
 
 export const solarElement = (
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   {
     entities,
     solar,
@@ -30,10 +31,19 @@ export const solarElement = (
         }
       }}
     >
-      ${generalSecondarySpan(main.hass, main, templatesObj, solar, "solar")}
+      ${generalSecondarySpan(main.hass, main, config, templatesObj, solar, "solar")}
       <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
-        ? html` <span class="solar"> ${displayValue(main.hass, solar.state.total as number)}</span>`
+        ? html` <span class="solar">
+            ${displayValue({
+              hass: main.hass,
+              value: solar.state.total as number,
+              unit: solar.state.unit,
+              unitWhiteSpace: solar.state.unit_white_space,
+              decimals: solar.state.decimals,
+              watt_threshold: config.watt_threshold,
+            })}
+          </span>`
         : ""}
     </div>
   </div>`;
diff --git a/src/components/spans/generalSecondarySpan.ts b/src/components/spans/generalSecondarySpan.ts
index 89fa2a7..5034923 100644
--- a/src/components/spans/generalSecondarySpan.ts
+++ b/src/components/spans/generalSecondarySpan.ts
@@ -4,15 +4,23 @@ import { HomeAssistant } from "custom-card-helpers";
 import { displayValue } from "../../utils/displayValue";
 import { PowerFlowCardPlus } from "../../power-flow-card-plus";
 import { TemplatesObj } from "../../type";
+import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 
-export const generalSecondarySpan = (hass: HomeAssistant, main: PowerFlowCardPlus, templatesObj: TemplatesObj, field, key: string) => {
+export const generalSecondarySpan = (hass: HomeAssistant, main: PowerFlowCardPlus, config: PowerFlowCardPlusConfig, templatesObj: TemplatesObj, field, key: string) => {
   return html` ${field?.secondary?.has || field?.secondary?.template
     ? html` ${baseSecondarySpan({
         main,
         className: key,
         entityId: field.secondary.entity,
         icon: field.secondary.icon,
-        value: displayValue(hass, field.secondary.state, field.secondary.unit, field.secondary.unit_white_space, field.secondary.decimals),
+        value: displayValue({
+          hass,
+          value: field.secondary.state,
+          unit: field.secondary.unit,
+          unitWhiteSpace: field.secondary.unit_white_space,
+          decimals: field.secondary.decimals,
+          watt_threshold: config.watt_threshold,
+        }),
         template: templatesObj[`${key}Secondary`],
       })}`
     : ""}`;
diff --git a/src/components/spans/individualSecondarySpan.ts b/src/components/spans/individualSecondarySpan.ts
index 7bedf4d..c0ffde3 100644
--- a/src/components/spans/individualSecondarySpan.ts
+++ b/src/components/spans/individualSecondarySpan.ts
@@ -6,12 +6,14 @@ import { displayValue } from "../../utils/displayValue";
 import { isNumberValue } from "../../utils/utils";
 import { baseSecondarySpan } from "./baseSecondarySpan";
 import { IndividualObject } from "../../states/raw/individual/getIndividualObject";
+import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 
 export type IndividualKey = `left-top` | `left-bottom` | `right-top` | `right-bottom`;
 
 export const individualSecondarySpan = (
   hass: HomeAssistant,
   main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
   templatesObj: TemplatesObj,
   individual: IndividualObject,
   index: number,
@@ -20,13 +22,14 @@ export const individualSecondarySpan = (
   const templateResult: string | undefined = templatesObj.individual[index];
 
   const value = individual?.secondary?.has
-    ? displayValue(
+    ? displayValue({
         hass,
-        individual?.secondary?.state,
-        individual?.secondary?.unit || undefined,
-        individual?.secondary.unit_white_space,
-        individual?.secondary.decimals || 0
-      )
+        value: individual.secondary.state,
+        unit: individual.secondary?.unit ?? undefined,
+        unitWhiteSpace: individual.secondary.unit_white_space,
+        decimals: individual.secondary.decimals ?? undefined,
+        watt_threshold: config.watt_threshold,
+      })
     : undefined;
 
   const shouldShowSecondary = () => {
diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts
index 14c5fb4..cbaa77c 100644
--- a/src/power-flow-card-plus.ts
+++ b/src/power-flow-card-plus.ts
@@ -389,11 +389,23 @@ export class PowerFlowCardPlus extends LitElement {
     const homeUsageToDisplay =
       entities.home?.override_state && entities.home.entity
         ? entities.home?.subtract_individual
-          ? displayValue(this.hass, getEntityStateWatts(this.hass, entities.home.entity) - totalIndividualConsumption)
-          : displayValue(this.hass, getEntityStateWatts(this.hass, entities.home!.entity))
+          ? displayValue({
+              hass: this.hass,
+              value: getEntityStateWatts(this.hass, entities.home.entity) - totalIndividualConsumption,
+              watt_threshold: this._config.watt_threshold,
+            })
+          : displayValue({
+              hass: this.hass,
+              value: getEntityStateWatts(this.hass, entities.home.entity),
+              watt_threshold: this._config.watt_threshold,
+            })
         : entities.home?.subtract_individual
-        ? displayValue(this.hass, totalHomeConsumption - totalIndividualConsumption || 0)
-        : displayValue(this.hass, totalHomeConsumption);
+        ? displayValue({
+            hass: this.hass,
+            value: totalHomeConsumption - totalIndividualConsumption || 0,
+            watt_threshold: this._config.watt_threshold,
+          })
+        : displayValue({ hass: this.hass, value: totalHomeConsumption, watt_threshold: this._config.watt_threshold });
 
     const totalLines =
       grid.state.toHome +
@@ -464,7 +476,15 @@ export class PowerFlowCardPlus extends LitElement {
     const getIndividualDisplayState = (field?: IndividualObject) => {
       if (!field) return "";
       if (field?.state === undefined) return "";
-      return displayValue(this.hass, field?.state, field?.unit, field?.unit_white_space, field?.decimals);
+      // return displayValue(this.hass, field?.state, field?.unit, field?.unit_white_space, field?.decimals);
+      return displayValue({
+        hass: this.hass,
+        value: field?.state,
+        unit: field?.unit,
+        unitWhiteSpace: field?.unit_white_space,
+        decimals: field?.decimals,
+        watt_threshold: this._config.watt_threshold,
+      });
     };
 
     const individualKeys = ["left-top", "left-bottom", "right-top", "right-bottom"];
@@ -520,7 +540,7 @@ export class PowerFlowCardPlus extends LitElement {
                   templatesObj,
                 })}
                 ${solar.has
-                  ? solarElement(this, {
+                  ? solarElement(this, this._config, {
                       entities,
                       solar,
                       templatesObj,
@@ -550,7 +570,7 @@ export class PowerFlowCardPlus extends LitElement {
             : html``}
           <div class="row">
             ${grid.has
-              ? gridElement(this, {
+              ? gridElement(this, this._config, {
                   entities,
                   grid,
                   templatesObj,
@@ -577,7 +597,7 @@ export class PowerFlowCardPlus extends LitElement {
             ? html`<div class="row">
                 <div class="spacer"></div>
 
-                ${battery.has ? batteryElement(this, { battery, entities }) : html`<div class="spacer"></div>`}
+                ${battery.has ? batteryElement(this, this._config, { battery, entities }) : html`<div class="spacer"></div>`}
                 ${individualFieldLeftBottom
                   ? individualLeftBottomElement(this, this.hass, this._config, {
                       displayState: getIndividualDisplayState(individualFieldLeftBottom),
diff --git a/src/utils/displayNonFossilState.ts b/src/utils/displayNonFossilState.ts
index 0a60658..a3752e0 100644
--- a/src/utils/displayNonFossilState.ts
+++ b/src/utils/displayNonFossilState.ts
@@ -36,15 +36,27 @@ export const displayNonFossilState = (
         nonFossilFuelWatts = 0;
       }
     }
-    result = displayValue(hass, nonFossilFuelWatts, undefined, unitWhiteSpace);
-  } else {
-    let nonFossilFuelPercentage: number = 100 - (getEntityState(hass, entityFossil) ?? 0);
-    if (displayZeroTolerance) {
-      if (nonFossilFuelPercentage < displayZeroTolerance) {
-        nonFossilFuelPercentage = 0;
-      }
+    return displayValue({
+      hass,
+      value: nonFossilFuelWatts,
+      unit: undefined,
+      unitWhiteSpace,
+      decimals: 0,
+      watt_threshold: config.watt_threshold,
+    });
+  }
+  let nonFossilFuelPercentage: number = 100 - (getEntityState(hass, entityFossil) ?? 0);
+  if (displayZeroTolerance) {
+    if (nonFossilFuelPercentage < displayZeroTolerance) {
+      nonFossilFuelPercentage = 0;
     }
-    result = displayValue(hass, nonFossilFuelPercentage, unitOfMeasurement, unitWhiteSpace, 0);
   }
-  return result;
+  return displayValue({
+    hass,
+    value: nonFossilFuelPercentage,
+    unit: undefined,
+    unitWhiteSpace,
+    decimals: 0,
+    watt_threshold: config.watt_threshold,
+  });
 };
diff --git a/src/utils/displayValue.ts b/src/utils/displayValue.ts
index 263226f..c7bfb3c 100644
--- a/src/utils/displayValue.ts
+++ b/src/utils/displayValue.ts
@@ -1,19 +1,27 @@
 import { HomeAssistant, formatNumber } from "custom-card-helpers";
 import { isNumberValue, round } from "./utils";
 
-export const displayValue = (
-  hass: HomeAssistant,
-  value: number | string | null,
-  unit?: string | undefined,
-  unitWhiteSpace?: boolean | undefined,
-  decimals?: number | undefined
-): string => {
+export const displayValue = ({
+  hass,
+  value,
+  unit,
+  unitWhiteSpace = true,
+  decimals,
+  watt_threshold,
+}: {
+  hass: HomeAssistant;
+  value: number | string | null;
+  unit?: string | undefined;
+  unitWhiteSpace?: boolean | undefined;
+  decimals?: number | undefined;
+  watt_threshold: number;
+}): string => {
   if (value === null) return "0";
 
   if (!isNumberValue(value)) return value.toString();
 
   const valueInNumber = Number(value);
-  const isKW = unit === undefined && valueInNumber >= 1000;
+  const isKW = unit === undefined && valueInNumber >= watt_threshold;
   const v = formatNumber(isKW ? round(valueInNumber / 1000, decimals ?? 2) : round(valueInNumber, decimals ?? 0), hass.locale);
   return `${v}${unitWhiteSpace === false ? "" : " "}${unit || (isKW ? "kW" : "W")}`;
 };

From 3e5f826f27b519f772345028b1375ff0d6ac7029 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <luca.ziegler.felix@gmail.com>
Date: Sat, 3 Feb 2024 12:04:39 +0100
Subject: [PATCH 4/7] fix: secondary classes

---
 src/components/spans/baseSecondarySpan.ts | 2 ++
 src/type.ts                               | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/components/spans/baseSecondarySpan.ts b/src/components/spans/baseSecondarySpan.ts
index a48b6d5..d817875 100644
--- a/src/components/spans/baseSecondarySpan.ts
+++ b/src/components/spans/baseSecondarySpan.ts
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 import { PowerFlowCardPlus } from "../../power-flow-card-plus";
+import { offlineStr } from "../../type";
 
 type BaseSecondarySpan = {
   main: PowerFlowCardPlus;
@@ -12,6 +13,7 @@ type BaseSecondarySpan = {
 };
 
 export const baseSecondarySpan = ({ main, className, template, value, entityId, icon }: BaseSecondarySpan) => {
+  if (value && offlineStr.includes(value)) return html``;
   if (value || template) {
     return html`<span
       class="secondary-info ${className}"
diff --git a/src/type.ts b/src/type.ts
index 4ffc3aa..09ffe45 100644
--- a/src/type.ts
+++ b/src/type.ts
@@ -135,3 +135,6 @@ export type GridObject = {
     };
   };
 };
+
+export type OfflineStr = "unavailable" | "unknown";
+export const offlineStr = ["unavailable", "unknown"];

From f69786ed7b2de1ff2936d30ef85f56d1d4b3bee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 14 Apr 2024 11:31:38 +0200
Subject: [PATCH 5/7] Merge branch 'fix-watt-threshold' of
 https://github.com/flixlix/power-flow-card-plus into fix-watt-threshold

---
 src/utils/computeIndividualPosition.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/computeIndividualPosition.ts b/src/utils/computeIndividualPosition.ts
index 1106752..e2c0ba9 100644
--- a/src/utils/computeIndividualPosition.ts
+++ b/src/utils/computeIndividualPosition.ts
@@ -2,7 +2,7 @@ import { PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
 import { IndividualObject } from "../states/raw/individual/getIndividualObject";
 
 const filterUnusedIndividualObjs = (individualObjs: IndividualObject[]): IndividualObject[] => {
-  const cloneIndividualObjs = structuredClone(individualObjs);
+  const cloneIndividualObjs = JSON.parse(JSON.stringify(individualObjs)) as IndividualObject[];
   const individualObjsWithHas = cloneIndividualObjs.filter((i) => i?.has);
   return individualObjsWithHas;
 };

From 40d37717c12b395323fa0e68736c453d4d7bccb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 14 Apr 2024 11:32:40 +0200
Subject: [PATCH 6/7] chore: :art: format:write with prettier

---
 src/components/spans/generalSecondarySpan.ts | 9 ++++++++-
 src/style/all.ts                             | 5 ++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/spans/generalSecondarySpan.ts b/src/components/spans/generalSecondarySpan.ts
index 5034923..348e5d7 100644
--- a/src/components/spans/generalSecondarySpan.ts
+++ b/src/components/spans/generalSecondarySpan.ts
@@ -6,7 +6,14 @@ import { PowerFlowCardPlus } from "../../power-flow-card-plus";
 import { TemplatesObj } from "../../type";
 import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 
-export const generalSecondarySpan = (hass: HomeAssistant, main: PowerFlowCardPlus, config: PowerFlowCardPlusConfig, templatesObj: TemplatesObj, field, key: string) => {
+export const generalSecondarySpan = (
+  hass: HomeAssistant,
+  main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
+  templatesObj: TemplatesObj,
+  field,
+  key: string
+) => {
   return html` ${field?.secondary?.has || field?.secondary?.template
     ? html` ${baseSecondarySpan({
         main,
diff --git a/src/style/all.ts b/src/style/all.ts
index 16f04b8..e1951f6 100644
--- a/src/style/all.ts
+++ b/src/style/all.ts
@@ -225,9 +225,8 @@ export const allDynamicStyles = (
       const colors = ["#d0cc5b", "#964cb5", "#b54c9d", "#5bd0cc"];
       const fieldNames: string[] = ["left-top", "left-bottom", "right-top", "right-bottom"];
 
-
-      if(!fieldNames?.[index]) {
-        console.log('\x1b[41m%s\x1b[0m', 'src/style/all.ts:230 field, index', field, index);
+      if (!fieldNames?.[index]) {
+        console.log("\x1b[41m%s\x1b[0m", "src/style/all.ts:230 field, index", field, index);
       }
       const fieldName = fieldNames?.[index] || "left-top";
 

From 571315c8dc1f75d0b8665f0088954325f0d6e678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luca=20F=C3=A9lix?= <zil1st@bosch.com>
Date: Sun, 14 Apr 2024 11:47:21 +0200
Subject: [PATCH 7/7] fix: :bug: watt threshold on display value

---
 src/components/battery.ts                     | 51 ++++++++--------
 src/components/grid.ts                        | 18 +-----
 src/components/solar.ts                       | 17 +++---
 src/components/spans/generalSecondarySpan.ts  |  3 +-
 .../spans/individualSecondarySpan.ts          |  3 +-
 src/power-flow-card-plus.ts                   | 61 +++++++++++--------
 src/utils/displayNonFossilState.ts            | 18 +-----
 src/utils/displayValue.ts                     |  5 +-
 8 files changed, 84 insertions(+), 92 deletions(-)

diff --git a/src/components/battery.ts b/src/components/battery.ts
index 1198690..5e9b5cd 100644
--- a/src/components/battery.ts
+++ b/src/components/battery.ts
@@ -48,14 +48,15 @@ export const batteryElement = (
             }}
             id="battery-state-of-charge-text"
           >
-            ${displayValue({
-              hass: main.hass,
-              value: battery.state_of_charge.state,
-              unit: battery.state_of_charge.unit,
-              unitWhiteSpace: battery.state_of_charge.unit_white_space,
-              decimals: battery.state_of_charge.decimals,
-              watt_threshold: config.watt_threshold,
-            })}
+            ${displayValue(
+              main.hass,
+              battery.state_of_charge.state,
+              battery.state_of_charge.unit,
+              battery.state_of_charge.unit_white_space,
+              battery.state_of_charge.decimals,
+              undefined,
+              config.watt_threshold
+            )}
           </span>`
         : null}
       <ha-icon
@@ -89,14 +90,15 @@ export const batteryElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-down"}></ha-icon>
-            ${displayValue({
-              hass: main.hass,
-              value: battery.state.toBattery,
-              unit: battery.unit,
-              unitWhiteSpace: battery.unit_white_space,
-              decimals: battery.decimals,
-              watt_threshold: config.watt_threshold,
-            })}</span
+            ${displayValue(
+              main.hass,
+              battery.state.toBattery,
+              battery.unit,
+              battery.unit_white_space,
+              battery.decimals,
+              undefined,
+              config.watt_threshold
+            )}</span
           >`
         : ""}
       ${entities.battery?.display_state === "two_way" ||
@@ -119,14 +121,15 @@ export const batteryElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-up"}></ha-icon>
-            ${displayValue({
-              hass: main.hass,
-              value: battery.state.fromBattery,
-              unit: battery.unit,
-              unitWhiteSpace: battery.unit_white_space,
-              decimals: battery.decimals,
-              watt_threshold: config.watt_threshold,
-            })}</span
+            ${displayValue(
+              main.hass,
+              battery.state.fromBattery,
+              battery.unit,
+              battery.unit_white_space,
+              battery.decimals,
+              undefined,
+              config.watt_threshold
+            )}</span
           >`
         : ""}
     </div>
diff --git a/src/components/grid.ts b/src/components/grid.ts
index 234121a..2eedecb 100644
--- a/src/components/grid.ts
+++ b/src/components/grid.ts
@@ -59,14 +59,7 @@ export const gridElement = (
           >
             <ha-icon class="small" .icon=${"mdi:arrow-left"}></ha-icon>
 
-            ${displayValue({
-              hass: main.hass,
-              value: grid.state.toGrid,
-              unit: grid.unit,
-              unitWhiteSpace: grid.unit_white_space,
-              decimals: grid.decimals,
-              watt_threshold: config.watt_threshold,
-            })}
+            ${displayValue(main.hass, grid.state.toGrid, grid.unit, grid.unit_white_space, grid.decimals, undefined, config.watt_threshold)}
           </span>`
         : null}
       ${((entities.grid?.display_state === "two_way" ||
@@ -90,14 +83,7 @@ export const gridElement = (
             }}
           >
             <ha-icon class="small" .icon=${"mdi:arrow-right"}></ha-icon>
-            ${displayValue({
-              hass: main.hass,
-              value: grid.state.fromGrid,
-              unit: grid.unit,
-              unitWhiteSpace: grid.unit_white_space,
-              decimals: grid.decimals,
-              watt_threshold: config.watt_threshold,
-            })}
+            ${displayValue(main.hass, grid.state.fromGrid, grid.unit, grid.unit_white_space, grid.decimals, undefined, config.watt_threshold)}
           </span>`
         : ""}
       ${grid.powerOutage?.isOutage && !grid.powerOutage?.entityGenerator ? html`<span class="grid power-outage">${grid.powerOutage.name}</span>` : ""}
diff --git a/src/components/solar.ts b/src/components/solar.ts
index ec4e88e..a92fe6e 100644
--- a/src/components/solar.ts
+++ b/src/components/solar.ts
@@ -35,14 +35,15 @@ export const solarElement = (
       <ha-icon id="solar-icon" .icon=${solar.icon}></ha-icon>
       ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
         ? html` <span class="solar">
-            ${displayValue({
-              hass: main.hass,
-              value: solar.state.total as number,
-              unit: solar.state.unit,
-              unitWhiteSpace: solar.state.unit_white_space,
-              decimals: solar.state.decimals,
-              watt_threshold: config.watt_threshold,
-            })}
+            ${displayValue(
+              main.hass,
+              solar.state.total as number,
+              solar.state.unit,
+              solar.state.unit_white_space,
+              solar.state.decimals,
+              undefined,
+              config.watt_threshold
+            )}
           </span>`
         : ""}
     </div>
diff --git a/src/components/spans/generalSecondarySpan.ts b/src/components/spans/generalSecondarySpan.ts
index b44393d..e33d8e7 100644
--- a/src/components/spans/generalSecondarySpan.ts
+++ b/src/components/spans/generalSecondarySpan.ts
@@ -38,7 +38,8 @@ export const generalSecondarySpan = (
           field.secondary.unit,
           field.secondary.unit_white_space,
           field.secondary.decimals,
-          field.secondary.accept_negative
+          field.secondary.accept_negative,
+          config.watt_threshold
         ),
         template: templatesObj[`${key}Secondary`],
       })}`
diff --git a/src/components/spans/individualSecondarySpan.ts b/src/components/spans/individualSecondarySpan.ts
index a23081e..e44c450 100644
--- a/src/components/spans/individualSecondarySpan.ts
+++ b/src/components/spans/individualSecondarySpan.ts
@@ -28,7 +28,8 @@ export const individualSecondarySpan = (
         individual?.secondary?.unit || undefined,
         individual?.secondary.unit_white_space,
         individual?.secondary.decimals || 0,
-        individual?.secondary.accept_negative || false
+        individual?.secondary.accept_negative || false,
+        config.watt_threshold
       )
     : undefined;
 
diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts
index 3caae05..85b9e12 100644
--- a/src/power-flow-card-plus.ts
+++ b/src/power-flow-card-plus.ts
@@ -393,23 +393,43 @@ export class PowerFlowCardPlus extends LitElement {
     const homeUsageToDisplay =
       entities.home?.override_state && entities.home.entity
         ? entities.home?.subtract_individual
-          ? displayValue({
-              hass: this.hass,
-              value: getEntityStateWatts(this.hass, entities.home.entity) - totalIndividualConsumption,
-              watt_threshold: this._config.watt_threshold,
-            })
-          : displayValue({
-              hass: this.hass,
-              value: getEntityStateWatts(this.hass, entities.home.entity),
-              watt_threshold: this._config.watt_threshold,
-            })
+          ? displayValue(
+              this.hass,
+              getEntityStateWatts(this.hass, entities.home.entity) - totalIndividualConsumption,
+              entities.home?.unit_of_measurement,
+              entities.home?.unit_white_space,
+              undefined,
+              undefined,
+              this._config.watt_threshold
+            )
+          : displayValue(
+              this.hass,
+              getEntityStateWatts(this.hass, entities.home.entity),
+              entities.home?.unit_of_measurement,
+              entities.home?.unit_white_space,
+              undefined,
+              undefined,
+              this._config.watt_threshold
+            )
         : entities.home?.subtract_individual
-        ? displayValue({
-            hass: this.hass,
-            value: totalHomeConsumption - totalIndividualConsumption || 0,
-            watt_threshold: this._config.watt_threshold,
-          })
-        : displayValue({ hass: this.hass, value: totalHomeConsumption, watt_threshold: this._config.watt_threshold });
+        ? displayValue(
+            this.hass,
+            totalHomeConsumption - totalIndividualConsumption || 0,
+            entities.home?.unit_of_measurement,
+            entities.home?.unit_white_space,
+            undefined,
+            undefined,
+            this._config.watt_threshold
+          )
+        : displayValue(
+            this.hass,
+            totalHomeConsumption,
+            entities.home?.unit_of_measurement,
+            entities.home?.unit_white_space,
+            undefined,
+            undefined,
+            this._config.watt_threshold
+          );
 
     const totalLines =
       grid.state.toHome +
@@ -481,14 +501,7 @@ export class PowerFlowCardPlus extends LitElement {
       if (!field) return "";
       if (field?.state === undefined) return "";
       // return displayValue(this.hass, field?.state, field?.unit, field?.unit_white_space, field?.decimals);
-      return displayValue({
-        hass: this.hass,
-        value: field?.state,
-        unit: field?.unit,
-        unitWhiteSpace: field?.unit_white_space,
-        decimals: field?.decimals,
-        watt_threshold: this._config.watt_threshold,
-      });
+      return displayValue(this.hass, field?.state, field?.unit, field?.unit_white_space, field?.decimals, undefined, this._config.watt_threshold);
     };
 
     const individualKeys = ["left-top", "left-bottom", "right-top", "right-bottom"];
diff --git a/src/utils/displayNonFossilState.ts b/src/utils/displayNonFossilState.ts
index a3752e0..f171c70 100644
--- a/src/utils/displayNonFossilState.ts
+++ b/src/utils/displayNonFossilState.ts
@@ -36,14 +36,7 @@ export const displayNonFossilState = (
         nonFossilFuelWatts = 0;
       }
     }
-    return displayValue({
-      hass,
-      value: nonFossilFuelWatts,
-      unit: undefined,
-      unitWhiteSpace,
-      decimals: 0,
-      watt_threshold: config.watt_threshold,
-    });
+    return displayValue(hass, nonFossilFuelWatts, undefined, unitWhiteSpace, 0, undefined, config.watt_threshold);
   }
   let nonFossilFuelPercentage: number = 100 - (getEntityState(hass, entityFossil) ?? 0);
   if (displayZeroTolerance) {
@@ -51,12 +44,5 @@ export const displayNonFossilState = (
       nonFossilFuelPercentage = 0;
     }
   }
-  return displayValue({
-    hass,
-    value: nonFossilFuelPercentage,
-    unit: undefined,
-    unitWhiteSpace,
-    decimals: 0,
-    watt_threshold: config.watt_threshold,
-  });
+  return displayValue(hass, nonFossilFuelPercentage, undefined, unitWhiteSpace, 0, undefined, config.watt_threshold);
 };
diff --git a/src/utils/displayValue.ts b/src/utils/displayValue.ts
index 1024421..c511730 100644
--- a/src/utils/displayValue.ts
+++ b/src/utils/displayValue.ts
@@ -7,7 +7,8 @@ export const displayValue = (
   unit?: string | undefined,
   unitWhiteSpace?: boolean | undefined,
   decimals?: number | undefined,
-  accept_negative?: boolean | undefined
+  accept_negative?: boolean | undefined,
+  watt_threshold: number | undefined = 1000
 ): string => {
   if (value === null) return "0";
 
@@ -15,7 +16,7 @@ export const displayValue = (
 
   const valueInNumber = Number(value);
 
-  const isKW = unit === undefined && valueInNumber >= 1000;
+  const isKW = unit === undefined && valueInNumber >= watt_threshold;
 
   const transformValue = (v: number) => (!accept_negative ? Math.abs(v) : v);