fix: tooltip controller isVisible not update (#2604)

* fix: tooltip controller isVisible not update * fix: 多折线或分组柱图中slider使用异常的问题 * test: 增加slider测试 * text: 添加了#2603测试 * fix: 优化代码写法 * fix: remove script test-bug * fix: groupScales length * fix: chart visible test Co-authored-by: weicai.wwc <[email protected]>
antvis · Jul 13, 2020 · 82c2c8c · 82c2c8c
1 parent a8ee3dc
commit 82c2c8c
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 12 deletions.
diff --git a/src/chart/controller/slider.ts b/src/chart/controller/slider.ts
@@ -189,6 +189,16 @@ export default class Slider extends Controller<Option> {
   private getData(): number[] {
     const data = this.view.getOptions().data;
     const [yScale] = this.view.getYScales();
+    const groupScales = this.view.getGroupScales();
+    if (groupScales.length) {
+      const { field, ticks } = groupScales[0];
+      return data.reduce((pre, cur) => {
+        if (cur[field] === ticks[0]) {
+          pre.push(cur[yScale.field] as number);
+        }
+        return pre;
+      }, []) as number[];
+    }
 
     return data.map((datum) => datum[yScale.field] || 0);
   }
@@ -207,23 +217,28 @@ export default class Slider extends Controller<Option> {
 
   private updateMinMaxText(min: number, max: number) {
     const data = this.view.getOptions().data;
-    const dataSize = size(data);
     const xScale = this.view.getXScale();
+    const dataSize = size(data);
 
     if (!xScale || !dataSize) {
       return;
     }
 
     const x = xScale.field;
 
-    // x 轴数据
-    const xData = data.map((datum) => datum[x] || '');
+    // x 轴刻度
+    const xTicks = data.reduce((pre, datum) => {
+      if (!pre.includes(datum[x])) pre.push(datum[x]);
+      return pre;
+    }, []);
 
-    const minIndex = Math.floor(min * (dataSize - 1));
-    const maxIndex = Math.floor(max * (dataSize - 1));
+    const xTickCount = size(xTicks);
 
-    let minText = get(xData, [minIndex]);
-    let maxText = get(xData, [maxIndex]);
+    const minIndex = Math.floor(min * (xTickCount - 1));
+    const maxIndex = Math.floor(max * (xTickCount - 1));
+
+    let minText = get(xTicks, [minIndex]);
+    let maxText = get(xTicks, [maxIndex]);
 
     const formatter = this.getSliderCfg().formatter as SliderFormatterType;
     if (formatter) {
@@ -240,7 +255,10 @@ export default class Slider extends Controller<Option> {
     });
 
     // 增加 x 轴的过滤器
-    this.view.filter(xScale.field, (value: any, datum: Datum, idx: number) => isBetween(idx, minIndex, maxIndex));
+    this.view.filter(xScale.field, (value: any, datum: Datum) => {
+      const idx: number = xTicks.indexOf(value);
+      return idx > -1 ? isBetween(idx, minIndex, maxIndex) : true;
+    });
   }
 
   /**

diff --git a/src/chart/controller/tooltip.ts b/src/chart/controller/tooltip.ts
@@ -37,7 +37,6 @@ export default class Tooltip extends Controller<TooltipOption> {
   private guideGroup: IGroup;
 
   private isLocked: boolean = false;
-  private isVisible: boolean = true;
   private items;
   private title: string;
   private point: Point;
@@ -48,18 +47,20 @@ export default class Tooltip extends Controller<TooltipOption> {
 
   public init() {}
 
-  public render() {
+  private isVisible() {
     const option = this.view.getOptions().tooltip;
-    this.isVisible = option !== false;
+    return option !== false;
   }
 
+  public render() {}
+
   /**
    * Shows tooltip
    * @param point
    */
   public showTooltip(point: Point) {
     this.point = point;
-    if (!this.isVisible) {
+    if (!this.isVisible()) {
       // 如果设置 tooltip(false) 则始终不显示
       return;
     }

diff --git a/tests/bugs/2295-spec.ts b/tests/bugs/2295-spec.ts
@@ -0,0 +1,147 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('2295', () => {
+  it('2295', () => {
+    const data = [
+      {
+        city: 'Tokyo',
+        month: 'Jan',
+        temperature: 7,
+      },
+      {
+        city: 'London',
+        month: 'Jan',
+        temperature: 3.9,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Feb',
+        temperature: 6.9,
+      },
+      {
+        city: 'London',
+        month: 'Feb',
+        temperature: 4.2,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Mar',
+        temperature: 9.5,
+      },
+      {
+        city: 'London',
+        month: 'Mar',
+        temperature: 5.7,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Apr',
+        temperature: 14.5,
+      },
+      {
+        city: 'London',
+        month: 'Apr',
+        temperature: 8.5,
+      },
+      {
+        city: 'Tokyo',
+        month: 'May',
+        temperature: 18.4,
+      },
+      {
+        city: 'London',
+        month: 'May',
+        temperature: 11.9,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Jun',
+        temperature: 21.5,
+      },
+      {
+        city: 'London',
+        month: 'Jun',
+        temperature: 15.2,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Jul',
+        temperature: 25.2,
+      },
+      {
+        city: 'London',
+        month: 'Jul',
+        temperature: 17,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Aug',
+        temperature: 26.5,
+      },
+      {
+        city: 'London',
+        month: 'Aug',
+        temperature: 16.6,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Sep',
+        temperature: 23.3,
+      },
+      {
+        city: 'London',
+        month: 'Sep',
+        temperature: 14.2,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Oct',
+        temperature: 18.3,
+      },
+      {
+        city: 'London',
+        month: 'Oct',
+        temperature: 10.3,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Nov',
+        temperature: 13.9,
+      },
+      {
+        city: 'London',
+        month: 'Nov',
+        temperature: 6.6,
+      },
+      {
+        city: 'Tokyo',
+        month: 'Dec',
+        temperature: 9.6,
+      },
+      {
+        city: 'London',
+        month: 'Dec',
+        temperature: 4.8,
+      },
+    ];
+    const chart = new Chart({
+      container: createDiv(),
+      width: 500,
+      height: 300,
+      appendPadding: [20],
+    });
+
+    chart.data(data);
+    chart.interval().position('month*temperature').color('city');
+    chart.tooltip({ shared: true });
+    chart.option('slider', {
+      start: 0.2,
+      end: 0.8,
+    });
+    chart.render();
+    chart.render();
+
+    expect(chart.getData().length).toBe(Math.floor(data.length * (0.8 - 0.2)));
+  });
+});
diff --git a/tests/bugs/2603-spec.ts b/tests/bugs/2603-spec.ts
@@ -0,0 +1,37 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('2570', () => {
+  it('2570', () => {
+    const data = [
+      { year: '1991', value: 3 },
+      { year: '1992', value: 4 },
+      { year: '1993', value: 3.5 },
+      { year: '1994', value: 5 },
+      { year: '1995', value: 4.9 },
+      { year: '1996', value: 6 },
+      { year: '1997', value: 7 },
+      { year: '1998', value: 9 },
+      { year: '1999', value: 13 },
+    ];
+    const chart = new Chart({
+      container: createDiv(),
+      width: 500,
+      height: 300,
+      appendPadding: [20],
+    });
+
+    chart.data(data);
+    chart.axis(false);
+    chart.tooltip(false);
+    chart.line().position('year*value');
+    chart.render();
+    const tooltipController: any = chart.getController('tooltip');
+    expect(tooltipController.isVisible()).toEqual(false);
+
+    setTimeout(() => {
+      chart.tooltip({ shared: true });
+      expect(tooltipController.isVisible()).toEqual(true);
+    }, 500);
+  });
+});