fix(interaction): transpose sliderFilter (#4919)

__tests__/plots/interaction/appl-line-slider-filter-transpose.ts

@@ -0,0 +1,48 @@
+import { format } from 'fecha';
+import { G2Spec } from '../../../src';
+import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter';
+import { dispatchValueChange } from './appl-line-slider-filter';
+
+export function aaplLineSliderFilterTranspose(): G2Spec {
+  return {
+    type: 'line',
+    paddingLeft: 80,
+    coordinate: { transform: [{ type: 'transpose' }] },
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+    },
+    encode: {
+      x: (d) => new Date(d.date),
+      y: 'close',
+    },
+    axis: {
+      x: { title: false, size: 40 },
+      y: { title: false, size: 36 },
+    },
+    slider: {
+      x: { labelFormatter: (d) => format(d, 'YYYY/M/D') },
+      y: { labelFormatter: '~s' },
+    },
+  };
+}
+
+aaplLineSliderFilterTranspose.maxError = 500;
+
+aaplLineSliderFilterTranspose.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const sliders = document.getElementsByClassName(SLIDER_CLASS_NAME);
+  const [s1, s2] = sliders;
+  return [
+    {
+      changeState: () => {
+        dispatchValueChange(s1);
+      },
+    },
+    {
+      changeState: () => {
+        dispatchValueChange(s2);
+      },
+    },
+  ];
+};

__tests__/plots/interaction/index.ts

@@ -56,3 +56,4 @@ export { scoreByItemAreaRadar } from './score-by-item-area-radar';
 export { pointsPointRegressionQuadInset } from './points-point-regression-quad-inset';
 export { populationIntervalDiverging } from './population-interval-diverging';
 export { stateAgesIntervalNormalized } from './stateages-interval-normalized';
+export { aaplLineSliderFilterTranspose } from './appl-line-slider-filter-transpose';

__tests__/plots/static/aapl-line-slider-transposed.ts

@@ -1,7 +1,7 @@
 import { format } from 'fecha';
 import { G2Spec } from '../../../src';
 
-export function aaplLineSliderTransponsed(): G2Spec {
+export function aaplLineSliderTransposed(): G2Spec {
   return {
     type: 'line',
     paddingLeft: 80,
@@ -29,4 +29,4 @@ export function aaplLineSliderTransponsed(): G2Spec {
   };
 }
 
-aaplLineSliderTransponsed.maxError = 100;
+aaplLineSliderTransposed.maxError = 100;

__tests__/plots/static/index.ts

@@ -168,7 +168,7 @@ export { housePricePointSample } from './house-price-point-sample';
 export { housePricePointShapes } from './house-price-point-shapes';
 export { aaplLineSlider } from './aapl-line-slider';
 export { aaplLineZIndex } from './aapl-line-z-index';
-export { aaplLineSliderTransponsed } from './aapl-line-slider-transposed';
+export { aaplLineSliderTransposed } from './aapl-line-slider-transposed';
 export { indicesLineChartFacetAxis } from './indices-line-chart-fact-axis';
 export { indicesLineChartScaleRelations } from './indices-line-chart-scale-relations';
 export { aaplLineClip } from './aapl-line-clip';

src/component/slider.ts

@@ -1,5 +1,6 @@
 import { Slider as SliderComponent } from '@antv/gui';
 import { format } from 'd3-format';
+import { isTranspose } from '../utils/coordinate';
 import { GuideComponentComponent as GCC } from '../runtime';
 import { invert } from '../utils/scale';
 
@@ -13,9 +14,10 @@ export type SliderOptions = {
  */
 export const Slider: GCC<SliderOptions> = (options) => {
   // do not pass size.
-  const { orientation, labelFormatter, size, style, ...rest } = options;
+  const { orientation, labelFormatter, size, style, position, ...rest } =
+    options;
 
-  return ({ scales: [scale], value, theme }) => {
+  return ({ scales: [scale], value, theme, coordinate }) => {
     const { bbox } = value;
     const { x, y, width, height } = bbox;
     const { slider: sliderTheme = {} } = theme;
@@ -25,17 +27,20 @@ export const Slider: GCC<SliderOptions> = (options) => {
         ? format(labelFormatter)
         : labelFormatter;
 
+    const isHorizontal = orientation === 'horizontal';
+    const reverse = isTranspose(coordinate) && isHorizontal;
+
     return new SliderComponent({
       className: 'slider',
       style: Object.assign({}, sliderTheme, {
         x,
         y,
-        trackLength: orientation === 'horizontal' ? width : height,
+        trackLength: isHorizontal ? width : height,
         orientation,
         formatter: (v) => {
           const f = formatter || defaultFormatter;
-          // @todo Pass index to distinguish the left and the right value.
-          const tick = invert(scale, v, true);
+          const v1 = reverse ? 1 - v : v;
+          const tick = invert(scale, v1, true);
           return f(tick);
         },
         ...style,

src/interaction/sliderFilter.ts

@@ -1,4 +1,5 @@
 import { deepMix, throttle } from '@antv/util';
+import { isTranspose } from '../utils/coordinate';
 import { invert, domainOf } from '../utils/scale';
 
 export const SLIDER_CLASS_NAME = 'slider';
@@ -36,10 +37,11 @@ function filterDataByDomain(options, scaleOptions) {
   };
 }
 
-function abstractValue(values, scale) {
+function abstractValue(values, scale, reverse) {
   const [x, x1] = values;
-  const d0 = invert(scale, x, true);
-  const d1 = invert(scale, x1, false);
+  const v = reverse ? (d) => 1 - d : (d) => d;
+  const d0 = invert(scale, v(x), true);
+  const d1 = invert(scale, v(x1), false);
   return domainOf(scale, [d0, d1]);
 }
 
@@ -57,8 +59,16 @@ export function SliderFilter({
     if (!sliders.length) return () => {};
 
     let filtering = false;
-    const { scale } = view;
+    const { scale, coordinate } = view;
     const { x: scaleX, y: scaleY } = scale;
+    const transposed = isTranspose(coordinate);
+
+    const channelOf = (orientation) => {
+      const channel0 = orientation === 'vertical' ? 'y' : 'x';
+      const channel1 = orientation === 'vertical' ? 'x' : 'y';
+      if (transposed) return [channel1, channel0];
+      return [channel0, channel1];
+    };
 
     const sliderHandler = new Map();
 
@@ -77,14 +87,18 @@ export function SliderFilter({
           if (filtering) return;
           filtering = true;
 
+          const [channel0, channel1] = channelOf(orientation);
+
           // Update domain of the current channel.
-          const channel0 = orientation === 'vertical' ? 'y' : 'x';
           const scale0 = scale[channel0];
-          const domain0 = abstractValue(values, scale0);
+          const domain0 = abstractValue(
+            values,
+            scale0,
+            transposed && orientation === 'horizontal',
+          );
           channelDomain[channel0] = domain0;
 
           // Get domain of the other channel.
-          const channel1 = orientation === 'vertical' ? 'x' : 'y';
           const domain1 = channelDomain[channel1];
 
           // Filter data.