import { ChartjsService } from ‘./…/…/services/chartjs.service’;
import { Component, OnInit, ViewChild, ElementRef } from ‘@angular/core’;
import { Chart } from ‘chart.js’;
import { map } from ‘rxjs/operators’;
@Component({
selector: ‘app-graph’,
templateUrl: ‘./graph.page.html’,
styleUrls: [‘./graph.page.scss’],
})
export class GraphPage {
chart = [];
constructor(private _chart: ChartjsService) {}
ngOnInit(){
this._chart.getInfo()
.subscribe(res => {
let deFunc = res['list'].pipe(map((res: { main: { deFunc: any; }; }) => res.main.deFunc))
let cdOperacao = res['list'].pipe(map((res: { main: { cdOperacao: any; }; }) => res.main.cdOperacao))
let dtOperacao = res['list'].pipe(map((res: { main: { dtOperacao: any; }; }) => res.main.dtOperacao))
let chartDates = []
dtOperacao.forEach((res: number ) => {
let jsdate = new Date(res * 1000)
chartDates.push(jsdate.toLocaleTimeString('en', { year: 'numeric', month: 'string' }))
})
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: chartDates,
datasets: [
{
data: deFunc,
borderColor: '#3cba9f',
fill: false
},
{
data: cdOperacao,
borderColor: '#ffcc00',
fill: false
},
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
display: true
}],
yAxes: [{
display: true
}]
}
}
})
})
}
}