@visactor/vseed 0.0.33 → 0.0.35

package/dist/umd/index.js

@@ -38,10 +38,11 @@
             areaSpecPipeline: ()=>areaSpecPipeline,
             isTable: ()=>isTable,
             zDonut: ()=>zDonut,
+            zDualMeasures: ()=>zDualMeasures,
             zPie: ()=>zPie,
-            zRoseConfig: ()=>zRoseConfig,
             findFirstMeasure: ()=>findFirstMeasure,
             scatterAdvancedPipeline: ()=>scatterAdvancedPipeline,
+            zRoseConfig: ()=>zRoseConfig,
             updateSpec: ()=>updateSpec,
             zCrosshairRect: ()=>zCrosshairRect,
             scatterSpecPipeline: ()=>scatterSpecPipeline,
@@ -50,6 +51,7 @@
             zColumnConfig: ()=>zColumnConfig,
             zAnnotation: ()=>zAnnotation,
             selector: ()=>selector_selector,
+            zDualMeasure: ()=>zDualMeasure,
             zSortLegend: ()=>zSortLegend,
             pivotTableAdvancedPipeline: ()=>pivotTableAdvancedPipeline,
             zYBandAxis: ()=>zYBandAxis,
@@ -109,27 +111,27 @@
             registerPivotTable: ()=>registerPivotTable,
             tableAdvancedPipeline: ()=>tableAdvancedPipeline,
             pieSpecPipeline: ()=>pieSpecPipeline,
+            dualAxisSpecPipeline: ()=>dualAxisSpecPipeline,
             registerDarkTheme: ()=>registerDarkTheme,
             zAnnotationVerticalLine: ()=>zAnnotationVerticalLine,
-            zChartType: ()=>zChartType,
             barSpecPipeline: ()=>barSpecPipeline,
-            zCrosshairLine: ()=>zCrosshairLine,
+            zChartType: ()=>zChartType,
             registerRose: ()=>registerRose,
-            zMeasureTree: ()=>zMeasureTree,
+            zCrosshairLine: ()=>zCrosshairLine,
             unfoldDimensions: ()=>unfoldDimensions,
             roseParallelAdvancedPipeline: ()=>roseParallelAdvancedPipeline,
             registerTable: ()=>registerTable,
-            Builder: ()=>Builder,
             autoFormatter: ()=>autoFormatter,
             findFirstDimension: ()=>findFirstDimension,
+            Builder: ()=>Builder,
             registerAll: ()=>registerAll,
             registerBar: ()=>registerBar,
             isVChart: ()=>isVChart,
             radarSpecPipeline: ()=>radarSpecPipeline,
+            zMeasureTree: ()=>zMeasureTree,
             zPieConfig: ()=>zPieConfig,
             zPivotTable: ()=>zPivotTable,
             zRadar: ()=>zRadar,
-            zRose: ()=>zRose,
             registerLine: ()=>registerLine,
             registerCustomTheme: ()=>registerCustomTheme,
             zColor: ()=>zColor,
@@ -140,16 +142,16 @@
             zDonutConfig: ()=>zDonutConfig,
             zFunnelConfig: ()=>zFunnelConfig,
             zMeasureGroup: ()=>zMeasureGroup,
-            zMeasures: ()=>zMeasures,
+            zDualAxis: ()=>zDualAxis,
             FoldMeasureName: ()=>FoldMeasureName,
-            zRadarConfig: ()=>zRadarConfig,
+            zDualChartType: ()=>zDualChartType,
             darkTheme: ()=>darkTheme,
             createNumFormatter: ()=>createNumFormatter,
             zAreaConfig: ()=>zAreaConfig,
             zAxis: ()=>zAxis,
             isVTable: ()=>isVTable,
-            zTable: ()=>zTable,
-            zUnfoldInfo: ()=>zUnfoldInfo,
+            zMeasures: ()=>zMeasures,
+            zRadarConfig: ()=>zRadarConfig,
             zLine: ()=>zLine,
             columnSpecPipeline: ()=>columnSpecPipeline,
             UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
@@ -160,6 +162,8 @@
             ORIGINAL_DATA: ()=>ORIGINAL_DATA,
             zStackCornerRadius: ()=>zStackCornerRadius,
             zAnnotationArea: ()=>zAnnotationArea,
+            zUnfoldInfo: ()=>zUnfoldInfo,
+            zRose: ()=>zRose,
             columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
             i18n: ()=>i18n,
             zPointStyle: ()=>zPointStyle,
@@ -168,12 +172,15 @@
             registerColumnParallel: ()=>registerColumnParallel,
             updateAdvanced: ()=>updateAdvanced,
             zDimension: ()=>zDimension,
+            zTable: ()=>zTable,
+            FoldSecondaryMeasureValue: ()=>FoldSecondaryMeasureValue,
             zSort: ()=>zSort,
             isPivotChart: ()=>isPivotChart,
             zDualAxisConfig: ()=>zDualAxisConfig,
             zColumn: ()=>zColumn,
             zCustomTheme: ()=>zCustomTheme,
             zLineConfig: ()=>zLineConfig,
+            FoldPrimaryMeasureValue: ()=>FoldPrimaryMeasureValue,
             zTableConfig: ()=>zTableConfig,
             zXBandAxis: ()=>zXBandAxis,
             dataReshapeFor1D: ()=>dataReshapeFor1D,
@@ -191,15 +198,17 @@
             zMeasure: ()=>zMeasure,
             areaRangeSpecPipeline: ()=>areaRangeSpecPipeline,
             areaRangeAdvancedPipeline: ()=>areaRangeAdvancedPipeline,
-            zAreaRange: ()=>zAreaRange,
+            dualAxisAdvancedPipeline: ()=>dualAxisAdvancedPipeline,
             registerScatter: ()=>registerScatter,
-            zEncoding: ()=>zEncoding,
+            zAreaRange: ()=>zAreaRange,
+            measureDepth: ()=>measureDepth,
             autoNumFormatter: ()=>autoNumFormatter,
             zAdvancedVSeed: ()=>zAdvancedVSeed,
             tableSpecPipeline: ()=>tableSpecPipeline,
             zConfig: ()=>zConfig,
-            zRoseParallelConfig: ()=>zRoseParallelConfig,
+            zEncoding: ()=>zEncoding,
             zBarStyle: ()=>zBarStyle,
+            zRoseParallelConfig: ()=>zRoseParallelConfig,
             zXLinearAxis: ()=>zXLinearAxis,
             zAreaPercent: ()=>zAreaPercent,
             columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
@@ -238,11 +247,11 @@
             const start = 'undefined' != typeof performance ? performance.now() : Date.now();
             const { chartType } = builder.vseed;
             if (!chartType) throw new Error('chartType is nil in buildAdvanced');
-            const pipeline = builder.getAdvancedPipeline(chartType);
+            const pipeline = Builder.getAdvancedPipeline(chartType);
             if (!pipeline) throw new Error(`no advanced pipeline for chartType ${chartType}`);
             const context = {
                 vseed: builder.vseed,
-                customTheme: builder.getThemeMap()
+                customTheme: Builder.getThemeMap()
             };
             try {
                 return execPipeline(pipeline, context);
@@ -258,7 +267,7 @@
             const start = 'undefined' != typeof performance ? performance.now() : Date.now();
             const { chartType } = builder.vseed;
             if (!chartType) throw new Error('chartType is nil in buildSpec');
-            const pipeline = builder.getSpecPipeline(chartType);
+            const pipeline = Builder.getSpecPipeline(chartType);
             if (!pipeline) throw new Error(`no spec pipeline for chartType ${chartType}`);
             const context = {
                 vseed: builder.vseed,
@@ -425,20 +434,6 @@
             build = ()=>build(this);
             buildSpec = (advanced)=>buildSpec(this, advanced);
             buildAdvanced = ()=>buildAdvanced(this);
-            getAdvancedPipeline = (chartType)=>{
-                const customPipe = Builder._customAdvancedPipe[chartType];
-                const pipeline = Builder._advancedPipelineMap[chartType];
-                if (customPipe) pipeline.push(customPipe);
-                return pipeline;
-            };
-            getSpecPipeline = (chartType)=>{
-                const customPipe = Builder._customSpecPipe[chartType];
-                const pipeline = Builder._specPipelineMap[chartType];
-                if (customPipe) pipeline.push(customPipe);
-                return pipeline;
-            };
-            getTheme = (themeKey)=>Builder._themeMap[themeKey];
-            getThemeMap = ()=>Builder._themeMap;
             getColorItems = ()=>getColorItems(this);
             getColorIdMap = ()=>getColorIdMap(this);
             get vseed() {
@@ -465,12 +460,26 @@
             set performance(value) {
                 this._performance = value;
             }
+            static getAdvancedPipeline = (chartType)=>{
+                const customPipe = Builder._customAdvancedPipe[chartType];
+                const pipeline = Builder._advancedPipelineMap[chartType];
+                if (customPipe) pipeline.push(customPipe);
+                return pipeline;
+            };
+            static getSpecPipeline = (chartType)=>{
+                const customPipe = Builder._customSpecPipe[chartType];
+                const pipeline = Builder._specPipelineMap[chartType];
+                if (customPipe) pipeline.push(customPipe);
+                return pipeline;
+            };
+            static getTheme = (themeKey)=>Builder._themeMap[themeKey];
+            static getThemeMap = ()=>Builder._themeMap;
+            static from = (vseed)=>new Builder(vseed);
             static _advancedPipelineMap = {};
             static _specPipelineMap = {};
             static _customAdvancedPipe = {};
             static _customSpecPipe = {};
             static _themeMap = {};
-            static from = (vseed)=>new Builder(vseed);
         }
         const initAdvancedVSeed = (advancedVSeed, context)=>{
             const { vseed } = context;
@@ -570,7 +579,10 @@
             if (!dataset) throw new Error('dataset is required');
             if (0 === dataset.length) return result;
             if (dimensions) {
-                result.dimensions = dimensions;
+                result.dimensions = dimensions.map((dim)=>({
+                        location: 'dimension',
+                        ...dim
+                    }));
                 return result;
             }
             const top100dataset = dataset.slice(0, 100);
@@ -924,7 +936,7 @@
             const measures = findAllMeasures(vseed.measures);
             if (!dataset) throw new Error('dataset is required');
             if (0 === dataset.length) return result;
-            if (measures) {
+            if (vseed.measures) {
                 result.measures = findAllMeasures(measures);
                 return result;
             }
@@ -1222,6 +1234,15 @@
                 locale: locale || 'zh-CN'
             };
         };
+        const measureDepth = (measures = [])=>{
+            if (!measures) return 0;
+            let depth = 1;
+            preorderTraverse(measures, (node)=>{
+                if ('children' in node) depth = Math.max(depth, 1 + measureDepth(node.children));
+                return false;
+            });
+            return depth;
+        };
         const isTable = (vseed)=>'table' === vseed.chartType;
         const isPivotTable = (vseed)=>'pivotTable' === vseed.chartType;
         const isVTable = (vseed)=>[
@@ -1231,9 +1252,18 @@
         const isVChart = (vseed)=>!isVTable(vseed);
         const isPivotChart = (vseed)=>{
             if (isVTable(vseed)) return false;
+            if ('dualAxis' === vseed.chartType) {
+                if (vseed.measures) {
+                    const depth = measureDepth(vseed.measures);
+                    if (3 === depth) return true;
+                    return false;
+                }
+                if (vseed.dualMeasures && vseed.dualMeasures.length > 1) return true;
+                return false;
+            }
             const { measures = [], dimensions = [] } = vseed;
             const hasRowOrColumnDimension = dimensions && dimensions.some((dimension)=>'rowDimension' === dimension.location || 'columnDimension' === dimension.location);
-            const hasMeasureGroup = measures && measures.find((measure)=>measure && measure.children);
+            const hasMeasureGroup = measures && measures.some((measure)=>measure && measure.children);
             return hasRowOrColumnDimension || hasMeasureGroup;
         };
         const autoMeasures_autoMeasures = (advancedVSeed, context)=>{
@@ -1317,7 +1347,10 @@
             if (!dataset) throw new Error('dataset is required');
             if (0 === dataset.length) return result;
             if (dimensions) {
-                result.dimensions = dimensions;
+                result.dimensions = dimensions.map((dim)=>({
+                        location: 'dimension',
+                        ...dim
+                    }));
                 return result;
             }
             const top100dataset = dataset.slice(0, 100);
@@ -1343,8 +1376,10 @@
                 return execPipeline(pipeline, context, advancedVSeed);
             };
         const FoldMeasureName = '__MeaName__';
-        const FoldMeasureValue = '__MeaValue__';
         const FoldMeasureId = '__MeaId__';
+        const FoldMeasureValue = '__MeaValue__';
+        const FoldPrimaryMeasureValue = '__MeaPrimaryValue__';
+        const FoldSecondaryMeasureValue = '__MeaSecondaryValue__';
         const UnfoldDimensionGroup = '__DimGroup__';
         const UnfoldDimensionGroupId = '__DimGroupID__';
         const Separator = '-';
@@ -1545,6 +1580,7 @@
                 datasetReshapeInfo: [
                     {
                         id: '2D1M',
+                        index: 0,
                         foldInfo,
                         unfoldInfo
                     }
@@ -1569,7 +1605,7 @@
             const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
             const newDatasets = [];
             const datasetReshapeInfo = [];
-            measureGroups.forEach((measureGroup)=>{
+            measureGroups.forEach((measureGroup, index)=>{
                 const measures = measureGroup.children;
                 if (!measures) return;
                 const groupId = measureGroup.id;
@@ -1581,6 +1617,7 @@
                 });
                 const reshapeInfo = {
                     id: groupId,
+                    index,
                     foldInfo,
                     unfoldInfo
                 };
@@ -1879,11 +1916,13 @@
             const { unfoldInfo } = datasetReshapeInfo[0];
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.color) return result;
+            const colorItems = unfoldInfo.colorItems;
+            const colorIdMap = unfoldInfo.colorIdMap;
             const { color } = baseConfig;
             const { colorScheme, colorMapping } = color;
             const mappingList = [];
             if (colorMapping) Object.entries(colorMapping).sort((a, b)=>a[0].split(Separator).length - b[0].split(Separator).length).forEach(([key, value])=>{
-                const idMap = Object.entries(unfoldInfo.colorIdMap).filter(([_, v])=>v.includes(key));
+                const idMap = Object.entries(colorIdMap).filter(([_, v])=>v.includes(key));
                 for (const [colorId] of idMap)mappingList.push([
                     colorId,
                     value
@@ -1891,7 +1930,7 @@
             });
             result.color = {
                 type: 'ordinal',
-                domain: unfoldInfo.colorItems,
+                domain: colorItems,
                 range: colorScheme,
                 specified: Object.fromEntries(mappingList)
             };
@@ -3629,6 +3668,7 @@
                 datasetReshapeInfo: [
                     {
                         id: '2D1M',
+                        index: 0,
                         foldInfo,
                         unfoldInfo
                     }
@@ -3653,7 +3693,7 @@
             const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
             const newDatasets = [];
             const datasetReshapeInfo = [];
-            measureGroups.forEach((measureGroup)=>{
+            measureGroups.forEach((measureGroup, index)=>{
                 const measures = measureGroup.children;
                 if (!measures) return;
                 const groupId = measureGroup.id;
@@ -3665,6 +3705,7 @@
                 });
                 const reshapeInfo = {
                     id: groupId,
+                    index,
                     foldInfo,
                     unfoldInfo
                 };
@@ -5071,6 +5112,7 @@
                 datasetReshapeInfo: [
                     {
                         id: '1D2M',
+                        index: 0,
                         foldInfo,
                         unfoldInfo
                     }
@@ -5092,7 +5134,7 @@
             });
             const newDatasets = [];
             const datasetReshapeInfo = [];
-            measureGroups.forEach((measureGroup)=>{
+            measureGroups.forEach((measureGroup, index)=>{
                 const measures = measureGroup.children;
                 if (!measures) return;
                 const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
@@ -5105,6 +5147,7 @@
                 });
                 const reshapeInfo = {
                     id: groupId,
+                    index,
                     foldInfo,
                     unfoldInfo
                 };
@@ -5117,7 +5160,7 @@
                 datasetReshapeInfo: datasetReshapeInfo
             };
         };
-        const encodingXYY = (advancedVSeed)=>{
+        const encodingAreaRange = (advancedVSeed)=>{
             const result = {
                 ...advancedVSeed
             };
@@ -5194,7 +5237,7 @@
             ], [
                 pivotReshapeTo1D
             ]),
-            encodingXYY,
+            encodingAreaRange,
             sortXBandAxis,
             areaConfig,
             theme_theme,
@@ -5516,6 +5559,7 @@
                 datasetReshapeInfo: [
                     {
                         id: '1D2M',
+                        index: 0,
                         foldInfo,
                         unfoldInfo
                     }
@@ -5537,7 +5581,7 @@
             });
             const newDatasets = [];
             const datasetReshapeInfo = [];
-            measureGroups.forEach((measureGroup)=>{
+            measureGroups.forEach((measureGroup, index)=>{
                 const measures = measureGroup.children;
                 if (!measures) return;
                 const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
@@ -5550,6 +5594,7 @@
                 });
                 const reshapeInfo = {
                     id: groupId,
+                    index,
                     foldInfo,
                     unfoldInfo
                 };
@@ -5591,128 +5636,1129 @@
                         group,
                         color
                     }
-                ];
-            }, []);
-            return {
-                ...result,
-                encoding
-            };
-        };
-        const scatterAdvancedPipeline = [
-            initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
-            autoDimensions_autoDimensions,
-            pivotAdapter([
-                reshapeTo1D2M
-            ], [
-                pivotReshapeTo1D2M
-            ]),
-            encodingYY,
-            scatterConfig,
-            theme_theme,
-            markStyle_markStyle,
-            annotation_annotation
-        ];
-        const initScatter = (spec, context)=>{
-            const result = {
-                ...spec
-            };
-            const { advancedVSeed } = context;
-            const { encoding } = advancedVSeed;
-            if (!encoding[0].y || !encoding[0].x || !encoding[0].group) return result;
-            result.type = 'scatter';
-            result.direction = 'vertical';
-            result.xField = encoding[0].x[0];
-            result.yField = encoding[0].y[0];
-            result.seriesField = encoding[0].group[0];
-            result.padding = 0;
-            result.region = [
-                {
-                    clip: true
+                ];
+            }, []);
+            return {
+                ...result,
+                encoding
+            };
+        };
+        const scatterAdvancedPipeline = [
+            initAdvancedVSeed_initAdvancedVSeed,
+            autoMeasures_autoMeasures,
+            autoDimensions_autoDimensions,
+            pivotAdapter([
+                reshapeTo1D2M
+            ], [
+                pivotReshapeTo1D2M
+            ]),
+            encodingYY,
+            scatterConfig,
+            theme_theme,
+            markStyle_markStyle,
+            annotation_annotation
+        ];
+        const initScatter = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { encoding } = advancedVSeed;
+            if (!encoding[0].y || !encoding[0].x || !encoding[0].group) return result;
+            result.type = 'scatter';
+            result.direction = 'vertical';
+            result.xField = encoding[0].x[0];
+            result.yField = encoding[0].y[0];
+            result.seriesField = encoding[0].group[0];
+            result.padding = 0;
+            result.region = [
+                {
+                    clip: true
+                }
+            ];
+            result.animation = true;
+            return result;
+        };
+        const horizontalCrosshairLine = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed, vseed } = context;
+            const { chartType } = vseed;
+            const config = advancedVSeed.config?.[chartType]?.crosshairLine;
+            if (!config) return result;
+            if (!result.crosshair) result.crosshair = {};
+            const { visible = true, lineColor, labelColor, labelVisible, labelBackgroundColor } = config;
+            const crosshair = result.crosshair;
+            crosshair.yField = {
+                visible,
+                line: {
+                    type: 'line',
+                    style: {
+                        lineWidth: 1,
+                        opacity: 1,
+                        stroke: lineColor,
+                        lineDash: [
+                            4,
+                            2
+                        ]
+                    }
+                },
+                label: {
+                    visible: labelVisible,
+                    labelBackground: {
+                        visible: labelVisible,
+                        style: {
+                            fill: labelBackgroundColor
+                        }
+                    },
+                    style: {
+                        fill: labelColor
+                    }
+                }
+            };
+            return result;
+        };
+        const scatter = [
+            initScatter,
+            color_color,
+            background_backgroundColor,
+            datasetXY,
+            progressive,
+            xLinear,
+            yLinear,
+            label_label,
+            tooltip_tooltip,
+            verticalCrosshairLine,
+            horizontalCrosshairLine,
+            discreteLegend,
+            pointStyle_pointStyle,
+            pointStateHover,
+            annotationPoint_annotationPoint,
+            annotationVerticalLine_annotationVerticalLine,
+            annotationHorizontalLine_annotationHorizontalLine,
+            annotationArea_annotationArea
+        ];
+        const pivotScatter = [
+            initPivot,
+            pivotGridStyle,
+            pivotIndicators_pivotIndicatorsAsRow,
+            datasetPivot,
+            pivotIndicators_pivotIndicators([
+                initScatter,
+                color_color,
+                background_backgroundColor,
+                datasetXY,
+                progressive,
+                xLinear,
+                yLinear,
+                label_label,
+                tooltip_tooltip,
+                verticalCrosshairLine,
+                horizontalCrosshairLine,
+                pointStyle_pointStyle,
+                pointStateHover,
+                annotationPoint_annotationPoint,
+                annotationVerticalLine_annotationVerticalLine,
+                annotationHorizontalLine_annotationHorizontalLine,
+                annotationArea_annotationArea
+            ]),
+            pivotRowDimensions,
+            pivotColumnDimensions,
+            pivotDiscreteLegend
+        ];
+        const scatterSpecPipeline = [
+            pivotAdapter_pivotAdapter(scatter, pivotScatter)
+        ];
+        const registerScatter = ()=>{
+            Builder._advancedPipelineMap.scatter = scatterAdvancedPipeline;
+            Builder._specPipelineMap.scatter = scatterSpecPipeline;
+        };
+        const reshapeTo2D2M = (advancedVSeed, context)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { vseed } = context;
+            const { dataset } = vseed;
+            const { dimensions, measures } = advancedVSeed;
+            if (!measures || !dimensions || !dataset) return result;
+            if (0 === measures.length) throw new Error('measures can not be empty');
+            if (measures.length > 2) throw new Error('measures can not be more than 2');
+            const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
+            const datasets = [];
+            const foldInfoList = [];
+            const unfoldInfoList = [];
+            const primaryMeasures = measures[0];
+            const secondaryMeasures = measures[1] || [];
+            if (primaryMeasures && primaryMeasures.children) {
+                const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, commonDimensions, primaryMeasures.children, {
+                    foldMeasureValue: FoldPrimaryMeasureValue
+                });
+                datasets.push(newDatasets);
+                foldInfoList.push(foldInfo);
+                unfoldInfoList.push(unfoldInfo);
+            }
+            if (secondaryMeasures && secondaryMeasures.children) {
+                const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, commonDimensions, secondaryMeasures.children, {
+                    foldMeasureValue: FoldSecondaryMeasureValue
+                });
+                datasets.push(newDatasets);
+                foldInfoList.push(foldInfo);
+                unfoldInfoList.push(unfoldInfo);
+            }
+            const unfoldInfo = {
+                groupName: unfoldInfoList[0].groupName,
+                groupId: unfoldInfoList[0].groupId,
+                colorItems: unfoldInfoList.flatMap((d)=>d.colorItems),
+                colorIdMap: unfoldInfoList.reduce((prev, cur)=>({
+                        ...prev,
+                        ...cur.colorIdMap
+                    }), {})
+            };
+            return {
+                ...result,
+                dataset: datasets,
+                datasetReshapeInfo: [
+                    {
+                        id: '2D2M',
+                        index: 0,
+                        foldInfo: foldInfoList[0],
+                        foldInfoList: foldInfoList,
+                        unfoldInfo: unfoldInfo
+                    }
+                ]
+            };
+        };
+        const pivotReshapeTo2D2M = (advancedVSeed, context)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { vseed } = context;
+            const { dataset } = vseed;
+            const { dimensions, measures } = advancedVSeed;
+            if (!measures || !dimensions || !dataset) return result;
+            const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
+            const datasetList = [];
+            const datasetReshapeInfo = [];
+            measures.forEach((measureGroup, index)=>{
+                const measures = measureGroup.children || [];
+                if (0 === measures.length) throw new Error('measures can not be empty');
+                if (measures.length > 2) throw new Error('measures can not be more than 2');
+                const datasets = [];
+                const foldInfoList = [];
+                const unfoldInfoList = [];
+                const primaryMeasures = measures[0];
+                const secondaryMeasures = measures[1] || measures[0];
+                if (primaryMeasures && primaryMeasures.children) {
+                    const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, commonDimensions, primaryMeasures.children, {
+                        foldMeasureValue: `${FoldPrimaryMeasureValue}${index}`
+                    });
+                    datasets.push(newDatasets);
+                    foldInfoList.push(foldInfo);
+                    unfoldInfoList.push(unfoldInfo);
+                }
+                if (secondaryMeasures && secondaryMeasures.children) {
+                    const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeFor2D1M(dataset, commonDimensions, secondaryMeasures.children, {
+                        foldMeasureValue: `${FoldSecondaryMeasureValue}${index}`
+                    });
+                    datasets.push(newDatasets);
+                    foldInfoList.push(foldInfo);
+                    unfoldInfoList.push(unfoldInfo);
+                }
+                datasetList.push(datasets.flat(2));
+                const unfoldInfo = {
+                    groupName: unfoldInfoList[0].groupName,
+                    groupId: unfoldInfoList[0].groupId,
+                    colorItems: unfoldInfoList.flatMap((d)=>d.colorItems),
+                    colorIdMap: unfoldInfoList.reduce((prev, cur)=>({
+                            ...prev,
+                            ...cur.colorIdMap
+                        }), {})
+                };
+                const reshapeInfo = {
+                    id: `2D2M-${index}`,
+                    index,
+                    foldInfo: foldInfoList[0],
+                    unfoldInfo: unfoldInfo,
+                    foldInfoList: foldInfoList
+                };
+                datasetReshapeInfo.push(reshapeInfo);
+            });
+            return {
+                ...result,
+                dataset: datasetList,
+                datasetReshapeInfo
+            };
+        };
+        const encodingXYY = (advancedVSeed)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { datasetReshapeInfo, dimensions } = advancedVSeed;
+            if (!datasetReshapeInfo || !dimensions) return result;
+            const xDimension = dimensions.find((item)=>'rowDimension' !== item.location && 'columnDimension' !== item.location) || dimensions[0];
+            const isZeroDimension = 0 === dimensions.length;
+            const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
+                const { foldInfoList, unfoldInfo } = cur;
+                const x = [
+                    isZeroDimension ? foldInfoList[0].measureName : xDimension?.id
+                ];
+                const y = foldInfoList.map((d)=>d.measureValue);
+                const group = [
+                    unfoldInfo.groupId
+                ];
+                const color = [
+                    foldInfoList[0].measureName
+                ];
+                return [
+                    ...prev,
+                    {
+                        x,
+                        y,
+                        group,
+                        color
+                    }
+                ];
+            }, []);
+            return {
+                ...result,
+                encoding
+            };
+        };
+        const dualAxisConfig = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const { chartType } = vseed;
+            const result = {
+                ...advancedVSeed
+            };
+            const config = chunk_2T7K3PFL_i(vseed, [
+                'backgroundColor',
+                'color',
+                'label',
+                'legend',
+                'tooltip',
+                'dualChartType',
+                'primaryYAxis',
+                'secondaryYAxis',
+                'crosshairLine'
+            ]);
+            result.config = {
+                ...result.config || {},
+                [chartType]: {
+                    ...config
+                }
+            };
+            return result;
+        };
+        const autoDualMeasures = (advancedVSeed, context)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { vseed } = context;
+            const { dataset, dualMeasures, measures } = vseed;
+            if (!dataset) throw new Error('dataset is required');
+            if (0 === dataset.length) return result;
+            if (dualMeasures) {
+                result.measures = dualMeasuresToMeasureTree(dualMeasures);
+                return result;
+            }
+            if (measures && measureDepth(measures) > 1) {
+                result.measures = measures;
+                return result;
+            }
+            const top100dataset = dataset.slice(0, 100);
+            const sample = top100dataset.reduce((prev, cur)=>({
+                    ...prev,
+                    ...cur
+                }), {});
+            const newMeasures = measures || Object.keys(sample).filter((key)=>top100dataset.some((item)=>'number' == typeof item[key]) && ![
+                    '',
+                    null,
+                    void 0
+                ].includes(key)).map((measure)=>({
+                    id: measure,
+                    alias: measure
+                }));
+            if (0 === newMeasures.length) result.measures = [];
+            else if (1 === newMeasures.length) result.measures = [
+                {
+                    id: 'primary',
+                    alias: 'primary',
+                    children: newMeasures
+                }
+            ];
+            else if (newMeasures.length > 1) result.measures = [
+                {
+                    id: 'primary',
+                    alias: 'primary',
+                    children: newMeasures.slice(0, 1)
+                },
+                {
+                    id: 'secondary',
+                    alias: 'secondary',
+                    children: newMeasures.slice(1)
+                }
+            ];
+            return result;
+        };
+        const dualMeasuresToMeasureTree = (dualMeasures)=>{
+            const measureTree = dualMeasures.map((item, index)=>{
+                const { primaryMeasures, secondaryMeasures, primaryAlias, secondaryAlias } = item;
+                const groupChildren = [];
+                if (primaryMeasures) {
+                    const arrPrimaryMeasures = Array.isArray(primaryMeasures) ? primaryMeasures : [
+                        primaryMeasures
+                    ];
+                    groupChildren.push({
+                        id: `${index}-primary`,
+                        alias: primaryAlias || arrPrimaryMeasures.map((item)=>item.alias || item.id).toString(),
+                        children: arrPrimaryMeasures
+                    });
+                }
+                if (secondaryMeasures) {
+                    const arrSecondaryMeasures = Array.isArray(secondaryMeasures) ? secondaryMeasures : [
+                        secondaryMeasures
+                    ];
+                    groupChildren.push({
+                        id: `${index}-secondary`,
+                        alias: secondaryAlias || arrSecondaryMeasures.map((item)=>item.alias || item.id).toString(),
+                        children: arrSecondaryMeasures
+                    });
+                }
+                const id = [
+                    primaryAlias,
+                    secondaryAlias,
+                    index
+                ].filter((d)=>!chunk_JK3VNB42_n(d)).join('-');
+                return {
+                    id,
+                    alias: id,
+                    children: groupChildren
+                };
+            });
+            if (1 === dualMeasures.length) return measureTree[0].children || [];
+            return measureTree;
+        };
+        const dualAxisAdvancedPipeline = [
+            initAdvancedVSeed_initAdvancedVSeed,
+            autoDualMeasures,
+            autoDimensions_autoDimensions,
+            pivotAdapter([
+                reshapeTo2D2M
+            ], [
+                pivotReshapeTo2D2M
+            ]),
+            encodingXYY,
+            sortXBandAxis,
+            sort_sortLegend,
+            dualAxisConfig,
+            theme_theme,
+            markStyle_markStyle,
+            annotation_annotation
+        ];
+        const initDualAxisPrimary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { encoding, datasetReshapeInfo } = advancedVSeed;
+            if (!encoding[0].y || !encoding[0].x || !encoding[0].group) return result;
+            result.id = `${datasetReshapeInfo[0].id}-primary-series`;
+            result.type = 'bar';
+            result.direction = 'vertical';
+            result.xField = encoding[0].x[0];
+            result.yField = encoding[0].y[0];
+            result.seriesField = encoding[0].group[0];
+            result.animation = true;
+            return result;
+        };
+        const initDualAxisSecondary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { encoding, datasetReshapeInfo } = advancedVSeed;
+            if (!encoding[0].y || !encoding[0].x || !encoding[0].group) return result;
+            result.id = `${datasetReshapeInfo[0].id}-secondary-series`;
+            result.type = 'line';
+            result.direction = 'vertical';
+            result.xField = encoding[0].x[0];
+            result.yField = encoding[0].y[1];
+            result.seriesField = encoding[0].group[0];
+            result.animation = true;
+            return result;
+        };
+        const dualChartTypePrimary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed, vseed } = context;
+            const { chartType } = vseed;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const index = datasetReshapeInfo[0].index;
+            const config = advancedVSeed.config?.[chartType]?.dualChartType || {
+                primary: 'column',
+                secondary: 'line'
+            };
+            const primary = Array.isArray(config) ? config[index].primary || config[0].primary : config.primary;
+            switch(primary){
+                case 'line':
+                    result.type = 'line';
+                    break;
+                case 'column':
+                    result.type = 'bar';
+                    break;
+                case 'columnParallel':
+                    {
+                        const columnSpec = result;
+                        if (Array.isArray(columnSpec.xField)) columnSpec.xField.push(datasetReshapeInfo[0].unfoldInfo.groupId);
+                        else if (columnSpec.xField) columnSpec.xField = [
+                            columnSpec.xField,
+                            datasetReshapeInfo[0].unfoldInfo.groupId
+                        ];
+                        columnSpec.type = 'bar';
+                        break;
+                    }
+                case 'columnPercent':
+                    result.type = 'bar';
+                    result.percent = true;
+                    break;
+                case 'area':
+                    result.type = 'area';
+                    break;
+                case 'areaPercent':
+                    result.type = 'area';
+                    result.percent = true;
+                    break;
+                case 'scatter':
+                    result.type = 'scatter';
+                    break;
+                default:
+                    result.type = primary;
+            }
+            return result;
+        };
+        const dualChartTypeSecondary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed, vseed } = context;
+            const { chartType } = vseed;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const config = advancedVSeed.config?.[chartType]?.dualChartType || {
+                primary: 'column',
+                secondary: 'line'
+            };
+            const index = datasetReshapeInfo[0].index;
+            const secondary = Array.isArray(config) ? config[index].secondary || config[0].secondary : config.secondary;
+            switch(secondary){
+                case 'line':
+                    result.type = 'line';
+                    break;
+                case 'column':
+                    result.type = 'bar';
+                    break;
+                case 'columnParallel':
+                    {
+                        const columnSpec = result;
+                        if (Array.isArray(columnSpec.xField)) columnSpec.xField.push(datasetReshapeInfo[0].unfoldInfo.groupId);
+                        else if (columnSpec.xField) columnSpec.xField = [
+                            columnSpec.xField,
+                            datasetReshapeInfo[0].unfoldInfo.groupId
+                        ];
+                        columnSpec.type = 'bar';
+                        break;
+                    }
+                case 'columnPercent':
+                    result.type = 'bar';
+                    result.percent = true;
+                    break;
+                case 'area':
+                    result.type = 'area';
+                    break;
+                case 'areaPercent':
+                    result.type = 'area';
+                    result.percent = true;
+                    break;
+                case 'scatter':
+                    result.type = 'scatter';
+                    break;
+                default:
+                    result.type = secondary;
+            }
+            return result;
+        };
+        const datasetPrimary = (spec, context)=>{
+            const { advancedVSeed, vseed } = context;
+            const { encoding, analysis, datasetReshapeInfo } = advancedVSeed;
+            const { orderMapping = {} } = analysis ?? {};
+            const x = encoding[0]?.x?.[0];
+            const group = encoding[0]?.group?.[0];
+            const id = datasetReshapeInfo[0].id;
+            const fields = {};
+            if (x) {
+                const order = orderMapping[x];
+                if (order) fields[x] = {
+                    sortIndex: 0,
+                    domain: order,
+                    lockStatisticsByDomain: true
+                };
+                else fields[x] = {
+                    sortIndex: 0
+                };
+            }
+            if (group) {
+                const order = orderMapping[group];
+                if (order) fields[group] = {
+                    sortIndex: 0,
+                    domain: order,
+                    lockStatisticsByDomain: true
+                };
+                else fields[group] = {
+                    sortIndex: 0
+                };
+            }
+            return {
+                ...spec,
+                data: {
+                    id: `${id}-primary-dataset`,
+                    values: isPivotChart(vseed) ? void 0 : advancedVSeed.dataset[0],
+                    fields: fields
+                }
+            };
+        };
+        const datasetSecondary = (spec, context)=>{
+            const { advancedVSeed, vseed } = context;
+            const { encoding, analysis, datasetReshapeInfo } = advancedVSeed;
+            const { orderMapping = {} } = analysis ?? {};
+            const x = encoding[0]?.x?.[0];
+            const group = encoding[0]?.group?.[0];
+            const id = datasetReshapeInfo[0].id;
+            const fields = {};
+            if (x) {
+                const order = orderMapping[x];
+                if (order) fields[x] = {
+                    sortIndex: 0,
+                    domain: order,
+                    lockStatisticsByDomain: true
+                };
+                else fields[x] = {
+                    sortIndex: 0
+                };
+            }
+            if (group) {
+                const order = orderMapping[group];
+                if (order) fields[group] = {
+                    sortIndex: 0,
+                    domain: order,
+                    lockStatisticsByDomain: true
+                };
+                else fields[group] = {
+                    sortIndex: 0
+                };
+            }
+            return {
+                ...spec,
+                data: {
+                    id: `${id}-secondary-dataset`,
+                    values: isPivotChart(vseed) ? void 0 : advancedVSeed.dataset[1],
+                    fields: fields
+                }
+            };
+        };
+        const labelPrimary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { measures, datasetReshapeInfo, locale } = advancedVSeed;
+            const { chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.label) return result;
+            const foldInfoList = datasetReshapeInfo[0].foldInfoList;
+            const { measureId, measureValue } = foldInfoList[0];
+            const { label } = baseConfig;
+            const { enable } = label;
+            result.label = {
+                visible: enable,
+                formatMethod: (value, datum)=>{
+                    const result = [];
+                    const formatValue = (value)=>{
+                        const id = datum[measureId];
+                        const measure = findMeasureById(measures, id);
+                        if (!measure) return value;
+                        const { format = {}, autoFormat = true } = measure;
+                        if (!chunk_VCYTMP4D_n(format)) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return String(value);
+                    };
+                    result.push(formatValue(datum[measureValue]));
+                    return result.join(' ');
+                }
+            };
+            return result;
+        };
+        const labelSecondary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { measures, datasetReshapeInfo, locale } = advancedVSeed;
+            const { chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.label) return result;
+            if (chunk_JK3VNB42_n(datasetReshapeInfo[0].foldInfoList?.[1])) return result;
+            const foldInfoList = datasetReshapeInfo[0].foldInfoList;
+            const { measureId, measureValue } = foldInfoList[1];
+            const { label } = baseConfig;
+            const { enable } = label;
+            result.label = {
+                visible: enable,
+                formatMethod: (value, datum)=>{
+                    const result = [];
+                    const formatValue = (value)=>{
+                        const id = datum[measureId];
+                        const measure = findMeasureById(measures, id);
+                        if (!measure) return value;
+                        const { format = {}, autoFormat = true } = measure;
+                        if (!chunk_VCYTMP4D_n(format)) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return String(value);
+                    };
+                    result.push(formatValue(datum[measureValue]));
+                    return result.join(' ');
+                }
+            };
+            return result;
+        };
+        const tooltipPrimary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { measures, datasetReshapeInfo, chartType, locale, dimensions } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const { tooltip = {
+                enable: true
+            } } = baseConfig;
+            const { enable } = tooltip;
+            const foldInfoList = datasetReshapeInfo[0].foldInfoList;
+            const unfoldInfo = datasetReshapeInfo[0].unfoldInfo;
+            const { measureId, measureValue, measureName } = foldInfoList[0];
+            const { groupName } = unfoldInfo;
+            result.tooltip = {
+                visible: enable,
+                mark: {
+                    title: {
+                        visible: true
+                    },
+                    content: [
+                        ...dimensions.map((item)=>({
+                                visible: true,
+                                hasShape: true,
+                                shapeType: 'rectRound',
+                                key: (datum)=>{
+                                    if (item.alias || item.id) return item.alias || item.id;
+                                    return datum && datum[item.id];
+                                },
+                                value: (datum)=>datum && datum[item.id]
+                            })),
+                        {
+                            visible: true,
+                            hasShape: true,
+                            key: (datum)=>datum && datum[measureName || groupName] || '',
+                            value: (datum)=>{
+                                if (!datum) return '';
+                                const value = datum[measureValue];
+                                const id = datum[measureId];
+                                const measure = findMeasureById(measures, id);
+                                if (!measure) return String(value);
+                                const { format = {}, autoFormat = true } = measure;
+                                if (!chunk_VCYTMP4D_n(format)) {
+                                    const formatter = createFormatter(format);
+                                    return formatter(value);
+                                }
+                                if (autoFormat) return autoFormatter(value, locale);
+                                return String(value);
+                            }
+                        }
+                    ]
+                },
+                dimension: {
+                    content: [
+                        {
+                            visible: true,
+                            key: (datum)=>datum && datum[groupName] || '',
+                            value: (datum)=>{
+                                if (!datum) return '';
+                                const value = datum[measureValue];
+                                const id = datum[measureId];
+                                const measure = findMeasureById(measures, id);
+                                if (!measure) return String(value);
+                                const { format = {}, autoFormat = true } = measure;
+                                if (!chunk_VCYTMP4D_n(format)) {
+                                    const formatter = createFormatter(format);
+                                    return formatter(value);
+                                }
+                                if (autoFormat) return autoFormatter(value, locale);
+                                return String(value);
+                            },
+                            shapeType: 'rectRound'
+                        }
+                    ]
+                }
+            };
+            return result;
+        };
+        const tooltipSecondary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { measures, datasetReshapeInfo, chartType, locale, dimensions } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const { tooltip = {
+                enable: true
+            } } = baseConfig;
+            const { enable } = tooltip;
+            if (chunk_JK3VNB42_n(datasetReshapeInfo[0].foldInfoList?.[1])) return result;
+            const foldInfoList = datasetReshapeInfo[0].foldInfoList;
+            const unfoldInfo = datasetReshapeInfo[0].unfoldInfo;
+            const { measureId, measureValue, measureName } = foldInfoList[1];
+            const { groupName } = unfoldInfo;
+            result.tooltip = {
+                visible: enable,
+                mark: {
+                    title: {
+                        visible: true
+                    },
+                    content: [
+                        ...dimensions.map((item)=>({
+                                visible: true,
+                                hasShape: true,
+                                shapeType: 'rectRound',
+                                key: (datum)=>{
+                                    if (item.alias || item.id) return item.alias || item.id;
+                                    return datum && datum[item.id];
+                                },
+                                value: (datum)=>datum && datum[item.id]
+                            })),
+                        {
+                            visible: true,
+                            hasShape: true,
+                            key: (datum)=>datum && datum[measureName || groupName] || '',
+                            value: (datum)=>{
+                                if (!datum) return '';
+                                const value = datum[measureValue];
+                                const id = datum[measureId];
+                                const measure = findMeasureById(measures, id);
+                                if (!measure) return String(value);
+                                const { format = {}, autoFormat = true } = measure;
+                                if (!chunk_VCYTMP4D_n(format)) {
+                                    const formatter = createFormatter(format);
+                                    return formatter(value);
+                                }
+                                if (autoFormat) return autoFormatter(value, locale);
+                                return String(value);
+                            }
+                        }
+                    ]
+                },
+                dimension: {
+                    content: [
+                        {
+                            visible: true,
+                            key: (datum)=>datum && datum[groupName] || '',
+                            value: (datum)=>{
+                                if (!datum) return '';
+                                const value = datum[measureValue];
+                                const id = datum[measureId];
+                                const measure = findMeasureById(measures, id);
+                                if (!measure) return String(value);
+                                const { format = {}, autoFormat = true } = measure;
+                                if (!chunk_VCYTMP4D_n(format)) {
+                                    const formatter = createFormatter(format);
+                                    return formatter(value);
+                                }
+                                if (autoFormat) return autoFormatter(value, locale);
+                                return String(value);
+                            },
+                            shapeType: 'rectRound'
+                        }
+                    ]
+                }
+            };
+            return result;
+        };
+        const yLinearPrimary = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed, vseed } = context;
+            const { chartType } = vseed;
+            const { locale, datasetReshapeInfo } = advancedVSeed;
+            const config = advancedVSeed.config?.[chartType]?.primaryYAxis;
+            if (datasetReshapeInfo[0].foldInfoList?.[0] && chunk_VCYTMP4D_n(datasetReshapeInfo[0].foldInfoList[0].foldMap)) return result;
+            const id = `${datasetReshapeInfo[0].id}-primary-axis`;
+            const seriesId = `${datasetReshapeInfo[0].id}-primary-series`;
+            if (!result.axes) result.axes = [];
+            if (!config) {
+                result.axes = [
+                    ...result.axes,
+                    {
+                        visible: true,
+                        id,
+                        seriesId,
+                        type: 'linear',
+                        orient: 'left',
+                        sync: {
+                            axisId: `${datasetReshapeInfo[0].id}-secondary-axis`,
+                            tickAlign: false,
+                            zeroAlign: true
+                        }
+                    }
+                ];
+                return result;
+            }
+            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = config;
+            const linearAxis = {
+                visible,
+                id,
+                seriesId,
+                sync: {
+                    axisId: `${datasetReshapeInfo[0].id}-secondary-axis`,
+                    tickAlign: false,
+                    zeroAlign: true
+                },
+                type: log ? 'log' : 'linear',
+                base: logBase,
+                orient: 'left',
+                nice,
+                zero: log ? false : zero,
+                inverse,
+                max,
+                min,
+                label: {
+                    visible: label?.visible,
+                    formatMethod: (value)=>autoFormatter(value, locale),
+                    style: {
+                        fill: label?.labelColor,
+                        angle: label?.labelAngle,
+                        fontSize: label?.labelFontSize,
+                        fontWeight: label?.labelFontWeight
+                    }
+                },
+                title: {
+                    visible: title?.visible,
+                    text: title?.titleText,
+                    style: {
+                        fill: title?.titleColor,
+                        fontSize: title?.titleFontSize,
+                        fontWeight: title?.titleFontWeight
+                    }
+                },
+                tick: {
+                    visible: tick?.visible,
+                    tickSize: tick?.tickSize,
+                    inside: tick?.tickInside,
+                    style: {
+                        stroke: tick?.tickColor
+                    }
+                },
+                grid: {
+                    visible: grid?.visible,
+                    style: {
+                        lineWidth: grid?.gridWidth,
+                        stroke: grid?.gridColor
+                    }
+                },
+                domainLine: {
+                    visible: line?.visible,
+                    style: {
+                        lineWidth: line?.lineWidth,
+                        stroke: line?.lineColor
+                    }
+                },
+                innerOffset: {
+                    top: LINEAR_AXIS_INNER_OFFSET_TOP
                 }
+            };
+            result.axes = [
+                ...result.axes,
+                linearAxis
             ];
-            result.animation = true;
             return result;
         };
-        const horizontalCrosshairLine = (spec, context)=>{
+        const yLinearSecondary = (spec, context)=>{
             const result = {
                 ...spec
             };
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
-            const config = advancedVSeed.config?.[chartType]?.crosshairLine;
-            if (!config) return result;
-            if (!result.crosshair) result.crosshair = {};
-            const { visible = true, lineColor, labelColor, labelVisible, labelBackgroundColor } = config;
-            const crosshair = result.crosshair;
-            crosshair.yField = {
+            const { locale, datasetReshapeInfo } = advancedVSeed;
+            const config = advancedVSeed.config?.[chartType]?.secondaryYAxis;
+            if (chunk_JK3VNB42_n(datasetReshapeInfo[0].foldInfoList?.[1])) return result;
+            const id = `${datasetReshapeInfo[0].id}-secondary-axis`;
+            const seriesId = `${datasetReshapeInfo[0].id}-secondary-series`;
+            if (!result.axes) result.axes = [];
+            if (!config) {
+                result.axes = [
+                    ...result.axes,
+                    {
+                        visible: true,
+                        id,
+                        seriesId,
+                        type: 'linear',
+                        orient: 'right'
+                    }
+                ];
+                return result;
+            }
+            const { visible = true, label, tick, title, grid, line, zero, nice, inverse, max, min, log, logBase = 10 } = config;
+            const linearAxis = {
                 visible,
-                line: {
-                    type: 'line',
+                id,
+                seriesId,
+                type: log ? 'log' : 'linear',
+                base: logBase,
+                orient: 'right',
+                nice,
+                zero: log ? false : zero,
+                inverse,
+                max,
+                min,
+                label: {
+                    visible: label?.visible,
+                    formatMethod: (value)=>autoFormatter(value, locale),
                     style: {
-                        lineWidth: 1,
-                        opacity: 1,
-                        stroke: lineColor,
-                        lineDash: [
-                            4,
-                            2
-                        ]
+                        fill: label?.labelColor,
+                        angle: label?.labelAngle,
+                        fontSize: label?.labelFontSize,
+                        fontWeight: label?.labelFontWeight
                     }
                 },
-                label: {
-                    visible: labelVisible,
-                    labelBackground: {
-                        visible: labelVisible,
-                        style: {
-                            fill: labelBackgroundColor
-                        }
-                    },
+                title: {
+                    visible: title?.visible,
+                    text: title?.titleText,
                     style: {
-                        fill: labelColor
+                        fill: title?.titleColor,
+                        fontSize: title?.titleFontSize,
+                        fontWeight: title?.titleFontWeight
+                    }
+                },
+                tick: {
+                    visible: tick?.visible,
+                    tickSize: tick?.tickSize,
+                    inside: tick?.tickInside,
+                    style: {
+                        stroke: tick?.tickColor
+                    }
+                },
+                grid: {
+                    visible: grid?.visible,
+                    style: {
+                        lineWidth: grid?.gridWidth,
+                        stroke: grid?.gridColor
+                    }
+                },
+                domainLine: {
+                    visible: line?.visible,
+                    style: {
+                        lineWidth: line?.lineWidth,
+                        stroke: line?.lineColor
                     }
+                },
+                innerOffset: {
+                    top: LINEAR_AXIS_INNER_OFFSET_TOP
                 }
             };
+            result.axes = [
+                ...result.axes,
+                linearAxis
+            ];
             return result;
         };
-        const scatter = [
-            initScatter,
+        const dualAxis = [
+            series([
+                initDualAxisPrimary,
+                dualChartTypePrimary,
+                datasetPrimary,
+                labelPrimary,
+                tooltipPrimary,
+                progressive,
+                barStyle_barStyle,
+                pointStyle_pointStyle,
+                pointStateDimensionHover,
+                lineStyle_lineStyle,
+                areaStyle_areaStyle
+            ], [
+                initDualAxisSecondary,
+                dualChartTypeSecondary,
+                datasetSecondary,
+                labelSecondary,
+                tooltipSecondary,
+                progressive,
+                barStyle_barStyle,
+                pointStyle_pointStyle,
+                pointStateDimensionHover,
+                lineStyle_lineStyle,
+                areaStyle_areaStyle
+            ]),
+            xBand,
+            yLinearPrimary,
+            yLinearSecondary,
             color_color,
             background_backgroundColor,
-            datasetXY,
-            progressive,
-            xLinear,
-            yLinear,
-            label_label,
-            tooltip_tooltip,
-            verticalCrosshairLine,
-            horizontalCrosshairLine,
             discreteLegend,
-            pointStyle_pointStyle,
-            pointStateHover,
+            verticalCrosshairRect,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
             annotationArea_annotationArea
         ];
-        const pivotScatter = [
+        const pivotDualAxis = [
             initPivot,
             pivotGridStyle,
             pivotIndicators_pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators_pivotIndicators([
-                initScatter,
+                series([
+                    initDualAxisPrimary,
+                    dualChartTypePrimary,
+                    datasetPrimary,
+                    labelPrimary,
+                    tooltipPrimary,
+                    progressive,
+                    barStyle_barStyle,
+                    pointStyle_pointStyle,
+                    pointStateDimensionHover,
+                    lineStyle_lineStyle,
+                    areaStyle_areaStyle
+                ], [
+                    initDualAxisSecondary,
+                    dualChartTypeSecondary,
+                    datasetSecondary,
+                    labelSecondary,
+                    tooltipSecondary,
+                    progressive,
+                    barStyle_barStyle,
+                    pointStyle_pointStyle,
+                    pointStateDimensionHover,
+                    lineStyle_lineStyle,
+                    areaStyle_areaStyle
+                ]),
+                xBand,
+                yLinearPrimary,
+                yLinearSecondary,
                 color_color,
                 background_backgroundColor,
-                datasetXY,
-                progressive,
-                xLinear,
-                yLinear,
-                label_label,
-                tooltip_tooltip,
-                verticalCrosshairLine,
-                horizontalCrosshairLine,
-                pointStyle_pointStyle,
-                pointStateHover,
+                verticalCrosshairRect,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -5722,12 +6768,12 @@
             pivotColumnDimensions,
             pivotDiscreteLegend
         ];
-        const scatterSpecPipeline = [
-            pivotAdapter_pivotAdapter(scatter, pivotScatter)
+        const dualAxisSpecPipeline = [
+            pivotAdapter_pivotAdapter(dualAxis, pivotDualAxis)
         ];
-        const registerScatter = ()=>{
-            Builder._advancedPipelineMap.scatter = scatterAdvancedPipeline;
-            Builder._specPipelineMap.scatter = scatterSpecPipeline;
+        const registerDualAxis = ()=>{
+            Builder._advancedPipelineMap.dualAxis = dualAxisAdvancedPipeline;
+            Builder._specPipelineMap.dualAxis = dualAxisSpecPipeline;
         };
         const dataReshapeFor1D1M_emptyReshapeResult = {
             dataset: [],
@@ -5807,6 +6853,7 @@
                 datasetReshapeInfo: [
                     {
                         id: '1D1M',
+                        index: 0,
                         foldInfo,
                         unfoldInfo
                     }
@@ -5828,7 +6875,7 @@
             });
             const newDatasets = [];
             const datasetReshapeInfo = [];
-            measureGroups.forEach((measureGroup)=>{
+            measureGroups.forEach((measureGroup, index)=>{
                 const measures = measureGroup.children;
                 if (!measures) return;
                 const commonDimensions = dimensions.filter((dim)=>'dimension' === dim.location);
@@ -5841,6 +6888,7 @@
                 });
                 const reshapeInfo = {
                     id: groupId,
+                    index,
                     foldInfo,
                     unfoldInfo
                 };
@@ -7194,6 +8242,22 @@
                         },
                         crosshairLine
                     },
+                    dualAxis: {
+                        ...baseConfig,
+                        xAxis: bandAxis,
+                        primaryYAxis: linearAxis,
+                        secondaryYAxis: {
+                            ...linearAxis,
+                            grid: {
+                                visible: false
+                            }
+                        },
+                        dualChartType: {
+                            primary: 'column',
+                            secondary: 'line'
+                        },
+                        crosshairRect
+                    },
                     pie: {
                         ...baseConfig
                     },
@@ -7516,6 +8580,22 @@
                         },
                         crosshairLine
                     },
+                    dualAxis: {
+                        ...baseConfig,
+                        xAxis: bandAxis,
+                        primaryYAxis: linearAxis,
+                        secondaryYAxis: {
+                            ...linearAxis,
+                            grid: {
+                                visible: false
+                            }
+                        },
+                        dualChartType: {
+                            primary: 'column',
+                            secondary: 'line'
+                        },
+                        crosshairRect
+                    },
                     pie: {
                         ...baseConfig
                     },
@@ -7581,6 +8661,7 @@
             registerAreaPercent();
             registerAreaRange();
             registerScatter();
+            registerDualAxis();
             registerPie();
             registerDonut();
             registerRose();
@@ -10903,6 +11984,22 @@
             'funnel',
             'heatmap'
         ]);
+        const zDualChartType = schemas_object({
+            primary: schemas_enum([
+                'line',
+                'column',
+                'columnParallel',
+                'area',
+                'scatter'
+            ]).default('column'),
+            secondary: schemas_enum([
+                'line',
+                'column',
+                'columnParallel',
+                'area',
+                'scatter'
+            ]).default('line')
+        });
         const zDatum = record(schemas_string().or(schemas_number()), any());
         const zDataset = schemas_array(zDatum);
         const zDimension = schemas_object({
@@ -10968,6 +12065,14 @@
         });
         const zMeasures = schemas_array(zMeasure);
         const zMeasureTree = schemas_array(zMeasureGroup.or(zMeasure));
+        const zDualMeasure = schemas_object({
+            id: schemas_string(),
+            primaryMeasures: schemas_array(zMeasure).or(zMeasure).optional(),
+            primaryAlias: schemas_string().optional(),
+            secondaryMeasures: schemas_array(zMeasure).or(zMeasure).optional(),
+            secondaryAlias: schemas_string().optional()
+        });
+        const zDualMeasures = schemas_array(zDualMeasure);
         const zFoldInfo = schemas_object({
             foldMap: record(schemas_string(), schemas_string().or(schemas_undefined())),
             measureId: schemas_string(),
@@ -10982,7 +12087,9 @@
         });
         const zDatasetReshapeInfo = schemas_array(schemas_object({
             id: schemas_string(),
+            index: schemas_number(),
             foldInfo: zFoldInfo,
+            foldInfoList: schemas_array(zFoldInfo).optional(),
             unfoldInfo: zUnfoldInfo
         }));
         const zEncoding = schemas_array(schemas_object({
@@ -11262,7 +12369,12 @@
             label: zLabel.optional(),
             color: zColor.optional(),
             tooltip: zTooltip.optional(),
-            legend: zLegend.optional()
+            legend: zLegend.optional(),
+            dualChartType: schemas_array(zDualChartType).or(zDualChartType).optional(),
+            primaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).optional(),
+            secondaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).optional(),
+            xAxis: zXBandAxis.optional(),
+            crosshairRect: zCrosshairRect.optional()
         });
         const zScatterConfig = schemas_object({
             backgroundColor: zBackgroundColor.optional(),
@@ -11306,8 +12418,8 @@
             area: zAreaConfig.optional(),
             areaPercent: zAreaPercentConfig.optional(),
             areaRange: zAreaRangeConfig.optional(),
-            dualAxis: zDualAxisConfig.optional(),
             scatter: zScatterConfig.optional(),
+            dualAxis: zDualAxisConfig.optional(),
             rose: zRoseConfig.optional(),
             roseParallel: zRoseParallelConfig.optional(),
             pie: zPieConfig.optional(),
@@ -11960,6 +13072,35 @@
             annotationArea: schemas_array(zAnnotationArea).or(zAnnotationArea).optional(),
             locale: zLocale.optional()
         });
+        const zDualAxis = schemas_object({
+            chartType: literal('dualAxis'),
+            dataset: zDataset.optional(),
+            dimensions: zDimensions.optional(),
+            measures: zMeasureTree.optional(),
+            dualMeasures: zDualMeasures.optional(),
+            dualChartType: schemas_array(zDualChartType).or(zDualChartType).optional(),
+            primaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).optional(),
+            secondaryYAxis: schemas_array(zYLinearAxis).or(zYLinearAxis).optional(),
+            xAxis: zXBandAxis.optional(),
+            backgroundColor: zBackgroundColor.optional(),
+            color: zColor.optional(),
+            label: zLabel.optional(),
+            legend: zLegend.optional(),
+            tooltip: zTooltip.optional(),
+            crosshairRect: zCrosshairRect.optional(),
+            sort: zSort.optional(),
+            sortLegend: zSortLegend.optional(),
+            theme: zTheme.optional(),
+            barStyle: schemas_array(zBarStyle).or(zBarStyle).optional(),
+            pointStyle: schemas_array(zPointStyle).or(zPointStyle).optional(),
+            lineStyle: schemas_array(zLineStyle).or(zLineStyle).optional(),
+            areaStyle: schemas_array(zAreaStyle).or(zAreaStyle).optional(),
+            annotationPoint: schemas_array(zAnnotationPoint).or(zAnnotationPoint).optional(),
+            annotationVerticalLine: schemas_array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).optional(),
+            annotationHorizontalLine: schemas_array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).optional(),
+            annotationArea: schemas_array(zAnnotationArea).or(zAnnotationArea).optional(),
+            locale: zLocale.optional()
+        });
         const zRose = schemas_object({
             chartType: literal('rose'),
             dataset: zDataset.optional(),
@@ -12065,6 +13206,7 @@
             zAreaPercent,
             zAreaRange,
             zScatter,
+            zDualAxis,
             zPie,
             zDonut,
             zRose,