apply coderabbitai chanegs (#3097)

This commit is contained in:
Omar Nabil
2026-02-06 12:18:17 -06:00
committed by GitHub
parent 0bc1926199
commit 3fe0e1489b
3 changed files with 129 additions and 3 deletions
@@ -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();
}
}
}
@@ -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();
}
}
}
@@ -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();
}
}
}