|
|
|
|
@ -10,65 +10,150 @@ export class PollGraphicComponent implements OnInit {
|
|
|
|
|
isColorblind: boolean;
|
|
|
|
|
lineChart: Chart;
|
|
|
|
|
pollData: any;
|
|
|
|
|
|
|
|
|
|
yesList: number[] = [];
|
|
|
|
|
maybeList: number[] = [];
|
|
|
|
|
noList: number[] = [];
|
|
|
|
|
nbPoll: number = 0;
|
|
|
|
|
dateList: string[] = [];
|
|
|
|
|
constructor() {}
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
var toto = {
|
|
|
|
|
step: 0,
|
|
|
|
|
stepMax: 3,
|
|
|
|
|
pollType: "special dates",
|
|
|
|
|
title: "",
|
|
|
|
|
description: "",
|
|
|
|
|
myName: "",
|
|
|
|
|
visibility: "link_only",
|
|
|
|
|
// date specific poll
|
|
|
|
|
allowSeveralHours: "true",
|
|
|
|
|
dateLgfgfgfgist: ["jeudi", "vendredi", "samedi"], // sets of days as strings
|
|
|
|
|
timeList: ["08:00", "08:30", "09:00"], // ranges of time expressed as strings
|
|
|
|
|
answers: [
|
|
|
|
|
{
|
|
|
|
|
id: 0,
|
|
|
|
|
text: "no"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
id: 1,
|
|
|
|
|
text: "yes"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 2,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 3,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 4,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 5,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 6,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 7,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: 8,
|
|
|
|
|
text: "maybe"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
//const data = this.formatDataAnswers();
|
|
|
|
|
this.formatDataAnswers(toto);
|
|
|
|
|
|
|
|
|
|
this.isColorblind = false;
|
|
|
|
|
this.pollData = new Chart(document.getElementById("graph"), {
|
|
|
|
|
type: 'horizontalBar',
|
|
|
|
|
type: "horizontalBar",
|
|
|
|
|
data: {
|
|
|
|
|
labels: ["Je 17 août 8h00", "Je 17 août 8h00", "Je 17 août 8h00"],
|
|
|
|
|
datasets: [{
|
|
|
|
|
type: "horizontalBar",
|
|
|
|
|
stack: "Yes",
|
|
|
|
|
backgroundColor: "#429a00",
|
|
|
|
|
data: [30, 31, 32, 33, 34, 35, 36],
|
|
|
|
|
}, {
|
|
|
|
|
type: "horizontalBar",
|
|
|
|
|
stack: "Yes",
|
|
|
|
|
backgroundColor: "#f5a623",
|
|
|
|
|
data: [15, 16, 17, 18, 19, 20, 21],
|
|
|
|
|
}, {
|
|
|
|
|
type: "horizontalBar",
|
|
|
|
|
stack: "No",
|
|
|
|
|
backgroundColor: "#cd0000",
|
|
|
|
|
data: [20, 21, 22, 23, 24, 25, 26],
|
|
|
|
|
}]
|
|
|
|
|
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,
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setColorblind() {
|
|
|
|
|
this.isColorblind = !this.isColorblind;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
formatDataAnswers(){
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
alrom8
3 years ago