import { Component, Inject, OnInit } from '@angular/core'; import { Chart } from 'chart.js'; import { DOCUMENT } from '@angular/common'; import { mockGraphConfig } from '../../../mocks/mock-graph'; import { ConfigService } from '../../../services/config.service'; import { mockPoll3 } from '../../../mocks/mock-poll3'; @Component({ selector: 'app-poll-graphic', templateUrl: './poll-graphic.component.html', styleUrls: ['./poll-graphic.component.scss'], }) export class PollGraphicComponent implements OnInit { isColorblind = false; pollConfigRetrieved: any = mockPoll3; graphicConfig: any = mockGraphConfig; preferred: any = 'rien'; yesList: number[] = []; maybeList: number[] = []; noList: number[] = []; nbPoll = 0; dateList: string[] = []; constructor(@Inject(DOCUMENT) private document: any, private config: ConfigService) {} ngOnInit(): void { this.formatDataAnswers(this.graphicConfig); this.isColorblind = false; this.pollConfigRetrieved = new Chart(this.document.getElementById('graph'), { type: 'horizontalBar', data: { labels: this.pollConfigRetrieved.choices.map((choice) => choice.name), datasets: [ { type: 'horizontalBar', stack: 'Yes', backgroundColor: '#429a00', data: this.yesList, }, { type: 'horizontalBar', stack: 'Yes', backgroundColor: '#f5a623', data: this.maybeList, }, { type: 'horizontalBar', stack: 'No', backgroundColor: '#cd0000', data: this.noList, }, ], }, options: this.getSettedGraphOptions(), }); } public toggleColorblind(): void { this.isColorblind = !this.isColorblind; } public formatDataAnswers(poll): void { // if (poll && poll.pollType === "date") { this.initPollCounter(); poll.answers.forEach((response) => { switch (response.text) { case 'yes': this.yesList[this.nbPoll - 1]++; break; case 'maybe': this.maybeList[this.nbPoll - 1]++; break; case 'no': this.noList[this.nbPoll - 1]++; break; } }); // } } public initPollCounter(): void { this.nbPoll++; this.dateList[this.nbPoll - 1] = 'jeudi'; this.maybeList[this.nbPoll - 1] = 0; this.yesList[this.nbPoll - 1] = 0; this.noList[this.nbPoll - 1] = 0; } private getSettedGraphOptions(): any { // TODO: create interfaces, or find another way to work. "any" return type should be removed. return { legend: { display: false }, scales: { xAxes: [ { gridLines: { drawBorder: false, display: false }, display: false, stacked: true, ticks: { beginAtZero: true, maxRotation: 0, minRotation: 0 }, }, ], yAxes: [ { gridLines: { drawBorder: true, display: false }, display: true, stacked: true, }, ], }, }; } }