feat: 添加interval的绘制

packages/components/src/interval/intervalView.tsx

@@ -1,3 +1,33 @@
-export default () => {
-  return null;
+import { jsx } from '@ali/f2-jsx';
+
+function getRectRange(points) {
+  const xValues = [];
+  const yValues = [];
+  for (let i = 0, len = points.length; i < len; i++) {
+    const point = points[i];
+    xValues.push(point.x);
+    yValues.push(point.y);
+  }
+  const xMin = Math.min.apply(null, xValues);
+  const yMin = Math.min.apply(null, yValues);
+  const xMax = Math.max.apply(null, xValues);
+  const yMax = Math.max.apply(null, yValues);
+
+  return {
+    x: xMin,
+    y: yMin,
+    width: xMax - xMin,
+    height: yMax - yMin
+  };
+}
+
+export default (props) => {
+  const { points, color } = props;
+  const rectCfg = getRectRange(points);
+  return <rect
+    attrs={{
+      ...rectCfg,
+      fill: color,
+    }}
+  />;
 }

packages/components/src/interval/withInterval.tsx

@@ -1,3 +1,4 @@
+import { jsx } from '@ali/f2-jsx';
 import { withGeometry } from '../geometry/index';
 
 export default View => {
@@ -9,5 +10,9 @@ export default View => {
       }
       super.mount();
     }
+    renderShape(props) {
+      const points = this.parsePoints(props.points);
+      return <View { ...props } points={ points }/>
+    }
   }
 }

packages/components/src/point/pointView.tsx

@@ -6,8 +6,9 @@ export default (props) => {
     <circle attrs={{
       x,
       y,
+      lineWidth: 0,
       fill: color,
-      r: size,
+      r: size || '6px',
     }} />
   );
 }

packages/components/test/interval.test.tsx

@@ -15,8 +15,8 @@ const data = [
 describe('Interval', () => {
   it('render', () => {
     const { type, props } = (
-      <Chart data={ data } context={ context }>
-        <Interval position="genre*sold" />
+      <Chart data={ data } context={ context } pixelRatio={ window.devicePixelRatio }>
+        <Interval position="genre*sold" color="genre"/>
       </Chart>
     );
 

packages/components/test/point.test.tsx

@@ -0,0 +1,27 @@
+import { jsx } from '@ali/f2-jsx';
+import Chart, { Point } from '../src';
+import { createContext } from './util';
+const context = createContext();
+
+const data = [
+  { genre: 'Sports', sold: 275, type: 'a' },
+  { genre: 'Strategy', sold: 115, type: 'a' },
+  { genre: 'Action', sold: 120, type: 'a' },
+  { genre: 'Shooter', sold: 350, type: 'a' },
+  { genre: 'Other', sold: 150, type: 'a' }
+];
+
+describe('Area', () => {
+  it('render', () => {
+    const { type, props } = (
+      <Chart data={ data } context={ context }>
+        <Point
+          position="genre*sold"
+        />
+      </Chart>
+    );
+    // @ts-ignore
+    const chart = new type(props);
+    chart.render();
+  })
+});