Using Angular and ngx-charts to display data fetched from the server works perfectly on initial load trigger with the ngOnInit() method calling getStats() function. Everything loads as expected: https://i.sstatic.net/8OsbD.png
However, upon clicking the Get Data button and re-sending the same request to the server (getStats()), the table gets re-rendered with the bar lines appearing thin: https://i.sstatic.net/VJ2qT.png
The thinning out of bar lines is observed.
Html:
<div class="row shadow">
<div class="col" style="height: 80vh; width: 100%;">
<ngx-charts-bar-horizontal
[scheme]="colorScheme"
[results]="data"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-horizontal>
</div>
</div>
Ts Code:
export class StatsComponent implements OnInit {
constructor(
private adminService: AdminService,
private toastr: ToastrService,
private datePipe: DatePipe,
private formBulder: FormBuilder,
private changeDetection: ChangeDetectorRef ) { }
days = 7; // Days you want to subtract
date = new Date();
endMonth = this.date.getUTCMonth() + 1; //months from 1-12
endDay = this.date.getUTCDate();
endyear = this.date.getUTCFullYear();
endDate = this.endyear + '/' + this.endMonth + '/' + this.endDay;
last = new Date(this.date.getTime() - (this.days * 24 * 60 * 60 * 1000));
startDay = this.last.getDate();
startMonth= this.last.getMonth()+1;
startYear = this.last.getFullYear();
startDate = this.startYear + '/' + this.startMonth + '/' + this.startDay;
statsSearchFrom = this.formBulder.group({
startTime: [this.startDate, Validators.required],
endTime: [this.endDate, Validators.required]
});
agents: User[];
data: any[] = [];
multi: any[];
// view: any[] = [100%, 800];
// bar chart options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Number of Tickets';
showYAxisLabel = true;
yAxisLabel = 'Agent';
colorScheme = {
domain: ['#263859', '#a7d129', '#21e6c1', '#278ea5', '#7045af', '#e14594', '#ed6363', '#3c6562']
};
ngOnInit() {
this.getAllAgents();
}
getStats() {
const startTime = this.datePipe.transform(this.statsSearchFrom.controls['startTime'].value, 'ddMMyyyy');
const endTime = this.datePipe.transform(this.statsSearchFrom.controls['endTime'].value, 'ddMMyyyy');
this.adminService.getAgentStats(this.agents, startTime, endTime).subscribe(response => {
this.agents = response;
for (const agent of this.agents) {
const point: any = {'name': agent.username, 'value': agent.nbOfClosedEmails};
this.data.push(point);
}
this.data = [...this.data];
}, error => {
this.toastr.error('Error while getting the statistics.')
});
}
getAllAgents() {
this.adminService.getAllAgents().subscribe(response => {
this.agents = response;
this.agents = [...this.agents];
this.getStats();
}, error => {
this.toastr.error('Error while getting the agents.');
console.error(error);
});
}