fix(label): clear invalid labels (#5310)

__tests__/plots/interaction/index.ts

@@ -64,3 +64,4 @@ 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';
+export { mockAreaSliderFilterLabel } from './mock-area-slider-filter-label';

__tests__/plots/interaction/mock-area-slider-filter-label.ts

@@ -0,0 +1,52 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec } from '../../../src';
+import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter';
+
+export function mockAreaSliderFilterLabel(): G2Spec {
+  return {
+    type: 'area',
+    padding: 'auto',
+    data: [
+      { year: '1991', value: 15468 },
+      { year: '1992', value: 16100 },
+      { year: '1993', value: 15900 },
+      { year: '1994', value: 17409 },
+      { year: '1995', value: 17000 },
+      { year: '1996', value: 31056 },
+      { year: '1997', value: 31982 },
+      { year: '1998', value: 32040 },
+      { year: '1999', value: 33233 },
+    ],
+    encode: {
+      x: 'year',
+      y: 'value',
+    },
+    labels: [{ text: 'value' }],
+    slider: { x: true },
+    style: { fillOpacity: 0.4 },
+  };
+}
+
+export function dispatchValueChange(slider, values = [0.25, 0.75]) {
+  slider.update({ values });
+  slider.dispatchEvent(
+    new CustomEvent('valuechange', {
+      detail: {
+        value: [0.25, 0.75],
+      },
+    }),
+  );
+}
+
+mockAreaSliderFilterLabel.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const sliders = document.getElementsByClassName(SLIDER_CLASS_NAME);
+  const [s1] = sliders;
+  return [
+    {
+      changeState: () => {
+        dispatchValueChange(s1);
+      },
+    },
+  ];
+};

src/shape/label/position/default.ts

@@ -145,12 +145,18 @@ function inferInnerCircularStyle(
   };
 }
 
+// Set to null will not be set with default value as below.
+// const { x = 0 } = options;
+function maybeUndefined(d) {
+  return d === undefined ? null : d;
+}
+
 export function inferIdentityStyle(position, points, value, coordinate) {
   const { bounds } = value;
   const [p] = bounds;
   return {
-    x: p[0],
-    y: p[1],
+    x: maybeUndefined(p[0]),
+    y: maybeUndefined(p[1]),
   };
 }
 

src/shape/text/advance.ts

@@ -143,8 +143,13 @@ export const Advance = createElement((g) => {
     coordCenter,
     ...rest
   } = g.attributes as TextShapeStyleProps;
-  // Position is invalid, do not render the UI.
-  if ([x, y, x0, y0].some((v) => !isNumber(v))) return;
+
+  // Position is invalid, do not render the UI,
+  // or clear previous elements.
+  if ([x, y, x0, y0].some((v) => !isNumber(v))) {
+    g.children.forEach((d) => d.remove());
+    return;
+  }
 
   const { padding, ...backgroundStyle } = subObject(rest, 'background');
   const { points = [], ...connectorStyle } = subObject(rest, 'connector');