ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add power chart

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-15 21:00:18 -04:00
parent f1ec429087
commit d9fd889741
14 changed files with 319 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Display/proxy.conf.json
View File

@@ -5,6 +5,12 @@
"logLevel": "debug",
"changeOrigin": true
},
"/api/power": {
"target": "http://172.23.10.3",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
},
"/api/hub": {
"target": "ws://172.23.10.3:80",
"ws": true

5
Display/src/app/app-routing.module.ts
View File

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
import { PowerChartsComponent } from './components/power/charts/power-charts.component';
const routes: Routes = [
{
@@ -11,6 +12,10 @@ const routes: Routes = [
{
path: 'weather-charts',
component: WeatherChartsComponent
},
{
path: 'power-charts',
component: PowerChartsComponent
}
];

6
Display/src/app/app.module.ts
View File

@@ -22,7 +22,8 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
import { AlmanacComponent } from './components/weather/almanac/almanac.component';
import { PowerComponent } from './components/power/power.component';
import { PowerComponent } from './components/power/current/power.component';
import { PowerChartsComponent } from './components/power/charts/power-charts.component';
const config: SocketIoConfig = { url: '/', options: {} };
@@ -35,7 +36,8 @@ const config: SocketIoConfig = { url: '/', options: {} };
WeatherChartsComponent,
WeatherCurrentComponent,
AlmanacComponent,
PowerComponent
PowerComponent,
PowerChartsComponent
],
imports: [
BrowserModule,

9
Display/src/app/components/nav/nav.component.html
View File

@@ -24,6 +24,15 @@
Weather Charts
</span>
</a>
<a routerLink="/power-charts" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<mat-icon matListIcon class="nav-icon">
settings_power
</mat-icon>
<span class="nav-caption">
Power Charts
</span>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>

33
Display/src/app/components/power/charts/power-charts.component.html Normal file
View File

@@ -0,0 +1,33 @@
<mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
<div class="chart-content">
<header class="chart-header">
<button mat-button (click)="loadChart()" [disabled]="loading">
<mat-icon>refresh</mat-icon>
</button>
<span class="chart-button-spacer"></span>
<mat-form-field>
<mat-select [(value)]="selectedTimeSpan" [disabled]="loading">
<mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
</mat-select>
</mat-form-field>
<span class="chart-button-spacer"></span>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)" [disabled]="loading">
<mat-icon>arrow_back</mat-icon>
</button>
<mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" disabled [max]="maxDate">
<mat-datepicker-toggle matSuffix [for]="picker">
<mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker [disabled]="loading"></mat-datepicker>
</mat-form-field>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)" [disabled]="loading">
<mat-icon>arrow_forward</mat-icon>
</button>
<span class="chart-button-spacer"></span>
<button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()" [disabled]="loading">
Today
</button>
</header>
<div id="chart" [chart]="chart"></div>
</div>

27
Display/src/app/components/power/charts/power-charts.component.scss Normal file
View File

@@ -0,0 +1,27 @@
.chart-content {
display: flex;
flex-flow: column;
height: 100%;
}
#chart {
flex: 1 1 auto;
}
.chart-header {
background-color: rgb(250, 250, 250);
padding: 0 20px;
flex: 0 0 auto;
}
.chart-button-spacer {
margin-right: 20px;
}
.selected:after {
content: "";
display: block;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #673ab7;
}

25
Display/src/app/components/power/charts/power-charts.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PowerChartsComponent } from './power-charts.component';
describe('PowerChartsComponent', () => {
let component: PowerChartsComponent;
let fixture: ComponentFixture<PowerChartsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PowerChartsComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PowerChartsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

198
Display/src/app/components/power/charts/power-charts.component.ts Normal file
View File

@@ -0,0 +1,198 @@
import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { SeriesLineOptions, SeriesWindbarbOptions } from 'highcharts';
import { HttpClient } from '@angular/common/http';
import { PowerStatusGrouped } from '../../../models/power/power-status-grouped';
import * as moment from 'moment';
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);
enum TimeSpan {
Last24Hours,
Day,
Custom
}
@Component({
selector: 'app-power-charts',
templateUrl: './power-charts.component.html',
styleUrls: ['./power-charts.component.scss']
})
export class PowerChartsComponent implements OnInit {
public chart: Chart;
public loading = true;
public timeSpanItems: { [value: number]: string } = {};
public timeSpans: typeof TimeSpan = TimeSpan;
public maxDate: moment.Moment = moment().endOf('day');
private selectedTimeSpanValue: TimeSpan = TimeSpan.Last24Hours;
private selectedDateValue: moment.Moment = moment().startOf('day');
constructor(private httpClient: HttpClient) { }
ngOnInit() {
this.timeSpanItems[TimeSpan.Last24Hours] = 'Last 24 hours';
this.timeSpanItems[TimeSpan.Day] = 'Day';
this.loadChart();
}
public get selectedTimeSpan() {
return this.selectedTimeSpanValue;
}
public set selectedTimeSpan(value) {
this.selectedTimeSpanValue = value;
this.loadChart();
}
public get selectedDate() {
return this.selectedDateValue;
}
public set selectedDate(value) {
this.selectedDateValue = value;
this.loadChart();
}
public handleDateArrowClick(value: number) {
this.selectedDate = moment(this.selectedDate).add(value, 'day');
}
public isSelectedDateToday(): boolean {
const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
return isToday;
}
public resetToToday() {
this.selectedDate = moment().startOf('day');
}
public getSelectedDateDisplayString(): string {
return moment(this.selectedDate).format('LL');
}
private loadPowerChart(start: moment.Moment, end: moment.Moment) {
const startString = start.toISOString();
const endString = end.toISOString();
const request = this.httpClient.get<PowerStatusGrouped[]>(`/api/power/status/history-grouped?start=${startString}&end=${endString}&bucketMinutes=5`);
request.subscribe(data => {
const seriesData: Array<SeriesLineOptions> = [];
seriesData.push({ name: 'Generation', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' W' } } as SeriesLineOptions);
seriesData.push({ name: 'Consumption', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' W' } } as SeriesLineOptions);
data.forEach(dataElement => {
const date = Date.parse(dataElement.bucket);
seriesData[0].data.push([date, dataElement.averageGeneration < 0 ? 0 : dataElement.averageGeneration]);
seriesData[1].data.push([date, dataElement.averageConsumption < 0 ? 0 : dataElement.averageConsumption]);
});
const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
this.chart = new Chart({
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: title
},
credits: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%l:%M %P',
hour: '%l:%M %P',
day: '%b %e',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
}
},
yAxis: [
{
labels: {
format: '{value} W',
},
title: {
text: 'Power'
}
}
],
time: {
useUTC: false
},
tooltip: {
valueDecimals: 2,
shared: true,
dateTimeLabelFormats: {
day: '%A, %b %e, %Y',
hour: '%A, %b %e, %H:%M',
millisecond: '%A, %b %e, %H:%M:%S.%L',
minute: '%A, %b %e, %l:%M %P',
month: '%B %Y',
second: '%A, %b %e, %H:%M:%S',
week: 'Week from %A, %b %e, %Y',
year: '%Y'
}
},
series: seriesData,
legend: {
enabled: true
},
exporting: {
enabled: true
}
});
this.loading = false;
});
}
private loadChart() {
let start: moment.Moment;
let end: moment.Moment;
this.loading = true;
if (this.chart) {
this.chart.ref$.subscribe(o => o.showLoading());
}
switch (this.selectedTimeSpan) {
case TimeSpan.Last24Hours: {
start = moment().subtract(24, 'hour');
end = moment();
break;
}
case TimeSpan.Day: {
start = moment(this.selectedDate).startOf('day');
end = moment(this.selectedDate).endOf('day');
break;
}
default: {
return;
}
}
this.loadPowerChart(start, end);
}
}

4
Display/src/app/components/power/power.component.html → Display/src/app/components/power/current/power.component.html
View File

@@ -9,7 +9,7 @@
Generation
</td>
<td>
{{ latestStatus.Generation < 0 ? 0 : latestStatus.Generation }}
{{ latestStatus.Generation < 0 ? 0 : latestStatus.Generation }} W
</td>
</tr>
<tr>
@@ -17,7 +17,7 @@
Consumption
</td>
<td>
{{ latestStatus.Consumption < 0 ? 0 : latestStatus.Consumption }}
{{ latestStatus.Consumption < 0 ? 0 : latestStatus.Consumption }} W
</td>
</tr>
</table>

0
Display/src/app/components/power/power.component.scss → Display/src/app/components/power/current/power.component.scss
View File

0
Display/src/app/components/power/power.component.spec.ts → Display/src/app/components/power/current/power.component.spec.ts
View File

4
Display/src/app/components/power/power.component.ts → Display/src/app/components/power/current/power.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { PowerService } from '../../services/power/power.service';
import { PowerStatus } from '../../models/power/power-status';
import { PowerService } from 'src/app/services/power/power.service';
import { PowerStatus } from 'src/app/models/power/power-status';
@Component({
selector: 'app-power',

3
Display/src/app/components/weather/charts/weather-charts.component.html
View File

@@ -1,6 +1,9 @@
<mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
<div class="chart-content">
<header class="chart-header">
<button mat-button (click)="loadChart()" [disabled]="loading">
<mat-icon>refresh</mat-icon>
</button>
<button mat-button (click)="chartTypeChange(ChartType.Weather)" [class.selected]="selectedChartType === ChartType.Weather" [disabled]="loading">
Common
</button>

5
Display/src/app/models/power/power-status-grouped.ts Normal file
View File

@@ -0,0 +1,5 @@
export class PowerStatusGrouped {
bucket: string;
averageGeneration: number;
averageConsumption: number;
}