From f8262a2efa0d876dd9395cb4d1db208b42eb80c9 Mon Sep 17 00:00:00 2001
From: zqlu <zqlu.cn@gmail.com>
Date: Sat, 23 May 2020 00:33:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BE=E4=BE=8B=E5=BA=94=E4=BA=8E?=
 =?UTF-8?q?=E5=9D=90=E6=A0=87=E8=BD=B4=E5=AF=B9=E9=BD=90=20(#2488)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: legend align with axis

* fix: prevent ts error
---
 src/chart/controller/legend.ts             |   2 +-
 tests/unit/chart/controller/legend-spec.ts | 176 +++++++++++----------
 2 files changed, 97 insertions(+), 81 deletions(-)

diff --git a/src/chart/controller/legend.ts b/src/chart/controller/legend.ts
index 59bbb0434a..8fe97e0827 100644
--- a/src/chart/controller/legend.ts
+++ b/src/chart/controller/legend.ts
@@ -121,7 +121,7 @@ export default class Legend extends Controller<Option> {
       const bboxObject = component.getLayoutBBox(); // 这里只需要他的 width、height 信息做位置调整
       const bbox = new BBox(bboxObject.x, bboxObject.y, bboxObject.width, bboxObject.height);
 
-      const [x1, y1] = directionToPosition(this.view.coordinateBBox, bbox, direction);
+      const [x1, y1] = directionToPosition(this.view.viewBBox, bbox, direction);
       const [x2, y2] = directionToPosition(this.layoutBBox, bbox, direction);
 
       let x = 0;
diff --git a/tests/unit/chart/controller/legend-spec.ts b/tests/unit/chart/controller/legend-spec.ts
index 0f9f848551..ec2f541b12 100644
--- a/tests/unit/chart/controller/legend-spec.ts
+++ b/tests/unit/chart/controller/legend-spec.ts
@@ -3,7 +3,7 @@ import { Chart } from '../../../../src/index';
 import { createDiv } from '../../../util/dom';
 
 describe('Legend', () => {
-  let chart;
+  let chart: Chart;
   it('category', () => {
     const container = createDiv();
     chart = new Chart({
@@ -31,11 +31,7 @@ describe('Legend', () => {
       },
     });
 
-    chart
-      .interval()
-      .position('月份*月均降雨量')
-      .color('name')
-      .adjust('dodge');
+    chart.interval().position('月份*月均降雨量').color('name').adjust('dodge');
     chart.render();
 
     const legends = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND);
@@ -71,11 +67,7 @@ describe('Legend', () => {
       },
     });
 
-    chart
-      .interval()
-      .position('月份*月均降雨量')
-      .color('月均降雨量')
-      .adjust('dodge');
+    chart.interval().position('月份*月均降雨量').color('月均降雨量').adjust('dodge');
     chart.render();
 
     const legends = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND);
@@ -108,11 +100,7 @@ describe('Legend', () => {
       animate: true,
     });
 
-    chart
-      .interval()
-      .position('月份*月均降雨量')
-      .size('月均降雨量')
-      .adjust('dodge');
+    chart.interval().position('月份*月均降雨量').size('月均降雨量').adjust('dodge');
     chart.render();
 
     const legends = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND);
@@ -123,39 +111,38 @@ describe('Legend', () => {
   });
 
   it('custom', () => {
-      const container = createDiv();
-      chart = new Chart({
-        container,
-        height: 500,
-        width: 600,
-        autoFit: false,
-      });
-      chart.data([
-        { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
-        { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
-        { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
-        { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
-        { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
-        { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
-      ]);
-
-      chart.legend({
-        custom: true,
-        items: [
-          { name: 'London', value: 'London', marker: { symbol: 'tick', style: { r: 10 } } },
-          { name: 'Berlin', value: 'Berlin', marker: { symbol: 'circle', style: { r: 10 } } },
-        ],
-        title: {
-          text: '城市',
-        },
-      });
+    const container = createDiv();
+    chart = new Chart({
+      container,
+      height: 500,
+      width: 600,
+      autoFit: false,
+    });
+    chart.data([
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+    ]);
+
+    chart.legend({
+      custom: true,
+      items: [
+        // @ts-ignore
+        { name: 'London', value: 'London', marker: { symbol: 'tick', style: { r: 10 } } },
+        // @ts-ignore
+        { name: 'Berlin', value: 'Berlin', marker: { symbol: 'circle', style: { r: 10 } } },
+      ],
+      title: {
+        // @ts-ignore
+        text: '城市',
+      },
+    });
 
-      chart
-        .interval()
-        .position('月份*月均降雨量')
-        .size('月均降雨量')
-        .adjust('dodge');
-      chart.render();
+    chart.interval().position('月份*月均降雨量').size('月均降雨量').adjust('dodge');
+    chart.render();
 
     const legends = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND);
     expect(legends[0].component.get('items')[0].marker.symbol).toBeInstanceOf(Function);
@@ -164,36 +151,32 @@ describe('Legend', () => {
   });
 
   it('category legend, use hexagon marker', () => {
-      const container = createDiv();
-      chart = new Chart({
-        container,
-        height: 500,
-        width: 600,
-        autoFit: false,
-      });
-      chart.data([
-        { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
-        { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
-        { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
-        { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
-        { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
-        { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
-      ]);
-
-      chart.legend('name', {
-        position: 'right',
-        reversed: true,
-        marker: {
-          symbol: 'hexagon',
-        }
-      });
-
-      chart
-        .interval()
-        .position('月份*月均降雨量')
-        .color('name')
-        .adjust('dodge');
-      chart.render();
+    const container = createDiv();
+    chart = new Chart({
+      container,
+      height: 500,
+      width: 600,
+      autoFit: false,
+    });
+    chart.data([
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+    ]);
+
+    chart.legend('name', {
+      position: 'right',
+      reversed: true,
+      marker: {
+        symbol: 'hexagon',
+      },
+    });
+
+    chart.interval().position('月份*月均降雨量').color('name').adjust('dodge');
+    chart.render();
 
     const legends = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND);
     expect(legends[0].component.get('items')[0].marker.symbol).toBeInstanceOf(Function);
@@ -206,7 +189,7 @@ describe('Legend', () => {
       { genre: 'Strategy', sold: 115 },
       { genre: 'Action', sold: 120 },
       { genre: 'Shooter', sold: 3500 },
-      { genre: 'Other', sold: 150 }
+      { genre: 'Other', sold: 150 },
     ];
 
     chart = new Chart({
@@ -226,13 +209,46 @@ describe('Legend', () => {
 
     chart.render();
 
-    const legend = chart.getComponents().filter(co => co.type === COMPONENT_TYPE.LEGEND)[0].component;
+    const legend = chart.getComponents().filter((co) => co.type === COMPONENT_TYPE.LEGEND)[0].component;
 
     expect(legend.get('flipPage')).toBe(true);
+    // @ts-ignore
     expect(legend.totalPagesCnt).toBe(2);
+    // @ts-ignore
     expect(legend.pageHeight).toBe(20);
   });
 
+  it('legend align with axis', () => {
+    const container = createDiv();
+    chart = new Chart({
+      container,
+      height: 500,
+      width: 600,
+      autoFit: false,
+    });
+    chart.data([
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
+      { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
+      { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
+    ]);
+
+    chart.legend('name', {
+      position: 'top-left',
+    });
+
+    chart.interval().position('月份*月均降雨量').color('name').adjust('dodge');
+    chart.render();
+
+    expect(chart).toBeDefined();
+
+    const legend = chart.getController('legend').getComponents()[0].component;
+    const legendBBox = legend.getBBox();
+    expect(legendBBox.x).toBe(0);
+  });
+
   afterAll(() => {
     chart.destroy();
   });