feat: use chartRef instead of ref

Author: kagawagao

__tests__/plots/line.spec.tsx

@@ -12,10 +12,11 @@ describe('LineChart', () => {
 
   test('object ref should be assigned', () => {
     const ref = createRef<any>()
+    const chartRef = createRef()
     const div = document.createElement('div')
-    ReactDOM.render(<LineChart data={[]} ref={ref} />, div)
-
+    ReactDOM.render(<LineChart data={[]} ref={ref} chartRef={chartRef} />, div)
     expect(ref.current).toBeDefined()
+    expect(chartRef.current).toBeDefined()
   })
 
   test('function ref should be called', () => {

docs/api/index.md

@@ -6,7 +6,7 @@ nav:
 
 ## Configurations
 
-All configurations defined in `G2Plot` can be used as `props`, and use `ref` can access chart instance
+All configurations defined in `G2Plot` can be used as `props`, and use `chartRef` can access chart instance
 
 For example
 
@@ -16,7 +16,10 @@ import { LineChart } from '@opd/g2plot-react'
 
 export default () => {
   const ref = useRef()
-  return <LineChart xField="x" height={400} ref={ref} forceFit />
+  const chartRef = useRef()
+  return (
+    <LineChart xField="x" height={400} ref={ref} chartRef={chartRef} forceFit />
+  )
 }
 ```
 

docs/guide/get-started.md

@@ -110,6 +110,9 @@ export default () => {
   const getChart = useCallback((chart) => {
     console.log(chart)
   }, [])
-  return <LineChart {...config} ref={getChart} />
+  const getContainer = useCallback((container) => {
+    console.log(container)
+  }, [])
+  return <LineChart {...config} ref={getContainer} chartRef={getChart} />
 }
 ```