Release: version 0.2.2

README.md

@@ -266,13 +266,14 @@ This Feature allows you to configure an additional small text for each Individua
 This feature allows you to configure how the card handles a Grid Power Outage scenario.
 
 | Name                | Type                  | Description                                                                                                                                                                               |
-| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 
 | entity              | `string` required     | Entity ID providing a state that changes when there is a Power Outage. (eg: `binary_sensor.grid_connection_status`). Doesn't need to be a binary_sensor.                                  |
 | entity_generator    | `string`              | Entity ID providing the power of a Generator. (eg: `sensor.generator_power`). This is optional, meaning if you don't use this, the card will assume the grid is the only source of power. |
 | state_alert         | `string`              | The state the provided entity is at when there is a power outage. Default is `on`, meaning if the entity's state is `on` the card will assume there is a power outage.                    |
 | icon_alert          | `string`              | An icon path to be override the grid icon when there is a power outage. Default is `mdi:transmission-tower-off`.                                                                          |
 | label_alert         | `string`              | A text that will be displayed below the icon when there is a power outage.                                                                                                                |
-| calculate_flow_rate | `boolean` or `number` | `false`                                                                                                                                                                                   | If set to `true`, the flow rate will be calculated by using the flow rate formula (either the new or the old one, depending on your configuration). If set to a number, the flow rate will be set to that number. For example, defining the value `10` will ensure one dot will flow every 10 seconds. |
+| calculate_flow_rate | `boolean` or `number` | `false`                                                                                                                                                                                   | 
+|                     |                       | If set to `true`, the flow rate will be calculated by using the flow rate formula (either the new or the old one, depending on your configuration). If set to a number, the flow rate will be set to that number. For example, defining the value `10` will ensure one dot will flow every 10 seconds. |
 
 #### Display Zero Lines
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-flow-card-plus",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "A power flow card for Home Assistant",
   "keywords": [
     "home-assistant",

src/components/individualLeftBottomElement.ts

@@ -62,7 +62,7 @@ export const individualLeftBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, 1, "left-bottom")}
+      ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, indexOfIndividual, "left-bottom")}
       ${individualObj?.icon !== " " ? html` <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-bottom"

src/components/individualLeftTopElement.ts

@@ -37,7 +37,7 @@ export const individualLeftTopElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 0, "left-top")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, indexOfIndividual, "left-top")}
       ${individualObj.icon !== " " ? html` <ha-icon id="individual-left-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-left-top">

src/components/individualRightBottomElement.ts

@@ -45,7 +45,7 @@ export const individualRightBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 3, "right-bottom")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, indexOfIndividual, "right-bottom")}
       ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-bottom-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-right-bottom">

src/components/individualRightTopElement.ts

@@ -46,7 +46,7 @@ export const individualRightTopElement = (
         }
       }}
     >
-      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, 2, "right-top")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, indexOfIndividual, "right-top")}
       ${individualObj.icon !== " " ? html` <ha-icon id="individual-right-top-icon" .icon=${individualObj.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-top individual-right-top">

src/components/nonFossil.ts

@@ -52,7 +52,7 @@ export const nonFossilElement = (
           ? html`
               <svg width="80" height="30">
                 <path d="M40 -10 v40" class="low-carbon ${styleLine(nonFossil.state.power || 0, config)}" id="low-carbon" />
-                ${checkShouldShowDots(config) && nonFossil.has
+                ${checkShouldShowDots(config) && nonFossil.has && nonFossil.state.power > 0
                   ? svg`<circle
                 r="1.75"
                 class="low-carbon"

src/components/spans/individualSecondarySpan.ts

@@ -33,9 +33,9 @@ export const individualSecondarySpan = (
 
   const shouldShowSecondary = () => {
     if (!!templateResult) return true;
+    if (individual?.secondary?.displayZero === true) return true;
     if (!individual?.secondary?.state) return false;
     if (!isNumberValue(individual?.secondary?.state)) return true;
-    if (individual?.secondary?.displayZero === true) return true;
 
     const toleranceSet = individual?.secondary?.displayZeroTolerance ?? 0;
     return (

src/power-flow-card-plus.ts

@@ -481,14 +481,13 @@ export class PowerFlowCardPlus extends LitElement {
       },
     };
 
-    /* return source object with largest value property */
     const homeLargestSource = Object.keys(homeSources).reduce((a, b) => (homeSources[a].value > homeSources[b].value ? a : b));
 
     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, this._config, field?.state, {
+        decimals: field?.decimals,
         unit: field?.unit,
         unitWhiteSpace: field?.unit_white_space,
         watt_threshold: this._config.watt_threshold,

src/style.ts

@@ -242,7 +242,7 @@ export const styles = css`
 
   .individual-top path,
   .individual-top circle {
-    stroke: var(--icon-individual-left-top-color);
+    stroke: var(--individual-left-top-color);
   }
 
   #individual-left-bottom-icon {

src/ui-editor/schema/individual.ts

@@ -56,6 +56,11 @@ const mainSchema = {
       label: "Show Direction",
       selector: { boolean: {} },
     },
+    {
+      name: "unit_white_space",
+      label: "Unit White Space",
+      selector: { boolean: {} },
+    },
     {
       name: "use_metadata",
       label: "Use Metadata",