From 780f3cb6a5793ac29b5b8892773e93281cf4fdc9 Mon Sep 17 00:00:00 2001 From: Tobias Peper Date: Fri, 11 Apr 2025 19:53:57 +0200 Subject: [PATCH] =?UTF-8?q?Eigenst=C3=A4ndige=20Chart-Komponente?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.html | 28 ++++++-- src/app/app.component.ts | 85 ++++++++---------------- src/app/chart/chart.component.css | 0 src/app/chart/chart.component.html | 3 + src/app/chart/chart.component.spec.ts | 23 +++++++ src/app/chart/chart.component.ts | 93 +++++++++++++++++++++++++++ src/app/rest.service.ts | 10 +-- src/app/test/test.component.ts | 14 +++- 8 files changed, 184 insertions(+), 72 deletions(-) create mode 100644 src/app/chart/chart.component.css create mode 100644 src/app/chart/chart.component.html create mode 100644 src/app/chart/chart.component.spec.ts create mode 100644 src/app/chart/chart.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 3993aa6..3222c53 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,14 +1,32 @@
+
+ Haushalt: + +
+ + +
+
+
+ +
+ + + +
+

- +

-
- -
+
@@ -18,7 +36,7 @@
- +
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 8626ab0..209c1d3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,77 +1,44 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { TestComponent } from "./test/test.component"; +import { ChartComponent } from './chart/chart.component'; import { RestService } from './rest.service'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { Chart } from 'chart.js/auto'; -import 'chartjs-adapter-date-fns'; -import { de } from 'date-fns/locale'; -import { Aggregate } from './aggregate'; +import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, TestComponent, NgbModule,], + imports: [RouterOutlet, TestComponent, ChartComponent, NgbModule,NgbDropdownModule,], templateUrl: './app.component.html', styleUrl: './app.component.css' }) -export class AppComponent implements OnInit { +export class AppComponent implements OnInit, OnChanges { constructor(private rest: RestService) { } + ngOnChanges(changes: SimpleChanges): void { + } ngOnInit(): void { - this.rest.getLatestData().subscribe((data: Aggregate[]) => { - this.chart = new Chart('canvas', { - type: 'line', - options: { - scales: { - x: { - type: 'time', - time: { - tooltipFormat: 'HH:mm', - displayFormats: { - hour: 'HH:mm', - minute: 'HH:mm' - } - }, - title: { - display: true, - text: 'Zeitpunkt' - }, - adapters: { - date: { - locale: de - } - } - }, - y: { - type: 'linear' - //stacked: true, - } - } - }, - data: { - labels: data.map(row => row.timestampStart), - datasets: [ - { - label: 'Bezug', - pointRadius: 0, - data: data.map(row => row.obtainedEnergy/60000) - }, { - label: 'Erzeugt', - pointRadius: 0, - data: data.map(row => row.producedEnergy/60000) - }, { - label: 'Eingespeist', - pointRadius: 0, - data: data.map(row => row.injectedEnergy/60000) - } - ] - } - }) - }) + this.houseId = 1; + this.duration = 120; } - title = 'test1'; - chart: Chart | null = null; + + getHouseName(): string { + if (this.houseId) { + if (this.houseId === 1) { + return 'Kerpen'; + } else if (this.houseId === 2) { + return 'Rommerskirchen'; + } else { + return 'Unbekannt'; + } + } else { + return 'Unbekannt'; + } + } + + houseId: number | undefined = undefined; + duration: number | undefined = undefined; } diff --git a/src/app/chart/chart.component.css b/src/app/chart/chart.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/chart/chart.component.html b/src/app/chart/chart.component.html new file mode 100644 index 0000000..1bde57f --- /dev/null +++ b/src/app/chart/chart.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/app/chart/chart.component.spec.ts b/src/app/chart/chart.component.spec.ts new file mode 100644 index 0000000..8f6510a --- /dev/null +++ b/src/app/chart/chart.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChartComponent } from './chart.component'; + +describe('ChartComponent', () => { + let component: ChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ChartComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chart/chart.component.ts b/src/app/chart/chart.component.ts new file mode 100644 index 0000000..e10ce91 --- /dev/null +++ b/src/app/chart/chart.component.ts @@ -0,0 +1,93 @@ +import { Component, OnInit, OnChanges, SimpleChanges, numberAttribute, Input } from '@angular/core'; +import { Chart } from 'chart.js/auto'; +import 'chartjs-adapter-date-fns'; +import { de } from 'date-fns/locale'; +import { RestService } from '../rest.service'; +import { Aggregate } from '../aggregate'; + +@Component({ + selector: 'app-chart', + standalone: true, + imports: [], + templateUrl: './chart.component.html', + styleUrl: './chart.component.css' +}) +export class ChartComponent implements OnInit, OnChanges { + + @Input({ transform: numberAttribute }) houseId!: number; + @Input({ transform: numberAttribute }) duration!: number; + chart: Chart | null = null; + + constructor(private rest: RestService) { + } + + + ngOnInit(): void { + console.log('Nothing yet on chart.ngOnInit()'); + } + ngOnChanges(changes: SimpleChanges): void { + this.rest.getLatestData(this.houseId, this.duration).subscribe((data: Aggregate[]) => { + console.log('Change chart'); + if (this.chart) { + this.chart.clear(); + this.chart.destroy(); + } + this.chart = new Chart('canvas', { + type: 'line', + options: { + scales: { + x: { + type: 'time', + time: { + tooltipFormat: 'HH:mm', + displayFormats: { + hour: 'HH:mm', + minute: 'HH:mm' + } + }, + title: { + display: true, + text: 'Zeitpunkt' + }, + adapters: { + date: { + locale: de + } + } + }, + y: { + type: 'linear', + //stacked: true, + title: { + display: true, + text: 'Leistung [Watt]' + }, + } + } + }, + data: { + labels: data.map(row => row.timestampStart), + datasets: [ + { + label: 'Bezug (Stromnetz)', + borderColor: '#ff0000', + pointRadius: 1, + data: data.map(row => row.obtainedEnergy/60000) + }, { + label: 'Erzeugt (Solar)', + borderColor: '#ffa500', + pointRadius: 1, + data: data.map(row => row.producedEnergy/60000) + }, { + label: 'Eingespeist (Stromnetz)', + borderColor: '#006400', + pointRadius: 1, + data: data.map(row => row.injectedEnergy/60000) + } + ] + } + }); + }); + } + +} diff --git a/src/app/rest.service.ts b/src/app/rest.service.ts index ad61ef0..ddccf35 100644 --- a/src/app/rest.service.ts +++ b/src/app/rest.service.ts @@ -16,15 +16,15 @@ export class RestService { return this.http.get('https://vz.home.peper.info/rest-vz/stats?houseId=1&duration=P7D'); } - getLatestData(): Observable { - return this.http.get('https://vz.home.peper.info/rest-vz/latest-data?houseId=2&timeWindow=1440'); + getLatestData(houseId: Number, duration: Number): Observable { + return this.http.get('https://vz.home.peper.info/rest-vz/latest-data?houseId=' + houseId + '&timeWindow=' + duration); } - getStatisticsWithDuration(duration: string | undefined): Observable { + getStatisticsWithDuration(duration: string | undefined, houseId: Number): Observable { if (duration) { - return this.http.get('https://vz.home.peper.info/rest-vz/stats?houseId=1&duration=' + duration); + return this.http.get('https://vz.home.peper.info/rest-vz/stats?houseId=' + houseId + '&duration=' + duration); } else { - return this.http.get('https://vz.home.peper.info/rest-vz/stats?houseId=1'); + return this.http.get('https://vz.home.peper.info/rest-vz/stats?houseId=' + houseId); } } diff --git a/src/app/test/test.component.ts b/src/app/test/test.component.ts index 91f01ce..303db32 100644 --- a/src/app/test/test.component.ts +++ b/src/app/test/test.component.ts @@ -1,8 +1,9 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { Statistics } from '../statistics'; import { RestService } from '../rest.service'; import { formatDate, formatNumber } from '@angular/common'; import { NgIf } from '@angular/common'; +import { numberAttribute } from '@angular/core'; import * as _ from 'lodash'; @Component({ @@ -12,15 +13,22 @@ import * as _ from 'lodash'; templateUrl: './test.component.html', styleUrl: './test.component.css' }) -export class TestComponent implements OnInit { +export class TestComponent implements OnInit, OnChanges { statistics!: Statistics; @Input() duration!: string; + @Input({ transform: numberAttribute }) houseId!: Number; constructor(private rest: RestService) { } + ngOnChanges(changes: SimpleChanges): void { + this.rest.getStatisticsWithDuration(this.duration, this.houseId).subscribe((data: Statistics) => { + this.statistics = data; + }) + } + ngOnInit(): void { - this.rest.getStatisticsWithDuration(this.duration).subscribe((data: Statistics) => { + this.rest.getStatisticsWithDuration(this.duration, this.houseId).subscribe((data: Statistics) => { this.statistics = data; }) }