2019-11-13 18:18:42 +01:00
|
|
|
import { Component, OnInit } from "@angular/core";
|
|
|
|
import { Chart } from "chart.js";
|
2019-10-23 10:45:30 +02:00
|
|
|
|
|
|
|
@Component({
|
2019-11-13 18:18:42 +01:00
|
|
|
selector: "framadate-poll-graphic",
|
|
|
|
templateUrl: "./poll-graphic.component.html",
|
|
|
|
styleUrls: ["./poll-graphic.component.scss"]
|
2019-10-23 10:45:30 +02:00
|
|
|
})
|
|
|
|
export class PollGraphicComponent implements OnInit {
|
2019-11-13 18:18:42 +01:00
|
|
|
isColorblind: boolean;
|
|
|
|
lineChart: Chart;
|
|
|
|
pollData: any;
|
2019-10-23 10:45:30 +02:00
|
|
|
|
2019-11-13 18:18:42 +01:00
|
|
|
constructor() {}
|
2019-10-23 15:39:16 +02:00
|
|
|
|
2019-11-13 18:18:42 +01:00
|
|
|
ngOnInit() {
|
2019-10-23 15:39:16 +02:00
|
|
|
|
2019-11-13 18:18:42 +01:00
|
|
|
//const data = this.formatDataAnswers();
|
2019-10-23 10:45:30 +02:00
|
|
|
|
2019-11-13 18:18:42 +01:00
|
|
|
this.isColorblind = false;
|
2019-11-18 10:19:28 +01:00
|
|
|
this.pollData = new Chart(document.getElementById("graph"), {
|
|
|
|
type: 'horizontalBar',
|
2019-11-13 18:18:42 +01:00
|
|
|
data: {
|
2019-11-18 10:19:28 +01:00
|
|
|
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],
|
|
|
|
}]
|
2019-11-13 18:18:42 +01:00
|
|
|
},
|
|
|
|
options: {
|
2019-11-18 10:19:28 +01:00
|
|
|
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,
|
|
|
|
}]
|
|
|
|
},
|
2019-11-13 18:18:42 +01:00
|
|
|
}
|
2019-11-18 10:19:28 +01:00
|
|
|
});
|
|
|
|
}
|
2019-11-13 18:18:42 +01:00
|
|
|
|
|
|
|
setColorblind() {
|
|
|
|
this.isColorblind = !this.isColorblind;
|
|
|
|
}
|
|
|
|
|
2019-11-18 10:19:28 +01:00
|
|
|
formatDataAnswers(){
|
2019-11-13 18:18:42 +01:00
|
|
|
|
|
|
|
}
|
|
|
|
|
2019-11-18 10:19:28 +01:00
|
|
|
|
2019-10-23 10:45:30 +02:00
|
|
|
}
|