113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
import {Component, Inject, OnInit} from "@angular/core";
|
|
import {Chart} from "chart.js";
|
|
import {DOCUMENT} from '@angular/common';
|
|
import {mockGraphConfig} from "../config/mock-graph";
|
|
|
|
@Component({
|
|
selector: "framadate-poll-graphic",
|
|
templateUrl: "./poll-graphic.component.html",
|
|
styleUrls: ["./poll-graphic.component.scss"]
|
|
})
|
|
export class PollGraphicComponent implements OnInit {
|
|
isColorblind: boolean = false;
|
|
pollData: any;
|
|
preferred: any = "rien";
|
|
yesList: number[] = [];
|
|
maybeList: number[] = [];
|
|
noList: number[] = [];
|
|
nbPoll: number = 0;
|
|
dateList: string[] = [];
|
|
|
|
constructor(@Inject(DOCUMENT) private document: any,) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
var toto = mockGraphConfig;
|
|
|
|
this.formatDataAnswers(toto);
|
|
|
|
this.isColorblind = false;
|
|
this.pollData = new Chart(this.document.getElementById("graph"), {
|
|
type: "horizontalBar",
|
|
data: {
|
|
labels: ["jeudi"],
|
|
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: {
|
|
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
|
|
}
|
|
]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
toggleColorblind() {
|
|
this.isColorblind = !this.isColorblind;
|
|
}
|
|
|
|
formatDataAnswers(poll) {
|
|
if (poll && poll.pollType === "special dates") {
|
|
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;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
initPollCounter() {
|
|
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;
|
|
}
|
|
}
|