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

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

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