refactor(tooltip): enhance tooltip

[pearmini]

Tooltip

修改了配置 Tooltip Items 和 Title 的方式，参考这个 #4491 (comment) 中的讨论。

开始使用

const before = {
  encode: {
    tooltip: 'a',
    tooltip1: 'b',
    title: 'c',
  },
};

// Spec
const after = {
  tooltip: {
    title: 'c',
    items: ['a', 'b']
  }
};

// API
mark.tooltip({
  title: 'c',
  items: ['a', 'b'],
});

结构

tooltip 完整的结构如下：

// Spec
const mark = {
  tooltip: {
    title: 'c',
    items: ['a', 'b']
  }
};

// API
mark.tooltip({
  title: 'c',
  items: ['a', 'b'],
});

有以下两种语法糖：

// Spec
const mark = {
  tooltip: 'a',
};

// API
mark.tooltip('a');

// 等效于
const mark = {
  tooltip: {
    items: ['a'],
  },
};

// Spec
const mark = {
  tooltip: ['a', 'b'],
};

// API
mark.tooltip('a').tooltip('b');

// 等效于
const mark = {
  tooltip: {
    items: ['a', 'b'],
  },
};

title 和 item

title 和每一个 item 除了上述的字符串形式之外，还支持如下形式:

• 对象形式

// 指定 item 为字段 a
const mark = {
  tooltip: [{ color: 'red', field: 'a' }],
};

// 指定 item 为通道 y 的值
const mark = {
  tooltip: [{ color: 'red', channel: 'y', name: 'Y' }],
};

• 回调形式

// 指定为字段 a
const mark = {
  tooltip: [(d) => ({ value: d.a, color: 'red' })],
};

// 指定为通道 y
const mark = {
  tooltip: [(d, i, data, value) => ({ value: value.y.value[i], color: 'red' })],
};

[Aarebecca]

const after = {
  tooltip: {
    title: 'c',
    items: ['a', 'b']
  }
};

中 items 是指的映射字段而不是 GUI 里的数据对吧

[pearmini]

const after = {
  tooltip: {
    title: 'c',
    items: ['a', 'b']
  }
};

中 items 是指的映射字段而不是 GUI 里的数据对吧

嗯嗯，不是，是 G2 消费的格式。不过最后会转换成 GUI 里面的格式。

[Aarebecca]

回调形式为啥要用数组包裹呢

// 指定为字段 a
const mark = {
  tooltip: [(d) => ({ value: d.a, color: 'red' })],
};

// 指定为通道 y
const mark = {
  tooltip: [(d, i, data, value) => ({ value: value.y.value[i], color: 'red' })],
};

[pearmini]

回调形式为啥要用数组包裹呢

// 指定为字段 a
const mark = {
  tooltip: [(d) => ({ value: d.a, color: 'red' })],
};

// 指定为通道 y
const mark = {
  tooltip: [(d, i, data, value) => ({ value: value.y.value[i], color: 'red' })],
};

其实是否是回调形式都不需要数组包裹，只不过例子写的数组。

// 也是可以的
const mark = {
  tooltip: (d) => ({ value: d.a, color: 'red' }),
};