fix(slider): index scale by scaleKey

[pearmini]

Slider

加入 text annotation 的时候，slider 失效。

chart.options({
  type: 'view',
  children: [
    { type: 'point' },
    { type: 'text', style: { text: 'hello', x: '50%', y: '50%' } },
  ],
});

问题原因

之前是通过 channel name 去索引 scale 的。这存在一个问题：当一个 channel 有多个 scale 的时候，后面的 scale 会覆盖前面的 scale。

// Before
chart.getScale(); // { x: Identity, y: Identity }

point x 和 y 通道的 Linear scale 被 text 的 Identity scale 覆盖了。

解决办法

通过 scaleKey 去索引 scale。如果没有显示的指定 scaleKey，将 ${channelName}${maxIndex} 作为该 scale 的 key。

// After
chart.getScale(); // { x: Identity, y: Identity, x1: Identity, y1: Identity }

这样存储 scale 之后应该可以解决 #5242 提到的问题。

效果

export function countriesAnnotationSliderFilter(): G2Spec {
  return {
    type: 'view',
    theme: 'classic',
    padding: 'auto',
    data: {
      type: 'fetch',
      value: 'data/countries.json',
    },
    children: [
      { type: 'lineX', data: [0] },
      { type: 'lineY', data: [0] },
      {
        type: 'range',
        data: [
          { x: [-25, 0], y: [-30, 0], region: '1' },
          { x: [-25, 0], y: [0, 20], region: '2' },
          { x: [0, 5], y: [-30, 0], region: '2' },
          { x: [0, 5], y: [0, 20], region: '1' },
        ],
        encode: { x: 'x', y: 'y' },
        style: {
          fillOpacity: 0.2,
          fill: (d) => (d.region === '1' ? '#d8d0c0' : '#a3dda1'),
        },
      },
      {
        type: 'point',
        encode: {
          x: 'change in female rate',
          y: 'change in male rate',
          size: 'pop',
          color: 'continent',
          shape: 'point',
        },
        scale: {
          color: {
            range: ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
          },
          x: { nice: true },
          y: { nice: true },
          size: { range: [4, 30] },
        },
        legend: { size: false },
        style: { stroke: '#bbb', fillOpacity: 0.8 },
        axis: { x: { title: 'Female' }, y: { title: 'Male' } },
        slider: {
          x: { labelFormatter: (d) => d.toFixed(1) },
          y: { labelFormatter: (d) => d.toFixed(1) },
        },
        tooltip: {
          items: [
            { channel: 'x', valueFormatter: '.1f' },
            { channel: 'y', valueFormatter: '.1f' },
          ],
        },
      },
      {
        type: 'text',
        style: {
          text: 'Population',
          x: '100%',
          y: '100%',
          dx: -10,
          dy: -10,
          textAlign: 'end',
          fontSize: 50,
          textBaseline: 'bottom',
        },
      },
    ],
  };
}