feat: 添加area的绘制

packages/components/src/area/areaView.tsx

@@ -1,3 +1,15 @@
-export default () => {
-  return null;
+import { jsx } from '@ali/f2-jsx';
+
+export default (props) => {
+  const { points, color, smooth } = props;
+  return (
+    <polyline
+      attrs={{
+        points,
+        smooth,
+        fill: color,
+        fillOpacity: 0.1
+      }}
+    />
+  );
 }

packages/components/src/area/withArea.tsx

@@ -1,3 +1,4 @@
+import { jsx } from '@ali/f2-jsx';
 import { withGeometry } from '../geometry/index';
 
 export default View => {
@@ -9,5 +10,21 @@ export default View => {
       }
       super.mount();
     }
+
+    renderShape(props) {
+      const { points } = props;
+      let topPoints = [];
+      let bottomPoints = [];
+      points.forEach((point) => {
+        bottomPoints.push(point[0]);
+        topPoints.push(point[1]);
+      });
+      bottomPoints.reverse();
+      topPoints = this.parsePoints(topPoints);
+      bottomPoints = this.parsePoints(bottomPoints);
+      const newPoints = topPoints.concat(bottomPoints);
+
+      return <View { ...props } points={ newPoints } />
+    } 
   }
 }

packages/components/src/geometry/withGeometry.tsx

@@ -10,6 +10,7 @@ export default View => {
   return class Geometry extends Component {
     _shapes: any;
     geom: any;
+    coord: any;
 
     applyAttr(geom, attr, config) {
       if (!config) return;
@@ -26,8 +27,8 @@ export default View => {
 
       // 不画任何东西，在render里面统一画
       Shape.registerShape(type, EMPTY_SHAPE, {
-        draw(cfg, container) {
-          _shapes.push({ cfg, container });
+        draw(cfg) {
+          _shapes.push(cfg);
         }
       });
 
@@ -40,7 +41,6 @@ export default View => {
       geom.shape(EMPTY_SHAPE);
       this._shapes = _shapes;
       this.geom = geom;
-
       // this._pressEvent();
     }
     _pressEvent() {
@@ -64,6 +64,17 @@ export default View => {
         });
       }
     }
+    parsePoints(points) {
+      if (!points) return false;
+      const { chart } = this;
+      const coord = chart.get('coord');
+      return points.map(function(point) {
+        return coord.convertPoint(point);
+      });
+    }
+    renderShape(props) {
+      return <View { ...props } />
+    }
     render() {
       const _shapes = this._shapes;
       if (!_shapes || !_shapes.length) {
@@ -74,10 +85,10 @@ export default View => {
         <group>
           {
             _shapes.map(shape => {
-              return <View
-                { ...props }
-                { ...shape.cfg }
-              />
+              return this.renderShape({
+                ...props,
+                ...shape,
+              })
             })
           }
         </group>

packages/components/src/line/lineView.tsx

@@ -1,14 +1,16 @@
 import { jsx } from '@ali/f2-jsx';
 
 export default (props: any) => {
-  const { points, color, size } = props;
+  const { points, color, size, smooth, lineDash } = props;
   return (
     <polyline attrs={{
         points,
         lineJoin: 'round',
         lineCap: 'round',
-        lineWidth: size,
+        lineWidth: size || '4px',
         strokeStyle: color,
+        smooth,
+        lineDash,
       }}
     />
   );

packages/components/test/area.test.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { jsx } from '@ali/f2-jsx';
 import Chart, { Area } from '../src';
 import { createContext } from './util';
@@ -16,10 +15,12 @@ describe('Area', () => {
   it('render', () => {
     const { type, props } = (
       <Chart data={ data } context={ context }>
-        <Area position="genre*sold" />
+        <Area
+          position="genre*sold"
+        />
       </Chart>
     );
-
+    // @ts-ignore
     const chart = new type(props);
     chart.render();
   })

packages/components/test/line.test.tsx

@@ -25,6 +25,8 @@ describe('Line', () => {
               return 'red';
             }
           ]}
+          smooth={ true }
+          lineDash={ [4, 4] }
         />
       </Chart>
     );