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