better energy change detection

src/main/angular/src/app/location/detail/location-detail.html

@@ -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%; gap: 0.25em;">
-      <div style="display: flex; width: 100%">
+      <div (click)="offsetDayAdd(+1)">&larr;</div>
-        &nbsp;
+      <div (click)="offsetDayAdd(-1)">&rarr;</div>
-        <div (click)="offsetDay += 1">&larr;</div>
+      <div>{{ offsetDayTitle() }}</div>
-        &nbsp;
-        <div (click)="offsetDay = Math.max(0, offsetDay -1)">&rarr;</div>
-        &nbsp;
-        <div style="flex: 1">{{ 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%; gap: 0.25em;">
-      <div style="display: flex; width: 100%">
+      <div (click)="offsetMonthAdd(+1)">&larr;</div>
-        &nbsp;
+      <div (click)="offsetMonthAdd(-1)">&rarr;</div>
-        <div (click)="offsetMonth += 1">&larr;</div>
+      <div>{{ offsetMonthTitle() }}</div>
-        &nbsp;
-        <div (click)="offsetMonth = Math.max(0, offsetMonth -1)">&rarr;</div>
-        &nbsp;
-        <div style="flex: 1">{{ offsetMonthTitle() }}</div>
     </div>
-    </ng-content>
   </app-location-energy>
 
   @if (configService.locationConfig) {

src/main/angular/src/app/location/detail/location-detail.ts

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

src/main/angular/src/app/location/energy/charts/energy-charts.ts

@@ -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,

src/main/angular/src/app/location/energy/location-energy.html

@@ -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>

src/main/angular/src/app/location/energy/location-energy.ts

@@ -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) {
+  offset: number = 0;
-    this._o_ = value;
-    this.ngAfterViewInit();
-  }
-
-  get offset(): number {
-    return this._o_;
-  }
 
   @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);