[UI] Use Angular property binding for SVG fill attribute (#3542)

This PR replaces attr.fill="{{ fillRef }}" with [attr.fill]="fillRef" in SVG polygon bindings for improved Angular consistency and maintainability. The property binding syntax [attr.fill] is the standard Angular approach for dynamic attribute values, ensuring type safety, better template parsing, and alignment with the rest of the codebase.

Co-authored-by: jasonlee6789 <jasonleenz369@gmail.com>

Author: sfeilmeier

ui/src/app/edge/live/energymonitor/chart/section/abstractsection.component.ts

@@ -203,7 +203,7 @@ export abstract class AbstractSection {
     }
 
     /**
-     * attr.fill="{{ fillRef }}" has to be specific if using Safari (IOS Browser)
+     * [attr.fill]="fillRef" has to be specific if using Safari (IOS Browser)
      * otherwise Energymonitor wont be displayed correctly
      */
     protected adjustFillRefbyBrowser(): void {

ui/src/app/edge/live/energymonitor/chart/section/consumption.component.html

@@ -12,7 +12,7 @@
             <svg:stop offset="100%" stop-color="var(--ion-color-warning)" />
             </svg:linearGradient>
             </svg:defs>
-            <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
+            <svg:polygon [attr.points]="energyFlow.points" [attr.fill]="fillRef" />
             <svg:polygon [@Consumption]="stateName" [attr.points]="energyFlow.animationPoints"
               style="fill: var(--ion-item-background)" />
             </svg:g>

ui/src/app/edge/live/energymonitor/chart/section/grid.component.html

@@ -11,7 +11,7 @@
             <svg:stop offset="100%" stop-color="var(--ion-color-dark)" />
             </svg:linearGradient>
             </svg:defs>
-            <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
+            <svg:polygon [attr.points]="energyFlow.points" [attr.fill]="fillRef" />
             @if (buyAnimationTrigger) {
               <ng-container>
                 <svg:polygon [@GridBuy]="stateNameBuy" [attr.points]="energyFlow.animationPoints"

ui/src/app/edge/live/energymonitor/chart/section/production.component.html

@@ -12,7 +12,7 @@
             <svg:stop offset="100%" stop-color="var(--ion-color-production)" />
             </svg:linearGradient>
             </svg:defs>
-            <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
+            <svg:polygon [attr.points]="energyFlow.points" [attr.fill]="fillRef" />
             <svg:polygon [@Production]="stateName" [attr.points]="energyFlow.animationPoints"
               style="fill: var(--ion-item-background)" />
             </svg:g>

ui/src/app/edge/live/energymonitor/chart/section/storage.component.html

@@ -12,7 +12,7 @@
         <svg:stop offset="100%" stop-color="var(--ion-color-success)" />
       </svg:linearGradient>
     </svg:defs>
-    <svg:polygon [attr.points]="energyFlow.points" attr.fill="{{ fillRef }}" />
+    <svg:polygon [attr.points]="energyFlow.points" [attr.fill]="fillRef" />
     @if (chargeAnimationTrigger) {
       <ng-container>
         <svg:polygon [@Charge]="stateNameCharge" [attr.points]="energyFlow.animationPoints"