computations for the result graph

This commit is contained in:
Baptiste Lemoine 2020-01-16 16:25:40 +01:00
parent 7b790e3cdc
commit 1b65d58a6f
9 changed files with 222 additions and 78 deletions

View File

@ -0,0 +1,24 @@
export var graphOptions = {
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
}
]
}
};

View File

@ -4,5 +4,10 @@ export const mockComments = [
date: "23 décembre 2019", date: "23 décembre 2019",
text: "Pokem ipsum dolor sit amet Electric Cottonee Scratch Leech Life Ice Berry Ducklett. Leaf Green Durant Zoroark\n" + text: "Pokem ipsum dolor sit amet Electric Cottonee Scratch Leech Life Ice Berry Ducklett. Leaf Green Durant Zoroark\n" +
" Skitty Rock Luxio Surskit. Glacier Badge", " Skitty Rock Luxio Surskit. Glacier Badge",
} },
{
name: "Marylin",
date: "5 Janvier 2020",
text: "j'ai vu de la lumière o_o",
},
]; ];

View File

@ -1,3 +1,5 @@
import {mockComments} from "./mock-comments";
export const mockPoll3 = { export const mockPoll3 = {
"message": "your poll config", "message": "your poll config",
"data": { "data": {
@ -35,15 +37,67 @@ export const mockPoll3 = {
"comments": {}, "comments": {},
"defaultExpiracyDaysFromNow": 60 "defaultExpiracyDaysFromNow": 60
}, },
"stacks_count": 2, "stacks_count": 4,
"stacks": [ "stacks": [
{ {
"pseudo": "Wulfila", "pseudo": "Wulfila",
"votes": {} "votes": [
{
"id": 5,
"answer": "yes",
},
{
"id": 6,
"answer": "maybe",
},
{
"id": 7,
"answer": "no",
},
]
}, },
{ {
"pseudo": "Tykayn", "pseudo": "Tykayn",
"votes": {} "votes": [
{
"id": 5,
"answer": "yes",
},
{
"id": 8,
"answer": "maybe",
},
{
"id": 9,
"answer": "no",
},
]
},
{
"pseudo": "CopyCat",
"votes": [
{
"id": 5,
"answer": "yes",
},
{
"id": 8,
"answer": "maybe",
},
{
"id": 9,
"answer": "no",
},
]
},
{
"pseudo": "Marylin",
"votes": [
{
"id": 5,
"answer": "yes",
}
]
} }
], ],
"choices_count": 7, "choices_count": 7,
@ -182,5 +236,5 @@ export const mockPoll3 = {
"answer": null "answer": null
} }
], ],
"comments": [] "comments": mockComments
} }

View File

@ -1 +1,28 @@
<p>voting-summary works!</p> <h2 >Résumé</h2 >
<div class="preferred" >
<i class='fa fa-star' ></i >
Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :
<span class='preferred-result' >
{{preferred}}
</span >
</div >
<div
class='line vote-stack'
*ngFor='let voteStack of pollconfig.stacks' >
<div class='vs' >
<div class='person' >
{{voteStack.pseudo}}
</div >
<div class='votes-of-the-person' >
<div
class='vote'
*ngFor='let v of voteStack.votes' >
<div class='id' >
{{v.id}}
{{v.answer}}
</div >
</div >
</div >
</div >
</div >

View File

@ -0,0 +1,8 @@
.person {
font-weight: 700;
}
.preferred-result {
font-weight: 700;
font-size: 1.5em;
}

View File

@ -1,19 +1,64 @@
import { Component, OnInit } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {BaseComponent} from "../../base-page/base.component";
import {ConfigService} from "../../../services/config.service"; import {ConfigService} from "../../../services/config.service";
import {mockPoll3} from "../../../config/mock-poll3";
@Component({ @Component({
selector: 'framadate-voting-summary', selector: 'framadate-voting-summary',
templateUrl: './voting-summary.component.html', templateUrl: './voting-summary.component.html',
styleUrls: ['./voting-summary.component.scss'] styleUrls: ['./voting-summary.component.scss']
}) })
export class VotingSummaryComponent extends BaseComponent implements OnInit { export class VotingSummaryComponent implements OnInit {
private preferred: string = 'rien';
private counters: any = {};
@Input() private pollconfig = mockPoll3;
constructor(private config: ConfigService) {
constructor(public config: ConfigService) {
super(config);
} }
ngOnInit() { ngOnInit() {
} this.computePreferred();
}
/**
* find the most "yes"
*/
computePreferred() {
let maximumYesCount = 0;
let choice_id_max = 0;
let winners_id = [];
this.pollconfig.stacks.map(stack => {
stack.votes.map(vote => {
let choice_id = vote.id;
let answer = vote.answer;
if (!this.counters["choice_" + choice_id]) {
this.counters["choice_" + choice_id] = {
yes: 0,
maybe: 0,
no: 0,
}
}
this.counters["choice_" + choice_id][answer]++;
if (this.counters["choice_" + choice_id]['yes'] > maximumYesCount) {
choice_id_max = choice_id;
}
})
// find the favourite
})
console.log('this.counters', this.counters);
let choiceTitleFound = this.pollconfig.choices.find(elem => {
return elem.id === parseInt(choice_id_max)
})
this.preferred = choiceTitleFound.name;
console.log('choiceTitleFound', choiceTitleFound)
}
} }

View File

@ -6,21 +6,24 @@
(change)="toggleColorblind()" (change)="toggleColorblind()"
class="input" class="input"
> >
<option value="true"> <option value="true" >
{{ "pollGraphic.choiceColorblind" | translate }} {{ "pollGraphic.choiceColorblind" | translate }}
</option> </option >
<option value="false"> <option value="false" >
{{ "pollGraphic.choiceNotColorblind" | translate }} {{ "pollGraphic.choiceNotColorblind" | translate }}
</option> </option >
</select> </select >
<span class="colorblind"> <span class="colorblind" >
{{ "pollGraphic.colorblindText" | translate }} {{ "pollGraphic.colorblindText" | translate }}
</span> </span >
<div> <div class='well' >
<canvas id="graph" width="100" height="50"></canvas> work in progress to link data with poll config
</div> </div >
<div >
<canvas
id="graph"
width="100%"
height="15em" ></canvas >
</div >
<div class="preferred">
Pour l'instant, le choix ayant reçu le plus grand nombre de votes est :
{{preferred}}
</div>

View File

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

View File

@ -2,6 +2,9 @@ import {Component, Inject, OnInit} from "@angular/core";
import {Chart} from "chart.js"; import {Chart} from "chart.js";
import {DOCUMENT} from '@angular/common'; import {DOCUMENT} from '@angular/common';
import {mockGraphConfig} from "../config/mock-graph"; import {mockGraphConfig} from "../config/mock-graph";
import {graphOptions} from "../config/graph-canevas-options";
import {ConfigService} from "../services/config.service";
import {mockPoll3} from "../config/mock-poll3";
@Component({ @Component({
selector: "framadate-poll-graphic", selector: "framadate-poll-graphic",
@ -10,7 +13,8 @@ import {mockGraphConfig} from "../config/mock-graph";
}) })
export class PollGraphicComponent implements OnInit { export class PollGraphicComponent implements OnInit {
isColorblind: boolean = false; isColorblind: boolean = false;
pollData: any; pollConfigRetrieved: any = mockPoll3;
graphicConfig: any = mockGraphConfig;
preferred: any = "rien"; preferred: any = "rien";
yesList: number[] = []; yesList: number[] = [];
maybeList: number[] = []; maybeList: number[] = [];
@ -18,19 +22,17 @@ export class PollGraphicComponent implements OnInit {
nbPoll: number = 0; nbPoll: number = 0;
dateList: string[] = []; dateList: string[] = [];
constructor(@Inject(DOCUMENT) private document: any,) { constructor(@Inject(DOCUMENT) private document: any,
private config: ConfigService) {
} }
ngOnInit() { ngOnInit() {
var toto = mockGraphConfig; this.formatDataAnswers(this.graphicConfig);
this.formatDataAnswers(toto);
this.isColorblind = false; this.isColorblind = false;
this.pollData = new Chart(this.document.getElementById("graph"), { this.pollConfigRetrieved = new Chart(this.document.getElementById("graph"), {
type: "horizontalBar", type: "horizontalBar",
data: { data: {
labels: ["jeudi"], labels: this.pollConfigRetrieved.choices.map(choice => choice.name),
datasets: [ datasets: [
{ {
type: "horizontalBar", type: "horizontalBar",
@ -52,30 +54,7 @@ export class PollGraphicComponent implements OnInit {
} }
] ]
}, },
options: { options: graphOptions
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
}
]
}
}
}); });
} }
@ -84,22 +63,22 @@ export class PollGraphicComponent implements OnInit {
} }
formatDataAnswers(poll) { formatDataAnswers(poll) {
if (poll && poll.pollType === "special dates") { // if (poll && poll.pollType === "date") {
this.initPollCounter(); this.initPollCounter();
poll.answers.forEach(response => { poll.answers.forEach(response => {
switch (response.text) { switch (response.text) {
case "yes": case "yes":
this.yesList[this.nbPoll - 1]++; this.yesList[this.nbPoll - 1]++;
break; break;
case "maybe": case "maybe":
this.maybeList[this.nbPoll - 1]++; this.maybeList[this.nbPoll - 1]++;
break; break;
case "no": case "no":
this.noList[this.nbPoll - 1]++; this.noList[this.nbPoll - 1]++;
break; break;
} }
}); });
} // }
} }
initPollCounter() { initPollCounter() {