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

* fix reserve bar
* fix energy chart cutoff
* fix percentbar warning
* fix on reserve soc

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>

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>

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>

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));
+ }
+}