diff --git a/Display/src/app/app-routing.module.ts b/Display/src/app/app-routing.module.ts index c1ff0b4..3328fa9 100644 --- a/Display/src/app/app-routing.module.ts +++ b/Display/src/app/app-routing.module.ts @@ -15,7 +15,7 @@ const routes: Routes = [ component: WeatherCurrentComponent }, { - path: 'weather-charts/:type', + path: 'weather-charts', component: WeatherChartsComponent }, { diff --git a/Display/src/app/components/nav/nav.component.html b/Display/src/app/components/nav/nav.component.html index 511e2bf..c2267de 100644 --- a/Display/src/app/components/nav/nav.component.html +++ b/Display/src/app/components/nav/nav.component.html @@ -34,31 +34,13 @@ - + multiline_chart Weather Charts - - - - - Temperature - - - - - - Humidity - - - - - - Pressure - diff --git a/Display/src/app/components/nav/nav.component.scss b/Display/src/app/components/nav/nav.component.scss index eeabb36..841c458 100644 --- a/Display/src/app/components/nav/nav.component.scss +++ b/Display/src/app/components/nav/nav.component.scss @@ -29,5 +29,5 @@ } .nav-sub-item { - padding-left: 40px !important; + padding-left: 40px !important; } diff --git a/Display/src/app/components/weather/charts/weather-charts.component.scss b/Display/src/app/components/weather/charts/weather-charts.component.scss index 11a6976..092c691 100644 --- a/Display/src/app/components/weather/charts/weather-charts.component.scss +++ b/Display/src/app/components/weather/charts/weather-charts.component.scss @@ -9,7 +9,7 @@ #chart { position: absolute; top: 50px; - bottom: 0; + bottom: 50px; left: 0; right: 0; } diff --git a/Display/src/app/components/weather/charts/weather-charts.component.ts b/Display/src/app/components/weather/charts/weather-charts.component.ts index 8c34ba1..711b071 100644 --- a/Display/src/app/components/weather/charts/weather-charts.component.ts +++ b/Display/src/app/components/weather/charts/weather-charts.component.ts @@ -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(`http://172.23.10.3/api/weather/readings/value-history?weatherValueType=${this.chartType}&start=${startString}&end=${endString}&bucketMinutes=5`); + const request = this.httpClient.get(`http://172.23.10.3/api/weather/readings/history-grouped?start=${startString}&end=${endString}&bucketMinutes=5`); request.subscribe(data => { - const array = []; + const seriesData: Array = []; - 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; diff --git a/Display/src/app/components/weather/current/weather-current.component.html b/Display/src/app/components/weather/current/weather-current.component.html index 665b134..3eb93b9 100644 --- a/Display/src/app/components/weather/current/weather-current.component.html +++ b/Display/src/app/components/weather/current/weather-current.component.html @@ -26,7 +26,7 @@ Pressure - {{ (latestReading.Pressure / 100).toFixed(2) }} mbar + {{ (latestReading.Pressure / 33.864 / 100).toFixed(2) }}" diff --git a/Display/src/app/models/weather/weather-reading-grouped.ts b/Display/src/app/models/weather/weather-reading-grouped.ts new file mode 100644 index 0000000..803bb95 --- /dev/null +++ b/Display/src/app/models/weather/weather-reading-grouped.ts @@ -0,0 +1,8 @@ +export class WeatherReadingGrouped { + bucket: string; + averagePressureTemperature: number; + averagePressure: number; + averageLightLevel: number; + averageHumidity: number; + averageHumidityTemperature: number; +}