Display app improvements

- Add summary page
- Use common time range component

Display/src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
 import { PowerChartsComponent } from './components/power/charts/power-charts.component';
+import { WeatherSummaryComponent } from './components/weather/summary/weather-summary.component';
 
 const routes: Routes = [
     {
@@ -16,6 +17,10 @@ const routes: Routes = [
     {
         path: 'power-charts',
         component: PowerChartsComponent
+    },
+    {
+        path: 'weather-summary',
+        component: WeatherSummaryComponent
     }
 ];
 

Display/src/app/app.module.ts

@@ -32,6 +32,8 @@ import { WeatherCurrentComponent } from './components/weather/current/weather-cu
 import { AlmanacComponent } from './components/weather/almanac/almanac.component';
 import { PowerComponent } from './components/power/current/power.component';
 import { PowerChartsComponent } from './components/power/charts/power-charts.component';
+import { WeatherSummaryComponent } from './components/weather/summary/weather-summary.component';
+import { TimeRangeComponent } from './components/time-range/time-range.component';
 
 const config: SocketIoConfig = { url: '/', options: {} };
 
@@ -45,7 +47,9 @@ const config: SocketIoConfig = { url: '/', options: {} };
         WeatherCurrentComponent,
         AlmanacComponent,
         PowerComponent,
-        PowerChartsComponent
+        PowerChartsComponent,
+        WeatherSummaryComponent,
+        TimeRangeComponent
     ],
     imports: [
         BrowserModule,

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

@@ -16,6 +16,15 @@
                 </span>
             </a>
 
+            <a routerLink="/weather-summary" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <mat-icon matListIcon class="nav-icon">
+                    list
+                </mat-icon>
+                <span class="nav-caption">
+                    Summary
+                </span>
+            </a>
+
             <a routerLink="/weather-charts" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
                 <mat-icon matListIcon class="nav-icon">
                     multiline_chart

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

@@ -1,33 +1,13 @@
 <mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
-<div class="chart-content">
-    <header class="chart-header">
-        <button mat-button (click)="loadChart()" [disabled]="loading">
+
+<div class="content">
+    <header class="header">
+        <button id="refresh" mat-button (click)="load()" [disabled]="loading">
             <mat-icon>refresh</mat-icon>
         </button>
-        <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>
-            </mat-select>
-        </mat-form-field>
-        <span class="chart-button-spacer"></span>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)" [disabled]="loading">
-            <mat-icon>arrow_back</mat-icon>
-        </button>
-        <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
-            <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" disabled [max]="maxDate">
-            <mat-datepicker-toggle matSuffix [for]="picker">
-                <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
-            </mat-datepicker-toggle>
-            <mat-datepicker #picker [disabled]="loading"></mat-datepicker>
-        </mat-form-field>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)" [disabled]="loading">
-            <mat-icon>arrow_forward</mat-icon>
-        </button>
-        <span class="chart-button-spacer"></span>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()" [disabled]="loading">
-            Today
-        </button>
+
+        <app-time-range [loading]="loading" [(timeSpan)]="timeSpan" [(date)]="date"></app-time-range>
     </header>
+
     <div id="chart" [chart]="chart"></div>
 </div>

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

@@ -1,27 +1,19 @@
-.chart-content {
+#refresh {
+    height: 36px;
+    top: 13px;
+}
+
+.content {
     display: flex;
     flex-flow: column;
     height: 100%;
-  }
+}
 
-  #chart {
-    flex: 1 1 auto;
-  }
-
-  .chart-header {
-    background-color: rgb(250, 250, 250);
+.header {
+    display: flex;
     padding: 0 20px;
-    flex: 0 0 auto;
-  }
+}
 
-  .chart-button-spacer {
-    margin-right: 20px;
-  }
-
-  .selected:after {
-    content: "";
-    display: block;
-    margin: 0 auto;
-    width: 100%;
-    border-bottom: 1px solid #673ab7;
-  }
+#chart {
+    flex: 1 1 auto;
+}

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { TimeSpan } from 'src/app/models/time-span';
 import { Chart } from 'angular-highcharts';
 import { SeriesLineOptions } from 'highcharts';
 import { HttpClient } from '@angular/common/http';
@@ -13,12 +14,6 @@ import HC_exporting from 'highcharts/modules/exporting';
 
 HC_exporting(Highcharts);
 
-enum TimeSpan {
-    Last24Hours,
-    Day,
-    Custom
-}
-
 @Component({
     selector: 'app-power-charts',
     templateUrl: './power-charts.component.html',
@@ -28,60 +23,42 @@ export class PowerChartsComponent implements OnInit {
 
     public chart: Chart;
     public loading = true;
-    public timeSpanItems: { [value: number]: string } = {};
-    public timeSpans: typeof TimeSpan = TimeSpan;
-    public maxDate: moment.Moment = moment().endOf('day');
 
-    private selectedTimeSpanValue: TimeSpan = TimeSpan.Last24Hours;
-    private selectedDateValue: moment.Moment = moment().startOf('day');
+    private timeSpanValue: TimeSpan = TimeSpan.Last24Hours;
+    private dateValue: moment.Moment = moment().startOf('day');
+
+    public get timeSpan(): TimeSpan {
+        return this.timeSpanValue;
+    }
+    public set timeSpan(value: TimeSpan) {
+        if (this.timeSpanValue === value) {
+            return;
+        }
+        this.timeSpanValue = value;
+        this.load();
+    }
+
+    public get date(): moment.Moment {
+        return this.dateValue;
+    }
+    public set date(value: moment.Moment) {
+        if (this.dateValue === value) {
+            return;
+        }
+        this.dateValue = value;
+        this.load();
+    }
 
     private timeInterval = 15;
 
     constructor(private httpClient: HttpClient) { }
 
     ngOnInit() {
-        this.timeSpanItems[TimeSpan.Last24Hours] = 'Last 24 hours';
-        this.timeSpanItems[TimeSpan.Day] = 'Day';
-
-        this.loadChart();
-    }
-
-    public get selectedTimeSpan() {
-        return this.selectedTimeSpanValue;
-    }
-
-    public set selectedTimeSpan(value) {
-        this.selectedTimeSpanValue = value;
-
-        this.loadChart();
-    }
-
-    public get selectedDate() {
-        return this.selectedDateValue;
-    }
-
-    public set selectedDate(value) {
-        this.selectedDateValue = value;
-
-        this.loadChart();
-    }
-
-    public handleDateArrowClick(value: number) {
-        this.selectedDate = moment(this.selectedDate).add(value, 'day');
-    }
-
-    public isSelectedDateToday(): boolean {
-        const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
-
-        return isToday;
-    }
-
-    public resetToToday() {
-        this.selectedDate = moment().startOf('day');
+        this.load();
     }
 
     public getSelectedDateDisplayString(): string {
-        return moment(this.selectedDate).format('LL');
+        return moment(this.date).format('LL');
     }
 
     private async loadPowerChart(start: moment.Moment, end: moment.Moment) {
@@ -109,15 +86,14 @@ export class PowerChartsComponent implements OnInit {
                 seriesData[2].data.push([date, dataElement.averageValue]);
             });
 
-            const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
-
             this.chart = new Chart({
                 chart: {
                     type: 'line',
-                    zoomType: 'x'
+                    zoomType: 'x',
+                    spacingTop: 20
                 },
                 title: {
-                    text: title
+                    text: ''
                 },
                 credits: {
                     enabled: true
@@ -185,7 +161,7 @@ export class PowerChartsComponent implements OnInit {
         });
     }
 
-    public loadChart() {
+    public load() {
         let start: moment.Moment;
         let end: moment.Moment;
 
@@ -195,7 +171,7 @@ export class PowerChartsComponent implements OnInit {
             this.chart.ref$.subscribe(o => o.showLoading());
         }
 
-        switch (this.selectedTimeSpan) {
+        switch (this.timeSpan) {
             case TimeSpan.Last24Hours: {
                 start = moment().subtract(24, 'hour');
                 end = moment();
@@ -204,8 +180,8 @@ export class PowerChartsComponent implements OnInit {
             }
 
             case TimeSpan.Day: {
-                start = moment(this.selectedDate).startOf('day');
-                end = moment(this.selectedDate).endOf('day');
+                start = moment(this.date).startOf('day');
+                end = moment(this.date).endOf('day');
 
                 break;
             }

Display/src/app/components/time-range/time-range.component.html

@@ -0,0 +1,27 @@
+<div class="content">
+    <header class="header">
+        <mat-form-field>
+            <mat-select [(value)]="timeSpan" [disabled]="loading">
+                <mat-option *ngFor="let item of timeSpanItems | keyvalue" [value]="+item.key">{{ item.value }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+        <span class="button-spacer"></span>
+        <button mat-button *ngIf="timeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)" [disabled]="loading">
+            <mat-icon>arrow_back</mat-icon>
+        </button>
+        <mat-form-field *ngIf="timeSpan === timeSpans.Day">
+            <input matInput [matDatepicker]="picker" [(ngModel)]="date" disabled [max]="maxDate">
+            <mat-datepicker-toggle matSuffix [for]="picker">
+                <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
+            </mat-datepicker-toggle>
+            <mat-datepicker #picker [disabled]="loading"></mat-datepicker>
+        </mat-form-field>
+        <button mat-button *ngIf="timeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)" [disabled]="loading">
+            <mat-icon>arrow_forward</mat-icon>
+        </button>
+        <span class="button-spacer"></span>
+        <button mat-button *ngIf="timeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()" [disabled]="loading">
+            Today
+        </button>
+    </header>
+</div>

Display/src/app/components/time-range/time-range.component.scss

@@ -0,0 +1,15 @@
+.content {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+}
+
+.header {
+    background-color: rgb(250, 250, 250);
+    padding: 0 20px;
+    flex: 0 0 auto;
+}
+
+.button-spacer {
+    margin-right: 20px;
+}

Display/src/app/components/time-range/time-range.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimeRangeComponent } from './time-range.component';
+
+describe('TimeRangeComponent', () => {
+    let component: TimeRangeComponent;
+    let fixture: ComponentFixture<TimeRangeComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [TimeRangeComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TimeRangeComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

Display/src/app/components/time-range/time-range.component.ts

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { TimeSpan } from 'src/app/models/time-span';
+
+import * as moment from 'moment';
+
+@Component({
+    selector: 'app-time-range',
+    templateUrl: './time-range.component.html',
+    styleUrls: ['./time-range.component.scss']
+})
+export class TimeRangeComponent implements OnInit {
+
+    @Input()
+    public loading: boolean;
+
+    private timeSpanValue: TimeSpan;
+
+    @Input()
+    public set timeSpan(val: TimeSpan) {
+        this.timeSpanChange.emit(val);
+        this.timeSpanValue = val;
+    }
+
+    public get timeSpan() {
+        return this.timeSpanValue;
+    }
+
+    @Output()
+    public timeSpanChange: EventEmitter<TimeSpan> = new EventEmitter<TimeSpan>();
+
+    private dateValue: moment.Moment;
+
+    @Input()
+    public set date(val: moment.Moment) {
+        this.dateChange.emit(val);
+        this.dateValue = val;
+    }
+
+    public get date() {
+        return this.dateValue;
+    }
+
+    @Output()
+    public dateChange: EventEmitter<moment.Moment> = new EventEmitter<moment.Moment>();
+
+    public timeSpanItems: { [value: number]: string } = {
+        [TimeSpan.Last24Hours]: 'Last 24 hours',
+        [TimeSpan.Day]: 'Day'
+    };
+
+    public timeSpans: typeof TimeSpan = TimeSpan;
+    public maxDate: moment.Moment = moment().endOf('day');
+
+    constructor() { }
+
+    ngOnInit(): void { }
+
+    public isSelectedDateToday(): boolean {
+        const isToday = moment(this.date).startOf('day').isSame(moment().startOf('day'));
+
+        return isToday;
+    }
+
+    public resetToToday() {
+        this.date = moment().startOf('day');
+    }
+
+    public getSelectedDateDisplayString(): string {
+        return moment(this.date).format('LL');
+    }
+
+    public handleDateArrowClick(value: number) {
+        this.date = moment(this.date).add(value, 'day');
+    }
+}

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

@@ -1,40 +1,19 @@
 <mat-spinner *ngIf="loading && !chart" class="content-spinner" strokeWidth="5"></mat-spinner>
-<div class="chart-content">
-    <header class="chart-header">
-        <button mat-button (click)="loadChart()" [disabled]="loading">
+
+<div class="content">
+    <header class="header">
+        <button class="header-button" mat-button (click)="load()" [disabled]="loading">
             <mat-icon>refresh</mat-icon>
         </button>
-        <button mat-button (click)="chartTypeChange(ChartType.Weather)" [class.selected]="selectedChartType === ChartType.Weather" [disabled]="loading">
+        <button class="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">
+        <button class="header-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>
-            </mat-select>
-        </mat-form-field>
-        <span class="chart-button-spacer"></span>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day" (click)="handleDateArrowClick(-1)" [disabled]="loading">
-            <mat-icon>arrow_back</mat-icon>
-        </button>
-        <mat-form-field *ngIf="selectedTimeSpan === timeSpans.Day">
-            <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" disabled [max]="maxDate">
-            <mat-datepicker-toggle matSuffix [for]="picker">
-                <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>
-            </mat-datepicker-toggle>
-            <mat-datepicker #picker [disabled]="loading"></mat-datepicker>
-        </mat-form-field>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="handleDateArrowClick(1)" [disabled]="loading">
-            <mat-icon>arrow_forward</mat-icon>
-        </button>
-        <span class="chart-button-spacer"></span>
-        <button mat-button *ngIf="selectedTimeSpan === timeSpans.Day && !isSelectedDateToday()" (click)="resetToToday()" [disabled]="loading">
-            Today
-        </button>
+
+        <app-time-range id="time-range" [loading]="loading" [(timeSpan)]="timeSpan" [(date)]="date"></app-time-range>
     </header>
+
     <div id="chart" [chart]="chart"></div>
 </div>

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

@@ -1,27 +1,31 @@
-.chart-content {
-  display: flex;
-  flex-flow: column;
-  height: 100%;
+.header-button {
+    height: 36px;
+    top: 13px;
+}
+
+.content {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    padding: 0 20px;
 }
 
 #chart {
-  flex: 1 1 auto;
-}
-
-.chart-header {
-  background-color: rgb(250, 250, 250);
-  padding: 0 20px;
-  flex: 0 0 auto;
-}
-
-.chart-button-spacer {
-  margin-right: 20px;
+    flex: 1 1 auto;
 }
 
 .selected:after {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  width: 100%;
-  border-bottom: 1px solid #673ab7;
+    content: "";
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    border-bottom: 1px solid #673ab7;
+}
+
+#time-range {
+    padding-left: 20px;
 }

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

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { TimeSpan } from 'src/app/models/time-span';
 import { Chart } from 'angular-highcharts';
 import { SeriesLineOptions, SeriesWindbarbOptions, SeriesColumnOptions } 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 { WeatherReadingGrouped } from 'src/app/models/weather/weather-reading-grouped';
+import { WindHistoryGrouped } from 'src/app/models/weather/wind-history-grouped';
 
 import * as moment from 'moment';
 
@@ -13,12 +14,6 @@ import HC_windbarb from 'highcharts/modules/windbarb';
 HC_exporting(Highcharts);
 HC_windbarb(Highcharts);
 
-enum TimeSpan {
-    Last24Hours,
-    Day,
-    Custom
-}
-
 enum ChartType {
     Weather,
     Wind
@@ -33,62 +28,41 @@ export class WeatherChartsComponent implements OnInit {
 
     public chart: Chart;
     public loading = true;
-    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');
+    private timeSpanValue: TimeSpan = TimeSpan.Last24Hours;
+    private dateValue: moment.Moment = moment().startOf('day');
+
+    public get timeSpan(): TimeSpan {
+        return this.timeSpanValue;
+    }
+    public set timeSpan(value: TimeSpan) {
+        if (this.timeSpanValue === value) {
+            return;
+        }
+        this.timeSpanValue = value;
+        this.load();
+    }
+
+    public get date(): moment.Moment {
+        return this.dateValue;
+    }
+    public set date(value: moment.Moment) {
+        if (this.dateValue === value) {
+            return;
+        }
+        this.dateValue = value;
+        this.load();
+    }
 
     private timeInterval = 15;
 
     constructor(private httpClient: HttpClient) { }
 
     ngOnInit() {
-        this.timeSpanItems[TimeSpan.Last24Hours] = 'Last 24 hours';
-        this.timeSpanItems[TimeSpan.Day] = 'Day';
-
-        this.loadChart();
-    }
-
-    public get selectedTimeSpan() {
-        return this.selectedTimeSpanValue;
-    }
-
-    public set selectedTimeSpan(value) {
-        this.selectedTimeSpanValue = value;
-
-        this.loadChart();
-    }
-
-    public get selectedDate() {
-        return this.selectedDateValue;
-    }
-
-    public set selectedDate(value) {
-        this.selectedDateValue = value;
-
-        this.loadChart();
-    }
-
-    public handleDateArrowClick(value: number) {
-        this.selectedDate = moment(this.selectedDate).add(value, 'day');
-    }
-
-    public isSelectedDateToday(): boolean {
-        const isToday = moment(this.selectedDate).startOf('day').isSame(moment().startOf('day'));
-
-        return isToday;
-    }
-
-    public resetToToday() {
-        this.selectedDate = moment().startOf('day');
-    }
-
-    public getSelectedDateDisplayString(): string {
-        return moment(this.selectedDate).format('LL');
+        this.load();
     }
 
     public chartTypeChange(value: ChartType) {
@@ -98,7 +72,7 @@ export class WeatherChartsComponent implements OnInit {
 
         this.selectedChartType = value;
 
-        this.loadChart();
+        this.load();
     }
 
     private loadWeatherChart(start: moment.Moment, end: moment.Moment) {
@@ -125,14 +99,13 @@ export class WeatherChartsComponent implements OnInit {
                 seriesData[4].data.push([date, dataElement.rainTotal]);
             });
 
-            const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
-
             this.chart = new Chart({
                 chart: {
-                    zoomType: 'x'
+                    zoomType: 'x',
+                    spacingTop: 20
                 },
                 title: {
-                    text: title
+                    text: ''
                 },
                 credits: {
                     enabled: true
@@ -253,14 +226,13 @@ export class WeatherChartsComponent implements OnInit {
                 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'
+                    zoomType: 'x',
+                    spacingTop: 20
                 },
                 title: {
-                    text: title
+                    text: ''
                 },
                 credits: {
                     enabled: true
@@ -319,7 +291,7 @@ export class WeatherChartsComponent implements OnInit {
         });
     }
 
-    public loadChart() {
+    public load() {
         let start: moment.Moment;
         let end: moment.Moment;
 
@@ -329,7 +301,7 @@ export class WeatherChartsComponent implements OnInit {
             this.chart.ref$.subscribe(o => o.showLoading());
         }
 
-        switch (this.selectedTimeSpan) {
+        switch (this.timeSpan) {
             case TimeSpan.Last24Hours: {
                 start = moment().subtract(24, 'hour');
                 end = moment();
@@ -338,8 +310,8 @@ export class WeatherChartsComponent implements OnInit {
             }
 
             case TimeSpan.Day: {
-                start = moment(this.selectedDate).startOf('day');
-                end = moment(this.selectedDate).endOf('day');
+                start = moment(this.date).startOf('day');
+                end = moment(this.date).endOf('day');
 
                 break;
             }

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

@@ -60,7 +60,7 @@
                     Wind
                 </td>
                 <td>
-                    {{ latestReading.WindSpeed.toFixed(2) }} {{ latestReading.WindDirection }}
+                    {{ latestReading.WindSpeed.toFixed(2) }} mph {{ latestReading.WindDirection }}
                 </td>
             </tr>
             <tr>

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

@@ -0,0 +1,134 @@
+<mat-spinner *ngIf="loading" class="content-spinner" strokeWidth="5"></mat-spinner>
+
+<div class="content">
+    <header class="header">
+        <button id="refresh" mat-button (click)="load()" [disabled]="loading">
+            <mat-icon>refresh</mat-icon>
+        </button>
+
+        <app-time-range [loading]="loading" [(timeSpan)]="timeSpan" [(date)]="date"></app-time-range>
+    </header>
+
+    <div class="body">
+        <div *ngIf="loading">
+            Loading...
+        </div>
+
+        <div *ngIf="!loading && weatherAggregates === null">
+            No Data
+        </div>
+
+        <div *ngIf="!loading && weatherAggregates !== null">
+            <table>
+                <tr>
+                    <th>
+
+                    </th>
+                    <th>
+                        Minimum
+                    </th>
+                    <th>
+                        Average
+                    </th>
+                    <th>
+                        Maximum
+                    </th>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Temperature
+                    </td>
+                    <td>
+                        {{ weatherAggregates.temperature.min.toFixed(2) }}°F
+                    </td>
+                    <td>
+                        {{ weatherAggregates.temperature.average.toFixed(2) }}°F
+                    </td>
+                    <td>
+                        {{ weatherAggregates.temperature.max.toFixed(2) }}°F
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Humidity
+                    </td>
+                    <td>
+                        {{ weatherAggregates.humidity.min.toFixed(2) }}%
+                    </td>
+                    <td>
+                        {{ weatherAggregates.humidity.average.toFixed(2) }}%
+                    </td>
+                    <td>
+                        {{ weatherAggregates.humidity.max.toFixed(2) }}%
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Pressure
+                    </td>
+                    <td>
+                        {{ (weatherAggregates.pressure.min / 33.864 / 100).toFixed(2) }}"
+                    </td>
+                    <td>
+                        {{ (weatherAggregates.pressure.average / 33.864 / 100).toFixed(2) }}"
+                    </td>
+                    <td>
+                        {{ (weatherAggregates.pressure.max / 33.864 / 100).toFixed(2) }}"
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Light
+                    </td>
+                    <td>
+                        {{ weatherAggregates.light.min.toFixed(2) }} lx
+                    </td>
+                    <td>
+                        {{ weatherAggregates.light.average.toFixed(2) }} lx
+                    </td>
+                    <td>
+                        {{ weatherAggregates.light.max.toFixed(2) }} lx
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Wind Speed
+                    </td>
+                    <td>
+                        {{ weatherAggregates.windSpeed.min.toFixed(2) }} mph
+                    </td>
+                    <td>
+                        {{ weatherAggregates.windSpeed.average.toFixed(2) }} mph
+                    </td>
+                    <td>
+                        {{ weatherAggregates.windSpeed.max.toFixed(2) }} mph
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Wind Direction
+                    </td>
+                    <td>
+                    </td>
+                    <td>
+                        {{ weatherAggregates.windDirectionAverage }}
+                    </td>
+                    <td>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="weather-summary-header">
+                        Rain
+                    </td>
+                    <td>
+                    </td>
+                    <td>
+                    </td>
+                    <td>
+                        {{ weatherAggregates.rainTotal.toFixed(2) }}"
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,38 @@
+#refresh {
+    height: 36px;
+    top: 13px;
+}
+
+.content {
+    height: 100%;
+}
+
+.header {
+    display: flex;
+    padding: 0 20px;
+}
+
+.body {
+    padding: 0 20px;
+    font-size: 14px;
+}
+
+.button-spacer {
+    margin-right: 20px;
+}
+
+.weather-summary-header {
+    font-weight: 500;
+    text-align: right;
+    padding-right: 20px;
+}
+
+td {
+    padding-bottom: 4px;
+}
+
+th {
+    font-weight: 500;
+    padding-right: 30px;
+    padding-bottom: 4px;
+}

Display/src/app/components/weather/summary/weather-summary.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WeatherSummaryComponent } from './weather-summary.component';
+
+describe('SummaryComponent', () => {
+    let component: WeatherSummaryComponent;
+    let fixture: ComponentFixture<WeatherSummaryComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [WeatherSummaryComponent]
+        })
+            .compileComponents();
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(WeatherSummaryComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import { TimeSpan } from 'src/app/models/time-span';
+import { WeatherService } from 'src/app/services/weather/weather.service';
+import { WeatherAggregates } from 'src/app/models/weather/weather-aggregates';
+
+import * as moment from 'moment';
+
+@Component({
+    selector: 'app-weather-summary',
+    templateUrl: './weather-summary.component.html',
+    styleUrls: ['./weather-summary.component.scss']
+})
+export class WeatherSummaryComponent implements OnInit {
+
+    public loading = true;
+    public weatherAggregates: WeatherAggregates = null;
+
+    private timeSpanValue: TimeSpan = TimeSpan.Last24Hours;
+    private dateValue: moment.Moment = moment().startOf('day');
+
+    public get timeSpan(): TimeSpan {
+        return this.timeSpanValue;
+    }
+    public set timeSpan(value: TimeSpan) {
+        if (this.timeSpanValue === value) {
+            return;
+        }
+        this.timeSpanValue = value;
+        this.load();
+    }
+
+    public get date(): moment.Moment {
+        return this.dateValue;
+    }
+    public set date(value: moment.Moment) {
+        if (this.dateValue === value) {
+            return;
+        }
+        this.dateValue = value;
+        this.load();
+    }
+
+    constructor(private weatherService: WeatherService) { }
+
+    ngOnInit(): void {
+        this.load();
+    }
+
+    public async load() {
+        let start: moment.Moment;
+        let end: moment.Moment;
+
+        this.loading = true;
+
+        switch (this.timeSpan) {
+            case TimeSpan.Last24Hours: {
+                start = moment().subtract(24, 'hour');
+                end = moment();
+
+                break;
+            }
+
+            case TimeSpan.Day: {
+                start = moment(this.date).startOf('day');
+                end = moment(this.date).endOf('day');
+
+                break;
+            }
+
+            default: {
+                return;
+            }
+        }
+
+        this.weatherAggregates = await this.weatherService.getReadingAggregate(start, end);
+
+        this.loading = false;
+    }
+}

Display/src/app/models/time-span.ts

@@ -0,0 +1,5 @@
+export enum TimeSpan {
+    Last24Hours,
+    Day,
+    Custom
+}

Display/src/app/models/weather/weather-aggregates.ts

@@ -0,0 +1,15 @@
+export interface WeatherAggregates {
+    humidity: WeatherAggregate;
+    temperature: WeatherAggregate;
+    pressure: WeatherAggregate;
+    light: WeatherAggregate;
+    windSpeed: WeatherAggregate;
+    windDirectionAverage: number;
+    rainTotal: number;
+}
+
+export interface WeatherAggregate {
+    min: number;
+    max: number;
+    average: number;
+}

Display/src/app/services/weather/weather.service.ts

@@ -4,9 +4,10 @@ import { HubConnectionBuilder, HubConnection } from '@aspnet/signalr';
 import { WeatherUpdate } from 'src/app/models/weather/weather-update';
 import { WeatherValue } from 'src/app/models/weather/weather-value';
 import { HttpClient } from '@angular/common/http';
+import { WeatherValueType } from 'src/app/models/weather/weather-value-type';
+import { WeatherAggregates } from 'src/app/models/weather/weather-aggregates';
 
 import * as moment from 'moment';
-import { WeatherValueType } from 'src/app/models/weather/weather-value-type';
 
 @Injectable({
     providedIn: 'root'
@@ -39,4 +40,13 @@ export class WeatherService {
 
         return data;
     }
+
+    async getReadingAggregate(start: moment.Moment, end: moment.Moment): Promise<WeatherAggregates> {
+        const startString = start.toISOString();
+        const endString = end.toISOString();
+
+        const data = await this.httpClient.get<WeatherAggregates>(`/api/weather/readings/aggregate?start=${startString}&end=${endString}`).toPromise();
+
+        return data;
+    }
 }