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

issue-36 : restitution des votes d'un sondage sous forme de graphiques. début

Browse Source
This commit is contained in:
alrom8 2019-11-13 18:18:42 +01:00
parent 5f2a2b4461
commit 0059741027
2 changed files with 206 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,4 +12,9 @@
{{ "pollGraphic.choiceNotColorblind" | translate }} {{ "pollGraphic.choiceNotColorblind" | translate }}
</option> </option>
</select> </select>
{{ "pollGraphic.colorblindText" | translate }} {{ "pollGraphic.colorblindText" | translate }}
<div>
<canvas id="graph" width="300" height="200"></canvas>
</div>

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

@ -1,23 +1,210 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from "@angular/core";
import { Chart } from "chart.js";
@Component({ @Component({
selector: 'framadate-poll-graphic', selector: "framadate-poll-graphic",
templateUrl: './poll-graphic.component.html', templateUrl: "./poll-graphic.component.html",
styleUrls: ['./poll-graphic.component.scss'] styleUrls: ["./poll-graphic.component.scss"]
}) })
export class PollGraphicComponent implements OnInit { export class PollGraphicComponent implements OnInit {
isColorblind: boolean;
lineChart: Chart;
pollData: any;
isColorblind:boolean; constructor() {}
constructor() { ngOnInit() {
this.isColorblind = false;
}
setColorblind(){ //const data = this.formatDataAnswers();
this.isColorblind = !this.isColorblind;
}
ngOnInit() { this.isColorblind = false;
} this.pollData = [
{
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: {
labels: this.formatDataTitles(),
datasets: this.formatDataAnswers()
// datasets: [
// {
// label: "Africa",
// backgroundColor: "#3e95cd",
// data: [133,221,783,2478]
// }, {
// label: "Europe",
// backgroundColor: "#8e5ea2",
// data: [408,547,675,734]
// }
// ]
},
options: {
title: {
display: true,
text: "Résultat du sondage"
}
}
});
// 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() {
this.isColorblind = !this.isColorblind;
}
formatDataTitles() {
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;
}
} }