From d646691961d809ad33f451fe3ba0a10a90a6d64e Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Thu, 26 Mar 2020 10:40:42 +0100
Subject: [PATCH] Define chart height

Bar chart height will be calculated by the number of labels to show
Circle chart height should scale with their container
---
 .../components/charts/charts.component.html   |  2 +-
 .../components/charts/charts.component.scss   |  5 +----
 .../components/charts/charts.component.ts     | 22 ++++++++++++-------
 .../motion-poll-detail-content.component.html |  2 +-
 .../motion-poll-detail-content.component.scss |  2 --
 .../assignment-poll-detail.component.html     |  1 -
 .../assignment-poll-detail.component.scss     |  5 -----
 .../assignment-poll.component.html            |  1 -
 .../services/assignment-poll.service.ts       |  2 --
 .../motion-poll/motion-poll.component.html    |  3 +--
 10 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/client/src/app/shared/components/charts/charts.component.html b/client/src/app/shared/components/charts/charts.component.html
index 9d90c9240..dc711cc18 100644
--- a/client/src/app/shared/components/charts/charts.component.html
+++ b/client/src/app/shared/components/charts/charts.component.html
@@ -1,4 +1,4 @@
-<div class="charts-wrapper" [ngClass]="[hasPadding ? 'has-padding' : '']">
+<div class="charts-wrapper" [style.height]="calcBarChartHeight()">
     <canvas
         class="chart-js-canvas"
         *ngIf="chartData && chartData.length"
diff --git a/client/src/app/shared/components/charts/charts.component.scss b/client/src/app/shared/components/charts/charts.component.scss
index e1e0e6aee..6139970a5 100644
--- a/client/src/app/shared/components/charts/charts.component.scss
+++ b/client/src/app/shared/components/charts/charts.component.scss
@@ -1,9 +1,6 @@
 .charts-wrapper {
     position: relative;
     display: block;
+    height: 100%;
     margin: auto;
-
-    &.has-padding {
-        padding: 16px;
-    }
 }
diff --git a/client/src/app/shared/components/charts/charts.component.ts b/client/src/app/shared/components/charts/charts.component.ts
index b0516cf2b..984e27a5e 100644
--- a/client/src/app/shared/components/charts/charts.component.ts
+++ b/client/src/app/shared/components/charts/charts.component.ts
@@ -55,12 +55,6 @@ export class ChartsComponent extends BaseViewComponent {
     @Input()
     public labels: Label[];
 
-    /**
-     * Determine, if the chart has some padding at the borders.
-     */
-    @Input()
-    public hasPadding = true;
-
     /**
      * Show a legend
      */
@@ -89,7 +83,8 @@ export class ChartsComponent extends BaseViewComponent {
     public get chartOptions(): ChartOptions {
         if (this.isCircle) {
             return {
-                aspectRatio: 1,
+                responsive: true,
+                maintainAspectRatio: false,
                 tooltips: {
                     enabled: false
                 },
@@ -99,7 +94,8 @@ export class ChartsComponent extends BaseViewComponent {
             };
         } else {
             return {
-                aspectRatio: 3,
+                responsive: true,
+                maintainAspectRatio: false,
                 tooltips: {
                     enabled: false
                 },
@@ -145,6 +141,16 @@ export class ChartsComponent extends BaseViewComponent {
         super(title, translate, matSnackbar);
     }
 
+    public calcBarChartHeight(): string | undefined {
+        if (!this.isCircle) {
+            const baseHeight = 120;
+            const perLabel = 60;
+            return `${baseHeight + perLabel * this.labels.length}px`;
+        } else {
+            return undefined;
+        }
+    }
+
     private progressInputData(inputChartData: ChartData): void {
         if (this.isCircle) {
             this.chartData = inputChartData.flatMap(chartDate => chartDate.data);
diff --git a/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html b/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html
index 92c73a2a0..47fbc459c 100644
--- a/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html
+++ b/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html
@@ -34,6 +34,6 @@
 
     <!-- Chart -->
     <div class="doughnut-chart" *ngIf="showChart">
-        <os-charts type="doughnut" [data]="chartData | async" [hasPadding]="false"></os-charts>
+        <os-charts type="doughnut" [data]="chartData | async"></os-charts>
     </div>
 </div>
diff --git a/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.scss b/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.scss
index 01b374641..22e61846f 100644
--- a/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.scss
+++ b/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.scss
@@ -25,7 +25,5 @@
 
     .doughnut-chart {
         display: block;
-        margin-top: auto;
-        margin-bottom: auto;
     }
 }
diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
index beb94f624..033fe4e7f 100644
--- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html
@@ -39,7 +39,6 @@
                     *ngIf="chartDataSubject.value"
                     [labels]="candidatesLabels"
                     [data]="chartDataSubject | async"
-                    [hasPadding]="false"
                 ></os-charts>
             </div>
 
diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss
index 12a0f856a..edc458269 100644
--- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss
+++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss
@@ -1,11 +1,6 @@
 .assignment-result-wrapper {
     .chart-wrapper {
         margin-top: 2em;
-        .pie-chart {
-            margin-left: auto;
-            margin-right: auto;
-            width: 50%;
-        }
     }
 
     .named-result-table {
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
index c883c20bb..f358ad6c9 100644
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
@@ -64,7 +64,6 @@
                     routerLink="/assignments/polls/{{ poll.id }}"
                     [labels]="candidatesLabels"
                     [data]="chartDataSubject | async"
-                    [hasPadding]="false"
                 ></os-charts>
             </div>
 
diff --git a/client/src/app/site/assignments/services/assignment-poll.service.ts b/client/src/app/site/assignments/services/assignment-poll.service.ts
index b70f1c8b5..cb9e22188 100644
--- a/client/src/app/site/assignments/services/assignment-poll.service.ts
+++ b/client/src/app/site/assignments/services/assignment-poll.service.ts
@@ -103,8 +103,6 @@ export class AssignmentPollService extends PollService {
     }
 
     public generateTableData(poll: ViewAssignmentPoll | PollData): PollTableData[] {
-        console.log('poll: ', poll);
-
         const tableData: PollTableData[] = poll.options
             .sort((a, b) => {
                 if (this.sortByVote) {
diff --git a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
index 5a31c7b16..1826bcbab 100644
--- a/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
+++ b/client/src/app/site/motions/modules/motion-poll/motion-poll/motion-poll.component.html
@@ -87,8 +87,7 @@
             </div>
         </div>
         <div class="doughnut-chart" [routerLink]="pollLink">
-            <os-charts *ngIf="showChart" type="doughnut" [data]="chartDataSubject | async" [hasPadding]="false">
-            </os-charts>
+            <os-charts *ngIf="showChart" type="doughnut" [data]="chartDataSubject | async"></os-charts>
         </div>
     </div>