feat(scale): add groupTransform for scales to support sync dual axes

[pearmini]

groupTransform

close: #6370

before	After

给 scale 添加 groupTransform 配置，可以用于同步双轴图的坐标刻度。

import { G2Spec } from '../../../src';
import { weather } from '../../data/weather';

export function weatherLineMultiAxesSync(): G2Spec {
  return {
    type: 'view',
    data: weather,
    children: [
      {
        type: 'line',
        encode: {
          x: 'Month',
          y: 'Temperature',
          color: '#EE6666',
          shape: 'smooth',
        },
        scale: {
          y: {
            independent: true,
            groupTransform: syncTicksOfDomainsFromZero, // 指定同步双轴图 ticks 的方法
          },
        },
        axis: {
          y: {
            title: 'Temperature (°C)',
            titleFill: '#EE6666',
            gridStroke: 'red',
            gridStrokeOpacity: 1,
          },
        },
      },
      {
        type: 'interval',
        encode: {
          x: 'Month',
          y: 'Evaporation',
          color: '#5470C6',
          series: () => 'Evaporation',
        },
        scale: {
          y: { independent: true },
        },
        style: {
          fillOpacity: 0.8,
        },
        axis: {
          y: {
            position: 'right',
            title: 'Temperature (°C)',
            titleFill: '#5470C6',
            grid: false,
          },
        },
      },
      {
        type: 'interval',
        encode: {
          x: 'Month',
          y: 'Precipitation',
          color: '#91CC75',
          series: () => 'Precipitation',
        },
        scale: {
          y: { independent: true },
        },
        axis: {
          y: {
            position: 'right',
            title: 'Precipitation (ml)',
            titleFill: '#91CC75',
            grid: false,
          },
        },
      },
    ],
  };
}

其中 syncTicksOfDomainsFromZero 的定义如下：

function syncTicksOfDomainsFromZero(scales) {
  scales.forEach((scale) => scale.update({ nice: true }));
  const normalize = (d) => d / Math.pow(10, Math.ceil(Math.log(d) / Math.LN10));
  const maxes = scales.map((scale) => scale.getOptions().domain[1]);
  const normalized = maxes.map(normalize);
  const normalizedMax = Math.max(...normalized);
  for (let i = 0; i < scales.length; i++) {
    const scale = scales[i];
    const domain = scale.getOptions().domain;
    const t = maxes[i] / normalized[i];
    const newDomainMax = normalizedMax * t;
    scale.update({ domain: [domain[0], newDomainMax] });
  }
}

该方法有一个限制：所有的比例尺的 domain 都是从0开始的，简单的思路如下：

• 对所有 scale 进行 nice，调整 domain 方便 ticks 的生成。
• 对 nice 之后的所有 domainMax 进行归一化处理，得到之中最大的 normalizedMax。
• 调整所有 scale 的 domainMax，使得归一化后都是 normalizedMax。

因为该方法有所局限（不过也覆盖大多数场景），并且没有充分测试，所以先不内置。不过，会在案例中透出，用户通过复制使用并且优化。之后该方法成熟之后，可以添加 syncTicks 这个配置：

{ scale: { y: { syncTicks: true } } }

[coveralls]

Pull Request Test Coverage Report for Build 10072881907

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 14 of 14 (100.0%) changed or added relevant lines in 2 files are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage increased (+0.006%) to 86.678%

---

Files with Coverage Reduction	New Missed Lines	%
src/composition/utils.ts	1	90.0%

Totals
Change from base Build 10039688722:	0.006%
Covered Lines:	10543
Relevant Lines:	11786

---

💛 - Coveralls