113 lines
3.7 KiB
TypeScript
113 lines
3.7 KiB
TypeScript
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: 'framadate-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,
|
|
},
|
|
],
|
|
},
|
|
};
|
|
}
|
|
}
|