fix(legend): filter with pages

__tests__/plots/interaction/index.ts

@@ -63,3 +63,4 @@ export { penguinsPointBrushHandleCustom } from './penguins-point-brush-handle-cu
 export { unemploymentChoropleth } from './unemployment-choropleth';
 export { weatherLineLegendMark } from './weather-line-legend-mark';
 export { countriesAnnotationSliderFilter } from './countries-annotation-slider-filter';
+export { unemploymentAreaLegendFilterPages } from './unemployment-area-legend-filter-pages';

__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts

@@ -0,0 +1,29 @@
+import { G2Spec } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+import { step } from './utils';
+
+export function unemploymentAreaLegendFilterPages(): G2Spec {
+  return {
+    width: 800,
+    type: 'area',
+    data: {
+      type: 'fetch',
+      value: 'data/unemployment-by-industry.csv',
+    },
+    transform: [{ type: 'stackY' }],
+    encode: {
+      x: 'date',
+      y: 'unemployed',
+      color: 'industry',
+    },
+    interaction: { tooltip: false },
+  };
+}
+
+unemploymentAreaLegendFilterPages.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [, page] = document.getElementsByClassName('items-item-page');
+  const elements = page.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+  const [e0] = elements;
+  return [step(e0, 'click')];
+};

src/interaction/legendFilter.ts

@@ -182,8 +182,6 @@ export function LegendFilter() {
     const legends = legendsOf(container);
 
     const filter = async (channel, value) => {
-      const { scale } = view;
-      const { [channel]: scaleOrdinal } = scale;
       const { marks } = viewOptions;
       // Add filter transform for every marks,
       // which will skip for mark without color channel.
@@ -196,11 +194,8 @@ export function LegendFilter() {
         ];
         return deepMix({}, mark, {
           transform: newTransform,
-          // Set domain of scale to preserve legends.
-          scale: {
-            [channel]: {
-              domain: scaleOrdinal.getOptions().domain,
-            },
+          legend: {
+            [channel]: { preserve: true },
           },
         });
       });