fix: 调整金牌经理样式

packages/components/package.json

@@ -5,7 +5,8 @@
   "module": "es/index.js",
   "dependencies": {
     "@ali/f2-jsx": "^0.0.6",
-    "@antv/f2": "^3.8.1"
+    "@antv/f2": "^3.8.1",
+    "@ali/f2x-util": "*"
   },
   "files": [
     "src",

packages/components/src/chart/index.ts

@@ -1,5 +1,6 @@
 import F2 from '@antv/f2';
 import { render } from '@ali/f2-jsx';
+import { batch2hd } from '@ali/f2x-util';
 
 // @ts-ignore
 const map = (children: any, fn: any) => {
@@ -38,7 +39,7 @@ class Chart {
       width,
       height,
       animate,
-      padding,
+      padding: batch2hd(padding),
     });
     // 直接设置数据
     chart.source(data);
@@ -140,6 +141,17 @@ class Chart {
     map(components, (component: any) => {
       this.renderComponent(component);
     });
+
+    // const plot = this.chart.get('plot');
+    // this.chart.get('canvas').addShape('rect', {
+    //   attrs: {
+    //     x: plot.start.x,
+    //     y: plot.start.y,
+    //     width: plot.width,
+    //     height: plot.height,
+    //     fill: 'gray'
+    //   }
+    // })
   }
 
   update(props: any) {

packages/components/src/geometry/withGeometry.tsx

@@ -7,6 +7,14 @@ const EMPTY_SHAPE = 'empty-shape'
 
 export default View => {
   return class Geometry extends Component {
+    applyAttr(geom, attr, config) {
+      if (!config) return;
+      if (Array.isArray(config)) {
+        geom[attr].apply(geom, config);
+      } else {
+        geom[attr](config);
+      }
+    }
     mount() {
       const { chart, props } = this;
       const _shapes = this._shapes || [];
@@ -20,21 +28,14 @@ export default View => {
       });
 
       const geom = chart[type](config).position(position);
-      if (color) {
-        geom.color(color, ['#CCCCCC', '#EAB76B']);
-      }
-      if (size) {
-        geom.size(size);
-      }
+      this.applyAttr(geom, 'color', color);
+      this.applyAttr(geom, 'size', size);
 
       // 这里不画任何东西，在render的时候画
       geom.shape(EMPTY_SHAPE);
       this._shapes = _shapes;
       this.geom = geom;
     }
-    getMappedData() {
-      return this.geom.get('dataArray');
-    }
     render() {
       const _shapes = this._shapes;
       if (!_shapes || !_shapes.length) {

packages/components/src/guide/guideView.tsx

@@ -0,0 +1,3 @@
+export default (props: any) => {
+  return null
+}

packages/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 → packages/components/src/guide/withGuide.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Component } from '@ali/f2-components';
+import Component from '../base/index';
 
 function isInBBox(bbox, point) {
   const { minX, maxX, minY, maxY } = bbox;
@@ -13,9 +13,13 @@ export default View => {
       const { chart, props } = this;
       const { onClick } = props;
       const canvas = chart.get('canvas');
+      // 创建ref
+      this.triggerRef = {};
+
       canvas.on('click', ev => {
         const { points } = ev;
         const shape = this.triggerRef.current;
+        if (!shape) return;
         const bbox = shape.getBBox();
         if (isInBBox(bbox, points[0])) {
           ev.shape = shape;
@@ -36,19 +40,16 @@ export default View => {
     }
     render() {
       const { props, width, height, plot } = this;
-      const { records, active } = props;
+      const { records, ...otherProps } = props;
       const points = records.map(record => this.parsePoint(record));
 
-      const triggerRef = {};
-      this.triggerRef = triggerRef;
-
       return <View
         points={ points }
+        triggerRef={ this.triggerRef }
         plot={ plot }
         width={ width }
         height={ height }
-        triggerRef={ triggerRef }
-        active={ active }
+        { ...otherProps }
       />
     }
   }

packages/components/src/index.ts

@@ -2,9 +2,10 @@ import Chart from './chart';
 
 export default Chart;
 export { default as Component } from './base';
-export { default as Line, withLine } from './line';
+export { default as Line, withLine, LineView } from './line';
 export { default as Area, withArea } from './area';
 export { default as Interval, withInterval } from './interval';
 export { default as Axis, withAxis, AxisView } from './axis';
 export { default as Legend, withLegend, LegendView } from './legend';
-export { default as Tooltip, withTooltip, TooltipView } from './tooltip';
+export { default as Tooltip, withTooltip, TooltipView } from './tooltip';
+export { default as Guide, withGuide, guideView } from './guide';

packages/components/src/line/lineView.tsx

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

packages/fund-components/package.json

@@ -6,7 +6,8 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@ali/f2-components": "^0.0.8",
-    "@ali/f2-jsx": "^0.0.6"
+    "@ali/f2-jsx": "^0.0.6",
+    "@ali/f2x-util": "*"
   },
   "files": [
     "src",

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

@@ -1,55 +1,14 @@
 // @ts-nocheck
+import Bottom from './bottom';
+import Left from './left';
 
 export default (props: any) => {
-  const { ticks, plot, position } = props;
-  const { tl, tr, br, bl } = plot;
-  let start = tl;
-  let end = bl;
-  let textAlign = 'center';
+  const { position } = props;
 
-  if (position === 'top') {
-    start = tl;
-    end = tr;
-  } else if (position === 'right') {
-    start = tr;
-    end = br;
-    textAlign = 'left';
-  } else if (position === 'bottom') {
-    start = bl;
-    end = br;
-  } else {
-    textAlign = 'right';
+  if (position === 'bottom') {
+    return (
+      <Bottom { ...props } />
+    );
   }
-
-  return (
-    <group>
-      {
-        ticks.map(tick => {
-          const { x, y, text } = tick;
-          return (
-            <group>
-              <text attrs={{
-                x,
-                y,
-                text,
-                fill: '#CCCCCC',
-                textAlign,
-                textBaseline: 'top',
-                fontSize: '20px'
-              }} />
-              <line attrs={{
-                x1: start.x,
-                y1: start.y,
-                x2: end.x,
-                y2: end.y,
-                stroke: '#EDEDED',
-                lineWidth: '1px',
-              }} />
-            </group>
-          );
-        })
-      }
-
-    </group>
-  );
+  return <Left { ...props } />
 }

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

@@ -0,0 +1,70 @@
+// @ts-nocheck
+
+export default (props: any) => {
+  const { plot, labelOffset, ticks, line, label, tickLine, grid } = props;
+  const { tl, br, bl } = plot;
+  const total = ticks.length;
+
+  return (
+    <group>
+      {
+        line ?
+          <line attrs={{
+            x1: bl.x,
+            y1: bl.y,
+            x2: br.x,
+            y2: br.y,
+            ...line,
+          }} />
+        :
+          null
+      }
+      {
+        ticks.map((tick, index) => {
+          const { x, y, text } = tick;
+          return (
+            <group>
+              {
+                label ?
+                  <text attrs={{
+                    x,
+                    y: y + labelOffset,
+                    textAlign: index === 0 ? 'start' : index === total - 1 ? 'end' : 'center',
+                    textBaseline: 'top',
+                    text,
+                    ...label,
+                  }} />
+                :
+                  null
+              }
+              {
+                grid ?
+                  <line attrs={{
+                    x1: x,
+                    y1: tl.y,
+                    x2: x,
+                    y2: bl.y,
+                    ...grid,
+                  }} />
+                :
+                  null
+              }
+              {
+                tickLine ?
+                  <line attrs={{
+                    x1: x,
+                    y1: bl.y,
+                    x2: x,
+                    y2: bl.y + (tickLine.length || 0), // 默认为0
+                    ...tickLine,
+                  }} />
+                :
+                  null
+              }
+            </group>
+          );
+        })
+      }
+    </group>
+  );
+}