101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { ChartModule } from 'primeng/chart';
|
|
import { debounceTime, Subscription } from 'rxjs';
|
|
import { LayoutService } from '@/src/app/layout/service/app.layout.service';
|
|
|
|
@Component({
|
|
standalone:true,
|
|
selector: 'app-revenue-stream-widget',
|
|
imports: [
|
|
ChartModule,
|
|
],
|
|
template: `<div class="card">
|
|
<div class="font-semibold text-xl mb-4">Revenue Stream</div>
|
|
<p-chart type="bar" [data]="chartData" [options]="chartOptions" class="h-80" />
|
|
</div>`,
|
|
})
|
|
export class RevenueStreamWidget {
|
|
chartData: any;
|
|
|
|
chartOptions: any;
|
|
|
|
subscription!: Subscription;
|
|
|
|
constructor(public layoutService: LayoutService) {
|
|
this.subscription = this.layoutService.configUpdate$
|
|
.pipe(debounceTime(25))
|
|
.subscribe(() => {
|
|
this.initChart();
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.initChart();
|
|
}
|
|
|
|
initChart() {
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
|
const textColor = documentStyle.getPropertyValue('--text-color');
|
|
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
|
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
|
|
|
this.chartData = {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'First Dataset',
|
|
data: [65, 59, 80, 81, 56, 55, 40],
|
|
fill: false,
|
|
backgroundColor: documentStyle.getPropertyValue('--bluegray-700'),
|
|
borderColor: documentStyle.getPropertyValue('--bluegray-700'),
|
|
tension: .4
|
|
},
|
|
{
|
|
label: 'Second Dataset',
|
|
data: [28, 48, 40, 19, 86, 27, 90],
|
|
fill: false,
|
|
backgroundColor: documentStyle.getPropertyValue('--green-600'),
|
|
borderColor: documentStyle.getPropertyValue('--green-600'),
|
|
tension: .4
|
|
}
|
|
]
|
|
};
|
|
|
|
this.chartOptions = {
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: textColor
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: textColorSecondary
|
|
},
|
|
grid: {
|
|
color: surfaceBorder,
|
|
drawBorder: false
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: textColorSecondary
|
|
},
|
|
grid: {
|
|
color: surfaceBorder,
|
|
drawBorder: false
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if (this.subscription) {
|
|
this.subscription.unsubscribe();
|
|
}
|
|
}
|
|
}
|