-
-
Save anonymous/9d0cdabed25b9554e0fcb390acd411ec to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<div style="display: block"> | |
<canvas baseChart [datasets]="chartData" [labels]="chartLabels" [options]="chartOptions" | |
[legend]="showChartLegend" [chartType]="chartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> | |
</canvas> | |
</div> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Component, Input, OnInit} from '@angular/core'; | |
import { HttpClient } from '@angular/common/http'; | |
import moment from 'moment'; | |
import { Usuario } from '../../models/Usuario'; | |
import { InformationServiceProvider } from "../../providers/information-service/information-service"; | |
import "rxjs/add/operator/map"; | |
@Component({ | |
selector: 'conversas-mes-chart', | |
templateUrl: 'conversas-mes-chart.html' | |
}) | |
export class ConversasMesChartComponent implements OnInit | |
{ | |
// Para que este componente receba dados do componente pai | |
// @Input() usuario: Usuario; | |
usuario: Usuario; | |
// Chart | |
public chartOptions = { scaleShowVerticalLines: false, responsive: true }; | |
public chartType: string = 'bar'; | |
public showChartLegend: boolean = false; | |
public chartLabels: string[] = []; | |
public chartData: any[] = []; | |
// public chartLabels: string[] = ['Jan', 'Fev']; | |
// public chartData: any[] = [{ data: [12, 30] }]; | |
constructor(private _http: HttpClient, private _informationService: InformationServiceProvider) | |
{ | |
this.usuario = this._informationService.getUsuarioLogado(); | |
} | |
ngOnInit() | |
{ | |
this.getChartDataFromApi(); | |
} | |
getChartDataFromApi() | |
{ | |
console.log('getChartDataFromApi'); | |
this._http.post( | |
'http://localhost:3000/api/statistics/conversations', | |
{ | |
filters: | |
{ | |
data_ini: moment().subtract(1, 'months').format('YYYY-MM-DD'), | |
data_fim: moment().format('YYYY-MM-DD'), | |
filtrarPorMes: true | |
} | |
}, | |
{ | |
headers: { | |
'Content-Type': 'application/json', | |
'Authorization': 'TfI3zgIXHfdSuN1SAgQtW2wDve2SFZcjEF9sHPZRtcz' | |
} | |
} | |
) | |
.subscribe( | |
(response) => { | |
this.assembleChartData(response); | |
}, | |
(erro) => { | |
console.log('Deu erro'); | |
} | |
); | |
} | |
assembleChartData(data) | |
{ | |
if (data.length > 0) | |
{ | |
let dataArray = []; | |
var io = []; | |
for (let i = 0; i < data.length; i++) | |
{ | |
data[i]._id.mes = this.changeMonthName(data[i]._id.mes); | |
this.chartLabels[i] = data[i]._id.mes + '/' + data[i]._id.ano; | |
io[i] = data[i]._id.mes + '/' + data[i]._id.ano; | |
dataArray[i] = data[i].count; | |
} | |
this.chartData = [ { data: dataArray } ]; | |
} | |
} | |
changeMonthName(month) | |
{ | |
switch (month) | |
{ | |
case '01': | |
return 'Jan'; | |
case '02': | |
return 'Fev'; | |
case '03': | |
return 'Mar'; | |
case '04': | |
return 'Abr'; | |
case '05': | |
return 'Mai'; | |
case '06': | |
return 'Jun'; | |
case '07': | |
return 'Jul'; | |
case '08': | |
return 'Ago'; | |
case '09': | |
return 'Set'; | |
case '10': | |
return 'Out'; | |
case '11': | |
return 'Nov'; | |
case '12': | |
return 'Dez'; | |
} | |
} | |
// events | |
public chartClicked(e:any):void | |
{ | |
console.log(e); | |
} | |
public chartHovered(e:any):void | |
{ | |
console.log(e); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
TypeError: Cannot read property 'data' of undefined | |
at BaseChartDirective.Array.concat.BaseChartDirective.updateChartData (http://localhost:8100/build/0.js:19478:24) | |
at BaseChartDirective.Array.concat.BaseChartDirective.ngOnChanges (http://localhost:8100/build/0.js:19428:26) | |
at checkAndUpdateDirectiveInline (http://localhost:8100/build/vendor.js:12445:19) | |
at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:13951:20) | |
at checkAndUpdateNode (http://localhost:8100/build/vendor.js:13894:16) | |
at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:14766:76) | |
at debugCheckDirectivesFn (http://localhost:8100/build/vendor.js:14707:13) | |
at Object.eval [as updateDirectives] (ng:///ConversasMesChartModule/ConversasMesChartComponent.ngfactory.js:36:9) | |
at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:14692:21) | |
at checkAndUpdateView (http://localhost:8100/build/vendor.js:13861:14) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment