diff --git a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg
index 9813b70042..442b7c9474 100644
--- a/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg
+++ b/__tests__/integration/snapshots/api/chart-emit-scrollbar-filter/step0.svg
@@ -7,7 +7,7 @@
>
-
+
-
+
@@ -348,7 +348,7 @@
>
-
+
-
+
-
+
@@ -363,7 +363,7 @@
>
-
-
+
+
@@ -375,7 +375,7 @@
>
2008
@@ -452,7 +453,7 @@
>
2009
@@ -635,7 +637,7 @@
>
100
@@ -795,7 +798,7 @@
>
150
@@ -822,7 +826,7 @@
>
200
@@ -849,7 +854,7 @@
>
250
@@ -876,7 +882,7 @@
>
300
@@ -903,7 +910,7 @@
>
350
@@ -932,7 +940,7 @@
/>
-
+
-
+
+
+
+
+
+
@@ -138,33 +149,33 @@
class="slider-selection"
visibility="hidden"
fill-opacity="0.15"
- d="M 3,0 l 46.800000000000004,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -46.800000000000004,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
+ d="M 3,0 l 231.6,0 a 3,3,0,0,1,3,3 l 0,0 a 3,3,0,0,1,-3,3 l -231.6,0 a 3,3,0,0,1,-3,-3 l 0,0 a 3,3,0,0,1,3,-3 z"
height="6"
- width="52.800000000000004"
+ width="237.6"
/>
-
+
-
+
@@ -230,33 +241,33 @@
class="slider-selection"
visibility="hidden"
fill-opacity="0.15"
- d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,34.2 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-34.2 a 3,3,0,0,1,3,-3 z"
+ d="M 3,0 l 0,0 a 3,3,0,0,1,3,3 l 0,174.9 a 3,3,0,0,1,-3,3 l 0,0 a 3,3,0,0,1,-3,-3 l 0,-174.9 a 3,3,0,0,1,3,-3 z"
width="6"
- height="40.2"
+ height="180.9"
/>
-
+
-
+
@@ -293,7 +304,7 @@
transform="matrix(1,0,0,1,0,0)"
class="grid-line-group"
>
-
+
-
+
+
+
+
+
+
+
+
+
- 2008
+ 2010
- 2009
+ 2011
+
+
+
+
+
+
+ 2012
@@ -505,7 +580,7 @@
transform="matrix(1,0,0,1,0,0)"
class="grid-line-group"
>
-
+
-
+
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
- 100
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2007/10/23
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2009/10/26
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 524.624
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 189.806
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 2008
+
+
+
+
+
+
+ April
+
+
+
+
+
+
+ July
+
+
+
+
+
+
+ October
+
+
+
+
+
+
+ 2009
+
+
+
+
+
+
+ April
+
+
+
+
+
+
+ July
+
+
+
+
+
+
+ October
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 200
+
+
+
+
+
+
+ 250
+
+
+
+
+
+
+ 300
+
+
+
+
+
+
+ 350
+
+
+
+
+
+
+ 400
+
+
+
+
+
+
+ 450
+
+
+
+
+
+
+ 500
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/__tests__/integration/snapshots/static/weatherLineMultiScrollbar.svg b/__tests__/integration/snapshots/static/weatherLineMultiScrollbar.svg
deleted file mode 100644
index 40078684eb..0000000000
--- a/__tests__/integration/snapshots/static/weatherLineMultiScrollbar.svg
+++ /dev/null
@@ -1,2023 +0,0 @@
-
\ No newline at end of file
diff --git a/__tests__/plots/static/aapl-line-scrollbar-value.ts b/__tests__/plots/static/aapl-line-scrollbar-value.ts
index 37d91b2f22..f88ac67911 100644
--- a/__tests__/plots/static/aapl-line-scrollbar-value.ts
+++ b/__tests__/plots/static/aapl-line-scrollbar-value.ts
@@ -17,8 +17,8 @@ export function aaplLineScrollbarValue(): G2Spec {
y: { title: false, size: 36 },
},
scrollbar: {
- x: { value: 0.2 },
- y: { value: 0.2 },
+ x: { value: 0.9 },
+ y: { value: 0.9 },
},
};
}
diff --git a/__tests__/plots/static/aapl-line-slider-values.ts b/__tests__/plots/static/aapl-line-slider-values.ts
new file mode 100644
index 0000000000..cb5dd7dd42
--- /dev/null
+++ b/__tests__/plots/static/aapl-line-slider-values.ts
@@ -0,0 +1,31 @@
+import { format } from 'fecha';
+import { G2Spec } from '../../../src';
+
+export function aaplLineSliderValues(): G2Spec {
+ return {
+ type: 'line',
+ paddingLeft: 80,
+ data: {
+ type: 'fetch',
+ value: 'data/aapl.csv',
+ },
+ encode: {
+ x: (d) => new Date(d.date),
+ y: 'close',
+ },
+ axis: {
+ x: { title: false },
+ y: { title: false },
+ },
+ slider: {
+ x: {
+ values: [0.1, 0.5],
+ labelFormatter: (d) => format(d, 'YYYY/M/D'),
+ },
+ y: {
+ values: [0.2, 0.8],
+ labelFormatter: '~s',
+ },
+ },
+ };
+}
diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts
index 349b4a4744..220fe3d41a 100644
--- a/__tests__/plots/static/index.ts
+++ b/__tests__/plots/static/index.ts
@@ -198,7 +198,8 @@ export { aaplLineScrollbar } from './aapl-line-scrollbar';
export { aaplLineScrollbarValue } from './aapl-line-scrollbar-value';
export { alphabetIntervalRenderToMountedGroup } from './alphabet-interval-render-to-mounted-element';
export { weatherLineMultiSlider } from './weather-line-multi-slider';
-export { weatherLineMultiScrollbar } from './weather-line-multi-scrollbar';
+// More axis scrollbar have issue.
+// export { weatherLineMultiScrollbar } from './weather-line-multi-scrollbar';
export { population2015IntervalBubbleCoordinate } from './population2015-interval-bubble-coordinate';
export { fuelLineEncodePropagate } from './fuel-line-encode-propagate';
export { fuelLineTransformPropagate } from './fuel-line-transform-propagate';
@@ -318,3 +319,4 @@ export { scoreByItemAreaLineRadar } from './score-by-item-area-line-radar';
export { mockComplexRadar } from './mock-complex-radar';
export { aaplLineIllegalDataSlider } from './aapl-line-illegal-data-slider';
export { mockSquareRadar } from './mock-square-radar';
+export { aaplLineSliderValues } from './aapl-line-slider-values';
diff --git a/src/interaction/scrollbarFilter.ts b/src/interaction/scrollbarFilter.ts
index e398dad499..72b5179b86 100644
--- a/src/interaction/scrollbarFilter.ts
+++ b/src/interaction/scrollbarFilter.ts
@@ -27,6 +27,10 @@ export function ScrollbarFilter(options: any = {}) {
prefix: 'scrollbar',
hasState: true,
setValue: (component, values) => component.setValue(values[0]),
+ getInitValues: (scrollbar) => {
+ const values = scrollbar.slider.attributes.values;
+ if (values[0] !== 0) return values;
+ },
});
return interaction(context, _, emitter);
};
diff --git a/src/interaction/sliderFilter.ts b/src/interaction/sliderFilter.ts
index 4b3d436b66..a0776a633d 100644
--- a/src/interaction/sliderFilter.ts
+++ b/src/interaction/sliderFilter.ts
@@ -74,6 +74,10 @@ export function SliderFilter({
wait = 50,
leading = true,
trailing = false,
+ getInitValues = (slider) => {
+ const values = slider?.attributes?.values;
+ if (values[0] !== 0 || values[1] !== 1) return values;
+ },
}: any) {
return (context, _, emitter) => {
const { container, view, update, setState } = context;
@@ -134,7 +138,8 @@ export function SliderFilter({
const onValueChange = throttle(
async (event) => {
- if (filtering) return;
+ const { initValue = false } = event;
+ if (filtering && !initValue) return;
filtering = true;
const { nativeEvent = true } = event;
@@ -205,6 +210,21 @@ export function SliderFilter({
slider.addEventListener('valuechange', onValueChange);
sliderHandler.set(slider, onValueChange);
emitHandlers.add([eventName, emitHandler]);
+
+ const values = getInitValues(slider);
+
+ if (values) {
+ // Init values.
+ slider.dispatchEvent(
+ new CustomEvent('valuechange', {
+ detail: {
+ value: values,
+ },
+ nativeEvent: false,
+ initValue: true,
+ }),
+ );
+ }
}
// Update to async state such as scale.