fix(slider): slider, scrollbar filter data (#3013)

src/chart/controller/scrollbar.ts

@@ -5,7 +5,7 @@ import View from '../view';
 import { BBox } from '../../util/bbox';
 import { directionToPosition } from '../../util/direction';
 import { COMPONENT_TYPE, DIRECTION, LAYER, VIEW_LIFE_CIRCLE } from '../../constant';
-import { isObject, clamp, size, groupBy, throttle, noop, keys, get } from '@antv/util';
+import { isObject, clamp, size, throttle, noop, get, valuesOfKey } from '@antv/util';
 import { isBetween } from '../../util/helper';
 
 const DEFAULT_PADDING: number = 0;
@@ -217,8 +217,8 @@ export default class Scrollbar extends Controller<ScrollbarOption> {
   private changeViewData([startIdx, endIdx]: [number, number], render?: boolean): void {
     const { type } = this.getValidScrollbarCfg();
     const isHorizontal = type !== 'vertical';
-    const groupedData = groupBy(this.data, this.xScaleCfg.field);
-    const xValues = isHorizontal ? keys(groupedData) : keys(groupedData).reverse();
+    const values = valuesOfKey(this.data, this.xScaleCfg.field);
+    const xValues = isHorizontal ? values : values.reverse();
     this.yScalesCfg.forEach((cfg) => {
       this.view.scale(cfg.field, {
         formatter: cfg.formatter,
@@ -286,8 +286,8 @@ export default class Scrollbar extends Controller<ScrollbarOption> {
     }
     const xScale = this.view.getXScale();
     const data = this.view.getOptions().data;
-    const groupedData = groupBy(data, xScale.field);
-    return size(keys(groupedData));
+    const values = valuesOfKey(data, xScale.field);
+    return size(values);
   }
 
   private getScrollbarComponentCfg() {

src/chart/controller/slider.ts

@@ -1,4 +1,4 @@
-import { deepMix, get, isObject, size, clamp, isNil, noop, throttle, groupBy, keys, isEmpty } from '@antv/util';
+import { deepMix, get, isObject, size, clamp, isNil, noop, throttle, isEmpty, valuesOfKey } from '@antv/util';
 import { COMPONENT_TYPE, DIRECTION, LAYER, VIEW_LIFE_CIRCLE } from '../../constant';
 import { IGroup, Slider as SliderComponent } from '../../dependents';
 import { ComponentOption, Datum, Padding } from '../../interface';
@@ -271,9 +271,9 @@ export default class Slider extends Controller<SliderOption> {
   private getMinMaxText(min: number, max: number) {
     const data = this.view.getOptions().data;
     const xScale = this.view.getXScale();
-    const groupedData = groupBy(data, xScale.field);
     const isHorizontal = true;
-    const xValues = isHorizontal ? keys(groupedData) : keys(groupedData).reverse();
+    const values = valuesOfKey(data, xScale.field);
+    const xValues = isHorizontal ? values : values.reverse();
     const dataSize = size(data);
 
     if (!xScale || !dataSize) {
@@ -308,9 +308,9 @@ export default class Slider extends Controller<SliderOption> {
   private changeViewData(min: number, max: number) {
     const data = this.view.getOptions().data;
     const xScale = this.view.getXScale();
-    const groupedData = groupBy(data, xScale.field);
     const isHorizontal = true;
-    const xValues = isHorizontal ? keys(groupedData) : keys(groupedData).reverse();
+    const values = valuesOfKey(data, xScale.field);
+    const xValues = isHorizontal ? values : values.reverse();
     const dataSize = size(data);
 
     if (!xScale || !dataSize) {

tests/bugs/g2plot-1899-spec.ts

@@ -0,0 +1,126 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+import { delay } from '../util/delay';
+
+const data = [
+  {
+    click_count: 423,
+    hour: '00',
+  },
+  {
+    click_count: 570,
+    hour: '01',
+  },
+  {
+    click_count: 634,
+    hour: '02',
+  },
+  {
+    click_count: 432,
+    hour: '03',
+  },
+  {
+    click_count: 657,
+    hour: '04',
+  },
+  {
+    click_count: 876,
+    hour: '05',
+  },
+  {
+    click_count: 432,
+    hour: '06',
+  },
+  {
+    click_count: 200,
+    hour: '07',
+  },
+  {
+    click_count: 542,
+    hour: '08',
+  },
+  {
+    click_count: 123,
+    hour: '09',
+  },
+  {
+    click_count: 765,
+    hour: '10',
+  },
+  {
+    click_count: 313,
+    hour: '11',
+  },
+  {
+    click_count: 645,
+    hour: '12',
+  },
+  {
+    click_count: 523,
+    hour: '13',
+  },
+];
+
+describe('#1899', () => {
+  it('slider', async () => {
+    const chart = new Chart({
+      container: createDiv(),
+      width: 400,
+      height: 300,
+      autoFit: true,
+    });
+
+    chart.animate(false);
+    chart.data(data);
+
+    chart
+      .interval()
+      .position('hour*click_count');
+
+    chart.option('slider', {
+      start: 0.2,
+      end: 0.8,
+    });
+
+    chart.render();
+
+    await delay(50);
+
+    // @ts-ignore
+    expect(chart.getController('slider').slider.component.get('minText')).toBe('02');
+    // @ts-ignore
+    expect(chart.getController('slider').slider.component.get('maxText')).toBe('10');
+
+    // @ts-ignore
+    expect(chart.filteredData).toEqual(data.slice(2, 11));
+
+    chart.destroy();
+  });
+
+  it('scrollbar', async () => {
+    const chart = new Chart({
+      container: createDiv(),
+      width: 200,
+      height: 300,
+    });
+
+    chart.animate(false);
+    chart.data(data);
+
+    chart
+      .interval()
+      .position('hour*click_count');
+
+    chart.option('scrollbar', {
+      type: 'horizontal',
+      width: 500,
+    });
+
+    chart.render();
+
+    await delay(50);
+
+    // @ts-ignore
+    expect(chart.filteredData).toEqual(data.slice(0, 5));
+  })
+});