Refactor #4602 - for Chart

primefaces · Jul 6, 2023 · 5226d16 · 5226d16
1 parent cce6408
commit 5226d16
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 12 deletions.
diff --git a/components/lib/chart/Chart.css b/components/lib/chart/Chart.css
diff --git 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
@@ -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
@@ -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
@@ -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";