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 API 支持 mark 类型

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