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
This commit is contained in:
		
							parent
							
								
									0ec3ed3c54
								
							
						
					
					
						commit
						72c95671ae
					
				@ -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>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
@ -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);
 | 
			
		||||
 | 
			
		||||
@ -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} />
 | 
			
		||||
        </div>
 | 
			
		||||
        <C {...chartProps} />
 | 
			
		||||
      </ErrorBoundary>
 | 
			
		||||
    </Spin>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user