fix: linear gradient for essential icon closes #428

slipx06 · May 12, 2024 · 567c72e · 567c72e
1 parent ba99db9
commit 567c72e
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 62 deletions.
diff --git a/dist/sunsynk-power-flow-card.js b/dist/sunsynk-power-flow-card.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sunsynk-power-flow-card",
-  "version": "4.36.1",
+  "version": "4.37.0",
   "description": "A customizable Home Assistant card to emulate the Sunsynk System flow that's displayed on the Inverter screen.",
   "main": "sunsynk-power-flow-card.js",
   "scripts": {

diff --git a/src/cards/compact-card.ts b/src/cards/compact-card.ts
@@ -768,17 +768,17 @@ export const compactCard = (config: sunsynkPowerFlowCardConfig, inverterImg: str
                         <defs>
                             <linearGradient id="Lg" x1="0%" x2="0%" y1="100%" y2="0%">
                                 <stop offset="0%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour) : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour) : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? (Number(data.pvPercentage) + Number(data.batteryPercentage) === 100 ? data.solarColour : data.gridColour) : data.gridColour}"/>
-                                <stop offset="${(Number(data.pvPercentage) + Number(data.batteryPercentage) === 100 ? 100 : 100 - (Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage)))}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? (Number(data.pvPercentage) + Number(data.batteryPercentage) === 100 ? data.solarColour : data.gridColour) : data.gridColour}"/>
-                                <stop offset="${(Number(data.pvPercentage) + Number(data.batteryPercentage) === 100 ? 100 : 100 - (Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage)))}%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                                 <stop offset="100%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                             </linearGradient>
                         </defs>
                         <path fill="${config.load.dynamic_colour ? 'url(#Lg)' : data.loadColour}"

diff --git a/src/cards/full-card.ts b/src/cards/full-card.ts
@@ -1068,20 +1068,20 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     <svg xmlns="http://www.w3.org/2000/svg" id="essen_aux" x="373.5"
                          y="${data.essIconSize === 1 ? "82.5" : "78.5"}" width="77"
                          height="77" viewBox="0 0 24 24">
-                        <defs>
+                         <defs>
                             <linearGradient id="Lg" x1="0%" x2="0%" y1="100%" y2="0%">
                                 <stop offset="0%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? `${data.solarColour}` : `${data.gridColour}`}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                                 <stop offset="100%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                             </linearGradient>
                         </defs>
                         <path display="${[1, 2].includes(data.additionalLoad) && !data.showAux ? '' : 'none'}"
@@ -1090,20 +1090,20 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     </svg>
                     <svg xmlns="http://www.w3.org/2000/svg" id="essen_noaux" x="390" y="89" width="38"
                          height="38" viewBox="0 0 24 24">
-                        <defs>
+                         <defs>
                             <linearGradient id="Lg" x1="0%" x2="0%" y1="100%" y2="0%">
                                 <stop offset="0%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? `${data.solarColour}` : `${data.gridColour}`}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                                 <stop offset="100%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                             </linearGradient>
                         </defs>
                         <path display="${([1, 2].includes(data.additionalLoad) && data.showAux) ? '' : 'none'}"
@@ -1112,20 +1112,20 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     </svg>
                     <svg xmlns="http://www.w3.org/2000/svg" id="essen_noaux_four" x="387" y="77" width="50"
                          height="50" viewBox="0 0 24 24">
-                        <defs>
+                         <defs>
                             <linearGradient id="Lg" x1="0%" x2="0%" y1="100%" y2="0%">
                                 <stop offset="0%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? `${data.solarColour}` : `${data.gridColour}`}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                                 <stop offset="100%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                             </linearGradient>
                         </defs>
                         <path display="${[4].includes(data.additionalLoad) && !data.showAux ? '' : 'none'}"
@@ -1135,20 +1135,20 @@ export const fullCard = (config: sunsynkPowerFlowCardConfig, inverterImg: string
                     <svg xmlns="http://www.w3.org/2000/svg" id="essen_default" x="373.5"
                          y="${data.essIconSize === 1 ? "82.5" : "78.5"}" width="77"
                          height="77" viewBox="0 0 24 24">
-                        <defs>
+                         <defs>
                             <linearGradient id="Lg" x1="0%" x2="0%" y1="100%" y2="0%">
                                 <stop offset="0%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.batteryPercentage) > 0 ? data.batteryColour : (Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour)}"/>
-                                <stop offset="${data.batteryPercentage < 2 ? 0 : data.batteryPercentage}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? data.solarColour : data.gridColour}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.pvPercentage) > 0 ? `${data.solarColour}` : `${data.gridColour}`}"/>
-                                <stop offset="${(Number(data.batteryPercentage < 2 ? 0 : data.batteryPercentage) + Number(data.pvPercentage < 2 ? 0 : data.pvPercentage))}%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.gridPercentage > 0 ? data.gridColour : (data.batteryPercentage > 0 ? data.batteryColour : data.solarColour)}"/>
+                                <stop offset="${data.gridPercentage}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.batteryPercentage > 0 ? data.batteryColour : data.solarColour}"/>
+                                <stop offset="${(data.gridPercentage + data.batteryPercentage)}%"
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                                 <stop offset="100%"
-                                      stop-color="${Number(data.batteryPercentage) === 100 ? data.batteryColour : (Number(data.pvPercentage) === 100 ? data.solarColour : data.gridColour)}"/>
+                                    stop-color="${data.pvPercentage > 0 ? data.solarColour : data.solarColour}"/>
                             </linearGradient>
                         </defs>
                         <path display="${[1, 2, 3, 4].includes(data.additionalLoad) ? 'none' : ''}"