Add power chart

Display/proxy.conf.json

@@ -5,6 +5,12 @@
         "logLevel": "debug",
         "changeOrigin": true
     },
+    "/api/power": {
+        "target": "http://172.23.10.3",
+        "secure": false,
+        "logLevel": "debug",
+        "changeOrigin": true
+    },
     "/api/hub": {
         "target": "ws://172.23.10.3:80",
         "ws": true

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

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 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';
 
 const routes: Routes = [
     {
@@ -11,6 +12,10 @@ const routes: Routes = [
     {
         path: 'weather-charts',
         component: WeatherChartsComponent
+    },
+    {
+        path: 'power-charts',
+        component: PowerChartsComponent
     }
 ];
 

Display/src/app/app.module.ts

@@ -22,7 +22,8 @@ import { DashboardComponent } from './components/dashboard/dashboard.component';
 import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
 import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
 import { AlmanacComponent } from './components/weather/almanac/almanac.component';
-import { PowerComponent } from './components/power/power.component';
+import { PowerComponent } from './components/power/current/power.component';
+import { PowerChartsComponent } from './components/power/charts/power-charts.component';
 
 const config: SocketIoConfig = { url: '/', options: {} };
 
@@ -35,7 +36,8 @@ const config: SocketIoConfig = { url: '/', options: {} };
         WeatherChartsComponent,
         WeatherCurrentComponent,
         AlmanacComponent,
-        PowerComponent
+        PowerComponent,
+        PowerChartsComponent
     ],
     imports: [
         BrowserModule,

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

@@ -24,6 +24,15 @@
                     Weather Charts
                 </span>
             </a>
+
+            <a routerLink="/power-charts" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <mat-icon matListIcon class="nav-icon">
+                    settings_power
+                </mat-icon>
+                <span class="nav-caption">
+                    Power Charts
+                </span>
+            </a>
         </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>

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

@@ -0,0 +1,33 @@
+<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">
+            <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>
+    </header>
+    <div id="chart" [chart]="chart"></div>
+</div>

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

@@ -0,0 +1,27 @@
+.chart-content {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+  }
+
+  #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;
+  }
+
+  .selected:after {
+    content: "";
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    border-bottom: 1px solid #673ab7;
+  }

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

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

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

@@ -0,0 +1,198 @@
+import { Component, OnInit } from '@angular/core';
+import { Chart } from 'angular-highcharts';
+import { SeriesLineOptions, SeriesWindbarbOptions } from 'highcharts';
+import { HttpClient } from '@angular/common/http';
+import { PowerStatusGrouped } from '../../../models/power/power-status-grouped';
+
+import * as moment from 'moment';
+
+import * as Highcharts from 'highcharts';
+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',
+    styleUrls: ['./power-charts.component.scss']
+})
+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');
+
+    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');
+    }
+
+    private loadPowerChart(start: moment.Moment, end: moment.Moment) {
+        const startString = start.toISOString();
+        const endString = end.toISOString();
+
+        const request = this.httpClient.get<PowerStatusGrouped[]>(`/api/power/status/history-grouped?start=${startString}&end=${endString}&bucketMinutes=5`);
+
+        request.subscribe(data => {
+            const seriesData: Array<SeriesLineOptions> = [];
+
+            seriesData.push({ name: 'Generation', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' W' } } as SeriesLineOptions);
+            seriesData.push({ name: 'Consumption', data: [], yAxis: 0, marker: { enabled: false }, tooltip: { valueSuffix: ' W' } } as SeriesLineOptions);
+
+            data.forEach(dataElement => {
+                const date = Date.parse(dataElement.bucket);
+                seriesData[0].data.push([date, dataElement.averageGeneration < 0 ? 0 : dataElement.averageGeneration]);
+                seriesData[1].data.push([date, dataElement.averageConsumption < 0 ? 0 : dataElement.averageConsumption]);
+            });
+
+            const title = this.selectedTimeSpan === TimeSpan.Last24Hours ? this.timeSpanItems[TimeSpan.Last24Hours] : this.getSelectedDateDisplayString();
+
+            this.chart = new Chart({
+                chart: {
+                    type: 'line',
+                    zoomType: 'x'
+                },
+                title: {
+                    text: title
+                },
+                credits: {
+                    enabled: true
+                },
+                xAxis: {
+                    type: 'datetime',
+                    dateTimeLabelFormats: {
+                        millisecond: '%H:%M:%S.%L',
+                        second: '%H:%M:%S',
+                        minute: '%l:%M %P',
+                        hour: '%l:%M %P',
+                        day: '%b %e',
+                        week: '%e. %b',
+                        month: '%b \'%y',
+                        year: '%Y'
+                    }
+                },
+                yAxis: [
+                    {
+                        labels: {
+                            format: '{value} W',
+                        },
+                        title: {
+                            text: 'Power'
+                        }
+                    }
+                ],
+                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;
+            }
+        }
+
+        this.loadPowerChart(start, end);
+    }
+}

Display/src/app/components/power/current/power.component.html

@@ -9,7 +9,7 @@
                     Generation
                 </td>
                 <td>
-                    {{ latestStatus.Generation < 0 ? 0 : latestStatus.Generation }}
+                    {{ latestStatus.Generation < 0 ? 0 : latestStatus.Generation }} W
                 </td>
             </tr>
             <tr>
@@ -17,7 +17,7 @@
                     Consumption
                 </td>
                 <td>
-                    {{ latestStatus.Consumption < 0 ? 0 : latestStatus.Consumption }}
+                    {{ latestStatus.Consumption < 0 ? 0 : latestStatus.Consumption }} W
                 </td>
             </tr>
         </table>

Display/src/app/components/power/current/power.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { PowerService } from '../../services/power/power.service';
+import { PowerService } from 'src/app/services/power/power.service';
-import { PowerStatus } from '../../models/power/power-status';
+import { PowerStatus } from 'src/app/models/power/power-status';
 
 @Component({
     selector: 'app-power',

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

@@ -1,6 +1,9 @@
 <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">
+            <mat-icon>refresh</mat-icon>
+        </button>
         <button mat-button (click)="chartTypeChange(ChartType.Weather)" [class.selected]="selectedChartType === ChartType.Weather" [disabled]="loading">
             Common
         </button>

Display/src/app/models/power/power-status-grouped.ts

@@ -0,0 +1,5 @@
+export class PowerStatusGrouped {
+    bucket: string;
+    averageGeneration: number;
+    averageConsumption: number;
+}