feat: upgrade g2plot to v2

Author: hustcc

README.md

@@ -26,14 +26,14 @@ $ npm install react-g2plot
 import ReactDOM from 'react-dom';
 import React from 'react';
 
-import { Line } from '@antv/g2plot'
-import ReactG2Plot from 'react-g2plot';
+import { Line } from '@antv/g2plot';      // import plot from G2Plot
+import ReactG2Plot from 'react-g2plot';   // import React wrapper
 
 ReactDOM.render(
   <ReactG2Plot
     className="your-classname"
     Ctor={Line}
-    config={config}
+    options={options}
   />,
   mountNode,
 );
@@ -42,7 +42,7 @@ ReactDOM.render(
 
 ## Documents
 
-All documents about `plot` and `config` are [here](https://g2plot.antv.vision/).
+All documents about `plot` and `options` are [here](https://g2plot.antv.vision/).
 
 
 
@@ -61,6 +61,4 @@ $ npm run demo
 
 ## LICENSE
 
-MIT@[hustcc](https://github.com/hustcc).
-
-
+MIT@[hustcc](https://github.com/hustcc).

__tests__/index.spec.tsx

@@ -31,25 +31,15 @@ describe('ReactG2Plot', () => {
     ];
 
     // line chart config
-    const config = {
-      title: {
-        visible: true,
-        text: '曲线折线图',
-      },
-      description: {
-        visible: true,
-        text: '用平滑的曲线代替折线。',
-      },
-      padding: 'auto',
-      forceFit: true,
+    const options = {
       data,
       xField: 'year',
       yField: 'value',
       smooth: true,
     };
 
     // render g2plot react component
-    ReactDOM.render(<ReactG2Plot className="g2plot-for-react" Ctor={Line} config={config} />, createDiv());
+    ReactDOM.render(<ReactG2Plot Ctor={Line} options={options} />, createDiv());
 
     expect(document.querySelector('.g2plot-for-react')).not.toBeNull();
   });

demo/index.html

@@ -45,7 +45,7 @@
 
   <script src="//unpkg.com/react@16/umd/react.production.min.js"></script>
   <script src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/@antv/g2plot"></script>
+  <script src="//unpkg.com/@antv/g2plot@2.0.0-beta.6"></script>
   <script src="./demo.min.js" type="application/javascript"></script>
 </body>
 </html>

demo/index.tsx

@@ -13,68 +13,57 @@ const Data = [
   { year: '1997', value: 7 },
   { year: '1998', value: 9 },
   { year: '1999', value: 13 },
+  { year: '2000', value: 4 },
+  { year: '2001', value: 7 },
+  { year: '2002', value: 2 },
+  { year: '2003', value: 20 },
 ];
 
-const LineConfig = {
-  title: {
-    visible: true,
-    text: '曲线折线图',
-  },
-  description: {
-    visible: true,
-    text: '用平滑的曲线代替折线。',
-  },
-  padding: 'auto',
-  forceFit: true,
-  data: Data,
-  xField: 'year',
-  yField: 'value',
-  smooth: true,
-};
-
-const ColumnConfig = {
-  title: {
-    visible: true,
-    text: '柱形图',
-  },
-  description: {
-    visible: true,
-    text: '使用柱形图展示每一年的对比情况。',
-  },
-  padding: 'auto',
-  forceFit: true,
-  data: Data,
-  xField: 'year',
-  yField: 'value',
-};
-
 function Entry() {
   const [isLine, setIsLine] = useState<boolean>(true);
+  const [data, setData] = useState<object[]>(Data);
 
   function ref(plot) {
-    console.log('G2Plot instance Ref', plot);
+    console.log('G2Plot instance Ref', plot.type);
   }
 
   function getCtor() {
     return isLine ? Line : Column;
   }
 
-  function getConfig() {
-    return isLine ? LineConfig : ColumnConfig;
+  function getOptions() {
+    return isLine
+      ? {
+          data,
+          xField: 'year',
+          yField: 'value',
+          smooth: true,
+          appendPadding: 12,
+        }
+      : {
+          data,
+          xField: 'year',
+          yField: 'value',
+          appendPadding: 12,
+        };
   }
 
   useEffect(() => {
     const id = setInterval(() => {
       // 切换
-      setIsLine(!isLine);
+      if (Math.random() > 0.5) {
+        setIsLine(!isLine);
+      } else {
+        setData(data.slice(0, 6 + Math.floor(Math.random() * 5)));
+      }
     }, 3000);
 
     return () => {
       clearInterval(id);
     };
   }, [isLine]);
 
-  return <ReactG2Plot className="g2plot-for-react" Ctor={getCtor()} config={getConfig()} ref={ref} />;
+  return <ReactG2Plot Ctor={getCtor()} options={getOptions()} ref={ref} />;
 }
 
 ReactDOM.render(<Entry />, document.getElementById('root-container'));

package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-g2plot",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Unofficial react component wrapper for @antv/g2plot.",
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
-    "esm"
+    "esm",
+    "src"
   ],
   "scripts": {
     "lint-staged": "lint-staged",
@@ -41,7 +43,7 @@
   },
   "homepage": "https://github.com/hustcc/react-g2plot",
   "devDependencies": {
-    "@antv/g2plot": "^1.0.0",
+    "@antv/g2plot": "^2.0.0-beta.6",
     "@commitlint/cli": "^8.2.0",
     "@types/jest": "^24.0.19",
     "@types/react": "^16.9.9",
@@ -64,7 +66,7 @@
     "webpack-cli": "^3.3.11"
   },
   "peerDependencies": {
-    "@antv/g2plot": "*",
+    "@antv/g2plot": "^2.0.0",
     "react": ">= 16.8.0"
   },
   "lint-staged": {

src/index.tsx

@@ -1,16 +1,16 @@
 import React, { useEffect, useRef, forwardRef } from 'react';
 
-export type ReactG2PlotProps = {
+export type ReactG2PlotProps<O> = {
   readonly className?: string;
   readonly Ctor: any;
-  readonly config: object;
+  readonly options: O;
 };
 
 /**
- * 一个基本可用的 G2Plot React 组件
+ * 一个业务可用的 G2Plot React 组件
  */
-export default forwardRef((props: ReactG2PlotProps, ref: any) => {
-  const { className, Ctor, config } = props;
+export default forwardRef(function<O = any>(props: ReactG2PlotProps<O>, ref: any) {
+  const { className, Ctor, options } = props;
 
   const $dom = useRef(undefined);
   const plotRef = useRef(undefined);
@@ -29,31 +29,39 @@ export default forwardRef((props: ReactG2PlotProps, ref: any) => {
   }
 
   /**
-   * 创建
+   * 如果存在则更新，否则就创建
    */
-  function newPlot() {
+  function renderPlot() {
     if (plotRef.current) {
-      plotRef.current.destroy();
-      plotRef.current = undefined;
+      // update
+      plotRef.current.update(options);
+    } else {
+      // new
+      plotRef.current = new Ctor($dom.current, options);
+      plotRef.current.render();
     }
 
-    plotRef.current = new Ctor($dom.current, config);
-
     syncRef(plotRef, ref);
+  }
 
-    plotRef.current.render();
+  /**
+   * 销毁
+   */
+  function destoryPlot() {
+    if (plotRef.current) {
+      plotRef.current.destroy();
+      plotRef.current = undefined;
+    }
   }
 
   useEffect(() => {
-    newPlot();
+    renderPlot();
 
     return () => {
-      if (plotRef.current) {
-        plotRef.current.destroy();
-        plotRef.current = undefined;
-      }
+      destoryPlot();
     };
-  }, [Ctor, config]);
+  }, [options, Ctor]);
 
-  return <div className={className} ref={$dom} />;
+  // 默认添加 g2plot-for-react 的 class
+  return <div className={`g2plot-for-react ${className || ''}`} ref={$dom} />;
 });