Add dashboard pressure trend arrow

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

@@ -16,5 +16,8 @@
         <gridster-item [item]="dashboard[1]">
             <app-laundry></app-laundry>
         </gridster-item>
+        <gridster-item [item]="dashboard[2]">
+            <app-pressure-trend></app-pressure-trend>
+        </gridster-item>
     </gridster>
 </div>

Display/src/app/components/dashboard/dashboard.component.ts

@@ -62,7 +62,8 @@ export class DashboardComponent implements OnInit {
 
         const defaultLayout = [
             { cols: 3, rows: 2, y: 0, x: 0 },
-            { cols: 2, rows: 1, y: 0, x: 3 }
+            { cols: 2, rows: 1, y: 0, x: 3 },
+            { cols: 1, rows: 1, y: 0, x: 5 }
         ];
 
         if (savedLayout == null) {

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

@@ -135,7 +135,7 @@ export class WeatherChartsComponent implements OnInit {
             this.chart = new Chart({
                 chart: {
                     type: 'line',
-                    zoomType: "x"
+                    zoomType: 'x'
                 },
                 title: {
                     text: title

Display/src/app/components/weather/pressure-trend/pressure-trend.component.html

@@ -0,0 +1 @@
+<mat-icon id="pressure-arrow" *ngIf="pressureDifference !== null" [ngClass]="rotationClass()">arrow_right_alt</mat-icon>

Display/src/app/components/weather/pressure-trend/pressure-trend.component.scss

@@ -0,0 +1,22 @@
+#pressure-arrow {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(3);
+}
+
+.down-high {
+  transform: translate(-50%, -50%) scale(3) rotate(60deg) !important;
+}
+
+.down-low {
+  transform: translate(-50%, -50%) scale(3) rotate(25deg) !important;
+}
+
+.up-high {
+  transform: translate(-50%, -50%) scale(3) rotate(-60deg) !important;
+}
+
+.up-low {
+  transform: translate(-50%, -50%) scale(3) rotate(-25deg) !important;
+}

Display/src/app/components/weather/pressure-trend/pressure-trend.component.spec.ts

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

Display/src/app/components/weather/pressure-trend/pressure-trend.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from '@angular/core';
+import { WeatherService } from 'src/app/services/weather/weather.service';
+import { WeatherValueType } from 'src/app/models/weather/weather-value-type';
+import { WeatherValue } from 'src/app/models/weather/weather-value';
+
+import * as moment from 'moment';
+import * as regression from 'regression';
+
+@Component({
+    selector: 'app-pressure-trend',
+    templateUrl: './pressure-trend.component.html',
+    styleUrls: ['./pressure-trend.component.scss']
+})
+export class PressureTrendComponent implements OnInit {
+    public pressureDifference: number = null;
+
+    constructor(private weatherService: WeatherService) { }
+
+    ngOnInit() {
+        this.update();
+
+        setInterval(this.update, 60000);
+    }
+
+    async update() {
+        const end: moment.Moment = moment();
+        const start: moment.Moment = moment(end).subtract(3, 'hours');
+
+        const weatherData = await this.weatherService.getReadingValueHistory(WeatherValueType.Pressure, start, end);
+
+        if (!weatherData) {
+            return;
+        }
+
+        const points: Array<Array<number>> = [];
+
+        weatherData.forEach((weatherValue: WeatherValue) => {
+            const point = [moment(weatherValue.timestamp).unix(), weatherValue.value / 100];
+            points.push(point);
+        });
+
+        const result = regression.linear(points, { precision: 10 });
+
+        const regressionPoints = result.points;
+
+        this.pressureDifference = regressionPoints[regressionPoints.length - 1][1] - regressionPoints[0][1];
+    }
+
+    rotationClass(): string {
+        if (!this.pressureDifference) {
+            return '';
+        } else if (Math.abs(this.pressureDifference) <= 1.0) {
+            return '';
+        } else if (this.pressureDifference > 1.0 && this.pressureDifference <= 2.0) {
+            return 'up-low';
+        } else if (this.pressureDifference > 2.0) {
+            return 'up-high';
+        } else if (this.pressureDifference < -1.0 && this.pressureDifference >= -2.0) {
+            return 'down-low';
+        } else if (this.pressureDifference < -2.0) {
+            return 'down-high';
+        }
+    }
+}