Stedos/nise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nise.moe 2024-02-18 18:45:19 +01:00
parent bd0fce90dd
commit dc4254bdd1
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nise-frontend/src/corelib/components/chart/chart.component.html
View File

@ -5,7 +5,7 @@
<fieldset class="text-center"> <fieldset class="text-center">
<input type="checkbox" checked="checked" [(ngModel)]="this.removeOutliers"> remove outliers <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.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> </fieldset>
<ul class="chart-statistics"> <ul class="chart-statistics">
<li *ngFor="let stat of this.calculateStatistics()"> <li *ngFor="let stat of this.calculateStatistics()">

20
nise-frontend/src/corelib/components/chart/chart.component.ts
View File

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