fix(types): fix types error

__tests__/plots/line.spec.tsx

@@ -2,7 +2,8 @@ import React, { createRef } from 'react'
 import ReactDOM from 'react-dom'
 import LineChart from '../../src/plots/line'
 import StateManagerProvider from '../../src/components/state-manager'
-import { StateManager } from '@antv/g2plot'
+import { StateManager, LineConfig } from '@antv/g2plot'
+import BasePlot from '@antv/g2plot/lib/base/plot'
 
 describe('LineChart', () => {
   test('render without crashed', () => {
@@ -11,8 +12,8 @@ describe('LineChart', () => {
   })
 
   test('object ref should be assigned', () => {
-    const ref = createRef<any>()
-    const chartRef = createRef()
+    const ref = createRef<HTMLDivElement | null>()
+    const chartRef = createRef<BasePlot<LineConfig> | null>()
     const div = document.createElement('div')
     ReactDOM.render(<LineChart data={[]} ref={ref} chartRef={chartRef} />, div)
     expect(ref.current).toBeDefined()
@@ -25,7 +26,7 @@ describe('LineChart', () => {
       expect(instance).toBeTruthy()
     }
     const div = document.createElement('div')
-    ReactDOM.render(<LineChart data={[]} ref={getChart} />, div)
+    ReactDOM.render(<LineChart data={[]} chartRef={getChart} />, div)
 
     // expect(chart).toBeDefined()
   })

src/components/base/index.tsx

@@ -71,7 +71,7 @@ const syncRef = <C extends PlotConfig>(
 export interface BaseChartProps<C extends PlotConfig>
   extends Pick<HTMLAttributes<HTMLDivElement>, PickedAttrs> {
   chart: Plot<C>
-  chartRef: Ref<BasePlot<C, LayerCtor<C>> | null>
+  chartRef?: Ref<BasePlot<C, LayerCtor<C>> | null>
   stateManager?: StateManagerCfg
 }
 
@@ -94,7 +94,6 @@ const BaseChart = <C extends PlotConfig>(
   const isFirstRenderRef = useRef<boolean>(true)
 
   useImperativeHandle(ref, () => containerRef.current)
-  useImperativeHandle(chart, () => chartRef.current)
 
   useEffect(() => {
     const { current: container } = containerRef
@@ -148,5 +147,5 @@ const BaseChart = <C extends PlotConfig>(
 }
 
 export default forwardRef(BaseChart) as <C extends PlotConfig>(
-  p: BaseChartProps<C> & RefAttributes<BasePlot<C, LayerCtor<C>> | null>
+  p: BaseChartProps<C> & RefAttributes<HTMLDivElement | null>
 ) => ReactElement

src/plots/area/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Area, AreaConfig, Base as BasePlot } from '@antv/g2plot'
+import { Area, AreaConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type AreaChartProps = Omit<BaseChartProps<AreaConfig>, 'chart'> &
   AreaConfig
 
-const AreaChart = forwardRef<BasePlot<AreaConfig>, AreaChartProps>(
+const AreaChart = forwardRef<HTMLDivElement | null, AreaChartProps>(
   (props, ref) => {
     return <BaseChart chart={Area} ref={ref} {...props} />
   }

src/plots/bar/index.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
-import { Bar, BarConfig, Base as BasePlot } from '@antv/g2plot'
+import { Bar, BarConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BarChartProps = Omit<BaseChartProps<BarConfig>, 'chart'> & BarConfig
 
-const BarChart = forwardRef<BasePlot<BarConfig>, BarChartProps>(
+const BarChart = forwardRef<HTMLDivElement | null, BarChartProps>(
   (props, ref) => {
     return <BaseChart chart={Bar} ref={ref} {...props} />
   }

src/plots/bubble/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Bubble, BubbleConfig, Base as BasePlot } from '@antv/g2plot'
+import { Bubble, BubbleConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BubbleChartProps = Omit<BaseChartProps<BubbleConfig>, 'chart'> &
   BubbleConfig
 
-const BubbleChart = forwardRef<BasePlot<BubbleConfig>, BubbleChartProps>(
+const BubbleChart = forwardRef<HTMLDivElement | null, BubbleChartProps>(
   (props, ref) => {
     return <BaseChart chart={Bubble} ref={ref} {...props} />
   }

src/plots/bullet/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Bullet, BulletConfig, Base as BasePlot } from '@antv/g2plot'
+import { Bullet, BulletConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type BulletChartProps = Omit<BaseChartProps<BulletConfig>, 'chart'> &
   BulletConfig
 
-const BulletChart = forwardRef<BasePlot<BulletConfig>, BulletChartProps>(
+const BulletChart = forwardRef<HTMLDivElement | null, BulletChartProps>(
   (props, ref) => {
     return <BaseChart chart={Bullet} ref={ref} {...props} />
   }

src/plots/calendar/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Calendar, CalendarConfig, Base as BasePlot } from '@antv/g2plot'
+import { Calendar, CalendarConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type CalendarChartProps = Omit<BaseChartProps<CalendarConfig>, 'chart'> &
   CalendarConfig
 
-const CalendarChart = forwardRef<BasePlot<CalendarConfig>, CalendarChartProps>(
+const CalendarChart = forwardRef<HTMLDivElement | null, CalendarChartProps>(
   (props, ref) => {
     return <BaseChart chart={Calendar} ref={ref} {...props} />
   }

src/plots/column-line/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { ColumnLine, ColumnLineConfig, Base as BasePlot } from '@antv/g2plot'
+import { ColumnLine, ColumnLineConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type ColumnLineChartProps = Omit<
@@ -8,11 +8,10 @@ export type ColumnLineChartProps = Omit<
 > &
   ColumnLineConfig
 
-const ColumnLineChart = forwardRef<
-  BasePlot<ColumnLineConfig>,
-  ColumnLineChartProps
->((props, ref) => {
-  return <BaseChart chart={ColumnLine} ref={ref} {...props} />
-})
+const ColumnLineChart = forwardRef<HTMLDivElement | null, ColumnLineChartProps>(
+  (props, ref) => {
+    return <BaseChart chart={ColumnLine} ref={ref} {...props} />
+  }
+)
 
 export default ColumnLineChart

src/plots/column/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Column, ColumnConfig, Base as BasePlot } from '@antv/g2plot'
+import { Column, ColumnConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type ColumnChartProps = Omit<BaseChartProps<ColumnConfig>, 'chart'> &
   ColumnConfig
 
-const ColumnChart = forwardRef<BasePlot<ColumnConfig>, ColumnChartProps>(
+const ColumnChart = forwardRef<HTMLDivElement | null, ColumnChartProps>(
   (props, ref) => {
     return <BaseChart chart={Column} ref={ref} {...props} />
   }

src/plots/density-heatmap/index.tsx

@@ -1,9 +1,5 @@
 import React, { forwardRef } from 'react'
-import {
-  DensityHeatmap,
-  DensityHeatmapConfig,
-  Base as BasePlot,
-} from '@antv/g2plot'
+import { DensityHeatmap, DensityHeatmapConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type DensityHeatmapChartProps = Omit<
@@ -13,7 +9,7 @@ export type DensityHeatmapChartProps = Omit<
   DensityHeatmapConfig
 
 const DensityHeatmapChart = forwardRef<
-  BasePlot<DensityHeatmapConfig>,
+  HTMLDivElement | null,
   DensityHeatmapChartProps
 >((props, ref) => {
   return (

src/plots/density/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Density, DensityConfig, Base as BasePlot } from '@antv/g2plot'
+import { Density, DensityConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type DensityChartProps = Omit<BaseChartProps<DensityConfig>, 'chart'> &
   DensityConfig
 
-const DensityChart = forwardRef<BasePlot<DensityConfig>, DensityChartProps>(
+const DensityChart = forwardRef<HTMLDivElement | null, DensityChartProps>(
   (props, ref) => {
     return <BaseChart chart={Density} ref={ref} {...props} />
   }

src/plots/donut/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Donut, DonutConfig, Base as BasePlot } from '@antv/g2plot'
+import { Donut, DonutConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type DonutChartProps = Omit<BaseChartProps<DonutConfig>, 'chart'> &
   DonutConfig
 
-const DonutChart = forwardRef<BasePlot<DonutConfig>, DonutChartProps>(
+const DonutChart = forwardRef<HTMLDivElement | null, DonutChartProps>(
   (props, ref) => {
     return <BaseChart chart={Donut} ref={ref} {...props} />
   }

src/plots/dual-line/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { DualLine, DualLineConfig, Base as BasePlot } from '@antv/g2plot'
+import { DualLine, DualLineConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type DualLineChartProps = Omit<BaseChartProps<DualLineConfig>, 'chart'> &
   DualLineConfig
 
-const DualLineChart = forwardRef<BasePlot<DualLineConfig>, DualLineChartProps>(
+const DualLineChart = forwardRef<HTMLDivElement | null, DualLineChartProps>(
   (props, ref) => {
     return <BaseChart chart={DualLine} ref={ref} {...props} />
   }

src/plots/fan-gauge/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { FanGauge, FanGaugeConfig, Base as BasePlot } from '@antv/g2plot'
+import { FanGauge, FanGaugeConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type FanGaugeChartProps = Omit<BaseChartProps<FanGaugeConfig>, 'chart'> &
   FanGaugeConfig
 
-const FanGaugeChart = forwardRef<BasePlot<FanGaugeConfig>, FanGaugeChartProps>(
+const FanGaugeChart = forwardRef<HTMLDivElement | null, FanGaugeChartProps>(
   (props, ref) => {
     return <BaseChart chart={FanGauge} ref={ref} {...props} />
   }

src/plots/funnel/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Funnel, FunnelConfig, Base as BasePlot } from '@antv/g2plot'
+import { Funnel, FunnelConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type FunnelChartProps = Omit<BaseChartProps<FunnelConfig>, 'chart'> &
   FunnelConfig
 
-const FunnelChart = forwardRef<BasePlot<FunnelConfig>, FunnelChartProps>(
+const FunnelChart = forwardRef<HTMLDivElement | null, FunnelChartProps>(
   (props, ref) => {
     return <BaseChart chart={Funnel} ref={ref} {...props} />
   }

src/plots/gauge/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Gauge, GaugeConfig, Base as BasePlot } from '@antv/g2plot'
+import { Gauge, GaugeConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type GaugeChartProps = Omit<BaseChartProps<GaugeConfig>, 'chart'> &
   GaugeConfig
 
-const GaugeChart = forwardRef<BasePlot<GaugeConfig>, GaugeChartProps>(
+const GaugeChart = forwardRef<HTMLDivElement | null, GaugeChartProps>(
   (props, ref) => {
     return <BaseChart chart={Gauge} ref={ref} {...props} />
   }

src/plots/grouped-bar/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { GroupedBar, GroupedBarConfig, Base as BasePlot } from '@antv/g2plot'
+import { GroupedBar, GroupedBarConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type GroupedBarChartProps = Omit<
@@ -8,11 +8,10 @@ export type GroupedBarChartProps = Omit<
 > &
   GroupedBarConfig
 
-const GroupedBarChart = forwardRef<
-  BasePlot<GroupedBarConfig>,
-  GroupedBarChartProps
->((props, ref) => {
-  return <BaseChart chart={GroupedBar} ref={ref} {...props} />
-})
+const GroupedBarChart = forwardRef<HTMLDivElement | null, GroupedBarChartProps>(
+  (props, ref) => {
+    return <BaseChart chart={GroupedBar} ref={ref} {...props} />
+  }
+)
 
 export default GroupedBarChart

src/plots/grouped-column-line/index.tsx

@@ -1,9 +1,5 @@
 import React, { forwardRef } from 'react'
-import {
-  GroupedColumnLine,
-  GroupedColumnLineConfig,
-  Base as BasePlot,
-} from '@antv/g2plot'
+import { GroupedColumnLine, GroupedColumnLineConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type GroupedColumnLineChartProps = Omit<
@@ -13,7 +9,7 @@ export type GroupedColumnLineChartProps = Omit<
   GroupedColumnLineConfig
 
 const GroupedColumnLineChart = forwardRef<
-  BasePlot<GroupedColumnLineConfig>,
+  HTMLDivElement | null,
   GroupedColumnLineChartProps
 >((props, ref) => {
   return <BaseChart chart={GroupedColumnLine} ref={ref} {...props} />

src/plots/grouped-column/index.tsx

@@ -1,9 +1,5 @@
 import React, { forwardRef } from 'react'
-import {
-  GroupedColumn,
-  GroupedColumnConfig,
-  Base as BasePlot,
-} from '@antv/g2plot'
+import { GroupedColumn, GroupedColumnConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type GroupedColumnChartProps = Omit<
@@ -13,7 +9,7 @@ export type GroupedColumnChartProps = Omit<
   GroupedColumnConfig
 
 const GroupedColumnChart = forwardRef<
-  BasePlot<GroupedColumnConfig>,
+  HTMLDivElement | null,
   GroupedColumnChartProps
 >((props, ref) => {
   return <BaseChart chart={GroupedColumn} ref={ref} {...props} />

src/plots/grouped-rose/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { GroupedRose, GroupedRoseConfig, Base as BasePlot } from '@antv/g2plot'
+import { GroupedRose, GroupedRoseConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type GroupedRoseChartProps = Omit<
@@ -9,7 +9,7 @@ export type GroupedRoseChartProps = Omit<
   GroupedRoseConfig
 
 const GroupedRoseChart = forwardRef<
-  BasePlot<GroupedRoseConfig>,
+  HTMLDivElement | null,
   GroupedRoseChartProps
 >((props, ref) => {
   return <BaseChart chart={GroupedRose} ref={ref} {...props} />

src/plots/heatmap/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Heatmap, HeatmapConfig, Base as BasePlot } from '@antv/g2plot'
+import { Heatmap, HeatmapConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type HeatmapChartProps = Omit<BaseChartProps<HeatmapConfig>, 'chart'> &
   HeatmapConfig
 
-const HeatmapChart = forwardRef<BasePlot<HeatmapConfig>, HeatmapChartProps>(
+const HeatmapChart = forwardRef<HTMLDivElement | null, HeatmapChartProps>(
   (props, ref) => {
     return <BaseChart chart={Heatmap} ref={ref} {...props} />
   }

src/plots/histogram/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { Histogram, HistogramConfig, Base as BasePlot } from '@antv/g2plot'
+import { Histogram, HistogramConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type HistogramChartProps = Omit<
@@ -8,11 +8,10 @@ export type HistogramChartProps = Omit<
 > &
   HistogramConfig
 
-const HistogramChart = forwardRef<
-  BasePlot<HistogramConfig>,
-  HistogramChartProps
->((props, ref) => {
-  return <BaseChart chart={Histogram} ref={ref} {...props} />
-})
+const HistogramChart = forwardRef<HTMLDivElement | null, HistogramChartProps>(
+  (props, ref) => {
+    return <BaseChart chart={Histogram} ref={ref} {...props} />
+  }
+)
 
 export default HistogramChart

src/plots/line/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react'
-import { Line, LineConfig, Base as BasePlot } from '@antv/g2plot'
+import { Line, LineConfig } from '@antv/g2plot'
 import BaseChart, { BaseChartProps } from '../../components/base'
 
 export type LineChartProps = Omit<BaseChartProps<LineConfig>, 'chart'> &
   LineConfig
 
-const LineChart = forwardRef<BasePlot<LineConfig>, LineChartProps>(
+const LineChart = forwardRef<HTMLDivElement | null, LineChartProps>(
   (props, ref) => {
     return <BaseChart chart={Line} ref={ref} {...props} />
   }