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 { Chart, ChartProps, ChartType, RenderProps } from '../chart';
 | 
				
			||||||
import configs from './configs';
 | 
					import configs from './configs';
 | 
				
			||||||
 | 
					import { getAntChart } from './AntChart';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export class G2PlotChart extends Chart {
 | 
					export class G2PlotChart extends Chart {
 | 
				
			||||||
  constructor({ name, title, Component, config }: ChartProps) {
 | 
					  constructor({ name, title, Component, config }: ChartProps) {
 | 
				
			||||||
    super({
 | 
					    super({
 | 
				
			||||||
      name,
 | 
					      name,
 | 
				
			||||||
      title,
 | 
					      title,
 | 
				
			||||||
      Component,
 | 
					      Component: getAntChart(Component),
 | 
				
			||||||
      config: ['xField', 'yField', 'seriesField', ...(config || [])],
 | 
					      config: ['xField', 'yField', 'seriesField', ...(config || [])],
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
    this.addConfigs(configs);
 | 
					    this.addConfigs(configs);
 | 
				
			||||||
 | 
				
			|||||||
@ -34,8 +34,6 @@ export const ChartRenderer: React.FC & {
 | 
				
			|||||||
  const general = config?.general || {};
 | 
					  const general = config?.general || {};
 | 
				
			||||||
  const advanced = config?.advanced || {};
 | 
					  const advanced = config?.advanced || {};
 | 
				
			||||||
  const api = useAPIClient();
 | 
					  const api = useAPIClient();
 | 
				
			||||||
  const chartRef = useRef(null);
 | 
					 | 
				
			||||||
  const [height, setHeight] = React.useState<number>(0);
 | 
					 | 
				
			||||||
  const chart = useChart(config?.chartType);
 | 
					  const chart = useChart(config?.chartType);
 | 
				
			||||||
  const locale = api.auth.getLocale();
 | 
					  const locale = api.auth.getLocale();
 | 
				
			||||||
  const transformers = useFieldTransformer(transform, locale);
 | 
					  const transformers = useFieldTransformer(transform, locale);
 | 
				
			||||||
@ -54,20 +52,6 @@ export const ChartRenderer: React.FC & {
 | 
				
			|||||||
  });
 | 
					  });
 | 
				
			||||||
  const C = chart?.Component;
 | 
					  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) {
 | 
					  if (!chart) {
 | 
				
			||||||
    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />;
 | 
					    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('Please configure chart')} />;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
@ -83,9 +67,7 @@ export const ChartRenderer: React.FC & {
 | 
				
			|||||||
        }}
 | 
					        }}
 | 
				
			||||||
        FallbackComponent={ErrorFallback}
 | 
					        FallbackComponent={ErrorFallback}
 | 
				
			||||||
      >
 | 
					      >
 | 
				
			||||||
        <div ref={chartRef} style={height ? { height: `${height}px` } : {}}>
 | 
					 | 
				
			||||||
        <C {...chartProps} />
 | 
					        <C {...chartProps} />
 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
      </ErrorBoundary>
 | 
					      </ErrorBoundary>
 | 
				
			||||||
    </Spin>
 | 
					    </Spin>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user