ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

* chore: remove console.log
This commit is contained in:
YANG QIA 2024-03-29 08:31:47 +08:00 committed by GitHub
parent 0ec3ed3c54
commit 72c95671ae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx Normal file
View File

@ -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>
);
};

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

@ -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);

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

@ -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>
);