add some style to dashboard

openMF · Jul 22, 2024 · 95c9161 · 95c9161
1 parent e810ce1
commit 95c9161
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.ts
@@ -78,11 +78,11 @@ export class AmountCollectedPieComponent implements OnInit {
   setChart(data: any) {
     if (!this.chart) {
       this.chart = new Chart('collection-pie', {
-        type: 'pie',
+        type: 'doughnut',
         data: {
           labels: ['Pending', 'Collected'],
           datasets: [{
-            backgroundColor: ['red', 'green'],
+            backgroundColor: ['dodgerblue', 'red'],
             data: data
           }]
         },

diff --git a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.ts
@@ -78,11 +78,11 @@ export class AmountDisbursedPieComponent implements OnInit {
   setChart(data: any) {
     if (!this.chart) {
       this.chart = new Chart('disbursement-pie', {
-        type: 'pie',
+        type: 'doughnut',
         data: {
           labels: ['Pending', 'Disbursed'],
           datasets: [{
-            backgroundColor: ['red', 'yellow'],
+            backgroundColor: ['dodgerblue', 'red'],
             data: data
           }]
         },

diff --git a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.ts
@@ -4,15 +4,15 @@ import { UntypedFormControl } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
 /** rxjs Imports */
-import { merge, forkJoin } from 'rxjs';
+import { forkJoin, merge } from 'rxjs';
 import { skip } from 'rxjs/operators';
 
 /** Custom Services */
 import { HomeService } from '../../home.service';
 
 /** Charting Imports */
-import Chart from 'chart.js';
 import { Dates } from 'app/core/utils/dates';
+import Chart from 'chart.js';
 
 /**
  * Client Trends Bar Chart Component.
@@ -218,30 +218,40 @@ export class ClientTrendsBarComponent implements OnInit {
   setChart(labels: any[], clientCounts: number[], loanCounts: number[]) {
     if (!this.chart) {
       this.chart = new Chart('client-trends-bar', {
-        type: 'bar',
+        type: 'line',
         data: {
           labels: labels,
           datasets: [
             {
               label: 'New Clients',
+              data: clientCounts,
               backgroundColor: 'dodgerblue',
-              data: clientCounts
+              borderColor: 'dodgerblue',
+              borderWidth: 2,
+              fill: false
             },
             {
               label: 'Loans Disbursed',
-              backgroundColor: 'green',
-              data: loanCounts
+              data: loanCounts,
+              backgroundColor: 'red',
+              borderColor: 'red',
+              borderWidth: 2,
+              fill: false,
             }
           ]
         },
         options: {
-          layout: {
-            padding: {
-              top: 5,
-              left: 10,
-              right: 10
-            }
-          }
+          responsive: true,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        scaleLabel: {
+                            display: true,
+                            labelString: 'Values',
+                            fontColor: '#1074B9'
+                        }
+                    },
+                }
         }
       });
     } else {