feat: integrated visualization of cropsar

Author: JanssenBrm

src/app/models/vineyard.model.ts

@@ -2,6 +2,10 @@ import { Variety } from './variety.model';
 import { Polygon } from 'ol/geom/Polygon';
 import { Action } from './action.model';
 
+export interface TimeSeriesEntry {
+  date: moment.Moment;
+  value: number;
+}
 export interface MeteoStatEntry {
   date: moment.Moment;
   tavg: number;
@@ -16,6 +20,9 @@ export interface MeteoStatEntry {
   tsun: number;
 }
 
+export interface TimeSeriesStats {
+  data: TimeSeriesEntry[];
+}
 export interface MeteoStats {
   data: MeteoStatEntry[];
 }

src/app/services/color.service.ts

@@ -13,6 +13,7 @@ export enum COLOR {
   STATION_GDD = '#00ef00',
   STATION_SUNHOURS = '#efbf00',
   STATION_HUMIDITY = '#044ce8',
+  NDVI = '#409b00',
 }
 
 @Injectable({

src/app/services/statistics.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { AngularFirestore } from '@angular/fire/firestore';
 import { BehaviorSubject } from 'rxjs';
 import { Action } from '../models/action.model';
-import { MeteoStatEntry, MeteoStats, Vineyard } from '../models/vineyard.model';
+import { MeteoStatEntry, MeteoStats, TimeSeriesEntry, TimeSeriesStats, Vineyard } from '../models/vineyard.model';
 import { map } from 'rxjs/operators';
 import * as moment from 'moment/moment';
 import { SeasonsService } from './seasons.service';
@@ -13,23 +13,48 @@ import { SeasonsService } from './seasons.service';
 export class StatisticsService {
   private _meteoStats: BehaviorSubject<MeteoStatEntry[]>;
 
+  private _ndviStats: BehaviorSubject<TimeSeriesEntry[]>;
+
   private BASE_TEMP = 10.0;
 
   constructor(private fireStore: AngularFirestore, private seasonService: SeasonsService) {
     this._meteoStats = new BehaviorSubject<MeteoStatEntry[]>([]);
+    this._ndviStats = new BehaviorSubject<TimeSeriesEntry[]>([]);
   }
 
-  private getVineyardMeteoCollectionPath(vineyard: Vineyard): string {
+  private getVineyardStatsCollectionPath(vineyard: Vineyard): string {
     return `users/${vineyard.owner}/vineyards/${vineyard.id}/stats`;
   }
 
   public getMeteoListener(): BehaviorSubject<MeteoStatEntry[]> {
     return this._meteoStats;
   }
 
+  public getNDVIListener(): BehaviorSubject<TimeSeriesEntry[]> {
+    return this._ndviStats;
+  }
+
+  public getNDVIStats(vineyard: Vineyard): void {
+    this.fireStore
+      .collection(this.getVineyardStatsCollectionPath(vineyard))
+      .doc('cropsar')
+      .snapshotChanges()
+      .pipe(
+        map((data) => (data.payload.data() as TimeSeriesStats)?.data || []),
+        map((entries: TimeSeriesEntry[]) =>
+          entries.map((e: TimeSeriesEntry) => ({
+            ...e,
+            date: moment(e.date),
+            value: Math.ceil(e.value * 100) / 100,
+          }))
+        )
+      )
+      .subscribe((entries: TimeSeriesEntry[]) => this._ndviStats.next(entries));
+  }
+
   public getMeteoStats(vineyard: Vineyard): void {
     this.fireStore
-      .collection(this.getVineyardMeteoCollectionPath(vineyard))
+      .collection(this.getVineyardStatsCollectionPath(vineyard))
       .doc('meteo')
       .snapshotChanges()
       .pipe(

src/app/vineyeard-view/statistics/statistics.component.ts

@@ -3,12 +3,10 @@ import { LoadingController, Platform } from '@ionic/angular';
 import { ActionType, BBCHAction, BrixAction } from './../../models/action.model';
 import { STATS_OPTIONS } from './../../conf/statistics.config';
 import { StatisticsService } from './../../services/statistics.service';
-import { VineyardService } from './../../services/vineyard.service';
-import { MeteoStatEntry, Vineyard } from './../../models/vineyard.model';
+import { MeteoStatEntry, TimeSeriesEntry, Vineyard } from './../../models/vineyard.model';
 import { AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
 import * as Highcharts from 'highcharts/highstock';
 import { Action } from 'src/app/models/action.model';
-import { TitleCasePipe } from '@angular/common';
 import * as moment from 'moment';
 import { Variety } from '../../models/variety.model';
 import { COLOR, ColorService } from '../../services/color.service';
@@ -25,13 +23,14 @@ enum StatTypes {
   ACTIONS = 'Actions',
   BBCH = 'BBCH',
   METEO = 'Meteo',
+  NDVI = 'NDVI',
   DGD = 'Growing Days',
   BRIX = 'Brix',
   SUNHOURS = 'Sun Hours',
   HUMIDITY = 'Humidity',
 }
 
-const PREMIUM_TYPES: StatTypes[] = [StatTypes.METEO, StatTypes.DGD];
+const PREMIUM_TYPES: StatTypes[] = [StatTypes.METEO, StatTypes.NDVI, StatTypes.DGD];
 
 @Component({
   selector: 'app-statistics',
@@ -76,9 +75,7 @@ export class StatisticsComponent implements AfterViewInit, OnChanges {
 
   constructor(
     private utilService: UtilService,
-    private vineyardService: VineyardService,
     private statService: StatisticsService,
-    private titlecasePipe: TitleCasePipe,
     private platform: Platform,
     private colorService: ColorService,
     private integrationsService: IntegrationsService,
@@ -177,6 +174,7 @@ export class StatisticsComponent implements AfterViewInit, OnChanges {
       ...this.getSunHoursAxis(),
       ...this.getHumidityAxis(),
       ...this.getBBCHAxis(),
+      ...this.getNDVIAxis(),
     ];
     axes.forEach((a: any) => this._chart.addAxis(a));
   }
@@ -192,6 +190,10 @@ export class StatisticsComponent implements AfterViewInit, OnChanges {
       requests.push(this.getWeatherStationMeteoGraphs(), this.getMeteoTimelines());
     }
 
+    if (this.activeStats.includes(StatTypes.NDVI)) {
+      requests.push(this.getNDVITimelines());
+    }
+
     if (this.activeStats.includes(StatTypes.DGD)) {
       requests.push(this.getWeatherStationDGDGraphs(), this.getDgdTimelines());
     }
@@ -252,6 +254,21 @@ export class StatisticsComponent implements AfterViewInit, OnChanges {
     };
   }
 
+  getNDVIAxis(): any[] {
+    return [
+      {
+        id: 'ndvi',
+        labels: {
+          format: '{value}',
+        },
+        title: {
+          text: 'NDVI',
+        },
+        opposite: true,
+      },
+    ];
+  }
+
   getMeteoAxis(): any[] {
     return [
       {
@@ -448,6 +465,41 @@ export class StatisticsComponent implements AfterViewInit, OnChanges {
     );
   }
 
+  getNDVITimelines(): Observable<any> {
+    const stats: TimeSeriesEntry[] = this.statService.getNDVIListener().getValue();
+    const years = stats
+      .map((s: TimeSeriesEntry) => s.date.year())
+      .filter((y: number, idx: number, ys: number[]) => ys.indexOf(y) === idx);
+
+    return merge(
+      [].concat(
+        ...years
+          .filter((y: number) => this.seasons.indexOf(y) >= 0)
+          .map((y: number, idx: number) => [
+            {
+              id: `NDVI ${y}`,
+              name: `NDVI ${y}`,
+              type: 'spline',
+              yAxis: 'ndvi',
+              color: this.colorService.darken(COLOR.NDVI, idx),
+              showInNavigator: true,
+              tooltip: {
+                formatter(point) {
+                  return `<span style="color:${point.color}">●</span>  <b>NDVI ${y}</b>: ${point.y}`;
+                },
+              },
+              data: stats
+                .filter((s: TimeSeriesEntry) => s.date.year() === y)
+                .map((e: TimeSeriesEntry) => ({
+                  x: this.statService.getNormalizedDate(e.date),
+                  y: e.value,
+                })),
+            },
+          ])
+      )
+    );
+  }
+
   getMeteoTimelines(): Observable<any> {
     const stats: MeteoStatEntry[] = this.statService.getMeteoListener().getValue();
     const years = stats

src/app/vineyeard-view/vineyard-view-page.component.ts

@@ -95,6 +95,7 @@ export class VineyardViewPage implements OnInit, OnDestroy, AfterViewInit {
           this.varietyService.getVarieties(this.activeVineyard);
           this.noteService.getNotes(this.activeVineyard);
           this.statService.getMeteoStats(this.activeVineyard);
+          this.statService.getNDVIStats(this.activeVineyard);
           this.integrationsService.getIntegrations(this.activeVineyard);
         }
       });