Chart API Design

[pepper-nice]

缺少的 API

API	描述
chart.getViews(): Views[]	获得所有的渲染views实例
chart.getScales() :Scale[]	获得所有的scales
chart.getScale(field: string): Scale	根据字段field获取对应的scale信息
chart.getComponents(): Component[]	获得所有的组件信息
chart.getComponent(comp: string): Component	根据组件名称获得对应的组件信息
chart.getTheme(): Theme	获得主题信息
chart.getCoordinate(): Coordinate	获得坐标系信息
chart.getGroup(): Group	获得 Canvas Group 信息
node.getXY(datum): Point	根据数据获取坐标点
node.changeVisible(visible:boolean)	当前 Node 是否显示
chart.showTooltip()
chart.hideTooltip()
chart.lockTooltip()
chart.unlockTooltip()

getScale()

获取实例信息。getCoordinate() 、getComponents()、getTheme()、getMarks() 同理，暂不一一列举使用方法。

使用

const chart = new Chart({...});
const interval = chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'genre').
  .encode('color', 'genre');

interval.getScale('x'); // 

实现

需要考虑获取实例要统一放在 Chart 中还是 Node 中

方案一

在 Node 中透出获取实例的方法。

1. runtime/plot.ts 渲染图表中获取图表 views 信息，放入 context 中。绑定每个 Node 和 view：

context.views = views;
views.forEach(view => {
    view.node = node;
})

2. api/node.ts 向上查找得到 Chart 实例后获取 context 属性。根据 node 查找得到当前view，得到所有的信息。

class Node {
  getView(){
    const chart = findRoot();
    const { views }= chart.context();
    return views.find(v => v.node === this);
  };
  getScale(key: string){
    const { scale } = this.getView();
    return scale[key];
  };
  getComponent(comp: string){};
  getTheme(){};
  getMarks(): Mark[] {};
}

方案二

在 Chart 中透出，通过指定 node 来获得指定的 node 的实例信息。

class Chart {
  getViews(){
    return this._context.views;
  }
  getScale(node: Node, key: string){
    const view = findViewByNode(node);
    return view.scale[key];
  }
  getComponents(comp: string){};
  getTheme(){};
  getMarks(): Mark[]{};
}

Node.getXY(datum){}

获取当前数据对应的坐标点。（如果是面积类Mark：Interval、Plogen。则返回起始坐标）

使用

const chart = new Chart({...});
const interval = chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'genre').
  .encode('color', 'genre');

interval.getXY({ x: 'German', y: 2340 }); // { x: 130, y: 245 }

实现

getXY(datum): Point {
  // 找到 mark 信息
  const mark = this.findMark();
  const { key, value } = mark;
  // 找到当前数据的index
  const index = key.data.findIndex(datum);
  const dataInfo = value.data[index]
  return dataInfo.points[0]
}

Node.changeVisible()

使用

const chart = new Chart({...});
const interval = chart
  .interval()
  .encode('x', 'genre')
  .encode('y', 'genre').
  .encode('color', 'genre');
chart.render();
chart.changeVisible(false);

实现

const canvas = getCanvas();
canvas.changeVisible();

tooltip 相关 API

等待交互 ready 后再开发。

• showTooltip()
• hideTooltip()
• lockTooltip()
• unlockTooltip()

[visiky]

1. typo: Views[] -> View[]
2. node.changeVisible(visible:boolean) 赶脚不如直接 node.hide(), node.show() 就好？

其它的，我再想想

[pearmini]

node.hide(), node.show()

这个确实更好

[pearmini]

chart.getScale(field: string): Scale

应该是

chart.getScale(channel: string): scale

[pearmini]

chart.getComponents(): Component[]
chart.getComponent(comp: string): Component

这个先不加

[pearmini]

node.getXY(datum): Point

先不加

[pearmini]

tooltip 相关的等交互自定义直接出来再加