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

Switch to combined chart

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-01 20:01:20 -04:00
parent 3caaca9793
commit 25eca0e078
7 changed files with 77 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,7 @@ const routes: Routes = [
component: WeatherCurrentComponent
},
{
path: 'weather-charts/:type',
path: 'weather-charts',
component: WeatherChartsComponent
},
{

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

@@ -34,31 +34,13 @@
</span>
</a>
<mat-list-item>
<a routerLink="/weather-charts" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<mat-icon matListIcon class="nav-icon">
multiline_chart
</mat-icon>
<span class="nav-caption">
Weather Charts
</span>
</mat-list-item>
<a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<span class="nav-sub-item">
Temperature
</span>
</a>
<a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<span class="nav-sub-item">
Humidity
</span>
</a>
<a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<span class="nav-sub-item">
Pressure
</span>
</a>
</mat-nav-list>
</mat-sidenav>

2
Display/src/app/components/nav/nav.component.scss
View File

@@ -29,5 +29,5 @@
}
.nav-sub-item {
padding-left: 40px !important;
padding-left: 40px !important;
}

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

@@ -9,7 +9,7 @@
#chart {
position: absolute;
top: 50px;
bottom: 0;
bottom: 50px;
left: 0;
right: 0;
}

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Chart } from 'angular-highcharts';
import { SeriesLineOptions } from 'highcharts';
import { HttpClient } from '@angular/common/http';
import { WeatherValue } from '../../../models/weather/weather-value';
import { WeatherReadingGrouped } from '../../../models/weather/weather-reading-grouped';
import { ActivatedRoute, ParamMap } from '@angular/router';
import * as moment from 'moment';
@@ -22,7 +22,6 @@ export class WeatherChartsComponent implements OnInit {
public chart: Chart;
private loading = true;
private chartType: string;
public timeSpanItems: { [value: number]: string } = {};
public selectedTimeSpan: TimeSpan = TimeSpan.Last24Hours;
@@ -38,22 +37,6 @@ export class WeatherChartsComponent implements OnInit {
this.route.params.subscribe(params => {
this.loading = true;
const chartType = params.type;
switch (chartType) {
case 'temperature':
this.chartType = 'PressureTemperature';
break;
case 'humidity':
this.chartType = 'Humidity';
break;
case 'pressure':
this.chartType = 'Pressure';
break;
}
this.loadChart();
});
}
@@ -107,49 +90,92 @@ export class WeatherChartsComponent implements OnInit {
const startString = moment(start).toISOString();
const endString = moment(end).toISOString();
const request = this.httpClient.get<WeatherValue[]>(`http://172.23.10.3/api/weather/readings/value-history?weatherValueType=${this.chartType}&start=${startString}&end=${endString}&bucketMinutes=5`);
const request = this.httpClient.get<WeatherReadingGrouped[]>(`http://172.23.10.3/api/weather/readings/history-grouped?start=${startString}&end=${endString}&bucketMinutes=5`);
request.subscribe(data => {
const array = [];
const seriesData: Array<SeriesLineOptions> = [];
let divisor = 1;
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);
if (this.chartType === 'Pressure') {
divisor = 100;
}
data.forEach(dataElement => array.push([Date.parse(dataElement.bucket), dataElement.averageValue / divisor]));
data.forEach(dataElement => {
const date = Date.parse(dataElement.bucket);
seriesData[0].data.push([date, dataElement.averagePressureTemperature]);
seriesData[1].data.push([date, dataElement.averagePressure / 33.864]);
seriesData[2].data.push([date, dataElement.averageHumidity]);
seriesData[3].data.push([date, dataElement.averageLightLevel]);
});
this.chart = new Chart({
chart: {
type: 'line'
},
title: {
text: 'Linechart'
text: ''
},
credits: {
enabled: true
},
xAxis: {
type: 'datetime',
},
yAxis: {
labels: {
format: '{value:.2f}'
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'
}
},
yAxis: [
{
labels: {
format: '{value:.2f}°F',
},
title: {
text: ''
}
},
{
labels: {
format: '{value:.2f}"'
},
title: {
text: ''
},
opposite: true
},
{
visible: false,
min: 0,
max: 100
}
],
time: {
useUTC: false
},
tooltip: {
valueDecimals: 2
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: [
{
name: 'Line 1',
data: array
} as SeriesLineOptions
]
series: seriesData,
legend: {
enabled: true
}
});
this.loading = false;

2
Display/src/app/components/weather/current/weather-current.component.html
View File

@@ -26,7 +26,7 @@
Pressure
</td>
<td>
{{ (latestReading.Pressure / 100).toFixed(2) }} mbar
{{ (latestReading.Pressure / 33.864 / 100).toFixed(2) }}"
</td>
</tr>
<tr>

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

@@ -0,0 +1,8 @@
export class WeatherReadingGrouped {
bucket: string;
averagePressureTemperature: number;
averagePressure: number;
averageLightLevel: number;
averageHumidity: number;
averageHumidityTemperature: number;
}