mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 07:38:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(data-vi): canvas height keeps increasing when filtering/reseting (#3849)

Browse Source
This commit is contained in:
YANG QIA 2024-03-28 12:56:25 +08:00 committed by GitHub
parent 1dfd97cad5
commit 8ca94329ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,7 @@ export class G2PlotChart extends Chart {
getReference() {
return {
title: this.title,
link: `https://g2plot.antv.antgroup.com/api/plots/${this.name}`,
link: `https://ant-design-charts-next.antgroup.com/examples#statistics-${this.name}`,
};
}
}

10
packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
View File

@ -330,13 +330,15 @@ export const useChartFilter = () => {
};
const hasFilter = (chart: { dataSource: string; collection: string; query: any }, filterValues: any) => {
if (!chart) {
return false;
}
const { dataSource, collection, query } = chart;
const { parameters } = parse(query.filter || '');
return (
chart &&
(filterValues[getFilterFieldPrefix(dataSource, collection)] ||
(filterValues['custom'] &&
parameters?.find(({ key }: { key: string }) => lodash.has(filterValues['custom'], key))))
filterValues[getFilterFieldPrefix(dataSource, collection)] ||
(filterValues['custom'] &&
parameters?.find(({ key }: { key: string }) => lodash.has(filterValues['custom'], key)))
);
};

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

@ -12,7 +12,7 @@ import {
useDesignable,
} from '@nocobase/client';
import { Empty, Result, Spin, Typography } from 'antd';
import React, { memo, useContext } from 'react';
import React, { useContext, useEffect, useRef } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ChartConfigContext } from '../configure';
import { useData, useFieldTransformer, useFieldsWithAssociation } from '../hooks';
@ -22,8 +22,6 @@ import { ChartRendererContext } from './ChartRendererProvider';
import { useChart } from '../chart/group';
import { ChartDataContext } from '../block/ChartDataProvider';
const { Paragraph, Text } = Typography;
import lodash from 'lodash';
import { Line } from '@ant-design/plots';
export const ChartRenderer: React.FC & {
Designer: React.FC;
@ -36,7 +34,8 @@ 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);
@ -55,6 +54,20 @@ 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')} />;
}
@ -70,7 +83,9 @@ export const ChartRenderer: React.FC & {
}}
FallbackComponent={ErrorFallback}
>
<C {...chartProps} />
<div ref={chartRef} style={height ? { height: `${height}px` } : {}}>
<C {...chartProps} />
</div>
</ErrorBoundary>
</Spin>
);