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

@@ -196,12 +196,15 @@ export function LegendFilter() {
         ];
         return deepMix({}, mark, {
           transform: newTransform,
-          // Set domain of scale to preserve legends.
+          //Set domain of scale to preserve legends.
           scale: {
             [channel]: {
               domain: scaleOrdinal.getOptions().domain,
             },
           },
+          legend: {
+            [channel]: { preserve: true },
+          },
         });
       });
       const newOptions = {