Switch to combined chart

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
     },
     {

Display/src/app/components/nav/nav.component.html

@@ -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>

Display/src/app/components/nav/nav.component.scss

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

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

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<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') {
+            data.forEach(dataElement => {
-                divisor = 100;
+                const date = Date.parse(dataElement.bucket);
-            }
+                seriesData[0].data.push([date, dataElement.averagePressureTemperature]);
-
+                seriesData[1].data.push([date, dataElement.averagePressure / 33.864]);
-            data.forEach(dataElement => array.push([Date.parse(dataElement.bucket), dataElement.averageValue / divisor]));
+                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',
-                },
+                    dateTimeLabelFormats: {
-                yAxis: {
+                        millisecond: '%H:%M:%S.%L',
-                    labels: {
+                        second: '%H:%M:%S',
-                        format: '{value:.2f}'
+                        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: [
+                series: seriesData,
-                    {
+                legend: {
-                        name: 'Line 1',
+                    enabled: true
-                        data: array
+                }
-                    } as SeriesLineOptions
-                ]
             });
 
             this.loading = false;

Display/src/app/components/weather/current/weather-current.component.html

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

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