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/package.json b/package.json index 2ec1cff1..5cb7f424 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", "ngx-markdown": "^8.2.1", "rxjs": "~6.4.0", "tslib": "^1.10.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6c6e47fa..fcad575c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,6 +38,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) { @@ -73,6 +74,7 @@ export function HttpLoaderFactory(http: HttpClient) { VotingChoiceComponent, PasswordComponent, HomeComponent, + PollGraphicComponent, VoteChoiceComponent, ], diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index a5ce52ef..af8f3df6 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -1,13 +1,14 @@ -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'; import {VoteChoiceComponent} from "../vote-choice/vote-choice.component"; /** @@ -27,6 +28,7 @@ export const Routes = {path: 'step/visibility', component: VisibilityComponent}, {path: 'step/resume', component: ResumeComponent}, {path: 'step/end', component: EndConfirmationComponent}, + { path: "graphic/:poll", component: PollGraphicComponent }, {path: 'votechoice', component: VoteChoiceComponent}, ] ; 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..731002b5 --- /dev/null +++ b/src/app/poll-graphic/poll-graphic.component.html @@ -0,0 +1,20 @@ + + {{ "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 new file mode 100644 index 00000000..5eb2a3bb --- /dev/null +++ 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.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..2ad7a7f9 --- /dev/null +++ b/src/app/poll-graphic/poll-graphic.component.ts @@ -0,0 +1,159 @@ +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; + } +} 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 1f6621e2..f29182f7 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -62,5 +62,10 @@ "votes": "Votes", "archiving": "Archivage", "access": "Accès au sondage" + }, + "pollGraphic":{ + "choiceColorblind":"Je suis", + "choiceNotColorblind":"Je ne suis pas", + "colorblindText":"daltonien." } }