antvis/G2

[v5] tooltip 交互,抛出事件让上层可以监听自定义(减少升级成本) #4520

visiky posted onGitHub

现状

在业务上层,不仅仅是 TechVis 还是其它,大部分的 Tooltip 定制场景,通过以下方式处理:

// 保留 Tooltip 交互,但是不展示内容;这种做法,crosshairs 和 tooltip markers 都可以保留,只有 container 展示内容会隐藏
chart.tooltip({ showContent: false });
// 监听 tooltip 事件,外置使用 react 自定义
chart.on('tooltip:show', (evt) => {
   const { title, items } = evt;
  // do something
});
chart.on('tooltip:change', (evt) => {
   const { title, items } = evt;
  // do something
});
chart.on('tooltip:hide', (evt) => {
   const { title, items } = evt;
  // do something
});

期望

为了减少上层升级成本,旧版的自定义 tooltip(复杂 react 定制)可以保留,尽量少成本适配

  • tooltip 交互增加 showContent 配置
  • tooltip 交互抛出事件,事件主要参数包含: title, items 即可

除了 tooltip,类似的 slider 等组件:

  • 交互中的事件,都需要抛出来。
  • 需要有事件,可以触发组件的状态
posted by hustcc over 2 years ago

典型的自定义 tooltip + 图例的 case:http://g2plot.antv.antgroup.com/examples/case/statistical-scenario/#trend

但我感觉在外部监听事件去做定制的方式也不是很好,理想的使用方式如下 (伪代码) 如下。

function Legend(...args) {
  // 可以拿到所有的 views 视图, 含 scales, data 等,外部负责返回一个组件展示
  // ① 返回 G DisplayObject
  return <G.CustomElement />;
  // ② 返回 HTML
  return <div />
  // ③ 返回空 —— 抛出信息到外部去做 react 组件或其它
  return null;
}

{
  type: 'line',
  encode: {},
  components: [Legend]
}
posted by visiky over 2 years ago
posted by pearmini almost 2 years ago

Fund this Issue

$0.00
Funded

Pull requests