feat: 完成基础折线图示例

antvis · Oct 20, 2021 · 98bde42 · 98bde42
1 parent 2cd3443
commit 98bde42
Show file tree

Hide file tree

Showing 6 changed files with 499 additions and 33 deletions.
diff --git a/packages/f2-next/src/components/line/lineView.tsx b/packages/f2-next/src/components/line/lineView.tsx
@@ -2,21 +2,22 @@ import { jsx } from '../../jsx';
 import { isArray } from '@antv/util';
 
 export default (props: any) => {
-  const { mappedArray, smooth, lineWidth = '4px' } = props;
+  const { mappedArray, lineWidth = '4px' } = props;
 
   return (
     <group>
       {
         mappedArray.map(item => {
-          const { color, points } = item;
+          const { color, points, lineDash, smooth } = item;
           return (
             <group>
               <polyline
                 attrs={{
                   points: points,
                   stroke: color,
                   lineWidth: lineWidth,
-                  smooth: smooth,
+                  lineDash,
+                  smooth,
                 }}
               />
             </group>

diff --git a/packages/f2-next/src/components/line/withLine.tsx b/packages/f2-next/src/components/line/withLine.tsx
@@ -4,6 +4,82 @@ import Geometry from '../geometry';
 
 export default View => {
   return class Line extends Geometry {
+    _getAttrsRange() {
+      const { context } = this;
+      const { theme } = context;
+
+      // 构造各属性的值域
+      const ranges = {
+        color: theme.colors,
+        size: theme.sizes,
+        shape: theme.shapes.line,
+      };
+
+      return ranges;
+    }
+
+    _getAttrsDefaultValue() {
+      const { context } = this;
+      const { theme } = context;
+      return {
+        color: theme.colors[0],
+        size: theme.sizes[0],
+        shape: theme.shapes.line[0],
+      };
+    }
+
+    _mappingAttrs(dataArray) {
+      const { x, y, ...attrs } = this.attrs;
+      const attrNames = Object.keys(attrs);
+      const attrNamesLength = attrNames.length;
+
+      // 设置各属性的值域
+      const attrsRange = this._getAttrsRange();
+      for (let key = 0; key < attrNamesLength; key++) {
+        const attrName = attrNames[key];
+
+        if (!this.getAttrRange(attrName)) {
+          this.setAttrRange(attrName, attrsRange[attrName]);
+        }
+      }
+
+      // 默认值
+      const defaultValues = this._getAttrsDefaultValue();
+      const dataArrayLength = dataArray.length;
+      const mappedArray = new Array(dataArrayLength);
+      for (let i = 0; i < dataArrayLength; i++) {
+        const data = dataArray[i];
+
+        // 图形属性映射，因为每组里面这些属性的值都是相同的，所以只需要映射第一个就可以了
+        const attrsValue = {};
+        for (let key = 0; key < attrNamesLength; key++) {
+          const attrName = attrNames[key];
+          attrsValue[attrName] = this.getAttrValue(attrName, data[0]);
+        }
+
+        // 生成映射后的数据对象
+        const mappedData = new Array(data.length);
+        for (let i = 0, len = data.length; i < len; i++) {
+          const record = data[i];
+          const result = {
+            ...record,
+            ...defaultValues,
+            ...attrsValue,
+          };
+          mappedData[i] = result;
+        }
+        mappedArray[i] = mappedData;
+      }
+      return mappedArray;
+    }
+
+    mapping() {
+      const originMapped = super.mapping();
+      const mappedArray = this._mappingAttrs(originMapped);
+      this.mappedArray = mappedArray;
+      return mappedArray;
+    }
+
     _convertPosition(mappedArray) {
       const { props } = this;
       const { coord } = props;
@@ -23,17 +99,29 @@ export default View => {
       const { props } = this;
       const { coord } = props;
       return dataArray.map(data => {
-        const { color, shape, size, smooth } = data[0];
+        const { color, shape, size } = data[0];
         const points = data;
         if (coord.isPolar) {
           points.push(data[0]);
         }
+        const extLineAttrs: any = {};
+        switch (shape) {
+          case 'line':
+            break;
+          case 'dash':
+            extLineAttrs.lineDash = [4, 4];
+            break;
+          case 'smooth':
+            extLineAttrs.smooth = true;
+            break;
+          default:
+            break;
+        }
         return {
           color,
-          shape,
           size,
           points,
-          smooth,
+          ...extLineAttrs,
         }
       });
     }

diff --git a/packages/f2-next/src/components/point/pointView.tsx b/packages/f2-next/src/components/point/pointView.tsx
@@ -14,7 +14,7 @@ export default (props: any) => {
               attrs={{
                 x,
                 y,
-                r: (size || 4) / 2,
+                r: (size ?? 4) / 2,
                 fill: color,
               }}
             />

diff --git a/packages/f2-next/src/components/point/withPoint.tsx b/packages/f2-next/src/components/point/withPoint.tsx
@@ -5,7 +5,7 @@ import Geometry from '../geometry';
 import { mappingPoint } from './util';
 
 export default View => {
-  return class Interval extends Geometry {
+  return class Line extends Geometry {
     // 归一值映射到坐标点
     mapping() {
       const { props } = this;

diff --git a/packages/f2-next/src/theme.ts b/packages/f2-next/src/theme.ts
@@ -94,7 +94,7 @@ const Theme = {
     '#F04864'
   ],
   shapes: {
-    line: [ 'line', 'dash' ],
+    line: [ 'line', 'dash', 'smooth' ],
     point: [ 'circle', 'hollowCircle' ]
   },
   sizes: [ 4, 8, 10, 12 ],