From a006e4d42a0bd1bb85361952f47c27aa5ca3307d Mon Sep 17 00:00:00 2001 From: alrom8 Date: Wed, 23 Oct 2019 10:45:30 +0200 Subject: [PATCH 1/6] ajout composant graphique sondage --- src/app/app.module.ts | 2 ++ .../poll-graphic/poll-graphic.component.html | 1 + .../poll-graphic/poll-graphic.component.scss | 0 .../poll-graphic.component.spec.ts | 25 +++++++++++++++++++ .../poll-graphic/poll-graphic.component.ts | 15 +++++++++++ 5 files changed, 43 insertions(+) create mode 100644 src/app/poll-graphic/poll-graphic.component.html create mode 100644 src/app/poll-graphic/poll-graphic.component.scss create mode 100644 src/app/poll-graphic/poll-graphic.component.spec.ts create mode 100644 src/app/poll-graphic/poll-graphic.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6f6a2080..26cd56de 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -36,6 +36,7 @@ import { TranslateService } from '@ngx-translate/core'; import {TranslateHttpLoader} from '@ngx-translate/http-loader'; +import { PollGraphicComponent } from './poll-graphic/poll-graphic.component'; export class MyMissingTranslationHandler implements MissingTranslationHandler { handle(params: MissingTranslationHandlerParams) { @@ -71,6 +72,7 @@ export function HttpLoaderFactory(http: HttpClient) { VotingChoiceComponent, PasswordComponent, HomeComponent, + PollGraphicComponent, ], imports: [ diff --git a/src/app/poll-graphic/poll-graphic.component.html b/src/app/poll-graphic/poll-graphic.component.html new file mode 100644 index 00000000..7e2222cd --- /dev/null +++ b/src/app/poll-graphic/poll-graphic.component.html @@ -0,0 +1 @@ +

poll-graphic works!

diff --git a/src/app/poll-graphic/poll-graphic.component.scss b/src/app/poll-graphic/poll-graphic.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/poll-graphic/poll-graphic.component.spec.ts b/src/app/poll-graphic/poll-graphic.component.spec.ts new file mode 100644 index 00000000..ed5118d3 --- /dev/null +++ b/src/app/poll-graphic/poll-graphic.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PollGraphicComponent } from './poll-graphic.component'; + +describe('PollGraphicComponent', () => { + let component: PollGraphicComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PollGraphicComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PollGraphicComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/poll-graphic/poll-graphic.component.ts b/src/app/poll-graphic/poll-graphic.component.ts new file mode 100644 index 00000000..5f2b37d8 --- /dev/null +++ b/src/app/poll-graphic/poll-graphic.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'framadate-poll-graphic', + templateUrl: './poll-graphic.component.html', + styleUrls: ['./poll-graphic.component.scss'] +}) +export class PollGraphicComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} From 46a02846bfd0a49066cb03fcce04c1f239df5a8a Mon Sep 17 00:00:00 2001 From: alrom8 Date: Wed, 23 Oct 2019 13:39:00 +0200 Subject: [PATCH 2/6] #36 : ajout librairie chartjs --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index c11a46c6..f690db3a 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "@angular/router": "~8.2.0", "@ngx-translate/core": "^11.0.1", "@ngx-translate/http-loader": "^4.0.0", + "chart.js": "^2.8.0", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" From 5f2a2b4461f6a4b8a33b6d64af4180f7e1ff85de Mon Sep 17 00:00:00 2001 From: alrom8 Date: Wed, 23 Oct 2019 15:39:16 +0200 Subject: [PATCH 3/6] issue 36 : select daltonien --- src/app/config/Routes.ts | 50 +++++++++---------- .../poll-graphic/poll-graphic.component.html | 16 +++++- .../poll-graphic/poll-graphic.component.scss | 4 ++ .../poll-graphic/poll-graphic.component.ts | 10 +++- src/assets/i18n/en.json | 5 ++ src/assets/i18n/fr.json | 5 ++ 6 files changed, 63 insertions(+), 27 deletions(-) diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index 90a969ce..e1cd403b 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -1,29 +1,29 @@ -import {KindComponent} from '../pages/kind/kind.component'; -import {DatesComponent} from '../pages/dates/dates.component'; -import {VisibilityComponent} from '../pages/visibility/visibility.component'; -import {ResumeComponent} from '../pages/resume/resume.component'; -import {PicturesComponent} from '../pages/pictures/pictures.component'; -import {EndConfirmationComponent} from '../pages/end-confirmation/end-confirmation.component'; -import {AnswersComponent} from '../pages/answers/answers.component'; -import {CreateOrRetrieveComponent} from '../pages/create-or-retrieve/create-or-retrieve.component'; -import {BaseComponent} from '../pages/base-page/base.component'; -import {HomeComponent} from "../pages/home/home.component"; +import { KindComponent } from "../pages/kind/kind.component"; +import { DatesComponent } from "../pages/dates/dates.component"; +import { VisibilityComponent } from "../pages/visibility/visibility.component"; +import { ResumeComponent } from "../pages/resume/resume.component"; +import { PicturesComponent } from "../pages/pictures/pictures.component"; +import { EndConfirmationComponent } from "../pages/end-confirmation/end-confirmation.component"; +import { AnswersComponent } from "../pages/answers/answers.component"; +import { CreateOrRetrieveComponent } from "../pages/create-or-retrieve/create-or-retrieve.component"; +import { BaseComponent } from "../pages/base-page/base.component"; +import { HomeComponent } from "../pages/home/home.component"; +import { PollGraphicComponent } from '../poll-graphic/poll-graphic.component'; /** * each step in the form is a component */ -export const Routes = - [ - {path: '', component: CreateOrRetrieveComponent}, - {path: 'home', component: HomeComponent}, - {path: 'base', component: BaseComponent}, - {path: 'step/creation', component: CreateOrRetrieveComponent}, - {path: 'step/date', component: DatesComponent}, - {path: 'step/kind', component: KindComponent}, - {path: 'step/answers', component: AnswersComponent}, - {path: 'step/pictures', component: PicturesComponent}, - {path: 'step/visibility', component: VisibilityComponent}, - {path: 'step/resume', component: ResumeComponent}, - {path: 'step/end', component: EndConfirmationComponent}, - ] -; +export const Routes = [ + { path: "", component: CreateOrRetrieveComponent }, + { path: "home", component: HomeComponent }, + { path: "base", component: BaseComponent }, + { path: "step/creation", component: CreateOrRetrieveComponent }, + { path: "step/date", component: DatesComponent }, + { path: "step/kind", component: KindComponent }, + { path: "step/answers", component: AnswersComponent }, + { path: "step/pictures", component: PicturesComponent }, + { path: "step/visibility", component: VisibilityComponent }, + { path: "step/resume", component: ResumeComponent }, + { path: "step/end", component: EndConfirmationComponent }, + { path: "graphic/:poll", component: PollGraphicComponent }, +]; diff --git a/src/app/poll-graphic/poll-graphic.component.html b/src/app/poll-graphic/poll-graphic.component.html index 7e2222cd..9d945408 100644 --- a/src/app/poll-graphic/poll-graphic.component.html +++ b/src/app/poll-graphic/poll-graphic.component.html @@ -1 +1,15 @@ -

poll-graphic works!

+ + {{ "pollGraphic.colorblindText" | translate }} \ No newline at end of file diff --git a/src/app/poll-graphic/poll-graphic.component.scss b/src/app/poll-graphic/poll-graphic.component.scss index e69de29b..5eb2a3bb 100644 --- a/src/app/poll-graphic/poll-graphic.component.scss +++ b/src/app/poll-graphic/poll-graphic.component.scss @@ -0,0 +1,4 @@ +#selectColorblind { + direction: rtl; + padding:0; +} diff --git a/src/app/poll-graphic/poll-graphic.component.ts b/src/app/poll-graphic/poll-graphic.component.ts index 5f2b37d8..d00e5667 100644 --- a/src/app/poll-graphic/poll-graphic.component.ts +++ b/src/app/poll-graphic/poll-graphic.component.ts @@ -7,7 +7,15 @@ import { Component, OnInit } from '@angular/core'; }) export class PollGraphicComponent implements OnInit { - constructor() { } + isColorblind:boolean; + + constructor() { + this.isColorblind = false; + } + + setColorblind(){ + this.isColorblind = !this.isColorblind; + } ngOnInit() { } diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 14073764..718787fb 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -60,5 +60,10 @@ "votes": "Votes", "archiving": "Archiving", "access": "Access to the pool" + }, + "pollGraphic":{ + "choiceColorblind":"I am", + "choiceNotColorblind":"I am not", + "colorblindText":"colorblind." } } diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 44ba5fac..5c99fd2f 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -60,5 +60,10 @@ "votes": "Votes", "archiving": "Archivage", "access": "Accès au sondage" + }, + "pollGraphic":{ + "choiceColorblind":"Je suis", + "choiceNotColorblind":"Je ne suis pas", + "colorblindText":"daltonien." } } From 00597410277aa3c387a8b33d9e31033adc853fc9 Mon Sep 17 00:00:00 2001 From: alrom8 Date: Wed, 13 Nov 2019 18:18:42 +0100 Subject: [PATCH 4/6] =?UTF-8?q?issue-36=20:=20restitution=20des=20votes=20?= =?UTF-8?q?d'un=20sondage=20sous=20forme=20de=20graphiques.=20d=C3=A9but?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../poll-graphic/poll-graphic.component.html | 7 +- .../poll-graphic/poll-graphic.component.ts | 213 ++++++++++++++++-- 2 files changed, 206 insertions(+), 14 deletions(-) diff --git a/src/app/poll-graphic/poll-graphic.component.html b/src/app/poll-graphic/poll-graphic.component.html index 9d945408..99bf81d1 100644 --- a/src/app/poll-graphic/poll-graphic.component.html +++ b/src/app/poll-graphic/poll-graphic.component.html @@ -12,4 +12,9 @@ {{ "pollGraphic.choiceNotColorblind" | translate }} - {{ "pollGraphic.colorblindText" | translate }} \ No newline at end of file + {{ "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 d00e5667..a823fb0d 100644 --- a/src/app/poll-graphic/poll-graphic.component.ts +++ b/src/app/poll-graphic/poll-graphic.component.ts @@ -1,23 +1,210 @@ -import { Component, OnInit } from '@angular/core'; +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'] + 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; - isColorblind:boolean; + constructor() {} - constructor() { - this.isColorblind = false; - } + ngOnInit() { - setColorblind(){ - this.isColorblind = !this.isColorblind; - } + //const data = this.formatDataAnswers(); - ngOnInit() { - } + 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; + } } From 723a0f9527776f1de653464b979980c662a6e909 Mon Sep 17 00:00:00 2001 From: alrom8 Date: Mon, 18 Nov 2019 10:19:28 +0100 Subject: [PATCH 5/6] 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; - } + } From c36a3b064cc1330628037c57ffff9cf5c41c183c Mon Sep 17 00:00:00 2001 From: alrom8 Date: Tue, 19 Nov 2019 10:55:56 +0100 Subject: [PATCH 6/6] =?UTF-8?q?Ajout=20formatage=20donn=C3=A9es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 89 ++++----- .../poll-graphic/poll-graphic.component.ts | 171 +++++++++++++----- 2 files changed, 174 insertions(+), 86 deletions(-) diff --git a/package-lock.json b/package-lock.json index aa8a150c..f9a0b7dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2512,6 +2512,32 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "chart.js": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz", + "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==", + "requires": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } + }, + "chartjs-color": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", + "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", + "requires": { + "chartjs-color-string": "^0.6.0", + "color-convert": "^1.9.3" + } + }, + "chartjs-color-string": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", + "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", + "requires": { + "color-name": "^1.0.0" + } + }, "chokidar": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.0.2.tgz", @@ -2739,7 +2765,6 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -2747,8 +2772,7 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, "colors": { "version": "1.1.2", @@ -5659,8 +5683,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -5703,8 +5726,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -5715,8 +5737,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -5833,8 +5854,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -5846,7 +5866,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5876,7 +5895,6 @@ "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5895,7 +5913,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -5989,7 +6006,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6075,8 +6091,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -6112,7 +6127,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6132,7 +6146,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6176,14 +6189,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -6913,6 +6924,11 @@ } } }, + "moment": { + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", + "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -11265,8 +11281,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -11309,8 +11324,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -11321,8 +11335,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -11439,8 +11452,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -11452,7 +11464,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -11482,7 +11493,6 @@ "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -11501,7 +11511,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -11595,7 +11604,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -11681,8 +11689,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -11718,7 +11725,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11738,7 +11744,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -11782,14 +11787,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/src/app/poll-graphic/poll-graphic.component.ts b/src/app/poll-graphic/poll-graphic.component.ts index c7d52b91..2ad7a7f9 100644 --- a/src/app/poll-graphic/poll-graphic.component.ts +++ b/src/app/poll-graphic/poll-graphic.component.ts @@ -10,65 +10,150 @@ 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" + }, - //const data = this.formatDataAnswers(); + { + 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', + type: "horizontalBar", data: { - 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], - }] + 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, - }] - }, + 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(){ - + 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; + } }