f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix dashboard chart darkmode

Browse Source
This commit is contained in:
Çetin 2022-01-21 09:41:16 +03:00
parent 3030999262
commit 944e51b756
2 changed files with 85 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/dashboard/dashboard.component.html
View File

@ -174,7 +174,7 @@
<div class="col-12 xl:col-6">
<div class="card">
<h5>Sales Overview</h5>
<p-chart type="line" [data]="chartData"></p-chart>
<p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
</div>
<div class="card">

86
src/app/components/dashboard/dashboard.component.ts
View File

@ -2,6 +2,9 @@ import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
import { Product } from '../../api/product';
import { ProductService } from '../../service/productservice';
import { Subscription } from 'rxjs';
import { ConfigService } from '../../service/app.config.service';
import { AppConfig } from '../../api/appconfig';
@Component({
templateUrl: './dashboard.component.html',
@ -12,11 +15,22 @@ export class DashboardComponent implements OnInit {
products: Product[];
chartData:any;
chartData: any;
constructor(private productService: ProductService) {}
chartOptions: any;
subscription: Subscription;
config: AppConfig;
constructor(private productService: ProductService, public configService: ConfigService) {}
ngOnInit() {
this.config = this.configService.config;
this.subscription = this.configService.configUpdate$.subscribe(config => {
this.config = config;
this.updateChartOptions();
});
this.productService.getProductsSmall().then(data => this.products = data);
this.items = [
@ -46,4 +60,72 @@ export class DashboardComponent implements OnInit {
]
};
}
updateChartOptions() {
if (this.config.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
}
applyDarkTheme() {
this.chartOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)',
}
},
y: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(160, 167, 181, .3)',
}
},
}
};
}
applyLightTheme() {
this.chartOptions = {
plugins: {
legend: {
labels: {
color: '#495057'
}
}
},
scales: {
x: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef',
}
},
y: {
ticks: {
color: '#495057'
},
grid: {
color: '#ebedef',
}
},
}
};
}
}