carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update chartdoc

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-06 16:52:25 +03:00
parent 847d6af1dc
commit cc104477dc
1 changed files with 71 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/uikit/chartdoc.ts
View File

@@ -7,12 +7,9 @@ import { FluidModule } from 'primeng/fluid';
@Component({ @Component({
standalone: true, standalone: true,
imports: [ imports: [CommonModule, ChartModule, FluidModule],
CommonModule, template: `
ChartModule, <p-fluid class="grid grid-cols-12 gap-8">
FluidModule
],
template: ` <p-fluid class="grid grid-cols-12 gap-8">
<div class="col-span-12 xl:col-span-6"> <div class="col-span-12 xl:col-span-6">
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Linear</div> <div class="font-semibold text-xl mb-4">Linear</div>
@@ -50,10 +47,9 @@ import { FluidModule } from 'primeng/fluid';
</div> </div>
</div> </div>
</p-fluid> </p-fluid>
`, `
}) })
export class ChartDoc { export class ChartDoc {
lineData: any; lineData: any;
barData: any; barData: any;
@@ -76,9 +72,7 @@ export class ChartDoc {
subscription: Subscription; subscription: Subscription;
constructor(private layoutService: LayoutService) { constructor(private layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$ this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
.pipe(debounceTime(25))
.subscribe(() => {
this.initCharts(); this.initCharts();
}); });
} }
@@ -98,14 +92,14 @@ export class ChartDoc {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-500'), backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'), borderColor: documentStyle.getPropertyValue('--p-primary-500'),
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--primary-200'), backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
borderColor: documentStyle.getPropertyValue('--primary-200'), borderColor: documentStyle.getPropertyValue('--p-primary-200'),
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@@ -140,7 +134,7 @@ export class ChartDoc {
color: surfaceBorder, color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, }
} }
}; };
@@ -149,17 +143,10 @@ export class ChartDoc {
datasets: [ datasets: [
{ {
data: [540, 325, 702], data: [540, 325, 702],
backgroundColor: [ backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500')],
documentStyle.getPropertyValue('--indigo-500'), hoverBackgroundColor: [documentStyle.getPropertyValue('--p-indigo-400'), documentStyle.getPropertyValue('--p-purple-400'), documentStyle.getPropertyValue('--p-teal-400')]
documentStyle.getPropertyValue('--purple-500'), }
documentStyle.getPropertyValue('--teal-500')
],
hoverBackgroundColor: [
documentStyle.getPropertyValue('--indigo-400'),
documentStyle.getPropertyValue('--purple-400'),
documentStyle.getPropertyValue('--teal-400')
] ]
}]
}; };
this.pieOptions = { this.pieOptions = {
@@ -180,17 +167,17 @@ export class ChartDoc {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-500'), backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'), borderColor: documentStyle.getPropertyValue('--p-primary-500'),
tension: .4 tension: 0.4
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-200'), backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
borderColor: documentStyle.getPropertyValue('--primary-200'), borderColor: documentStyle.getPropertyValue('--p-primary-200'),
tension: .4 tension: 0.4
} }
] ]
}; };
@@ -221,32 +208,19 @@ export class ChartDoc {
color: surfaceBorder, color: surfaceBorder,
drawBorder: false drawBorder: false
} }
}, }
} }
}; };
this.polarData = { this.polarData = {
datasets: [{ datasets: [
data: [ {
11, data: [11, 16, 7, 3],
16, backgroundColor: [documentStyle.getPropertyValue('--p-indigo-500'), documentStyle.getPropertyValue('--p-purple-500'), documentStyle.getPropertyValue('--p-teal-500'), documentStyle.getPropertyValue('--p-orange-500')],
7,
3
],
backgroundColor: [
documentStyle.getPropertyValue('--indigo-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--teal-500'),
documentStyle.getPropertyValue('--orange-500')
],
label: 'My dataset' label: 'My dataset'
}], }
labels: [ ],
'Indigo', labels: ['Indigo', 'Purple', 'Teal', 'Orange']
'Purple',
'Teal',
'Orange'
]
}; };
this.polarOptions = { this.polarOptions = {
@@ -271,20 +245,20 @@ export class ChartDoc {
datasets: [ datasets: [
{ {
label: 'My First dataset', label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--indigo-400'), borderColor: documentStyle.getPropertyValue('--p-indigo-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-indigo-400'),
pointBorderColor: documentStyle.getPropertyValue('--indigo-400'), pointBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-indigo-400'),
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40]
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--purple-400'), borderColor: documentStyle.getPropertyValue('--p-purple-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'), pointBackgroundColor: documentStyle.getPropertyValue('--p-purple-400'),
pointBorderColor: documentStyle.getPropertyValue('--purple-400'), pointBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
pointHoverBackgroundColor: textColor, pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'), pointHoverBorderColor: documentStyle.getPropertyValue('--p-purple-400'),
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
@@ -313,5 +287,4 @@ export class ChartDoc {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
} }
} }
} }