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

pull/262/head
Jason Kulatunga 2 years ago
parent 934f16f0a5
commit 399a2450ff

@ -126,19 +126,20 @@
matTooltip="not yet implemented" matTooltip="not yet implemented"
mat-button mat-button
[matMenuTriggerFor]="tempRangeMenu"> [matMenuTriggerFor]="tempRangeMenu">
<span class="font-medium text-sm text-hint">1 week</span> <span class="font-medium text-sm text-hint">{{tempDurationKey}}</span>
</button> </button>
<mat-menu #tempRangeMenu="matMenu"> <mat-menu #tempRangeMenu="matMenu">
<button mat-menu-item>1 month</button> <button (click)="changeSummaryTempDuration('forever')" mat-menu-item>forever</button>
<button mat-menu-item>12 months</button> <button (click)="changeSummaryTempDuration('year')" mat-menu-item>year</button>
<button mat-menu-item>all time</button> <button (click)="changeSummaryTempDuration('month')" mat-menu-item>month</button>
<button (click)="changeSummaryTempDuration('week')" mat-menu-item>week</button>
</mat-menu> </mat-menu>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-col flex-auto"> <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" [chart]="temperatureOptions.chart"
[colors]="temperatureOptions.colors" [colors]="temperatureOptions.colors"
[fill]="temperatureOptions.fill" [fill]="temperatureOptions.fill"

@ -3,7 +3,7 @@ import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table'; import { MatTableDataSource } from '@angular/material/table';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; 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 { DashboardService } from 'app/modules/dashboard/dashboard.service';
import * as moment from 'moment'; import * as moment from 'moment';
import {MatDialog} from '@angular/material/dialog'; import {MatDialog} from '@angular/material/dialog';
@ -25,9 +25,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
data: any; data: any;
temperatureOptions: ApexOptions; temperatureOptions: ApexOptions;
config: AppConfig; config: AppConfig;
tempDurationKey: string = "forever"
// Private // Private
private _unsubscribeAll: Subject<any>; private _unsubscribeAll: Subject<any>;
@ViewChild("tempChart", { static: false }) tempChart: ChartComponent;
/** /**
* Constructor * 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 * Track by function for ngFor loops
* *

@ -31,6 +31,6 @@ export class DashboardResolver implements Resolve<any>
*/ */
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
{ {
return this._dashboardService.getData(); return this._dashboardService.getSummaryData();
} }
} }

@ -44,7 +44,7 @@ export class DashboardService
/** /**
* Get data * Get data
*/ */
getData(): Observable<any> getSummaryData(): Observable<any>
{ {
return this._httpClient.get(getBasePath() + '/api/summary').pipe( return this._httpClient.get(getBasePath() + '/api/summary').pipe(
tap((response: any) => { tap((response: any) => {
@ -52,4 +52,14 @@ export class DashboardService
}) })
); );
} }
getSummaryTempData(durationKey: string): Observable<any>
{
let params = {}
if(durationKey){
params["duration_key"] = durationKey
}
return this._httpClient.get(getBasePath() + '/api/summary/temp', {params: params});
}
} }

Loading…
Cancel
Save