Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

Issue-36 : Graph sondage

Browse Source
This commit is contained in:
alrom8 2019-11-18 10:19:28 +01:00
parent 0059741027
commit 723a0f9527
2 changed files with 43 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/poll-graphic/poll-graphic.component.html
View File

@ -14,7 +14,7 @@
</select> </select>
{{ "pollGraphic.colorblindText" | translate }} {{ "pollGraphic.colorblindText" | translate }}
<div> <div>
<canvas id="graph" width="300" height="200"></canvas> <canvas id="graph" width="100" height="50"></canvas>
</div> </div>

218
src/app/poll-graphic/poll-graphic.component.ts
View File

@ -18,193 +18,57 @@ export class PollGraphicComponent implements OnInit {
//const data = this.formatDataAnswers(); //const data = this.formatDataAnswers();
this.isColorblind = false; this.isColorblind = false;
this.pollData = [ this.pollData = new Chart(document.getElementById("graph"), {
{ type: 'horizontalBar',
title: "Q1",
answers: [
{
votes: ["yes", "yes", "no"]
},
{
votes: ["no", "yes", "no"]
},
{
votes: ["yes", "yes", "yes"]
}
]
},
{
title: "Q2",
answers: [
{
votes: ["no", "no", "yes", "no", "nsp"]
},
{
votes: ["yes", "yes", "nsp", "no", "no", "no"]
},
{
votes: ["yes", "yes", "no", "yes", "nsp", "nsp", "nsp"]
}
]
}
];
this.lineChart = new Chart("graph", {
type: "horizontalBar",
data: { data: {
labels: this.formatDataTitles(), labels: ["Je 17 août 8h00", "Je 17 août 8h00", "Je 17 août 8h00"],
datasets: this.formatDataAnswers() datasets: [{
// datasets: [ type: "horizontalBar",
// { stack: "Yes",
// label: "Africa", backgroundColor: "#429a00",
// backgroundColor: "#3e95cd", data: [30, 31, 32, 33, 34, 35, 36],
// data: [133,221,783,2478] }, {
// }, { type: "horizontalBar",
// label: "Europe", stack: "Yes",
// backgroundColor: "#8e5ea2", backgroundColor: "#f5a623",
// data: [408,547,675,734] data: [15, 16, 17, 18, 19, 20, 21],
// } }, {
// ] type: "horizontalBar",
stack: "No",
backgroundColor: "#cd0000",
data: [20, 21, 22, 23, 24, 25, 26],
}]
}, },
options: { options: {
title: { legend:{display:false},
display: true, scales: {
text: "Résultat du sondage" 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,
}]
},
} }
}); });
// datasets: [ }
// {
// label: "Blue",
// fillColor: "blue",
// data: [3, 7, 4]}
// },
// {
// label: "Red",
// fillColor: "red",
// data: [4, 3, 5]
// },
// {
// label: "Green",
// fillColor: "green",
// data: [7, 2, 6]
// }
// ]
// // data: {
// // labels: this.formatDataTitles(),
// // //datasets : this.formatDataAnswers()
// // datasets: [
// // {
// // backgroundColor: "#3e95cd",
// // data: [20, 90, 140, 25, 53, 67, 47, 98, 30, 80, 20, 40, 10, 60]
// // },
// // {
// // backgroundColor: "#8e5ea2",
// // data: 3
// // }
// // ]
// ,
// options: {
// scales: {
// yAxes: [
// {
// ticks: {
// beginAtZero: true
// }
// }
// ]
// }
// }
// });
}
setColorblind() { setColorblind() {
this.isColorblind = !this.isColorblind; this.isColorblind = !this.isColorblind;
} }
formatDataTitles() { formatDataAnswers(){
let titlesTab = [];
this.pollData.forEach(element => {
titlesTab.push(element.title);
});
//console.log(titlesTab);
return titlesTab;
} }
formatDataAnswers() {
let answersTab = [];
this.pollData.forEach(element => {
//console.log(answersTab);
answersTab.push({
backgroundColor: this.getChartColor(answersTab),
data: this.getAnswersData(element, answersTab)
});
});
return answersTab;
}
getChartColor(answersTab): string {
if (answersTab.length == 0) {
return "rgba(0, 255, 0, 0.2)"; //oui
}
if (answersTab.length == 1) {
return "rgba(255, 0, 0, 0.2)"; //non
}
if (answersTab.length == 2) {
return "rgba(0, 255, 255, 0.2)"; //jaune
}
}
getAnswersData(elem, answersTab): number {
// console.log("ELEM");
// console.log(elem);
// console.log(elem.answers);
if (answersTab.length == 0) {
return this.countYes(elem.answers[0].votes);
}
if (answersTab.length == 1) {
return this.countNo(elem.answers[1].votes);
}
if (answersTab.length == 2) {
return this.countNsp(elem.answers[2].votes);
}
}
countYes(tab): number {
console.log("TAB");
console.log(tab);
let res: number = 0;
for (let i = 0; i < tab.length; i++) {
console.log("tab[i] = " + tab[i]);
if (tab[i] == "yes") {
res = res + 1;
}
}
console.log(res);
return res;
}
countNo(tab): number {
let res: number = 0;
for (let i = 0; i < tab.length; i++) {
console.log("tab[i] = " + tab[i]);
if (tab[i] == "no") {
res = res + 1;
}
}
console.log(res);
return res;
}
countNsp(tab): number {
let res: number = 0;
for (let i = 0; i < tab.length; i++) {
console.log("tab[i] = " + tab[i]);
if (tab[i] == "nsp") {
res = res + 1;
}
}
console.log(res);
return res;
}
} }