forked from tykayn/funky-framadate-front
211 lines
5.9 KiB
TypeScript
211 lines
5.9 KiB
TypeScript
import { Component, OnInit } from "@angular/core";
|
|
import { Chart } from "chart.js";
|
|
|
|
@Component({
|
|
selector: "framadate-poll-graphic",
|
|
templateUrl: "./poll-graphic.component.html",
|
|
styleUrls: ["./poll-graphic.component.scss"]
|
|
})
|
|
export class PollGraphicComponent implements OnInit {
|
|
isColorblind: boolean;
|
|
lineChart: Chart;
|
|
pollData: any;
|
|
|
|
constructor() {}
|
|
|
|
ngOnInit() {
|
|
|
|
//const data = this.formatDataAnswers();
|
|
|
|
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;
|
|
}
|
|
}
|