refactor

Author: krkshitij

packages/charts/react-charting/src/components/DeclarativeChart/__snapshots__/DeclarativeChartRTL.test.tsx.snap

@@ -4212,7 +4212,7 @@ exports[`DeclarativeChart Should render gaugechart in DeclarativeChart 1`] = `
               class=
 
                   {
-                    fill: #323130;
+                    fill: #107c10;
                     font-size: 12px;
                     font-weight: 600;
                   }
@@ -24389,6 +24389,9 @@ exports[`DeclarativeChart Should render piechart in DeclarativeChart 1`] = `
             height: 100%;
             width: 100%;
           }
+          & [class^="arcLabel"] {
+            font-size: 20px;
+          }
     >
       <div
         class=
@@ -25056,7 +25059,7 @@ exports[`DeclarativeChart Should render sankeychart in DeclarativeChart 1`] = `
             display: flex;
             flex-direction: column;
             font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
+            font-size: 10px;
             font-weight: 400;
             height: 100%;
             overflow: hidden;

packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx

@@ -69,18 +69,23 @@ export const ResponsiveContainer: React.FC<IResponsiveContainerProps> = props =>
       }
     }
 
-    return React.cloneElement<IResponsiveChildProps>(props.children, {
-      width: calculatedWidth,
-      height: calculatedHeight,
-      shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),
-      styles: {
-        root: {
-          // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
-          // https://and-ha.com/en/coding-en/solving-responsive-coding-with-min-height/
-          width: calculatedWidth,
-          height: calculatedHeight,
+    return React.Children.map(props.children, child => {
+      return React.cloneElement<IResponsiveChildProps>(child, {
+        width: calculatedWidth,
+        height: calculatedHeight,
+        shouldResize: (calculatedWidth ?? 0) + (calculatedHeight ?? 0),
+        styles: {
+          // Keep components styles
+          ...child.props.styles,
+          root: {
+            ...child.props.styles?.root,
+            // Ensure the child element fills the parent container
+            // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
+            width: calculatedWidth,
+            height: calculatedHeight,
+          },
         },
-      },
+      });
     });
   }, [size, props.aspect, props.maxHeight, props.children]);
 

packages/charts/react-charting/src/components/ResponsiveContainer/withResponsiveContainer.tsx

@@ -10,9 +10,26 @@ import { IResponsiveContainerProps } from './ResponsiveContainer.types';
 export function withResponsiveContainer<TProps extends Omit<IResponsiveContainerProps, 'children'>>(
   WrappedComponent: React.ComponentType<TProps>,
 ) {
-  const ComponentWithResponsiveContainer: React.FC<TProps> = ({ width, height, onResize, ...restProps }) => {
+  const ComponentWithResponsiveContainer: React.FC<TProps> = ({
+    aspect,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxHeight,
+    onResize,
+    ...restProps
+  }) => {
     return (
-      <ResponsiveContainer width={width} height={height} onResize={onResize}>
+      <ResponsiveContainer
+        aspect={aspect}
+        width={width}
+        height={height}
+        minWidth={minWidth}
+        minHeight={minHeight}
+        maxHeight={maxHeight}
+        onResize={onResize}
+      >
         <WrappedComponent {...(restProps as any)} />
       </ResponsiveContainer>
     );