feat(legend): optimize

[pearmini]

优化图例

• 图例 autoPadding。
• 连续图例的展示优化：添加 handle。
• 多个图例的展示问题。
• 离散图例默认展示 title。
• 离散图例展示优化。

开始使用

export function commitsPointGrouped(): G2Spec {
  return {
    type: 'point',
    height: 300,
    inset: 10,
    padding: 'auto',
    frame: true,
    data: {
      type: 'fetch',
      value: 'data/commits.csv',
    },
    encode: {
      x: (d) => d.time.getUTCHours(),
      y: (d) => d.time.getUTCDay(),
      size: 'count',
      shape: 'point',
      color: 'count',
    },
    transform: [{ type: 'group', size: 'sum' }, { type: 'sortY' }],
    scale: {
      y: { type: 'point' },
      x: { tickCount: 24 },
      color: { palette: 'rdBu' },
    },
    axis: {
      x: { title: 'time (hours)' },
      y: { title: 'time (day)', grid: true },
    },
  };
}

优化前：

上面存在的问题如下：

• 图例布局空间浪费。
• size 图例的颜色有误导性，引导用户去找蓝色的圆，应该选择一个更加中性的颜色。
• 图例默认没有 handle。
• 图例的 title 和 label 的样式和坐标轴的不符合。
• size 图例只展示第一个和最后一个 tick。
• 连续图例太长了。

优化后：

[pepper-nice]

LG