tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

Merge branch 'issue-36' into 'dev'

Browse Source 
#36 graphique de répartition des votes à réutiliser

See merge request framasoft/framadate/funky-framadate-front!13
This commit is contained in:
ty kayn 2019-11-19 11:39:08 +01:00
commit a01977ef53
10 changed files with 293 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
package-lock.json generated
View File

@ -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
}
}
},

1
package.json
View File

@ -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",

2
src/app/app.module.ts
View File

@ -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,
],

52
src/app/config/Routes.ts
View File

@ -1,31 +1,31 @@
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";
/**
* 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},
{path: 'votechoice', component: VoteChoiceComponent},
]
;
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 },
{ path: 'votechoice', component: VoteChoiceComponent}
];

20
src/app/poll-graphic/poll-graphic.component.html Normal file
View File

@ -0,0 +1,20 @@
<select
id="selectColorblind"
name="selector"
autofocus="autofocus"
[(ngModel)]="isColorblind"
(change)="setColorblind()"
>
<option value="colorblind">
{{ "pollGraphic.choiceColorblind" | translate }}
</option>
<option value="notColorblind">
{{ "pollGraphic.choiceNotColorblind" | translate }}
</option>
</select>
{{ "pollGraphic.colorblindText" | translate }}
<div>
<canvas id="graph" width="100" height="50"></canvas>
</div>

4
src/app/poll-graphic/poll-graphic.component.scss Normal file
View File

@ -0,0 +1,4 @@
#selectColorblind {
direction: rtl;
padding:0;
}

25
src/app/poll-graphic/poll-graphic.component.spec.ts Normal file
View File

@ -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<PollGraphicComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PollGraphicComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PollGraphicComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

159
src/app/poll-graphic/poll-graphic.component.ts Normal file
View File

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

5
src/assets/i18n/en.json
View File

@ -60,5 +60,10 @@
"votes": "Votes",
"archiving": "Archiving",
"access": "Access to the pool"
},
"pollGraphic":{
"choiceColorblind":"I am",
"choiceNotColorblind":"I am not",
"colorblindText":"colorblind."
}
}

5
src/assets/i18n/fr.json
View File

@ -62,5 +62,10 @@
"votes": "Votes",
"archiving": "Archivage",
"access": "Accès au sondage"
},
"pollGraphic":{
"choiceColorblind":"Je suis",
"choiceNotColorblind":"Je ne suis pas",
"colorblindText":"daltonien."
}
}