fix(slider): with annotation (#5280)

* fix(slider): with annotation

* docs: update demo

__tests__/plots/interaction/countries-annotation-slider-filter.ts

@@ -0,0 +1,82 @@
+import { G2Spec } from '../../../src';
+import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter';
+import { dispatchValueChange } from './appl-line-slider-filter';
+
+export function countriesAnnotationSliderFilter(): G2Spec {
+  return {
+    type: 'view',
+    theme: 'classic',
+    padding: 'auto',
+    data: {
+      type: 'fetch',
+      value: 'data/countries.json',
+    },
+    children: [
+      { type: 'lineX', data: [0] },
+      { type: 'lineY', data: [0] },
+      {
+        type: 'range',
+        data: [
+          { x: [-25, 0], y: [-30, 0], region: '1' },
+          { x: [-25, 0], y: [0, 20], region: '2' },
+          { x: [0, 5], y: [-30, 0], region: '2' },
+          { x: [0, 5], y: [0, 20], region: '1' },
+        ],
+        encode: { x: 'x', y: 'y' },
+        style: {
+          fillOpacity: 0.2,
+          fill: (d) => (d.region === '1' ? '#d8d0c0' : '#a3dda1'),
+        },
+      },
+      {
+        type: 'point',
+        encode: {
+          x: 'change in female rate',
+          y: 'change in male rate',
+          size: 'pop',
+          color: 'continent',
+          shape: 'point',
+        },
+        scale: {
+          color: {
+            range: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
+          },
+          x: { nice: true },
+          y: { nice: true },
+          size: { range: [4, 30] },
+        },
+        legend: { size: false },
+        style: { stroke: '#bbb', fillOpacity: 0.8 },
+        axis: { x: { title: 'Female' }, y: { title: 'Male' } },
+        slider: {
+          x: { labelFormatter: (d) => d.toFixed(1) },
+          y: { labelFormatter: (d) => d.toFixed(1) },
+        },
+        tooltip: {
+          items: [
+            { channel: 'x', valueFormatter: '.1f' },
+            { channel: 'y', valueFormatter: '.1f' },
+          ],
+        },
+      },
+    ],
+  };
+}
+
+countriesAnnotationSliderFilter.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

@@ -62,3 +62,4 @@ export { penguinsPointBrushHandleStyle } from './penguins-point-brush-handle-sty
 export { penguinsPointBrushHandleCustom } from './penguins-point-brush-handle-custom';
 export { unemploymentChoropleth } from './unemployment-choropleth';
 export { weatherLineLegendMark } from './weather-line-legend-mark';
+export { countriesAnnotationSliderFilter } from './countries-annotation-slider-filter';

site/examples/annotation/line/demo/quadrant-scatter.ts

@@ -3,12 +3,16 @@ import { Chart } from '@antv/g2';
 const chart = new Chart({
   container: 'container',
   theme: 'classic',
+  padding: 'auto',
 });
 
 chart.data({
   type: 'fetch',
   value:
     'https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747ad9a.json',
+  transform: [
+    { type: 'filter', callback: (d) => d['change in male rate'] !== 'NA' },
+  ],
 });
 
 chart.lineX().data([0]);
@@ -24,15 +28,9 @@ chart
   ])
   .encode('x', 'x')
   .encode('y', 'y')
-  .encode('color', 'region')
-  .scale('color', {
-    range: ['#d8d0c0', '#a3dda1'],
-    independent: true,
-  })
+  .style('fill', (d) => (d.region === '1' ? '#d8d0c0' : '#a3dda1'))
   .style('fillOpacity', 0.2)
-  .animate(false)
-  .legend(false)
-  .tooltip(false);
+  .animate('enter', { type: 'fadeIn' });
 
 chart
   .point()
@@ -44,13 +42,14 @@ chart
   .scale('color', {
     range: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
   })
-  .axis('x', { title: false })
-  .axis('y', { title: false })
-  .scale('x', { domain: [-25, 5] })
-  .scale('y', { domain: [-30, 20] })
   .scale('size', { range: [4, 30] })
   .style('stroke', '#bbb')
   .style('fillOpacity', 0.8)
+  .axis('x', { title: 'Female' })
+  .axis('y', { title: 'Male' })
+  .legend('size', false)
+  .slider('x', { labelFormatter: (d) => d.toFixed(1) })
+  .slider('y', { labelFormatter: (d) => d.toFixed(1) })
   .tooltip([
     { channel: 'x', valueFormatter: '.1f' },
     { channel: 'y', valueFormatter: '.1f' },

src/interaction/brushFilter.ts

@@ -122,9 +122,10 @@ export function BrushFilter({ hideX = true, hideY = true, ...rest }) {
             },
             mark,
             {
+              // Set nice to false to avoid modify domain.
               scale: {
-                x: { domain: domainX },
-                y: { domain: domainY },
+                x: { domain: domainX, nice: false },
+                y: { domain: domainY, nice: false },
               },
             },
           ),

src/interaction/sliderFilter.ts

@@ -21,10 +21,10 @@ function filterDataByDomain(options, scaleOptions, prefix, hasState = false) {
         scale: scaleOptions,
         // Don't rerender sliders.
         [prefix]: {
-          ...(mark[prefix].x && {
+          ...(mark[prefix]?.x && {
             x: { preserve: true, ...(hasState && { ratio: null }) },
           }),
-          ...(mark[prefix].y && {
+          ...(mark[prefix]?.y && {
             y: { preserve: true, ...(hasState && { ratio: null }) },
           }),
         },
@@ -142,8 +142,9 @@ export function SliderFilter({
           const newOptions = filterDataByDomain(
             options,
             {
-              [channel0]: { domain: domain0 },
-              [channel1]: { domain: domain1 },
+              // Set nice to false to avoid modify domain.
+              [channel0]: { domain: domain0, nice: false },
+              [channel1]: { domain: domain1, nice: false },
             },
             prefix,
             hasState,