ahasani/psp_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code format

Browse Source
This commit is contained in:
Çetin
2025-01-07 17:29:51 +03:00
parent e3bcb0fdb6
commit 44c2361564
49 changed files with 1536 additions and 1723 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/uikit/chartdemo.ts
+55 -82
View File
@@ -7,54 +7,50 @@ import { LayoutService } from '../../layout/service/layout.service';
@Component({
selector: 'app-chart-demo',
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>
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
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>
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Bar</div>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
<div class="col-span-12 xl:col-span-6">
<div class="card">
<div class="font-semibold text-xl mb-4">Bar</div>
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Pie</div>
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Pie</div>
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Doughnut</div>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Doughnut</div>
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Polar Area</div>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Polar Area</div>
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
</div>
</div>
</div>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Radar</div>
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
<div class="col-span-12 xl:col-span-6">
<div class="card flex flex-col items-center">
<div class="font-semibold text-xl mb-4">Radar</div>
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
</div>
</div>
</div>
</p-fluid>
`,
</p-fluid>
`
})
export class ChartDemo {
lineData: any;
barData: any;
@@ -77,11 +73,9 @@ export class ChartDemo {
subscription: Subscription;
constructor(private layoutService: LayoutService) {
this.subscription = this.layoutService.configUpdate$
.pipe(debounceTime(25))
.subscribe(() => {
this.initCharts();
});
this.subscription = this.layoutService.configUpdate$.pipe(debounceTime(25)).subscribe(() => {
this.initCharts();
});
}
ngOnInit() {
@@ -141,7 +135,7 @@ export class ChartDemo {
color: surfaceBorder,
drawBorder: false
}
},
}
}
};
@@ -150,17 +144,10 @@ export class ChartDemo {
datasets: [
{
data: [540, 325, 702],
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')
]
}]
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 = {
@@ -183,7 +170,7 @@ export class ChartDemo {
fill: false,
backgroundColor: documentStyle.getPropertyValue('--p-primary-500'),
borderColor: documentStyle.getPropertyValue('--p-primary-500'),
tension: .4
tension: 0.4
},
{
label: 'Second Dataset',
@@ -191,7 +178,7 @@ export class ChartDemo {
fill: false,
backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
borderColor: documentStyle.getPropertyValue('--p-primary-200'),
tension: .4
tension: 0.4
}
]
};
@@ -222,32 +209,19 @@ export class ChartDemo {
color: surfaceBorder,
drawBorder: false
}
},
}
}
};
this.polarData = {
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'
]
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']
};
this.polarOptions = {
@@ -314,5 +288,4 @@ export class ChartDemo {
this.subscription.unsubscribe();
}
}
}