feat: chart support hoc mark

[pepper-nice]

使用方法

function HOMMark(options) {
  const { encode, ...res } = options;
  return () => {
    return [
      {
        type: 'interval',
        ...res,
        encode: {
          ...encode,
          color: 'genre',
        },
      },
      {
        type: 'line',
        ...options,
      },
      {
        type: 'point',
        ...options,
      },
    ];
  };
}

const chart = new Chart({
  container,
  canvas,
});
chart.data([
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
]);
chart
  .mark(HOMMark)
  .encode('x', 'genre')
  .encode('y', 'sold');

chart.render()

改造点

Chart API 支持 mark 类型

function defineMarkProps(Node, { name, ctor }: NodePropertyDescriptor) {
  Node.prototype[name] = function () {
    // ...
  };
}

[pearmini]

有两点需要注意：

• chart.mark 不会在 5.0.0 版本里面透出，因为这个版本不会透出内部可视化组件的自定义能力（会涉及一些重构），会在4月底发布的 5.1.0 这个版本里面透出。
• 应该是新增一个 defineMarkProps，而是在原有的 defineContainerProp 基础上修改，将新建 container 的 type 设置为第一个参数。

chart.mark(HOM).encode(); // ...

chart.getOptions(); // { type: 'view', children: [ { type: HOM } ] }