Skip to content

Commit

Permalink
Removed 'Consumed Voucher by Aims Pie' chart and optimized view stati…
Browse files Browse the repository at this point in the history 
…stics rendering
  • Loading branch information
@miris-mp
miris-mp committed Dec 11, 2024
1 parent 8bce4bb commit 6557603
Show file tree
Hide file tree
Showing 4 changed files with 293 additions and 300 deletions.
90 changes: 44 additions & 46 deletions src/Website/src/app/_models/stats.ts
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,84 @@
export class Stats {
totalVouchersGenerated: number;
totalVouchersRedeemed: number;
totalVouchersAvailable: number;
totalVouchersSpent: number;
aims: RootAims;
totalVouchersGenerated: number;
totalVouchersRedeemed: number;
totalVouchersAvailable: number;
totalVouchersSpent: number;
aims: RootAims;

public static fromJson(json): any {
if (json === null) {
return null;
}
return Object.assign(new Stats(), json);
public static fromJson(json): any {
if (json === null) {
return null;
}
return Object.assign(new Stats(), json);
}
}

export class RootAims {
0: AimStats;
0: AimStats;
}

export class AimStats {
generated: number;
redeemed: number;
available: number;
spent: number;
generated: number;
redeemed: number;
available: number;
spent: number;
}

export interface ChartDataSwimlane {
name: string;
value: number;
name: string;
value: number;
}

export interface VoucherByAimDTO {
aimCode: string;
amount: number;
aimCode: string;
amount: number;
}

export interface ChartDataSwimlaneSeries {
name: string;
series: ChartDataSwimlane[];
name: string;
series: ChartDataSwimlane[];
}

export interface TotalGeneratedRedeemedOverTime {
date: string;
totalRedeemed: number;
totalGenerated: number;
date: string;
totalRedeemed: number;
totalGenerated: number;
}

export interface TotalConsumedOverTime {
date: string;
total: number;
date: string;
total: number;
}

export interface TotalCreatedAmountByAim {
aimCode: string,
amount: number
aimCode: string;
amount: number;
}

export interface MerchantRankDTO {
id: string;
name: string;
amount: number;
rank: number;
id: string;
name: string;
amount: number;
rank: number;
}

export interface RankMerchants {
id: string,
name: string,
amount: number,
rank: number
id: string;
name: string;
amount: number;
rank: number;
}

export interface GenerationRedeemedStatsApiResponse {
totalGenerated: number;
totalRedeemed: number;
voucherByAim: VoucherByAimDTO[];
voucherAvailable: number;
totalGeneratedAndRedeemedOverTime: TotalGeneratedRedeemedOverTime[];
totalGenerated: number;
totalRedeemed: number;
voucherByAim: VoucherByAimDTO[];
voucherAvailable: number;
totalGeneratedAndRedeemedOverTime: TotalGeneratedRedeemedOverTime[];
}

export interface ConsumedStatsApiResponse {
totalConsumed: number;
voucherByAims: VoucherByAimDTO[];
merchantRanks: MerchantRankDTO[];
totalConsumedOverTime: TotalConsumedOverTime[];
totalConsumed: number;
merchantRanks: MerchantRankDTO[];
totalConsumedOverTime: TotalConsumedOverTime[];
}

135 changes: 62 additions & 73 deletions src/Website/src/app/user/statistics/admin-role/admin-role.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ <h2 class="text-xl font-semibold">WOM Consumati</h2>
filters.merchantName === '';
else searchMerchantValueSelected
"
(searchEmit)="searchMerchant($event)"
[placeholder]="'Ricerca Merchant'"
[searchValue]="filters.merchantName"
(searchEmit)="searchMerchant($event)"
></app-search>
<ng-template #searchMerchantValueSelected>
<p class="filter-selected-el">
Expand Down Expand Up @@ -86,85 +87,72 @@ <h2 class="text-xl font-semibold">WOM Consumati</h2>

<!-- Bar Chart for Consumption over Time -->
<div class="flex justify-center gap-6 mt-6">
<div class="card-stat">
<ng-container *ngIf="totalConsumedOverTime">
<p class="mt-6 font-semibold">Consumo nel tempo</p>
<ngx-charts-bar-vertical
[view]="view"
[scheme]="blueWomScheme"
[results]="totalConsumedOverTime"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[legend]="false"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisLabel]="'Data'"
[yAxisLabel]="'Quantità'"
(select)="onSelect($event)"
>
</ngx-charts-bar-vertical>
</ng-container>
</div>
<!-- BEGIN Pie Chart by Aim -->
<div class="relative card-stat">
<ng-container
*ngIf="
chartConsumedAmountByAim && chartConsumedAmountByAim.length > 0
"
<div>
<div
class="card-stat"
*ngIf="totalConsumedOverTime && totalConsumedAmount > 0"
>
<p class="mt-6 font-semibold">Divisi per AIM:</p>
<div class="w-full max-w-full overflo">
<ngx-charts-pie-chart
(window:resize)="onResize($event)"
<ng-container>
<p class="mt-6 font-semibold">Consumo nel tempo</p>
<ngx-charts-bar-vertical
[view]="view"
[scheme]="colorscheme"
[results]="chartConsumedAmountByAim"
[legend]=""
[labels]="true"
[scheme]="blueWomScheme"
[results]="totalConsumedOverTime"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[legend]="false"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisLabel]="'Data'"
[yAxisLabel]="'Quantità'"
(select)="onSelect($event)"
>
</ngx-charts-pie-chart>
</div>
</ng-container>
</ngx-charts-bar-vertical>
</ng-container>
</div>
</div>
</div>
<!-- END Pie Chart by Aim -->
<!-- BEGIN Merchant Ranking -->
<div
class="mt-6 card-stat max-w-fit"
*ngIf="rankMerchants && rankMerchants.length > 0"
>
<h3 class="font-semibold mb-4">
<i class="fa-solid fa-star" style="color: #ffd43b"></i> Classifica
Merchant
</h3>
<!-- BEGIN Merchant Ranking -->
<div
class="card-stat max-w-fit"
*ngIf="rankMerchants && rankMerchants.length > 0"
>
<h3 class="font-semibold mb-4">
<i class="fa-solid fa-star" style="color: #ffd43b"></i> Classifica
Merchant
</h3>

<ul class="list-disc pl-5 space-y-2">
<li *ngFor="let rank of rankMerchants | slice : 0 : displayLimit">
<!-- Conditional rendering for trophy icon based on rank -->
<span *ngIf="rank.rank === 1">
1) <i class="fa-solid fa-trophy" style="color: #ffd43b"></i>
</span>
<span *ngIf="rank.rank === 2">
2) <i class="fa-solid fa-trophy" style="color: #c0c0c0"></i>
</span>
<span *ngIf="rank.rank === 3">
3) <i class="fa-solid fa-trophy" style="color: #cd7f32"></i>
</span>
<span *ngIf="rank.rank > 3"> {{ rank.rank }}) </span>
{{ rank.name }}: <strong>{{ rank.amount }}</strong>
<span class="italic text-xs"> WOM</span>
</li>
</ul>
<div *ngIf="currentUser.role === 'Admin'" class="text-center mt-4">
<button
class="text-blue-500 hover:text-blue-700 underline"
(click)="toggleRankMerchants()"
<ul class="list-disc pl-5 space-y-2">
<li *ngFor="let rank of rankMerchants | slice : 0 : displayLimit">
<!-- Conditional rendering for trophy icon based on rank -->
<span *ngIf="rank.rank === 1">
1) <i class="fa-solid fa-trophy" style="color: #ffd43b"></i>
</span>
<span *ngIf="rank.rank === 2">
2) <i class="fa-solid fa-trophy" style="color: #c0c0c0"></i>
</span>
<span *ngIf="rank.rank === 3">
3) <i class="fa-solid fa-trophy" style="color: #cd7f32"></i>
</span>
<span *ngIf="rank.rank > 3"> {{ rank.rank }}) </span>
{{ rank.name }}: <strong>{{ rank.amount }}</strong>
<span class="italic text-xs"> WOM</span>
</li>
</ul>
<div
*ngIf="currentUser.role === 'Admin' && rankMerchants.length > 5"
class="text-center mt-4"
>
{{ isExpanded ? "Mostra meno" : "Mostra di più" }}
</button>
<button
class="text-blue-500 hover:text-blue-700 underline"
(click)="toggleRankMerchants()"
>
{{ isExpanded ? "Mostra meno" : "Mostra di più" }}
</button>
</div>
</div>
</div>

<!-- END Merchant Ranking -->
</div>
<ng-template #loadingConsumption>
Expand Down Expand Up @@ -254,8 +242,9 @@ <h2 class="text-xl font-semibold">WOM Generati e Riscossi</h2>
filters.sourceName === '';
else searchSourceValueSelected
"
(searchEmit)="searchSource($event)"
[placeholder]="'Ricerca Instrument'"
[searchValue]="filters.sourceName"
(searchEmit)="searchSource($event)"
></app-search>
<ng-template #searchSourceValueSelected>
<p class="filter-selected-el">
Expand Down
19 changes: 4 additions & 15 deletions src/Website/src/app/user/statistics/admin-role/admin-role.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export class AdminRoleComponent implements OnInit, OnDestroy {
aimListFilter: [],
};

displayLimit: number = 5;
displayLimit: number = 10;
isExpanded: boolean = false;

locationParameters: LocationParams = {};
Expand All @@ -96,7 +96,6 @@ export class AdminRoleComponent implements OnInit, OnDestroy {
isShowedGenerationFilter: boolean = false;
bboxArea;
chartCreatedAmountByAim: ChartDataSwimlane[] = [];
chartConsumedAmountByAim: ChartDataSwimlane[] = [];

view: [number, number] = [500, 400];

Expand Down Expand Up @@ -254,11 +253,6 @@ export class AdminRoleComponent implements OnInit, OnDestroy {
.subscribe((data: ConsumedStatsApiResponse) => {
// Consumed total amount of WOM
this.totalConsumedAmount = data.totalConsumed;
// Get total consumed by aims
this.chartConsumedAmountByAim = data.voucherByAims.map((item) => ({
name: item.aimCode,
value: item.amount,
}));

// Get rank of merchants
this.rankMerchants = data.merchantRanks;
Expand All @@ -268,6 +262,8 @@ export class AdminRoleComponent implements OnInit, OnDestroy {
value: data.total,
}));

console.log("this.totalConsumedOverTime");
console.log(this.totalConsumedOverTime);
// All requests are done, now set isConsumedDataReady to true
this.isConsumedDataReady = true;
});
Expand Down Expand Up @@ -300,7 +296,7 @@ export class AdminRoleComponent implements OnInit, OnDestroy {
// to open and close rank of merchants
toggleRankMerchants() {
this.isExpanded = !this.isExpanded;
this.displayLimit = this.isExpanded ? this.rankMerchants.length : 5;
this.displayLimit = this.isExpanded ? this.rankMerchants.length : 10;
}

// On reseize charts
Expand Down Expand Up @@ -380,13 +376,6 @@ export class AdminRoleComponent implements OnInit, OnDestroy {
});
csvRows.push(""); // Blank line for separation

// chartConsumedAmountByAim
csvRows.push("Chart Consumed Amount By Aim");
csvRows.push("Label,Value");
this.chartConsumedAmountByAim.forEach((item) => {
csvRows.push(`${item.value},${item.value}`);
});

// Join all rows with a newline
return csvRows.join("\n");
}
Expand Down
Loading

0 comments on commit 6557603

Please sign in to comment.