From cc104477dcf7a613a432c8acd596223e1465825a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20=C3=87etin?=
 <92744169+mehmetcetin01140@users.noreply.github.com>
Date: Mon, 6 Jan 2025 16:52:25 +0300
Subject: [PATCH] update chartdoc

---
 src/views/uikit/chartdoc.ts | 169 +++++++++++++++---------------------
 1 file changed, 71 insertions(+), 98 deletions(-)

diff --git a/src/views/uikit/chartdoc.ts b/src/views/uikit/chartdoc.ts
index 8d88219..f7d8a16 100644
--- a/src/views/uikit/chartdoc.ts
+++ b/src/views/uikit/chartdoc.ts
@@ -6,54 +6,50 @@ 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">
-        <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 ChartDoc {
-
     lineData: any;
 
     barData: any;
@@ -76,11 +72,9 @@ export class ChartDoc {
 
     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() {
@@ -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')
-                ],
-                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 = {
@@ -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();
         }
     }
-
 }