Add Chartdoc
This commit is contained in:
Çetin
311
src/views/uikit/chartdoc.ts
Normal file
311
src/views/uikit/chartdoc.ts
Normal file
@@ -0,0 +1,311 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ChartModule } from 'primeng/chart';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { debounceTime, Subscription } from 'rxjs';
|
||||
import { LayoutService } from '@/src/app/layout/service/app.layout.service';
|
||||
|
||||
@Component({
|
||||
standalone:true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
ChartModule
|
||||
],
|
||||
template: `<div class="grid p-fluid">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Linear Chart</h5>
|
||||
<p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Pie Chart</h5>
|
||||
<p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Polar Area Chart</h5>
|
||||
<p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="card">
|
||||
<h5>Bar Chart</h5>
|
||||
<p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Doughnut Chart</h5>
|
||||
<p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-column align-items-center">
|
||||
<h5 class="text-left w-full">Radar Chart</h5>
|
||||
<p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ChartDoc {
|
||||
|
||||
lineData: any;
|
||||
|
||||
barData: any;
|
||||
|
||||
pieData: any;
|
||||
|
||||
polarData: any;
|
||||
|
||||
radarData: any;
|
||||
|
||||
lineOptions: any;
|
||||
|
||||
barOptions: any;
|
||||
|
||||
pieOptions: any;
|
||||
|
||||
polarOptions: any;
|
||||
|
||||
radarOptions: any;
|
||||
|
||||
subscription: Subscription;
|
||||
constructor(private layoutService: LayoutService) {
|
||||
this.subscription = this.layoutService.configUpdate$
|
||||
.pipe(debounceTime(25))
|
||||
.subscribe((config) => {
|
||||
this.initCharts();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initCharts();
|
||||
}
|
||||
|
||||
initCharts() {
|
||||
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.barData = {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
data: [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: 'My Second dataset',
|
||||
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
|
||||
borderColor: documentStyle.getPropertyValue('--primary-200'),
|
||||
data: [28, 48, 40, 19, 86, 27, 90]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.barOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary,
|
||||
font: {
|
||||
weight: 500
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
this.pieData = {
|
||||
labels: ['A', 'B', 'C'],
|
||||
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')
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
this.pieOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.lineData = {
|
||||
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('--primary-500'),
|
||||
borderColor: documentStyle.getPropertyValue('--primary-500'),
|
||||
tension: .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
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.lineOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder,
|
||||
drawBorder: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
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')
|
||||
],
|
||||
label: 'My dataset'
|
||||
}],
|
||||
labels: [
|
||||
'Indigo',
|
||||
'Purple',
|
||||
'Teal',
|
||||
'Orange'
|
||||
]
|
||||
};
|
||||
|
||||
this.polarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.radarData = {
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'My First dataset',
|
||||
borderColor: documentStyle.getPropertyValue('--indigo-400'),
|
||||
pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
|
||||
pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--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'),
|
||||
pointHoverBackgroundColor: textColor,
|
||||
pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
this.radarOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
r: {
|
||||
grid: {
|
||||
color: textColorSecondary
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.subscription) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user