From 1f215ce4314b6d15ee01b4c63736494545985e05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 31 May 2023 09:44:48 +0300
Subject: [PATCH] Refactor #3965 - For Chart

---
 components/lib/chart/BaseChart.vue | 48 ++++++++++++++++++++++++++++++
 components/lib/chart/Chart.d.ts    |  5 ++++
 components/lib/chart/Chart.vue     | 30 ++-----------------
 3 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 components/lib/chart/BaseChart.vue

diff --git a/components/lib/chart/BaseChart.vue b/components/lib/chart/BaseChart.vue
new file mode 100644
index 000000000..0a34b6a22
--- /dev/null
+++ b/components/lib/chart/BaseChart.vue
@@ -0,0 +1,48 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-chart {
+    position: relative;
+}
+`;
+
+const classes = {
+    root: 'p-chart'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_chart_style', manual: true });
+
+export default {
+    name: 'BaseChart',
+    extends: BaseComponent,
+    props: {
+        type: String,
+        data: null,
+        options: null,
+        plugins: null,
+        width: {
+            type: Number,
+            default: 300
+        },
+        height: {
+            type: Number,
+            default: 150
+        },
+        canvasProps: {
+            type: null,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/chart/Chart.d.ts b/components/lib/chart/Chart.d.ts
index 2ea6c838c..93b72ae75 100755
--- a/components/lib/chart/Chart.d.ts
+++ b/components/lib/chart/Chart.d.ts
@@ -99,6 +99,11 @@ export interface ChartProps {
      * @type {ChartPassThroughOptions}
      */
     pt?: ChartPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 export interface ChartSlots {}
diff --git a/components/lib/chart/Chart.vue b/components/lib/chart/Chart.vue
index 1de5f969d..f2c5f55de 100755
--- a/components/lib/chart/Chart.vue
+++ b/components/lib/chart/Chart.vue
@@ -1,34 +1,16 @@
 <template>
-    <div class="p-chart" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chart">
         <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseChart from './BaseChart.vue';
 
 export default {
     name: 'Chart',
-    extends: BaseComponent,
+    extends: BaseChart,
     emits: ['select', 'loaded'],
-    props: {
-        type: String,
-        data: null,
-        options: null,
-        plugins: null,
-        width: {
-            type: Number,
-            default: 300
-        },
-        height: {
-            type: Number,
-            default: 150
-        },
-        canvasProps: {
-            type: null,
-            default: null
-        }
-    },
     chart: null,
     watch: {
         /*
@@ -112,9 +94,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-chart {
-    position: relative;
-}
-</style>