重构初步设计

[zChanges]

优化点

触发点：无发布流程 、 code 流程不规范 、 代码丑（配置式）、开源

1. 分层不清晰（zoom、 plotline、series）service

2. 配置式 庞大的option 不好维护

3. 异步 option 更新（现手动更新）observable ？

4. 代码层优化 series 视图计算 抽离出单独 class

开发

• 必须一个 [Issue] 对应一个组件
• Isssue 内带有 组件设计、API 设计、 组件描述、Todo
• 文档必须 review 完成后再进行开发
• code review 完成后再合如 next 分支

Chart

• view 视图

• data 数据

• scale 比例尺

• component 可视化组件 title legend axis tooltip series

• annotation 辅助 标注

• interaction 交互

const chart = new Chart({ // createChart()
  container: 'xxx',
  width: 600,
  height: 300,
  // options padding ...
});

chart.data(data)

// �默认初始化 scale title legend axis tooltip 组件。 都支持 hide
chart.scale()

// component
chart.title()
chart.legend()
chart.shape()
chart.xAxis()
chart.yAxis()
chart.tooltip() 

chart.annotation() // 标记注解 line �text 阀值线等 
// chart.plotLine() // 融入 Annotation 中

chart.interaction() // 交互动作 zoom 、框选brush 、legend active tooltip 等
//chart.zoom()

// render ？
chart.render()   // 默认手动 update, 可通过配置

<chart>
  <view [data]="data" [scale]="scale">
    <line></line>
    <area></area>
  </view>
  <title></title>
  <legend></legend>
  <axis></axis>
  <tooltip></tooltip>
</chart>

View

容器，组装 数据 、component之类的一个容器

布局、初始化 组件、options、事件、主题

Event

chart 事件类，所有事件基于 Event 派发 监听等

${component}:${evnet} legend-item:click

Data

绑定数据

Scale

数据映射到图形 xScale yScale

Tooltip

注册绑定触发tip事件

abstract Component

抽象类，所有组件必须按实现 init layout render destory 等

Component

可视化组件

Title

Legend

Axis

坐标轴

Series (shape)

独立出 shape 类型，管理 line area 等子类

Tooltip

interaction 触发 tooltip

tooltip 为独立组件 传入 point

Annotation

标记注解 line 阀值线 text 文本

Interaction

图表内所有交互动作 zoom 、 框选brush 、legend active tooltip 等

默认注册 tooltop legend ...

触发 目标：view component

动作：mouse enter leave

根据 targe type 添加 event

解决：外部自定义触发事件

Theme

TODO

• 单元测试

• web componment

• canvas // 前期预埋 node 渲染 引擎？

• data set

• animate

• 文档