Add wind chart

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

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

Display/src/app/components/weather/charts/weather-charts.component.scss

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

Display/src/app/components/weather/charts/weather-charts.component.ts

@@ -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() {
+    public chartTypeChange(value: ChartType) {
-        let start: moment.Moment;
+        if (this.selectedChartType === value) {
-        let end: moment.Moment;
+            return;
-
-        this.loading = true;
-
-        if (this.chart) {
-            this.chart.ref$.subscribe(o => o.showLoading());
         }
 
-        switch (this.selectedTimeSpan) {
+        this.selectedChartType = value;
-            case TimeSpan.Last24Hours: {
-                start = moment().subtract(24, 'hour');
-                end = moment();
 
-                break;
+        this.loadChart();
-            }
+    }
-
-            case TimeSpan.Day: {
-                start = moment(this.selectedDate).startOf('day');
-                end = moment(this.selectedDate).endOf('day');
-
-                break;
-            }
-
-            default: {
-                return;
-            }
-        }
 
+    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: 'Temperature', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: '°F' } } as SeriesLineOptions);
-            seriesData.push({ name: 'Pressure', data: [], yAxis: 1, tooltip: { valueSuffix: '"' } } as SeriesLineOptions);
+            seriesData.push({ name: 'Pressure', data: [], yAxis: 1, marker: { enabled: false }, tooltip: { valueSuffix: '"' } } as SeriesLineOptions);
-            seriesData.push({ name: 'Humidity', data: [], yAxis: 2, 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, 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, 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;
+        }
+    }
 }

Display/src/app/models/weather/wind-history-grouped.ts

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