fix: 修复漏斗图legend点击后，label位置不调整 Fixed #979

antvis · Aug 6, 2020 · 9b43f4d · 9b43f4d
1 parent 4839a35
commit 9b43f4d
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 100 deletions.
diff --git a/examples/funnel/basic/demo/basic.js b/examples/funnel/basic/demo/basic.js
@@ -29,21 +29,15 @@ chart.intervalLabel({
       text: data.action,
       fill: color
     };
+  },
+  guide: data => {
+    return {
+      text: (data.percent * 100).toFixed(0) + '%',
+      fill: '#fff'
+    };
   }
 });
 
-// 提示文案
-data.forEach(function(obj) {
-  chart.guide().text({
-    position: [ obj.action, 0.5 ],
-    content: (obj.percent * 100).toFixed(0) + '%',
-    style: {
-      textBaseline: 'middle',
-      textAlign: 'center',
-      fill: '#fff'
-    }
-  });
-});
 
 chart.interval()
   .position('action*percent')

diff --git a/examples/funnel/basic/demo/stroke.js b/examples/funnel/basic/demo/stroke.js
@@ -28,21 +28,15 @@ chart.intervalLabel({
       text: data.action,
       fill: color
     };
+  },
+  guide: data => {
+    return {
+      text: (data.percent * 100).toFixed(0) + '%',
+      fill: '#fff'
+    };
   }
 });
 
-// 提示文案
-data.forEach(function(obj) {
-  chart.guide().text({
-    position: [ obj.action, 0.5 ],
-    content: (obj.percent * 100).toFixed(0) + '%',
-    style: {
-      textBaseline: 'middle',
-      textAlign: 'center',
-      fill: '#fff'
-    }
-  });
-});
 
 chart.interval()
   .position('action*percent')

diff --git a/examples/funnel/pyramid/demo/basic.js b/examples/funnel/pyramid/demo/basic.js
@@ -27,20 +27,13 @@ chart.intervalLabel({
       text: data.action,
       fill: color
     };
-  }
-});
-
-// 提示文案
-data.forEach(function(obj) {
-  chart.guide().text({
-    position: [ obj.action, 0.5 ],
-    content: (obj.percent * 100).toFixed(0) + '%',
-    style: {
-      textBaseline: 'middle',
-      textAlign: 'center',
+  },
+  guide: data => {
+    return {
+      text: (data.percent * 100).toFixed(0) + '%',
       fill: '#fff'
-    }
-  });
+    };
+  }
 });
 
 chart.interval()

diff --git a/examples/funnel/pyramid/demo/scale.js b/examples/funnel/pyramid/demo/scale.js
@@ -28,20 +28,13 @@ chart.intervalLabel({
       text: data.action,
       fill: color
     };
-  }
-});
-
-// 提示文案
-data.forEach(function(obj) {
-  chart.guide().text({
-    position: [ obj.action, 0.5 ],
-    content: (obj.percent * 100).toFixed(0) + '%',
-    style: {
-      textBaseline: 'middle',
-      textAlign: 'center',
+  },
+  guide: data => {
+    return {
+      text: (data.percent * 100).toFixed(0) + '%',
       fill: '#fff'
-    }
-  });
+    };
+  }
 });
 
 chart.interval()

diff --git a/examples/funnel/pyramid/demo/stroke.js b/examples/funnel/pyramid/demo/stroke.js
@@ -27,20 +27,13 @@ chart.intervalLabel({
       text: data.action,
       fill: color
     };
-  }
-});
-
-// 提示文案
-data.forEach(function(obj) {
-  chart.guide().text({
-    position: [ obj.action, 0.5 ],
-    content: (obj.percent * 100).toFixed(0) + '%',
-    style: {
-      textBaseline: 'middle',
-      textAlign: 'center',
+  },
+  guide: data => {
+    return {
+      text: (data.percent * 100).toFixed(0) + '%',
       fill: '#fff'
-    }
-  });
+    };
+  }
 });
 
 chart.interval()

diff --git a/src/geom/adjust/index.js b/src/geom/adjust/index.js
@@ -2,7 +2,6 @@ import Stack from './stack';
 import Dodge from './dodge';
 import Symmetric from './symmetric';
 
-
 export {
   Stack,
   Dodge,

diff --git a/src/plugin/interval-label.js b/src/plugin/interval-label.js
@@ -41,22 +41,38 @@ class Controller {
     const { chart, container, cfg } = this;
     if (!cfg) return;
     const labelCfg = mix({}, DEFAULT_CFG, cfg);
-    const coord = chart.get('coord');
     const geom = chart.get('geoms')[0];
     const shapes = geom.get('container').get('children');
     shapes.forEach(shape => {
       const origin = shape.get('origin');
-      const { _origin, color, points } = origin;
+      const attrs = shape.get('attrs');
+      const { _origin, color } = origin;
+      const { points } = attrs;
       if (labelCfg.label) {
         const labelAttrs = labelCfg.label(_origin, color);
-        const group = container.addGroup();
-        const point = coord.convertPoint(getMiddlePoint(points[1], points[2]));
+        const point = getMiddlePoint(points[1], points[2]);
 
-        group.addShape('Text', {
+        container.addShape('Text', {
           attrs: mix({
             x: point.x + labelCfg.offsetX,
             y: point.y + labelCfg.offsetY
-          }, labelAttrs, DEFAULT_LABEL_CFG)
+          }, DEFAULT_LABEL_CFG, labelAttrs)
+        });
+      }
+      if (labelCfg.guide) {
+        const labelAttrs = labelCfg.guide(_origin, color);
+        const point = getMiddlePoint(
+          getMiddlePoint(points[0], points[1]),
+          getMiddlePoint(points[2], points[3] || points[2])
+        );
+
+        container.addShape('Text', {
+          attrs: mix({
+            x: point.x,
+            y: point.y,
+            textBaseline: 'middle',
+            textAlign: 'center'
+          }, DEFAULT_LABEL_CFG, labelAttrs)
         });
       }
     });

diff --git a/test/unit/plugin/interval-label-spec.js b/test/unit/plugin/interval-label-spec.js
@@ -1,16 +1,13 @@
-import { expect } from 'chai';
 import * as F2 from '../../../src/core';
 import '../../../src/geom/interval';
 import '../../../src/geom/adjust/symmetric';
 import * as IntervalLabel from '../../../src/plugin/interval-label';
+import * as Legend from '../../../src/plugin/legend';
+import { gestureSimulator } from '../test-util';
 
 const canvas = document.createElement('canvas');
-canvas.width = 350;
-canvas.height = 350;
-canvas.id = 'chart-interval-label';
-canvas.style.position = 'fixed';
-canvas.style.top = 0;
-canvas.style.left = 0;
+canvas.style.width = '350px';
+canvas.style.height = '350px';
 document.body.appendChild(canvas);
 
 describe('IntervalLabel', () => {
@@ -26,13 +23,14 @@ describe('IntervalLabel', () => {
 
   it('Register IntervalLabel plugin', function() {
     chart = new F2.Chart({
-      id: 'chart-interval-label',
-      plugins: [ IntervalLabel ],
-      pixelRatio: 2
+      el: canvas,
+      plugins: [ IntervalLabel, Legend ],
+      pixelRatio: 2,
+      padding: [ 60, 80, 15, 15 ]
     });
 
-    expect(chart._plugins.descriptors.length).to.equal(1);
-    expect(chart.intervalLabel).to.be.an.instanceof(Function);
+    expect(chart._plugins.descriptors.length).toBe(2);
+    expect(chart.intervalLabel).toBeInstanceOf(Function);
   });
 
   it('interval label', function() {
@@ -46,31 +44,60 @@ describe('IntervalLabel', () => {
       .position('action*percent')
       .color('action', [ '#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF' ])
       .adjust('symmetric')
-      .shape('funnel');
+      .shape('funnel')
+      .style({
+        lineWidth: 2,
+        stroke: '#fff'
+      });
+
     chart.intervalLabel({
+      offsetX: 10,
       label: data => {
         return {
           text: data.action
         };
+      },
+      guide: data => {
+        return {
+          text: (data.percent * 100).toFixed(0) + '%',
+          fill: '#fff'
+        };
       }
     });
-
+    chart.legend(true);
     chart.render();
 
     const pieLabelController = chart.get('intervalLabelController');
     const { container } = pieLabelController;
     const children = container.get('children');
-    expect(children.length).equal(5);
+    expect(children.length).toBe(10);
+
+    const labelShape = children[0];
+    expect(labelShape.get('attrs').text).toBe('浏览网站');
+
+  });
+
+  it('legend click', () => {
+    gestureSimulator(canvas, 'touchstart', {
+      x: 156.05078125,
+      y: 22.40625
+    });
 
-    const labelShape = children[0].get('children')[0];
-    expect(labelShape.get('attrs').text).equal('浏览网站');
+    const pieLabelController = chart.get('intervalLabelController');
+    const { container } = pieLabelController;
+    const children = container.get('children');
+    expect(children.length).toBe(8);
 
+    const labelShape = children[0];
+    expect(labelShape.get('attrs').text).toBe('浏览网站');
+    expect(labelShape.get('attrs').x).toBeCloseTo(248.125, 3);
+    expect(labelShape.get('attrs').y).toBeCloseTo(280, 3);
   });
 
   it('clear', () => {
     chart.clear();
     const labelController = chart.get('intervalLabelController');
-    expect(labelController.container.get('children')).to.be.empty;
+    expect(labelController.container.get('children')).toEqual([]);
 
     chart.destroy();
     document.body.removeChild(canvas);

diff --git a/test/unit/test-util.js b/test/unit/test-util.js
@@ -17,22 +17,20 @@ function delay(time) {
 
 async function gestureSimulator(dom, eventType, options) {
   if ([ 'touchstart', 'touchmove', 'touchend' ].indexOf(eventType) !== -1) {
-    const { clientX, clientY } = options;
     const exData = {
-      targetTouches: [{ clientX, clientY }],
-      touches: [{ clientX, clientY }],
-      changedTouches: [{ clientX, clientY }]
+      targetTouches: [ options ],
+      touches: [ options ],
+      changedTouches: [ options ]
     };
     dispatchEvent(dom, eventType, exData);
     return;
   }
 
   if (eventType === 'press') {
-    const { clientX, clientY } = options;
     const exData = {
-      targetTouches: [{ clientX, clientY }],
-      touches: [{ clientX, clientY }],
-      changedTouches: [{ clientX, clientY }]
+      targetTouches: [ options ],
+      touches: [ options ],
+      changedTouches: [ options ]
     };
     dispatchEvent(dom, 'touchstart', exData);
     await delay(270);
@@ -41,11 +39,10 @@ async function gestureSimulator(dom, eventType, options) {
   }
 
   if (eventType === 'tap') {
-    const { clientX, clientY } = options;
     const exData = {
-      targetTouches: [{ clientX, clientY }],
-      touches: [{ clientX, clientY }],
-      changedTouches: [{ clientX, clientY }]
+      targetTouches: [ options ],
+      touches: [ options ],
+      changedTouches: [ options ]
     };
     dispatchEvent(dom, 'touchstart', exData);
     await delay(50);