fix(#2173): fix legend overlap when in same direction

antvis · Apr 2, 2020 · 59db3b5 · 59db3b5
1 parent 3ae581b
commit 59db3b5
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/src/chart/controller/legend.ts b/src/chart/controller/legend.ts
@@ -43,6 +43,8 @@ function getDirection(legendOption: any): DIRECTION {
 export default class Legend extends Controller<Option> {
   /** the draw group of axis */
   private container: IGroup;
+  /** 用于多个 legend 布局的 bbox */
+  private layoutBBox: BBox;
 
   constructor(view: View) {
     super(view);
@@ -103,6 +105,8 @@ export default class Legend extends Controller<Option> {
    * 计算出 legend 的 direction 位置 x, y
    */
   public layout() {
+    this.layoutBBox = this.view.viewBBox;
+
     each(this.components, (co: ComponentOption) => {
       const { component, direction } = co;
       const layout = getLegendLayout(direction);
@@ -121,7 +125,7 @@ export default class Legend extends Controller<Option> {
       const bbox = new BBox(bboxObject.x, bboxObject.y, bboxObject.width, bboxObject.height);
 
       const [x1, y1] = directionToPosition(this.view.coordinateBBox, bbox, direction);
-      const [x2, y2] = directionToPosition(this.view.viewBBox, bbox, direction);
+      const [x2, y2] = directionToPosition(this.layoutBBox, bbox, direction);
 
       let x = 0;
       let y = 0;
@@ -140,6 +144,8 @@ export default class Legend extends Controller<Option> {
         x,
         y,
       });
+
+      this.layoutBBox = this.layoutBBox.cut(bbox, direction);
     });
   }
 

diff --git a/tests/bugs/2173-spec.ts b/tests/bugs/2173-spec.ts
@@ -0,0 +1,44 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+import { COMPONENT_TYPE } from '../../src/constant';
+
+describe('#2173', () => {
+  const div = createDiv();
+  div.style.height = '400px';
+
+  const chart = new Chart({
+    container: div,
+    autoFit: true,
+    height: 200,
+  });
+
+  const data = [
+    {time: '2020-03-01', views:'pv', view_value: 1900},
+    {time: '2020-03-01', views:'uv', view_value: 1000},
+    {time: '2020-03-01', products:'product1', sale_value: 56},
+    {time: '2020-03-01', products:'product2', sale_value: 36},
+    {time: '2020-03-02', views:'pv', view_value: 2100},
+    {time: '2020-03-02', views:'uv', view_value: 800},
+    {time: '2020-03-02', products:'product1', sale_value: 46},
+    {time: '2020-03-02', products:'product2', sale_value: 46},
+    {time: '2020-03-03', views:'pv', view_value: 2100},
+    {time: '2020-03-03', views:'uv', view_value: 800},
+    {time: '2020-03-03', products:'product1', sale_value: 46},
+    {time: '2020-03-03', products:'product2', sale_value: 46},
+    {time: '2020-03-04', views:'pv', view_value: 1900},
+    {time: '2020-03-04', views:'uv', view_value: 1000},
+    {time: '2020-03-04', products:'product1', sale_value: 56},
+    {time: '2020-03-04', products:'product2', sale_value: 36}
+  ];
+
+  chart.data(data);
+  chart.line().position('time*view_value').color('views');
+  chart.line().position('time*sale_value').color('products');
+
+  chart.render();
+
+  it('legend should not be overlap', () => {
+    const [ l1, l2 ] = chart.getComponents().filter(co => co.type === COMPONENT_TYPE.LEGEND);
+    expect(Math.abs(l1.component.getBBox().y - l2.component.getBBox().y)).toBe(20);
+  });
+});