feat: 临时保存

packages/jsx/test/index.test.tsx

@@ -36,7 +36,6 @@ describe('index', () => {
       </group>
     );
     render(profile, canvas);
-    console.log(canvas);
     canvas.draw();
   });
 });

packages/legend/src/fund.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+
+export default (props: any) => {
+  const { items, active } = props;
+  const len = items.length;
+  const firstItem = items[0];
+
+  return (
+    <group style={{
+      maxWidth: '800px',
+      padding: [10, 0, 0, 0]
+      // justifyContent: 'center',
+    }} attrs={{
+      radius: '8px',
+      fill: active ? '#E7F1FF' : undefined,
+    }}>
+      <group style={{
+        flexDirection: 'row',
+        padding: ['4px', '60px'],
+      }}>
+        {
+          items.map((item: any, index: number) => {
+            const { name, value } = item;
+            return (
+              <group style={{
+                flexDirection: 'row',
+                justifyContent: index === 0 ? 'flex-start' : index === len - 1 ? 'flex-end' : 'center',
+                flex: 1,
+              }}>
+                <group>
+                  <group style={{
+                    width: '100px',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  }}>
+                    <rect style={{
+                      marginRight: '8px',
+                      width: '24px',
+                      height: '4px',
+                    }} attrs={{
+                      radius: '4px',
+                      fill: item.color,
+                    }}/>
+                    <text attrs={{
+                      textBaseline: 'middle',
+                      fontSize: '24px',
+                      fill: '#333333',
+                      fontWeight: '500',
+                      text: name,
+                    }} />
+                    {/* <text attrs={{
+                      textBaseline: 'middle',
+                      // marginLeft: '32px',
+                      // marginTop: '8px',
+                      fontSize: '24px',
+                      fill: '#333333',
+                      text: value,
+                    }} /> */}
+                  </group>
+                </group>
+              </group>
+            );
+          })
+        }
+      </group>
+    </group>
+  );
+}

packages/legend/src/index.tsx

@@ -1,5 +1,6 @@
 import withLegend from './withLegend';
 import View from './view';
+import Fund from './fund';
 
-export { withLegend, View };
-export default withLegend(View);
+export { withLegend, View, Fund};
+export default withLegend(Fund);

packages/legend/src/withLegend.tsx

@@ -16,31 +16,56 @@ export default View => {
       this.geom = geom;
     }
     _getRecords() {
-      const geom = this.geom;
+      const { geom } = this;
+      const xScale = geom.getXScale();
+      const { values } = xScale;
+      if (!values || !values.length) {
+        return null;
+      }
+      // 取最后一条数据
+      const lastValue = values[values.length - 1];
+      const records = geom.getRecords(lastValue);
+      return records;
+    }
+
+    getItems(records) {
+      const { geom, chart, props } = this;
+      // 默认处理第一个图形
       const colorAttr = geom.getAttr('color');
-      if (!colorAttr) return;
-      const scale = colorAttr.getScale('color');
-      const ticks = scale.getTicks();
-      const items = [];
-      for (let i = 0, len = ticks.length; i < len; i++) {
-        const tick = ticks[i];
-        const name = tick.text;
-        const scaleValue = tick.value;
-        const value = scale.invert(scaleValue);
-        const color = colorAttr.mapping(value).join('');
-        items.push({
-          name,
-          value,
-          color,
-        })
+      // 只依赖颜色属性
+      if (!colorAttr) {
+        return;
+      }
+      records = records || this._getRecords();
+      if (!records || !records.length) {
+        return;
       }
-      return items;
+      const { scales } = colorAttr;
+      const { field, values } = scales[0];
+      const { field: yField } = geom.getYScale();
+      const { items } = props;
+      return items.filter(item => {
+          return values.indexOf(item.fieldValue) > -1;
+        })
+        .map(item => {
+          const { name, fieldValue } = item;
+          const record = records.find(record => {
+            return record && record[field] === fieldValue;
+          });
+          // 因为record 有可能是空, 所以通过attr来映射
+          const color = colorAttr.mapping(fieldValue);
+          return {
+            record,
+            name,
+            color: Array.isArray(color) ? color[0] : color,
+            value: record && record[yField],
+          }
+      });
     }
 
     render() {
-      const { props } = this;
-      const items = this._getRecords();
-      return <View items={ items } { ...props } />
+      const items = this.getItems();
+      return <View items={ items } />
     }
   }
 }

packages/line/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "f2x-line",
+  "version": "0.0.1",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "dependencies": {
+    "@antv/f2": "^3.8.1"
+  },
+  "devDependencies": {
+    "f2-jsx": "*"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "author": "yezengyue@gmail.com"
+}

packages/line/src/index.tsx

@@ -0,0 +1,8 @@
+import model from './model';
+
+const View = () => {
+  return null;
+}
+
+export { model, View };
+export default model(View);

packages/line/src/model.tsx

@@ -0,0 +1,23 @@
+// @ts-nocheck
+
+import { Component } from '../../component/src/index';
+
+export default View => {
+  return class Line extends Component {
+    mount() {
+      const { chart, props } = this;
+      const { position, color } = props;
+      const geom = chart.line().position(position);
+      if (color) {
+        if (Array.isArray(color)) {
+          geom.color(color[0], color[1]);
+        } else {
+          geom.color(color);
+        }
+      }
+    }
+    render() {
+      return <View />
+    }
+  }
+}

packages/line/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/line/typings.d.ts

@@ -0,0 +1 @@
+import '../../typings';

packages/react/src/chart/model.ts

@@ -47,7 +47,6 @@ export default ({ canvasRef, pixelRatio, data, children }) => {
         }
         // TODO 避免每次的绘制
         chart.get('canvas').draw();
-        console.log(chart.get('canvas'));
       }
       return component;
     });

packages/react/test/chart.test.tsx

@@ -4,8 +4,11 @@
 import ReactDOM from 'react-dom';
 import Chart from '../src/chart';
 
+import data from './data';
+
 // 引入组件
 import Interval from '../../interval/src/index';
+import Line from '../../line/src/index';
 import Legned from '../../legend/src/index';
 import Tooltip from '../../tooltip/src/index';
 
@@ -24,17 +27,25 @@ const root = document.createElement('div');
 document.body.appendChild(root);
 
 
-const data = [
-  { genre: 'Sports', sold: 275 },
-  { genre: 'Strategy', sold: 115 },
-  { genre: 'Action', sold: 120 },
-  { genre: 'Shooter', sold: 350 },
-  { genre: 'Other', sold: 150 }
-];
-
 const legendItems = [
-  { name: 'Sports', value: 275 },
-  { name: 'Strategy'},
+  {
+    "value": 0.05,
+    "name": "本基金",
+    "field": "codeType",
+    "fieldValue": "PRODUCT_ID"
+  },
+  {
+    "value": 0,
+    "name": "同类均值",
+    "field": "codeType",
+    "fieldValue": "FUND_TYPE"
+  },
+  {
+    "value": -0.0626,
+    "name": "沪深300",
+    "field": "codeType",
+    "fieldValue": "INDEX_CODE"
+  }
 ]
 
 const App = () => {
@@ -43,8 +54,8 @@ const App = () => {
       pixelRatio={ window.devicePixelRatio }
       data={ data }
     >
-      <Interval position="genre*sold" color="genre" />
-      <Legned />
+      <Line position="reportDateTimestamp*rate" color={["codeType", ['#108EE8', '#86C5F2', '#E8A010']]} />
+      <Legned items={ legendItems } />
       <Tooltip />
     </Chart>
   );