artin/web-app
1
0
Fork 0
mirror of https://github.com/openMF/web-app.git synced 2026-02-06 14:11:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge 869df51e8c into bd2408fcc4

Browse Source
This commit is contained in:
Omar Nabil 2026-02-06 07:54:45 +00:00 committed by GitHub
commit 8ee21cefcb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 129 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts
View File

@ -7,12 +7,14 @@
*/
/** Angular Imports */
import { Component, OnInit, inject } from '@angular/core';
import { Component, OnInit, inject, DestroyRef } from '@angular/core';
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
/** Custom Services */
import { HomeService } from '../../home.service';
import { ThemingService } from 'app/shared/theme-toggle/theming.service';
/** Charting Imports */
import { Chart, registerables } from 'chart.js';
@ -41,6 +43,11 @@ Chart.register(...registerables);
export class AmountCollectedPieComponent implements OnInit {
private homeService = inject(HomeService);
private route = inject(ActivatedRoute);
private themingService = inject(ThemingService);
private destroyRef = inject(DestroyRef);
/** Current theme */
private currentTheme = 'light-theme';
/** Static Form control for office Id */
officeId = new UntypedFormControl();
@ -71,6 +78,13 @@ export class AmountCollectedPieComponent implements OnInit {
ngOnInit() {
this.getChartData();
this.officeId.patchValue(1);
// Subscribe to theme changes to update chart legend colors
this.themingService.theme.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((theme) => {
this.currentTheme = theme;
if (this.chart) {
this.updateChartColors();
}
});
}
/**
@ -98,6 +112,8 @@ export class AmountCollectedPieComponent implements OnInit {
* @param {any} data Chart Data.
*/
setChart(data: any) {
const legendColor = this.getLegendColor();
if (!this.chart) {
this.chart = new Chart('collection-pie', {
type: 'doughnut',
@ -117,6 +133,13 @@ export class AmountCollectedPieComponent implements OnInit {
]
},
options: {
plugins: {
legend: {
labels: {
color: legendColor
}
}
},
layout: {
padding: {
top: 10,
@ -130,4 +153,23 @@ export class AmountCollectedPieComponent implements OnInit {
this.chart.update();
}
}
/**
* Gets the legend color based on the current theme.
*/
private getLegendColor(): string {
return this.currentTheme === 'dark-theme' ? 'white' : '#666';
}
/**
* Updates chart colors based on the current theme.
*/
updateChartColors() {
const legendColor = this.getLegendColor();
if (this.chart?.options?.plugins?.legend?.labels) {
this.chart.options.plugins.legend.labels.color = legendColor;
this.chart.update();
}
}
}

44
src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts
View File

@ -7,12 +7,14 @@
*/
/** Angular Imports */
import { Component, OnInit, inject } from '@angular/core';
import { Component, OnInit, inject, DestroyRef } from '@angular/core';
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
/** Custom Services */
import { HomeService } from '../../home.service';
import { ThemingService } from 'app/shared/theme-toggle/theming.service';
/** Charting Imports */
import { Chart, registerables } from 'chart.js';
@ -41,6 +43,11 @@ Chart.register(...registerables);
export class AmountDisbursedPieComponent implements OnInit {
private homeService = inject(HomeService);
private route = inject(ActivatedRoute);
private themingService = inject(ThemingService);
private destroyRef = inject(DestroyRef);
/** Current theme */
private currentTheme = 'light-theme';
/** Static Form control for office Id */
officeId = new UntypedFormControl();
@ -71,6 +78,13 @@ export class AmountDisbursedPieComponent implements OnInit {
ngOnInit() {
this.getChartData();
this.officeId.patchValue(1);
// Subscribe to theme changes to update chart legend colors
this.themingService.theme.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((theme) => {
this.currentTheme = theme;
if (this.chart) {
this.updateChartColors();
}
});
}
/**
@ -98,6 +112,8 @@ export class AmountDisbursedPieComponent implements OnInit {
* @param {any} data Chart Data.
*/
setChart(data: any) {
const legendColor = this.getLegendColor();
if (!this.chart) {
this.chart = new Chart('disbursement-pie', {
type: 'doughnut',
@ -117,6 +133,13 @@ export class AmountDisbursedPieComponent implements OnInit {
]
},
options: {
plugins: {
legend: {
labels: {
color: legendColor
}
}
},
layout: {
padding: {
top: 10,
@ -130,4 +153,23 @@ export class AmountDisbursedPieComponent implements OnInit {
this.chart.update();
}
}
/**
* Gets the legend color based on the current theme.
*/
private getLegendColor(): string {
return this.currentTheme === 'dark-theme' ? 'white' : '#666';
}
/**
* Updates chart colors based on the current theme.
*/
updateChartColors() {
const legendColor = this.getLegendColor();
if (this.chart?.options?.plugins?.legend?.labels) {
this.chart.options.plugins.legend.labels.color = legendColor;
this.chart.update();
}
}
}

44
src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts
View File

@ -7,9 +7,10 @@
*/
/** Angular Imports */
import { Component, OnInit, inject } from '@angular/core';
import { Component, OnInit, inject, DestroyRef } from '@angular/core';
import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
/** rxjs Imports */
import { forkJoin, merge } from 'rxjs';
@ -17,6 +18,7 @@ import { skip } from 'rxjs/operators';
/** Custom Services */
import { HomeService } from '../../home.service';
import { ThemingService } from 'app/shared/theme-toggle/theming.service';
/** Charting Imports */
import { Dates } from 'app/core/utils/dates';
@ -50,6 +52,11 @@ export class ClientTrendsBarComponent implements OnInit {
private homeService = inject(HomeService);
private route = inject(ActivatedRoute);
private dateUtils = inject(Dates);
private themingService = inject(ThemingService);
private destroyRef = inject(DestroyRef);
/** Current theme */
private currentTheme = 'light-theme';
/** Static Form control for office Id */
officeId = new UntypedFormControl();
@ -77,6 +84,13 @@ export class ClientTrendsBarComponent implements OnInit {
ngOnInit() {
this.getChartData();
this.initializeControls();
// Subscribe to theme changes to update chart legend colors
this.themingService.theme.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((theme) => {
this.currentTheme = theme;
if (this.chart) {
this.updateChartColors();
}
});
}
/**
@ -249,6 +263,8 @@ export class ClientTrendsBarComponent implements OnInit {
* @param {number[]} loanCounts Loans Ordinate.
*/
setChart(labels: any[], clientCounts: number[], loanCounts: number[]) {
const legendColor = this.getLegendColor();
if (!this.chart) {
this.chart = new Chart('client-trends-bar', {
type: 'line',
@ -275,6 +291,13 @@ export class ClientTrendsBarComponent implements OnInit {
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
color: legendColor
}
}
},
scales: {
y: {
min: 0,
@ -294,4 +317,23 @@ export class ClientTrendsBarComponent implements OnInit {
this.chart.update();
}
}
/**
* Gets the legend color based on the current theme.
*/
private getLegendColor(): string {
return this.currentTheme === 'dark-theme' ? 'white' : '#666';
}
/**
* Updates chart colors based on the current theme.
*/
updateChartColors() {
const legendColor = this.getLegendColor();
if (this.chart?.options?.plugins?.legend?.labels) {
this.chart.options.plugins.legend.labels.color = legendColor;
this.chart.update();
}
}
}