fix(interaction): legendFilter 无法复原x轴的数据 #5506

[BENcorry]

Checklist

• npm test passes
• benchmarks are included
• commit message follows commit guidelines
• documents are updated

Description of change

解决问题

legendFilter 无法复原 x 轴的数据 #5506

解决办法

过滤掉数据在处理过程中产生的undefined x轴数据

Demo

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'view',
  data: [
    { month: 'Jan', city: 'Tokyo', temperature: 7 },
    { month: 'Jan', city: 'London', temperature: 3.9 },
    { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
    { month: 'Feb', city: 'London', temperature: 4.2 },
    { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
    { month: 'Mar', city: 'London', temperature: 5.7 },
    { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
    { month: 'Apr', city: 'London', temperature: 8.5 },
    { month: 'May', city: 'Tokyo', temperature: 18.4 },
    { month: 'May', city: 'London', temperature: 11.9 },
    { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
    { month: 'Jun', city: 'London', temperature: 15.2 },
    { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
    { month: 'Jul', city: 'London', temperature: 17 },
    { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
    { month: 'Aug', city: 'London', temperature: 16.6 },
    { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
    { month: 'Sep', city: 'London', temperature: 14.2 },
    { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
    { month: 'Oct', city: 'London', temperature: 10.3 },
    { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
    { month: 'Nov', city: 'London', temperature: 6.6 },
    { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
    { month: 'Dec', city: 'London', temperature: 4.8 },
  ],
  encode: {
    x: 'month',
    y: 'temperature',
    color: 'city',
  },
  children: [
    { type: 'line' },
    { type: 'point', style: { shape: 'point' } },
    {
      type: 'text',
      data: ['Jul', 17],
      encode: {
        text: '当前点London温度最高',
        color: 'London', // 加上 color encode
      },
      style: { fill: '#000' },
    },
  ],
});

chart.render();

初始化

过滤后

恢复

[pearmini]

很棒！👍 下面有两点注意一下：

• 出现 undefined 的原因找到了吗？
• rebase 一下 v5，重装依赖，运行一些 npm run test 生成新的截图，并且看是否能通过测试。

[BENcorry]

很棒！👍 下面有两点注意一下：

• 出现 undefined 的原因找到了吗？
• rebase 一下 v5，重装依赖，运行一些 npm run test 生成新的截图，并且看是否能通过测试。

1. 出现undefined的原因主要还是在执行filter的过程中处理数据的问题，其实只要text componet数据触发filter就会出现这个问题。
2. rebase了V5后本地还是跑不过测试，会存在ts的问题，IRenderer replace Renderer的类型异常和部分快照的问题

[pearmini]

2. rebase了V5后本地还是跑不过测试，会存在ts的问题，IRenderer replace Renderer的类型异常和部分快照的问题

更新了依赖了吗，报错截图发一个？

[BENcorry]

2. rebase了V5后本地还是跑不过测试，会存在ts的问题，IRenderer replace Renderer的类型异常和部分快照的问题

更新了依赖了吗，报错截图发一个？
更新了依赖

tests/unit/api/chart.spec.ts:439:25 - error TS2322: Type 'Renderer' is not assignable to type 'IRenderer'.

● Charts › [Canvas]: alphabetIntervalSpaceLayer

[BENcorry]

2. rebase了V5后本地还是跑不过测试，会存在ts的问题，IRenderer replace Renderer的类型异常和部分快照的问题

更新了依赖了吗，报错截图发一个？

看 Github CI环境是OK的

本地系统信息

Linux version 6.2.0-34-generic (buildd@bos03-amd64-059) (x86_64-linux-gnu-gcc-11 (Ubuntu 11.4.0-1ubuntu122.04) 11.4.0, GNU ld (GNU Binutils for Ubuntu) 2.38) #3422.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Sep 7 13:12:03 UTC 2

Node版本
v16.20.0 & v14.21.3 都是一样的问题

[pearmini]

目前还是有 ts 问题吗？有几个测试报错了？

[pearmini]

@BENcorry 这个 PR 本身没有问题，线上 CI 也通过了，我先合并了。本地没有通过的测试可以继续在这个 PR 里面讨论一下，我们看看问题在哪。

[BENcorry]

@BENcorry 这个 PR 本身没有问题，线上 CI 也通过了，我先合并了。本地没有通过的测试可以继续在这个 PR 里面讨论一下，我们看看问题在哪。

今天代码更新到最新的跑了下没问题了

[pearmini]

@BENcorry 那太好了！