fix(charts): height should be self-adaption for Line, Area and DualAxes

packages/charts/package.json

@@ -31,6 +31,7 @@
     "@oceanbase/util": "workspace:^",
     "classnames": "^2.3.2",
     "lodash": "^4.17.21",
+    "rc-util": "^5.37.0",
     "tinycolor2": "^1.6.0",
     "use-resize-observer": "^9.1.0"
   },

packages/charts/src/Area/__tests__/__snapshots__/ref.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Area ref ref 1`] = `
+<div
+  data-chart-source-type="G2Plot"
+  size-sensor-id="1"
+  style="height: inherit;"
+>
+  <div
+    style="position:relative;"
+  >
+    <canvas
+      height="400"
+      style="width: 400px; height: 400px; display: inline-block; vertical-align: middle;"
+      width="400"
+    />
+  </div>
+  <object
+    class="size-sensor-object"
+    data="about:blank"
+    style="display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;"
+    tabindex="-1"
+    type="text/html"
+  />
+</div>
+`;

packages/charts/src/Area/__tests__/ref.test.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
+import { Area } from '@oceanbase/charts';
+
+describe('Area ref', () => {
+  it('ref', () => {
+    const DemoArea = () => {
+      const ref = useRef(null);
+      useEffect(() => {
+        expect(ref.current).not.toBeNull();
+        expect(typeof ref.current?.getChart).toBe('function');
+      }, []);
+      const config = {
+        data: [],
+        xField: 'x',
+        yField: 'y',
+      };
+      return <Area {...config} ref={ref} />;
+    };
+    const { asFragment } = render(<DemoArea />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+});

packages/charts/src/Area/index.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import type { AreaConfig as AntAreaConfig } from '@ant-design/charts';
 import { Area as AntArea } from '@ant-design/charts';
 import { sortByMoment } from '@oceanbase/util';
-import useResizeObserver from 'use-resize-observer';
+import { composeRef } from 'rc-util/es/ref';
 import type { Tooltip } from '../hooks/useTooltipScrollable';
 import useTooltipScrollable from '../hooks/useTooltipScrollable';
 import { useTheme } from '../theme';
@@ -14,17 +14,19 @@ export interface AreaConfig extends AntAreaConfig {
   theme?: Theme;
 }
 
-const Area: React.FC<AreaConfig> = forwardRef(
+const Area = forwardRef<unknown, AreaConfig>(
   (
     { data, line, xField, xAxis, yAxis, tooltip, legend, interactions, theme, ...restConfig },
     ref
   ) => {
     const themeConfig = useTheme(theme);
-    const { ref: containerRef, height: containerHeight } = useResizeObserver<HTMLDivElement>({
-      // 包含 padding 和 border
-      box: 'border-box',
-    });
-    const tooltipConfig = useTooltipScrollable(tooltip, containerHeight);
+
+    const chartRef = useRef(null);
+    const mergedRef = composeRef(ref, chartRef);
+    const tooltipConfig = useTooltipScrollable(
+      tooltip,
+      chartRef.current?.getChart()?.chart?.height
+    );
 
     const newConfig: AreaConfig = {
       data:
@@ -91,11 +93,7 @@ const Area: React.FC<AreaConfig> = forwardRef(
       theme: themeConfig.theme,
       ...restConfig,
     };
-    return (
-      <div ref={containerRef}>
-        <AntArea {...newConfig} ref={ref} />
-      </div>
-    );
+    return <AntArea {...newConfig} ref={mergedRef} />;
   }
 );
 

packages/charts/src/DualAxes/__tests__/__snapshots__/ref.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DualAxes ref ref 1`] = `
+<div
+  data-chart-source-type="G2Plot"
+  size-sensor-id="1"
+  style="height: inherit;"
+>
+  <div
+    style="position:relative;"
+  >
+    <canvas
+      height="400"
+      style="width: 400px; height: 400px; display: inline-block; vertical-align: middle;"
+      width="400"
+    />
+  </div>
+  <object
+    class="size-sensor-object"
+    data="about:blank"
+    style="display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;"
+    tabindex="-1"
+    type="text/html"
+  />
+</div>
+`;

packages/charts/src/DualAxes/__tests__/ref.test.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
+import { DualAxes } from '@oceanbase/charts';
+
+describe('DualAxes ref', () => {
+  it('ref', () => {
+    const DemoDualAxes = () => {
+      const ref = useRef(null);
+      useEffect(() => {
+        expect(ref.current).not.toBeNull();
+        expect(typeof ref.current?.getChart).toBe('function');
+      }, []);
+      const config = {
+        data: [[], []],
+        xField: 'x',
+        yField: ['y1', 'y2'],
+      };
+      return <DualAxes {...config} ref={ref} />;
+    };
+    const { asFragment } = render(<DemoDualAxes />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+});

packages/charts/src/DualAxes/index.tsx

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
+import React, { useRef, forwardRef } from 'react';
 import type { DualAxesConfig as AntDualAxesConfig } from '@ant-design/charts';
 import { DualAxes as AntDualAxes } from '@ant-design/charts';
 // @ts-ignore
 import type { GeometryColumnOption } from '@antv/g2plot/esm/plots/dual-axes/types';
 // @ts-ignore
 import type { Axis } from '@antv/g2plot/esm/types/axis';
 import { sortByMoment } from '@oceanbase/util';
-import useResizeObserver from 'use-resize-observer';
+import { composeRef } from 'rc-util/es/ref';
 import type { Tooltip } from '../hooks/useTooltipScrollable';
 import useTooltipScrollable from '../hooks/useTooltipScrollable';
 import { useTheme } from '../theme';
@@ -20,22 +20,23 @@ export interface DualAxesConfig extends Omit<AntDualAxesConfig, 'yAxis'> {
   theme?: Theme;
 }
 
-const DualAxes: React.FC<DualAxesConfig> = forwardRef(
+const DualAxes = forwardRef<unknown, DualAxesConfig>(
   (
     { data, xField, yField, xAxis, yAxis, tooltip, legend, geometryOptions, theme, ...restConfig },
     ref
   ) => {
     const themeConfig = useTheme(theme);
 
+    const chartRef = useRef(null);
+    const mergedRef = composeRef(ref, chartRef);
+    const tooltipConfig = useTooltipScrollable(
+      tooltip,
+      chartRef.current?.getChart()?.chart?.height
+    );
+
     const yField1 = yField?.[0];
     const yField2 = yField?.[1];
 
-    const { ref: containerRef, height: containerHeight } = useResizeObserver<HTMLDivElement>({
-      // 包含 padding 和 border
-      box: 'border-box',
-    });
-    const tooltipConfig = useTooltipScrollable(tooltip, containerHeight);
-
     const newConfig: DualAxesConfig = {
       data:
         // xAxis.type 为时间轴时，需要对 data 进行排序
@@ -140,11 +141,7 @@ const DualAxes: React.FC<DualAxesConfig> = forwardRef(
       theme: themeConfig.theme,
       ...restConfig,
     };
-    return (
-      <div ref={containerRef}>
-        <AntDualAxes {...newConfig} ref={ref} />
-      </div>
-    );
+    return <AntDualAxes {...newConfig} ref={mergedRef} />;
   }
 );
 

packages/charts/src/Line/__tests__/__snapshots__/ref.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line ref ref 1`] = `
+<div
+  data-chart-source-type="G2Plot"
+  size-sensor-id="1"
+  style="height: inherit;"
+>
+  <div
+    style="position:relative;"
+  >
+    <canvas
+      height="400"
+      style="width: 400px; height: 400px; display: inline-block; vertical-align: middle;"
+      width="400"
+    />
+  </div>
+  <object
+    class="size-sensor-object"
+    data="about:blank"
+    style="display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0;"
+    tabindex="-1"
+    type="text/html"
+  />
+</div>
+`;

packages/charts/src/Line/__tests__/ref.test.tsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useRef } from 'react';
+import { render } from '@testing-library/react';
+import { Line } from '@oceanbase/charts';
+
+describe('Line ref', () => {
+  it('ref', () => {
+    const DemoLine = () => {
+      const ref = useRef(null);
+      useEffect(() => {
+        expect(ref.current).not.toBeNull();
+        expect(typeof ref.current?.getChart).toBe('function');
+      }, []);
+      const config = {
+        data: [],
+        xField: 'x',
+        yField: 'y',
+      };
+      return <Line {...config} ref={ref} />;
+    };
+    const { asFragment } = render(<DemoLine />);
+    expect(asFragment().firstChild).toMatchSnapshot();
+  });
+});

packages/charts/src/Line/demo/auto-fit.tsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import { Line } from '@oceanbase/charts';
+
+export default () => {
+  const [data, setData] = useState([]);
+  const asyncFetch = () => {
+    fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
+      .then(response => response.json())
+      .then(json => setData(json))
+      .catch(error => {
+        console.log('fetch data failed', error);
+      });
+  };
+  useEffect(() => {
+    asyncFetch();
+  }, []);
+  const config = {
+    data,
+    xField: 'year',
+    yField: 'value',
+    seriesField: 'category',
+    xAxis: {
+      type: 'time',
+    },
+    yAxis: {
+      label: {
+        // 数值格式化为千分位
+        formatter: v => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, s => `${s},`),
+      },
+    },
+    style: {
+      height: '50vh',
+    },
+  };
+  return <Line {...config} />;
+};

packages/charts/src/Line/index.md

@@ -13,6 +13,8 @@ nav:
 
 <code src="./demo/multiple.tsx" title="多折线图"></code>
 
+<code src="./demo/auto-fit.tsx" title="自适应容器高度" description="调整浏览器窗口高度即可验证"></code>
+
 <code src="./demo/tooltip-scrollable.tsx" title="Tooltip 可滚动" description="适用于 Tooltip 项较多、超出图表的场景，可通过 `tooltip.scrollable: true` 配置进行开启。"></code>
 
 ## API

packages/charts/src/Line/index.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { sortByMoment } from '@oceanbase/util';
 import type { LineConfig as AntLineConfig } from '@ant-design/charts';
 import { Line as AntLine } from '@ant-design/charts';
-import useResizeObserver from 'use-resize-observer';
+import { composeRef } from 'rc-util/es/ref';
 import type { Tooltip } from '../hooks/useTooltipScrollable';
 import useTooltipScrollable from '../hooks/useTooltipScrollable';
 import { useTheme } from '../theme';
@@ -14,18 +14,19 @@ export interface LineConfig extends AntLineConfig {
   theme?: Theme;
 }
 
-const Line: React.FC<LineConfig> = forwardRef(
+const Line = forwardRef<unknown, LineConfig>(
   (
     { data, stepType, xField, xAxis, yAxis, tooltip, legend, interactions, theme, ...restConfig },
     ref
   ) => {
     const themeConfig = useTheme(theme);
 
-    const { ref: containerRef, height: containerHeight } = useResizeObserver<HTMLDivElement>({
-      // 包含 padding 和 border
-      box: 'border-box',
-    });
-    const tooltipConfig = useTooltipScrollable(tooltip, containerHeight);
+    const chartRef = useRef(null);
+    const mergedRef = composeRef(ref, chartRef);
+    const tooltipConfig = useTooltipScrollable(
+      tooltip,
+      chartRef.current?.getChart()?.chart?.height
+    );
 
     const newConfig: LineConfig = {
       data:
@@ -86,11 +87,7 @@ const Line: React.FC<LineConfig> = forwardRef(
       theme: themeConfig.theme,
       ...restConfig,
     };
-    return (
-      <div ref={containerRef}>
-        <AntLine {...newConfig} ref={ref} />
-      </div>
-    );
+    return <AntLine {...newConfig} ref={mergedRef} />;
   }
 );