forked from tykayn/funky-framadate-front
Issue-36 : Graph sondage
This commit is contained in:
parent
0059741027
commit
723a0f9527
@ -14,7 +14,7 @@
|
||||
</select>
|
||||
{{ "pollGraphic.colorblindText" | translate }}
|
||||
<div>
|
||||
<canvas id="graph" width="300" height="200"></canvas>
|
||||
<canvas id="graph" width="100" height="50"></canvas>
|
||||
</div>
|
||||
|
||||
|
@ -18,193 +18,57 @@ export class PollGraphicComponent implements OnInit {
|
||||
//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",
|
||||
this.pollData = new Chart(document.getElementById("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]
|
||||
// }
|
||||
// ]
|
||||
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],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: true,
|
||||
text: "Résultat du sondage"
|
||||
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,
|
||||
}]
|
||||
},
|
||||
}
|
||||
});
|
||||
// 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(){
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user