feat(#23): added configuration and visualisation for two solar entities

src/components/subSolar.ts

@@ -0,0 +1,152 @@
+import { html, svg } from "lit";
+import { PowerFlowCardPlus } from "../power-flow-card-plus";
+import { PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
+import { displayValue } from "../utils/displayValue";
+import { styleLine } from "../utils/styleLine";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
+import { computeFlowRate } from "../utils/computeFlowRate";
+
+export interface Solar {
+  entity: string | undefined,
+  name: string,
+  name_first_entity: string,
+  solar_second_entity: string | undefined,
+  name_second_entity: string,
+  state: {
+    total: number,
+    solar1: number,
+    solar2: number
+  }
+}
+
+export const subSolarElement = (
+  main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
+  solar: Solar,
+  multipleIndividuals: boolean
+) => {
+  return html`${solar.entity && solar.solar_second_entity ? html`
+    <div class="subSolarContainer">
+      <div class="row">
+        ${renderSubSolarRow(main, config, solar, multipleIndividuals)}
+      </div>
+      <div class="subSolarFlowContainer">
+        <div class="halfFlexBox"></div>
+        <div class="fullFlexBox">
+          ${renderFlowContainer(config, solar, multipleIndividuals)}
+        </div>
+        <div class="halfFlexBox"></div>
+        ${multipleIndividuals ? html`<div class="halfFlexBox"></div>` : html``}
+      </div>
+    </div>
+    `: html``}
+  `
+}
+
+const renderSubSolarRow = (
+  main: PowerFlowCardPlus,
+  config: PowerFlowCardPlusConfig,
+  solar: Solar,
+  multipleIndividuals: boolean
+) => {
+  return html`
+    <div class="halfFlexBox"></div>
+    <div class="subSolarValueContainer fullFlexBox">
+      <div class="subSolarColumnContainer">
+        <span
+          class="name"
+          @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+            main.openDetails(e, undefined, solar.entity);
+          }}
+          @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
+            if (e.key === "Enter") {
+              main.openDetails(e, undefined, solar.entity);
+            }
+          }}
+        >
+          ${solar.name_first_entity}
+        </span>
+        <span>
+          ${displayValue(main.hass, config, solar.state.solar1, {
+            unit: solar.state['unit'],
+            unitWhiteSpace: solar.state['unitWhiteSpace'],
+            decimals: solar.state['decimals'],
+            watt_threshold: config.watt_threshold,
+          })}
+        </span>
+      </div>
+      <div class="subSolarColumnContainer">
+        <span
+          class="name"
+          @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+            main.openDetails(e, undefined, solar.solar_second_entity);
+          }}
+          @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
+            if (e.key === "Enter") {
+              main.openDetails(e, undefined, solar.solar_second_entity);
+            }
+          }}
+        >
+          ${solar.name_second_entity}
+        </span>
+        <span>
+          ${displayValue(main.hass, config, solar.state.solar2, {
+            unit: solar.state['unit'],
+            unitWhiteSpace: solar.state['unitWhiteSpace'],
+            decimals: solar.state['decimals'],
+            watt_threshold: config.watt_threshold,
+          })}
+        </span>
+      </div>
+    </div>
+    <div class="halfFlexBox"></div>
+    ${multipleIndividuals ? html`<div class="halfFlexBox"></div>` : html``}
+  `
+}
+
+const renderFlowContainer = (
+  config: PowerFlowCardPlusConfig,
+  solar,
+  multipleIndividuals: boolean
+) => {
+  return html`
+    <div>
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="width: 100%; height: 90px;">
+        <path
+          id="subSolarEntity1"
+          class="solar ${styleLine(solar.state || 0, config)}"
+          d="${multipleIndividuals ? "M10,40 v10 c0,50,30,0,30,50" : "M10,40 v10 c0,50,38,0,38,50"}"
+          vector-effect="non-scaling-stroke"
+        />
+        <path
+          id="subSolarsolar_second_entity"
+          class="solar ${styleLine(solar.state || 0, config)}"
+          d="${multipleIndividuals ? "M88,40 v10 c0,50 -44,0 -44,50" : "M90,40 v10 c0,50 -38,0 -38,50"}"
+          vector-effect="non-scaling-stroke"
+        />
+        ${checkShouldShowDots(config) && solar.state.total
+          ? svg`
+              <circle r="1" class="solar" vector-effect="non-scaling-stroke">
+                <animateMotion
+                  dur="${computeFlowRate(config, solar.state.solar1, solar.state.total)}s"
+                  repeatCount="indefinite"
+                  calcMode="linear"
+                >
+                  <mpath xlink:href="#subSolarEntity1" />
+                </animateMotion>
+              </circle>
+              <circle r="1" class="solar" vector-effect="non-scaling-stroke">
+                <animateMotion
+                  dur="${computeFlowRate(config, solar.state.solar2, solar.state.total)}s"
+                  repeatCount="indefinite"
+                  calcMode="linear"
+                >
+                  <mpath xlink:href="#subSolarsolar_second_entity" />
+                </animateMotion>
+              </circle>
+             `
+          : ""}
+      </svg>
+    </div>
+  `
+}

src/localize/languages/cs.json

@@ -75,6 +75,9 @@
     "grey_color": "Šedá barva",
     "tap_action": "Akce po klepnutí",
     "navigation_path": "Navigační cesta",
-    "sort_individual_devices": "Seřaďte individuálně"
+    "sort_individual_devices": "Seřaďte individuálně",
+    "solar_second_entity": "Druhá entita",
+    "name_solar_first_entity": "Název první entity",
+    "name_solar_second_entity": "Název druhé entity"
   }
 }

src/localize/languages/de.json

@@ -75,6 +75,9 @@
     "grey_color": "Graue Farbe",
     "tap_action": "Aktion beim Antippen",
     "navigation_path": "Navigationspfad",
-    "sort_individual_devices": "Individuelle Geräte sortieren"
+    "sort_individual_devices": "Individuelle Geräte sortieren",
+    "solar_second_entity": "Zweite Entität",
+    "name_solar_first_entity" : "Name der ersten Entität",
+    "name_solar_second_entity" : "Name der zweiten Entität"
   }
 }

src/localize/languages/dk.json

@@ -75,6 +75,9 @@
     "grey_color": "Grå farve",
     "tap_action": "Tap Handling",
     "navigation_path": "Navigationssti",
-    "sort_individual_devices": "Sorter individuelle enheder"
+    "sort_individual_devices": "Sorter individuelle enheder",
+    "solar_second_entity": "Anden enhed",
+    "name_solar_first_entity": "Navn på første enhed",
+    "name_solar_second_entity": "Navn på anden enhed"
   }
 }

src/localize/languages/en.json

@@ -75,6 +75,9 @@
     "grey_color": "Grey Color",
     "tap_action": "Tap Action",
     "navigation_path": "Navigation Path",
-    "sort_individual_devices": "Sort individual devices"
+    "sort_individual_devices": "Sort individual devices",
+    "solar_second_entity": "Second entity",
+    "name_solar_first_entity": "Name of first entity",
+    "name_solar_second_entity" : "Name of second entity"
   }
 }

src/localize/languages/es.json

@@ -75,6 +75,9 @@
     "grey_color": "Color Gris",
     "tap_action": "Acción de Toque",
     "navigation_path": "Ruta de Navegación",
-    "sort_individual_devices": "Ordenar dispositivos individuales"
+    "sort_individual_devices": "Ordenar dispositivos individuales",
+    "solar_second_entity": "Segunda entidad",
+    "name_solar_first_entity": "Nombre de la primera entidad",
+    "name_solar_second_entity": "Nombre de la segunda entidad"
   }
 }

src/localize/languages/fi.json

@@ -75,6 +75,9 @@
     "grey_color": "Harmaa väri",
     "tap_action": "Napauta toimintoa",
     "navigation_path": "Navigointipolku",
-    "sort_individual_devices": "Lajittele yksittäiset laitteet"
+    "sort_individual_devices": "Lajittele yksittäiset laitteet",
+    "solar_second_entity": "Toinen yksikkö",
+    "name_solar_first_entity": "Ensimmäisen yksikön nimi",
+    "name_solar_second_entity": "Toisen yksikön nimi"
   }
 }

src/localize/languages/fr.json

@@ -75,6 +75,9 @@
     "grey_color": "Couleur grise",
     "tap_action": "Action de tap",
     "navigation_path": "Chemin de navigation",
-    "sort_individual_devices": "Trier les appareils individuels"
+    "sort_individual_devices": "Trier les appareils individuels",
+    "solar_second_entity": "Deuxième entité",
+    "name_solar_first_entity": "Nom de la première entité",
+    "name_solar_second_entity": "Nom de la deuxième entité"
   }
 }

src/localize/languages/it.json

@@ -75,6 +75,9 @@
     "grey_color": "Colore Sfumato",
     "tap_action": "Azione al tocco",
     "navigation_path": "Percorso di navigazione",
-    "sort_individual_devices": "Ordina i singoli individuale"
+    "sort_individual_devices": "Ordina i singoli individuale",
+    "solar_second_entity": "Seconda entità",
+    "name_solar_first_entity": "Nome della prima entità",
+    "name_solar_second_entity": "Nome della seconda entità"
   }
 }

src/localize/languages/nl.json

@@ -75,6 +75,9 @@
     "grey_color": "Grijstint",
     "tap_action": "Tik Actie",
     "navigation_path": "Navigatiepad",
-    "sort_individual_devices": "Sorteer individuele apparaten"
+    "sort_individual_devices": "Sorteer individuele apparaten",
+    "solar_second_entity": "Tweede entiteit",
+    "name_solar_first_entity": "Naam van de eerste entiteit",
+    "name_solar_second_entity": "Naam van de tweede entiteit"
   }
 }

src/localize/languages/pl.json

@@ -75,6 +75,9 @@
     "grey_color": "Kolor szary",
     "tap_action": "Akcja dotknięcia",
     "navigation_path": "Ścieżka nawigacji",
-    "sort_individual_devices": "Sortuj poszczególne urządzenia"
+    "sort_individual_devices": "Sortuj poszczególne urządzenia",
+    "solar_second_entity": "Drugi byt",
+    "name_solar_first_entity": "Nazwa pierwszego bytu",
+    "name_solar_second_entity": "Nazwa drugiego bytu"
   }
 }

src/localize/languages/pt-BR.json

@@ -75,6 +75,9 @@
     "grey_color": "Cor do Cinza",
     "tap_action": "Ação de Toque",
     "navigation_path": "Caminho de Navegação",
-    "sort_individual_devices": "Classifique dispositivos individuais"
+    "sort_individual_devices": "Classifique dispositivos individuais",
+    "solar_second_entity": "Segunda entidade",
+    "name_solar_first_entity": "Nome da primeira entidade",
+    "name_solar_second_entity": "Nome da segunda entidade"
   }
 }

src/localize/languages/pt-PT.json

@@ -75,6 +75,9 @@
     "grey_color": "Cor Cinzenta",
     "tap_action": "Ação de Toque",
     "navigation_path": "Caminho de Navegação",
-    "sort_individual_devices": "Classifique dispositivos individuais"
+    "sort_individual_devices": "Classifique dispositivos individuais",
+    "solar_second_entity": "Segunda entidade",
+    "name_solar_first_entity": "Nome da primeira entidade",
+    "name_solar_second_entity": "Nome da segunda entidade"
   }
 }

src/localize/languages/ru.json

@@ -75,6 +75,9 @@
     "grey_color": "Серый цвет",
     "tap_action": "действие касания",
     "navigation_path": "путь навигации",
-    "sort_individual_devices": "Сортировка отдельных устройств"
+    "sort_individual_devices": "Сортировка отдельных устройств",
+    "solar_second_entity": "Вторая сущность",
+    "name_solar_first_entity": "Название первой сущности",
+    "name_solar_second_entity": "Название второй сущности"
   }
 }

src/localize/languages/sk.json

@@ -75,6 +75,9 @@
     "grey_color": "Šedá farba",
     "tap_action": "Akcia po klepnutí",
     "navigation_path": "Navigačná cesta",
-    "sort_individual_devices": "Zoraďte jednotlivé zariadenia"
+    "sort_individual_devices": "Zoraďte jednotlivé zariadenia",
+    "solar_second_entity": "Druhá entita",
+    "name_solar_first_entity": "Názov prvej entity",
+    "name_solar_second_entity": "Názov druhej entity"
   }
 }

src/localize/languages/sv.json

@@ -75,6 +75,9 @@
     "grey_color": "Grå färg",
     "tap_action": "Tryckåtgärd",
     "navigation_path": "Navigationsväg",
-    "sort_individual_devices": "Sortera enskilda enheter"
+    "sort_individual_devices": "Sortera enskilda enheter",
+    "solar_second_entity": "Andra enheten",
+    "name_solar_first_entity": "Namn på första enheten",
+    "name_solar_second_entity": "Namn på andra enheten"
   }
 }

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

@@ -57,12 +57,15 @@ interface Grid extends BaseConfigEntity {
 
 interface Solar extends BaseConfigEntity {
   entity: string;
+  solar_second_entity: string;
   color?: any;
   color_icon?: boolean;
   color_value?: boolean;
   color_label?: boolean;
   secondary_info?: SecondaryInfoType;
   display_zero_state?: boolean;
+  name_solar_first_entity?: string;
+  name_solar_second_entity?: string;
 }
 
 interface Home extends BaseConfigEntity {

src/power-flow-card-plus.ts

@@ -21,7 +21,7 @@ import { getGridConsumptionState, getGridProductionState, getGridSecondaryState
 import { getHomeSecondaryState } from "./states/raw/home";
 import { getIndividualObject, IndividualObject } from "./states/raw/individual/getIndividualObject";
 import { getNonFossilHas, getNonFossilHasPercentage, getNonFossilSecondaryState } from "./states/raw/nonFossil";
-import { getSolarSecondaryState, getSolarState } from "./states/raw/solar";
+import { getSolar1State, getSolar2State, getSolarSecondaryState, getTotalSolarState } from "./states/raw/solar";
 import { adjustZeroTolerance } from "./states/tolerance/base";
 import { doesEntityExist } from "./states/utils/existenceEntity";
 import { getEntityState } from "./states/utils/getEntityState";
@@ -44,6 +44,7 @@ import { displayValue } from "./utils/displayValue";
 import { defaultValues, getDefaultConfig } from "./utils/get-default-config";
 import { registerCustomCard } from "./utils/register-custom-card";
 import { coerceNumber } from "./utils/utils";
+import { Solar, subSolarElement } from "@/components/subSolar";
 
 const circleCircumference = 238.76104;
 
@@ -209,15 +210,20 @@ export class PowerFlowCardPlus extends LitElement {
 
     const solar = {
       entity: entities.solar?.entity as string | undefined,
+      solar_second_entity: entities.solar?.solar_second_entity as string | undefined,
       has: entities.solar?.entity !== undefined,
       state: {
-        total: getSolarState(this.hass, this._config),
+        total: getTotalSolarState(this.hass, this._config),
+        solar1: getSolar1State(this.hass, this._config),
+        solar2: getSolar2State(this.hass, this._config),
         toHome: initialNumericState,
         toGrid: initialNumericState,
         toBattery: initialNumericState,
       },
       icon: computeFieldIcon(this.hass, entities.solar, "mdi:solar-power"),
       name: computeFieldName(this.hass, entities.solar, this.hass.localize("ui.panel.lovelace.cards.energy.energy_distribution.solar")),
+      name_first_entity: entities.solar?.name_solar_first_entity ? entities.solar?.name_solar_first_entity : 'PV 1',
+      name_second_entity: entities.solar?.name_solar_second_entity ? entities.solar.name_solar_second_entity : 'PV 2',
       tap_action: entities.solar?.tap_action,
       secondary: {
         entity: entities.solar?.secondary_info?.entity,
@@ -561,6 +567,7 @@ export class PowerFlowCardPlus extends LitElement {
           id="power-flow-card-plus"
           style=${this._config.style_card_content ? this._config.style_card_content : ""}
         >
+          ${subSolarElement(this, this._config, solar as Solar, individualObjs.length > 2)}
           ${solar.has || individualObjs?.some((individual) => individual?.has) || nonFossil.hasPercentage
             ? html`<div class="row">
                 ${nonFossilElement(this, this._config, {