Skip to content

Instantly share code, notes, and snippets.

/Erro

Created March 4, 2018 22:21
Show Gist options
  • Save anonymous/9d0cdabed25b9554e0fcb390acd411ec to your computer and use it in GitHub Desktop.
Save anonymous/9d0cdabed25b9554e0fcb390acd411ec to your computer and use it in GitHub Desktop.
<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>
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);
}
}
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