UI: fix display error + percentagebar calculation (#2837)

* fix reserve bar * fix energy chart cutoff * fix percentbar warning * fix on reserve soc
OpenEMS · Oct 13, 2024 · 864d7ce · 864d7ce
1 parent fd71353
commit 864d7ce
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/ui/src/app/edge/live/common/storage/storage.component.html b/ui/src/app/edge/live/common/storage/storage.component.html
@@ -15,10 +15,9 @@
 
                 <!-- Shown if emergencyReserve is enabled for this ess -->
                 <ng-container *ngIf="isEmergencyReserveEnabled[component.id]">
-                    <svg>
-                        <rect y="3" rx="0" ry="0" width="1%"
-                            [attr.x]="'calc(' + (reserve['currentReserveSoc'] > 98 ? 98 : reserve['currentReserveSoc'])  + '% + 2px)'"
-                            height="18" style="fill:#0008;" />
+                    <svg *ngIf="reserve['currentReserveSoc'] as reserveSoc">
+                        <rect y="2" rx="0" ry="0" width="1%" height="18"
+                            [style]="'x: calc(' + (reserveSoc > 98 ? 98 : reserveSoc) + '% + 2px); fill: #0008;'" />
                     </svg>
                 </ng-container>
             </oe-flat-widget-percentagebar>

diff --git a/ui/src/app/edge/live/energymonitor/chart/chart.component.html b/ui/src/app/edge/live/energymonitor/chart/chart.component.html
@@ -1,7 +1,7 @@
 <div #energymonitorChart style="text-align:center">
   <ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" size="medium" color="#fff" type="ball-clip-rotate-multiple"
     [fullScreen]="false" name="live-energymonitor"></ngx-spinner>
-  <svg style.width="{{ width }}px" style.height="{{ height }}px">
+  <svg style.width="{{ width }}px" style.height="{{ height }}px" overflow="visible">
     <!-- !graphic -->
     <svg:g [attr.transform]="translation">
       <svg:g consumptionsection></svg:g>

diff --git a/ui/src/app/shared/components/flat/flat-widget-percentagebar/flat-widget-percentagebar.html b/ui/src/app/shared/components/flat/flat-widget-percentagebar/flat-widget-percentagebar.html
@@ -1,10 +1,10 @@
 <svg width="100%" height="24" overflow="visible">
     <rect width="100%" rx="7.3" ry="7.3" height="22" fill="var(--ion-color-light)" />
-    <rect *ngIf="displayValue" x="2" y="2" rx="6" ry="6" height="18" ngClass="primary-color"
-        attr.width="calc({{ displayValue }}% - 4px)" />
+    <rect *ngIf="displayPercent" x="2" y="2" rx="6" ry="6" height="18" ngClass="primary-color"
+        [style]="'width: calc(' + displayPercent + '% - 4px); transition: width 0.5s ease-in-out;'" />
     <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" style="font-weight: 500"
         ngClass="secondary-color">
-        {{ displayValue | unitvalue: '%' }}
+        {{ displayPercent | unitvalue: '%' }}
     </text>
     <ng-content></ng-content>
 </svg>
diff --git a/ui/src/app/shared/components/flat/flat-widget-percentagebar/flat-widget-percentagebar.ts b/ui/src/app/shared/components/flat/flat-widget-percentagebar/flat-widget-percentagebar.ts
@@ -5,4 +5,8 @@ import { AbstractFlatWidgetLine } from "../abstract-flat-widget-line";
     selector: "oe-flat-widget-percentagebar",
     templateUrl: "./flat-widget-percentagebar.html",
 })
-export class FlatWidgetPercentagebarComponent extends AbstractFlatWidgetLine { }
+export class FlatWidgetPercentagebarComponent extends AbstractFlatWidgetLine {
+    protected get displayPercent(): number {
+        return Math.round(Number.parseFloat(this.displayValue));
+    }
+}