You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
5.2 KiB
187 lines
5.2 KiB
import { AfterViewInit, ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
|
|
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 { DashboardService } from 'app/modules/admin/dashboard/dashboard.service';
|
|
import * as moment from "moment";
|
|
|
|
@Component({
|
|
selector : 'example',
|
|
templateUrl : './dashboard.component.html',
|
|
styleUrls : ['./dashboard.component.scss'],
|
|
encapsulation : ViewEncapsulation.None,
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
})
|
|
export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
|
|
{
|
|
data: any;
|
|
temperatureOptions: ApexOptions;
|
|
|
|
// Private
|
|
private _unsubscribeAll: Subject<any>;
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* @param {SmartService} _smartService
|
|
*/
|
|
constructor(
|
|
private _smartService: DashboardService
|
|
)
|
|
{
|
|
// Set the private defaults
|
|
this._unsubscribeAll = new Subject();
|
|
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Lifecycle hooks
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
/**
|
|
* On init
|
|
*/
|
|
ngOnInit(): void
|
|
{
|
|
// Get the data
|
|
this._smartService.data$
|
|
.pipe(takeUntil(this._unsubscribeAll))
|
|
.subscribe((data) => {
|
|
|
|
// Store the data
|
|
this.data = data;
|
|
|
|
// Prepare the chart data
|
|
this._prepareChartData();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* After view init
|
|
*/
|
|
ngAfterViewInit(): void
|
|
{}
|
|
|
|
/**
|
|
* On destroy
|
|
*/
|
|
ngOnDestroy(): void
|
|
{
|
|
// Unsubscribe from all subscriptions
|
|
this._unsubscribeAll.next();
|
|
this._unsubscribeAll.complete();
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Private methods
|
|
// -----------------------------------------------------------------------------------------------------
|
|
private _deviceDataTemperatureSeries() {
|
|
var deviceTemperatureSeries = []
|
|
|
|
for(let device of this.data.data){
|
|
var deviceSeriesMetadata = {
|
|
name: `/dev/${device.device_name}`,
|
|
data: []
|
|
}
|
|
for(let smartResults of device.smart_results){
|
|
let newDate = new Date(smartResults.CreatedAt);
|
|
deviceSeriesMetadata.data.push({
|
|
x: newDate,
|
|
y: smartResults.temp
|
|
})
|
|
}
|
|
deviceTemperatureSeries.push(deviceSeriesMetadata)
|
|
}
|
|
return deviceTemperatureSeries
|
|
}
|
|
/**
|
|
* Prepare the chart data from the data
|
|
*
|
|
* @private
|
|
*/
|
|
private _prepareChartData(): void
|
|
{
|
|
// Account balance
|
|
this.temperatureOptions = {
|
|
chart : {
|
|
animations: {
|
|
speed : 400,
|
|
animateGradually: {
|
|
enabled: false
|
|
}
|
|
},
|
|
fontFamily: 'inherit',
|
|
foreColor : 'inherit',
|
|
width : '100%',
|
|
height : '100%',
|
|
type : 'area',
|
|
sparkline : {
|
|
enabled: true
|
|
}
|
|
},
|
|
colors : ['#A3BFFA', '#667EEA'],
|
|
fill : {
|
|
colors : ['#CED9FB', '#AECDFD'],
|
|
opacity: 0.5,
|
|
type : 'solid'
|
|
},
|
|
series : this._deviceDataTemperatureSeries(),
|
|
stroke : {
|
|
curve: 'straight',
|
|
width: 2
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
x : {
|
|
format: 'MMM dd, yyyy hh:mm:ss'
|
|
},
|
|
y : {
|
|
formatter: (value) => {
|
|
return value + '°C';
|
|
}
|
|
}
|
|
},
|
|
xaxis : {
|
|
type: 'datetime'
|
|
}
|
|
};
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------------------------------
|
|
// @ Public methods
|
|
// -----------------------------------------------------------------------------------------------------
|
|
|
|
/**
|
|
* Track by function for ngFor loops
|
|
*
|
|
* @param index
|
|
* @param item
|
|
*/
|
|
trackByFn(index: number, item: any): any
|
|
{
|
|
return item.id || index;
|
|
}
|
|
|
|
humanizeHours(hours: number): string {
|
|
if(!hours){
|
|
return '--'
|
|
}
|
|
|
|
var value: number
|
|
let unit = ""
|
|
if(hours > (24*365)){ //more than a year
|
|
value = Math.round((hours/(24*365)) * 10)/10
|
|
unit = "years"
|
|
} else if (hours > 24){
|
|
value = Math.round((hours/24) *10 )/10
|
|
unit = "days"
|
|
} else{
|
|
value = hours
|
|
unit = "hours"
|
|
}
|
|
return `${value} ${unit}`
|
|
}
|
|
}
|