funky-framadate-front/src/app/poll-graphic/poll-graphic.component.ts

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;
    }
}