Added % on the y-axis labels when show percentages is true

nise-frontend/src/corelib/components/chart/chart.component.html

@@ -5,7 +5,7 @@
   <fieldset class="text-center">
     <input type="checkbox" checked="checked" [(ngModel)]="this.removeOutliers"> remove outliers
     <input type="checkbox" checked="checked" [(ngModel)]="this.groupData"> group data
-    <input type="checkbox" checked="checked" [(ngModel)]="this.showPercentages"> show percentages
+    <input type="checkbox" checked="checked" [(ngModel)]="this.showPercentages" (ngModelChange)="this.ngOnChanges()"> show percentages
   </fieldset>
   <ul class="chart-statistics">
     <li *ngFor="let stat of this.calculateStatistics()">

nise-frontend/src/corelib/components/chart/chart.component.ts

@@ -17,21 +17,27 @@ import {FormsModule} from "@angular/forms";
   styleUrl: './chart.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ChartComponent {
+export class ChartComponent implements OnChanges {
 
-  public barChartOptions: ChartConfiguration<'bar'>['options'] = {
-    responsive: true,
-    //@ts-ignore
-    animations: false,
-    scales: {
-      x: {
-        stacked: true,
-      },
-      y: {
-        stacked: true
+  barChartOptions: ChartConfiguration<'bar'>['options'];
+
+  ngOnChanges() {
+    const showPercentages = this.showPercentages;
+    this.barChartOptions = {
+      responsive: true,
+      //@ts-ignore
+      animations: false,
+      scales: {
+        y: {
+          ticks: {
+            callback: function(value, index, ticks) {
+              return showPercentages ? value + '%' : value;
+            }
+          }
+        }
       }
-    }
-  };
+    };
+  }
 
   @Input() title!: string;
   @Input() data!: number[];
@@ -108,7 +114,7 @@ export class ChartComponent {
       data: dataPoints.map(({ count }) => this.showPercentages ? (count / total * 100) : count),
       label: this.showPercentages ? this.title + " (%)": this.title,
       backgroundColor: 'rgba(0,255,41,0.66)',
-      borderRadius: 5
+      borderRadius: 5,
     }];
 
     return { labels, datasets };