funky-framadate-front/mocks/old-stuff/pages/poll/poll-graphic/poll-graphic.component.ts

112 lines
2.8 KiB
TypeScript
Raw Normal View History

import { Component, Inject, OnInit } from '@angular/core';
import { Chart } from 'chart.js';
import { DOCUMENT } from '@angular/common';
2020-05-12 19:16:23 +02:00
import { mockGraphConfig } from '../../../mocks/mock-graph';
import { ConfigService } from '../../../services/config.service';
2020-05-12 19:16:23 +02:00
import { mockPoll3 } from '../../../mocks/mock-poll3';
2019-10-23 10:45:30 +02:00
@Component({
2020-04-22 12:56:18 +02:00
selector: 'app-poll-graphic',
2020-04-21 10:50:26 +02:00
templateUrl: './poll-graphic.component.html',
styleUrls: ['./poll-graphic.component.scss'],
2019-10-23 10:45:30 +02:00
})
export class PollGraphicComponent implements OnInit {
2020-04-21 10:50:26 +02:00
isColorblind = false;
pollConfigRetrieved: any = mockPoll3;
graphicConfig: any = mockGraphConfig;
preferred: any = 'rien';
yesList: number[] = [];
maybeList: number[] = [];
noList: number[] = [];
nbPoll = 0;
dateList: string[] = [];
2019-11-19 14:53:53 +01:00
2020-04-21 10:50:26 +02:00
constructor(@Inject(DOCUMENT) private document: any, private config: ConfigService) {}
2019-10-23 15:39:16 +02:00
ngOnInit(): void {
2020-04-21 10:50:26 +02:00
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(),
2020-04-21 10:50:26 +02:00
});
}
public toggleColorblind(): void {
2020-04-21 10:50:26 +02:00
this.isColorblind = !this.isColorblind;
}
public formatDataAnswers(poll): void {
2020-04-21 10:50:26 +02:00
// 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 {
2020-04-21 10:50:26 +02:00
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,
},
],
},
};
}
2019-10-23 10:45:30 +02:00
}