From e3b2e685f18fae70eec7ef2c622c34a89fc6e9c6 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 11 Feb 2022 09:36:22 +0100
Subject: [PATCH] result simple bar width calculations

---
 .../stepper/stepper.component.html            |  2 +-
 .../choice-table/choice-table.component.html  | 14 ++++++++---
 .../choice-table/choice-table.component.ts    |  6 +++++
 .../consultation/consultation.component.html  | 24 +++++++++----------
 .../poll-results-dinum.component.html         |  6 ++++-
 .../poll-results-dinum.component.ts           |  6 ++++-
 src/styles/partials/_forms.scss               |  3 +++
 7 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 144109e5..8985ad44 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -109,7 +109,7 @@
 		[(visible)]="display_cancel_dialog"
 		[breakpoints]="{ '960px': '75vw' }"
 		[style]="{ width: '50vw', 'border-radius': '1rem' }"
-		[styleClass]="'round-borders'"
+		[styleClass]="'roundToPercentWidth-borders'"
 		[draggable]="false"
 		[showHeader]="false"
 		[resizable]="false"
diff --git a/src/app/features/consultation/choice-table/choice-table.component.html b/src/app/features/consultation/choice-table/choice-table.component.html
index 30f4a3c0..c916da8e 100644
--- a/src/app/features/consultation/choice-table/choice-table.component.html
+++ b/src/app/features/consultation/choice-table/choice-table.component.html
@@ -4,8 +4,13 @@
 			{{ 'participation.yes' | translate }}
 		</div>
 		<div class="column">
-			<div class="bar has-text-centered has-background-yes" *ngIf="choice.yes">
+			<div
+				class="bar has-text-centered has-background-yes"
+				*ngIf="choice.yes"
+				[style.width]="roundToPercentWidth(choice.yes.count)"
+			>
 				{{ choice.yes.count }}
+				<!--				sur {{countMaxVotesForThisAnswer}}. {{roundToPercentWidth(choice.yes.count) }}-->
 			</div>
 		</div>
 	</div>
@@ -14,7 +19,10 @@
 			{{ 'participation.maybe' | translate }}
 		</div>
 		<div class="column">
-			<div class="bar has-text-centered has-background-maybe">
+			<div
+				class="bar has-text-centered has-background-maybe"
+				[style.width]="roundToPercentWidth(choice.maybe.count)"
+			>
 				{{ choice.maybe.count }}
 			</div>
 		</div>
@@ -24,7 +32,7 @@
 			{{ 'participation.no' | translate }}
 		</div>
 		<div class="column">
-			<div class="bar has-text-centered has-background-no">
+			<div class="bar has-text-centered has-background-no" [style.width]="roundToPercentWidth(choice.no.count)">
 				{{ choice.no.count }}
 			</div>
 		</div>
diff --git a/src/app/features/consultation/choice-table/choice-table.component.ts b/src/app/features/consultation/choice-table/choice-table.component.ts
index c89dfba2..92343dfb 100644
--- a/src/app/features/consultation/choice-table/choice-table.component.ts
+++ b/src/app/features/consultation/choice-table/choice-table.component.ts
@@ -9,7 +9,13 @@ import { Choice } from '../../../core/models/choice.model';
 export class ChoiceTableComponent implements OnInit {
 	@Input() detailledDisplay: boolean;
 	@Input() choice: Choice;
+	@Input() countMaxVotesForThisAnswer: number = 5;
+
 	constructor() {}
 
 	ngOnInit(): void {}
+
+	roundToPercentWidth(number: number) {
+		return Math.ceil((number / this.countMaxVotesForThisAnswer) * 100) + '%';
+	}
 }
diff --git a/src/app/features/consultation/consultation.component.html b/src/app/features/consultation/consultation.component.html
index 6b9408e6..1c380fcf 100644
--- a/src/app/features/consultation/consultation.component.html
+++ b/src/app/features/consultation/consultation.component.html
@@ -106,18 +106,18 @@
 
 			<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
 		</section>
-		<section class="poll-comments">
-			<h2 class="title is-3">
-				{{ 'participation.comments' | translate }}
-			</h2>
-			<div class="rounded-block">
-				<!--					*ngIf="poll.allow_comments"-->
-				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
-				<div class="alert has-background-info" *ngIf="!poll.allow_comments">
-					Ce sondage ne permet pas d'ajouter de commentaires
-				</div>
-			</div>
-		</section>
+		<!--		<section class="poll-comments">-->
+		<!--			<h2 class="title is-3">-->
+		<!--				{{ 'participation.comments' | translate }}-->
+		<!--			</h2>-->
+		<!--			<div class="rounded-block">-->
+		<!--				&lt;!&ndash;					*ngIf="poll.allow_comments"&ndash;&gt;-->
+		<!--				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>-->
+		<!--				<div class="alert has-background-info" *ngIf="!poll.allow_comments">-->
+		<!--					Ce sondage ne permet pas d'ajouter de commentaires-->
+		<!--				</div>-->
+		<!--			</div>-->
+		<!--		</section>-->
 	</div>
 </section>
 <section class="loadin_poll" *ngIf="fetching">
diff --git a/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html b/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html
index e54fa00c..1fda1849 100644
--- a/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html
+++ b/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.html
@@ -31,7 +31,11 @@
 					</div>
 					<div class="choice-header" *ngIf="poll.max_score > 0"></div>
 
-					<app-choice-table [choice]="choice" [detailledDisplay]="detailledDisplay"></app-choice-table>
+					<app-choice-table
+						[choice]="choice"
+						[detailledDisplay]="detailledDisplay"
+						[countMaxVotesForThisAnswer]="getMax(choice)"
+					></app-choice-table>
 				</div>
 			</div>
 		</div>
diff --git a/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts b/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts
index d22f0ddc..1da8133c 100644
--- a/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts
+++ b/src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.ts
@@ -3,6 +3,7 @@ import { Poll } from '../../../core/models/poll.model';
 import { Answer } from '../../../core/enums/answer.enum';
 import { ModalService } from '../../../core/services/modal.service';
 import { StorageService } from '../../../core/services/storage.service';
+import { Choice, ChoiceGroup } from '../../../core/models/choice.model';
 
 @Component({
 	selector: 'app-poll-results-dinum',
@@ -12,7 +13,6 @@ import { StorageService } from '../../../core/services/storage.service';
 export class PollResultsDinumComponent implements OnInit {
 	@Input() public poll: Poll;
 	@Input() public detailledDisplay: boolean = false;
-	public answerEnum = Answer;
 	constructor(private modalService: ModalService, private storageService: StorageService) {}
 
 	ngOnInit(): void {}
@@ -24,4 +24,8 @@ export class PollResultsDinumComponent implements OnInit {
 	showAsDate(date_string: string) {
 		return new Date(date_string);
 	}
+
+	getMax(c: Choice) {
+		return Math.max(c[Answer.YES].count, c[Answer.MAYBE].count, c[Answer.NO].count);
+	}
 }
diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss
index 4472162e..2744e34d 100644
--- a/src/styles/partials/_forms.scss
+++ b/src/styles/partials/_forms.scss
@@ -360,6 +360,9 @@ label {
 	}
 }
 
+.people {
+	max-width: $main-column-width/2;
+}
 .bar-div {
 	padding: 0.25rem 0.025rem;
 	text-align: center;