patrick/Data2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better energy change detection

Browse Source
This commit is contained in:
Patrick Haßel 2025-11-21 10:52:38 +01:00
parent 2bd115f095
commit 9213c20116
5 changed files with 29 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/main/angular/src/app/location/detail/location-detail.html
View File

@ -3,29 +3,19 @@
<app-location-power [location]="location"></app-location-power>
<app-location-energy [location]="location" [interval]="Interval.DAY" [offset]="offsetDay" unit="⌀W" [factor]="12 * 1000" [maxY]="850" [minY]="-850">
<ng-content #SeriesHistoryHeading>
<div style="display: flex; width: 100%">
&nbsp;
<div (click)="offsetDay += 1">&larr;</div>
&nbsp;
<div (click)="offsetDay = Math.max(0, offsetDay -1)">&rarr;</div>
&nbsp;
<div style="flex: 1">{{ offsetDayTitle() }}</div>
<div style="display: flex; width: 100%; gap: 0.25em;">
<div (click)="offsetDayAdd(+1)">&larr;</div>
<div (click)="offsetDayAdd(-1)">&rarr;</div>
<div>{{ offsetDayTitle() }}</div>
</div>
</ng-content>
</app-location-energy>
<app-location-energy [location]="location" [interval]="Interval.MONTH" [offset]="offsetMonth">
<ng-content #SeriesHistoryHeading>
<div style="display: flex; width: 100%">
&nbsp;
<div (click)="offsetMonth += 1">&larr;</div>
&nbsp;
<div (click)="offsetMonth = Math.max(0, offsetMonth -1)">&rarr;</div>
&nbsp;
<div style="flex: 1">{{ offsetMonthTitle() }}</div>
<div style="display: flex; width: 100%; gap: 0.25em;">
<div (click)="offsetMonthAdd(+1)">&larr;</div>
<div (click)="offsetMonthAdd(-1)">&rarr;</div>
<div>{{ offsetMonthTitle() }}</div>
</div>
</ng-content>
</app-location-energy>
@if (configService.locationConfig) {

12
src/main/angular/src/app/location/detail/location-detail.ts
View File

@ -92,9 +92,7 @@ export class LocationDetail implements OnInit, OnDestroy {
private readonly onLocationChange = (location: Location | null): void => {
this.location = location;
if (this.location) {
this.menuService.title = this.location.name;
}
this.menuService.title = this.location?.name || "";
};
ngOnDestroy(): void {
@ -122,4 +120,12 @@ export class LocationDetail implements OnInit, OnDestroy {
return this.datePipe.transform(d, 'yyyy MMMM') || '';
}
protected offsetDayAdd(delta: number) {
this.offsetDay = Math.max(0, this.offsetDay + delta);
}
protected offsetMonthAdd(delta: number) {
this.offsetMonth = Math.max(0, this.offsetMonth + delta);
}
}

7
src/main/angular/src/app/location/energy/charts/energy-charts.ts
View File

@ -1,4 +1,4 @@
import {AfterViewInit, Component, Inject, Input, LOCALE_ID, ViewChild} from '@angular/core';
import {Component, Inject, Input, LOCALE_ID, OnChanges, SimpleChanges, ViewChild} from '@angular/core';
import {Interval} from '../../../series/Interval';
import {PointService} from '../../../point/point-service';
import {Location} from '../../Location';
@ -22,7 +22,7 @@ const COLOR_BACK_CONSUME = "#ffc07a";
templateUrl: './energy-charts.html',
styleUrl: './energy-charts.less',
})
export class EnergyCharts implements AfterViewInit {
export class EnergyCharts implements OnChanges {
@ViewChild(BaseChartDirective)
chart?: BaseChartDirective;
@ -118,7 +118,8 @@ export class EnergyCharts implements AfterViewInit {
//
}
ngAfterViewInit(): void {
ngOnChanges(changes: SimpleChanges): void {
console.log("ngOnChanges", changes);
const series = [
this.location.energyPurchase,
this.location.energyDeliver,

4
src/main/angular/src/app/location/energy/location-energy.html
View File

@ -2,7 +2,7 @@
<div class="SectionHeading">
<div class="SectionHeadingText">
{{ heading }}
<ng-content #SeriesHistoryHeading></ng-content>
<ng-content></ng-content>
</div>
</div>
<div class="SectionBody">
@ -86,6 +86,6 @@
</div>
<app-energy-charts [location]="location" [interval]="interval" [offset]="offset" [unit]="unit" [factor]="factor" [maxY]="maxY" [minY]="minY"></app-energy-charts>
<app-energy-charts #chart [location]="location" [interval]="interval" [offset]="offset" [unit]="unit" [factor]="factor" [maxY]="maxY" [minY]="minY"></app-energy-charts>
</div>

17
src/main/angular/src/app/location/energy/location-energy.ts
View File

@ -1,4 +1,4 @@
import {AfterViewInit, Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
import {Location} from '../Location';
import {Series} from '../../series/Series';
import {Next} from '../../common';
@ -18,7 +18,7 @@ import {EnergyCharts} from './charts/energy-charts';
templateUrl: './location-energy.html',
styleUrl: './location-energy.less',
})
export class LocationEnergy implements OnInit, AfterViewInit, OnDestroy {
export class LocationEnergy implements OnInit, OnChanges, OnDestroy {
protected readonly Interval = Interval;
@ -49,17 +49,8 @@ export class LocationEnergy implements OnInit, AfterViewInit, OnDestroy {
@Input()
heading!: string;
private _o_: number = 0;
@Input()
set offset(value: number) {
this._o_ = value;
this.ngAfterViewInit();
}
get offset(): number {
return this._o_;
}
offset: number = 0;
@Input()
unit: string = "";
@ -94,7 +85,7 @@ export class LocationEnergy implements OnInit, AfterViewInit, OnDestroy {
this.subs.push(this.serieService.subscribe(this.update));
}
ngAfterViewInit(): void {
ngOnChanges(changes: SimpleChanges): void {
this.fetch(null, this.location?.energyPurchase, history => this.purchase = history);
this.fetch(null, this.location?.energyDeliver, history => this.deliver = history);
this.fetch(null, this.location?.energyProduce, history => this.produce = history);