feat: 补充legend获取逻辑

antvis · Sep 3, 2021 · 3606ef7 · 3606ef7
1 parent 0b61e1e
commit 3606ef7
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 54 deletions.
diff --git a/packages/f2-next/src/chart/index.ts b/packages/f2-next/src/chart/index.ts
@@ -121,6 +121,13 @@ class Chart extends Container implements IChart, ThemeMixin, CoordMixin, ScaleMi
     return geometrys[0].getSnapRecords(point);
   }
 
+  getLegendItems(point) {
+    const geometrys = this.getGeometrys();
+    if (!geometrys.length) return;
+    // @ts-ignore
+    return geometrys[0].getLegendItems(point);
+  }
+
   getXScales() {
     const geometrys = this.getGeometrys();
     return geometrys.map(component => {

diff --git a/packages/f2-next/src/components/geometry/index.tsx b/packages/f2-next/src/components/geometry/index.tsx
@@ -26,6 +26,7 @@ const GROUP_ATTRS = ["color", "size", "shape"];
 class Geometry extends Component implements AttrMixin {
 
   isGeometry = true;
+  isInit = false;
   chart: Chart;
   data: any;
   attrs: any = {};
@@ -71,10 +72,18 @@ class Geometry extends Component implements AttrMixin {
     });
   }
 
-  mount() {
+  _init() {
+    if (this.isInit) {
+      return;
+    }
     this._createAttrs();
     this._adjustScales();
     this._processData();
+    this.isInit = true;
+  }
+
+  mount() {
+    this._init();
   }
 
   _createAttrs() {
@@ -422,13 +431,38 @@ class Geometry extends Component implements AttrMixin {
         const originValue = record[FIELD_ORIGIN][xfield];
         if (xScale.type === 'timeCat' && toTimeStamp(originValue) === value) {
           rst.push(record);
-        } else if (originValue === value){
+        } else if (originValue === value) {
           rst.push(record);
         }
       }
     }
     return rst;
   }
+
+  getLegendItems() {
+    // TODO 挪到chart里去
+    if (!this.isInit) {
+      this._init();
+    }
+    const colorAttr = this.getAttr('color');
+    if (!colorAttr) return null;
+    const { scale } = colorAttr;
+    if (!scale.isCategory) return null;
+    const { chart } = this;
+    const { theme } = chart;
+    const ticks = scale.getTicks();
+    colorAttr.setRange(theme.colors);
+    const items = ticks.map(tick => {
+      const { text, tickValue } = tick;
+      const color = colorAttr.mapping(tickValue) || theme.colors[0];
+      return {
+        color,
+        name: text, // for display
+        tickValue,
+      };
+    });
+    return items;
+  }
 }
 
 applyMixins(Geometry, [ AttrMixin ]);

diff --git a/packages/f2-next/src/components/legend/legendView.tsx b/packages/f2-next/src/components/legend/legendView.tsx
@@ -1,24 +1,31 @@
 import { jsx } from '../../jsx';
 
 export default (props) => {
-  const { items } = props;
-  return null;
+  const { items, layout } = props;
+  const { width } = layout;
   return (
     <group style={{
-      left: 50,
-      top: 50,
-      width: 100,
-      flexDirection: 'row'
+      width,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      paddingBottom: '20px'
     }}>
       {
         items.map(item => {
           const { color, name, value } = item;
           return (
-            <group style={{ flexDirection: 'row', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <group style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              padding: [0, 0, '10px', '10px']
+            }}>
               <circle
                 style={{
                   width: '20px',
                   height: '20px',
+                  marginRight: '6px'
                 }}
                 attrs={{
                   fill: color,
@@ -28,19 +35,19 @@ export default (props) => {
               <text
                 attrs={{
                   fill: 'black',
-                  text: item.name,
+                  text: name,
                 }}
               />
               {
                 value ?
                   <text
-                  attrs={{
-                    fill: 'black',
-                    text: `: ${value}`,
-                  }}
-                />
+                    attrs={{
+                      fill: 'black',
+                      text: `: ${value}`,
+                    }}
+                  />
                 :
-                null
+                  null
               }
             </group>
           )

diff --git a/packages/f2-next/src/components/legend/withLegend.tsx b/packages/f2-next/src/components/legend/withLegend.tsx
@@ -1,50 +1,27 @@
-import { jsx } from '../../jsx';
+import { jsx, render, renderJSXElement } from '../../jsx';
 import Component from '../../base/component';
-import Layout from '../../base/layout';
 
 export default View => {
   return class Legend extends Component {
 
     chart: any;
-    layout: Layout;
-
-    getGeometry() {
-      const { chart } = this;
-
-      const geometrys = chart.getGeometrys();
-      // 默认处理第一个图形
-      return geometrys[0];
-    }
 
     mount() {
-      // const { layout } = this;
-      // this.layout = new Layout({
-      //   left: layout.left,
-      //   top: layout.top,
-      //   width: 0,
-      //   height: 0,
-      // });
-      // this.getItems();
+      const { chart, container } = this;
+      const { coord } = chart;
+      const shape = render(renderJSXElement(this.render()), container);
+      const bbox = shape.getBBox();
+      shape.remove();
+      const { top, height } = coord;
+      coord.update({
+        top: top + bbox.height,
+        height: height - bbox.height,
+      });
     }
 
     getItems() {
-      const geometry = this.getGeometry();
-      const colorOption = geometry.getAttrOption('color');
-      if (!colorOption) return null;
-      const { field } = colorOption;
       const { chart } = this;
-      const scale = chart.getScale(field);
-      if (!scale.isCategory) return null;
-
-      return [{
-        color: 'red',
-        name: '1',
-        value: '11'
-      }, {
-        color: 'red',
-        name: '1',
-        value: '11'
-      }]
+      return chart.getLegendItems();
     }
 
     render() {

diff --git a/packages/f2-next/src/components/tooltip/tooltipView.tsx b/packages/f2-next/src/components/tooltip/tooltipView.tsx
@@ -7,15 +7,14 @@ export default (props) => {
   return (
     <group
       style={{
-        flexDirection: 'row',
         width,
       }}
     >
       <group
         style={{
+          display: 'flex',
           flexDirection: 'row',
           // paddingLeft: '10px',
-          flexWrap: 'wrap',
           flex: 1,
         }}
         attrs={{
@@ -27,10 +26,12 @@ export default (props) => {
           records.map(record => {
             return (
               <group style={{
+                display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 // justifyContent: 'center',
                 padding: [ '6px', '10px', '6px', '10px' ],
+                // width: '100px'
               }}>
                 <circle
                   attrs={{

diff --git a/packages/f2-next/test/components/interval/interval.test.tsx b/packages/f2-next/test/components/interval/interval.test.tsx
@@ -46,13 +46,13 @@ describe("Chart", () => {
           {/* <Axis field="genre" position="top"/> */}
           <Axis field="sold" />
           {/* <Axis field="sold" position="right" /> */}
+          <Legend />
           <Interval
             x="genre"
             y="sold"
             color="genre"
             // adjust="stack"
           />
-          <Legend />
           <Tooltip />
         </Chart>
       </Canvas>