From 723a0f9527776f1de653464b979980c662a6e909 Mon Sep 17 00:00:00 2001 From: alrom8 Date: Mon, 18 Nov 2019 10:19:28 +0100 Subject: [PATCH] Issue-36 : Graph sondage --- .../poll-graphic/poll-graphic.component.html | 2 +- .../poll-graphic/poll-graphic.component.ts | 220 ++++-------------- 2 files changed, 43 insertions(+), 179 deletions(-) diff --git a/src/app/poll-graphic/poll-graphic.component.html b/src/app/poll-graphic/poll-graphic.component.html index 99bf81d1..731002b5 100644 --- a/src/app/poll-graphic/poll-graphic.component.html +++ b/src/app/poll-graphic/poll-graphic.component.html @@ -14,7 +14,7 @@ {{ "pollGraphic.colorblindText" | translate }}
- +
\ No newline at end of file diff --git a/src/app/poll-graphic/poll-graphic.component.ts b/src/app/poll-graphic/poll-graphic.component.ts index a823fb0d..c7d52b91 100644 --- a/src/app/poll-graphic/poll-graphic.component.ts +++ b/src/app/poll-graphic/poll-graphic.component.ts @@ -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; - } + }