make sure we can change the temperature duration key for the chart.

AnalogJ · May 21, 2022 · 399a245 · 399a245
1 parent 934f16f
commit 399a245
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 8 deletions.
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.html b/webapp/frontend/src/app/modules/dashboard/dashboard.component.html
@@ -126,19 +126,20 @@ <h2 class="m-0">Dashboard</h2>
                                         matTooltip="not yet implemented"
                                         mat-button
                                         [matMenuTriggerFor]="tempRangeMenu">
-                                    <span class="font-medium text-sm text-hint">1 week</span>
+                                    <span class="font-medium text-sm text-hint">{{tempDurationKey}}</span>
                                 </button>
                                 <mat-menu #tempRangeMenu="matMenu">
-                                    <button mat-menu-item>1 month</button>
-                                    <button mat-menu-item>12 months</button>
-                                    <button mat-menu-item>all time</button>
+                                    <button (click)="changeSummaryTempDuration('forever')" mat-menu-item>forever</button>
+                                    <button (click)="changeSummaryTempDuration('year')" mat-menu-item>year</button>
+                                    <button (click)="changeSummaryTempDuration('month')" mat-menu-item>month</button>
+                                    <button (click)="changeSummaryTempDuration('week')" mat-menu-item>week</button>
                                 </mat-menu>
                             </div>
                         </div>
 
                     </div>
                     <div class="flex flex-col flex-auto">
-                        <apx-chart *ngIf="temperatureOptions" class="flex-auto w-full h-full"
+                        <apx-chart #tempChart *ngIf="temperatureOptions" class="flex-auto w-full h-full"
                                    [chart]="temperatureOptions.chart"
                                    [colors]="temperatureOptions.colors"
                                    [fill]="temperatureOptions.fill"

diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.component.ts
@@ -3,7 +3,7 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { ApexOptions } from 'ng-apexcharts';
+import {ApexOptions, ChartComponent} from 'ng-apexcharts';
 import { DashboardService } from 'app/modules/dashboard/dashboard.service';
 import * as moment from 'moment';
 import {MatDialog} from '@angular/material/dialog';
@@ -25,9 +25,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
     data: any;
     temperatureOptions: ApexOptions;
     config: AppConfig;
+    tempDurationKey: string = "forever"
 
     // Private
     private _unsubscribeAll: Subject<any>;
+    @ViewChild("tempChart", { static: false }) tempChart: ChartComponent;
 
     /**
      * Constructor
@@ -283,6 +285,31 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
         }
     }
 
+    /*
+
+    DURATION_KEY_WEEK    = "week"
+	DURATION_KEY_MONTH   = "month"
+	DURATION_KEY_YEAR    = "year"
+	DURATION_KEY_FOREVER = "forever"
+     */
+
+    changeSummaryTempDuration(durationKey: string){
+        this.tempDurationKey = durationKey
+
+        this._smartService.getSummaryTempData(durationKey)
+            .subscribe((data) => {
+
+                // given a list of device temp history, override the data in the "summary" object.
+                for(const wwn in this.data.data.summary) {
+                    // console.log(`Updating ${wwn}, length: ${this.data.data.summary[wwn].temp_history.length}`)
+                    this.data.data.summary[wwn].temp_history = data.data.temp_history[wwn] || []
+                }
+
+                // Prepare the chart series data
+                this.tempChart.updateSeries(this._deviceDataTemperatureSeries())
+            });
+    }
+
     /**
      * Track by function for ngFor loops
      *

diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.resolvers.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.resolvers.ts
@@ -31,6 +31,6 @@ export class DashboardResolver implements Resolve<any>
      */
     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
     {
-        return this._dashboardService.getData();
+        return this._dashboardService.getSummaryData();
     }
 }
diff --git a/webapp/frontend/src/app/modules/dashboard/dashboard.service.ts b/webapp/frontend/src/app/modules/dashboard/dashboard.service.ts
@@ -44,12 +44,22 @@ export class DashboardService
     /**
      * Get data
      */
-    getData(): Observable<any>
+    getSummaryData(): Observable<any>
     {
         return this._httpClient.get(getBasePath() + '/api/summary').pipe(
             tap((response: any) => {
                 this._data.next(response);
             })
         );
     }
+
+    getSummaryTempData(durationKey: string): Observable<any>
+    {
+        let params = {}
+        if(durationKey){
+            params["duration_key"] = durationKey
+        }
+
+        return this._httpClient.get(getBasePath() + '/api/summary/temp', {params: params});
+    }
 }