@visactor/vseed 0.3.15 → 0.4.0

package/dist/esm/pipeline/spec/chart/pipes/player/playerXY.js

@@ -1,27 +1,42 @@
-import { groupBy } from "remeda";
+import { groupBy, uniqueBy } from "remeda";
 import { isPivotChart, isVTable } from "../../../../utils/index.js";
 import { datasetXY } from "../dataset/index.js";
 const playerXY = (spec, context)=>{
     const { vseed, advancedVSeed } = context;
-    const { datasetReshapeInfo, chartType } = advancedVSeed;
+    const { dimensions = [], datasetReshapeInfo, chartType, encoding } = advancedVSeed;
     const baseConfig = advancedVSeed.config[chartType];
     const result = datasetXY(spec, context);
-    if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) return result;
+    if (!baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) return result;
     const { player } = baseConfig;
     const id = datasetReshapeInfo[0].id;
-    const { field, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
-    const dataGroups = groupBy(advancedVSeed.dataset, (item)=>item[field]);
+    const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
+    const { encodingPlayer, encodingX } = unfoldInfo;
+    const { measureValue } = foldInfo;
+    const { maxCount, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
+    const dataGroups = groupBy(advancedVSeed.dataset, (item)=>item[encodingPlayer]);
     if (result.data && 'values' in result.data) result.data.values = [];
-    const specs = Object.values(dataGroups).map((items)=>({
+    const xValues = uniqueBy(advancedVSeed.dataset.map((d)=>d[encodingX]), (item)=>item);
+    const specs = Object.values(dataGroups).map((items)=>{
+        const filledItems = items.map((item)=>({
+                ...item,
+                [encodingX]: xValues.find((xValue)=>xValue === item[encodingX]) || 0
+            }));
+        const sortedItems = filledItems.sort((a, b)=>b[measureValue] - a[measureValue]);
+        return {
             data: {
                 id: id,
-                values: items.slice(0, 10)
+                values: sortedItems.slice(0, maxCount)
             }
-        }));
+        };
+    });
     const duration = interval;
     const exchangeDuration = 0.6 * interval;
+    const dataKey = dimensions.filter((d)=>!encoding.player?.includes(d.id)).map((d)=>d.id);
+    const textSize = 36;
+    const padding = 12;
     return {
         ...result,
+        dataKey,
         stackCornerRadius: void 0,
         animationUpdate: {
             bar: [
@@ -77,6 +92,22 @@ const playerXY = (spec, context)=>{
         },
         animationExit: {
             bar: [
+                {
+                    type: 'moveOut',
+                    options: {
+                        direction: 'y',
+                        orient: 'negative'
+                    },
+                    duration: exchangeDuration
+                },
+                {
+                    type: 'moveOut',
+                    options: {
+                        direction: 'x',
+                        orient: 'negative'
+                    },
+                    duration: exchangeDuration
+                },
                 {
                     type: 'fadeOut',
                     duration: exchangeDuration
@@ -89,15 +120,13 @@ const playerXY = (spec, context)=>{
                 dataId: 'year',
                 style: {
                     textBaseline: 'bottom',
-                    fontSize: 24,
+                    fontSize: textSize,
                     textAlign: 'right',
-                    fontFamily: 'PingFang SC',
-                    fontWeight: 600,
-                    text: (datum)=>datum.year,
-                    x: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.width - 50,
-                    y: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.height - 50,
-                    fill: 'grey',
-                    fillOpacity: 0.5
+                    text: (datum)=>datum[encodingPlayer],
+                    x: (_datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.width - padding,
+                    y: (_datum, _ctx)=>textSize + padding,
+                    fill: 'rgb(100, 100, 100)',
+                    fillOpacity: 0.25
                 }
             }
         ],

package/dist/esm/pipeline/spec/chart/pipes/player/playerXY.js.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline/spec/chart/pipes/player/playerXY.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/player/playerXY.ts"],"sourcesContent":["import type { IPlayerSpec, ISpec } from '@visactor/vchart'\nimport { groupBy } from 'remeda'\nimport { isPivotChart, isVTable } from 'src/pipeline/utils'\nimport type { Player, VChartSpecPipe } from 'src/types'\nimport { datasetXY } from '../dataset'\n\nexport const playerXY: VChartSpecPipe = (spec, context) => {\n  const { vseed, advancedVSeed } = context\n  const { datasetReshapeInfo, chartType } = advancedVSeed\n  const baseConfig = advancedVSeed.config[chartType] as { player: Player }\n  const result = datasetXY(spec, context)\n\n  if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) {\n    return result\n  }\n  const { player } = baseConfig\n\n  const id = datasetReshapeInfo[0].id\n  const {\n    field,\n    autoPlay = true,\n    interval = 1000,\n    loop = false,\n    position,\n    railColor,\n    trackColor,\n    sliderHandleColor,\n    sliderHandleBorderColor,\n    startButtonColor,\n    pauseButtonColor,\n    backwardButtonColor,\n    forwardButtonColor,\n  } = player\n\n  const dataGroups = groupBy(advancedVSeed.dataset, (item) => item[field])\n  if (result.data && 'values' in result.data) {\n    result.data.values = []\n  }\n  const specs = Object.values(dataGroups).map((items) => ({\n    data: {\n      id: id,\n      values: items.slice(0, 10),\n    },\n  }))\n\n  const duration = interval\n  const exchangeDuration = interval * 0.6\n  return {\n    ...result,\n    stackCornerRadius: undefined,\n    animationUpdate: {\n      bar: [\n        {\n          type: 'update',\n          options: { excludeChannels: ['x'] },\n          easing: 'linear',\n          duration,\n        },\n        {\n          channel: ['x'],\n          easing: 'circInOut',\n          duration: exchangeDuration,\n        },\n      ],\n      point: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      line: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      axis: {\n        duration: exchangeDuration,\n        easing: 'circInOut',\n      },\n    },\n    animationEnter: {\n      bar: [\n        {\n          type: 'moveIn',\n          duration: exchangeDuration,\n          easing: 'circInOut',\n          options: {\n            direction: 'x',\n            orient: 'negative',\n          },\n        },\n      ],\n    },\n    animationExit: {\n      bar: [\n        {\n          type: 'fadeOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    customMark: [\n      {\n        type: 'text',\n        dataId: 'year',\n        style: {\n          textBaseline: 'bottom',\n          fontSize: 24,\n          textAlign: 'right',\n          fontFamily: 'PingFang SC',\n          fontWeight: 600,\n          text: (datum: any) => datum.year,\n          x: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.width - 50\n          },\n          y: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.height - 50\n          },\n          fill: 'grey',\n          fillOpacity: 0.5,\n        },\n      },\n    ],\n    player: {\n      visible: true,\n      auto: autoPlay,\n      interval: interval,\n      loop: loop,\n      alternate: false,\n      position: 'middle',\n      orient: position,\n      type: 'discrete',\n      specs,\n      controller: {\n        visible: true,\n        start: { visible: true, order: 0, style: { fill: startButtonColor } },\n        pause: { visible: true, order: 1, style: { fill: pauseButtonColor } },\n        backward: { visible: true, order: 2, style: { fill: backwardButtonColor } },\n        forward: { visible: true, order: 3, position: 'end', style: { fill: forwardButtonColor } },\n      },\n      slider: {\n        visible: true,\n        railStyle: {\n          visible: true,\n          fill: railColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        trackStyle: {\n          visible: true,\n          fill: trackColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        handlerStyle: {\n          visible: true,\n          lineWidth: 2,\n          stroke: sliderHandleBorderColor,\n          fill: sliderHandleColor,\n          size: 9,\n        },\n      },\n    } as IPlayerSpec,\n  } as unknown as ISpec\n}\n"],"names":["playerXY","spec","context","vseed","advancedVSeed","datasetReshapeInfo","chartType","baseConfig","result","datasetXY","isVTable","isPivotChart","player","id","field","autoPlay","interval","loop","position","railColor","trackColor","sliderHandleColor","sliderHandleBorderColor","startButtonColor","pauseButtonColor","backwardButtonColor","forwardButtonColor","dataGroups","groupBy","item","specs","Object","items","duration","exchangeDuration","undefined","datum","ctx"],"mappings":"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"}
+{"version":3,"file":"pipeline/spec/chart/pipes/player/playerXY.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/player/playerXY.ts"],"sourcesContent":["import type { IPlayerSpec, ISpec } from '@visactor/vchart'\nimport { groupBy, uniqueBy } from 'remeda'\nimport { isPivotChart, isVTable } from 'src/pipeline/utils'\nimport type { Player, VChartSpecPipe } from 'src/types'\nimport { datasetXY } from '../dataset'\n\nexport const playerXY: VChartSpecPipe = (spec, context) => {\n  const { vseed, advancedVSeed } = context\n  const { dimensions = [], datasetReshapeInfo, chartType, encoding } = advancedVSeed\n  const baseConfig = advancedVSeed.config[chartType] as { player: Player }\n  const result = datasetXY(spec, context)\n\n  if (!baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) {\n    return result\n  }\n  const { player } = baseConfig\n\n  const id = datasetReshapeInfo[0].id\n  const { unfoldInfo, foldInfo } = datasetReshapeInfo[0]\n  const { encodingPlayer, encodingX } = unfoldInfo\n  const { measureValue } = foldInfo\n  const {\n    maxCount,\n    autoPlay = true,\n    interval = 1000,\n    loop = false,\n    position,\n    railColor,\n    trackColor,\n    sliderHandleColor,\n    sliderHandleBorderColor,\n    startButtonColor,\n    pauseButtonColor,\n    backwardButtonColor,\n    forwardButtonColor,\n  } = player\n\n  const dataGroups = groupBy(advancedVSeed.dataset, (item) => item[encodingPlayer])\n  if (result.data && 'values' in result.data) {\n    result.data.values = []\n  }\n\n  const xValues = uniqueBy(\n    advancedVSeed.dataset.map((d) => d[encodingX]),\n    (item) => item,\n  )\n  const specs = Object.values(dataGroups).map((items) => {\n    // 如果当前items中不存在xValues中的值, 则填充为0, 保证每组都有同样的xValue, 都有对应的数据\n    const filledItems = items.map((item) => ({\n      ...item,\n      [encodingX]: xValues.find((xValue) => xValue === item[encodingX]) || 0,\n    }))\n    const sortedItems = filledItems.sort((a, b) => b[measureValue] - a[measureValue])\n    return {\n      data: {\n        id: id,\n        values: sortedItems.slice(0, maxCount),\n      },\n    }\n  })\n\n  const duration = interval\n  const exchangeDuration = interval * 0.6\n\n  const dataKey = dimensions.filter((d) => !encoding.player?.includes(d.id)).map((d) => d.id)\n\n  const textSize = 36\n  const padding = 12\n  return {\n    ...result,\n    dataKey,\n    stackCornerRadius: undefined,\n    animationUpdate: {\n      bar: [\n        {\n          type: 'update',\n          options: { excludeChannels: ['x'] },\n          easing: 'linear',\n          duration,\n        },\n        {\n          channel: ['x'],\n          easing: 'circInOut',\n          duration: exchangeDuration,\n        },\n      ],\n      point: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      line: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      axis: {\n        duration: exchangeDuration,\n        easing: 'circInOut',\n      },\n    },\n    animationEnter: {\n      bar: [\n        {\n          type: 'moveIn',\n          duration: exchangeDuration,\n          easing: 'circInOut',\n          options: {\n            direction: 'x',\n            orient: 'negative',\n          },\n        },\n      ],\n    },\n    animationExit: {\n      bar: [\n        {\n          type: 'moveOut',\n          options: {\n            direction: 'y',\n            orient: 'negative',\n          },\n          duration: exchangeDuration,\n        },\n        {\n          type: 'moveOut',\n          options: {\n            direction: 'x',\n            orient: 'negative',\n          },\n          duration: exchangeDuration,\n        },\n        {\n          type: 'fadeOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    customMark: [\n      {\n        type: 'text',\n        dataId: 'year',\n        style: {\n          textBaseline: 'bottom',\n          fontSize: textSize,\n          textAlign: 'right',\n          text: (datum: any) => datum[encodingPlayer],\n          x: (_datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.width - padding\n          },\n          y: (_datum: any, _ctx: any) => {\n            return textSize + padding\n          },\n          fill: 'rgb(100, 100, 100)',\n          fillOpacity: 0.25,\n        },\n      },\n    ],\n    player: {\n      visible: true,\n      auto: autoPlay,\n      interval: interval,\n      loop: loop,\n      alternate: false,\n      position: 'middle',\n      orient: position,\n      type: 'discrete',\n      specs,\n      controller: {\n        visible: true,\n        start: { visible: true, order: 0, style: { fill: startButtonColor } },\n        pause: { visible: true, order: 1, style: { fill: pauseButtonColor } },\n        backward: { visible: true, order: 2, style: { fill: backwardButtonColor } },\n        forward: { visible: true, order: 3, position: 'end', style: { fill: forwardButtonColor } },\n      },\n      slider: {\n        visible: true,\n        railStyle: {\n          visible: true,\n          fill: railColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        trackStyle: {\n          visible: true,\n          fill: trackColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        handlerStyle: {\n          visible: true,\n          lineWidth: 2,\n          stroke: sliderHandleBorderColor,\n          fill: sliderHandleColor,\n          size: 9,\n        },\n      },\n    } as IPlayerSpec,\n  } as unknown as ISpec\n}\n"],"names":["playerXY","spec","context","vseed","advancedVSeed","dimensions","datasetReshapeInfo","chartType","encoding","baseConfig","result","datasetXY","isVTable","isPivotChart","player","id","unfoldInfo","foldInfo","encodingPlayer","encodingX","measureValue","maxCount","autoPlay","interval","loop","position","railColor","trackColor","sliderHandleColor","sliderHandleBorderColor","startButtonColor","pauseButtonColor","backwardButtonColor","forwardButtonColor","dataGroups","groupBy","item","xValues","uniqueBy","d","specs","Object","items","filledItems","xValue","sortedItems","a","b","duration","exchangeDuration","dataKey","textSize","padding","undefined","datum","_datum","ctx","_ctx"],"mappings":"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"}

package/dist/esm/pipeline/spec/chart/pipes/player/playerYX.js

@@ -1,27 +1,42 @@
-import { groupBy } from "remeda";
+import { groupBy, uniqueBy } from "remeda";
 import { isPivotChart, isVTable } from "../../../../utils/index.js";
 import { datasetYX } from "../dataset/index.js";
 const playerYX = (spec, context)=>{
     const { vseed, advancedVSeed } = context;
-    const { datasetReshapeInfo, chartType } = advancedVSeed;
+    const { dimensions = [], datasetReshapeInfo, chartType, encoding } = advancedVSeed;
     const baseConfig = advancedVSeed.config[chartType];
     const result = datasetYX(spec, context);
-    if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) return result;
+    if (!baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) return result;
     const { player } = baseConfig;
     const id = datasetReshapeInfo[0].id;
-    const { field, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
-    const dataGroups = groupBy(advancedVSeed.dataset, (item)=>item[field]);
+    const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
+    const { encodingPlayer, encodingY } = unfoldInfo;
+    const { measureValue } = foldInfo;
+    const { maxCount, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
+    const duration = interval;
+    const exchangeDuration = 0.6 * interval;
+    const dataGroups = groupBy(advancedVSeed.dataset, (item)=>item[encodingPlayer]);
     if (result.data && 'values' in result.data) result.data.values = [];
-    const specs = Object.values(dataGroups).map((items)=>({
+    const yValues = uniqueBy(advancedVSeed.dataset.map((d)=>d[encodingY]), (item)=>item);
+    const specs = Object.values(dataGroups).map((items)=>{
+        const filledItems = items.map((item)=>({
+                ...item,
+                [encodingY]: yValues.find((yValue)=>yValue === item[encodingY]) || 0
+            }));
+        const sortedItems = filledItems.sort((a, b)=>b[measureValue] - a[measureValue]);
+        return {
             data: {
                 id: id,
-                values: items.slice(0, 10)
+                values: sortedItems.slice(0, maxCount)
             }
-        }));
-    const duration = interval;
-    const exchangeDuration = 0.6 * interval;
+        };
+    });
+    const dataKey = dimensions.filter((d)=>!encoding.player?.includes(d.id)).map((d)=>d.id);
+    const textSize = 36;
+    const padding = 12;
     return {
         ...result,
+        dataKey,
         stackCornerRadius: void 0,
         animationUpdate: {
             bar: [
@@ -42,11 +57,7 @@ const playerYX = (spec, context)=>{
                     easing: 'circInOut',
                     duration: exchangeDuration
                 }
-            ],
-            axis: {
-                duration: exchangeDuration,
-                easing: 'circInOut'
-            }
+            ]
         },
         animationEnter: {
             bar: [
@@ -63,6 +74,21 @@ const playerYX = (spec, context)=>{
         },
         animationExit: {
             bar: [
+                {
+                    type: 'moveOut',
+                    options: {
+                        direction: 'x'
+                    },
+                    duration: exchangeDuration
+                },
+                {
+                    type: 'moveOut',
+                    options: {
+                        direction: 'y',
+                        orient: 'negative'
+                    },
+                    duration: exchangeDuration
+                },
                 {
                     type: 'fadeOut',
                     duration: exchangeDuration
@@ -75,15 +101,15 @@ const playerYX = (spec, context)=>{
                 dataId: 'year',
                 style: {
                     textBaseline: 'bottom',
-                    fontSize: 24,
+                    fontSize: textSize,
                     textAlign: 'right',
                     fontFamily: 'PingFang SC',
                     fontWeight: 600,
-                    text: (datum)=>datum.year,
-                    x: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.width - 50,
-                    y: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.height - 50,
-                    fill: 'grey',
-                    fillOpacity: 0.5
+                    text: (datum)=>datum[encodingPlayer],
+                    x: (_datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.width - padding,
+                    y: (_datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.height - padding - textSize,
+                    fill: 'rgb(100, 100, 100)',
+                    fillOpacity: 0.25
                 }
             }
         ],

package/dist/esm/pipeline/spec/chart/pipes/player/playerYX.js.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline/spec/chart/pipes/player/playerYX.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/player/playerYX.ts"],"sourcesContent":["import type { IPlayerSpec, ISpec } from '@visactor/vchart'\nimport { groupBy } from 'remeda'\nimport { isPivotChart, isVTable } from 'src/pipeline/utils'\nimport type { Player, VChartSpecPipe } from 'src/types'\nimport { datasetYX } from '../dataset'\n\nexport const playerYX: VChartSpecPipe = (spec, context) => {\n  const { vseed, advancedVSeed } = context\n  const { datasetReshapeInfo, chartType } = advancedVSeed\n  const baseConfig = advancedVSeed.config[chartType] as { player: Player }\n  const result = datasetYX(spec, context)\n\n  if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) {\n    return result\n  }\n  const { player } = baseConfig\n\n  const id = datasetReshapeInfo[0].id\n  const {\n    field,\n    autoPlay = true,\n    interval = 1000,\n    loop = false,\n    position,\n    railColor,\n    trackColor,\n    sliderHandleColor,\n    sliderHandleBorderColor,\n    startButtonColor,\n    pauseButtonColor,\n    backwardButtonColor,\n    forwardButtonColor,\n  } = player\n\n  const dataGroups = groupBy(advancedVSeed.dataset, (item) => item[field])\n  if (result.data && 'values' in result.data) {\n    result.data.values = []\n  }\n  const specs = Object.values(dataGroups).map((items) => ({\n    data: {\n      id: id,\n      values: items.slice(0, 10),\n    },\n  }))\n\n  const duration = interval\n  const exchangeDuration = interval * 0.6\n  return {\n    ...result,\n    stackCornerRadius: undefined,\n    animationUpdate: {\n      bar: [\n        {\n          type: 'update',\n          options: { excludeChannels: ['y'] },\n          easing: 'linear',\n          duration,\n        },\n        {\n          channel: ['y'],\n          easing: 'circInOut',\n          duration: exchangeDuration,\n        },\n      ],\n      axis: {\n        duration: exchangeDuration,\n        easing: 'circInOut',\n      },\n    },\n    animationEnter: {\n      bar: [\n        {\n          type: 'moveIn',\n          duration: exchangeDuration,\n          easing: 'circInOut',\n          options: {\n            direction: 'y',\n            orient: 'negative',\n          },\n        },\n      ],\n    },\n    animationExit: {\n      bar: [\n        {\n          type: 'fadeOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    customMark: [\n      {\n        type: 'text',\n        dataId: 'year',\n        style: {\n          textBaseline: 'bottom',\n          fontSize: 24,\n          textAlign: 'right',\n          fontFamily: 'PingFang SC',\n          fontWeight: 600,\n          text: (datum: any) => datum.year,\n          x: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.width - 50\n          },\n          y: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.height - 50\n          },\n          fill: 'grey',\n          fillOpacity: 0.5,\n        },\n      },\n    ],\n    player: {\n      visible: true,\n      auto: autoPlay,\n      interval: interval,\n      loop: loop,\n      alternate: false,\n      position: 'middle',\n      orient: position,\n      type: 'discrete',\n      specs,\n      controller: {\n        visible: true,\n        start: { visible: true, order: 0, style: { fill: startButtonColor } },\n        pause: { visible: true, order: 1, style: { fill: pauseButtonColor } },\n        backward: { visible: true, order: 2, style: { fill: backwardButtonColor } },\n        forward: { visible: true, order: 3, position: 'end', style: { fill: forwardButtonColor } },\n      },\n      slider: {\n        visible: true,\n        railStyle: {\n          visible: true,\n          fill: railColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        trackStyle: {\n          visible: true,\n          fill: trackColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        handlerStyle: {\n          visible: true,\n          lineWidth: 2,\n          stroke: sliderHandleBorderColor,\n          fill: sliderHandleColor,\n          size: 9,\n        },\n      },\n    } as IPlayerSpec,\n  } as unknown as ISpec\n}\n"],"names":["playerYX","spec","context","vseed","advancedVSeed","datasetReshapeInfo","chartType","baseConfig","result","datasetYX","isVTable","isPivotChart","player","id","field","autoPlay","interval","loop","position","railColor","trackColor","sliderHandleColor","sliderHandleBorderColor","startButtonColor","pauseButtonColor","backwardButtonColor","forwardButtonColor","dataGroups","groupBy","item","specs","Object","items","duration","exchangeDuration","undefined","datum","ctx"],"mappings":";;;AAMO,MAAMA,WAA2B,CAACC,MAAMC;IAC7C,MAAM,EAAEC,KAAK,EAAEC,aAAa,EAAE,GAAGF;IACjC,MAAM,EAAEG,kBAAkB,EAAEC,SAAS,EAAE,GAAGF;IAC1C,MAAMG,aAAaH,cAAc,MAAM,CAACE,UAAU;IAClD,MAAME,SAASC,UAAUR,MAAMC;IAE/B,IAAI,CAAE,aAAYC,KAAI,KAAM,CAACI,cAAc,CAACA,WAAW,MAAM,IAAIG,SAASP,UAAUQ,aAAaR,QAC/F,OAAOK;IAET,MAAM,EAAEI,MAAM,EAAE,GAAGL;IAEnB,MAAMM,KAAKR,kBAAkB,CAAC,EAAE,CAAC,EAAE;IACnC,MAAM,EACJS,KAAK,EACLC,WAAW,IAAI,EACfC,WAAW,IAAI,EACfC,OAAO,KAAK,EACZC,QAAQ,EACRC,SAAS,EACTC,UAAU,EACVC,iBAAiB,EACjBC,uBAAuB,EACvBC,gBAAgB,EAChBC,gBAAgB,EAChBC,mBAAmB,EACnBC,kBAAkB,EACnB,GAAGd;IAEJ,MAAMe,aAAaC,QAAQxB,cAAc,OAAO,EAAE,CAACyB,OAASA,IAAI,CAACf,MAAM;IACvE,IAAIN,OAAO,IAAI,IAAI,YAAYA,OAAO,IAAI,EACxCA,OAAO,IAAI,CAAC,MAAM,GAAG,EAAE;IAEzB,MAAMsB,QAAQC,OAAO,MAAM,CAACJ,YAAY,GAAG,CAAC,CAACK,QAAW;YACtD,MAAM;gBACJ,IAAInB;gBACJ,QAAQmB,MAAM,KAAK,CAAC,GAAG;YACzB;QACF;IAEA,MAAMC,WAAWjB;IACjB,MAAMkB,mBAAmBlB,AAAW,MAAXA;IACzB,OAAO;QACL,GAAGR,MAAM;QACT,mBAAmB2B;QACnB,iBAAiB;YACf,KAAK;gBACH;oBACE,MAAM;oBACN,SAAS;wBAAE,iBAAiB;4BAAC;yBAAI;oBAAC;oBAClC,QAAQ;oBACRF;gBACF;gBACA;oBACE,SAAS;wBAAC;qBAAI;oBACd,QAAQ;oBACR,UAAUC;gBACZ;aACD;YACD,MAAM;gBACJ,UAAUA;gBACV,QAAQ;YACV;QACF;QACA,gBAAgB;YACd,KAAK;gBACH;oBACE,MAAM;oBACN,UAAUA;oBACV,QAAQ;oBACR,SAAS;wBACP,WAAW;wBACX,QAAQ;oBACV;gBACF;aACD;QACH;QACA,eAAe;YACb,KAAK;gBACH;oBACE,MAAM;oBACN,UAAUA;gBACZ;aACD;QACH;QACA,YAAY;YACV;gBACE,MAAM;gBACN,QAAQ;gBACR,OAAO;oBACL,cAAc;oBACd,UAAU;oBACV,WAAW;oBACX,YAAY;oBACZ,YAAY;oBACZ,MAAM,CAACE,QAAeA,MAAM,IAAI;oBAChC,GAAG,CAACA,OAAYC,MACPA,IAAI,MAAM,CAAC,QAAQ,GAAG,aAAa,IAAI,QAAQ;oBAExD,GAAG,CAACD,OAAYC,MACPA,IAAI,MAAM,CAAC,QAAQ,GAAG,aAAa,IAAI,SAAS;oBAEzD,MAAM;oBACN,aAAa;gBACf;YACF;SACD;QACD,QAAQ;YACN,SAAS;YACT,MAAMtB;YACN,UAAUC;YACV,MAAMC;YACN,WAAW;YACX,UAAU;YACV,QAAQC;YACR,MAAM;YACNY;YACA,YAAY;gBACV,SAAS;gBACT,OAAO;oBAAE,SAAS;oBAAM,OAAO;oBAAG,OAAO;wBAAE,MAAMP;oBAAiB;gBAAE;gBACpE,OAAO;oBAAE,SAAS;oBAAM,OAAO;oBAAG,OAAO;wBAAE,MAAMC;oBAAiB;gBAAE;gBACpE,UAAU;oBAAE,SAAS;oBAAM,OAAO;oBAAG,OAAO;wBAAE,MAAMC;oBAAoB;gBAAE;gBAC1E,SAAS;oBAAE,SAAS;oBAAM,OAAO;oBAAG,UAAU;oBAAO,OAAO;wBAAE,MAAMC;oBAAmB;gBAAE;YAC3F;YACA,QAAQ;gBACN,SAAS;gBACT,WAAW;oBACT,SAAS;oBACT,MAAMP;oBACN,CAACD,AAAa,UAAbA,YAAsBA,AAAa,aAAbA,WAAwB,WAAW,QAAQ,EAAE;gBACtE;gBACA,YAAY;oBACV,SAAS;oBACT,MAAME;oBACN,CAACF,AAAa,UAAbA,YAAsBA,AAAa,aAAbA,WAAwB,WAAW,QAAQ,EAAE;gBACtE;gBACA,cAAc;oBACZ,SAAS;oBACT,WAAW;oBACX,QAAQI;oBACR,MAAMD;oBACN,MAAM;gBACR;YACF;QACF;IACF;AACF"}
+{"version":3,"file":"pipeline/spec/chart/pipes/player/playerYX.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/player/playerYX.ts"],"sourcesContent":["import type { IPlayerSpec, ISpec } from '@visactor/vchart'\nimport { groupBy, uniqueBy } from 'remeda'\nimport { isPivotChart, isVTable } from 'src/pipeline/utils'\nimport type { Player, VChartSpecPipe } from 'src/types'\nimport { datasetYX } from '../dataset'\n\nexport const playerYX: VChartSpecPipe = (spec, context) => {\n  const { vseed, advancedVSeed } = context\n  const { dimensions = [], datasetReshapeInfo, chartType, encoding } = advancedVSeed\n\n  const baseConfig = advancedVSeed.config[chartType] as { player: Player }\n  const result = datasetYX(spec, context)\n\n  if (!baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) {\n    return result\n  }\n  const { player } = baseConfig\n  const id = datasetReshapeInfo[0].id\n  const { unfoldInfo, foldInfo } = datasetReshapeInfo[0]\n  const { encodingPlayer, encodingY } = unfoldInfo\n  const { measureValue } = foldInfo\n  const {\n    maxCount,\n    autoPlay = true,\n    interval = 1000,\n    loop = false,\n    position,\n    railColor,\n    trackColor,\n    sliderHandleColor,\n    sliderHandleBorderColor,\n    startButtonColor,\n    pauseButtonColor,\n    backwardButtonColor,\n    forwardButtonColor,\n  } = player\n  const duration = interval\n  const exchangeDuration = interval * 0.6\n\n  const dataGroups = groupBy(advancedVSeed.dataset, (item) => item[encodingPlayer])\n  if (result.data && 'values' in result.data) {\n    result.data.values = []\n  }\n\n  const yValues = uniqueBy(\n    advancedVSeed.dataset.map((d) => d[encodingY]),\n    (item) => item,\n  )\n  const specs = Object.values(dataGroups).map((items) => {\n    // 如果当前items中不存在yValues中的值, 则填充为0, 保证每组都有同样的yValue, 都有对应的数据\n    const filledItems = items.map((item) => ({\n      ...item,\n      [encodingY]: yValues.find((yValue) => yValue === item[encodingY]) || 0,\n    }))\n    const sortedItems = filledItems.sort((a, b) => b[measureValue] - a[measureValue])\n\n    return {\n      data: {\n        id: id,\n        values: sortedItems.slice(0, maxCount),\n      },\n    }\n  })\n\n  const dataKey = dimensions.filter((d) => !encoding.player?.includes(d.id)).map((d) => d.id)\n  const textSize = 36\n  const padding = 12\n\n  return {\n    ...result,\n    dataKey,\n    stackCornerRadius: undefined,\n    animationUpdate: {\n      bar: [\n        {\n          type: 'update',\n          options: { excludeChannels: ['y'] },\n          easing: 'linear',\n          duration,\n        },\n        {\n          channel: ['y'],\n          easing: 'circInOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    animationEnter: {\n      bar: [\n        {\n          type: 'moveIn',\n          duration: exchangeDuration,\n          easing: 'circInOut',\n          options: {\n            direction: 'y',\n            orient: 'negative',\n          },\n        },\n      ],\n    },\n    animationExit: {\n      bar: [\n        {\n          type: 'moveOut',\n          options: {\n            direction: 'x',\n          },\n          duration: exchangeDuration,\n        },\n        {\n          type: 'moveOut',\n          options: {\n            direction: 'y',\n            orient: 'negative',\n          },\n          duration: exchangeDuration,\n        },\n        {\n          type: 'fadeOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    customMark: [\n      {\n        type: 'text',\n        dataId: 'year',\n        style: {\n          textBaseline: 'bottom',\n          fontSize: textSize,\n          textAlign: 'right',\n          fontFamily: 'PingFang SC',\n          fontWeight: 600,\n          text: (datum: any) => datum[encodingPlayer],\n          x: (_datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.width - padding\n          },\n          y: (_datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.height - padding - textSize\n          },\n          fill: 'rgb(100, 100, 100)',\n          fillOpacity: 0.25,\n        },\n      },\n    ],\n    player: {\n      visible: true,\n      auto: autoPlay,\n      interval: interval,\n      loop: loop,\n      alternate: false,\n      position: 'middle',\n      orient: position,\n      type: 'discrete',\n      specs,\n      controller: {\n        visible: true,\n        start: { visible: true, order: 0, style: { fill: startButtonColor } },\n        pause: { visible: true, order: 1, style: { fill: pauseButtonColor } },\n        backward: { visible: true, order: 2, style: { fill: backwardButtonColor } },\n        forward: { visible: true, order: 3, position: 'end', style: { fill: forwardButtonColor } },\n      },\n      slider: {\n        visible: true,\n        railStyle: {\n          visible: true,\n          fill: railColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        trackStyle: {\n          visible: true,\n          fill: trackColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        handlerStyle: {\n          visible: true,\n          lineWidth: 2,\n          stroke: sliderHandleBorderColor,\n          fill: sliderHandleColor,\n          size: 9,\n        },\n      },\n    } as IPlayerSpec,\n  } as unknown as ISpec\n}\n"],"names":["playerYX","spec","context","vseed","advancedVSeed","dimensions","datasetReshapeInfo","chartType","encoding","baseConfig","result","datasetYX","isVTable","isPivotChart","player","id","unfoldInfo","foldInfo","encodingPlayer","encodingY","measureValue","maxCount","autoPlay","interval","loop","position","railColor","trackColor","sliderHandleColor","sliderHandleBorderColor","startButtonColor","pauseButtonColor","backwardButtonColor","forwardButtonColor","duration","exchangeDuration","dataGroups","groupBy","item","yValues","uniqueBy","d","specs","Object","items","filledItems","yValue","sortedItems","a","b","dataKey","textSize","padding","undefined","datum","_datum","ctx"],"mappings":"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"}

package/dist/esm/pipeline/spec/chart/pipes/player/playerYY.js

@@ -3,14 +3,16 @@ import { isPivotChart, isVTable } from "../../../../utils/index.js";
 import { datasetScatter } from "../dataset/index.js";
 const playerYY = (spec, context)=>{
     const { vseed, advancedVSeed } = context;
-    const { datasetReshapeInfo, chartType, encoding } = advancedVSeed;
+    const { datasetReshapeInfo, dimensions = [], chartType, encoding } = advancedVSeed;
     const baseConfig = advancedVSeed.config[chartType];
     const result = datasetScatter(spec, context);
-    if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) return result;
+    if (!baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) return result;
     const { player } = baseConfig;
     const id = datasetReshapeInfo[0].id;
-    const { field, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
-    const dataGroups = groupBy(advancedVSeed.dataset, (item)=>item[field]);
+    const { unfoldInfo } = datasetReshapeInfo[0];
+    const { encodingPlayer } = unfoldInfo;
+    const { autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
+    const dataGroups = groupBy(advancedVSeed.dataset, (item)=>item[encodingPlayer]);
     if (result.data && 'values' in result.data) result.data.values = [];
     const specs = Object.values(dataGroups).map((items)=>({
             data: {
@@ -18,9 +20,11 @@ const playerYY = (spec, context)=>{
                 values: items
             }
         }));
-    const dataKey = encoding.color;
     const duration = interval;
     const exchangeDuration = 0.6 * interval;
+    const dataKey = dimensions.filter((d)=>!encoding.player?.includes(d.id)).map((d)=>d.id);
+    const padding = 12;
+    const textSize = 36;
     return {
         ...result,
         dataKey,
@@ -91,13 +95,13 @@ const playerYY = (spec, context)=>{
                 dataId: 'year',
                 style: {
                     textBaseline: 'bottom',
-                    fontSize: 24,
+                    fontSize: textSize,
                     textAlign: 'right',
                     fontFamily: 'PingFang SC',
                     fontWeight: 600,
-                    text: (datum)=>datum.year,
-                    x: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.width - 50,
-                    y: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.height - 50,
+                    text: (datum)=>datum[encodingPlayer],
+                    x: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.width - padding,
+                    y: (datum, ctx)=>ctx.vchart.getChart().getCanvasRect()?.height - padding - textSize,
                     fill: 'grey',
                     fillOpacity: 0.5
                 }

package/dist/esm/pipeline/spec/chart/pipes/player/playerYY.js.map

@@ -1 +1 @@
-{"version":3,"file":"pipeline/spec/chart/pipes/player/playerYY.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/player/playerYY.ts"],"sourcesContent":["import type { IPlayerSpec, ISpec } from '@visactor/vchart'\nimport { groupBy } from 'remeda'\nimport { isPivotChart, isVTable } from 'src/pipeline/utils'\nimport type { Player, VChartSpecPipe } from 'src/types'\nimport { datasetScatter } from '../dataset'\n\nexport const playerYY: VChartSpecPipe = (spec, context) => {\n  const { vseed, advancedVSeed } = context\n  const { datasetReshapeInfo, chartType, encoding } = advancedVSeed\n  const baseConfig = advancedVSeed.config[chartType] as { player: Player }\n  const result = datasetScatter(spec, context)\n\n  if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) {\n    return result\n  }\n  const { player } = baseConfig\n\n  const id = datasetReshapeInfo[0].id\n  const {\n    field,\n    autoPlay = true,\n    interval = 1000,\n    loop = false,\n    position,\n    railColor,\n    trackColor,\n    sliderHandleColor,\n    sliderHandleBorderColor,\n    startButtonColor,\n    pauseButtonColor,\n    backwardButtonColor,\n    forwardButtonColor,\n  } = player\n\n  const dataGroups = groupBy(advancedVSeed.dataset, (item) => item[field])\n  if (result.data && 'values' in result.data) {\n    result.data.values = []\n  }\n  const specs = Object.values(dataGroups).map((items) => ({\n    data: {\n      id: id,\n      values: items,\n    },\n  }))\n\n  const dataKey = encoding.color\n  const duration = interval\n  const exchangeDuration = interval * 0.6\n  return {\n    ...result,\n    dataKey,\n    stackCornerRadius: undefined,\n    animationUpdate: {\n      bar: [\n        {\n          type: 'update',\n          options: { excludeChannels: ['x'] },\n          easing: 'linear',\n          duration,\n        },\n        {\n          channel: ['x'],\n          easing: 'circInOut',\n          duration: exchangeDuration,\n        },\n      ],\n      point: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      line: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      axis: {\n        duration: exchangeDuration,\n        easing: 'circInOut',\n      },\n    },\n    animationEnter: {\n      bar: [\n        {\n          type: 'moveIn',\n          duration: exchangeDuration,\n          easing: 'circInOut',\n          options: {\n            direction: 'x',\n            orient: 'negative',\n          },\n        },\n      ],\n    },\n    animationExit: {\n      bar: [\n        {\n          type: 'fadeOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    customMark: [\n      {\n        type: 'text',\n        dataId: 'year',\n        style: {\n          textBaseline: 'bottom',\n          fontSize: 24,\n          textAlign: 'right',\n          fontFamily: 'PingFang SC',\n          fontWeight: 600,\n          text: (datum: any) => datum.year,\n          x: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.width - 50\n          },\n          y: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.height - 50\n          },\n          fill: 'grey',\n          fillOpacity: 0.5,\n        },\n      },\n    ],\n    player: {\n      visible: true,\n      auto: autoPlay,\n      interval: interval,\n      loop: loop,\n      alternate: false,\n      position: 'middle',\n      orient: position,\n      type: 'discrete',\n      specs,\n      controller: {\n        visible: true,\n        start: { visible: true, order: 0, style: { fill: startButtonColor } },\n        pause: { visible: true, order: 1, style: { fill: pauseButtonColor } },\n        backward: { visible: true, order: 2, style: { fill: backwardButtonColor } },\n        forward: { visible: true, order: 3, position: 'end', style: { fill: forwardButtonColor } },\n      },\n      slider: {\n        visible: true,\n        railStyle: {\n          visible: true,\n          fill: railColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        trackStyle: {\n          visible: true,\n          fill: trackColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        handlerStyle: {\n          visible: true,\n          lineWidth: 2,\n          stroke: sliderHandleBorderColor,\n          fill: sliderHandleColor,\n          size: 9,\n        },\n      },\n    } as IPlayerSpec,\n  } as unknown as ISpec\n}\n"],"names":["playerYY","spec","context","vseed","advancedVSeed","datasetReshapeInfo","chartType","encoding","baseConfig","result","datasetScatter","isVTable","isPivotChart","player","id","field","autoPlay","interval","loop","position","railColor","trackColor","sliderHandleColor","sliderHandleBorderColor","startButtonColor","pauseButtonColor","backwardButtonColor","forwardButtonColor","dataGroups","groupBy","item","specs","Object","items","dataKey","duration","exchangeDuration","undefined","datum","ctx"],"mappings":"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"}
+{"version":3,"file":"pipeline/spec/chart/pipes/player/playerYY.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/player/playerYY.ts"],"sourcesContent":["import type { IPlayerSpec, ISpec } from '@visactor/vchart'\nimport { groupBy } from 'remeda'\nimport { isPivotChart, isVTable } from 'src/pipeline/utils'\nimport type { Player, VChartSpecPipe } from 'src/types'\nimport { datasetScatter } from '../dataset'\n\nexport const playerYY: VChartSpecPipe = (spec, context) => {\n  const { vseed, advancedVSeed } = context\n  const { datasetReshapeInfo, dimensions = [], chartType, encoding } = advancedVSeed\n  const baseConfig = advancedVSeed.config[chartType] as { player: Player }\n  const result = datasetScatter(spec, context)\n\n  if (!baseConfig || !baseConfig.player || isVTable(vseed) || isPivotChart(vseed)) {\n    return result\n  }\n  const { player } = baseConfig\n\n  const id = datasetReshapeInfo[0].id\n  const { unfoldInfo } = datasetReshapeInfo[0]\n  const { encodingPlayer } = unfoldInfo\n  const {\n    autoPlay = true,\n    interval = 1000,\n    loop = false,\n    position,\n    railColor,\n    trackColor,\n    sliderHandleColor,\n    sliderHandleBorderColor,\n    startButtonColor,\n    pauseButtonColor,\n    backwardButtonColor,\n    forwardButtonColor,\n  } = player\n\n  const dataGroups = groupBy(advancedVSeed.dataset, (item) => item[encodingPlayer])\n  if (result.data && 'values' in result.data) {\n    result.data.values = []\n  }\n  const specs = Object.values(dataGroups).map((items) => ({\n    data: {\n      id: id,\n      values: items,\n    },\n  }))\n\n  const duration = interval\n  const exchangeDuration = interval * 0.6\n  const dataKey = dimensions.filter((d) => !encoding.player?.includes(d.id)).map((d) => d.id)\n  const padding = 12\n  const textSize = 36\n  return {\n    ...result,\n    dataKey,\n    stackCornerRadius: undefined,\n    animationUpdate: {\n      bar: [\n        {\n          type: 'update',\n          options: { excludeChannels: ['x'] },\n          easing: 'linear',\n          duration,\n        },\n        {\n          channel: ['x'],\n          easing: 'circInOut',\n          duration: exchangeDuration,\n        },\n      ],\n      point: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      line: [\n        {\n          type: 'update',\n          easing: 'linear',\n          duration,\n        },\n      ],\n      axis: {\n        duration: exchangeDuration,\n        easing: 'circInOut',\n      },\n    },\n    animationEnter: {\n      bar: [\n        {\n          type: 'moveIn',\n          duration: exchangeDuration,\n          easing: 'circInOut',\n          options: {\n            direction: 'x',\n            orient: 'negative',\n          },\n        },\n      ],\n    },\n    animationExit: {\n      bar: [\n        {\n          type: 'fadeOut',\n          duration: exchangeDuration,\n        },\n      ],\n    },\n    customMark: [\n      {\n        type: 'text',\n        dataId: 'year',\n        style: {\n          textBaseline: 'bottom',\n          fontSize: textSize,\n          textAlign: 'right',\n          fontFamily: 'PingFang SC',\n          fontWeight: 600,\n          text: (datum: any) => datum[encodingPlayer],\n          x: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.width - padding\n          },\n          y: (datum: any, ctx: any) => {\n            return ctx.vchart.getChart().getCanvasRect()?.height - padding - textSize\n          },\n          fill: 'grey',\n          fillOpacity: 0.5,\n        },\n      },\n    ],\n    player: {\n      visible: true,\n      auto: autoPlay,\n      interval: interval,\n      loop: loop,\n      alternate: false,\n      position: 'middle',\n      orient: position,\n      type: 'discrete',\n      specs,\n      controller: {\n        visible: true,\n        start: { visible: true, order: 0, style: { fill: startButtonColor } },\n        pause: { visible: true, order: 1, style: { fill: pauseButtonColor } },\n        backward: { visible: true, order: 2, style: { fill: backwardButtonColor } },\n        forward: { visible: true, order: 3, position: 'end', style: { fill: forwardButtonColor } },\n      },\n      slider: {\n        visible: true,\n        railStyle: {\n          visible: true,\n          fill: railColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        trackStyle: {\n          visible: true,\n          fill: trackColor,\n          [position === 'top' || position === 'bottom' ? 'height' : 'width']: 2,\n        },\n        handlerStyle: {\n          visible: true,\n          lineWidth: 2,\n          stroke: sliderHandleBorderColor,\n          fill: sliderHandleColor,\n          size: 9,\n        },\n      },\n    } as IPlayerSpec,\n  } as unknown as ISpec\n}\n"],"names":["playerYY","spec","context","vseed","advancedVSeed","datasetReshapeInfo","dimensions","chartType","encoding","baseConfig","result","datasetScatter","isVTable","isPivotChart","player","id","unfoldInfo","encodingPlayer","autoPlay","interval","loop","position","railColor","trackColor","sliderHandleColor","sliderHandleBorderColor","startButtonColor","pauseButtonColor","backwardButtonColor","forwardButtonColor","dataGroups","groupBy","item","specs","Object","items","duration","exchangeDuration","dataKey","d","padding","textSize","undefined","datum","ctx"],"mappings":"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"}

package/dist/esm/pipeline/spec/chart/pipes/tooltip/index.d.ts

@@ -4,3 +4,4 @@ export { tooltipScatter } from './tooltipScatter';
 export { tooltipHeatmap } from './tooltipHeatmap';
 export { tooltipBoxplot } from './tooltipBoxplot';
 export { tooltipHistogram } from './tooltipHistogram';
+export { tooltipHierarchy } from './tooltipHierarchy';

package/dist/esm/pipeline/spec/chart/pipes/tooltip/index.js

@@ -4,4 +4,5 @@ import { tooltipScatter } from "./tooltipScatter.js";
 import { tooltipHeatmap } from "./tooltipHeatmap.js";
 import { tooltipBoxplot } from "./tooltipBoxplot.js";
 import { tooltipHistogram } from "./tooltipHistogram.js";
-export { tooltip, tooltipBoxplot, tooltipDualAxis, tooltipHeatmap, tooltipHistogram, tooltipOfDualAxisSeries, tooltipScatter };
+import { tooltipHierarchy } from "./tooltipHierarchy.js";
+export { tooltip, tooltipBoxplot, tooltipDualAxis, tooltipHeatmap, tooltipHierarchy, tooltipHistogram, tooltipOfDualAxisSeries, tooltipScatter };

package/dist/esm/pipeline/spec/chart/pipes/tooltip/tooltipHierarchy.d.ts

@@ -0,0 +1,2 @@
+import type { VChartSpecPipe } from '../../../../../types';
+export declare const tooltipHierarchy: VChartSpecPipe;

package/dist/esm/pipeline/spec/chart/pipes/tooltip/tooltipHierarchy.js

@@ -0,0 +1,84 @@
+import { tooltip as external_tooltip_js_tooltip } from "./tooltip.js";
+import { pipe, uniqueBy } from "remeda";
+import { createFormatterByMeasure, findMeasureById } from "../../../../utils/index.js";
+const tooltipHierarchy = (spec, context)=>{
+    const result = external_tooltip_js_tooltip(spec, context);
+    const { advancedVSeed, vseed } = context;
+    const { datasetReshapeInfo, dimensions = [], encoding } = advancedVSeed;
+    const { foldInfo, unfoldInfo } = datasetReshapeInfo[0];
+    if (result.tooltip) {
+        if (!result.tooltip.mark) result.tooltip.mark = {};
+        result.tooltip.mark = {
+            title: {
+                visible: true,
+                value: (val)=>val?.datum?.map((data)=>data.name).join(' / ')
+            },
+            content: createMarkContent(encoding.tooltip || [], dimensions, vseed.measures, foldInfo, unfoldInfo)
+        };
+    }
+    return result;
+};
+const createMarkContent = (tooltip, dimensions = [], measures = [], foldInfo, unfoldInfo)=>{
+    const dims = pipe(dimensions.filter((item)=>tooltip.includes(item.id)), uniqueBy((item)=>item.id), uniqueBy((item)=>item.alias), uniqueBy((item)=>item.alias));
+    const meas = pipe(measures.filter((item)=>tooltip.includes(item.id)), uniqueBy((item)=>item.id), uniqueBy((item)=>item.alias));
+    const dimContent = dims.map((item)=>({
+            visible: (datum)=>!!datum[item.id],
+            hasShape: true,
+            shapeType: 'rectRound',
+            key: (v)=>{
+                const datum = v;
+                if (item.alias || item.id) return item.alias || item.id;
+                return datum && datum[item.id];
+            },
+            value: (v)=>{
+                const datum = v;
+                return datum && datum[item.id];
+            }
+        }));
+    const defaultContent = {
+        visible: true,
+        hasShape: true,
+        shapeType: 'rectRound',
+        key: (v)=>{
+            const { measureName } = foldInfo;
+            const { encodingColor: colorName } = unfoldInfo;
+            const datum = v;
+            return datum && datum[measureName || colorName] || '';
+        },
+        value: (v)=>{
+            const { measureId, measureValue } = foldInfo;
+            const datum = v;
+            if (!datum) return '';
+            const value = datum[measureValue];
+            const id = datum[measureId];
+            const measure = findMeasureById(measures, id);
+            if (!measure) return String(value);
+            const formatter = createFormatterByMeasure(measure);
+            return formatter(value);
+        }
+    };
+    const meaContent = meas.map((item)=>({
+            visible: true,
+            hasShape: true,
+            shapeType: 'rectRound',
+            key: item.alias || item.id,
+            value: (v)=>{
+                const datum = v;
+                if (!datum) return '';
+                const id = item.id;
+                if (!datum) return '';
+                const value = datum[id];
+                const measure = findMeasureById(measures, id);
+                const formatter = createFormatterByMeasure(measure);
+                return formatter(value);
+            }
+        }));
+    return [
+        ...dimContent,
+        defaultContent,
+        ...meaContent
+    ];
+};
+export { tooltipHierarchy };
+
+//# sourceMappingURL=tooltipHierarchy.js.map

package/dist/esm/pipeline/spec/chart/pipes/tooltip/tooltipHierarchy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pipeline/spec/chart/pipes/tooltip/tooltipHierarchy.js","sources":["webpack://@visactor/vseed/./src/pipeline/spec/chart/pipes/tooltip/tooltipHierarchy.ts"],"sourcesContent":["import type { Datum, FoldInfo, HierarchyDimension, HierarchyMeasure, UnfoldInfo, VChartSpecPipe } from 'src/types'\nimport { tooltip as commonTooltip } from './tooltip'\nimport { pipe, uniqueBy } from 'remeda'\nimport { createFormatterByMeasure, findMeasureById } from 'src/pipeline/utils'\n\nexport const tooltipHierarchy: VChartSpecPipe = (spec, context) => {\n  // Reuse common tooltip logic\n  const result = commonTooltip(spec, context)\n  const { advancedVSeed, vseed } = context\n  const { datasetReshapeInfo, dimensions = [], encoding } = advancedVSeed\n  const { foldInfo, unfoldInfo } = datasetReshapeInfo[0]\n\n  if (result.tooltip) {\n    if (!result.tooltip.mark) {\n      result.tooltip.mark = {}\n    }\n\n    result.tooltip.mark = {\n      title: {\n        visible: true,\n        value: (val: any) => {\n          return val?.datum?.map((data: any) => data.name).join(' / ')\n        },\n      },\n      content: createMarkContent(\n        encoding.tooltip || [],\n        dimensions as HierarchyDimension[],\n        vseed.measures as HierarchyMeasure[],\n        foldInfo,\n        unfoldInfo,\n      ),\n    }\n  }\n\n  return result\n}\n\nconst createMarkContent = (\n  tooltip: string[],\n  dimensions: HierarchyDimension[] = [],\n  measures: HierarchyMeasure[] = [],\n  foldInfo: FoldInfo,\n  unfoldInfo: UnfoldInfo,\n) => {\n  const dims = pipe(\n    dimensions.filter((item) => tooltip.includes(item.id)),\n    uniqueBy((item: HierarchyDimension) => item.id),\n    uniqueBy((item: HierarchyDimension) => item.alias),\n    uniqueBy((item: HierarchyDimension) => item.alias),\n  )\n  const meas = pipe(\n    measures.filter((item) => tooltip.includes(item.id)),\n    uniqueBy((item: HierarchyMeasure) => item.id),\n    uniqueBy((item: HierarchyMeasure) => item.alias),\n  )\n\n  const dimContent = dims.map((item: HierarchyDimension) => ({\n    visible: (datum: Datum) => {\n      return !!datum[item.id]\n    },\n    hasShape: true,\n    shapeType: 'rectRound',\n    key: (v: unknown) => {\n      const datum = v as Datum\n      if (item.alias || item.id) {\n        return item.alias || item.id\n      }\n      return datum && (datum[item.id] as string)\n    },\n    value: (v: unknown) => {\n      const datum = v as Datum\n      return datum && (datum[item.id] as string)\n    },\n  }))\n\n  const defaultContent = {\n    visible: true,\n    hasShape: true,\n    shapeType: 'rectRound',\n    key: (v: unknown) => {\n      const { measureName } = foldInfo\n      const { encodingColor: colorName } = unfoldInfo\n\n      const datum = v as Datum\n      return (datum && (datum[measureName || colorName] as string)) || ''\n    },\n    value: (v: unknown) => {\n      const { measureId, measureValue } = foldInfo\n\n      const datum = v as Datum\n      if (!datum) {\n        return ''\n      }\n      const value = datum[measureValue] as string | number\n      const id = datum[measureId] as string\n      const measure = findMeasureById(measures, id)\n      if (!measure) {\n        return String(value)\n      }\n\n      const formatter = createFormatterByMeasure(measure)\n      return formatter(value)\n    },\n  }\n\n  const meaContent = meas.map((item: HierarchyMeasure) => ({\n    visible: true,\n    hasShape: true,\n    shapeType: 'rectRound',\n    key: item.alias || item.id,\n    value: (v: unknown) => {\n      const datum = v as Datum\n      if (!datum) {\n        return ''\n      }\n      const id = item.id\n      if (!datum) {\n        return ''\n      }\n      const value = datum[id] as string | number\n      const measure = findMeasureById(measures, id)\n      const formatter = createFormatterByMeasure(measure)\n      return formatter(value)\n    },\n  }))\n\n  return [...dimContent, defaultContent, ...meaContent] as object[]\n}\n"],"names":["tooltipHierarchy","spec","context","result","commonTooltip","advancedVSeed","vseed","datasetReshapeInfo","dimensions","encoding","foldInfo","unfoldInfo","val","data","createMarkContent","tooltip","measures","dims","pipe","item","uniqueBy","meas","dimContent","datum","v","defaultContent","measureName","colorName","measureId","measureValue","value","id","measure","findMeasureById","String","formatter","createFormatterByMeasure","meaContent"],"mappings":"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"}

package/dist/esm/pipeline/spec/chart/pipes/{player/playerXLinear.d.ts → tooltip/tooltipTreeMap.d.ts}

@@ -1,2 +1,2 @@
 import type { VChartSpecPipe } from '../../../../../types';
-export declare const playerXLinear: VChartSpecPipe;
+export declare const tooltipTreeMap: VChartSpecPipe;

package/dist/esm/pipeline/spec/chart/pipes/tooltip/tooltipTreeMap.js

@@ -0,0 +1,93 @@
+import { tooltip as external_tooltip_js_tooltip } from "./tooltip.js";
+import { pipe, uniqueBy } from "remeda";
+import { createFormatterByMeasure, findMeasureById } from "../../../../utils/index.js";
+const tooltipTreeMap = (spec, context)=>{
+    const result = external_tooltip_js_tooltip(spec, context);
+    const { advancedVSeed, vseed } = context;
+    const { datasetReshapeInfo, dimensions = [], encoding } = advancedVSeed;
+    const { foldInfo, unfoldInfo } = datasetReshapeInfo[0];
+    if (result.tooltip) {
+        if (!result.tooltip.mark) result.tooltip.mark = {};
+        result.tooltip.mark = {
+            title: {
+                visible: true,
+                value: (val)=>val?.datum?.map((data)=>data.name).join(' / ')
+            },
+            content: createMarkContent(encoding.tooltip || [], dimensions, vseed.measures, foldInfo, unfoldInfo)
+        };
+    }
+    return result;
+};
+const createMarkContent = (tooltip, dimensions = [], measures = [], foldInfo, unfoldInfo)=>{
+    const dims = pipe(dimensions.filter((item)=>tooltip.includes(item.id)), uniqueBy((item)=>item.id), uniqueBy((item)=>item.alias), uniqueBy((item)=>item.alias));
+    const meas = pipe(measures.filter((item)=>tooltip.includes(item.id)), uniqueBy((item)=>item.id), uniqueBy((item)=>item.alias));
+    const dimContent = dims.map((item)=>({
+            visible: (v)=>{
+                const { depth } = v;
+                const datum = v?.datum[depth];
+                return !!datum[item.id];
+            },
+            hasShape: true,
+            shapeType: 'rectRound',
+            key: (v)=>{
+                const { depth } = v;
+                const datum = v?.datum[depth];
+                if (item.alias || item.id) return item.alias || item.id;
+                return datum && datum[item.id];
+            },
+            value: (v)=>{
+                const { depth } = v;
+                const datum = v?.datum[depth];
+                return datum && datum[item.id];
+            }
+        }));
+    const defaultContent = {
+        visible: true,
+        hasShape: true,
+        shapeType: 'rectRound',
+        key: (v)=>{
+            const { depth } = v;
+            const datum = v?.datum[depth];
+            const { measureName } = foldInfo;
+            const { encodingColor: colorName } = unfoldInfo;
+            return datum && datum[measureName || colorName] || '';
+        },
+        value: (v)=>{
+            const { depth } = v;
+            const datum = v?.datum[depth];
+            const { measureId, measureValue } = foldInfo;
+            if (!datum) return '';
+            const value = datum[measureValue];
+            const id = datum[measureId];
+            const measure = findMeasureById(measures, id);
+            if (!measure) return String(value);
+            const formatter = createFormatterByMeasure(measure);
+            return formatter(value);
+        }
+    };
+    const meaContent = meas.map((item)=>({
+            visible: true,
+            hasShape: true,
+            shapeType: 'rectRound',
+            key: item.alias || item.id,
+            value: (v)=>{
+                const { depth } = v;
+                const datum = v?.datum[depth];
+                if (!datum) return '';
+                const id = item.id;
+                if (!datum) return '';
+                const value = datum[id];
+                const measure = findMeasureById(measures, id);
+                const formatter = createFormatterByMeasure(measure);
+                return formatter(value);
+            }
+        }));
+    return [
+        ...dimContent,
+        defaultContent,
+        ...meaContent
+    ];
+};
+export { tooltipTreeMap };
+
+//# sourceMappingURL=tooltipTreeMap.js.map