ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-14 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add wind chart

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-11 18:48:26 -04:00
parent 618688ed08
commit 13fff1d237
4 changed files with 176 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,14 @@
<mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
<div class="chart-content">
<header class="chart-header">
<button mat-button (click)="chartTypeChange(ChartType.Weather)" [class.selected]="selectedChartType === ChartType.Weather" [disabled]="loading">
Common
</button>
<button mat-button (click)="chartTypeChange(ChartType.Wind)" [class.selected]="selectedChartType === ChartType.Wind" [disabled]="loading">
Wind
</button>
<span class="chart-button-spacer"></span>
<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>

8
Display/src/app/components/weather/charts/weather-charts.component.scss
View File

@@ -17,3 +17,11 @@
.chart-button-spacer {
margin-right: 20px;
}
.selected:after {
content: "";
display: block;
margin: 0 auto;
width: 100%;
border-bottom: 1px solid #673ab7;
}

184
Display/src/app/components/weather/charts/weather-charts.component.ts
View File

@@ -1,14 +1,17 @@
import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { SeriesLineOptions } from 'highcharts';
import { SeriesLineOptions, SeriesWindbarbOptions } from 'highcharts';
import { HttpClient } from '@angular/common/http';
import { WeatherReadingGrouped } from '../../../models/weather/weather-reading-grouped';
import { WindHistoryGrouped } from '../../../models/weather/wind-history-grouped';
import * as moment from 'moment';
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
import HC_windbarb from 'highcharts/modules/windbarb';
HC_exporting(Highcharts);
HC_windbarb(Highcharts);
enum TimeSpan {
Last24Hours,
@@ -16,6 +19,11 @@ enum TimeSpan {
Custom
}
enum ChartType {
Weather,
Wind
}
@Component({
selector: 'app-weather-charts',
templateUrl: './weather-charts.component.html',
@@ -28,6 +36,8 @@ export class WeatherChartsComponent implements OnInit {
public timeSpanItems: { [value: number]: string } = {};
public timeSpans: typeof TimeSpan = TimeSpan;
public maxDate: moment.Moment = moment().endOf('day');
public selectedChartType: ChartType = ChartType.Weather;
public ChartType = ChartType;
private selectedTimeSpanValue: TimeSpan = TimeSpan.Last24Hours;
private selectedDateValue: moment.Moment = moment().startOf('day');
@@ -79,36 +89,17 @@ export class WeatherChartsComponent implements OnInit {
return moment(this.selectedDate).format('LL');
}
private loadChart() {
let start: moment.Moment;
let end: moment.Moment;
this.loading = true;
if (this.chart) {
this.chart.ref$.subscribe(o => o.showLoading());
public chartTypeChange(value: ChartType) {
if (this.selectedChartType === value) {
return;
}
switch (this.selectedTimeSpan) {
case TimeSpan.Last24Hours: {
start = moment().subtract(24, 'hour');
end = moment();
this.selectedChartType = value;
break;
}
case TimeSpan.Day: {
start = moment(this.selectedDate).startOf('day');
end = moment(this.selectedDate).endOf('day');
break;
}
default: {
return;
}
}
this.loadChart();
}
private loadWeatherChart(start: moment.Moment, end: moment.Moment) {
const startString = start.toISOString();
const endString = end.toISOString();
@@ -117,11 +108,11 @@ export class WeatherChartsComponent implements OnInit {
request.subscribe(data => {
const seriesData: Array<SeriesLineOptions> = [];
seriesData.push({ name: 'Temperature', data: [], yAxis: 0, tooltip: { valueSuffix: '°F' } } as SeriesLineOptions);
seriesData.push({ name: 'Pressure', data: [], yAxis: 1, tooltip: { valueSuffix: '"' } } as SeriesLineOptions);
seriesData.push({ name: 'Humidity', data: [], yAxis: 2, tooltip: { valueSuffix: '%' } } as SeriesLineOptions);
seriesData.push({ name: 'Light', data: [], yAxis: 2, tooltip: { valueSuffix: '%' } } as SeriesLineOptions);
seriesData.push({ name: 'Rain', data: [], yAxis: 3, tooltip: { valueSuffix: '"' } } as SeriesLineOptions);
seriesData.push({ name: 'Temperature', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: '°F' } } as SeriesLineOptions);
seriesData.push({ name: 'Pressure', data: [], yAxis: 1, marker: { enabled: false }, tooltip: { valueSuffix: '"' } } as SeriesLineOptions);
seriesData.push({ name: 'Humidity', data: [], yAxis: 2, marker: { enabled: false }, tooltip: { valueSuffix: '%' } } as SeriesLineOptions);
seriesData.push({ name: 'Light', data: [], yAxis: 2, marker: { enabled: false }, tooltip: { valueSuffix: '%' } } as SeriesLineOptions);
seriesData.push({ name: 'Rain', data: [], yAxis: 3, marker: { enabled: false }, tooltip: { valueSuffix: '"' } } as SeriesLineOptions);
let rainTotal = 0;
@@ -232,4 +223,133 @@ export class WeatherChartsComponent implements OnInit {
this.loading = false;
});
}
private loadWindChart(start: moment.Moment, end: moment.Moment) {
const startString = start.toISOString();
const endString = end.toISOString();
const request = this.httpClient.get<WindHistoryGrouped[]>(`/api/weather/readings/wind-history-grouped?start=${startString}&end=${endString}&bucketMinutes=30`);
request.subscribe(data => {
const seriesData: Array<SeriesLineOptions | SeriesWindbarbOptions> = [];
seriesData.push({ type: 'line', name: 'Minimum', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' MPH' } } as SeriesLineOptions);
seriesData.push({ type: 'line', name: 'Average', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' MPH' } } as SeriesLineOptions);
seriesData.push({ type: 'line', name: 'Maximum', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' MPH' } } as SeriesLineOptions);
seriesData.push({ type: 'windbarb', name: 'Direction', data: [], marker: { enabled: false }, tooltip: { valueSuffix: ' MPH' } } as SeriesWindbarbOptions);
data.forEach(dataElement => {
const date = Date.parse(dataElement.bucket);
seriesData[0].data.push([date, dataElement.minimumSpeed]);
seriesData[1].data.push([date, dataElement.averageSpeed]);
seriesData[2].data.push([date, dataElement.maximumSpeed]);
seriesData[3].data.push([date, dataElement.averageSpeed, dataElement.averageDirection]);
});
const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
this.chart = new Chart({
chart: {
zoomType: 'x'
},
title: {
text: title
},
credits: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%l:%M %P',
day: '%b %e',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
offset: 50
},
yAxis: [
{
labels: {
format: '{value:.2f} MPH',
},
title: {
text: 'Wind Speed'
}
}
],
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;
}
}
switch (this.selectedChartType) {
case ChartType.Weather:
this.loadWeatherChart(start, end);
break;
case ChartType.Wind:
this.loadWindChart(start, end);
break;
}
}
}

8
Display/src/app/models/weather/wind-history-grouped.ts Normal file
View File

@@ -0,0 +1,8 @@
export class WindHistoryGrouped {
bucket: string;
minimumSpeed: number;
averageSpeed: number;
maximumSpeed: number;
averageDirection: number;
}