From 5226d1658b3a25f1d48a191995011bdbd989f1d0 Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Thu, 6 Jul 2023 14:32:48 +0300
Subject: [PATCH] Refactor #4602 - for Chart

---
 components/lib/chart/Chart.css    |  3 ---
 components/lib/chart/Chart.js     | 17 +++++++++--------
 components/lib/chart/ChartBase.js | 21 +++++++++++++++++++++
 components/lib/chart/chart.d.ts   |  5 +++++
 styles/primereact.css             |  1 -
 5 files changed, 35 insertions(+), 12 deletions(-)
 delete mode 100644 components/lib/chart/Chart.css

diff --git a/components/lib/chart/Chart.css b/components/lib/chart/Chart.css
deleted file mode 100644
index 4f85e1436d..0000000000
--- a/components/lib/chart/Chart.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.p-chart {
-    position: relative
-}
\ No newline at end of file
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
index 1f001af0ef..a032f72574 100644
--- a/components/lib/chart/Chart.js
+++ b/components/lib/chart/Chart.js
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useUnmountEffect } from '../hooks/Hooks';
-import { classNames, mergeProps } from '../utils/Utils';
-import { ChartBase } from './ChartBase';
 import { PrimeReactContext } from '../api/Api';
+import { useStyle, useUnmountEffect } from '../hooks/Hooks';
+import { mergeProps } from '../utils/Utils';
+import { ChartBase } from './ChartBase';
 
 // GitHub #3059 wrapper if loaded by script tag
 const ChartJS = (function () {
@@ -17,7 +17,10 @@ const PrimeReactChart = React.memo(
     React.forwardRef((inProps, ref) => {
         const context = React.useContext(PrimeReactContext);
         const props = ChartBase.getProps(inProps, context);
-        const { ptm } = ChartBase.setMetaData({
+
+        useStyle(ChartBase.css.styles, { name: 'primereact_chart_style' });
+
+        const { ptm, cx, sx } = ChartBase.setMetaData({
             props
         });
         const elementRef = React.useRef(null);
@@ -85,16 +88,14 @@ const PrimeReactChart = React.memo(
             destroyChart();
         });
 
-        const className = classNames('p-chart', props.className);
-        const style = Object.assign({ width: props.width, height: props.height }, props.style);
         const title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
         const ariaLabel = props.ariaLabel || title;
         const rootProps = mergeProps(
             {
                 id: props.id,
                 ref: elementRef,
-                style,
-                className
+                style: sx('root'),
+                className: cx('root')
             },
             ChartBase.getOtherProps(props),
             ptm('root')
diff --git a/components/lib/chart/ChartBase.js b/components/lib/chart/ChartBase.js
index 051e891e37..5239ade703 100644
--- a/components/lib/chart/ChartBase.js
+++ b/components/lib/chart/ChartBase.js
@@ -1,4 +1,5 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/utils';
 
 export const ChartBase = ComponentBase.extend({
     defaultProps: {
@@ -13,5 +14,25 @@ export const ChartBase = ComponentBase.extend({
         style: null,
         className: null,
         children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) => classNames('p-chart', props.className)
+        },
+        inlineStyles: {
+            root: ({ props }) =>
+                Object.assign(
+                    {
+                        width: props.width,
+                        height: props.height
+                    },
+                    props.style
+                )
+        },
+        styles: `
+        .p-chart {
+            position: relative
+        }
+        `
     }
 });
diff --git a/components/lib/chart/chart.d.ts b/components/lib/chart/chart.d.ts
index b4a0b13bcb..c848bbbb5f 100644
--- a/components/lib/chart/chart.d.ts
+++ b/components/lib/chart/chart.d.ts
@@ -90,6 +90,11 @@ export interface ChartProps {
      * @type {ChartPassThroughOptions}
      */
     pt?: ChartPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/styles/primereact.css b/styles/primereact.css
index d3f51ccf57..1bfb1c4a76 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -8,7 +8,6 @@
 @import "../components/lib/carousel/Carousel.css";
 @import "../components/lib/galleria/Galleria.css";
 @import "../components/lib/card/Card.css";
-@import "../components/lib/chart/Chart.css";
 @import "../components/lib/checkbox/Checkbox.css";
 @import "../components/lib/chips/Chips.css";
 @import "../components/lib/colorpicker/ColorPicker.css";