给 rangeX 和 rangeY 增加 data 语法糖

[pearmini]

AntV Open Source Contribution Plan（可选）

• 我同意将这个 Issue 参与 OSCP 计划

Issue 类型

中级任务

任务介绍

使得 rangeX 支持以下的语法，解决 #4572 提到的第一个问题。

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

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

chart.data({
  type: 'fetch',
  value:
    'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
});

chart.line().encode('x', 'date').encode('y', 'close');

chart.rangeY().data([350, 600]); // 这样写就可以了

chart.render();

之前的写法：

chart.rangeY().data([[350, 600]]).encode('y', d => d)

思路：添加一个默认的 transform，参考下面的参考说明

参考说明

• 参考原始讨论 issue：[v5] rangeY 使用, 同理 rangeX #4572
• 参考 line mark 的实现：

  G2/src/mark/lineX.ts

  Line 45 in 44188f7

  preInference: [...basePreInference(), { type: MaybeTupleX }],

• 参考 maybeTupleX 的实现：

  G2/src/transform/maybeTupleX.ts

  Line 5 in 44188f7

  export type MaybeTupleXOptions = Record<string, never>;

[deletenothing]

【deletenothing 认领】

[deletenothing]

@pearmini 你好，我对这个需求还有一些疑问，1，请问这个语法糖需要考虑data为[[300,400],[500,600]]这样多个数组的情况吗；2，请问对于RangeX想要实现什么样的效果可以再说明一下吗

[pearmini]

@deletenothing

1. 需要考虑 [[300,400],[500,600]] 的情况。
2. rangeX 和 rangeY 类似，也需要支持同样的语法糖，只不过绘制的是竖直方向的区域。