Move pressure trend into current display

Display/src/app/app.module.ts

@@ -21,7 +21,6 @@ import { LaundryComponent } from './components/laundry/laundry.component';
 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 { PressureTrendComponent } from './components/weather/pressure-trend/pressure-trend.component';
 import { AlmanacComponent } from './components/weather/almanac/almanac.component';
 
 const config: SocketIoConfig = { url: '/', options: {} };
@@ -34,7 +33,6 @@ const config: SocketIoConfig = { url: '/', options: {} };
         DashboardComponent,
         WeatherChartsComponent,
         WeatherCurrentComponent,
-        PressureTrendComponent,
         AlmanacComponent
     ],
     imports: [

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

@@ -31,16 +31,6 @@
             </div>
         </gridster-item>
         <gridster-item [item]="dashboardLayout.layout[2]">
-            <div class="dashboard-item">
-                <div class="dashboard-item-header">
-                    Pressure Trend
-                </div>
-                <div class="dashboard-item-content">
-                    <app-pressure-trend></app-pressure-trend>
-                </div>
-            </div>
-        </gridster-item>
-        <gridster-item [item]="dashboardLayout.layout[3]">
             <div class="dashboard-item">
                 <div class="dashboard-item-header">
                     Almanac

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

@@ -13,12 +13,11 @@ export class DashboardComponent implements OnInit {
     public locked = true;
 
     private defaultLayout: DashboardLayout = {
-        version: 2,
+        version: 3,
         layout: [
             { cols: 3, rows: 2, y: 0, x: 0 },
             { cols: 2, rows: 2, y: 0, x: 3 },
-            { cols: 2, rows: 2, y: 0, x: 5 },
+            { cols: 3, rows: 2, y: 0, x: 5 }
-            { cols: 3, rows: 2, y: 0, x: 7 }
         ]
     };
 

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

@@ -27,6 +27,8 @@
                 </td>
                 <td>
                     {{ (latestReading.Pressure / 33.864 / 100).toFixed(2) }}"
+
+                    <span *ngIf="pressureDifference !== null" class="pressure-trend-arrow" [ngClass]="rotationClass()">➜</span>
                 </td>
             </tr>
             <tr>

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

@@ -8,3 +8,26 @@
   text-align: right;
   padding-right: 10px;
 }
+
+.pressure-trend-arrow {
+  display: inline-block;
+  position: relative;
+  left: 6px;
+  transform: scale(1.25);
+}
+
+.down-high {
+  transform: rotate(60deg) scale(1.25);
+}
+
+.down-low {
+  transform: rotate(25deg) scale(1.25);
+}
+
+.up-high {
+  transform: rotate(-60deg) scale(1.25);
+}
+
+.up-low {
+  transform: rotate(-25deg) scale(1.25);
+}

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

@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { WeatherReading } from '../../../models/weather/weather-reading';
+import { WeatherReading } from 'src/app/models/weather/weather-reading';
-import { WeatherService } from '../../../services/weather/weather.service';
+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-weather-current',
@@ -8,12 +13,58 @@ import { WeatherService } from '../../../services/weather/weather.service';
     styleUrls: ['./weather-current.component.scss']
 })
 export class WeatherCurrentComponent implements OnInit {
-
+    public pressureDifference: number = null;
     public latestReading: WeatherReading;
 
     constructor(private weatherService: WeatherService) { }
 
     ngOnInit() {
+        this.update();
+
+        setInterval(() => this.update(), 60000);
+
         this.weatherService.getLatestReading().subscribe(r => this.latestReading = r);
     }
+
+    async update() {
+        this.pressureDifference = null;
+
+        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: [number, number][] = [];
+
+        weatherData.forEach((weatherValue: WeatherValue) => {
+            const point: [number, number] = [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';
+        }
+    }
 }

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

@@ -1,6 +0,0 @@
-<div class="pressure-trend-container pressure-trend-loading" *ngIf="pressureDifference === null">
-    Loading...
-</div>
-<div class="pressure-trend-container" *ngIf="pressureDifference !== null">
-    <mat-icon id="pressure-arrow" [ngClass]="rotationClass()">arrow_right_alt</mat-icon>
-</div>

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

@@ -1,31 +0,0 @@
-.pressure-trend-container {
-  height: calc(100% - 20px);
-}
-
-.pressure-trend-loading {
-    font-size: 14px;
-    padding: 10px;
-}
-
-#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

@@ -1,25 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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() {
-        this.pressureDifference = null;
-
-        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: [number, number][] = [];
-
-        weatherData.forEach((weatherValue: WeatherValue) => {
-            const point: [number, number] = [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';
-        }
-    }
-}