@visactor/vseed 0.3.10 → 0.3.11

package/dist/esm/types/zVseed.d.ts

@@ -1940,6 +1940,20 @@ export declare const zVSeed: z.ZodDiscriminatedUnion<[z.ZodObject<{
         field: z.ZodString;
         interval: z.ZodOptional<z.ZodNumber>;
         autoPlay: z.ZodOptional<z.ZodBoolean>;
+        loop: z.ZodOptional<z.ZodBoolean>;
+        position: z.ZodOptional<z.ZodEnum<{
+            left: "left";
+            top: "top";
+            right: "right";
+            bottom: "bottom";
+        }>>;
+        railColor: z.ZodOptional<z.ZodString>;
+        trackColor: z.ZodOptional<z.ZodString>;
+        sliderHandleColor: z.ZodOptional<z.ZodString>;
+        startButtonColor: z.ZodOptional<z.ZodString>;
+        pauseButtonColor: z.ZodOptional<z.ZodString>;
+        backwardButtonColor: z.ZodOptional<z.ZodString>;
+        forwardButtonColor: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
     backgroundColor: z.ZodOptional<z.ZodNullable<z.ZodOptional<z.ZodNullable<z.ZodDefault<z.ZodString>>>>>;
     color: z.ZodOptional<z.ZodNullable<z.ZodObject<{
@@ -3176,6 +3190,20 @@ export declare const zVSeed: z.ZodDiscriminatedUnion<[z.ZodObject<{
         field: z.ZodString;
         interval: z.ZodOptional<z.ZodNumber>;
         autoPlay: z.ZodOptional<z.ZodBoolean>;
+        loop: z.ZodOptional<z.ZodBoolean>;
+        position: z.ZodOptional<z.ZodEnum<{
+            left: "left";
+            top: "top";
+            right: "right";
+            bottom: "bottom";
+        }>>;
+        railColor: z.ZodOptional<z.ZodString>;
+        trackColor: z.ZodOptional<z.ZodString>;
+        sliderHandleColor: z.ZodOptional<z.ZodString>;
+        startButtonColor: z.ZodOptional<z.ZodString>;
+        pauseButtonColor: z.ZodOptional<z.ZodString>;
+        backwardButtonColor: z.ZodOptional<z.ZodString>;
+        forwardButtonColor: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>>;
     backgroundColor: z.ZodOptional<z.ZodNullable<z.ZodOptional<z.ZodNullable<z.ZodDefault<z.ZodString>>>>>;
     color: z.ZodOptional<z.ZodNullable<z.ZodObject<{

package/dist/umd/index.js

@@ -2703,11 +2703,12 @@
                 'yAxis',
                 'crosshairLine',
                 'brush',
-                'dimensionLinkage'
+                'dimensionLinkage',
+                'player'
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -2903,12 +2904,13 @@
         };
         const playerAdapter = (pipe)=>(spec, context)=>{
                 const { vseed, advancedVSeed } = context;
-                const { datasetReshapeInfo } = advancedVSeed;
-                const { player } = vseed;
-                if (!player || isVTable(vseed) || chatType_isPivotChart(vseed)) return pipe(spec, context);
+                const { datasetReshapeInfo, chartType } = advancedVSeed;
+                const baseConfig = advancedVSeed.config[chartType];
+                const { player } = baseConfig;
+                if (!player || !baseConfig || isVTable(vseed) || chatType_isPivotChart(vseed)) return pipe(spec, context);
                 const id = datasetReshapeInfo[0].id;
                 const nextSpec = pipe(spec, context);
-                const { field, autoPlay = true, interval = 1000, loop = false } = player;
+                const { field, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
                 const dataGroups = chunk_HVPVHFDT_i(advancedVSeed.dataset, (item)=>item[field]);
                 const specs = Object.values(dataGroups).map((items)=>({
                         data: {
@@ -2924,8 +2926,52 @@
                         loop: loop,
                         alternate: false,
                         position: 'middle',
+                        orient: position,
                         type: 'discrete',
-                        specs
+                        specs,
+                        controller: {
+                            visible: true,
+                            start: {
+                                visible: true,
+                                style: {
+                                    fill: startButtonColor
+                                }
+                            },
+                            pause: {
+                                visible: true,
+                                style: {
+                                    fill: pauseButtonColor
+                                }
+                            },
+                            backward: {
+                                visible: true,
+                                style: {
+                                    fill: backwardButtonColor
+                                }
+                            },
+                            forward: {
+                                visible: true,
+                                style: {
+                                    fill: forwardButtonColor
+                                }
+                            }
+                        },
+                        slider: {
+                            visible: true,
+                            railStyle: {
+                                visible: true,
+                                fill: railColor
+                            },
+                            trackStyle: {
+                                visible: true,
+                                fill: trackColor
+                            },
+                            handlerStyle: {
+                                visible: true,
+                                fill: sliderHandleColor,
+                                lineWidth: 1
+                            }
+                        }
                     }
                 };
             };
@@ -5903,11 +5949,12 @@
                 'barMaxWidth',
                 'barGapInGroup',
                 'brush',
-                'dimensionLinkage'
+                'dimensionLinkage',
+                'player'
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -6816,11 +6863,12 @@
                 'label',
                 'legend',
                 'tooltip',
+                'player',
                 'brush'
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -8107,12 +8155,13 @@
                 'sizeRange',
                 'size',
                 'crosshairLine',
+                'player',
                 'brush',
                 'dimensionLinkage'
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -9253,7 +9302,7 @@
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -11012,11 +11061,12 @@
                 'xAxis',
                 'yAxis',
                 'brush',
-                'dimensionLinkage'
+                'dimensionLinkage',
+                'player'
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -11317,7 +11367,7 @@
             ]);
             const config = replaceNullToUndefined(pickedConfig);
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -12178,7 +12228,7 @@
                 }
             };
             result.config = {
-                ...result.config || {},
+                ...result.config,
                 [chartType]: {
                     ...config
                 }
@@ -13488,6 +13538,40 @@
             res.hoverHeaderInlineBackgroundColor = '#4b4f5446';
             return res;
         };
+        const getDarkPlayer = ()=>{
+            const primaryColor = getDarkColorScheme()[0];
+            const railColor = getDarkColorLegend().railBackgroundColor;
+            return {
+                interval: 1000,
+                loop: false,
+                autoPlay: true,
+                position: 'bottom',
+                railColor,
+                trackColor: primaryColor,
+                sliderHandleColor: primaryColor,
+                startButtonColor: primaryColor,
+                pauseButtonColor: primaryColor,
+                backwardButtonColor: primaryColor,
+                forwardButtonColor: primaryColor
+            };
+        };
+        const getLightPlayer = ()=>{
+            const primaryColor = getLightColorScheme()[0];
+            const railColor = getLightColorLegend().railBackgroundColor;
+            return {
+                interval: 1000,
+                loop: false,
+                autoPlay: true,
+                position: 'bottom',
+                railColor,
+                trackColor: primaryColor,
+                sliderHandleColor: primaryColor,
+                startButtonColor: primaryColor,
+                pauseButtonColor: primaryColor,
+                backwardButtonColor: primaryColor,
+                forwardButtonColor: primaryColor
+            };
+        };
         const getDefaultTooltip = ()=>({
                 enable: true,
                 borderRadius: 12,
@@ -13906,6 +13990,7 @@
                 brush: getLightBrushConfig()
             };
             const tableConfig = getLightTableConfig();
+            const player = getLightPlayer();
             return {
                 config: {
                     table: tableConfig,
@@ -13915,6 +14000,7 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairLine,
+                        player,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation()
                     },
@@ -13923,6 +14009,7 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairRect,
+                        player,
                         stackCornerRadius: [
                             4,
                             4,
@@ -13938,6 +14025,7 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairRect,
+                        player,
                         stackCornerRadius: [
                             4,
                             4,
@@ -13953,6 +14041,7 @@
                         yAxis: {
                             ...linearAxis
                         },
+                        player,
                         crosshairRect,
                         stackCornerRadius: [
                             4,
@@ -13968,6 +14057,7 @@
                         xAxis: linearAxis,
                         yAxis: barBandAxis,
                         crosshairRect,
+                        player,
                         stackCornerRadius: [
                             0,
                             4,
@@ -13998,6 +14088,7 @@
                         },
                         yAxis: barBandAxis,
                         crosshairRect,
+                        player,
                         stackCornerRadius: [
                             0,
                             4,
@@ -14012,6 +14103,7 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairLine,
+                        player,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation()
                     },
@@ -14021,6 +14113,7 @@
                         yAxis: {
                             ...linearAxis
                         },
+                        player,
                         crosshairLine,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation()
@@ -14051,6 +14144,7 @@
                             showValue: false,
                             showValuePercent: false
                         },
+                        player,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation(),
                         regressionLine: getLightRegressionLine()
@@ -14077,6 +14171,7 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
+                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     donut: {
@@ -14087,10 +14182,12 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
+                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     radar: {
                         ...baseConfig,
+                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     rose: {
@@ -14100,6 +14197,7 @@
                             showValuePercent: true,
                             showDimension: true
                         },
+                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     roseParallel: {
@@ -14109,12 +14207,14 @@
                             showValuePercent: true,
                             showDimension: true
                         },
+                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     funnel: {
                         ...baseConfig,
                         label: getFunnelLightLabel(),
                         transform: getLightFunnelTransformTheme(),
+                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     heatmap: {
@@ -14126,6 +14226,7 @@
                             ...baseConfig.label,
                             labelColorSmartInvert: true
                         },
+                        player,
                         cell: getLightHeatmapCellTheme(),
                         pivotGrid: getLightPivotChartGridConfig()
                     },
@@ -14177,6 +14278,7 @@
                 tooltip: getDarkTooltip(),
                 brush: getDarkBrushConfig()
             };
+            const player = getDarkPlayer();
             const tableConfig = getDarkTableConfig();
             return {
                 config: {
@@ -14187,6 +14289,7 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairLine: crosshairLine,
+                        player,
                         pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation()
                     },
@@ -14203,6 +14306,7 @@
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation(),
+                        player,
                         regressionLine: getDarkRegressionLine()
                     },
                     columnParallel: {
@@ -14217,7 +14321,8 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     columnPercent: {
                         ...baseConfig,
@@ -14231,7 +14336,8 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     bar: {
                         ...baseConfig,
@@ -14245,7 +14351,8 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     barParallel: {
                         ...baseConfig,
@@ -14259,7 +14366,8 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     barPercent: {
                         ...baseConfig,
@@ -14273,7 +14381,8 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     area: {
                         ...baseConfig,
@@ -14281,7 +14390,8 @@
                         yAxis: linearAxis,
                         crosshairLine: crosshairLine,
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     areaPercent: {
                         ...baseConfig,
@@ -14289,7 +14399,8 @@
                         yAxis: linearAxis,
                         crosshairLine: crosshairLine,
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation()
+                        annotation: getDarkAnnotation(),
+                        player
                     },
                     scatter: {
                         ...baseConfig,
@@ -14319,7 +14430,8 @@
                         },
                         pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation(),
-                        regressionLine: getDarkRegressionLine()
+                        regressionLine: getDarkRegressionLine(),
+                        player
                     },
                     dualAxis: {
                         ...baseConfig,
@@ -14343,7 +14455,8 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig()
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        player
                     },
                     donut: {
                         ...baseConfig,
@@ -14353,11 +14466,13 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig()
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        player
                     },
                     radar: {
                         ...baseConfig,
-                        pivotGrid: getDarkPivotChartGridConfig()
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        player
                     },
                     rose: {
                         ...baseConfig,
@@ -14366,7 +14481,8 @@
                             showValuePercent: true,
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig()
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        player
                     },
                     roseParallel: {
                         ...baseConfig,
@@ -14375,13 +14491,15 @@
                             showValuePercent: true,
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig()
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        player
                     },
                     funnel: {
                         ...baseConfig,
                         label: getFunnelDarkLabel(),
                         transform: getDarkFunnelTransformTheme(),
-                        pivotGrid: getDarkPivotChartGridConfig()
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        player
                     },
                     heatmap: {
                         ...baseConfig,
@@ -14392,6 +14510,7 @@
                             ...baseConfig.label,
                             labelColorSmartInvert: true
                         },
+                        player,
                         cell: getDarkHeatmapCellTheme(),
                         pivotGrid: getDarkPivotChartGridConfig()
                     },
@@ -18630,6 +18749,25 @@
             inBrushStyle: zBrushStyleConfig.optional(),
             outOfBrushStyle: zBrushStyleConfig.optional()
         });
+        const zPlayer = schemas_object({
+            field: schemas_string(),
+            interval: schemas_number().optional(),
+            autoPlay: schemas_boolean().optional(),
+            loop: schemas_boolean().optional(),
+            position: schemas_enum([
+                'top',
+                'bottom',
+                'left',
+                'right'
+            ]).optional(),
+            railColor: schemas_string().optional(),
+            trackColor: schemas_string().optional(),
+            sliderHandleColor: schemas_string().optional(),
+            startButtonColor: schemas_string().optional(),
+            pauseButtonColor: schemas_string().optional(),
+            backwardButtonColor: schemas_string().optional(),
+            forwardButtonColor: schemas_string().optional()
+        });
         const zLineConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
             label: zLabel.nullish(),
@@ -18642,7 +18780,8 @@
             pivotGrid: zPivotChartGridConfig.nullish(),
             annotation: zAnnotationConfig.nullish(),
             dimensionLinkage: zDimensionLinkage.nullish(),
-            brush: zBrushConfig.nullish()
+            brush: zBrushConfig.nullish(),
+            player: zPlayer.nullish()
         });
         const zStackCornerRadius = schemas_number().or(schemas_array(schemas_number())).default([
             3,
@@ -18691,6 +18830,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
@@ -18712,6 +18852,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             xAxis: zXLinearAxis.nullish(),
             yAxis: zYBandAxis.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
@@ -18729,6 +18870,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairLine: zCrosshairLine.nullish(),
@@ -18744,6 +18886,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             xAxis: zXLinearAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairLine: zCrosshairLine.nullish(),
@@ -18783,6 +18926,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish(),
             cornerRadius: schemas_number().nullish(),
             brush: zBrushConfig.nullish()
@@ -18795,6 +18939,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zRoseParallelConfig = zRoseConfig;
@@ -18808,6 +18953,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
+            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish(),
             transform: zFunnelTransform.nullish()
         });
@@ -18823,6 +18969,7 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zColorLegend.nullish(),
+            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish(),
             cell: zHeatmapCell.nullish(),
             xAxis: zXBandAxis.nullish(),
@@ -19092,11 +19239,6 @@
             field: schemas_string(),
             currentValue: schemas_string()
         });
-        const zPlayer = schemas_object({
-            field: schemas_string(),
-            interval: schemas_number().optional(),
-            autoPlay: schemas_boolean().optional()
-        });
         const zLocale = schemas_enum([
             'zh-CN',
             'en-US'