From 8ca94329ceefc4a244c6e02fc9760ccd27af1a6f Mon Sep 17 00:00:00 2001
From: YANG QIA <2013xile@gmail.com>
Date: Thu, 28 Mar 2024 12:56:25 +0800
Subject: [PATCH] fix(data-vi): canvas height keeps increasing when
 filtering/reseting (#3849)

---
 .../src/client/chart/g2plot/g2plot.ts         |  2 +-
 .../src/client/hooks/filter.ts                | 10 +++++---
 .../src/client/renderer/ChartRenderer.tsx     | 25 +++++++++++++++----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts
index e28dd22317..d1c512921c 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts
@@ -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}`,
     };
   }
 }
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
index e5f6168400..ac76a94477 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/hooks/filter.ts
@@ -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)))
     );
   };
 
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx
index d7e38183c5..d2f0f00469 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx
@@ -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>
   );