Merge pull request #5282 from tsiegleauq/dynamic-bar-chart-aspect-ratio

Define chart height

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"

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

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);

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>

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

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>
 

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 {

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>
 

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) {

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 *ngIf="showChart" type="doughnut" [data]="chartDataSubject | async"></os-charts>
-            </os-charts>
         </div>
     </div>