feat: 添加react组件使用方式

antvis · Dec 24, 2020 · 7e317ef · 7e317ef
1 parent 28e3483
commit 7e317ef
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 0 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "f2x-react",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "dependencies": {
+    "@antv/f2": "^3.8.1"
+  },
+  "devDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "author": "yezengyue@gmail.com"
+}
diff --git a/packages/react/src/chart/index.tsx b/packages/react/src/chart/index.tsx
@@ -0,0 +1,12 @@
+/** @jsxImportSource react */
+
+import { useRef } from 'react';
+import useModel from './model';
+
+export default props => {
+  const { pixelRatio, data, children } = props;
+  const canvasRef = useRef(null);
+  useModel({ canvasRef, data, pixelRatio, children });
+
+  return (<canvas className="chart-canvas" ref={ canvasRef } />);
+}
diff --git a/packages/react/src/chart/model.ts b/packages/react/src/chart/model.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState, Children } from 'react';
+import F2 from '@antv/f2';
+
+export default ({ canvasRef, pixelRatio, data, children }) => {
+  // const [chart, setChart] = useState();
+
+  useEffect(() => {
+    const canvasEl = canvasRef.current;
+    const context = canvasEl.getContext('2d');
+    const chart = new F2.Chart({
+      context,
+      pixelRatio: pixelRatio || 1,
+    });
+
+    chart.source(data);
+
+    Children.map(children, child => {
+      const { type, props } = child;
+      return type({
+        ...props,
+        chart,
+      });
+    });
+
+    // const frontPlot = chart.get('frontPlot');
+
+    chart.render();
+    return;
+  }, []);
+
+  return {
+  }
+}
diff --git a/packages/react/src/chart/style.css b/packages/react/src/chart/style.css
@@ -0,0 +1,5 @@
+.chart-canvas {
+  vertical-align: top;
+  width: 100%;
+  height: 100%;
+}
diff --git a/packages/react/src/interval/index.tsx b/packages/react/src/interval/index.tsx
@@ -0,0 +1,15 @@
+
+export default (props) => {
+  const { chart, position } = props;
+  const geom = chart.interval();
+  geom.position(position);
+  console.log('interval props:', props);
+  return null;
+}
+
+// export default class Interval {
+//   render() {
+//     return null;
+//   }
+// }
+
diff --git a/packages/react/test/chart.test.tsx b/packages/react/test/chart.test.tsx
@@ -0,0 +1,42 @@
+/** @jsxImportSource react */
+
+import ReactDOM from 'react-dom';
+import Chart from '../src/chart';
+import Interval from '../src/interval';
+
+const style = document.createElement('style');
+style.setAttribute('rel', 'text/css');
+style.innerHTML = `
+.chart-canvas {
+  vertical-align: top;
+  width: 100%;
+  height: 100%;
+}
+`;
+document.head.appendChild(style);
+
+const root = document.createElement('div');
+document.body.appendChild(root);
+
+
+const data = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 }
+];
+
+const App = () => {
+  return (
+    <Chart
+      pixelRatio={ window.devicePixelRatio }
+      data={ data }
+    >
+      <Interval position="genre*sold" />
+    </Chart>
+  );
+}
+
+ReactDOM.render(<App />, root);
+
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react"
+  },
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/react/typings.d.ts b/packages/react/typings.d.ts
@@ -0,0 +1 @@
+import '../../typings';