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

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

@@ -6,54 +6,50 @@ import { LayoutService } from '@/src/service/layout.service';
import { FluidModule } from 'primeng/fluid'; 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 <div class="col-span-12 xl:col-span-6">
], <div class="card">
template: ` <p-fluid class="grid grid-cols-12 gap-8"> <div class="font-semibold text-xl mb-4">Linear</div>
<div class="col-span-12 xl:col-span-6"> <p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
<div class="card"> </div>
<div class="font-semibold text-xl mb-4">Linear</div>
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
</div> </div>
</div> <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">Bar</div>
<div class="font-semibold text-xl mb-4">Bar</div> <p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart> </div>
</div> </div>
</div> <div class="col-span-12 xl:col-span-6">
<div class="col-span-12 xl:col-span-6"> <div class="card flex flex-col items-center">
<div class="card flex flex-col items-center"> <div class="font-semibold text-xl mb-4">Pie</div>
<div class="font-semibold text-xl mb-4">Pie</div> <p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart> </div>
</div> </div>
</div> <div class="col-span-12 xl:col-span-6">
<div class="col-span-12 xl:col-span-6"> <div class="card flex flex-col items-center">
<div class="card flex flex-col items-center"> <div class="font-semibold text-xl mb-4">Doughnut</div>
<div class="font-semibold text-xl mb-4">Doughnut</div> <p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart> </div>
</div> </div>
</div> <div class="col-span-12 xl:col-span-6">
<div class="col-span-12 xl:col-span-6"> <div class="card flex flex-col items-center">
<div class="card flex flex-col items-center"> <div class="font-semibold text-xl mb-4">Polar Area</div>
<div class="font-semibold text-xl mb-4">Polar Area</div> <p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart> </div>
</div> </div>
</div> <div class="col-span-12 xl:col-span-6">
<div class="col-span-12 xl:col-span-6"> <div class="card flex flex-col items-center">
<div class="card flex flex-col items-center"> <div class="font-semibold text-xl mb-4">Radar</div>
<div class="font-semibold text-xl mb-4">Radar</div> <p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart> </div>
</div> </div>
</div> </p-fluid>
</p-fluid> `
`,
}) })
export class ChartDoc { export class ChartDoc {
lineData: any; lineData: any;
barData: any; barData: any;
@@ -76,11 +72,9 @@ 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)) this.initCharts();
.subscribe(() => { });
this.initCharts();
});
} }
ngOnInit() { ngOnInit() {
@@ -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, label: 'My dataset'
3 }
], ],
backgroundColor: [ labels: ['Indigo', 'Purple', 'Teal', 'Orange']
documentStyle.getPropertyValue('--indigo-500'),
documentStyle.getPropertyValue('--purple-500'),
documentStyle.getPropertyValue('--teal-500'),
documentStyle.getPropertyValue('--orange-500')
],
label: 'My dataset'
}],
labels: [
'Indigo',
'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();
} }
} }
} }