@visactor/vseed 0.3.13 → 0.3.15

package/dist/umd/index.js

@@ -42,6 +42,7 @@
             selectByValue: ()=>selectByValue,
             zAnnotationPointConfig: ()=>zAnnotationPointConfig,
             columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
+            raceColumnSpecPipeline: ()=>raceColumnSpecPipeline,
             zColumnConfig: ()=>zColumnConfig,
             zDualMeasure: ()=>zDualMeasure,
             DEFAULT_PARENT_ID: ()=>DEFAULT_PARENT_ID,
@@ -124,6 +125,7 @@
             zAnnotationHorizontalLineConfig: ()=>zAnnotationHorizontalLineConfig,
             columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
             zAnnotationPoint: ()=>zAnnotationPoint,
+            zRaceColumn: ()=>zRaceColumn,
             DATUM_HIDE_KEY: ()=>DATUM_HIDE_KEY,
             isMeasure: ()=>isMeasure,
             FoldSecondaryMeasureValue: ()=>FoldSecondaryMeasureValue,
@@ -154,8 +156,8 @@
             boxplotSpecPipeline: ()=>boxplotSpecPipeline,
             autoNumFormatter: ()=>autoNumFormatter,
             tableSpecPipeline: ()=>tableSpecPipeline,
-            zConfig: ()=>zConfig,
             isCombination: ()=>isCombination,
+            zConfig: ()=>zConfig,
             zBarStyle: ()=>zBarStyle,
             deleteDimensionTreeByCallback: ()=>deleteDimensionTreeByCallback,
             zRoseParallelConfig: ()=>zRoseParallelConfig,
@@ -177,14 +179,14 @@
             Q3MeasureValue: ()=>"__Q3__",
             createFormatter: ()=>createFormatter,
             registerBoxPlot: ()=>registerBoxPlot,
-            BAND_AXIS_INNER_OFFSET_IN_PIVOT: ()=>2,
             selectByPartial: ()=>selectByPartial,
             columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
-            zBarConfig: ()=>zBarConfig,
             isMeasureSelector: ()=>isMeasureSelector,
+            zBarConfig: ()=>zBarConfig,
             areaAdvancedPipeline: ()=>areaAdvancedPipeline,
             areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
             barParallelSpecPipeline: ()=>barParallelSpecPipeline,
+            BAND_AXIS_INNER_OFFSET_IN_PIVOT: ()=>2,
             zPie: ()=>zPie,
             zBar: ()=>zBar,
             pieAdvancedPipeline: ()=>pieAdvancedPipeline,
@@ -209,6 +211,7 @@
             Separator: ()=>"-",
             zDimensionLinkage: ()=>zDimensionLinkage,
             findAllMeasures: ()=>findAllMeasures,
+            raceBarSpecPipeline: ()=>raceBarSpecPipeline,
             zColorLegend: ()=>zColorLegend,
             UpperWhisker: ()=>UpperWhisker,
             EncodingEnum: ()=>EncodingEnum,
@@ -218,9 +221,11 @@
             zRoseParallel: ()=>zRoseParallel,
             MeasureName: ()=>MeasureName,
             hasMultipleMeasureInSingleView: ()=>hasMultipleMeasureInSingleView,
+            raceScatterSpecPipeline: ()=>raceScatterSpecPipeline,
             selectorDatum: ()=>selectorDatum,
-            zRegressionLine: ()=>zRegressionLine,
             zNumFormat: ()=>zNumFormat,
+            zRaceBar: ()=>zRaceBar,
+            zRegressionLine: ()=>zRegressionLine,
             FoldYMeasureValue: ()=>FoldYMeasureValue,
             zPivotTableConfig: ()=>zPivotTableConfig,
             zArea: ()=>zArea,
@@ -286,6 +291,7 @@
             zAnnotationArea: ()=>zAnnotationArea,
             DetailEncoding: ()=>DetailEncoding,
             isPivot: ()=>chatType_isPivot,
+            raceScatterAdvancedPipeline: ()=>raceScatterAdvancedPipeline,
             zPlayer: ()=>zPlayer,
             zPointStyle: ()=>zPointStyle,
             zDimension: ()=>zDimension,
@@ -293,6 +299,7 @@
             registerColumnParallel: ()=>registerColumnParallel,
             updateAdvanced: ()=>updateAdvanced,
             histogramAdvancedPipeline: ()=>histogramAdvancedPipeline,
+            condition: ()=>condition_condition,
             isAreaPercent: ()=>isAreaPercent,
             zColumn: ()=>zColumn,
             zCustomTheme: ()=>zCustomTheme,
@@ -304,6 +311,7 @@
             radarAdvancedPipeline: ()=>radarAdvancedPipeline,
             registerDualAxis: ()=>registerDualAxis,
             zBoxPlot: ()=>zBoxPlot,
+            zRaceScatter: ()=>zRaceScatter,
             registerBarParallel: ()=>registerBarParallel,
             pivotTableSpecPipeline: ()=>pivotTableSpecPipeline,
             DUAL_AXIS_LABEL_Z_INDEX: ()=>1002,
@@ -332,7 +340,9 @@
             dataReshapeByEncoding: ()=>dataReshapeByEncoding,
             lineSpecPipeline: ()=>lineSpecPipeline,
             deleteMeasureTreeByCallback: ()=>deleteMeasureTreeByCallback,
+            raceBarAdvancedPipeline: ()=>raceBarAdvancedPipeline,
             zDimensionGroup: ()=>zDimensionGroup,
+            raceColumnAdvancedPipeline: ()=>raceColumnAdvancedPipeline,
             isPositionMeasure: ()=>isPositionMeasure
         });
         const execPipeline = (pipeline, context, initialValue = {})=>{
@@ -540,6 +550,9 @@
             ColumnPercent: 'columnPercent',
             ColumnParallel: 'columnParallel',
             Bar: 'bar',
+            RaceBar: 'raceBar',
+            RaceColumn: 'raceColumn',
+            RaceScatter: 'raceScatter',
             BarPercent: 'barPercent',
             BarParallel: 'barParallel',
             Area: 'area',
@@ -611,7 +624,7 @@
         const isAreaPercent = (vseed)=>vseed.chartType === ChartTypeEnum.AreaPercent;
         const isColumnPercent = (vseed)=>vseed.chartType === ChartTypeEnum.ColumnPercent;
         const isBarPercent = (vseed)=>vseed.chartType === ChartTypeEnum.BarPercent;
-        const isBarLikeChart = (vseed)=>vseed.chartType === ChartTypeEnum.Bar || vseed.chartType === ChartTypeEnum.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
+        const isBarLikeChart = (vseed)=>vseed.chartType === ChartTypeEnum.Bar || vseed.chartType === ChartTypeEnum.RaceBar || vseed.chartType === ChartTypeEnum.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
         const isVTable = (vseed)=>[
                 'table',
                 'pivotTable'
@@ -657,6 +670,9 @@
         };
         const isRectungularCoordinate = (chartType)=>[
                 ChartTypeEnum.Bar,
+                ChartTypeEnum.RaceBar,
+                ChartTypeEnum.RaceColumn,
+                ChartTypeEnum.RaceScatter,
                 ChartTypeEnum.BarPercent,
                 ChartTypeEnum.BarParallel,
                 ChartTypeEnum.Column,
@@ -2886,105 +2902,6 @@
                 background: backgroundColor
             };
         };
-        function chunk_HVPVHFDT_i(...e) {
-            return chunk_WIMGWYZL_u(chunk_HVPVHFDT_p, e);
-        }
-        var chunk_HVPVHFDT_p = (e, d)=>{
-            let r = Object.create(null);
-            for(let n = 0; n < e.length; n++){
-                let t = e[n], y = d(t, n, e);
-                if (void 0 !== y) {
-                    let o = r[y];
-                    void 0 === o ? r[y] = [
-                        t
-                    ] : o.push(t);
-                }
-            }
-            return Object.setPrototypeOf(r, Object.prototype), r;
-        };
-        const playerAdapter = (pipe)=>(spec, context)=>{
-                const { vseed, advancedVSeed } = context;
-                const { datasetReshapeInfo, chartType } = advancedVSeed;
-                const baseConfig = advancedVSeed.config[chartType];
-                if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || chatType_isPivotChart(vseed)) return pipe(spec, context);
-                const { player } = baseConfig;
-                const id = datasetReshapeInfo[0].id;
-                const nextSpec = pipe(spec, context);
-                const { field, autoPlay = true, interval = 1000, loop = false, position, railColor, trackColor, sliderHandleColor, sliderHandleBorderColor, startButtonColor, pauseButtonColor, backwardButtonColor, forwardButtonColor } = player;
-                const dataGroups = chunk_HVPVHFDT_i(advancedVSeed.dataset, (item)=>item[field]);
-                const specs = Object.values(dataGroups).map((items)=>({
-                        data: {
-                            id: id,
-                            values: items
-                        }
-                    }));
-                return {
-                    ...nextSpec,
-                    player: {
-                        visible: true,
-                        auto: autoPlay,
-                        interval: interval,
-                        loop: loop,
-                        alternate: false,
-                        position: 'middle',
-                        orient: position,
-                        type: 'discrete',
-                        specs,
-                        controller: {
-                            visible: true,
-                            start: {
-                                visible: true,
-                                order: 0,
-                                style: {
-                                    fill: startButtonColor
-                                }
-                            },
-                            pause: {
-                                visible: true,
-                                order: 1,
-                                style: {
-                                    fill: pauseButtonColor
-                                }
-                            },
-                            backward: {
-                                visible: true,
-                                order: 2,
-                                style: {
-                                    fill: backwardButtonColor
-                                }
-                            },
-                            forward: {
-                                visible: true,
-                                order: 3,
-                                position: 'end',
-                                style: {
-                                    fill: forwardButtonColor
-                                }
-                            }
-                        },
-                        slider: {
-                            visible: true,
-                            railStyle: {
-                                visible: true,
-                                fill: railColor,
-                                ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
-                            },
-                            trackStyle: {
-                                visible: true,
-                                fill: trackColor,
-                                ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
-                            },
-                            handlerStyle: {
-                                visible: true,
-                                lineWidth: 2,
-                                stroke: sliderHandleBorderColor,
-                                fill: sliderHandleColor,
-                                size: 9
-                            }
-                        }
-                    }
-                };
-            };
         const datasetXY = (spec, context)=>{
             const { advancedVSeed, vseed } = context;
             const { analysis, datasetReshapeInfo } = advancedVSeed;
@@ -5815,7 +5732,7 @@
             initLine,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             xBand,
             yLinear,
@@ -6805,7 +6722,7 @@
             stackInverse,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             xBand,
             yLinear,
@@ -7014,7 +6931,7 @@
             barGapInGroup_barGapInGroup,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             xBand,
             yLinear,
@@ -7114,7 +7031,7 @@
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent_percent,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             xBand,
             yLinear,
@@ -7471,7 +7388,7 @@
             barMaxWidth_barMaxWidth,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetYX),
+            datasetYX,
             progressive,
             xLinear,
             yBand,
@@ -7524,77 +7441,203 @@
             Builder.registerAdvancedPipeline('bar', barAdvancedPipeline);
             Builder.registerSpecPipeline('bar', barSpecPipeline);
         };
-        const barParallelAdvancedPipeline = [
-            page_page_page,
-            initAdvancedVSeed_initAdvancedVSeed,
-            default_defaultMeasures_defaultMeasures,
-            defaultDimensions_defaultDimensions,
-            defaultMeasureId_defaultMeasureId,
-            encodingAdapter([
-                buildMeasures([
-                    'xAxis',
-                    'detail'
-                ]),
-                defaultEncodingForBar
-            ], [
-                buildMeasures([
-                    'xAxis',
-                    'detail'
-                ]),
-                encodingForBar,
-                pickDimensionsForReshape
-            ]),
-            pivotAdapter([
-                reshapeWithEncoding
-            ], [
-                pivotReshapeWithEncoding
-            ]),
-            sortYBandAxis,
-            sortLegend_sortLegend,
-            barParallelConfig,
-            theme_theme,
-            markStyle_markStyle,
-            annotation_annotation
-        ];
-        const initBarParallel = (spec, context)=>{
-            const result = {
-                ...spec
-            };
-            const { advancedVSeed } = context;
-            const { datasetReshapeInfo, encoding } = advancedVSeed;
-            const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
-            const sameDimensionsMode = chunk_HGKLN5KY_k(encoding.y, encoding.color);
-            result.type = 'bar';
-            result.direction = 'horizontal';
-            result.yField = [
-                unfoldInfo.encodingY
-            ];
-            if (!sameDimensionsMode) {
-                result.yField.push(unfoldInfo.encodingDetail);
-                if (encoding.detail?.[0] === MeasureId && encoding.x?.length === 1) result.yField.pop();
+        const raceBarAdvancedPipeline = barAdvancedPipeline;
+        function chunk_HVPVHFDT_i(...e) {
+            return chunk_WIMGWYZL_u(chunk_HVPVHFDT_p, e);
+        }
+        var chunk_HVPVHFDT_p = (e, d)=>{
+            let r = Object.create(null);
+            for(let n = 0; n < e.length; n++){
+                let t = e[n], y = d(t, n, e);
+                if (void 0 !== y) {
+                    let o = r[y];
+                    void 0 === o ? r[y] = [
+                        t
+                    ] : o.push(t);
+                }
             }
-            result.xField = foldInfo.measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
-            result.padding = 0;
-            result.region = [
-                {
-                    clip: true
+            return Object.setPrototypeOf(r, Object.prototype), r;
+        };
+        const playerYX = (spec, context)=>{
+            const { vseed, advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const result = datasetYX(spec, context);
+            if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || chatType_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 = chunk_HVPVHFDT_i(advancedVSeed.dataset, (item)=>item[field]);
+            if (result.data && 'values' in result.data) result.data.values = [];
+            const specs = Object.values(dataGroups).map((items)=>({
+                    data: {
+                        id: id,
+                        values: items.slice(0, 10)
+                    }
+                }));
+            const duration = interval;
+            const exchangeDuration = 0.6 * interval;
+            return {
+                ...result,
+                stackCornerRadius: void 0,
+                animationUpdate: {
+                    bar: [
+                        {
+                            type: 'update',
+                            options: {
+                                excludeChannels: [
+                                    'y'
+                                ]
+                            },
+                            easing: 'linear',
+                            duration
+                        },
+                        {
+                            channel: [
+                                'y'
+                            ],
+                            easing: 'circInOut',
+                            duration: exchangeDuration
+                        }
+                    ],
+                    axis: {
+                        duration: exchangeDuration,
+                        easing: 'circInOut'
+                    }
+                },
+                animationEnter: {
+                    bar: [
+                        {
+                            type: 'moveIn',
+                            duration: exchangeDuration,
+                            easing: 'circInOut',
+                            options: {
+                                direction: 'y',
+                                orient: 'negative'
+                            }
+                        }
+                    ]
+                },
+                animationExit: {
+                    bar: [
+                        {
+                            type: 'fadeOut',
+                            duration: exchangeDuration
+                        }
+                    ]
+                },
+                customMark: [
+                    {
+                        type: 'text',
+                        dataId: 'year',
+                        style: {
+                            textBaseline: 'bottom',
+                            fontSize: 24,
+                            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
+                        }
+                    }
+                ],
+                player: {
+                    visible: true,
+                    auto: autoPlay,
+                    interval: interval,
+                    loop: loop,
+                    alternate: false,
+                    position: 'middle',
+                    orient: position,
+                    type: 'discrete',
+                    specs,
+                    controller: {
+                        visible: true,
+                        start: {
+                            visible: true,
+                            order: 0,
+                            style: {
+                                fill: startButtonColor
+                            }
+                        },
+                        pause: {
+                            visible: true,
+                            order: 1,
+                            style: {
+                                fill: pauseButtonColor
+                            }
+                        },
+                        backward: {
+                            visible: true,
+                            order: 2,
+                            style: {
+                                fill: backwardButtonColor
+                            }
+                        },
+                        forward: {
+                            visible: true,
+                            order: 3,
+                            position: 'end',
+                            style: {
+                                fill: forwardButtonColor
+                            }
+                        }
+                    },
+                    slider: {
+                        visible: true,
+                        railStyle: {
+                            visible: true,
+                            fill: railColor,
+                            ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
+                        },
+                        trackStyle: {
+                            visible: true,
+                            fill: trackColor,
+                            ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
+                        },
+                        handlerStyle: {
+                            visible: true,
+                            lineWidth: 2,
+                            stroke: sliderHandleBorderColor,
+                            fill: sliderHandleColor,
+                            size: 9
+                        }
+                    }
                 }
-            ];
-            result.animation = true;
+            };
+        };
+        const playerXLinear = (spec, context)=>{
+            const result = xLinear(spec, context);
+            const linearAxis = result.axes?.find((axis)=>axis?.type === 'linear');
+            if (linearAxis) {
+                linearAxis.animation = true;
+                linearAxis.nice = false;
+                if (linearAxis.tick) linearAxis.tick.tickStep = 10000;
+            }
             return result;
         };
-        const barParallel = [
-            initBarParallel,
+        const playerYBand = (spec, context)=>{
+            const result = yBand(spec, context);
+            const bandAxis = result.axes?.find((axis)=>axis?.type === 'band');
+            if (bandAxis) {
+                bandAxis.animation = true;
+                bandAxis.width = '15%';
+            }
+            return result;
+        };
+        const raceBar = [
+            initBar,
             stackCornerRadius_stackCornerRadius,
             barMaxWidth_barMaxWidth,
-            barGapInGroup_barGapInGroup,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetYX),
+            playerYX,
             progressive,
-            xLinear,
-            yBand,
+            playerXLinear,
+            playerYBand,
             label_label,
             brush_brush,
             tooltip_tooltip,
@@ -7606,86 +7649,203 @@
             annotationHorizontalLine_annotationHorizontalLine,
             annotationAreaBand
         ];
-        const pivotBarParallel = [
-            initPivot,
-            pivotGridStyle,
-            pivotIndicatorsAsCol,
-            datasetPivot,
-            pivotIndicators_pivotIndicators([
-                initBarParallel,
-                stackCornerRadius_stackCornerRadius,
-                barMaxWidth_barMaxWidth,
-                colorAdapter(color_color, linearColor),
-                background_backgroundColor,
-                datasetYX,
-                xLinear,
-                pivotAxisStyle(yBand),
-                brush_brush,
-                label_label,
-                tooltip_tooltip,
-                colorBarStyleFill(barStyle_barStyle),
-                horizontalCrosshairRect,
-                annotationPoint_annotationPoint,
-                annotationVerticalLine_annotationVerticalLine,
-                annotationHorizontalLine_annotationHorizontalLine,
-                annotationAreaBand
-            ]),
-            pivotRowDimensions,
-            pivotColumnDimensions,
-            pivotTitle,
-            colorAdapter(pivotDiscreteLegend, pivotColorLegend),
-            dimensionLinkage
-        ];
-        const barParallelSpecPipeline = [
-            pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
-        ];
-        const registerBarParallel = ()=>{
-            Builder.registerAdvancedPipeline('barParallel', barParallelAdvancedPipeline);
-            Builder.registerSpecPipeline('barParallel', barParallelSpecPipeline);
+        const raceBarSpecPipeline = raceBar;
+        const registerRaceBar = ()=>{
+            Builder.registerAdvancedPipeline('raceBar', raceBarAdvancedPipeline);
+            Builder.registerSpecPipeline('raceBar', raceBarSpecPipeline);
         };
-        const barPercentAdvancedPipeline = [
-            page_page_page,
-            initAdvancedVSeed_initAdvancedVSeed,
-            default_defaultMeasures_defaultMeasures,
-            defaultDimensions_defaultDimensions,
-            defaultMeasureId_defaultMeasureId,
-            encodingAdapter([
-                buildMeasures([
-                    'xAxis',
-                    'detail'
-                ]),
-                defaultEncodingForBar
-            ], [
-                buildMeasures([
-                    'xAxis',
-                    'detail'
-                ]),
-                encodingForBar,
-                pickDimensionsForReshape
-            ]),
-            pivotAdapter([
-                reshapeWithEncoding
-            ], [
-                pivotReshapeWithEncoding
-            ]),
-            sortYBandAxis,
-            sortLegend_sortLegend,
-            barPercentConfig,
-            theme_theme,
-            markStyle_markStyle,
-            annotation_annotation
-        ];
-        const barPercent = [
-            initBar,
+        const raceColumnAdvancedPipeline = columnAdvancedPipeline;
+        const playerXY = (spec, context)=>{
+            const { vseed, advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const result = datasetXY(spec, context);
+            if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || chatType_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 = chunk_HVPVHFDT_i(advancedVSeed.dataset, (item)=>item[field]);
+            if (result.data && 'values' in result.data) result.data.values = [];
+            const specs = Object.values(dataGroups).map((items)=>({
+                    data: {
+                        id: id,
+                        values: items.slice(0, 10)
+                    }
+                }));
+            const duration = interval;
+            const exchangeDuration = 0.6 * interval;
+            return {
+                ...result,
+                stackCornerRadius: void 0,
+                animationUpdate: {
+                    bar: [
+                        {
+                            type: 'update',
+                            options: {
+                                excludeChannels: [
+                                    'x'
+                                ]
+                            },
+                            easing: 'linear',
+                            duration
+                        },
+                        {
+                            channel: [
+                                'x'
+                            ],
+                            easing: 'circInOut',
+                            duration: exchangeDuration
+                        }
+                    ],
+                    point: [
+                        {
+                            type: 'update',
+                            easing: 'linear',
+                            duration
+                        }
+                    ],
+                    line: [
+                        {
+                            type: 'update',
+                            easing: 'linear',
+                            duration
+                        }
+                    ],
+                    axis: {
+                        duration: exchangeDuration,
+                        easing: 'circInOut'
+                    }
+                },
+                animationEnter: {
+                    bar: [
+                        {
+                            type: 'moveIn',
+                            duration: exchangeDuration,
+                            easing: 'circInOut',
+                            options: {
+                                direction: 'x',
+                                orient: 'negative'
+                            }
+                        }
+                    ]
+                },
+                animationExit: {
+                    bar: [
+                        {
+                            type: 'fadeOut',
+                            duration: exchangeDuration
+                        }
+                    ]
+                },
+                customMark: [
+                    {
+                        type: 'text',
+                        dataId: 'year',
+                        style: {
+                            textBaseline: 'bottom',
+                            fontSize: 24,
+                            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
+                        }
+                    }
+                ],
+                player: {
+                    visible: true,
+                    auto: autoPlay,
+                    interval: interval,
+                    loop: loop,
+                    alternate: false,
+                    position: 'middle',
+                    orient: position,
+                    type: 'discrete',
+                    specs,
+                    controller: {
+                        visible: true,
+                        start: {
+                            visible: true,
+                            order: 0,
+                            style: {
+                                fill: startButtonColor
+                            }
+                        },
+                        pause: {
+                            visible: true,
+                            order: 1,
+                            style: {
+                                fill: pauseButtonColor
+                            }
+                        },
+                        backward: {
+                            visible: true,
+                            order: 2,
+                            style: {
+                                fill: backwardButtonColor
+                            }
+                        },
+                        forward: {
+                            visible: true,
+                            order: 3,
+                            position: 'end',
+                            style: {
+                                fill: forwardButtonColor
+                            }
+                        }
+                    },
+                    slider: {
+                        visible: true,
+                        railStyle: {
+                            visible: true,
+                            fill: railColor,
+                            ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
+                        },
+                        trackStyle: {
+                            visible: true,
+                            fill: trackColor,
+                            ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
+                        },
+                        handlerStyle: {
+                            visible: true,
+                            lineWidth: 2,
+                            stroke: sliderHandleBorderColor,
+                            fill: sliderHandleColor,
+                            size: 9
+                        }
+                    }
+                }
+            };
+        };
+        const playerXBand = (spec, context)=>{
+            const result = xBand(spec, context);
+            const bandAxis = result.axes?.find((axis)=>axis?.type === 'band');
+            if (bandAxis) bandAxis.animation = true;
+            return result;
+        };
+        const playerYLinear = (spec, context)=>{
+            const result = yLinear(spec, context);
+            const linearAxis = result.axes?.find((axis)=>axis?.type === 'linear');
+            if (linearAxis) {
+                linearAxis.animation = true;
+                linearAxis.nice = false;
+                if (linearAxis.tick) linearAxis.tick.tickStep = 10000;
+            }
+            return result;
+        };
+        const raceColumn = [
+            initColumn,
             stackCornerRadius_stackCornerRadius,
             barMaxWidth_barMaxWidth,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            percent_percent,
-            playerAdapter(datasetYX),
+            playerXY,
             progressive,
-            xLinear,
-            yBand,
+            playerXBand,
+            playerYLinear,
             label_label,
             brush_brush,
             tooltip_tooltip,
@@ -7697,216 +7857,657 @@
             annotationHorizontalLine_annotationHorizontalLine,
             annotationAreaBand
         ];
-        const pivotBarPercent = [
-            initPivot,
-            pivotGridStyle,
-            pivotIndicatorsAsCol,
-            datasetPivot,
-            pivotIndicators_pivotIndicators([
-                initBar,
-                stackCornerRadius_stackCornerRadius,
-                barMaxWidth_barMaxWidth,
-                colorAdapter(color_color, linearColor),
-                background_backgroundColor,
-                percent_percent,
-                datasetYX,
-                xLinear,
-                pivotAxisStyle(yBand),
-                brush_brush,
-                label_label,
-                tooltip_tooltip,
-                colorBarStyleFill(barStyle_barStyle),
-                horizontalCrosshairRect,
-                annotationPoint_annotationPoint,
-                annotationVerticalLine_annotationVerticalLine,
-                annotationHorizontalLine_annotationHorizontalLine,
-                annotationAreaBand
-            ]),
-            pivotRowDimensions,
-            pivotColumnDimensions,
-            pivotTitle,
-            colorAdapter(pivotDiscreteLegend, pivotColorLegend),
-            dimensionLinkage
-        ];
-        const barPercentSpecPipeline = [
-            pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
-        ];
-        const registerBarPercent = ()=>{
-            Builder.registerAdvancedPipeline('barPercent', barPercentAdvancedPipeline);
-            Builder.registerSpecPipeline('barPercent', barPercentSpecPipeline);
+        const raceColumnSpecPipeline = raceColumn;
+        const registerRaceColumn = ()=>{
+            Builder.registerAdvancedPipeline('raceColumn', raceColumnAdvancedPipeline);
+            Builder.registerSpecPipeline('raceColumn', raceColumnSpecPipeline);
         };
-        const areaAdvancedPipeline = [
-            page_page_page,
-            initAdvancedVSeed_initAdvancedVSeed,
-            default_defaultMeasures_defaultMeasures,
-            defaultDimensions_defaultDimensions,
-            defaultMeasureId_defaultMeasureId,
-            encodingAdapter([
-                buildMeasures([
-                    'yAxis',
-                    'detail'
-                ]),
-                defaultEncodingForLine
-            ], [
-                buildMeasures([
-                    'yAxis',
-                    'detail'
-                ]),
-                encodingForLine,
-                pickDimensionsForReshape
-            ]),
-            pivotAdapter([
-                reshapeWithEncoding
-            ], [
-                pivotReshapeWithEncoding
-            ]),
-            sortXBandAxis,
-            sortLegend_sortLegend,
-            areaConfig,
-            theme_theme,
-            markStyle_markStyle,
-            annotation_annotation
-        ];
-        const initArea = (spec, context)=>{
-            const result = {
-                ...spec
-            };
-            const { advancedVSeed, vseed } = context;
-            const { datasetReshapeInfo } = advancedVSeed;
-            const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
-            result.type = 'area';
-            result.direction = 'vertical';
-            result.yField = foldInfo.measureValue;
-            result.xField = unfoldInfo.encodingX;
-            result.seriesField = isLinearColor(advancedVSeed, vseed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
-            result.padding = 0;
-            result.region = [
-                {
-                    clip: true
+        const buildMeasuresForScatter = (advancedVSeed)=>{
+            const { measures = [] } = advancedVSeed;
+            const encodedMeasures = [];
+            for(let index = 0; index < measures.length; index++){
+                const item = measures[index];
+                const encoding = item.encoding;
+                const isYAxis = 'yAxis' === encoding;
+                const isXAxis = 'xAxis' === encoding;
+                const isOtherEncoding = item.encoding && isCommonMeasureEncoding(encoding);
+                if (isYAxis) encodedMeasures.push(item);
+                else if (isXAxis) encodedMeasures.push(item);
+                else if (!isOtherEncoding && 'size' !== encoding) {
+                    const xCount = encodedMeasures.filter((m)=>'xAxis' === m.encoding).length;
+                    item.encoding = 0 === xCount ? 'xAxis' : 'yAxis';
+                    encodedMeasures.push(item);
                 }
-            ];
-            result.animation = true;
-            return result;
+            }
+            const xCount = encodedMeasures.filter((m)=>'xAxis' === m.encoding).length;
+            const yCount = encodedMeasures.filter((m)=>'yAxis' === m.encoding).length;
+            if (0 === yCount && xCount > 0) {
+                const cloneMeasure = chunk_BCBB46UE_d(encodedMeasures[0]);
+                cloneMeasure.encoding = 'yAxis';
+                encodedMeasures.push(cloneMeasure);
+            }
+            advancedVSeed.reshapeMeasures = encodedMeasures.length > 0 ? [
+                encodedMeasures
+            ] : [];
+            return advancedVSeed;
         };
-        const colorAreaStyleFill = (stylePipe)=>(spec, context)=>{
-                const result = stylePipe(spec, context);
-                const { advancedVSeed, vseed } = context;
-                const { datasetReshapeInfo } = advancedVSeed;
-                const { unfoldInfo } = datasetReshapeInfo[0];
-                if (isLinearColor(advancedVSeed, vseed)) {
-                    if (result?.area?.style) result.area.style.fill = {
-                        field: unfoldInfo.encodingColor,
-                        scale: 'color'
-                    };
+        const addPivotDimensionsForScatter = (advancedVSeed)=>{
+            const { reshapeMeasures = [] } = advancedVSeed;
+            if (reshapeMeasures[0]?.length >= 2) {
+                const dimensions = advancedVSeed.dimensions ?? [];
+                const xMeasures = reshapeMeasures[0].filter((m)=>'xAxis' === m.encoding);
+                const yMeasures = reshapeMeasures[0].filter((m)=>'yAxis' === m.encoding);
+                if (xMeasures.length > 1 || yMeasures.length > 1) {
+                    dimensions.push({
+                        id: FoldXMeasureId,
+                        alias: ' ',
+                        encoding: 'column'
+                    });
+                    dimensions.push({
+                        id: FoldYMeasureId,
+                        alias: ' ',
+                        encoding: 'row'
+                    });
                 }
-                return result;
+                return {
+                    ...advancedVSeed,
+                    dimensions
+                };
+            }
+            return advancedVSeed;
+        };
+        const defaultEncodingForScatter = (advancedVSeed)=>{
+            const { measures = [], dimensions = [] } = advancedVSeed;
+            const encoding = {};
+            scatter_generateDefaultDimensionEncoding(dimensions, encoding);
+            scatter_generateDefaultMeasureEncoding(measures, encoding);
+            return {
+                ...advancedVSeed,
+                encoding
             };
-        const areaStyle_areaStyle = (spec, context)=>{
-            const { advancedVSeed } = context;
-            const { markStyle, datasetReshapeInfo, dataset } = advancedVSeed;
-            const { areaStyle, lineStyle } = markStyle;
-            const { unfoldInfo } = datasetReshapeInfo[0];
+        };
+        const encodingForScatter = (advancedVSeed)=>{
+            const { measures = [], dimensions = [] } = advancedVSeed;
+            const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
+            const hasMeasureEncoding = measures.some((item)=>item.encoding);
+            const encoding = {};
+            if (hasDimensionEncoding) scatter_generateDimensionEncoding(dimensions, encoding);
+            else scatter_generateDefaultDimensionEncoding(dimensions, encoding);
+            if (hasMeasureEncoding) scatter_generateMeasureEncoding(measures, encoding);
+            else scatter_generateDefaultMeasureEncoding(measures, encoding);
+            return {
+                ...advancedVSeed,
+                encoding
+            };
+        };
+        const scatter_generateDefaultDimensionEncoding = (dimensions, encoding)=>{
+            const dimensionsWithoutMeasureId = dimensions.filter((item)=>item.id !== MeasureId);
+            const uniqueDimIds = chunk_QJLMYOTX_i(dimensionsWithoutMeasureId.map((d)=>d.id));
+            encoding.detail = encoding.color;
+            encoding.tooltip = uniqueDimIds.filter((d)=>![
+                    MeasureId,
+                    FoldYMeasureId,
+                    FoldXMeasureId
+                ].includes(d));
+            encoding.label = [];
+            encoding.row = [];
+            encoding.column = [];
+        };
+        const scatter_generateDimensionEncoding = (dimensions, encoding)=>{
+            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
+            encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
+            if (0 === encoding.detail.length) encoding.detail = [
+                MeasureId
+            ];
+            encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
+            encoding.tooltip = encoding.tooltip.filter((d)=>![
+                    MeasureId,
+                    FoldYMeasureId,
+                    FoldXMeasureId
+                ].includes(d));
+            encoding.label = chunk_QJLMYOTX_i(dimensions.filter((item)=>'label' === item.encoding).map((item)=>item.id));
+            encoding.label = encoding.label.filter((d)=>d !== MeasureId);
+        };
+        const scatter_generateDefaultMeasureEncoding = (measures, encoding)=>{
+            encoding.y = chunk_QJLMYOTX_i(measures.filter((item)=>'xAxis' === item.encoding || 'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+        };
+        const scatter_generateMeasureEncoding = (measures, encoding)=>{
+            encoding.y = chunk_QJLMYOTX_i(measures.filter((item)=>'xAxis' === item.encoding || 'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+            const color = chunk_QJLMYOTX_i(measures.filter((item)=>'color' === item.encoding).map((item)=>item.id));
+            if (color.length > 0) encoding.color = [
+                color[0]
+            ];
+            encoding.size = chunk_QJLMYOTX_i(measures.filter((item)=>'size' === item.encoding).map((item)=>item.id));
+            const label = chunk_QJLMYOTX_i(measures.filter((item)=>'label' === item.encoding).map((item)=>item.id));
+            encoding.label = chunk_QJLMYOTX_i([
+                ...encoding.label || [],
+                ...label
+            ]);
+            const tooltip = chunk_QJLMYOTX_i(measures.filter((item)=>'tooltip' === item.encoding).map((item)=>item.id));
+            encoding.tooltip = chunk_QJLMYOTX_i([
+                ...encoding.tooltip || [],
+                ...label,
+                ...tooltip,
+                ...color,
+                ...encoding.size
+            ]);
+        };
+        const scatterConfig = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const { chartType } = vseed;
             const result = {
-                ...spec,
-                area: {
-                    visible: true,
-                    style: {}
+                ...advancedVSeed
+            };
+            const pickedConfig = chunk_2T7K3PFL_i(vseed, [
+                'backgroundColor',
+                'color',
+                'label',
+                'legend',
+                'tooltip',
+                'xAxis',
+                'yAxis',
+                'sizeRange',
+                'size',
+                'crosshairLine',
+                'player',
+                'brush',
+                'dimensionLinkage'
+            ]);
+            const config = replaceNullToUndefined(pickedConfig);
+            result.config = {
+                ...result.config,
+                [chartType]: {
+                    ...config
                 }
             };
-            if (chunk_JK3VNB42_n(areaStyle) || chunk_VCYTMP4D_n(areaStyle)) return result;
-            const areaStyles = Array.isArray(areaStyle) ? areaStyle : [
-                areaStyle
-            ];
-            const lineStyles = Array.isArray(lineStyle) ? lineStyle : [
-                lineStyle
+            return result;
+        };
+        const reshapeWithScatterEncoding = (advancedVSeed, context)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { vseed } = context;
+            const { dataset } = vseed;
+            const { encoding, chartType, reshapeMeasures } = advancedVSeed;
+            const dimensions = advancedVSeed.reshapeDimensions ?? advancedVSeed.dimensions ?? [];
+            const measures = reshapeMeasures?.[0] ?? [];
+            const foldInfoList = [];
+            const unfoldInfoList = [];
+            const sizeEncodingIds = encoding?.size ?? [];
+            const datasets = [];
+            const xMeasures = measures.filter((m)=>'xAxis' === m.encoding);
+            const yMeasures = measures.filter((m)=>'yAxis' === m.encoding);
+            const xResult = dataReshapeByEncoding(dataset, T(dimensions, (d)=>d.id), T(xMeasures, (d)=>d.id), encoding, {
+                foldMeasureValue: FoldXMeasureValue,
+                foldMeasureId: FoldXMeasureId,
+                colorItemAsId: true,
+                colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
+                omitIds: xMeasures.map((m)=>m.id).filter((id)=>!sizeEncodingIds.includes(id))
+            });
+            datasets.push(xResult.dataset);
+            foldInfoList.push(xResult.foldInfo);
+            unfoldInfoList.push(xResult.unfoldInfo);
+            const yResult = dataReshapeByEncoding(datasets[0], T(dimensions, (d)=>d.id), T(yMeasures, (d)=>d.id), encoding, {
+                foldMeasureValue: FoldYMeasureValue,
+                foldMeasureId: FoldYMeasureId,
+                colorItemAsId: true,
+                colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
+                omitIds: yMeasures.map((m)=>m.id).filter((id)=>!sizeEncodingIds.includes(id))
+            });
+            datasets[0] = yResult.dataset;
+            foldInfoList.push(yResult.foldInfo);
+            unfoldInfoList.push(yResult.unfoldInfo);
+            const unfoldInfo = {
+                ...unfoldInfoList[0],
+                colorItems: unfoldInfoList.flatMap((d)=>d.colorItems),
+                colorIdMap: unfoldInfoList.reduce((prev, cur)=>({
+                        ...prev,
+                        ...cur.colorIdMap
+                    }), {})
+            };
+            return {
+                ...result,
+                dataset: datasets[0],
+                datasetReshapeInfo: [
+                    {
+                        id: String(chartType),
+                        index: 0,
+                        foldInfo: foldInfoList[0],
+                        foldInfoList: foldInfoList,
+                        unfoldInfo: unfoldInfo
+                    }
+                ]
+            };
+        };
+        const pivotReshapeWithScatterEncoding = (advancedVSeed, context)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { vseed } = context;
+            const { dataset } = vseed;
+            const { encoding, chartType } = advancedVSeed;
+            const reshapeMeasures = advancedVSeed.reshapeMeasures ?? [];
+            const dimensions = advancedVSeed.reshapeDimensions ?? advancedVSeed.dimensions ?? [];
+            let allMeasuresIds = chunk_QJLMYOTX_i(reshapeMeasures.flatMap((measureGroup)=>measureGroup.map((m)=>m.id)));
+            if (encoding?.size?.length) allMeasuresIds = allMeasuresIds.filter((mId)=>!encoding.size.includes(mId));
+            const datasetList = [];
+            const datasetReshapeInfo = [];
+            reshapeMeasures.forEach((measures, index)=>{
+                const foldInfoList = [];
+                const unfoldInfoList = [];
+                const datasets = [];
+                const xMeasures = measures.filter((m)=>'xAxis' === m.encoding);
+                const yMeasures = measures.filter((m)=>'yAxis' === m.encoding);
+                const xResult = dataReshapeByEncoding(dataset, dimensions, xMeasures, encoding, {
+                    foldMeasureValue: `${FoldXMeasureValue}${index}`,
+                    foldMeasureId: FoldXMeasureId,
+                    colorItemAsId: true,
+                    colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
+                    omitIds: allMeasuresIds
+                });
+                datasets.push(xResult.dataset);
+                foldInfoList.push(xResult.foldInfo);
+                unfoldInfoList.push(xResult.unfoldInfo);
+                const yResult = dataReshapeByEncoding(dataset, dimensions, yMeasures, encoding, {
+                    foldMeasureValue: `${FoldYMeasureValue}${index}`,
+                    foldMeasureId: FoldYMeasureId,
+                    colorItemAsId: true,
+                    colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
+                    omitIds: allMeasuresIds
+                });
+                datasets.push(yResult.dataset);
+                foldInfoList.push(yResult.foldInfo);
+                unfoldInfoList.push(yResult.unfoldInfo);
+                const unfoldInfo = {
+                    ...unfoldInfoList[0],
+                    colorItems: unfoldInfoList.flatMap((d)=>d.colorItems),
+                    colorIdMap: unfoldInfoList.reduce((prev, cur)=>({
+                            ...prev,
+                            ...cur.colorIdMap
+                        }), {})
+                };
+                const reshapeInfo = {
+                    id: `${chartType}-${index}`,
+                    index,
+                    foldInfo: foldInfoList[0],
+                    foldInfoList: foldInfoList,
+                    unfoldInfo: unfoldInfo
+                };
+                datasetReshapeInfo.push(reshapeInfo);
+                datasetList.push(datasets[0].flatMap((d)=>datasets[1].filter((yDatum)=>yDatum[ORIGINAL_DATA] === d[ORIGINAL_DATA]).map((yDatum)=>({
+                            ...d,
+                            ...yDatum
+                        }))));
+            });
+            return {
+                ...result,
+                dataset: datasetList,
+                datasetReshapeInfo: datasetReshapeInfo
+            };
+        };
+        const scatterAdvancedPipeline = [
+            page_page_page,
+            initAdvancedVSeed_initAdvancedVSeed,
+            default_defaultMeasures_defaultMeasures,
+            defaultDimensions_defaultDimensions,
+            defaultMeasureId_defaultMeasureId,
+            encodingAdapter([
+                buildMeasuresForScatter,
+                addPivotDimensionsForScatter,
+                defaultEncodingForScatter
+            ], [
+                buildMeasuresForScatter,
+                addPivotDimensionsForScatter,
+                encodingForScatter,
+                pickDimensionsForReshape
+            ]),
+            pivotAdapter([
+                reshapeWithScatterEncoding
+            ], [
+                pivotReshapeWithScatterEncoding
+            ]),
+            scatterConfig,
+            theme_theme,
+            markStyle_markStyle,
+            annotation_annotation,
+            regressionLine_regressionLine
+        ];
+        const raceScatterAdvancedPipeline = scatterAdvancedPipeline;
+        const initScatter = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const { unfoldInfo, foldInfoList } = datasetReshapeInfo[0];
+            result.type = 'scatter';
+            result.direction = 'vertical';
+            result.xField = foldInfoList?.[0].measureValue;
+            if (foldInfoList?.[1]) result.yField = foldInfoList[1].measureValue;
+            else if (unfoldInfo.encodingX) {
+                result.xField = unfoldInfo.encodingX;
+                result.yField = foldInfoList?.[0].measureValue;
+            }
+            result.seriesField = unfoldInfo.encodingColorId;
+            result.padding = 0;
+            result.region = [
+                {
+                    clip: true
+                }
             ];
-            const group = unfoldInfo.encodingColorId;
-            const areaGroups = chunk_HVPVHFDT_i(dataset, (d)=>d[group ?? '']);
-            const customMap = areaStyles.reduce((result, style, index)=>{
-                const { areaColor, areaColorOpacity, areaVisible = true } = style;
-                const curveType = getCurveType(context.vseed, lineStyles[index]?.lineSmooth);
-                const curveTension = getCurveTension(context.vseed, lineStyles[index]?.lineSmooth);
-                return {
-                    ...result,
-                    [`custom${index + 1}`]: {
-                        level: index + 1,
-                        filter: (datum)=>{
-                            const lineData = areaGroups[datum[group ?? '']];
-                            for (const d of lineData)if (selector_selector(d, style.selector)) return true;
-                            return false;
+            result.animation = true;
+            return result;
+        };
+        const datasetScatter = (spec, context)=>{
+            const { advancedVSeed, vseed } = context;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const id = datasetReshapeInfo[0].id;
+            const fields = {};
+            return {
+                ...spec,
+                data: {
+                    id,
+                    values: chatType_isPivotChart(vseed) ? void 0 : advancedVSeed.dataset.flat(),
+                    fields: fields
+                }
+            };
+        };
+        const playerYY = (spec, context)=>{
+            const { vseed, advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType, encoding } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const result = datasetScatter(spec, context);
+            if (!('player' in vseed) || !baseConfig || !baseConfig.player || isVTable(vseed) || chatType_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 = chunk_HVPVHFDT_i(advancedVSeed.dataset, (item)=>item[field]);
+            if (result.data && 'values' in result.data) result.data.values = [];
+            const specs = Object.values(dataGroups).map((items)=>({
+                    data: {
+                        id: id,
+                        values: items
+                    }
+                }));
+            const dataKey = encoding.color;
+            const duration = interval;
+            const exchangeDuration = 0.6 * interval;
+            return {
+                ...result,
+                dataKey,
+                stackCornerRadius: void 0,
+                animationUpdate: {
+                    bar: [
+                        {
+                            type: 'update',
+                            options: {
+                                excludeChannels: [
+                                    'x'
+                                ]
+                            },
+                            easing: 'linear',
+                            duration
                         },
+                        {
+                            channel: [
+                                'x'
+                            ],
+                            easing: 'circInOut',
+                            duration: exchangeDuration
+                        }
+                    ],
+                    point: [
+                        {
+                            type: 'update',
+                            easing: 'linear',
+                            duration
+                        }
+                    ],
+                    line: [
+                        {
+                            type: 'update',
+                            easing: 'linear',
+                            duration
+                        }
+                    ],
+                    axis: {
+                        duration: exchangeDuration,
+                        easing: 'circInOut'
+                    }
+                },
+                animationEnter: {
+                    bar: [
+                        {
+                            type: 'moveIn',
+                            duration: exchangeDuration,
+                            easing: 'circInOut',
+                            options: {
+                                direction: 'x',
+                                orient: 'negative'
+                            }
+                        }
+                    ]
+                },
+                animationExit: {
+                    bar: [
+                        {
+                            type: 'fadeOut',
+                            duration: exchangeDuration
+                        }
+                    ]
+                },
+                customMark: [
+                    {
+                        type: 'text',
+                        dataId: 'year',
                         style: {
-                            curveType,
-                            curveTension,
-                            visible: areaVisible,
-                            fill: areaColor,
-                            fillOpacity: areaColorOpacity
+                            textBaseline: 'bottom',
+                            fontSize: 24,
+                            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
                         }
                     }
-                };
-            }, {});
-            return {
-                ...result,
-                area: {
-                    ...result.area,
+                ],
+                player: {
                     visible: true,
-                    state: {
-                        ...customMap
+                    auto: autoPlay,
+                    interval: interval,
+                    loop: loop,
+                    alternate: false,
+                    position: 'middle',
+                    orient: position,
+                    type: 'discrete',
+                    specs,
+                    controller: {
+                        visible: true,
+                        start: {
+                            visible: true,
+                            order: 0,
+                            style: {
+                                fill: startButtonColor
+                            }
+                        },
+                        pause: {
+                            visible: true,
+                            order: 1,
+                            style: {
+                                fill: pauseButtonColor
+                            }
+                        },
+                        backward: {
+                            visible: true,
+                            order: 2,
+                            style: {
+                                fill: backwardButtonColor
+                            }
+                        },
+                        forward: {
+                            visible: true,
+                            order: 3,
+                            position: 'end',
+                            style: {
+                                fill: forwardButtonColor
+                            }
+                        }
+                    },
+                    slider: {
+                        visible: true,
+                        railStyle: {
+                            visible: true,
+                            fill: railColor,
+                            ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
+                        },
+                        trackStyle: {
+                            visible: true,
+                            fill: trackColor,
+                            ['top' === position || 'bottom' === position ? 'height' : 'width']: 2
+                        },
+                        handlerStyle: {
+                            visible: true,
+                            lineWidth: 2,
+                            stroke: sliderHandleBorderColor,
+                            fill: sliderHandleColor,
+                            size: 9
+                        }
                     }
                 }
             };
         };
-        const area_area = [
-            initArea,
-            stackInverse,
+        const raceScatter = [
+            initScatter,
+            colorAdapter(color_color, linearColor),
+            background_backgroundColor,
+            playerYY,
+            playerXLinear,
+            playerYLinear,
+            label_label,
+            brush_brush,
+            tooltip_tooltip,
+            progressive,
+            colorAdapter(discreteLegend, colorLegend),
+            verticalCrosshairLine,
+            colorPointStyleFill(pointStyle_pointStyle),
+            annotationPoint_annotationPoint,
+            annotationVerticalLine_annotationVerticalLine,
+            annotationHorizontalLine_annotationHorizontalLine,
+            annotationAreaBand
+        ];
+        const raceScatterSpecPipeline = raceScatter;
+        const registerRaceScatter = ()=>{
+            Builder.registerAdvancedPipeline('raceScatter', raceScatterAdvancedPipeline);
+            Builder.registerSpecPipeline('raceScatter', raceScatterSpecPipeline);
+        };
+        const barParallelAdvancedPipeline = [
+            page_page_page,
+            initAdvancedVSeed_initAdvancedVSeed,
+            default_defaultMeasures_defaultMeasures,
+            defaultDimensions_defaultDimensions,
+            defaultMeasureId_defaultMeasureId,
+            encodingAdapter([
+                buildMeasures([
+                    'xAxis',
+                    'detail'
+                ]),
+                defaultEncodingForBar
+            ], [
+                buildMeasures([
+                    'xAxis',
+                    'detail'
+                ]),
+                encodingForBar,
+                pickDimensionsForReshape
+            ]),
+            pivotAdapter([
+                reshapeWithEncoding
+            ], [
+                pivotReshapeWithEncoding
+            ]),
+            sortYBandAxis,
+            sortLegend_sortLegend,
+            barParallelConfig,
+            theme_theme,
+            markStyle_markStyle,
+            annotation_annotation
+        ];
+        const initBarParallel = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, encoding } = advancedVSeed;
+            const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
+            const sameDimensionsMode = chunk_HGKLN5KY_k(encoding.y, encoding.color);
+            result.type = 'bar';
+            result.direction = 'horizontal';
+            result.yField = [
+                unfoldInfo.encodingY
+            ];
+            if (!sameDimensionsMode) {
+                result.yField.push(unfoldInfo.encodingDetail);
+                if (encoding.detail?.[0] === MeasureId && encoding.x?.length === 1) result.yField.pop();
+            }
+            result.xField = foldInfo.measureValue;
+            result.seriesField = unfoldInfo.encodingColorId;
+            result.padding = 0;
+            result.region = [
+                {
+                    clip: true
+                }
+            ];
+            result.animation = true;
+            return result;
+        };
+        const barParallel = [
+            initBarParallel,
+            stackCornerRadius_stackCornerRadius,
+            barMaxWidth_barMaxWidth,
+            barGapInGroup_barGapInGroup,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetYX,
             progressive,
-            xBand,
-            yLinear,
+            xLinear,
+            yBand,
             label_label,
             brush_brush,
             tooltip_tooltip,
             colorAdapter(discreteLegend, colorLegend),
-            verticalCrosshairLine,
-            colorPointStyleFill(pointStyle_pointStyle),
-            pointStateDimensionHover,
-            colorLineStyleFill(lineStyle_lineStyle),
-            colorAreaStyleFill(areaStyle_areaStyle),
+            horizontalCrosshairRect,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
-            annotationArea_annotationArea,
-            splitLine
+            annotationAreaBand
         ];
-        const pivotArea = [
+        const pivotBarParallel = [
             initPivot,
             pivotGridStyle,
-            pivotIndicatorsAsRow,
+            pivotIndicatorsAsCol,
             datasetPivot,
             pivotIndicators_pivotIndicators([
-                initArea,
+                initBarParallel,
+                stackCornerRadius_stackCornerRadius,
+                barMaxWidth_barMaxWidth,
                 colorAdapter(color_color, linearColor),
                 background_backgroundColor,
-                stackInverse,
-                datasetXY,
-                progressive,
-                xBand,
-                pivotAxisStyle(yLinear),
-                label_label,
+                datasetYX,
+                xLinear,
+                pivotAxisStyle(yBand),
                 brush_brush,
+                label_label,
                 tooltip_tooltip,
-                verticalCrosshairLine,
-                colorPointStyleFill(pointStyle_pointStyle),
-                pointStateDimensionHover,
-                colorLineStyleFill(lineStyle_lineStyle),
-                colorAreaStyleFill(areaStyle_areaStyle),
+                colorBarStyleFill(barStyle_barStyle),
+                horizontalCrosshairRect,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
-                annotationArea_annotationArea,
-                splitLine
+                annotationAreaBand
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
@@ -7914,14 +8515,14 @@
             colorAdapter(pivotDiscreteLegend, pivotColorLegend),
             dimensionLinkage
         ];
-        const areaSpecPipeline = [
-            pivotAdapter_pivotAdapter(area_area, pivotArea)
+        const barParallelSpecPipeline = [
+            pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
         ];
-        const registerArea = ()=>{
-            Builder.registerAdvancedPipeline('area', areaAdvancedPipeline);
-            Builder.registerSpecPipeline('area', areaSpecPipeline);
+        const registerBarParallel = ()=>{
+            Builder.registerAdvancedPipeline('barParallel', barParallelAdvancedPipeline);
+            Builder.registerSpecPipeline('barParallel', barParallelSpecPipeline);
         };
-        const areaPercentAdvancedPipeline = [
+        const barPercentAdvancedPipeline = [
             page_page_page,
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
@@ -7929,16 +8530,16 @@
             defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 buildMeasures([
-                    'yAxis',
+                    'xAxis',
                     'detail'
                 ]),
-                defaultEncodingForLine
+                defaultEncodingForBar
             ], [
                 buildMeasures([
-                    'yAxis',
+                    'xAxis',
                     'detail'
                 ]),
-                encodingForLine,
+                encodingForBar,
                 pickDimensionsForReshape
             ]),
             pivotAdapter([
@@ -7946,422 +8547,355 @@
             ], [
                 pivotReshapeWithEncoding
             ]),
-            sortXBandAxis,
+            sortYBandAxis,
             sortLegend_sortLegend,
-            areaPercentConfig,
+            barPercentConfig,
             theme_theme,
             markStyle_markStyle,
             annotation_annotation
         ];
-        const areaPercent = [
-            initArea,
-            stackInverse,
+        const barPercent = [
+            initBar,
+            stackCornerRadius_stackCornerRadius,
+            barMaxWidth_barMaxWidth,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent_percent,
-            playerAdapter(datasetXY),
+            datasetYX,
             progressive,
-            xBand,
-            yLinear,
+            xLinear,
+            yBand,
             label_label,
             brush_brush,
             tooltip_tooltip,
             colorAdapter(discreteLegend, colorLegend),
-            verticalCrosshairLine,
-            colorPointStyleFill(pointStyle_pointStyle),
-            pointStateDimensionHover,
-            colorLineStyleFill(lineStyle_lineStyle),
-            colorAreaStyleFill(areaStyle_areaStyle),
+            horizontalCrosshairRect,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
-            annotationArea_annotationArea
+            annotationAreaBand
         ];
-        const pivotAreaPercent = [
+        const pivotBarPercent = [
             initPivot,
             pivotGridStyle,
-            pivotIndicatorsAsRow,
+            pivotIndicatorsAsCol,
             datasetPivot,
             pivotIndicators_pivotIndicators([
-                initArea,
-                stackInverse,
+                initBar,
+                stackCornerRadius_stackCornerRadius,
+                barMaxWidth_barMaxWidth,
                 colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 percent_percent,
-                datasetXY,
-                progressive,
-                xBand,
-                pivotAxisStyle(yLinear),
-                label_label,
+                datasetYX,
+                xLinear,
+                pivotAxisStyle(yBand),
                 brush_brush,
+                label_label,
                 tooltip_tooltip,
-                verticalCrosshairLine,
-                colorPointStyleFill(pointStyle_pointStyle),
-                pointStateDimensionHover,
-                colorLineStyleFill(lineStyle_lineStyle),
-                colorAreaStyleFill(areaStyle_areaStyle),
+                colorBarStyleFill(barStyle_barStyle),
+                horizontalCrosshairRect,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
-                annotationArea_annotationArea
+                annotationAreaBand
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
             pivotTitle,
             colorAdapter(pivotDiscreteLegend, pivotColorLegend),
-            dimensionLinkage
-        ];
-        const areaPercentSpecPipeline = [
-            pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
-        ];
-        const registerAreaPercent = ()=>{
-            Builder.registerAdvancedPipeline('areaPercent', areaPercentAdvancedPipeline);
-            Builder.registerSpecPipeline('areaPercent', areaPercentSpecPipeline);
-        };
-        const buildMeasuresForScatter = (advancedVSeed)=>{
-            const { measures = [] } = advancedVSeed;
-            const encodedMeasures = [];
-            for(let index = 0; index < measures.length; index++){
-                const item = measures[index];
-                const encoding = item.encoding;
-                const isYAxis = 'yAxis' === encoding;
-                const isXAxis = 'xAxis' === encoding;
-                const isOtherEncoding = item.encoding && isCommonMeasureEncoding(encoding);
-                if (isYAxis) encodedMeasures.push(item);
-                else if (isXAxis) encodedMeasures.push(item);
-                else if (!isOtherEncoding && 'size' !== encoding) {
-                    const xCount = encodedMeasures.filter((m)=>'xAxis' === m.encoding).length;
-                    item.encoding = 0 === xCount ? 'xAxis' : 'yAxis';
-                    encodedMeasures.push(item);
-                }
-            }
-            const xCount = encodedMeasures.filter((m)=>'xAxis' === m.encoding).length;
-            const yCount = encodedMeasures.filter((m)=>'yAxis' === m.encoding).length;
-            if (0 === yCount && xCount > 0) {
-                const cloneMeasure = chunk_BCBB46UE_d(encodedMeasures[0]);
-                cloneMeasure.encoding = 'yAxis';
-                encodedMeasures.push(cloneMeasure);
-            }
-            advancedVSeed.reshapeMeasures = encodedMeasures.length > 0 ? [
-                encodedMeasures
-            ] : [];
-            return advancedVSeed;
-        };
-        const addPivotDimensionsForScatter = (advancedVSeed)=>{
-            const { reshapeMeasures = [] } = advancedVSeed;
-            if (reshapeMeasures[0]?.length >= 2) {
-                const dimensions = advancedVSeed.dimensions ?? [];
-                const xMeasures = reshapeMeasures[0].filter((m)=>'xAxis' === m.encoding);
-                const yMeasures = reshapeMeasures[0].filter((m)=>'yAxis' === m.encoding);
-                if (xMeasures.length > 1 || yMeasures.length > 1) {
-                    dimensions.push({
-                        id: FoldXMeasureId,
-                        alias: ' ',
-                        encoding: 'column'
-                    });
-                    dimensions.push({
-                        id: FoldYMeasureId,
-                        alias: ' ',
-                        encoding: 'row'
-                    });
-                }
-                return {
-                    ...advancedVSeed,
-                    dimensions
-                };
-            }
-            return advancedVSeed;
-        };
-        const defaultEncodingForScatter = (advancedVSeed)=>{
-            const { measures = [], dimensions = [] } = advancedVSeed;
-            const encoding = {};
-            scatter_generateDefaultDimensionEncoding(dimensions, encoding);
-            scatter_generateDefaultMeasureEncoding(measures, encoding);
-            return {
-                ...advancedVSeed,
-                encoding
-            };
-        };
-        const encodingForScatter = (advancedVSeed)=>{
-            const { measures = [], dimensions = [] } = advancedVSeed;
-            const hasDimensionEncoding = dimensions.some((item)=>item.encoding);
-            const hasMeasureEncoding = measures.some((item)=>item.encoding);
-            const encoding = {};
-            if (hasDimensionEncoding) scatter_generateDimensionEncoding(dimensions, encoding);
-            else scatter_generateDefaultDimensionEncoding(dimensions, encoding);
-            if (hasMeasureEncoding) scatter_generateMeasureEncoding(measures, encoding);
-            else scatter_generateDefaultMeasureEncoding(measures, encoding);
-            return {
-                ...advancedVSeed,
-                encoding
-            };
-        };
-        const scatter_generateDefaultDimensionEncoding = (dimensions, encoding)=>{
-            const dimensionsWithoutMeasureId = dimensions.filter((item)=>item.id !== MeasureId);
-            const uniqueDimIds = chunk_QJLMYOTX_i(dimensionsWithoutMeasureId.map((d)=>d.id));
-            encoding.detail = encoding.color;
-            encoding.tooltip = uniqueDimIds.filter((d)=>![
-                    MeasureId,
-                    FoldYMeasureId,
-                    FoldXMeasureId
-                ].includes(d));
-            encoding.label = [];
-            encoding.row = [];
-            encoding.column = [];
-        };
-        const scatter_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
-            if (0 === encoding.detail.length) encoding.detail = [
-                MeasureId
-            ];
-            encoding.tooltip = chunk_QJLMYOTX_i(dimensions.map((item)=>item.id));
-            encoding.tooltip = encoding.tooltip.filter((d)=>![
-                    MeasureId,
-                    FoldYMeasureId,
-                    FoldXMeasureId
-                ].includes(d));
-            encoding.label = chunk_QJLMYOTX_i(dimensions.filter((item)=>'label' === item.encoding).map((item)=>item.id));
-            encoding.label = encoding.label.filter((d)=>d !== MeasureId);
-        };
-        const scatter_generateDefaultMeasureEncoding = (measures, encoding)=>{
-            encoding.y = chunk_QJLMYOTX_i(measures.filter((item)=>'xAxis' === item.encoding || 'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
-        };
-        const scatter_generateMeasureEncoding = (measures, encoding)=>{
-            encoding.y = chunk_QJLMYOTX_i(measures.filter((item)=>'xAxis' === item.encoding || 'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
-            const color = chunk_QJLMYOTX_i(measures.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            if (color.length > 0) encoding.color = [
-                color[0]
-            ];
-            encoding.size = chunk_QJLMYOTX_i(measures.filter((item)=>'size' === item.encoding).map((item)=>item.id));
-            const label = chunk_QJLMYOTX_i(measures.filter((item)=>'label' === item.encoding).map((item)=>item.id));
-            encoding.label = chunk_QJLMYOTX_i([
-                ...encoding.label || [],
-                ...label
-            ]);
-            const tooltip = chunk_QJLMYOTX_i(measures.filter((item)=>'tooltip' === item.encoding).map((item)=>item.id));
-            encoding.tooltip = chunk_QJLMYOTX_i([
-                ...encoding.tooltip || [],
-                ...label,
-                ...tooltip,
-                ...color,
-                ...encoding.size
-            ]);
+            dimensionLinkage
+        ];
+        const barPercentSpecPipeline = [
+            pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
+        ];
+        const registerBarPercent = ()=>{
+            Builder.registerAdvancedPipeline('barPercent', barPercentAdvancedPipeline);
+            Builder.registerSpecPipeline('barPercent', barPercentSpecPipeline);
         };
-        const scatterConfig = (advancedVSeed, context)=>{
-            const { vseed } = context;
-            const { chartType } = vseed;
+        const areaAdvancedPipeline = [
+            page_page_page,
+            initAdvancedVSeed_initAdvancedVSeed,
+            default_defaultMeasures_defaultMeasures,
+            defaultDimensions_defaultDimensions,
+            defaultMeasureId_defaultMeasureId,
+            encodingAdapter([
+                buildMeasures([
+                    'yAxis',
+                    'detail'
+                ]),
+                defaultEncodingForLine
+            ], [
+                buildMeasures([
+                    'yAxis',
+                    'detail'
+                ]),
+                encodingForLine,
+                pickDimensionsForReshape
+            ]),
+            pivotAdapter([
+                reshapeWithEncoding
+            ], [
+                pivotReshapeWithEncoding
+            ]),
+            sortXBandAxis,
+            sortLegend_sortLegend,
+            areaConfig,
+            theme_theme,
+            markStyle_markStyle,
+            annotation_annotation
+        ];
+        const initArea = (spec, context)=>{
             const result = {
-                ...advancedVSeed
+                ...spec
             };
-            const pickedConfig = chunk_2T7K3PFL_i(vseed, [
-                'backgroundColor',
-                'color',
-                'label',
-                'legend',
-                'tooltip',
-                'xAxis',
-                'yAxis',
-                'sizeRange',
-                'size',
-                'crosshairLine',
-                'player',
-                'brush',
-                'dimensionLinkage'
-            ]);
-            const config = replaceNullToUndefined(pickedConfig);
-            result.config = {
-                ...result.config,
-                [chartType]: {
-                    ...config
+            const { advancedVSeed, vseed } = context;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
+            result.type = 'area';
+            result.direction = 'vertical';
+            result.yField = foldInfo.measureValue;
+            result.xField = unfoldInfo.encodingX;
+            result.seriesField = isLinearColor(advancedVSeed, vseed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
+            result.padding = 0;
+            result.region = [
+                {
+                    clip: true
                 }
-            };
+            ];
+            result.animation = true;
             return result;
         };
-        const reshapeWithScatterEncoding = (advancedVSeed, context)=>{
-            const result = {
-                ...advancedVSeed
-            };
-            const { vseed } = context;
-            const { dataset } = vseed;
-            const { encoding, chartType, reshapeMeasures } = advancedVSeed;
-            const dimensions = advancedVSeed.reshapeDimensions ?? advancedVSeed.dimensions ?? [];
-            const measures = reshapeMeasures?.[0] ?? [];
-            const foldInfoList = [];
-            const unfoldInfoList = [];
-            const sizeEncodingIds = encoding?.size ?? [];
-            const datasets = [];
-            const xMeasures = measures.filter((m)=>'xAxis' === m.encoding);
-            const yMeasures = measures.filter((m)=>'yAxis' === m.encoding);
-            const xResult = dataReshapeByEncoding(dataset, T(dimensions, (d)=>d.id), T(xMeasures, (d)=>d.id), encoding, {
-                foldMeasureValue: FoldXMeasureValue,
-                foldMeasureId: FoldXMeasureId,
-                colorItemAsId: true,
-                colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
-                omitIds: xMeasures.map((m)=>m.id).filter((id)=>!sizeEncodingIds.includes(id))
-            });
-            datasets.push(xResult.dataset);
-            foldInfoList.push(xResult.foldInfo);
-            unfoldInfoList.push(xResult.unfoldInfo);
-            const yResult = dataReshapeByEncoding(datasets[0], T(dimensions, (d)=>d.id), T(yMeasures, (d)=>d.id), encoding, {
-                foldMeasureValue: FoldYMeasureValue,
-                foldMeasureId: FoldYMeasureId,
-                colorItemAsId: true,
-                colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
-                omitIds: yMeasures.map((m)=>m.id).filter((id)=>!sizeEncodingIds.includes(id))
-            });
-            datasets[0] = yResult.dataset;
-            foldInfoList.push(yResult.foldInfo);
-            unfoldInfoList.push(yResult.unfoldInfo);
-            const unfoldInfo = {
-                ...unfoldInfoList[0],
-                colorItems: unfoldInfoList.flatMap((d)=>d.colorItems),
-                colorIdMap: unfoldInfoList.reduce((prev, cur)=>({
-                        ...prev,
-                        ...cur.colorIdMap
-                    }), {})
-            };
-            return {
-                ...result,
-                dataset: datasets[0],
-                datasetReshapeInfo: [
-                    {
-                        id: String(chartType),
-                        index: 0,
-                        foldInfo: foldInfoList[0],
-                        foldInfoList: foldInfoList,
-                        unfoldInfo: unfoldInfo
-                    }
-                ]
+        const colorAreaStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed, vseed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed, vseed)) {
+                    if (result?.area?.style) result.area.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
             };
-        };
-        const pivotReshapeWithScatterEncoding = (advancedVSeed, context)=>{
+        const areaStyle_areaStyle = (spec, context)=>{
+            const { advancedVSeed } = context;
+            const { markStyle, datasetReshapeInfo, dataset } = advancedVSeed;
+            const { areaStyle, lineStyle } = markStyle;
+            const { unfoldInfo } = datasetReshapeInfo[0];
             const result = {
-                ...advancedVSeed
+                ...spec,
+                area: {
+                    visible: true,
+                    style: {}
+                }
             };
-            const { vseed } = context;
-            const { dataset } = vseed;
-            const { encoding, chartType } = advancedVSeed;
-            const reshapeMeasures = advancedVSeed.reshapeMeasures ?? [];
-            const dimensions = advancedVSeed.reshapeDimensions ?? advancedVSeed.dimensions ?? [];
-            let allMeasuresIds = chunk_QJLMYOTX_i(reshapeMeasures.flatMap((measureGroup)=>measureGroup.map((m)=>m.id)));
-            if (encoding?.size?.length) allMeasuresIds = allMeasuresIds.filter((mId)=>!encoding.size.includes(mId));
-            const datasetList = [];
-            const datasetReshapeInfo = [];
-            reshapeMeasures.forEach((measures, index)=>{
-                const foldInfoList = [];
-                const unfoldInfoList = [];
-                const datasets = [];
-                const xMeasures = measures.filter((m)=>'xAxis' === m.encoding);
-                const yMeasures = measures.filter((m)=>'yAxis' === m.encoding);
-                const xResult = dataReshapeByEncoding(dataset, dimensions, xMeasures, encoding, {
-                    foldMeasureValue: `${FoldXMeasureValue}${index}`,
-                    foldMeasureId: FoldXMeasureId,
-                    colorItemAsId: true,
-                    colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
-                    omitIds: allMeasuresIds
-                });
-                datasets.push(xResult.dataset);
-                foldInfoList.push(xResult.foldInfo);
-                unfoldInfoList.push(xResult.unfoldInfo);
-                const yResult = dataReshapeByEncoding(dataset, dimensions, yMeasures, encoding, {
-                    foldMeasureValue: `${FoldYMeasureValue}${index}`,
-                    foldMeasureId: FoldYMeasureId,
-                    colorItemAsId: true,
-                    colorMeasureId: getColorMeasureId(advancedVSeed, vseed),
-                    omitIds: allMeasuresIds
-                });
-                datasets.push(yResult.dataset);
-                foldInfoList.push(yResult.foldInfo);
-                unfoldInfoList.push(yResult.unfoldInfo);
-                const unfoldInfo = {
-                    ...unfoldInfoList[0],
-                    colorItems: unfoldInfoList.flatMap((d)=>d.colorItems),
-                    colorIdMap: unfoldInfoList.reduce((prev, cur)=>({
-                            ...prev,
-                            ...cur.colorIdMap
-                        }), {})
-                };
-                const reshapeInfo = {
-                    id: `${chartType}-${index}`,
-                    index,
-                    foldInfo: foldInfoList[0],
-                    foldInfoList: foldInfoList,
-                    unfoldInfo: unfoldInfo
+            if (chunk_JK3VNB42_n(areaStyle) || chunk_VCYTMP4D_n(areaStyle)) return result;
+            const areaStyles = Array.isArray(areaStyle) ? areaStyle : [
+                areaStyle
+            ];
+            const lineStyles = Array.isArray(lineStyle) ? lineStyle : [
+                lineStyle
+            ];
+            const group = unfoldInfo.encodingColorId;
+            const areaGroups = chunk_HVPVHFDT_i(dataset, (d)=>d[group ?? '']);
+            const customMap = areaStyles.reduce((result, style, index)=>{
+                const { areaColor, areaColorOpacity, areaVisible = true } = style;
+                const curveType = getCurveType(context.vseed, lineStyles[index]?.lineSmooth);
+                const curveTension = getCurveTension(context.vseed, lineStyles[index]?.lineSmooth);
+                return {
+                    ...result,
+                    [`custom${index + 1}`]: {
+                        level: index + 1,
+                        filter: (datum)=>{
+                            const lineData = areaGroups[datum[group ?? '']];
+                            for (const d of lineData)if (selector_selector(d, style.selector)) return true;
+                            return false;
+                        },
+                        style: {
+                            curveType,
+                            curveTension,
+                            visible: areaVisible,
+                            fill: areaColor,
+                            fillOpacity: areaColorOpacity
+                        }
+                    }
                 };
-                datasetReshapeInfo.push(reshapeInfo);
-                datasetList.push(datasets[0].flatMap((d)=>datasets[1].filter((yDatum)=>yDatum[ORIGINAL_DATA] === d[ORIGINAL_DATA]).map((yDatum)=>({
-                            ...d,
-                            ...yDatum
-                        }))));
-            });
+            }, {});
             return {
                 ...result,
-                dataset: datasetList,
-                datasetReshapeInfo: datasetReshapeInfo
+                area: {
+                    ...result.area,
+                    visible: true,
+                    state: {
+                        ...customMap
+                    }
+                }
             };
         };
-        const scatterAdvancedPipeline = [
+        const area_area = [
+            initArea,
+            stackInverse,
+            colorAdapter(color_color, linearColor),
+            background_backgroundColor,
+            datasetXY,
+            progressive,
+            xBand,
+            yLinear,
+            label_label,
+            brush_brush,
+            tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
+            verticalCrosshairLine,
+            colorPointStyleFill(pointStyle_pointStyle),
+            pointStateDimensionHover,
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle),
+            annotationPoint_annotationPoint,
+            annotationVerticalLine_annotationVerticalLine,
+            annotationHorizontalLine_annotationHorizontalLine,
+            annotationArea_annotationArea,
+            splitLine
+        ];
+        const pivotArea = [
+            initPivot,
+            pivotGridStyle,
+            pivotIndicatorsAsRow,
+            datasetPivot,
+            pivotIndicators_pivotIndicators([
+                initArea,
+                colorAdapter(color_color, linearColor),
+                background_backgroundColor,
+                stackInverse,
+                datasetXY,
+                progressive,
+                xBand,
+                pivotAxisStyle(yLinear),
+                label_label,
+                brush_brush,
+                tooltip_tooltip,
+                verticalCrosshairLine,
+                colorPointStyleFill(pointStyle_pointStyle),
+                pointStateDimensionHover,
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle),
+                annotationPoint_annotationPoint,
+                annotationVerticalLine_annotationVerticalLine,
+                annotationHorizontalLine_annotationHorizontalLine,
+                annotationArea_annotationArea,
+                splitLine
+            ]),
+            pivotRowDimensions,
+            pivotColumnDimensions,
+            pivotTitle,
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend),
+            dimensionLinkage
+        ];
+        const areaSpecPipeline = [
+            pivotAdapter_pivotAdapter(area_area, pivotArea)
+        ];
+        const registerArea = ()=>{
+            Builder.registerAdvancedPipeline('area', areaAdvancedPipeline);
+            Builder.registerSpecPipeline('area', areaSpecPipeline);
+        };
+        const areaPercentAdvancedPipeline = [
             page_page_page,
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
             defaultMeasureId_defaultMeasureId,
             encodingAdapter([
-                buildMeasuresForScatter,
-                addPivotDimensionsForScatter,
-                defaultEncodingForScatter
+                buildMeasures([
+                    'yAxis',
+                    'detail'
+                ]),
+                defaultEncodingForLine
             ], [
-                buildMeasuresForScatter,
-                addPivotDimensionsForScatter,
-                encodingForScatter,
+                buildMeasures([
+                    'yAxis',
+                    'detail'
+                ]),
+                encodingForLine,
                 pickDimensionsForReshape
             ]),
             pivotAdapter([
-                reshapeWithScatterEncoding
+                reshapeWithEncoding
             ], [
-                pivotReshapeWithScatterEncoding
+                pivotReshapeWithEncoding
             ]),
-            scatterConfig,
+            sortXBandAxis,
+            sortLegend_sortLegend,
+            areaPercentConfig,
             theme_theme,
             markStyle_markStyle,
-            annotation_annotation,
-            regressionLine_regressionLine
+            annotation_annotation
         ];
-        const initScatter = (spec, context)=>{
-            const result = {
-                ...spec
-            };
-            const { advancedVSeed } = context;
-            const { datasetReshapeInfo } = advancedVSeed;
-            const { unfoldInfo, foldInfoList } = datasetReshapeInfo[0];
-            result.type = 'scatter';
-            result.direction = 'vertical';
-            result.xField = foldInfoList?.[0].measureValue;
-            if (foldInfoList?.[1]) result.yField = foldInfoList[1].measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
-            result.padding = 0;
-            result.region = [
-                {
-                    clip: true
-                }
-            ];
-            result.animation = true;
-            return result;
-        };
-        const datasetScatter = (spec, context)=>{
-            const { advancedVSeed, vseed } = context;
-            const { datasetReshapeInfo } = advancedVSeed;
-            const id = datasetReshapeInfo[0].id;
-            const fields = {};
-            return {
-                ...spec,
-                data: {
-                    id,
-                    values: chatType_isPivotChart(vseed) ? void 0 : advancedVSeed.dataset.flat(),
-                    fields: fields
-                }
-            };
+        const areaPercent = [
+            initArea,
+            stackInverse,
+            colorAdapter(color_color, linearColor),
+            background_backgroundColor,
+            percent_percent,
+            datasetXY,
+            progressive,
+            xBand,
+            yLinear,
+            label_label,
+            brush_brush,
+            tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
+            verticalCrosshairLine,
+            colorPointStyleFill(pointStyle_pointStyle),
+            pointStateDimensionHover,
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle),
+            annotationPoint_annotationPoint,
+            annotationVerticalLine_annotationVerticalLine,
+            annotationHorizontalLine_annotationHorizontalLine,
+            annotationArea_annotationArea
+        ];
+        const pivotAreaPercent = [
+            initPivot,
+            pivotGridStyle,
+            pivotIndicatorsAsRow,
+            datasetPivot,
+            pivotIndicators_pivotIndicators([
+                initArea,
+                stackInverse,
+                colorAdapter(color_color, linearColor),
+                background_backgroundColor,
+                percent_percent,
+                datasetXY,
+                progressive,
+                xBand,
+                pivotAxisStyle(yLinear),
+                label_label,
+                brush_brush,
+                tooltip_tooltip,
+                verticalCrosshairLine,
+                colorPointStyleFill(pointStyle_pointStyle),
+                pointStateDimensionHover,
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle),
+                annotationPoint_annotationPoint,
+                annotationVerticalLine_annotationVerticalLine,
+                annotationHorizontalLine_annotationHorizontalLine,
+                annotationArea_annotationArea
+            ]),
+            pivotRowDimensions,
+            pivotColumnDimensions,
+            pivotTitle,
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend),
+            dimensionLinkage
+        ];
+        const areaPercentSpecPipeline = [
+            pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
+        ];
+        const registerAreaPercent = ()=>{
+            Builder.registerAdvancedPipeline('areaPercent', areaPercentAdvancedPipeline);
+            Builder.registerSpecPipeline('areaPercent', areaPercentSpecPipeline);
         };
         const scatterSize = (spec, context)=>{
             const result = {
@@ -8983,7 +9517,7 @@
             initScatter,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetScatter),
+            datasetScatter,
             progressive,
             xLinear,
             yLinear,
@@ -9734,21 +10268,21 @@
         };
         const isObjectLike = (value)=>"object" == typeof value && null !== value;
         const common_isObjectLike = isObjectLike;
-        const isPlainObject_isPlainObject = function(value) {
+        const isPlainObject = function(value) {
             if (!common_isObjectLike(value) || !isType(value, "Object")) return !1;
             if (null === Object.getPrototypeOf(value)) return !0;
             let proto = value;
             for(; null !== Object.getPrototypeOf(proto);)proto = Object.getPrototypeOf(proto);
             return Object.getPrototypeOf(value) === proto;
         };
-        const isPlainObject = isPlainObject_isPlainObject;
+        const common_isPlainObject = isPlainObject;
         const isString = (value, fuzzy = !1)=>{
             const type = typeof value;
             return fuzzy ? "string" === type : "string" === type || isType(value, "String");
         };
         const common_isString = isString;
         function pickWithout(obj, keys) {
-            if (!obj || !isPlainObject(obj)) return obj;
+            if (!obj || !common_isPlainObject(obj)) return obj;
             const result = {};
             return Object.keys(obj).forEach((k)=>{
                 const v = obj[k];
@@ -10045,7 +10579,7 @@
             initPie,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             brush_brush,
             colorPieStyleFill(pieStyle),
@@ -10146,7 +10680,7 @@
             initDonut,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             brush_brush,
             labelPie,
@@ -10374,7 +10908,7 @@
             stackInverse,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             radiusAxis,
             verticalCrosshairRect,
@@ -10495,7 +11029,7 @@
             stackCornerRadius_stackCornerRadius,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             radiusAxis,
             colorRoseStyleFill(roseStyle),
@@ -10717,7 +11251,7 @@
             initRadar,
             colorAdapter(color_color, linearColor),
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             progressive,
             radarAngleAxis,
             radarRadiusAxis,
@@ -10940,7 +11474,7 @@
         const funnel = [
             initFunnel,
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             colorAdapter(color_color, linearColor),
             label_label,
             colorAdapter(discreteLegend, colorLegend),
@@ -11309,7 +11843,7 @@
         const heatmap = [
             initHeatmap,
             background_backgroundColor,
-            playerAdapter(datasetXY),
+            datasetXY,
             colorAdapter(color_color, linearColor),
             label_label,
             heatmapBandAxis,
@@ -12176,7 +12710,7 @@
                     const length = objValue.length;
                     for(; ++index < length;)newValue[index] = objValue[index];
                 }
-            } else isPlainObject(srcValue) ? (newValue = null != objValue ? objValue : {}, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
+            } else common_isPlainObject(srcValue) ? (newValue = null != objValue ? objValue : {}, "function" != typeof objValue && "object" == typeof objValue || (newValue = {})) : isCommon = !1;
             isCommon && baseMerge(newValue, srcValue, shallowArray, skipTargetArray), assignMergeValue(target, key, newValue);
         }
         function assignMergeValue(target, key, value) {
@@ -14010,7 +14544,6 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairLine,
-                        player,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation()
                     },
@@ -14019,7 +14552,6 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairRect,
-                        player,
                         stackCornerRadius: [
                             4,
                             4,
@@ -14035,7 +14567,6 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairRect,
-                        player,
                         stackCornerRadius: [
                             4,
                             4,
@@ -14051,7 +14582,6 @@
                         yAxis: {
                             ...linearAxis
                         },
-                        player,
                         crosshairRect,
                         stackCornerRadius: [
                             4,
@@ -14067,15 +14597,76 @@
                         xAxis: linearAxis,
                         yAxis: barBandAxis,
                         crosshairRect,
+                        stackCornerRadius: [
+                            0,
+                            4,
+                            4,
+                            0
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig(),
+                        annotation: getLightAnnotation()
+                    },
+                    raceBar: {
+                        ...baseConfig,
+                        xAxis: linearAxis,
+                        yAxis: barBandAxis,
+                        crosshairRect,
+                        player,
+                        stackCornerRadius: [
+                            0,
+                            4,
+                            4,
+                            0
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig(),
+                        annotation: getLightAnnotation()
+                    },
+                    raceColumn: {
+                        ...baseConfig,
+                        xAxis: bandAxis,
+                        yAxis: linearAxis,
+                        crosshairRect,
+                        player,
+                        stackCornerRadius: [
+                            4,
+                            4,
+                            0,
+                            0
+                        ],
+                        pivotGrid: getLightPivotChartGridConfig(),
+                        annotation: getLightAnnotation(),
+                        regressionLine: getLightRegressionLine()
+                    },
+                    raceScatter: {
+                        ...baseConfig,
+                        crosshairLine,
+                        sizeRange: [
+                            8,
+                            24
+                        ],
+                        xAxis: {
+                            ...linearAxis,
+                            line: {
+                                ...linearAxis.line,
+                                visible: true
+                            }
+                        },
+                        yAxis: {
+                            ...linearAxis,
+                            line: {
+                                ...linearAxis.line,
+                                visible: true
+                            }
+                        },
+                        label: {
+                            ...baseConfig.label,
+                            showValue: false,
+                            showValuePercent: false
+                        },
                         player,
-                        stackCornerRadius: [
-                            0,
-                            4,
-                            4,
-                            0
-                        ],
                         pivotGrid: getLightPivotChartGridConfig(),
-                        annotation: getLightAnnotation()
+                        annotation: getLightAnnotation(),
+                        regressionLine: getLightRegressionLine()
                     },
                     barParallel: {
                         ...baseConfig,
@@ -14098,7 +14689,6 @@
                         },
                         yAxis: barBandAxis,
                         crosshairRect,
-                        player,
                         stackCornerRadius: [
                             0,
                             4,
@@ -14113,7 +14703,6 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairLine,
-                        player,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation()
                     },
@@ -14123,7 +14712,6 @@
                         yAxis: {
                             ...linearAxis
                         },
-                        player,
                         crosshairLine,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation()
@@ -14154,7 +14742,6 @@
                             showValue: false,
                             showValuePercent: false
                         },
-                        player,
                         pivotGrid: getLightPivotChartGridConfig(),
                         annotation: getLightAnnotation(),
                         regressionLine: getLightRegressionLine()
@@ -14181,7 +14768,6 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
-                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     donut: {
@@ -14192,12 +14778,10 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
-                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     radar: {
                         ...baseConfig,
-                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     rose: {
@@ -14207,7 +14791,6 @@
                             showValuePercent: true,
                             showDimension: true
                         },
-                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     roseParallel: {
@@ -14217,14 +14800,12 @@
                             showValuePercent: true,
                             showDimension: true
                         },
-                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     funnel: {
                         ...baseConfig,
                         label: getFunnelLightLabel(),
                         transform: getLightFunnelTransformTheme(),
-                        player,
                         pivotGrid: getLightPivotChartGridConfig()
                     },
                     heatmap: {
@@ -14236,7 +14817,6 @@
                             ...baseConfig.label,
                             labelColorSmartInvert: true
                         },
-                        player,
                         cell: getLightHeatmapCellTheme(),
                         pivotGrid: getLightPivotChartGridConfig()
                     },
@@ -14299,7 +14879,6 @@
                         xAxis: bandAxis,
                         yAxis: linearAxis,
                         crosshairLine: crosshairLine,
-                        player,
                         pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation()
                     },
@@ -14316,7 +14895,6 @@
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation(),
-                        player,
                         regressionLine: getDarkRegressionLine()
                     },
                     columnParallel: {
@@ -14331,8 +14909,7 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation(),
-                        player
+                        annotation: getDarkAnnotation()
                     },
                     columnPercent: {
                         ...baseConfig,
@@ -14346,8 +14923,7 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation(),
-                        player
+                        annotation: getDarkAnnotation()
                     },
                     bar: {
                         ...baseConfig,
@@ -14361,7 +14937,68 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
+                        annotation: getDarkAnnotation()
+                    },
+                    raceBar: {
+                        ...baseConfig,
+                        xAxis: linearAxis,
+                        yAxis: barBandAxis,
+                        crosshairRect: crosshairRect,
+                        stackCornerRadius: [
+                            0,
+                            4,
+                            4,
+                            0
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        annotation: getDarkAnnotation(),
+                        player
+                    },
+                    raceColumn: {
+                        ...baseConfig,
+                        xAxis: bandAxis,
+                        yAxis: linearAxis,
+                        crosshairRect: crosshairRect,
+                        stackCornerRadius: [
+                            4,
+                            4,
+                            0,
+                            0
+                        ],
+                        pivotGrid: getDarkPivotChartGridConfig(),
+                        annotation: getDarkAnnotation(),
+                        player,
+                        regressionLine: getDarkRegressionLine()
+                    },
+                    raceScatter: {
+                        ...baseConfig,
+                        crosshairLine,
+                        sizeRange: [
+                            8,
+                            24
+                        ],
+                        xAxis: {
+                            ...linearAxis,
+                            line: {
+                                ...linearAxis.line,
+                                visible: true
+                            }
+                        },
+                        yAxis: {
+                            ...linearAxis,
+                            line: {
+                                ...linearAxis.line,
+                                visible: true
+                            }
+                        },
+                        label: {
+                            ...baseConfig.label,
+                            showValue: false,
+                            showValuePercent: false
+                        },
+                        pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation(),
+                        regressionLine: getDarkRegressionLine(),
                         player
                     },
                     barParallel: {
@@ -14376,8 +15013,7 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation(),
-                        player
+                        annotation: getDarkAnnotation()
                     },
                     barPercent: {
                         ...baseConfig,
@@ -14391,8 +15027,7 @@
                             0
                         ],
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation(),
-                        player
+                        annotation: getDarkAnnotation()
                     },
                     area: {
                         ...baseConfig,
@@ -14400,8 +15035,7 @@
                         yAxis: linearAxis,
                         crosshairLine: crosshairLine,
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation(),
-                        player
+                        annotation: getDarkAnnotation()
                     },
                     areaPercent: {
                         ...baseConfig,
@@ -14409,8 +15043,7 @@
                         yAxis: linearAxis,
                         crosshairLine: crosshairLine,
                         pivotGrid: getDarkPivotChartGridConfig(),
-                        annotation: getDarkAnnotation(),
-                        player
+                        annotation: getDarkAnnotation()
                     },
                     scatter: {
                         ...baseConfig,
@@ -14440,8 +15073,7 @@
                         },
                         pivotGrid: getDarkPivotChartGridConfig(),
                         annotation: getDarkAnnotation(),
-                        regressionLine: getDarkRegressionLine(),
-                        player
+                        regressionLine: getDarkRegressionLine()
                     },
                     dualAxis: {
                         ...baseConfig,
@@ -14465,8 +15097,7 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig(),
-                        player
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     donut: {
                         ...baseConfig,
@@ -14476,13 +15107,11 @@
                             labelLayout: 'arc',
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig(),
-                        player
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     radar: {
                         ...baseConfig,
-                        pivotGrid: getDarkPivotChartGridConfig(),
-                        player
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     rose: {
                         ...baseConfig,
@@ -14491,8 +15120,7 @@
                             showValuePercent: true,
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig(),
-                        player
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     roseParallel: {
                         ...baseConfig,
@@ -14501,15 +15129,13 @@
                             showValuePercent: true,
                             showDimension: true
                         },
-                        pivotGrid: getDarkPivotChartGridConfig(),
-                        player
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     funnel: {
                         ...baseConfig,
                         label: getFunnelDarkLabel(),
                         transform: getDarkFunnelTransformTheme(),
-                        pivotGrid: getDarkPivotChartGridConfig(),
-                        player
+                        pivotGrid: getDarkPivotChartGridConfig()
                     },
                     heatmap: {
                         ...baseConfig,
@@ -14520,7 +15146,6 @@
                             ...baseConfig.label,
                             labelColorSmartInvert: true
                         },
-                        player,
                         cell: getDarkHeatmapCellTheme(),
                         pivotGrid: getDarkPivotChartGridConfig()
                     },
@@ -14567,6 +15192,9 @@
             registerColumnParallel();
             registerColumnPercent();
             registerBar();
+            registerRaceBar();
+            registerRaceColumn();
+            registerRaceScatter();
             registerBarParallel();
             registerBarPercent();
             registerArea();
@@ -14591,6 +15219,10 @@
         const updateSpec = (chartType, specPipe)=>{
             Builder.updateSpec(chartType, specPipe);
         };
+        const condition_condition = (condition, truePipe, falsePipe)=>(spec, context)=>{
+                if (condition(context)) return truePipe(spec, context);
+                return falsePipe(spec, context);
+            };
         const measureDepth = (measures = [])=>{
             if (!measures) return 0;
             let depth = 1;
@@ -14740,7 +15372,7 @@
         const xid = /^[0-9a-vA-V]{20}$/;
         const ksuid = /^[A-Za-z0-9]{27}$/;
         const nanoid = /^[a-zA-Z0-9_-]{21}$/;
-        const duration = /^P(?:(\d+W)|(?!.*W)(?=\d|T\d)(\d+Y)?(\d+M)?(\d+D)?(T(?=\d)(\d+H)?(\d+M)?(\d+([.,]\d+)?S)?)?)$/;
+        const regexes_duration = /^P(?:(\d+W)|(?!.*W)(?=\d|T\d)(\d+Y)?(\d+M)?(\d+D)?(T(?=\d)(\d+H)?(\d+M)?(\d+([.,]\d+)?S)?)?)$/;
         const guid = /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12})$/;
         const uuid = (version)=>{
             if (!version) return /^([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-8][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}|00000000-0000-0000-0000-000000000000)$/;
@@ -15886,7 +16518,7 @@
             $ZodStringFormat.init(inst, def);
         });
         const $ZodISODuration = /*@__PURE__*/ $constructor("$ZodISODuration", (inst, def)=>{
-            def.pattern ?? (def.pattern = duration);
+            def.pattern ?? (def.pattern = regexes_duration);
             $ZodStringFormat.init(inst, def);
         });
         const $ZodIPv4 = /*@__PURE__*/ $constructor("$ZodIPv4", (inst, def)=>{
@@ -17976,6 +18608,7 @@
             'bar',
             'barPercent',
             'barParallel',
+            'raceBar',
             'area',
             'areaPercent',
             'scatter',
@@ -18759,25 +19392,6 @@
             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(),
@@ -18790,8 +19404,7 @@
             pivotGrid: zPivotChartGridConfig.nullish(),
             annotation: zAnnotationConfig.nullish(),
             dimensionLinkage: zDimensionLinkage.nullish(),
-            brush: zBrushConfig.nullish(),
-            player: zPlayer.nullish()
+            brush: zBrushConfig.nullish()
         });
         const zStackCornerRadius = schemas_number().or(schemas_array(schemas_number())).default([
             3,
@@ -18840,7 +19453,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
@@ -18862,7 +19474,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             xAxis: zXLinearAxis.nullish(),
             yAxis: zYBandAxis.nullish(),
             crosshairRect: zCrosshairRect.nullish(),
@@ -18880,7 +19491,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             xAxis: zXBandAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairLine: zCrosshairLine.nullish(),
@@ -18896,7 +19506,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             xAxis: zXLinearAxis.nullish(),
             yAxis: zYLinearAxis.nullish(),
             crosshairLine: zCrosshairLine.nullish(),
@@ -18936,7 +19545,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish(),
             cornerRadius: schemas_number().nullish(),
             brush: zBrushConfig.nullish()
@@ -18949,7 +19557,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish()
         });
         const zRoseParallelConfig = zRoseConfig;
@@ -18963,7 +19570,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zLegend.nullish(),
-            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish(),
             transform: zFunnelTransform.nullish()
         });
@@ -18979,7 +19585,6 @@
             color: zColor.nullish(),
             tooltip: zTooltip.nullish(),
             legend: zColorLegend.nullish(),
-            player: zPlayer.nullish(),
             pivotGrid: zPivotChartGridConfig.nullish(),
             cell: zHeatmapCell.nullish(),
             xAxis: zXBandAxis.nullish(),
@@ -19060,6 +19665,35 @@
             dimensionLinkage: zDimensionLinkage.nullish(),
             brush: zBrushConfig.nullish()
         });
+        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 zRaceBarConfig = zBarConfig.extend({
+            player: zPlayer.nullish()
+        });
+        const zRaceColumnConfig = zColumnConfig.extend({
+            player: zPlayer.nullish()
+        });
+        const zRaceScatterConfig = zScatterConfig.extend({
+            xAxis: zXBandAxis.nullish(),
+            player: zPlayer.nullish()
+        });
         const zConfig = schemas_object({
             table: zTableConfig.nullish(),
             pivotTable: zPivotTableConfig.nullish(),
@@ -19079,6 +19713,9 @@
             pie: zPieConfig.nullish(),
             donut: zDonutConfig.nullish(),
             radar: zRadarConfig.nullish(),
+            raceBar: zRaceBarConfig.nullish(),
+            raceColumn: zRaceColumnConfig.nullish(),
+            raceScatter: zRaceScatterConfig.nullish(),
             funnel: zFunnelConfig.nullish(),
             heatmap: zHeatmapConfig.nullish(),
             boxPlot: zBoxplotConfig.nullish(),
@@ -19443,6 +20080,93 @@
             dimensionLinkage: zDimensionLinkage.nullish(),
             locale: zLocale.nullish()
         });
+        const zRaceBar = schemas_object({
+            chartType: literal('raceBar'),
+            dataset: zDataset.nullish(),
+            encoding: zEncoding.nullish(),
+            dimensions: zDimensions.nullish(),
+            measures: zMeasures.nullish(),
+            page: zPage.nullish(),
+            player: zPlayer.nullish(),
+            sort: zSort.nullish(),
+            backgroundColor: zBackgroundColor.nullish(),
+            color: zColor.nullish(),
+            label: zLabel.nullish(),
+            legend: zLegend.nullish(),
+            tooltip: zTooltip.nullish(),
+            brush: zBrush.nullish(),
+            xAxis: zXLinearAxis.nullish(),
+            yAxis: zYBandAxis.nullish(),
+            crosshairRect: zCrosshairRect.nullish(),
+            stackCornerRadius: zStackCornerRadius.nullish(),
+            barMaxWidth: zBarMaxWidth.nullish(),
+            sortLegend: zSortLegend.nullish(),
+            theme: zTheme.nullish(),
+            barStyle: schemas_array(zBarStyle).or(zBarStyle).nullish(),
+            annotationPoint: schemas_array(zAnnotationPoint).or(zAnnotationPoint).nullish(),
+            annotationVerticalLine: schemas_array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(),
+            annotationHorizontalLine: schemas_array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(),
+            annotationArea: schemas_array(zAnnotationArea).or(zAnnotationArea).nullish(),
+            dimensionLinkage: zDimensionLinkage.nullish(),
+            locale: zLocale.nullish()
+        });
+        const zRaceColumn = schemas_object({
+            chartType: literal('raceColumn'),
+            dataset: zDataset.nullish(),
+            encoding: zEncoding.nullish(),
+            dimensions: zDimensions.nullish(),
+            measures: zMeasures.nullish(),
+            page: zPage.nullish(),
+            player: zPlayer.nullish(),
+            sort: zSort.nullish(),
+            backgroundColor: zBackgroundColor.nullish(),
+            color: zColor.nullish(),
+            label: zLabel.nullish(),
+            legend: zLegend.nullish(),
+            tooltip: zTooltip.nullish(),
+            brush: zBrush.nullish(),
+            xAxis: zYBandAxis.nullish(),
+            yAxis: zXLinearAxis.nullish(),
+            crosshairRect: zCrosshairRect.nullish(),
+            stackCornerRadius: zStackCornerRadius.nullish(),
+            barMaxWidth: zBarMaxWidth.nullish(),
+            sortLegend: zSortLegend.nullish(),
+            theme: zTheme.nullish(),
+            barStyle: schemas_array(zBarStyle).or(zBarStyle).nullish(),
+            annotationPoint: schemas_array(zAnnotationPoint).or(zAnnotationPoint).nullish(),
+            annotationVerticalLine: schemas_array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(),
+            annotationHorizontalLine: schemas_array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(),
+            annotationArea: schemas_array(zAnnotationArea).or(zAnnotationArea).nullish(),
+            dimensionLinkage: zDimensionLinkage.nullish(),
+            locale: zLocale.nullish()
+        });
+        const zRaceScatter = schemas_object({
+            chartType: literal('raceScatter'),
+            dataset: zDataset.nullish(),
+            encoding: zEncoding.nullish(),
+            dimensions: zDimensions.nullish(),
+            measures: zMeasures.nullish(),
+            page: zPage.nullish(),
+            player: zPlayer.nullish(),
+            sort: zSort.nullish(),
+            backgroundColor: zBackgroundColor.nullish(),
+            color: zColor.nullish(),
+            label: zLabel.nullish(),
+            legend: zLegend.nullish(),
+            tooltip: zTooltip.nullish(),
+            brush: zBrush.nullish(),
+            xAxis: zXLinearAxis.nullish(),
+            yAxis: zYLinearAxis.nullish(),
+            crosshairLine: zCrosshairLine.nullish(),
+            theme: zTheme.nullish(),
+            pointStyle: schemas_array(zPointStyle).or(zPointStyle).nullish(),
+            annotationPoint: schemas_array(zAnnotationPoint).or(zAnnotationPoint).nullish(),
+            annotationVerticalLine: schemas_array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(),
+            annotationHorizontalLine: schemas_array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(),
+            annotationArea: schemas_array(zAnnotationArea).or(zAnnotationArea).nullish(),
+            regressionLine: zRegressionLine.nullish(),
+            locale: zLocale.nullish()
+        });
         const zBarParallel = schemas_object({
             chartType: literal('barParallel'),
             dataset: zDataset.nullish(),
@@ -19807,6 +20531,9 @@
             zRose,
             zRoseParallel,
             zRadar,
+            zRaceBar,
+            zRaceColumn,
+            zRaceScatter,
             zFunnel,
             zHeatmap,
             zBoxPlot,