make sure we can change the temperature duration key for the chart.
This commit is contained in:
@@ -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});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user