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

[pearmini]

数组字段 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
• 测试：单元测试
• 案例
• 文档

[pepper-nice]

两种形式：

• spec 方式：

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

• API 方式：

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

[hustcc]

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

[pearmini]

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

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

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

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

[hustcc]

那怎么删除和更新 transform。

[pearmini]

那怎么删除和更新 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'}]

[pearmini]

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