fix(issue-3012): 修复条形图图例转置 & 单测 (#3013)

* fix(issue-3012): 修复条形图图例转置 & 单测 * fix(bar): 修复条形图单测问题
antvis · Dec 9, 2021 · be7caa9 · be7caa9
1 parent 5d65033
commit be7caa9
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 44 deletions.
diff --git a/__tests__/bugs/issue-3012-spec.ts b/__tests__/bugs/issue-3012-spec.ts
@@ -0,0 +1,146 @@
+import { Bar } from '../../src';
+import { createDiv } from '../utils/dom';
+import { delay } from '../utils/delay';
+
+describe('#3012', () => {
+  it('basic bar', async () => {
+    const data = [
+      { year: '1951 年', value: 38 },
+      { year: '1952 年', value: 52 },
+      { year: '1956 年', value: 61 },
+      { year: '1957 年', value: 145 },
+      { year: '1958 年', value: 48 },
+    ];
+
+    const bar = new Bar(createDiv(), {
+      data,
+      xField: 'value',
+      yField: 'year',
+      seriesField: 'year',
+      legend: {
+        position: 'top-left',
+      },
+    });
+
+    bar.render();
+    const legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items');
+    expect(legendItems.length).toBe(data.length);
+    expect(legendItems[0].name).toBe(data[0].year);
+
+    const tooltipController = bar.chart.getController('tooltip');
+    const box = bar.chart.geometries[0].elements[0].shape.getBBox();
+    const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+
+    await delay(80);
+    bar.chart.showTooltip(point);
+    await delay(100);
+
+    const items = tooltipController.getTooltipItems(point);
+    expect(items[0].name).toBe(data[0].year);
+
+    bar.destroy();
+  });
+
+  it('group bar & stack bar', async () => {
+    const data = [
+      {
+        label: 'Mon.',
+        type: 'series1',
+        value: 2800,
+      },
+      {
+        label: 'Mon.',
+        type: 'series2',
+        value: 2260,
+      },
+      {
+        label: 'Tues.',
+        type: 'series1',
+        value: 1800,
+      },
+      {
+        label: 'Tues.',
+        type: 'series2',
+        value: 1300,
+      },
+      {
+        label: 'Wed.',
+        type: 'series1',
+        value: 950,
+      },
+      {
+        label: 'Wed.',
+        type: 'series2',
+        value: 900,
+      },
+      {
+        label: 'Thur.',
+        type: 'series1',
+        value: 500,
+      },
+      {
+        label: 'Thur.',
+        type: 'series2',
+        value: 390,
+      },
+      {
+        label: 'Fri.',
+        type: 'series1',
+        value: 170,
+      },
+      {
+        label: 'Fri.',
+        type: 'series2',
+        value: 100,
+      },
+    ];
+
+    const bar = new Bar(createDiv(), {
+      data,
+      isGroup: true,
+      xField: 'value',
+      yField: 'label',
+      seriesField: 'type',
+      legend: {
+        position: 'top-left',
+      },
+    });
+
+    bar.render();
+    let legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items');
+    expect(legendItems.length).toBe(2);
+    expect(legendItems[0].name).toBe('series1');
+    expect(legendItems[1].name).toBe('series2');
+
+    const tooltipController = bar.chart.getController('tooltip');
+    let box = bar.chart.geometries[0].elements[0].shape.getBBox();
+    let point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+
+    await delay(80);
+    bar.chart.showTooltip(point);
+    await delay(100);
+
+    let items = tooltipController.getTooltipItems(point);
+    expect(items[0].name).toBe('series1');
+    expect(items[1].name).toBe('series2');
+
+    bar.update({ isGroup: false, isStack: true });
+    legendItems = bar.chart.getController('legend').getComponents()[0].component.get('items');
+    expect(legendItems.length).toBe(2);
+    expect(legendItems[0].name).toBe('series1');
+    expect(legendItems[1].name).toBe('series2');
+
+    box = bar.chart.geometries[0].elements[0].shape.getBBox();
+    point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+
+    await delay(80);
+    bar.chart.showTooltip(point);
+    await delay(100);
+
+    items = tooltipController.getTooltipItems(point);
+    expect(items[0].name).toBe('series1');
+    expect(items[1].name).toBe('series2');
+
+    bar.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/bar/index-spec.ts b/__tests__/unit/plots/bar/index-spec.ts
@@ -382,24 +382,6 @@ describe('bar', () => {
     return bar;
   }
 
-  it('legend/tooltip reversed, grouped', () => {
-    const bar = getBar(true, false);
-    // @ts-ignore
-    expect(bar.chart.getOptions().legends['series'].reversed).toBe(true);
-    // @ts-ignore
-    expect(bar.chart.getOptions().tooltip.reversed).toBe(true);
-    bar.destroy();
-  });
-
-  it('legend/tooltip reversed, stacked', () => {
-    const bar = getBar(false, true);
-    // @ts-ignore
-    expect(bar.chart.getOptions().legends['series'].reversed).toBe(false);
-    // @ts-ignore
-    expect(bar.chart.getOptions().tooltip?.reversed).toBe(false);
-    bar.destroy();
-  });
-
   it('bar background', () => {
     const bar = getBar(false, false);
     expect(bar.options.barBackground).not.toBeDefined();

diff --git a/__tests__/unit/plots/bar/legend-spec.ts b/__tests__/unit/plots/bar/legend-spec.ts
@@ -32,7 +32,7 @@ describe('bar legend', () => {
 
     bar.render();
     // @ts-ignore
-    expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top', reversed: true });
+    expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top' });
     expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1);
 
     bar.update({
@@ -46,7 +46,6 @@ describe('bar legend', () => {
     expect(bar.chart.getOptions().legends.series).toEqual({
       position: 'right-top',
       flipPage: true,
-      reversed: true,
     });
     expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1);
 

diff --git a/src/plots/bar/adaptor.ts b/src/plots/bar/adaptor.ts
@@ -1,4 +1,5 @@
 import { Params } from '../../core/adaptor';
+import { tooltip } from '../../adaptor/common';
 import { deepAssign, flow } from '../../utils';
 import { adaptor as columnAdaptor } from '../column/adaptor';
 export { meta } from '../column/adaptor';
@@ -83,7 +84,6 @@ function legend(params: Params<BarOptions>): Params<BarOptions> {
     if (legend !== false) {
       legend = {
         position: isStack ? 'top-left' : 'right-top',
-        reversed: isStack ? false : true,
         ...(legend || {}),
       };
     }
@@ -94,29 +94,6 @@ function legend(params: Params<BarOptions>): Params<BarOptions> {
   return deepAssign({}, params, { options: { legend } });
 }
 
-/**
- * tooltip 适配器
- * @param params
- */
-function tooltip(params: Params<BarOptions>): Params<BarOptions> {
-  const { options } = params;
-
-  // 默认 legend 位置
-  const { seriesField, isStack } = options;
-  // 默认 tooltip 配置
-  let { tooltip } = options;
-  if (seriesField) {
-    if (tooltip !== false) {
-      tooltip = {
-        reversed: isStack ? false : true,
-        ...(tooltip || {}),
-      };
-    }
-  }
-
-  return deepAssign({}, params, { options: { tooltip } });
-}
-
 /**
  * coordinate 适配器
  * @param params