From dc4254bdd17a29bfa6f257ab1ee52309686d323a Mon Sep 17 00:00:00 2001
From: "nise.moe" <hey@nise.moe>
Date: Sun, 18 Feb 2024 18:45:19 +0100
Subject: [PATCH] Added % on the y-axis labels when show percentages is true

---
 .../components/chart/chart.component.html     |  2 +-
 .../components/chart/chart.component.ts       | 34 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/nise-frontend/src/corelib/components/chart/chart.component.html b/nise-frontend/src/corelib/components/chart/chart.component.html
index 4f997a9..90a9868 100644
--- a/nise-frontend/src/corelib/components/chart/chart.component.html
+++ b/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()">
diff --git a/nise-frontend/src/corelib/components/chart/chart.component.ts b/nise-frontend/src/corelib/components/chart/chart.component.ts
index 28b1d1a..113f7cf 100644
--- a/nise-frontend/src/corelib/components/chart/chart.component.ts
+++ b/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 };