The issue has been closed

改变 Spec 数组字段的 API 配置方式 #4599

pearmini posted onGitHub

数组字段 API 修改

在 G2 5.0 的 Spec 中，有一些字段是数组，比如 transform。

const options = {
  transform: [{ type: 'stackY', orderBy: 'value' }, { type: 'normalizeY' }],
}

目前 Chart API 的配置方式如下：

interval
  .transform({ type: 'stackY' })
  .transform({ type: 'normalizeY' })

为了让 API 之间保持更加统一，也和 4.0 更加兼容，修改 API 的形式如下：

interval
  .transform('stackY', { orderBy: 'value' })
  .transform('normalizeY')

API 设计

# mark.[arrayField](type, [_options_])

arrayField 枚举值如下：

transform
coordinate
interaction

其中 type 是必须参数，指定该可视化组件的类型。options 是可选参数，指定改可视化组件的配置。

思路

修改 src/api/props.ts 里面的 defineArrayProp 函数。

TODO

代码：transform，coordinate，interaction
测试：单元测试
案例
文档

两种形式：

spec 方式：

{
// ...
transform: [
  { type: 'stackY', orderBy: 'value' },
  { type: 'normalizeY' }
]
}

API 方式：

interval
.transform('stackY', { orderBy: 'value' })
.transform('normalizeY')

posted by pepper-nice about 2 years ago

可能出现多个相同的 transform 吗，如果会的话，api这种方式就有问题。

posted by hustcc about 2 years ago

可能出现多个相同的 transform 吗，如果会的话，api这种方式就有问题。

会有相同的 transform，但是 api 并不会影响最后的 spec。

interval
  .transform('sortX')
  .transform('sortX')

// 等同于
const options = {
  transform: [{ type: 'sortX' }, { type: 'sortX'}]
}

posted by pearmini about 2 years ago

那怎么删除和更新 transform。

posted by hustcc about 2 years ago

那怎么删除和更新 transform。

这是一个好问题。不过这个问题应该一直都存在，按照之前的写法应该也会存在这个问题。解决办法需要对数组 api 进行扩展：

mark.[arrayField]()：返回所有的 transform

mark
  .transform('sortX')
  .transform('sortY')

mark.transform(); // [ { type: 'sortX' },  { type: 'sortY'} ]

mark.[arrayField](type[, options]): 添加一个组件

mark
  .transform('sortX')
  .transform('stackY', { orderBy: 'value' })

mark.transform(); // [ { type: 'sortX' },  { type: 'stackY', orderBy: 'value' } ]

mark.[arrayField](type[, options[, index]]): 插入一个组件到指定的 index

mark
  .transform('sortX')
  .transform('sortY', null, 0) // null 表示没有传递配置
  .transform('stackY', { orderBy: 'value' }, 1)

mark.transform(); // [{type: 'sortY'}, {type: 'stackY', orderBy: 'value'},  {type: 'sortX'}]

mark.[arrayField](index, type[, options]): 更新指定 index 的组件

mark
  .transform('sortX')
  .transform('stackY')
  .transform(0, 'sortY')
  .transform(1, null, { orderBy: 'value'}) // 只更新 options


mark.transform(); // [{type: 'sortY'}, {type:'stackY', orderBy: 'value'} ]

mark.[arrayField](index): 删除一个组件

mark
  .transform('sortX')
  .transform(0);

mark.transform(); // []

mark.[arrayField](null): 清空全部组件

mark
  .transform('sortX')
  .transform('sortY')
  .transform(null);

mark.transform(); // [];

mark.[arrayField](array)：覆盖所有组件

mark
  .transform('sortX')
  .transform('sortY')

mark.transform([{type: 'stackY'}, {type: 'normalizeY'}]);

mark.transform(); // [{type: 'stackY'}, {type: 'normalizeY'}]

posted by pearmini about 2 years ago

这个因为了给用户更好的心智模型，暂时先关闭。

posted by pearmini about 2 years ago

Fund this Issue

$0.00

Funded

Pull requests

改变 Spec 数组字段的 API 配置方式 #4599

数组字段 API 修改

API 设计

思路

TODO

Company

Community

Support

Connect