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

oceanbase · Oct 8, 2023 · ea73549 · ea73549
1 parent f1b50fb
commit ea73549
Show file tree

Hide file tree

Showing 11 changed files with 5,068 additions and 13,541 deletions.
diff --git a/packages/charts/package.json b/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"
   },

diff --git a/packages/charts/src/Area/__tests__/__snapshots__/ref.test.tsx.snap b/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>
+`;
diff --git a/packages/charts/src/Area/__tests__/ref.test.tsx b/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();
+  });
+});
diff --git a/packages/charts/src/Area/index.tsx b/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} />;
   }
 );
 

diff --git a/packages/charts/src/DualAxes/__tests__/__snapshots__/ref.test.tsx.snap b/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>
+`;
diff --git a/packages/charts/src/DualAxes/__tests__/ref.test.tsx b/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();
+  });
+});
diff --git a/packages/charts/src/DualAxes/index.tsx b/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} />;
   }
 );
 

diff --git a/packages/charts/src/Line/__tests__/__snapshots__/ref.test.tsx.snap b/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>
+`;
diff --git a/packages/charts/src/Line/__tests__/ref.test.tsx b/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();
+  });
+});
diff --git a/packages/charts/src/Line/index.tsx b/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} />;
   }
 );