@visactor/vseed 0.1.1 → 0.1.3

package/dist/umd/index.js

@@ -30,7 +30,6 @@
         var __webpack_exports__ = {};
         __webpack_require__.r(__webpack_exports__);
         __webpack_require__.d(__webpack_exports__, {
-            zTooltip: ()=>zTooltip,
             funnelAdvancedPipeline: ()=>funnelAdvancedPipeline,
             zHeatmapConfig: ()=>zHeatmapConfig,
             zBar: ()=>zBar,
@@ -80,12 +79,10 @@
             zRoseParallel: ()=>zRoseParallel,
             MeasureName: ()=>MeasureName,
             zDataset: ()=>zDataset,
-            UnfoldDimensionGroupId: ()=>UnfoldDimensionGroupId,
             zNumFormat: ()=>zNumFormat,
             barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
             findAllDimensions: ()=>findAllDimensions,
             FoldYMeasureValue: ()=>FoldYMeasureValue,
-            findDimensionById: ()=>findDimensionById,
             zPivotTableConfig: ()=>zPivotTableConfig,
             zArea: ()=>zArea,
             zColumnParallel: ()=>zColumnParallel,
@@ -111,31 +108,31 @@
             registerLightTheme: ()=>registerLightTheme,
             roseAdvancedPipeline: ()=>roseAdvancedPipeline,
             zBarParallel: ()=>zBarParallel,
-            registerDarkTheme: ()=>registerDarkTheme,
-            registerPivotTable: ()=>registerPivotTable,
             isPartialDatumSelector: ()=>isPartialDatumSelector,
-            pieSpecPipeline: ()=>pieSpecPipeline,
-            isDimensionGroup: ()=>isDimensionGroup,
-            dualAxisSpecPipeline: ()=>dualAxisSpecPipeline,
+            registerPivotTable: ()=>registerPivotTable,
             tableAdvancedPipeline: ()=>tableAdvancedPipeline,
-            barSpecPipeline: ()=>barSpecPipeline,
+            registerDarkTheme: ()=>registerDarkTheme,
+            dualAxisSpecPipeline: ()=>dualAxisSpecPipeline,
+            pieSpecPipeline: ()=>pieSpecPipeline,
             zAnnotationVerticalLine: ()=>zAnnotationVerticalLine,
-            registerRose: ()=>registerRose,
+            barSpecPipeline: ()=>barSpecPipeline,
             zChartType: ()=>zChartType,
+            registerRose: ()=>registerRose,
+            zMeasureTree: ()=>zMeasureTree,
             unfoldDimensions: ()=>unfoldDimensions,
             roseParallelAdvancedPipeline: ()=>roseParallelAdvancedPipeline,
             registerTable: ()=>registerTable,
-            Builder: ()=>Builder,
             isMeasureGroup: ()=>isMeasureGroup,
+            autoFormatter: ()=>autoFormatter,
             YEncoding: ()=>YEncoding,
             registerAll: ()=>registerAll,
             registerBar: ()=>registerBar,
             isVChart: ()=>isVChart,
             radarSpecPipeline: ()=>radarSpecPipeline,
-            findFirstDimension: ()=>findFirstDimension,
-            autoFormatter: ()=>autoFormatter,
-            zMeasureTree: ()=>zMeasureTree,
+            Builder: ()=>Builder,
             zPieConfig: ()=>zPieConfig,
+            zPivotTable: ()=>zPivotTable,
+            zRadar: ()=>zRadar,
             registerLine: ()=>registerLine,
             registerCustomTheme: ()=>registerCustomTheme,
             zColor: ()=>zColor,
@@ -155,21 +152,19 @@
             zAxis: ()=>zAxis,
             isVTable: ()=>isVTable,
             zMeasures: ()=>zMeasures,
-            zPivotTable: ()=>zPivotTable,
+            zRadarConfig: ()=>zRadarConfig,
             zLine: ()=>zLine,
             columnSpecPipeline: ()=>columnSpecPipeline,
-            UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
-            zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
             zFoldInfo: ()=>zFoldInfo,
+            zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
             zLinearColor: ()=>zLinearColor,
+            zStackCornerRadius: ()=>zStackCornerRadius,
             zAreaStyle: ()=>zAreaStyle,
             ORIGINAL_DATA: ()=>ORIGINAL_DATA,
-            zRadarConfig: ()=>zRadarConfig,
+            zUnfoldInfo: ()=>zUnfoldInfo,
             zAnnotationArea: ()=>zAnnotationArea,
-            zStackCornerRadius: ()=>zStackCornerRadius,
             DetailEncoding: ()=>DetailEncoding,
             zRose: ()=>zRose,
-            zUnfoldInfo: ()=>zUnfoldInfo,
             columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
             i18n: ()=>i18n,
             zPointStyle: ()=>zPointStyle,
@@ -178,7 +173,6 @@
             registerColumnParallel: ()=>registerColumnParallel,
             updateAdvanced: ()=>updateAdvanced,
             zDimension: ()=>zDimension,
-            zRadar: ()=>zRadar,
             zTable: ()=>zTable,
             isMeasure: ()=>isMeasure,
             FoldSecondaryMeasureValue: ()=>FoldSecondaryMeasureValue,
@@ -201,10 +195,9 @@
             zBackgroundColor: ()=>zBackgroundColor,
             registerBarParallel: ()=>registerBarParallel,
             registerRadar: ()=>registerRadar,
-            zEncodings: ()=>zEncodings,
-            isDimension: ()=>isDimension,
-            pivotTableSpecPipeline: ()=>pivotTableSpecPipeline,
             zLocale: ()=>zLocale,
+            pivotTableSpecPipeline: ()=>pivotTableSpecPipeline,
+            zMeasure: ()=>zMeasure,
             FoldXMeasureValue: ()=>FoldXMeasureValue,
             dualAxisAdvancedPipeline: ()=>dualAxisAdvancedPipeline,
             registerScatter: ()=>registerScatter,
@@ -216,10 +209,9 @@
             zAdvancedVSeed: ()=>zAdvancedVSeed,
             zConfig: ()=>zConfig,
             zBarStyle: ()=>zBarStyle,
-            zMeasure: ()=>zMeasure,
             zRoseParallelConfig: ()=>zRoseParallelConfig,
-            zAreaPercent: ()=>zAreaPercent,
             zXLinearAxis: ()=>zXLinearAxis,
+            zAreaPercent: ()=>zAreaPercent,
             columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
             isValueSelector: ()=>isValueSelector,
             donutAdvancedPipeline: ()=>donutAdvancedPipeline,
@@ -237,8 +229,8 @@
             lineAdvancedPipeline: ()=>lineAdvancedPipeline,
             dataReshapeByEncoding: ()=>dataReshapeByEncoding,
             lineSpecPipeline: ()=>lineSpecPipeline,
-            isDimensions: ()=>isDimensions,
             zBarPercentConfig: ()=>zBarPercentConfig,
+            zTooltip: ()=>zTooltip,
             createFormatter: ()=>createFormatter,
             zDimensionGroup: ()=>zDimensionGroup,
             isMeasureSelector: ()=>isMeasureSelector,
@@ -1130,32 +1122,6 @@
                 }));
             return result;
         };
-        const findDimensionById = (dimensions = [], id)=>{
-            if (!dimensions) return;
-            let result;
-            preorderTraverse(dimensions, (node)=>{
-                if (!('children' in node)) {
-                    if (node.id === id) {
-                        result = node;
-                        return true;
-                    }
-                }
-                return false;
-            });
-            return result;
-        };
-        const findFirstDimension = (dimensions = [])=>{
-            if (!dimensions) return;
-            let result;
-            preorderTraverse(dimensions, (node)=>{
-                if (!('children' in node)) {
-                    result = node;
-                    return true;
-                }
-                return false;
-            });
-            return result;
-        };
         const findAllDimensions = (dimensions = [])=>{
             if (!dimensions) return [];
             const result = [];
@@ -1479,6 +1445,39 @@
                 locale: locale || 'zh-CN'
             };
         };
+        const getBasicMeasures = (vseed)=>{
+            const { dataset, measures } = vseed;
+            if (!measures || 0 === measures.length) return generateMeasuresByDataset(dataset);
+            return measures;
+        };
+        const generateMeasuresByDataset = (dataset)=>{
+            if (!dataset) throw new Error('dataset is required');
+            if (0 === dataset.length) return [];
+            const top100dataset = dataset.slice(0, 100);
+            const sample = top100dataset.reduce((prev, cur)=>({
+                    ...prev,
+                    ...cur
+                }), {});
+            const basicMeasures = Object.keys(sample).filter((key)=>top100dataset.some((item)=>'number' == typeof item[key]) && ![
+                    '',
+                    null,
+                    void 0
+                ].includes(key)).map((measure)=>({
+                    id: measure,
+                    alias: measure
+                }));
+            return basicMeasures;
+        };
+        const isMeasureTreeWithChildren = (vseed)=>{
+            const { measures } = vseed;
+            if (!measures) return false;
+            return measures.some((measure)=>'children' in measure);
+        };
+        const isMeasureTreeWithParentId = (vseed)=>{
+            const { measures } = vseed;
+            if (!measures) return false;
+            return measures.some((measure)=>'parentId' in measure);
+        };
         const measureDepth = (measures = [])=>{
             if (!measures) return 0;
             let depth = 1;
@@ -1497,23 +1496,26 @@
         const isVChart = (vseed)=>!isVTable(vseed);
         const isPivotChart = (vseed)=>{
             if (isVTable(vseed)) return false;
+            if (isMeasureTreeWithParentId(vseed)) {
+                const parentIds = vseed.measures?.map((measure)=>measure.parentId);
+                return parentIds && parentIds.length > 1;
+            }
             if ('dualAxis' === vseed.chartType || 'scatter' === vseed.chartType) {
                 const { dimensions = [] } = vseed;
                 const hasRowOrColumnDimension = dimensions && dimensions.some((dimension)=>'rowDimension' === dimension.location || 'columnDimension' === dimension.location);
                 if (hasRowOrColumnDimension) return true;
                 if ('scatter' === vseed.chartType) {
-                    if (vseed.measures) {
+                    if (isMeasureTreeWithChildren(vseed)) {
                         const depth = measureDepth(vseed.measures);
-                        if (3 === depth) return true;
-                        return false;
+                        return 3 === depth;
                     }
                     if (vseed.scatterMeasures && vseed.scatterMeasures.length > 1) return true;
+                    return false;
                 }
                 if ('dualAxis' === vseed.chartType) {
-                    if (vseed.measures) {
+                    if (isMeasureTreeWithChildren(vseed)) {
                         const depth = measureDepth(vseed.measures);
-                        if (3 === depth) return true;
-                        return false;
+                        return 3 === depth;
                     }
                     if (vseed.dualMeasures && vseed.dualMeasures.length > 1) return true;
                 }
@@ -1524,77 +1526,49 @@
             const hasMeasureGroup = measures && measures.some((measure)=>measure && measure.children);
             return hasRowOrColumnDimension || hasMeasureGroup;
         };
-        const autoMeasures_autoMeasures = (advancedVSeed, context)=>{
-            const result = {
-                ...advancedVSeed
-            };
-            const { vseed } = context;
-            const { measures, dataset } = vseed;
-            if (!dataset) throw new Error('dataset is required');
-            if (0 === dataset.length) return result;
-            if (isPivotChart(vseed)) return autoMeasureGroup(advancedVSeed, context);
-            if (measures) {
-                result.measures = measures;
-                return result;
-            }
-            const top100dataset = dataset.slice(0, 100);
-            const sample = top100dataset.reduce((prev, cur)=>({
-                    ...prev,
-                    ...cur
-                }), {});
-            result.measures = Object.keys(sample).filter((key)=>top100dataset.some((item)=>'number' == typeof item[key]) && ![
-                    '',
-                    null,
-                    void 0
-                ].includes(key)).map((measure)=>({
-                    id: measure,
-                    alias: measure
-                }));
-            return result;
-        };
-        const autoMeasureGroup = (advancedVSeed, context)=>{
+        const buildMeasures = (advancedVSeed, context)=>{
             const { vseed } = context;
-            const { measures } = vseed;
-            const hasMeasureGroup = measures?.some((measure)=>measure.children);
-            if (!measures) return advancedVSeed;
-            if (!hasMeasureGroup) {
-                const newMeasures = [
-                    {
-                        id: 'measureGroup',
-                        alias: 'measureGroup',
-                        children: measures
-                    }
-                ];
-                return {
-                    ...advancedVSeed,
-                    measures: newMeasures
-                };
+            if (isMeasureTreeWithChildren(vseed)) {
+                advancedVSeed.measures = vseed.measures;
+                return advancedVSeed;
             }
-            let currentGroup = createEmptyMeasureGroup();
-            const measureGroups = [];
-            for (const measure of measures)if ('children' in measure) {
-                if (currentGroup.children?.length) {
-                    currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
-                    currentGroup.id = currentGroup.alias + currentGroup.children.map((item)=>item.id).join('-');
-                    measureGroups.push(currentGroup);
-                    currentGroup = createEmptyMeasureGroup();
-                }
-                measureGroups.push(measure);
-            } else currentGroup.children?.push(measure);
-            if (currentGroup.children?.length) {
-                currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
-                currentGroup.id = currentGroup.alias + currentGroup.children.map((item)=>item.id).join('-');
-                measureGroups.push(currentGroup);
-                currentGroup = createEmptyMeasureGroup();
+            if (isMeasureTreeWithParentId(vseed)) {
+                advancedVSeed.measures = generateMeasuresByParentId(vseed.measures);
+                return advancedVSeed;
             }
-            advancedVSeed.measures = measureGroups;
+            const basicMeasures = getBasicMeasures(vseed);
+            if (isPivotChart(vseed)) advancedVSeed.measures = basicMeasuresToMeasureTree(basicMeasures);
+            else advancedVSeed.measures = basicMeasures;
             return advancedVSeed;
         };
-        const createEmptyMeasureGroup = ()=>({
-                id: '',
-                alias: '',
-                children: []
+        const generateMeasuresByParentId = (measures)=>{
+            const measureTree = [];
+            measures.forEach((measure)=>{
+                if (!measure.parentId) return;
+                const parent = measureTree.find((item)=>item.id === measure.parentId);
+                if (parent && 'children' in parent) {
+                    parent.children = parent.children || [];
+                    parent.children.push(measure);
+                } else measureTree.push({
+                    id: measure.parentId,
+                    children: [
+                        measure
+                    ]
+                });
             });
+            return measureTree;
+        };
+        const basicMeasuresToMeasureTree = (measures)=>{
+            const id = measures.map((item)=>item.id).join('-');
+            const alias = measures.map((item)=>item.alias || item.id).join('-');
+            return [
+                {
+                    id,
+                    alias,
+                    children: measures
+                }
+            ];
+        };
         const ORIGINAL_DATA = '__OriginalData__';
         const Separator = '-';
         const FoldMeasureName = '__MeaName__';
@@ -1611,8 +1585,6 @@
         const DetailEncoding = '__Dim_Detail__';
         const ColorEncoding = '__Dim_Color__';
         const ColorIdEncoding = '__Dim_ColorId__';
-        const UnfoldDimensionGroup = '__DimGroup__';
-        const UnfoldDimensionGroupId = '__DimGroupID__';
         const autoDimensions_autoDimensions = (advancedVSeed, context)=>{
             const result = {
                 ...advancedVSeed
@@ -1652,7 +1624,7 @@
             result.dimensions.push(MeaName);
             return result;
         };
-        const encodingForColumn = (advancedVSeed, context)=>{
+        const encodingForLine = (advancedVSeed, context)=>{
             const { vseed } = context;
             const { dimensions } = advancedVSeed;
             if (!dimensions) return advancedVSeed;
@@ -1665,10 +1637,7 @@
                     (dimensions[1] || dimensions[0]).id
                 ];
                 const detail = encoding.detail || [];
-                const mergedDetail = chunk_QJLMYOTX_i([
-                    ...color,
-                    ...detail
-                ]);
+                const mergedDetail = 0 === detail.length ? dimensions.map((d)=>d.id).filter((id)=>!x.includes(id)) : encoding.detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
@@ -1721,11 +1690,20 @@
             for (let r of e)delete o[r];
             return o;
         }
-        const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName = FoldMeasureName, measureValue = FoldMeasureValue)=>{
+        const foldMeasures = (dataset, measures, encoding, options)=>{
+            const { measureId, measureName, measureValue, colorMeasureId } = options || {};
             const foldInfo = {
                 measureId,
                 measureName,
                 measureValue,
+                colorRange: [
+                    0,
+                    1
+                ],
+                measureRange: [
+                    0,
+                    1
+                ],
                 foldMap: {}
             };
             const result = new Array(dataset.length * measures.length);
@@ -1742,6 +1720,19 @@
                 datum[measureId] = id;
                 datum[measureName] = alias || id;
                 datum[measureValue] = dataset[i][id];
+                if (colorMeasureId) {
+                    const value = datum[ORIGINAL_DATA][colorMeasureId];
+                    datum[ColorEncoding] = value;
+                    datum[ColorIdEncoding] = colorMeasureId;
+                    foldInfo.colorRange = [
+                        Math.min(foldInfo.colorRange[0] || 1 / 0, Number(value)),
+                        Math.max(foldInfo.colorRange[1] || -1 / 0, Number(value))
+                    ];
+                }
+                foldInfo.measureRange = [
+                    Math.min(foldInfo.measureRange[0] || 1 / 0, Number(datum[id])),
+                    Math.max(foldInfo.measureRange[1] || -1 / 0, Number(datum[id]))
+                ];
                 foldInfo.foldMap[id] = alias;
                 result[index++] = datum;
             }
@@ -1777,7 +1768,7 @@
                 applyEncoding(YEncoding, yDimensions, datum, separator);
                 applyEncoding(ColorEncoding, colorDimensions, datum, separator);
                 applyEncoding(DetailEncoding, detailDimensions, datum, separator);
-                if (!datum[ColorEncoding]) continue;
+                if (!colorDimensions.length || !datum[ColorEncoding]) continue;
                 const measureId = String(datum[foldMeasureId]);
                 const colorItem = String(datum[ColorEncoding]);
                 const colorId = colorItemAsId ? colorItem : measureId ? [
@@ -1798,29 +1789,14 @@
         const applyEncoding = (encoding, dimensions, datum, separator)=>{
             if (encoding && dimensions.length) datum[encoding] = dimensions.map((dim)=>String(datum[dim.id])).join(separator);
         };
-        const emptyReshapeResult = {
-            dataset: [],
-            foldInfo: {
-                foldMap: {},
-                measureId: '',
-                measureName: '',
-                measureValue: ''
-            },
-            unfoldInfo: {
-                encodingAngle: AngleEncoding,
-                encodingX: XEncoding,
-                encodingY: YEncoding,
-                encodingDetail: DetailEncoding,
-                encodingColor: ColorEncoding,
-                encodingColorId: ColorIdEncoding,
-                colorItems: [],
-                colorIdMap: {}
-            }
-        };
         const dataReshapeByEncoding = (dataset, dimensions, measures, encoding, options)=>{
-            const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, colorItemAsId = false } = options || {};
-            if (0 === dimensions.length && 0 === measures.length) return emptyReshapeResult;
-            const { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, foldMeasureId, foldMeasureName, foldMeasureValue);
+            const { foldMeasureId = FoldMeasureId, foldMeasureName = FoldMeasureName, foldMeasureValue = FoldMeasureValue, colorItemAsId = false, colorMeasureId } = options || {};
+            const { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, encoding, {
+                measureId: foldMeasureId,
+                measureName: foldMeasureName,
+                measureValue: foldMeasureValue,
+                colorMeasureId
+            });
             const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, dimensions, encoding, {
                 foldMeasureId,
                 separator: Separator,
@@ -1832,6 +1808,24 @@
                 unfoldInfo
             };
         };
+        const colorAdapter = (ordinalPipe, linearPipe)=>(spec, context)=>{
+                const { advancedVSeed } = context;
+                if (isLinearColor(advancedVSeed)) return linearPipe(spec, context);
+                return ordinalPipe(spec, context);
+            };
+        const isLinearColor = (advancedVSeed)=>{
+            const { encoding, measures } = advancedVSeed;
+            const measureIdList = findAllMeasures(measures).map((measure)=>measure.id);
+            const { color } = encoding;
+            return color?.length === 1 && measureIdList.includes(color[0]);
+        };
+        const getColorMeasureId = (advancedVSeed)=>{
+            if (isLinearColor(advancedVSeed)) {
+                const { encoding } = advancedVSeed;
+                const { color } = encoding;
+                return color?.[0];
+            }
+        };
         const reshapeWithEncoding = (advancedVSeed, context)=>{
             const result = {
                 ...advancedVSeed
@@ -1841,7 +1835,9 @@
             const { dimensions, measures, encoding } = advancedVSeed;
             if (!measures || !dimensions || !dataset || !encoding) return result;
             if (0 === measures.length) throw new Error('measures can not be empty');
-            const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, measures, encoding);
+            const { dataset: newDatasets, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, measures, encoding, {
+                colorMeasureId: getColorMeasureId(advancedVSeed)
+            });
             return {
                 ...result,
                 dataset: newDatasets,
@@ -1877,7 +1873,8 @@
                 if (!measures) return;
                 const groupId = measureGroup.id;
                 const { dataset: newSubDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, measures, encoding, {
-                    foldMeasureValue: `${FoldMeasureValue}${groupId}`
+                    foldMeasureValue: `${FoldMeasureValue}${groupId}`,
+                    colorMeasureId: getColorMeasureId(advancedVSeed)
                 });
                 const reshapeInfo = {
                     id: groupId,
@@ -2093,9 +2090,9 @@
         };
         const lineAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
-            encodingForColumn,
+            encodingForLine,
             pivotAdapter([
                 reshapeWithEncoding
             ], [
@@ -2119,7 +2116,7 @@
             result.direction = 'vertical';
             result.xField = unfoldInfo.encodingX;
             result.yField = foldInfo.measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -2180,6 +2177,31 @@
                 ...accurateMap
             };
         };
+        const linearColor = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const { unfoldInfo, id } = datasetReshapeInfo[0];
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.color) return result;
+            const { color } = baseConfig;
+            const { colorScheme, linearColorScheme } = color;
+            result.color = {
+                type: 'linear',
+                range: linearColorScheme || colorScheme || [],
+                domain: [
+                    {
+                        dataId: id,
+                        fields: [
+                            unfoldInfo.encodingColor
+                        ]
+                    }
+                ]
+            };
+            return result;
+        };
         const background_backgroundColor = (spec, context)=>{
             const result = {
                 ...spec
@@ -2687,6 +2709,95 @@
             };
             return result;
         };
+        const colorLegend = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const { unfoldInfo } = datasetReshapeInfo[0];
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.legend) return result;
+            const { legend } = baseConfig;
+            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight } = legend || {};
+            const orient = [
+                'bottom',
+                'bottomLeft',
+                'bottomRight',
+                'bl',
+                'br'
+            ].includes(position) ? 'bottom' : [
+                'top',
+                'topLeft',
+                'topRight',
+                'tl',
+                'tr'
+            ].includes(position) ? 'top' : [
+                'left',
+                'leftTop',
+                'leftBottom',
+                'lt',
+                'lb'
+            ].includes(position) ? 'left' : 'right';
+            const legendPosition = [
+                'topLeft',
+                'bottomLeft',
+                'leftTop',
+                'rightTop',
+                'lt',
+                'rt',
+                'tl',
+                'bl'
+            ].includes(position) ? 'start' : [
+                'topRight',
+                'bottomRight',
+                'leftBottom',
+                'rightBottom',
+                'lb',
+                'rb',
+                'rt',
+                'br'
+            ].includes(position) ? 'end' : 'middle';
+            result.legends = {
+                type: 'color',
+                visible: enable,
+                orient,
+                position: legendPosition,
+                padding: 0,
+                field: unfoldInfo.encodingColor,
+                maxWidth: '30%',
+                startText: {
+                    visible: true,
+                    style: {
+                        fill: labelFontColor,
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight
+                    }
+                },
+                endText: {
+                    visible: true,
+                    style: {
+                        fill: labelFontColor,
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight
+                    }
+                }
+            };
+            return result;
+        };
+        const colorPointStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.point?.style) result.point.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         const selector_selector = (vchartDatum, selector)=>{
             if (!selector) return true;
             const selectorMode = 'And';
@@ -2783,7 +2894,10 @@
             const { markStyle } = advancedVSeed;
             const { pointStyle } = markStyle;
             const result = {
-                ...spec
+                ...spec,
+                point: {
+                    style: {}
+                }
             };
             if (!pointStyle) return result;
             const pointStyles = Array.isArray(pointStyle) ? pointStyle : [
@@ -2827,6 +2941,7 @@
             return {
                 ...result,
                 point: {
+                    ...result.point,
                     state: {
                         ...customMap
                     }
@@ -2882,6 +2997,19 @@
             };
             return result;
         };
+        const colorLineStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.line?.style) result.line.style.stroke = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         function chunk_HVPVHFDT_i(...e) {
             return chunk_WIMGWYZL_u(chunk_HVPVHFDT_p, e);
         }
@@ -2903,10 +3031,13 @@
             const { markStyle, datasetReshapeInfo, dataset } = advancedVSeed;
             const { unfoldInfo } = datasetReshapeInfo[0];
             const { lineStyle } = markStyle;
-            if (!lineStyle) return spec;
             const result = {
-                ...spec
+                ...spec,
+                line: {
+                    style: {}
+                }
             };
+            if (!lineStyle) return result;
             const lineStyles = Array.isArray(lineStyle) ? lineStyle : [
                 lineStyle
             ];
@@ -2950,6 +3081,7 @@
             return {
                 ...result,
                 line: {
+                    ...result.line,
                     state: {
                         ...customMap
                     }
@@ -3725,7 +3857,7 @@
             };
         const line_line = [
             initLine,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -3734,10 +3866,10 @@
             label_label,
             tooltip_tooltip,
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorAdapter(discreteLegend, colorLegend),
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateDimensionHover,
-            lineStyle_lineStyle,
+            colorLineStyleFill(lineStyle_lineStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -3778,9 +3910,51 @@
             Builder._advancedPipelineMap.line = lineAdvancedPipeline;
             Builder._specPipelineMap.line = lineSpecPipeline;
         };
+        const encodingForColumn = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const { dimensions } = advancedVSeed;
+            if (!dimensions) return advancedVSeed;
+            const encoding = vseed.encoding;
+            if (encoding) {
+                const x = encoding.x || [
+                    dimensions[0].id
+                ];
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
+                const detail = encoding.detail || [];
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
+                    ...color,
+                    ...detail
+                ]) : detail;
+                return {
+                    ...advancedVSeed,
+                    encoding: {
+                        ...encoding,
+                        x,
+                        color,
+                        detail: mergedDetail
+                    }
+                };
+            }
+            const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
+            const mergedEncoding = {
+                x: dimensions.slice(0, 1).map((item)=>item.id),
+                color: dimensions.slice(onlyMeasureName ? 0 : 1).map((item)=>item.id),
+                detail: dimensions.slice(onlyMeasureName ? 0 : 1).map((item)=>item.id),
+                tooltip: dimensions.map((item)=>item.id),
+                label: [],
+                row: [],
+                column: []
+            };
+            return {
+                ...advancedVSeed,
+                encoding: mergedEncoding
+            };
+        };
         const columnAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForColumn,
             pivotAdapter([
@@ -3820,9 +3994,14 @@
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
             const stackCornerRadius = advancedVSeed.config?.[chartType]?.stackCornerRadius;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const { foldInfo } = datasetReshapeInfo[0];
             return {
                 ...spec,
-                stackCornerRadius
+                stackCornerRadius: (_, datum)=>{
+                    if (datum[foldInfo.measureValue] > 0) return stackCornerRadius;
+                    return 0;
+                }
             };
         };
         const stackInverse = (spec)=>{
@@ -3872,6 +4051,19 @@
             };
             return result;
         };
+        const colorBarStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.bar?.style) result.bar.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         const barStyle_barStyle = (spec, context)=>{
             const { advancedVSeed } = context;
             const { markStyle, dataset = [] } = advancedVSeed;
@@ -4060,18 +4252,105 @@
                             cornerRadius: areaBorderRadius
                         }
                     }
-                };
-            });
+                };
+            });
+            return {
+                ...spec,
+                markArea: markArea
+            };
+        };
+        const pivotColorLegend = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.legend) return result;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const max = Math.max(...datasetReshapeInfo.map((d)=>d.foldInfo.colorRange[1]));
+            const min = Math.min(...datasetReshapeInfo.map((d)=>d.foldInfo.colorRange[0]));
+            const { legend, color } = baseConfig;
+            const { colorScheme, linearColorScheme } = color;
+            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight = 400 } = legend || {};
+            const orient = [
+                'bottom',
+                'bottomLeft',
+                'bottomRight',
+                'bl',
+                'br'
+            ].includes(position) ? 'bottom' : [
+                'top',
+                'topLeft',
+                'topRight',
+                'tl',
+                'tr'
+            ].includes(position) ? 'top' : [
+                'left',
+                'leftTop',
+                'leftBottom',
+                'lt',
+                'lb'
+            ].includes(position) ? 'left' : 'right';
+            const legendPosition = [
+                'topLeft',
+                'bottomLeft',
+                'leftTop',
+                'rightTop',
+                'lt',
+                'rt',
+                'tl',
+                'bl'
+            ].includes(position) ? 'start' : [
+                'topRight',
+                'bottomRight',
+                'leftBottom',
+                'rightBottom',
+                'lb',
+                'rb',
+                'rt',
+                'br'
+            ].includes(position) ? 'end' : 'middle';
+            const legends = {
+                visible: enable,
+                type: 'color',
+                orient,
+                position: legendPosition,
+                colors: linearColorScheme || colorScheme || [],
+                value: [
+                    min,
+                    max
+                ],
+                min: min,
+                max: max,
+                maxWidth: '30%',
+                startText: {
+                    visible: true,
+                    style: {
+                        fill: labelFontColor,
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight
+                    }
+                },
+                endText: {
+                    visible: true,
+                    style: {
+                        fill: labelFontColor,
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight
+                    }
+                }
+            };
             return {
-                ...spec,
-                markArea: markArea
+                ...result,
+                legends
             };
         };
         const column = [
             initColumn,
             stackCornerRadius_stackCornerRadius,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -4080,8 +4359,8 @@
             label_label,
             tooltip_tooltip,
             verticalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorAdapter(discreteLegend, colorLegend),
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4096,7 +4375,7 @@
                 initColumn,
                 stackCornerRadius_stackCornerRadius,
                 stackInverse,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
@@ -4105,7 +4384,7 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairRect,
-                barStyle_barStyle,
+                colorBarStyleFill(barStyle_barStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4113,7 +4392,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const columnSpecPipeline = [
             pivotAdapter_pivotAdapter(column, pivotColumn)
@@ -4124,7 +4403,7 @@
         };
         const columnParallelAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForColumn,
             pivotAdapter([
@@ -4169,7 +4448,7 @@
         const columnParallel = [
             initColumnParallel,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -4177,9 +4456,9 @@
             yLinear,
             label_label,
             tooltip_tooltip,
-            discreteLegend,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairRect,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4193,7 +4472,7 @@
             pivotIndicators_pivotIndicators([
                 initColumnParallel,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
@@ -4202,7 +4481,7 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairRect,
-                barStyle_barStyle,
+                colorBarStyleFill(barStyle_barStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4210,7 +4489,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const columnParallelSpecPipeline = [
             pivotAdapter_pivotAdapter(columnParallel, pivotColumnParallel)
@@ -4221,7 +4500,7 @@
         };
         const columnPercentAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForColumn,
             pivotAdapter([
@@ -4247,7 +4526,7 @@
             initColumn,
             stackCornerRadius_stackCornerRadius,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent,
             datasetXY,
@@ -4256,9 +4535,9 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4273,7 +4552,7 @@
                 initColumn,
                 stackCornerRadius_stackCornerRadius,
                 stackInverse,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 percent,
                 background_backgroundColor,
                 datasetXY,
@@ -4283,7 +4562,7 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairRect,
-                barStyle_barStyle,
+                colorBarStyleFill(barStyle_barStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4291,7 +4570,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const columnPercentSpecPipeline = [
             pivotAdapter_pivotAdapter(columnPercent, pivotColumnPercent)
@@ -4313,10 +4592,10 @@
                     (dimensions[1] || dimensions[0]).id
                 ];
                 const detail = encoding.detail || [];
-                const mergedDetail = chunk_QJLMYOTX_i([
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
                     ...color,
                     ...detail
-                ]);
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
@@ -4360,7 +4639,7 @@
         };
         const barAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForBar,
             pivotAdapter([
@@ -4660,7 +4939,7 @@
         const bar = [
             initBar,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetYX,
             progressive,
@@ -4668,9 +4947,9 @@
             yBand,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             horizontalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4684,7 +4963,7 @@
             pivotIndicators_pivotIndicators([
                 initBar,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetYX,
                 progressive,
@@ -4693,8 +4972,8 @@
                 label_label,
                 label_label,
                 tooltip_tooltip,
+                colorBarStyleFill(barStyle_barStyle),
                 horizontalCrosshairRect,
-                barStyle_barStyle,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4702,7 +4981,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const barSpecPipeline = [
             pivotAdapter_pivotAdapter(bar, pivotBar)
@@ -4713,7 +4992,7 @@
         };
         const barParallelAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForBar,
             pivotAdapter([
@@ -4758,7 +5037,7 @@
         const barParallel = [
             initBarParallel,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetYX,
             progressive,
@@ -4766,9 +5045,9 @@
             yBand,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             horizontalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4782,15 +5061,15 @@
             pivotIndicators_pivotIndicators([
                 initBarParallel,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetYX,
                 xLinear,
                 yBand,
                 label_label,
                 tooltip_tooltip,
+                colorBarStyleFill(barStyle_barStyle),
                 horizontalCrosshairRect,
-                barStyle_barStyle,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4798,7 +5077,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const barParallelSpecPipeline = [
             pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
@@ -4809,7 +5088,7 @@
         };
         const barPercentAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForBar,
             pivotAdapter([
@@ -4827,7 +5106,7 @@
         const barPercent = [
             initBar,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent,
             datasetYX,
@@ -4836,9 +5115,9 @@
             yBand,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             horizontalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4852,7 +5131,7 @@
             pivotIndicators_pivotIndicators([
                 initBar,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 percent,
                 datasetYX,
@@ -4860,8 +5139,8 @@
                 xLinear,
                 label_label,
                 tooltip_tooltip,
+                colorBarStyleFill(barStyle_barStyle),
                 horizontalCrosshairRect,
-                barStyle_barStyle,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4869,7 +5148,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const barPercentSpecPipeline = [
             pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
@@ -4880,7 +5159,7 @@
         };
         const areaAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForColumn,
             pivotAdapter([
@@ -4906,7 +5185,7 @@
             result.direction = 'vertical';
             result.yField = foldInfo.measureValue;
             result.xField = unfoldInfo.encodingX;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -4916,20 +5195,32 @@
             result.animation = true;
             return result;
         };
+        const colorAreaStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.area?.style) result.area.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         const areaStyle_areaStyle = (spec, context)=>{
             const { advancedVSeed } = context;
             const { markStyle, datasetReshapeInfo, dataset } = advancedVSeed;
             const { areaStyle } = markStyle;
             const { unfoldInfo } = datasetReshapeInfo[0];
-            if (!areaStyle) return {
+            const result = {
                 ...spec,
                 area: {
-                    visible: true
+                    visible: true,
+                    style: {}
                 }
             };
-            const result = {
-                ...spec
-            };
+            if (!areaStyle) return result;
             const areaStyles = Array.isArray(areaStyle) ? areaStyle : [
                 areaStyle
             ];
@@ -4957,6 +5248,7 @@
             return {
                 ...result,
                 area: {
+                    ...result.area,
                     visible: true,
                     state: {
                         ...customMap
@@ -4967,7 +5259,7 @@
         const area_area = [
             initArea,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -4975,12 +5267,12 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateDimensionHover,
-            lineStyle_lineStyle,
-            areaStyle_areaStyle,
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4993,7 +5285,7 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initArea,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 stackInverse,
                 datasetXY,
@@ -5003,10 +5295,10 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairLine,
-                pointStyle_pointStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateDimensionHover,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle,
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -5014,7 +5306,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const areaSpecPipeline = [
             pivotAdapter_pivotAdapter(area_area, pivotArea)
@@ -5025,7 +5317,7 @@
         };
         const areaPercentAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForColumn,
             pivotAdapter([
@@ -5043,7 +5335,7 @@
         const areaPercent = [
             initArea,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent,
             datasetXY,
@@ -5052,11 +5344,12 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
-            lineStyle_lineStyle,
-            areaStyle_areaStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
+            pointStateDimensionHover,
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -5070,7 +5363,7 @@
             pivotIndicators_pivotIndicators([
                 initArea,
                 stackInverse,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 percent,
                 datasetXY,
@@ -5080,9 +5373,10 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairLine,
-                pointStyle_pointStyle,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
+                pointStateDimensionHover,
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -5090,7 +5384,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const areaPercentSpecPipeline = [
             pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -5099,95 +5393,105 @@
             Builder._advancedPipelineMap.areaPercent = areaPercentAdvancedPipeline;
             Builder._specPipelineMap.areaPercent = areaPercentSpecPipeline;
         };
-        const autoScatterMeasures = (advancedVSeed, context)=>{
-            const result = {
-                ...advancedVSeed
-            };
+        const buildMeasuresForScatter = (advancedVSeed, context)=>{
             const { vseed } = context;
-            const { dataset, scatterMeasures, measures } = vseed;
-            if (!dataset) throw new Error('dataset is required');
-            if (0 === dataset.length) return result;
-            if (scatterMeasures) {
-                result.measures = scatterMeasuresToMeasureTree(scatterMeasures);
-                return result;
+            if (isMeasureTreeWithChildren(vseed)) {
+                advancedVSeed.measures = vseed.measures;
+                return advancedVSeed;
             }
-            if (measures && measureDepth(measures) > 1) {
-                result.measures = measures;
-                return result;
+            if (isMeasureTreeWithParentId(vseed)) {
+                advancedVSeed.measures = buildMeasuresForScatter_generateMeasuresByParentId(vseed.measures);
+                return advancedVSeed;
             }
-            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)
-                },
+            const basicMeasures = getBasicMeasures(vseed);
+            const scatterMeasures = vseed.scatterMeasures ? vseed.scatterMeasures : basicMeasuresToScatterMeasures(basicMeasures);
+            advancedVSeed.measures = scatterMeasuresToMeasureTree(scatterMeasures);
+            return advancedVSeed;
+        };
+        const basicMeasuresToScatterMeasures = (basicMeasures)=>{
+            const yMeasures = [];
+            const xMeasures = [];
+            for(let index = 0; index < basicMeasures.length; index++){
+                const item = basicMeasures[index];
+                const encoding = Array.isArray(item.encoding) ? item.encoding : [
+                    item.encoding
+                ];
+                const isYAxis = encoding.includes('yAxis');
+                const isXAxis = encoding.includes('xAxis');
+                if (isYAxis) yMeasures.push(item);
+                else if (isXAxis) xMeasures.push(item);
+                else if (0 === index) yMeasures.push(item);
+                else xMeasures.push(item);
+            }
+            return [
                 {
-                    id: 'secondary',
-                    alias: 'secondary',
-                    children: newMeasures.slice(1)
+                    id: 'scatterMeasures',
+                    xMeasures,
+                    yMeasures
                 }
             ];
-            return result;
         };
         const scatterMeasuresToMeasureTree = (scatterMeasures)=>{
             const measureTree = scatterMeasures.map((item, index)=>{
-                const { xMeasures, yMeasures } = item;
+                const { id, xMeasures, yMeasures } = item;
                 const groupChildren = [];
-                let id = '';
+                let groupId = `${id}-`;
                 if (xMeasures) {
-                    const arrXMeasures = Array.isArray(xMeasures) ? xMeasures : [
+                    const arrPrimaryMeasures = Array.isArray(xMeasures) ? xMeasures : [
                         xMeasures
                     ];
-                    const alias = arrXMeasures.map((item)=>item.alias || item.id).toString();
-                    id += alias;
+                    const alias = arrPrimaryMeasures.map((item)=>item.alias || item.id).toString();
+                    groupId += alias;
                     groupChildren.push({
                         id: `${index}-x`,
-                        alias: arrXMeasures.map((item)=>item.alias || item.id).toString(),
-                        children: arrXMeasures
+                        alias: arrPrimaryMeasures.map((item)=>item.alias || item.id).toString(),
+                        children: arrPrimaryMeasures
                     });
                 }
                 if (yMeasures) {
-                    const arrYMeasures = Array.isArray(yMeasures) ? yMeasures : [
+                    const arrSecondaryMeasures = Array.isArray(yMeasures) ? yMeasures : [
                         yMeasures
                     ];
-                    const alias = arrYMeasures.map((item)=>item.alias || item.id).toString();
-                    id += alias;
+                    const alias = arrSecondaryMeasures.map((item)=>item.alias || item.id).toString();
+                    groupId += alias;
                     groupChildren.push({
                         id: `${index}-y`,
-                        alias: arrYMeasures.map((item)=>item.alias || item.id).toString(),
-                        children: arrYMeasures
+                        alias: arrSecondaryMeasures.map((item)=>item.alias || item.id).toString(),
+                        children: arrSecondaryMeasures
                     });
                 }
                 return {
-                    id,
-                    alias: id,
+                    id: groupId,
+                    alias: groupId,
                     children: groupChildren
                 };
             });
             if (1 === scatterMeasures.length) return measureTree[0].children || [];
             return measureTree;
         };
+        const buildMeasuresForScatter_generateMeasuresByParentId = (measures)=>{
+            const scatterMeasures = [];
+            measures.forEach((item)=>{
+                if (!item.parentId) return;
+                if (!scatterMeasures.find((d)=>d.id === item.parentId)) scatterMeasures.push({
+                    id: item.parentId,
+                    yMeasures: [],
+                    xMeasures: []
+                });
+                const scatterChart = scatterMeasures.find((d)=>d.id === item.parentId);
+                if (!scatterChart || !Array.isArray(scatterChart.yMeasures) || !Array.isArray(scatterChart.xMeasures)) return;
+                const encoding = Array.isArray(item.encoding) ? item.encoding : [
+                    item.encoding
+                ];
+                const isY = encoding.includes('yAxis');
+                const isX = encoding.includes('xAxis');
+                if (isY) scatterChart.yMeasures.push(item);
+                else if (isX) scatterChart.xMeasures.push(item);
+                else if (!isY && !isX) if (0 === scatterChart.yMeasures.length) scatterChart.yMeasures.push(item);
+                else scatterChart.xMeasures.push(item);
+            });
+            return scatterMeasuresToMeasureTree(scatterMeasures);
+        };
         const encodingForScatter = (advancedVSeed, context)=>{
             const { vseed } = context;
             const { dimensions } = advancedVSeed;
@@ -5198,10 +5502,10 @@
                 const color = encoding.color || [
                     (dimensions[1] || dimensions[0]).id
                 ];
-                const mergedDetail = chunk_QJLMYOTX_i([
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
                     ...color,
                     ...detail
-                ]);
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
@@ -5243,7 +5547,8 @@
             if (xMeasures && xMeasures.children) {
                 const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, xMeasures.children, encoding, {
                     foldMeasureValue: FoldXMeasureValue,
-                    colorItemAsId: true
+                    colorItemAsId: true,
+                    colorMeasureId: getColorMeasureId(advancedVSeed)
                 });
                 datasets.push(newDataset);
                 foldInfoList.push(foldInfo);
@@ -5252,7 +5557,8 @@
             if (yMeasures && yMeasures.children) {
                 const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(datasets[0], dimensions, yMeasures.children, encoding, {
                     foldMeasureValue: FoldYMeasureValue,
-                    colorItemAsId: true
+                    colorItemAsId: true,
+                    colorMeasureId: getColorMeasureId(advancedVSeed)
                 });
                 datasets[0] = newDataset;
                 foldInfoList.push(foldInfo);
@@ -5307,7 +5613,8 @@
                 if (xMeasures && xMeasures.children) {
                     const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, xMeasures.children, encoding, {
                         foldMeasureValue: `${FoldXMeasureValue}${index}`,
-                        colorItemAsId: true
+                        colorItemAsId: true,
+                        colorMeasureId: getColorMeasureId(advancedVSeed)
                     });
                     datasets.push(newDataset);
                     foldInfoList.push(foldInfo);
@@ -5316,7 +5623,8 @@
                 if (yMeasures && yMeasures.children) {
                     const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, yMeasures.children, encoding, {
                         foldMeasureValue: `${FoldYMeasureValue}${index}`,
-                        colorItemAsId: true
+                        colorItemAsId: true,
+                        colorMeasureId: getColorMeasureId(advancedVSeed)
                     });
                     datasets.push(newDataset);
                     foldInfoList.push(foldInfo);
@@ -5351,7 +5659,7 @@
         };
         const scatterAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoScatterMeasures,
+            buildMeasuresForScatter,
             autoDimensions_autoDimensions,
             encodingForScatter,
             pivotAdapter([
@@ -5445,7 +5753,7 @@
         };
         const scatter = [
             initScatter,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetScatter,
             progressive,
@@ -5453,10 +5761,10 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
             horizontalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateHover,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
@@ -5470,7 +5778,7 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initScatter,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetScatter,
                 progressive,
@@ -5480,7 +5788,7 @@
                 tooltip_tooltip,
                 verticalCrosshairLine,
                 horizontalCrosshairLine,
-                pointStyle_pointStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateHover,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
@@ -5498,68 +5806,55 @@
             Builder._advancedPipelineMap.scatter = scatterAdvancedPipeline;
             Builder._specPipelineMap.scatter = scatterSpecPipeline;
         };
-        const autoDualMeasures = (advancedVSeed, context)=>{
-            const result = {
-                ...advancedVSeed
-            };
+        const buildMeasuresForDualAxis = (advancedVSeed, context)=>{
             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 (isMeasureTreeWithChildren(vseed)) {
+                advancedVSeed.measures = vseed.measures;
+                return advancedVSeed;
             }
-            if (measures && measureDepth(measures) > 1) {
-                result.measures = measures;
-                return result;
+            if (isMeasureTreeWithParentId(vseed)) {
+                advancedVSeed.measures = buildMeasuresForDualAxis_generateMeasuresByParentId(vseed.measures);
+                return advancedVSeed;
             }
-            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)
-                },
+            const basicMeasures = getBasicMeasures(vseed);
+            const dualMeasures = vseed.dualMeasures ? vseed.dualMeasures : basicMeasuresToDualMeasures(basicMeasures);
+            advancedVSeed.measures = dualMeasuresToMeasureTree(dualMeasures);
+            return advancedVSeed;
+        };
+        const basicMeasuresToDualMeasures = (basicMeasures)=>{
+            const primaryMeasures = [];
+            const secondaryMeasures = [];
+            for(let index = 0; index < basicMeasures.length; index++){
+                const item = basicMeasures[index];
+                const encoding = Array.isArray(item.encoding) ? item.encoding : [
+                    item.encoding
+                ];
+                const isPrimaryYAxis = encoding.includes('primaryYAxis');
+                const isSecondaryYAxis = encoding.includes('secondaryYAxis');
+                if (isPrimaryYAxis) primaryMeasures.push(item);
+                else if (isSecondaryYAxis) secondaryMeasures.push(item);
+                else if (0 === index) primaryMeasures.push(item);
+                else secondaryMeasures.push(item);
+            }
+            return [
                 {
-                    id: 'secondary',
-                    alias: 'secondary',
-                    children: newMeasures.slice(1)
+                    id: 'dualMeasures',
+                    primaryMeasures,
+                    secondaryMeasures
                 }
             ];
-            return result;
         };
         const dualMeasuresToMeasureTree = (dualMeasures)=>{
             const measureTree = dualMeasures.map((item, index)=>{
-                const { primaryMeasures, secondaryMeasures } = item;
+                const { id, primaryMeasures, secondaryMeasures } = item;
                 const groupChildren = [];
-                let id = '';
+                let groupId = `${id}-`;
                 if (primaryMeasures) {
                     const arrPrimaryMeasures = Array.isArray(primaryMeasures) ? primaryMeasures : [
                         primaryMeasures
                     ];
                     const alias = arrPrimaryMeasures.map((item)=>item.alias || item.id).toString();
-                    id += alias;
+                    groupId += alias;
                     groupChildren.push({
                         id: `${index}-primary`,
                         alias: arrPrimaryMeasures.map((item)=>item.alias || item.id).toString(),
@@ -5571,7 +5866,7 @@
                         secondaryMeasures
                     ];
                     const alias = arrSecondaryMeasures.map((item)=>item.alias || item.id).toString();
-                    id += alias;
+                    groupId += alias;
                     groupChildren.push({
                         id: `${index}-secondary`,
                         alias: arrSecondaryMeasures.map((item)=>item.alias || item.id).toString(),
@@ -5579,14 +5874,37 @@
                     });
                 }
                 return {
-                    id,
-                    alias: id,
+                    id: groupId,
+                    alias: groupId,
                     children: groupChildren
                 };
             });
             if (1 === dualMeasures.length) return measureTree[0].children || [];
             return measureTree;
         };
+        const buildMeasuresForDualAxis_generateMeasuresByParentId = (measures)=>{
+            const dualMeasures = [];
+            measures.forEach((item)=>{
+                if (!item.parentId) return;
+                if (!dualMeasures.find((d)=>d.id === item.parentId)) dualMeasures.push({
+                    id: item.parentId,
+                    primaryMeasures: [],
+                    secondaryMeasures: []
+                });
+                const dualChart = dualMeasures.find((d)=>d.id === item.parentId);
+                if (!dualChart || !Array.isArray(dualChart.primaryMeasures) || !Array.isArray(dualChart.secondaryMeasures)) return;
+                const encoding = Array.isArray(item.encoding) ? item.encoding : [
+                    item.encoding
+                ];
+                const isPrimary = encoding.includes('primaryYAxis');
+                const isSecondary = encoding.includes('secondaryYAxis');
+                if (isPrimary) dualChart.primaryMeasures.push(item);
+                else if (isSecondary) dualChart.secondaryMeasures.push(item);
+                else if (!isPrimary && !isSecondary) if (0 === dualChart.primaryMeasures.length) dualChart.primaryMeasures.push(item);
+                else dualChart.secondaryMeasures.push(item);
+            });
+            return dualMeasuresToMeasureTree(dualMeasures);
+        };
         const encodingForDualAxis = (advancedVSeed, context)=>{
             const { vseed } = context;
             const { dimensions } = advancedVSeed;
@@ -5600,10 +5918,10 @@
                     (dimensions[1] || dimensions[0]).id
                 ];
                 const detail = encoding.detail || [];
-                const mergedDetail = chunk_QJLMYOTX_i([
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
                     ...color,
                     ...detail
-                ]);
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
@@ -5645,7 +5963,8 @@
             const secondaryMeasures = measures[1] || [];
             if (primaryMeasures && primaryMeasures.children) {
                 const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, primaryMeasures.children, encoding, {
-                    foldMeasureValue: FoldPrimaryMeasureValue
+                    foldMeasureValue: FoldPrimaryMeasureValue,
+                    colorMeasureId: getColorMeasureId(advancedVSeed)
                 });
                 datasets.push(newDataset);
                 foldInfoList.push(foldInfo);
@@ -5653,7 +5972,8 @@
             }
             if (secondaryMeasures && secondaryMeasures.children) {
                 const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, secondaryMeasures.children, encoding, {
-                    foldMeasureValue: FoldSecondaryMeasureValue
+                    foldMeasureValue: FoldSecondaryMeasureValue,
+                    colorMeasureId: getColorMeasureId(advancedVSeed)
                 });
                 datasets.push(newDataset);
                 foldInfoList.push(foldInfo);
@@ -5707,7 +6027,8 @@
                 const secondaryMeasures = measures[1] || [];
                 if (primaryMeasures && primaryMeasures.children) {
                     const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, primaryMeasures.children, encoding, {
-                        foldMeasureValue: `${FoldPrimaryMeasureValue}${index}`
+                        foldMeasureValue: `${FoldPrimaryMeasureValue}${index}`,
+                        colorMeasureId: getColorMeasureId(advancedVSeed)
                     });
                     datasets.push(newDataset);
                     foldInfoList.push(foldInfo);
@@ -5715,7 +6036,8 @@
                 }
                 if (secondaryMeasures && secondaryMeasures.children) {
                     const { dataset: newDataset, foldInfo, unfoldInfo } = dataReshapeByEncoding(dataset, dimensions, secondaryMeasures.children, encoding, {
-                        foldMeasureValue: `${FoldSecondaryMeasureValue}${index}`
+                        foldMeasureValue: `${FoldSecondaryMeasureValue}${index}`,
+                        colorMeasureId: getColorMeasureId(advancedVSeed)
                     });
                     datasets.push(newDataset);
                     foldInfoList.push(foldInfo);
@@ -5773,7 +6095,7 @@
         };
         const dualAxisAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoDualMeasures,
+            buildMeasuresForDualAxis,
             autoDimensions_autoDimensions,
             encodingForDualAxis,
             pivotAdapter([
@@ -5860,7 +6182,7 @@
             result.direction = 'vertical';
             result.xField = unfoldInfo.encodingX;
             if (foldInfoList?.[1]) result.yField = foldInfoList[1].measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.animation = true;
             return result;
         };
@@ -6486,6 +6808,37 @@
             ];
             return result;
         };
+        const linearColorForDualAxis = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const { unfoldInfo, id } = datasetReshapeInfo[0];
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.color) return result;
+            const { color } = baseConfig;
+            const { colorScheme, linearColorScheme } = color;
+            result.color = {
+                type: 'linear',
+                range: linearColorScheme || colorScheme || [],
+                domain: [
+                    {
+                        dataId: `${id}-primary-dataset`,
+                        fields: [
+                            unfoldInfo.encodingColor
+                        ]
+                    },
+                    {
+                        dataId: `${id}-secondary-dataset`,
+                        fields: [
+                            unfoldInfo.encodingColor
+                        ]
+                    }
+                ]
+            };
+            return result;
+        };
         const dualAxis = [
             seriesDualAxis([
                 initDualAxisPrimary,
@@ -6494,11 +6847,11 @@
                 labelPrimary,
                 tooltipPrimary,
                 progressive,
-                barStyle_barStyle,
-                pointStyle_pointStyle,
+                colorBarStyleFill(barStyle_barStyle),
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateDimensionHover,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle)
             ], [
                 initDualAxisSecondary,
                 dualChartTypeSecondary,
@@ -6506,18 +6859,18 @@
                 labelSecondary,
                 tooltipSecondary,
                 progressive,
-                barStyle_barStyle,
-                pointStyle_pointStyle,
+                colorBarStyleFill(barStyle_barStyle),
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateDimensionHover,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle)
             ]),
             xBand,
             yLinearPrimary,
             yLinearSecondary,
-            color_color,
+            colorAdapter(color_color, linearColorForDualAxis),
+            colorAdapter(discreteLegend, colorLegend),
             background_backgroundColor,
-            discreteLegend,
             verticalCrosshairRect,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
@@ -6537,11 +6890,11 @@
                     labelPrimary,
                     tooltipPrimary,
                     progressive,
-                    barStyle_barStyle,
-                    pointStyle_pointStyle,
+                    colorBarStyleFill(barStyle_barStyle),
+                    colorPointStyleFill(pointStyle_pointStyle),
                     pointStateDimensionHover,
-                    lineStyle_lineStyle,
-                    areaStyle_areaStyle
+                    colorLineStyleFill(lineStyle_lineStyle),
+                    colorAreaStyleFill(areaStyle_areaStyle)
                 ], [
                     initDualAxisSecondary,
                     dualChartTypeSecondary,
@@ -6549,16 +6902,16 @@
                     labelSecondary,
                     tooltipSecondary,
                     progressive,
-                    barStyle_barStyle,
-                    pointStyle_pointStyle,
+                    colorBarStyleFill(barStyle_barStyle),
+                    colorPointStyleFill(pointStyle_pointStyle),
                     pointStateDimensionHover,
-                    lineStyle_lineStyle,
-                    areaStyle_areaStyle
+                    colorLineStyleFill(lineStyle_lineStyle),
+                    colorAreaStyleFill(areaStyle_areaStyle)
                 ]),
                 xBand,
                 yLinearPrimary,
                 yLinearSecondary,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 verticalCrosshairRect,
                 annotationPoint_annotationPoint,
@@ -6568,7 +6921,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const dualAxisSpecPipeline = [
             pivotAdapter_pivotAdapter(dualAxis, pivotDualAxis)
@@ -6603,7 +6956,7 @@
         };
         const pieAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForPie,
             pivotAdapter([
@@ -6694,7 +7047,7 @@
         };
         const donutAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForPie,
             pivotAdapter([
@@ -6795,10 +7148,10 @@
                     (dimensions[1] || dimensions[0]).id
                 ];
                 const detail = encoding.detail || [];
-                const mergedDetail = chunk_QJLMYOTX_i([
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
                     ...color,
                     ...detail
-                ]);
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
@@ -6826,7 +7179,7 @@
         };
         const roseAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForRose,
             pivotAdapter([
@@ -6995,7 +7348,7 @@
         };
         const roseParallelAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForRose,
             pivotAdapter([
@@ -7114,10 +7467,10 @@
                     (dimensions[1] || dimensions[0]).id
                 ];
                 const detail = encoding.detail || [];
-                const mergedDetail = chunk_QJLMYOTX_i([
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
                     ...color,
                     ...detail
-                ]);
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
@@ -7144,7 +7497,7 @@
         };
         const radarAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForRadar,
             pivotAdapter([
@@ -7168,7 +7521,7 @@
             result.type = 'radar';
             result.angleField = unfoldInfo.encodingAngle;
             result.radiusField = foldInfo.measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -7233,7 +7586,7 @@
         };
         const radar = [
             initRadar,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -7241,12 +7594,12 @@
             radarRadiusAxis,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateDimensionHover,
-            lineStyle_lineStyle,
-            areaStyle_areaStyle
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle)
         ];
         const pivotRadar = [
             initPivot,
@@ -7255,7 +7608,7 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initRadar,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
@@ -7264,14 +7617,14 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairLine,
-                pointStyle_pointStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateDimensionHover,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle)
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const radarSpecPipeline = [
             pivotAdapter_pivotAdapter(radar, pivotRadar)
@@ -7306,7 +7659,7 @@
         };
         const funnelAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForFunnel,
             pivotAdapter([
@@ -7437,7 +7790,7 @@
         };
         const heatmapAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            autoMeasures_autoMeasures,
+            buildMeasures,
             autoDimensions_autoDimensions,
             encodingForHeatmap,
             pivotAdapter([
@@ -7659,6 +8012,10 @@
             const baseConfig = {
                 backgroundColor: 'transparent',
                 color: {
+                    linearColorScheme: [
+                        '#C2CEFF',
+                        '#5766EC'
+                    ],
                     colorScheme: [
                         '#8D72F6',
                         '#5766EC',
@@ -7723,8 +8080,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnParallel: {
@@ -7735,8 +8092,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnPercent: {
@@ -7747,8 +8104,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     bar: {
@@ -7757,10 +8114,10 @@
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     barParallel: {
@@ -7769,10 +8126,10 @@
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     barPercent: {
@@ -7781,10 +8138,10 @@
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     area: {
@@ -7849,38 +8206,10 @@
                         ...baseConfig
                     },
                     funnel: {
-                        ...baseConfig,
-                        color: {
-                            colorScheme: [
-                                '#5766EC',
-                                '#6372F0',
-                                '#7080F4',
-                                '#7C8CFA',
-                                '#8998FF',
-                                '#95A3FF',
-                                '#A0AEFF',
-                                '#ACB9FF',
-                                '#B7C4FF',
-                                '#C2CEFF'
-                            ].reverse()
-                        }
+                        ...baseConfig
                     },
                     heatmap: {
-                        ...baseConfig,
-                        color: {
-                            colorScheme: [
-                                '#5766EC',
-                                '#6372F0',
-                                '#7080F4',
-                                '#7C8CFA',
-                                '#8998FF',
-                                '#95A3FF',
-                                '#A0AEFF',
-                                '#ACB9FF',
-                                '#B7C4FF',
-                                '#C2CEFF'
-                            ].reverse()
-                        }
+                        ...baseConfig
                     }
                 }
             };
@@ -7992,6 +8321,10 @@
             const baseConfig = {
                 backgroundColor: 'transparent',
                 color: {
+                    linearColorScheme: [
+                        '#A0CEFF',
+                        '#2E62F1'
+                    ],
                     colorScheme: [
                         '#2E62F1',
                         '#4DC36A',
@@ -8055,8 +8388,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnParallel: {
@@ -8067,8 +8400,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnPercent: {
@@ -8079,8 +8412,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     bar: {
@@ -8101,10 +8434,10 @@
                         yAxis: barBandAxis,
                         crosshairRect: crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     barPercent: {
@@ -8113,10 +8446,10 @@
                         yAxis: barBandAxis,
                         crosshairRect: crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     area: {
@@ -8181,21 +8514,7 @@
                         ...baseConfig
                     },
                     funnel: {
-                        ...baseConfig,
-                        color: {
-                            colorScheme: [
-                                '#2E62F1',
-                                '#3A6EF6',
-                                '#4780FA',
-                                '#548CFE',
-                                '#6198FF',
-                                '#6FA3FF',
-                                '#7CACFF',
-                                '#88B7FF',
-                                '#94C2FF',
-                                '#A0CEFF'
-                            ]
-                        }
+                        ...baseConfig
                     },
                     heatmap: {
                         ...baseConfig
@@ -8246,9 +8565,6 @@
         const updateSpec = (chartType, specPipe)=>{
             Builder._customSpecPipe[chartType] = specPipe;
         };
-        const isDimension = (dimension)=>!('children' in dimension);
-        const isDimensionGroup = (dimension)=>'children' in dimension;
-        const isDimensions = (dimensions)=>dimensions.every(isDimension);
         Object.freeze({
             status: "aborted"
         });
@@ -11624,7 +11940,20 @@
             id: schemas_string(),
             alias: schemas_string().optional(),
             autoFormat: schemas_boolean().default(true),
-            format: zNumFormat["default"]({})
+            format: zNumFormat["default"]({}),
+            encoding: schemas_enum([
+                'primaryYAxis',
+                'secondaryYAxis',
+                'xAxis',
+                'yAxis',
+                'angle',
+                'radius',
+                'size',
+                'color',
+                'label',
+                'tooltip'
+            ]).optional(),
+            parentId: schemas_string().optional()
         });
         const zMeasureGroup = schemas_object({
             id: schemas_string(),
@@ -11649,6 +11978,8 @@
         const zScatterMeasures = schemas_array(zScatterMeasure);
         const zFoldInfo = schemas_object({
             foldMap: record(schemas_string(), schemas_string().or(schemas_undefined())),
+            colorRange: schemas_array(schemas_number()),
+            measureRange: schemas_array(schemas_number()),
             measureId: schemas_string(),
             measureName: schemas_string(),
             measureValue: schemas_string()
@@ -11684,7 +12015,6 @@
             column: schemas_array(schemas_string()).nullish(),
             group: schemas_array(schemas_string()).nullish().describe("\u5DF2\u5F03\u7528, \u8BF7\u4F7F\u7528\u989C\u8272\u66FF\u4EE3")
         });
-        const zEncodings = schemas_array(zEncoding);
         const zXBandAxis = schemas_object({
             visible: schemas_boolean().default(true).nullish(),
             labelAutoHide: schemas_boolean().default(true).nullish(),
@@ -11793,10 +12123,11 @@
         const zBackgroundColor = schemas_string().default('transparent').nullish();
         const zColor = schemas_object({
             colorScheme: schemas_array(schemas_string()).nullish(),
+            linearColorScheme: schemas_array(schemas_string()).nullish(),
             colorMapping: record(schemas_string(), schemas_string()).nullish()
         });
         const zLinearColor = schemas_object({
-            colorScheme: schemas_array(schemas_string()).nullish()
+            linearColorScheme: schemas_array(schemas_string()).nullish()
         });
         const zLabel = schemas_object({
             enable: schemas_boolean().default(true).nullish()
@@ -12777,7 +13108,7 @@
             dimensions: zDimensions.nullish(),
             measures: zMeasureTree.nullish(),
             backgroundColor: zBackgroundColor.nullish(),
-            color: zLinearColor.nullish(),
+            color: zColor.nullish(),
             label: zLabel.nullish(),
             legend: zColorLegend.nullish(),
             tooltip: zTooltip.nullish(),
@@ -12790,7 +13121,7 @@
             dimensions: zDimensions.nullish(),
             measures: zMeasureTree.nullish(),
             backgroundColor: zBackgroundColor.nullish(),
-            color: zLinearColor.nullish(),
+            color: zColor.nullish(),
             label: zLabel.nullish(),
             legend: zColorLegend.nullish(),
             tooltip: zTooltip.nullish(),
@@ -12826,7 +13157,6 @@
             dimensions: zDimensionTree,
             measures: zMeasureTree,
             encoding: zEncoding,
-            encodings: zEncodings,
             config: zConfig,
             analysis: zAnalysis,
             theme: zTheme,