computations for the result graph

develop
Baptiste Lemoine 3 years ago
parent 7b790e3cdc
commit 1b65d58a6f
  1. 24
      src/app/config/graph-canevas-options.ts
  2. 7
      src/app/config/mock-comments.ts
  3. 62
      src/app/config/mock-poll3.ts
  4. 29
      src/app/pages/voting/voting-summary/voting-summary.component.html
  5. 8
      src/app/pages/voting/voting-summary/voting-summary.component.scss
  6. 63
      src/app/pages/voting/voting-summary/voting-summary.component.ts
  7. 31
      src/app/poll-graphic/poll-graphic.component.html
  8. 1
      src/app/poll-graphic/poll-graphic.component.scss
  9. 75
      src/app/poll-graphic/poll-graphic.component.ts

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

@ -4,5 +4,10 @@ export const mockComments = [
date: "23 décembre 2019",
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",
}
},
{
name: "Marylin",
date: "5 Janvier 2020",
text: "j'ai vu de la lumière o_o",
},
];

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

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

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

@ -1,19 +1,64 @@
import { Component, OnInit } from '@angular/core';
import {BaseComponent} from "../../base-page/base.component";
import {Component, Input, OnInit} from '@angular/core';
import {ConfigService} from "../../../services/config.service";
import {mockPoll3} from "../../../config/mock-poll3";
@Component({
selector: 'framadate-voting-summary',
templateUrl: './voting-summary.component.html',
styleUrls: ['./voting-summary.component.scss']
selector: 'framadate-voting-summary',
templateUrl: './voting-summary.component.html',
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() {
}
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)
}
}

@ -6,21 +6,24 @@
(change)="toggleColorblind()"
class="input"
>
<option value="true">
<option value="true" >
{{ "pollGraphic.choiceColorblind" | translate }}
</option>
<option value="false">
</option >
<option value="false" >
{{ "pollGraphic.choiceNotColorblind" | translate }}
</option>
</select>
<span class="colorblind">
</option >
</select >
<span class="colorblind" >
{{ "pollGraphic.colorblindText" | translate }}
</span>
<div>
<canvas id="graph" width="100" height="50"></canvas>
</div>
</span >
<div class='well' >
work in progress to link data with poll config
</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>

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

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

Loading…
Cancel
Save