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;
    yesList: number[] = [];
    maybeList: number[] = [];
    noList: number[] = [];
    nbPoll: number = 0;
    dateList: string[] = [];
    constructor() {}

    ngOnInit() {
        var toto = {
            step: 0,
            stepMax: 3,
            pollType: "special dates",
            title: "",
            description: "",
            myName: "",
            visibility: "link_only",
            // date specific poll
            allowSeveralHours: "true",
            dateLgfgfgfgist: ["jeudi", "vendredi", "samedi"], // sets of days as strings
            timeList: ["08:00", "08:30", "09:00"], // ranges of time expressed as strings
            answers: [
                {
                    id: 0,
                    text: "no"
                },

                {
                    id: 1,
                    text: "yes"
                },
                {
                    id: 2,
                    text: "maybe"
                },
                {
                    id: 3,
                    text: "maybe"
                },
                {
                    id: 4,
                    text: "maybe"
                },
                {
                    id: 5,
                    text: "maybe"
                },
                {
                    id: 6,
                    text: "maybe"
                },
                {
                    id: 7,
                    text: "maybe"
                },
                {
                    id: 8,
                    text: "maybe"
                }
            ]
        };

        this.formatDataAnswers(toto);

        this.isColorblind = false;
        this.pollData = new Chart(document.getElementById("graph"), {
            type: "horizontalBar",
            data: {
                labels: ["jeudi"],
                datasets: [
                    {
                        type: "horizontalBar",
                        stack: "Yes",
                        backgroundColor: "#429a00",
                        data: this.yesList
                    },
                    {
                        type: "horizontalBar",
                        stack: "Yes",
                        backgroundColor: "#f5a623",
                        data: this.maybeList
                    },
                    {
                        type: "horizontalBar",
                        stack: "No",
                        backgroundColor: "#cd0000",
                        data: this.noList
                    }
                ]
            },
            options: {
                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
                        }
                    ]
                }
            }
        });
    }

    setColorblind() {
        this.isColorblind = !this.isColorblind;
    }

    formatDataAnswers(poll) {
        if (poll && poll.pollType === "special dates") {
            this.initPollCounter();
            poll.answers.forEach(response => {
                switch (response.text) {
                    case "yes":
                        this.yesList[this.nbPoll - 1]++;
                        break;
                    case "maybe":
                        this.maybeList[this.nbPoll - 1]++;
                        break;
                    case "no":
                        this.noList[this.nbPoll - 1]++;
                        break;
                }
            });
        }
    }

    initPollCounter() {
        this.nbPoll++;
        this.dateList[this.nbPoll -1] = "jeudi";
        this.maybeList[this.nbPoll - 1] = 0;
        this.yesList[this.nbPoll - 1] = 0;
        this.noList[this.nbPoll - 1] = 0;
    }
}