import { Component, OnInit } from '@angular/core';
import { HeatMap } from '@syncfusion/ej2-heatmap';
import { DataAlertService } from 'src/app/_services/data-alert.service';
import { first } from 'rxjs/operators';
import { DataAlert } from 'src/app/_models/dataAlert';
import { interval } from 'rxjs';
import * as moment from 'moment';
@Component({
selector: 'heatmap',
templateUrl: './heatmap.component.html',
styleUrls: ['./heatmap.component.css']
})
export class HeatmapComponent implements OnInit {
dataSource: Object[] = [
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0]
];
alerts: DataAlert[] = [];
height = '200';
parameters = ['p1', 'p2', 'p3', 'p4', 'p5', 'p6'];
labels = [];
interval = 60;
slices:number = 5;
alertMatrix;
refreshTime = 5000;
xAxis: Object = {
labels: this.labels,
};
yAxis: Object = {
labels: this.parameters,
};
public cellSettings: Object = {
showLabel: false,
};
public paletteSettings: Object = {
palette: [{ value: 0, color: '#e6e6e6' },
{ value: 50, color: '#6C5B7B' },
{ value: 100, color: '#ff0000' },
]
};
constructor(private dataAlertService: DataAlertService) {
}
public ngOnInit() {
//set the labels
var now = moment();
var labelTick;
for (var i = 0; i< (this.interval / this.slices); i++) {
labelTick = moment(now).subtract(this.interval, 'minutes').add(i * this.slices, 'minutes').format('hh:mm')
this.labels.push(labelTick);
}
//create a matrix parameters x (interval / slices)
this.alertMatrix = Array(this.interval / this.slices).fill(0).map(() => Array(this.parameters.length).fill(0));
//this.alertMatrix = Array(this.parameters.length).fill(0).map(() => Array(this.interval / this.slices).fill(0));
console.log(this.alertMatrix);
//get all alerts within a certain interval
this.dataAlertService.getAllAlertsByInterval(this.interval).subscribe(
data => {
this.alerts = data;
this.slices;
},
error => console.error(error),
() => {
console.log("observable complete");
this.categorize();
}
);
//refresh the view if refreshTime is set
if (this.refreshTime != 0) {
interval(this.refreshTime).subscribe(() => {
this.dataAlertService.getAllAlertsByInterval(this.interval).pipe(first()).subscribe(
data => {
this.alerts = data;
},
error => console.error(error),
() => {
console.log("observable complete");
this.categorize();
}
);
});
}
}
private categorize() {
console.log("categorize accessed");
let bucketIndex;
let buckets = (this.interval / this.slices) - 1;
var now = moment();
for (var i = 0; i < this.alerts.length; i++) {
var createdMin = moment(this.alerts[i]['created']).format("mm");
var duration = moment.duration(now.diff(moment(this.alerts[i]['created'])));
bucketIndex = Math.trunc(duration.asMinutes() / this.slices);
console.log('durcation: ' + duration.asMinutes());
console.log('bucketIndex: ' + bucketIndex)
//find the index of the parameter
var foundIndex = this.parameters.findIndex(x => x == this.alerts[i]['parameter'])
console.log('foundIndex' + foundIndex);
//increment if index could be found
if (foundIndex != -1 && this.alertMatrix[buckets - bucketIndex][foundIndex] < 100) {
this.alertMatrix[buckets - bucketIndex][foundIndex] = 100;
}
}
this.dataSource = this.alertMatrix;
this.xAxis = { labels: this.labels }
console.log(this.dataSource);
}
}
