feat: 完成一张图

packages/components/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ali/f2-components",
   "version": "0.0.6",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
   "dependencies": {
     "@ali/f2-jsx": "^0.0.4",
     "@antv/f2": "^3.8.1"

packages/components/src/axis/withAxis.tsx

@@ -5,12 +5,16 @@ export default View => {
   return class Axis extends Component {
     mount() {
       const { props, chart } = this;
-      const { xField } = props; 
-      chart.scale(xField, {
-        type: 'timeCat',
-        tickCount: 3,
-        range: [0, 1],
-      });
+      const { field } = props;
+      const scale = chart.get('scales')[field];
+
+      console.log(scale);
+
+      // chart.scale(xField, {
+      //   type: 'timeCat',
+      //   tickCount: 3,
+      //   range: [0, 1],
+      // });
     }
     render() {
       return <View />

packages/components/src/base/index.ts

@@ -3,11 +3,14 @@ class Component {
   container: any;
   props: any;
   state: any;
+  ref: any;
   actions: any;
 
   constructor(props: any, chart: any) {
+    const { ref } = props;
     this.chart = chart;
     this.props = props;
+    this.ref = ref;
 
     this.mount();
   }

packages/components/src/chart/chart.ts

@@ -75,6 +75,10 @@ class Chart {
     }
     const shape = render(element, frontPlot);
     component.shape = shape;
+    if (component.ref) {
+      component.ref.component = component;
+      component.ref.current = shape;
+    }
   }
 
   source(data: any) {

packages/components/src/chart/index.ts

@@ -2,6 +2,7 @@ import Chart from './chart';
 
 export default (props: any) => {
   const { children, data, ...cfg } = props;
+
   const chart = new Chart({
     ...cfg,
     components: children

packages/components/src/geometry/withGeometry.tsx

@@ -1,28 +1,59 @@
 // @ts-nocheck
-
+import F2 from '@antv/f2';
 import Component from '../base/index';
+const Shape = F2.Shape;
+
+const EMPTY_SHAPE = 'empty-shape'
 
 export default View => {
   return class Geometry extends Component {
     mount() {
       const { chart, props } = this;
-      const { type, position, size, color, shape, style, ...config } = props;
+      const _shapes = this._shapes || [];
+      const { type, position, size, color, style, ...config } = props;
+
+      // 不画任何东西，在render里面统一画
+      Shape.registerShape(type, EMPTY_SHAPE, {
+        draw(cfg, container) {
+          _shapes.push({ cfg, container });
+        }
+      });
+
       const geom = chart[type](config).position(position);
       if (color) {
-        geom.color(color);
+        geom.color(color, ['#CCCCCC', '#EAB76B']);
       }
       if (size) {
         geom.size(size);
       }
-      if (shape) {
-        geom.shape(shape);
-      }
+
+      // 这里不画任何东西，在render的时候画
+      geom.shape(EMPTY_SHAPE);
       if (style) {
         geom.style(style);
       }
+      this._shapes = _shapes;
+      this.geom = geom;
+    }
+    getMappedData() {
+      return this.geom.get('dataArray');
     }
     render() {
-      return <View />
+      const _shapes = this._shapes;
+      if (!_shapes || !_shapes.length) {
+        return null;
+      }
+      // 清空
+      this._shapes = [];
+      return (
+        <group>
+          {
+            _shapes.map(shape => {
+              return <View { ...shape.cfg } />
+            })
+          }
+        </group>
+      );
     }
   }
 }

packages/fund-components/src/axis/axisView.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+
+export default (props: any) => {
+  const { ticks, coord, dimType } = props;
+  const { tl, tr } = coord.plot;
+  if (dimType === 'y') {
+    return (
+      <group>
+        {
+          ticks.map(tick => {
+            const { x, y, text } = tick;
+            return (
+              <group>
+                <text attrs={{
+                  x,
+                  y,
+                  text,
+                  fill: '#CCCCCC'
+                }} />
+                <line attrs={{
+                  x1: x,
+                  y1: y,
+                  x2: tr.x,
+                  y2: y,
+                  stroke: '#EDEDED',
+                  lineWidth: '1px',
+                  // lineDash: [ '3px', '6px' ]
+                }} />
+              </group>
+            );
+          })
+        }
+      </group>
+    );
+  }
+  return (
+    <group>
+      {
+        ticks.map(tick => {
+          const { x, y, text } = tick;
+          return (
+            <group>
+              <text attrs={{
+                x,
+                y,
+                text,
+                fill: '#CCCCCC'
+              }} />
+              <line attrs={{
+                x1: x,
+                y1: y,
+                x2: x,
+                y2: tl.y,
+                stroke: '#EDEDED',
+                lineWidth: '1px',
+                // lineDash: [ '3px', '6px' ]
+              }} />
+            </group>
+          );
+        })
+      }
+    </group>
+  );
+}

packages/fund-components/src/axis/index.tsx

@@ -0,0 +1,5 @@
+import withAxis from './withAxis';
+import AxisView from './axisView';
+
+export { withAxis, AxisView };
+export default withAxis(AxisView);

packages/fund-components/src/axis/withAxis.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+import { Component } from '@ali/f2-components';
+
+export default View => {
+  return class Axis extends Component {
+    mount() {
+      const { props, chart } = this;
+      const { field, type, tickCount, range } = props;
+      chart.scale(field, {
+        type,
+        tickCount,
+        range
+      });
+    }
+    getTicks() {
+      const { props, chart } = this;
+      const { field, dimType = 'x' } = props;
+      const scale = chart.get('scales')[field];
+      const coord = chart.get('coord');
+      const ticks = scale.getTicks();
+
+      const otherDim = dimType === 'x' ? 'y' : 'x';
+      const points = ticks.map(tick => {
+        const point = coord.convertPoint({
+          [dimType]: tick.value,
+          [otherDim]: 0,
+        });
+        return {
+          ...tick,
+          ...point,
+        }
+      });
+      return points;
+    }
+    render() {
+      const { chart, props } = this;
+      const { visible, dimType = 'x' } = props;
+      if (visible === false) {
+        return null;
+      }
+      const coord = chart.get('coord');
+      const ticks = this.getTicks();
+      return <View dimType={ dimType } ticks={ ticks } coord={ coord } />
+    }
+  }
+}

packages/fund-components/src/guide/guideView.tsx

@@ -0,0 +1,58 @@
+// @ts-nocheck
+
+export default (props: any) => {
+  const { points, height } = props;
+  if (!points || !points.length) {
+    return null;
+  }
+  const firstPoint = points[0];
+  const lastPoint = points[points.length - 1];
+  const { x, y } = firstPoint;
+  // 头尾补2个点
+  const y0 = height;
+  points.push({
+    x: lastPoint.x,
+    y: y0
+  }, {
+    x,
+    y: y0
+  });
+  return (
+    <group>
+      <line attrs={{
+        x1: x,
+        y1: y,
+        x2: x,
+        y2: y0,
+        stroke: '#CD9850',
+        lineWidth: '2px',
+        lineDash: [ '3px', '6px' ]
+      }}/>
+      <polyline attrs={{
+        points,
+        lineJoin: 'round',
+        lineCap: 'round',
+        fill: 'l(90) 0:#F1E7D1 1:#FFFFFF',
+        fillOpacity: 0.6,
+      }}
+      />
+      <circle
+        attrs={{
+          x,
+          y,
+          fill: '#D3B166',
+          fillOpacity: 0.3,
+          r: '24px'
+        }}
+      />
+      <circle
+        attrs={{
+          x,
+          y,
+          fill: '#EAB76B',
+          r: '12px'
+        }}
+      />
+    </group>
+  );
+}

packages/fund-components/src/guide/index.tsx

@@ -0,0 +1,5 @@
+import withGuide from './withGuide';
+import guideView from './guideView';
+
+export { withGuide, guideView };
+export default withGuide(guideView);

packages/fund-components/src/guide/withGuide.tsx

@@ -0,0 +1,34 @@
+// @ts-nocheck
+import { Component } from '@ali/f2-components';
+
+export default View => {
+  return class Guide extends Component {
+    mount() {
+      const { chart } = this;
+      const canvas = chart.get('canvas');
+      canvas.on('click', ev => {
+      });
+    }
+    parsePoint(record) {
+      const { chart } = this;
+      const coord = chart.get('coord');
+      const xScale = chart.getXScale();
+
+      // 只取第一个yScale
+      const yScale = chart.getYScales()[0];
+      const x = xScale.scale(record[xScale.field]);
+      const y = yScale.scale(record[yScale.field]);
+      return coord.convertPoint({ x, y });
+    }
+    render() {
+      const { chart, props } = this;
+      const { records } = props;
+      const coord = chart.get('coord');
+      const canvas = chart.get('canvas');
+      const width = canvas.get('width');
+      const height = canvas.get('height');
+      const points = records.map(record => this.parsePoint(record));
+      return <View points={ points } coord={ coord } width={ width } height={ height } />
+    }
+  }
+}

packages/fund-components/src/index.ts

@@ -1,2 +1,7 @@
 export { default as Legend, withLegend, LegendView } from './legend';
 export { default as WeaverLine } from './weaverLine';
+
+
+export { default as Line } from './line';
+export { default as Guide } from './guide';
+export { default as Axis } from './axis';

packages/fund-components/src/line/index.tsx

@@ -0,0 +1,5 @@
+import withLine from './withLine';
+import LineView from './lineView';
+
+export { withLine, LineView };
+export default withLine(LineView);

packages/fund-components/src/line/lineView.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+
+export default (props: any) => {
+  const { points, color } = props;
+  return (
+    <polyline attrs={{
+        points,
+        lineWidth: '3px',
+        strokeStyle: color,
+        lineJoin: 'round',
+        lineCap: 'round',
+      }}
+    />
+  );
+}

packages/fund-components/src/line/withLine.tsx

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import { Line, withLine } from '@ali/f2-components';
+
+export default View => {
+  return class Line extends withLine(View) {
+  }
+}