fix(slider): multiple series y

antvis · Nov 27, 2023 · 6cf8d24 · 6cf8d24
1 parent 4c9eb47
commit 6cf8d24
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/__tests__/plots/static/aapl-line-basic.ts b/__tests__/plots/static/aapl-line-basic.ts
@@ -12,9 +12,7 @@ export function aaplLineBasic(): G2Spec {
       y: 'close',
     },
     slider: {
-      x: {
-        // sparklineData: [[10, 2, 3, 4, 15, 10, 5, 0, 3, 1]]
-      }
+      x: {},
     },
   };
 }
diff --git a/src/component/slider.ts b/src/component/slider.ts
@@ -1,10 +1,13 @@
 import { Slider as SliderComponent } from '@antv/component';
 import { format } from 'd3-format';
 import { DisplayObject } from '@antv/g';
+import { isArray } from '@antv/util';
 import { isTranspose } from '../utils/coordinate';
-import { GuideComponentComponent as GCC, GuideComponentContext } from '../runtime';
+import {
+  GuideComponentComponent as GCC,
+  GuideComponentContext,
+} from '../runtime';
 import { invert } from '../utils/scale';
-import { isArray } from '@antv/util';
 
 export type SliderOptions = {
   orientation: 'horizontal' | 'vertical';
@@ -33,8 +36,13 @@ export const Slider: GCC<SliderOptions> = (options) => {
     ...rest
   } = options;
 
-  return (content) => {
-    const { scales: [scale], value, theme, coordinate } = content;
+  return (context) => {
+    const {
+      scales: [scale],
+      value,
+      theme,
+      coordinate,
+    } = context;
     const { bbox } = value;
 
     const { width, height } = bbox;
@@ -62,7 +70,7 @@ export const Slider: GCC<SliderOptions> = (options) => {
           const tick = invert(scale, v1, true);
           return f(tick);
         },
-        sparklineData: inferSparklineData(options, content),
+        sparklineData: inferSparklineData(options, context),
         ...style,
         ...rest,
       }),
@@ -75,21 +83,28 @@ function markValue(markState, channels: string[]) {
     .filter(([mark]) => mark.type === 'line' || mark.type === 'area')
     .map(([mark]) => {
       const { encode, slider } = mark;
-      const channel = (name) => {
-        const channel = encode[name];
-        return [name, channel ? channel.value : undefined];
-      };
-      const obj = Object.fromEntries(channels.map(channel));
-      return slider.x ? obj.y : obj.x;
+      if (slider?.x && Object.keys(slider.x).length === 0) {
+        const channel = (name) => {
+          const channel = encode[name];
+          return [name, channel ? channel.value : undefined];
+        };
+        return Object.fromEntries(channels.map(channel));
+      }
     });
-  return value;
+
+  if (!value?.series) return value?.y;
+  const result = value.series.reduce((acc, curr, index) => {
+    acc[curr] = acc[curr] || [];
+    acc[curr].push(value.y[index]);
+    return acc;
+  }, {});
+  return Object.values(result);
 }
 
 function inferSparklineData(options, context: GuideComponentContext) {
   const { markState } = context;
-  if (options.sparklineData && isArray(options.sparklineData))
-    return options.sparklineData;
-  return markValue(markState, ['x', 'y']);
+  if (isArray(options.sparklineData)) return options.sparklineData;
+  return markValue(markState, ['y', 'series']);
 }
 
 Slider.props = {