fix(data-vi): charts size bug when changing chart type (#3859)

* fix(data-vi): charts size bug when changing chart type

* chore: remove console.log

packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx

@@ -0,0 +1,26 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import { ChartRendererContext } from '../../renderer';
+
+export const getAntChart = (Component: React.FC<any>) => (props: any) => {
+  const { service } = useContext(ChartRendererContext);
+  const chartRef = useRef(null);
+  const [height, setHeight] = React.useState<number>(0);
+  useEffect(() => {
+    const el = chartRef.current;
+    if (!el || service.loading === true) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        setHeight(entry.contentRect.height);
+      });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [service.loading]);
+  return (
+    <div ref={chartRef} style={height ? { height: `${height}px` } : {}}>
+      <Component {...props} {...(height ? { height } : {})} />
+    </div>
+  );
+};

packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts

@@ -1,12 +1,13 @@
 import { Chart, ChartProps, ChartType, RenderProps } from '../chart';
 import configs from './configs';
+import { getAntChart } from './AntChart';
 
 export class G2PlotChart extends Chart {
   constructor({ name, title, Component, config }: ChartProps) {
     super({
       name,
       title,
-      Component,
+      Component: getAntChart(Component),
       config: ['xField', 'yField', 'seriesField', ...(config || [])],
     });
     this.addConfigs(configs);

packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx

@@ -34,8 +34,6 @@ export const ChartRenderer: React.FC & {
   const general = config?.general || {};
   const advanced = config?.advanced || {};
   const api = useAPIClient();
-  const chartRef = useRef(null);
-  const [height, setHeight] = React.useState<number>(0);
   const chart = useChart(config?.chartType);
   const locale = api.auth.getLocale();
   const transformers = useFieldTransformer(transform, locale);
@@ -54,20 +52,6 @@ export const ChartRenderer: React.FC & {
   });
   const C = chart?.Component;
 
-  useEffect(() => {
-    const el = chartRef.current;
-    if (!el || service.loading === true) {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      entries.forEach((entry) => {
-        setHeight(entry.contentRect.height);
-      });
-    });
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [service.loading]);
-
   if (!chart) {
     return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />;
   }
@@ -83,9 +67,7 @@ export const ChartRenderer: React.FC & {
         }}
         FallbackComponent={ErrorFallback}
       >
-        <div ref={chartRef} style={height ? { height: `${height}px` } : {}}>
+        <C {...chartProps} />
-          <C {...chartProps} />
-        </div>
       </ErrorBoundary>
     </Spin>
   );