diff --git a/__tests__/bugs/bug-dual-axes-silder-spec.ts b/__tests__/bugs/bug-dual-axes-silder-spec.ts new file mode 100644 index 0000000000..6f58d52087 --- /dev/null +++ b/__tests__/bugs/bug-dual-axes-silder-spec.ts @@ -0,0 +1,71 @@ +import { DualAxes } from '../../src'; +import { createDiv } from '../utils/dom'; + +describe('dual-axes slider', () => { + const data = [ + { time: '2019-03', value: 350, count: 800 }, + { time: '2019-04', value: 900, count: 600 }, + { time: '2019-05', value: 300, count: 400 }, + { time: '2019-06', value: 450, count: 380 }, + { time: '2019-07', value: 470, count: 220 }, + ]; + + it('slider left view should have data', () => { + const dualAxes = new DualAxes(createDiv(), { + data: [data, data], + xField: 'time', + yField: ['value', 'count'], + slider: { + end: 1, + }, + geometryOptions: [ + { + geometry: 'column', + }, + { + geometry: 'line', + lineStyle: { + lineWidth: 2, + }, + }, + ], + }); + + dualAxes.render(); + const filterData = dualAxes.chart.views[1].getData(); + expect(filterData.length).toBeGreaterThan(0); + expect(filterData).toEqual(data); + + dualAxes.destroy(); + }); + + it('dual axes should have same data', () => { + const dualAxes = new DualAxes(createDiv(), { + data: [data, data], + xField: 'time', + yField: ['value', 'count'], + slider: { + end: 0.9, + }, + geometryOptions: [ + { + geometry: 'column', + }, + { + geometry: 'line', + lineStyle: { + lineWidth: 2, + }, + }, + ], + }); + + dualAxes.render(); + + const columnFilterData = dualAxes.chart.views[0].getData(); + const lineFilterData = dualAxes.chart.views[1].getData(); + expect(columnFilterData).toEqual(lineFilterData); + + dualAxes.destroy(); + }); +}); diff --git a/src/plots/dual-axes/adaptor.ts b/src/plots/dual-axes/adaptor.ts index 151eaec6b3..ca9035f059 100644 --- a/src/plots/dual-axes/adaptor.ts +++ b/src/plots/dual-axes/adaptor.ts @@ -473,8 +473,8 @@ export function slider(params: Params): Params chart.once('afterpaint', () => { // 初始化数据,配置默认值时需要同步 if (!isBoolean(slider)) { - const { start, end } = slider; - if (start || end) { + const { start = 0, end = 1 } = slider; + if (start !== 0 || end !== 1) { doSliderFilter(rightView, [start, end]); } } diff --git a/src/plots/dual-axes/util/render-sider.ts b/src/plots/dual-axes/util/render-sider.ts index d8f89b1a65..be75e84e56 100644 --- a/src/plots/dual-axes/util/render-sider.ts +++ b/src/plots/dual-axes/util/render-sider.ts @@ -21,8 +21,8 @@ export const doSliderFilter = (view: View, sliderValue: [number, number]) => { const values = valuesOfKey(data, xScale.field); const xValues = isHorizontal ? values : values.reverse(); const xTickCount = size(xValues); - const minIndex = Math.floor(min * (xTickCount - 1)); - const maxIndex = Math.floor(max * (xTickCount - 1)); + const minIndex = Math.round(min * (xTickCount - 1)); + const maxIndex = Math.round(max * (xTickCount - 1)); // 增加 x 轴的过滤器 view.filter(xScale.field, (value: any) => {