feat: 添加axis top

packages/components/src/axis/axisView.tsx

@@ -1,6 +1,7 @@
 import { jsx } from '@ali/f2-jsx';
 import PolarX from './polar/polar-x';
 import PolarY from './polar/polar-y';
+import Top from './rect/top';
 import Bottom from './rect/bottom';
 import Right from './rect/right';
 import Left from './rect/left';
@@ -24,7 +25,7 @@ export default (props: any) => {
   }
 
   if (position === 'top') {
-    return null;
+    return <Top { ...props } />;
   }
   return <Bottom { ...props } />
 }

packages/components/src/axis/rect/top.tsx

@@ -0,0 +1,80 @@
+import { jsx } from '@ali/f2-jsx';
+
+export default (props: any) => {
+  const { ticks, plot, style } = props;
+  const { tl, tr } = plot;
+  const { grid, tickLine, line, labelOffset, label } = style;
+
+  return (
+    <group>
+      {
+        grid ?
+          ticks.map(tick => {
+            const { points } = tick;
+            const start = points[0];
+            const end = points[points.length - 1];
+            return (
+              <line attrs={{
+                x1: start.x,
+                y1: start.y,
+                x2: end.x,
+                y2: end.y,
+                ...grid,
+              }} />
+            );
+          })
+        :
+          null
+      }
+      {
+        tickLine && tickLine.length ?
+          ticks.map(tick => {
+            const { points } = tick;
+            const end = points[points.length - 1];
+            return (
+              <line attrs={{
+                x1: end.x,
+                y1: end.y,
+                x2: end.x,
+                y2: end.y - tickLine.length,
+                ...tickLine,
+              }} />
+            );
+          })
+        :
+          null
+      }
+      {
+        line ?
+          <line attrs={{
+            x1: tl.x,
+            y1: tl.y,
+            x2: tr.x,
+            y2: tr.y,
+            ...line,
+          }} />
+        :
+          null
+      }
+      {
+        label ?
+          ticks.map((tick, index) => {
+            const { points, text } = tick;
+            const end = points[points.length - 1];
+            return (
+              <text attrs={{
+                x: end.x,
+                y: end.y - labelOffset,
+                textAlign: 'center',
+                textBaseline: 'bottom',
+                text,
+                ...label,
+              }} />
+            );
+          })
+        :
+          null
+      }
+    </group>
+  );
+}

packages/components/test/axis.test.tsx

@@ -17,6 +17,12 @@ describe('Axis', () => {
       <Chart data={ data } context={ context } pixelRatio={ window.devicePixelRatio }>
         <Axis
           field="genre"
+          position="top"
+          // tickLine={{
+          //   length: '10px',
+          //   stroke: '#000',
+          //   lineWidth: '4px',
+          // }}
         />
         <Axis
           field="sold"