fix(scale): group scale by name and index (#5815)

README.md

@@ -91,8 +91,6 @@ If all goes well, you can get the following lovely bar chart!
 - [ant-design-charts](https://github.com/ant-design/ant-design-charts) - The React chart library, based on [G2](https://github.com/antvis/G2), [G6](https://github.com/antvis/G6), [X6](https://github.com/antvis/X6), [L7Plot](https://github.com/antvis/L7Plot).
 - [More...](https://github.com/antvis/G2/discussions/5772)
 
-
-
 ## 📮 Contributing
 
 - [Issues](https://github.com/antvis/g2/issues) - report bugs or request features

__tests__/integration/snapshots/tooltip/movies-interval-scale-key-scrollbar/step0.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 310px; top: 110px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Adventure
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="Worldwide Gross"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          Worldwide Gross
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="66.081G"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        66.081G
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/plots/tooltip/index.ts

@@ -69,3 +69,4 @@ export { stateAgesIntervalCustomStyle } from './stateages-interval-custom-style'
 export { mockTooltipClosest } from './mock-tooltip-closest';
 export { stateAgesIntervalScrollbar } from './stateages-interval-scrollbar';
 export { aaplLineOverflow } from './aapl-line-overflow';
+export { moviesIntervalScaleKeyScrollbar } from './movies-interval-scale-key-scrollbar';

__tests__/plots/tooltip/movies-interval-scale-key-scrollbar.ts

@@ -0,0 +1,25 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export async function moviesIntervalScaleKeyScrollbar(): Promise<G2Spec> {
+  return {
+    type: 'line',
+    data: {
+      type: 'fetch',
+      value: 'data/movies.csv',
+    },
+    encode: {
+      x: 'Major Genre',
+      y: 'Worldwide Gross',
+      series: () => 'Worldwide Gross',
+      color: () => 'Worldwide Gross',
+    },
+    transform: [{ type: 'groupX', y: 'sum' }],
+    scale: { y: { key: 'left' } },
+    axis: { y: { labelFormatter: '~s' }, x: { labelTransform: 'rotate(90)' } },
+    tooltip: { items: [{ channel: 'y', valueFormatter: '~s' }] },
+    slider: { x: true },
+  };
+}
+
+moviesIntervalScaleKeyScrollbar.steps = seriesTooltipSteps([300, 100]);

src/component/slider.ts

@@ -37,7 +37,7 @@ export const Slider: GCC<SliderOptions> = (options) => {
 
     const { width, height } = bbox;
     const { slider: sliderTheme = {} } = theme;
-    const defaultFormatter = scale.getFormatter?.() || ((v) => v.toString());
+    const defaultFormatter = scale.getFormatter?.() || ((v) => v + '');
     const formatter =
       typeof labelFormatter === 'string'
         ? format(labelFormatter)

src/runtime/scale.ts

@@ -174,22 +174,17 @@ export function assignScale(
 ): Record<string, Scale> {
   const keys = Object.keys(target);
   for (const scale of Object.values(source)) {
-    const { name, key } = scale.getOptions();
-    if (typeof key === 'string') {
-      if (!(key in target)) target[key] = scale;
-    } else {
-      // For scale.key = Symbol('independent')
-      if (!(name in target)) target[name] = scale;
-      else {
-        const I = keys
-          .filter((d) => d.startsWith(name))
-          // Reg is for extract `1` from `x1`;
-          .map((d) => +(d.replace(name, '') || 0));
-        const index = max(I) + 1;
-        const newKey = `${name}${index}`;
-        target[newKey] = scale;
-        scale.getOptions().key = newKey;
-      }
+    const { name } = scale.getOptions();
+    if (!(name in target)) target[name] = scale;
+    else {
+      const I = keys
+        .filter((d) => d.startsWith(name))
+        // Reg is for extract `1` from `x1`;
+        .map((d) => +(d.replace(name, '') || 0));
+      const index = max(I) + 1;
+      const newKey = `${name}${index}`;
+      target[newKey] = scale;
+      scale.getOptions().key = newKey;
     }
   }
   return target;