@visactor/vseed 0.1.1 → 0.1.3

package/dist/index.js

@@ -713,32 +713,6 @@ const autoPivotMeasures = (advancedVSeed, context)=>{
         }));
     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 = [];
@@ -1062,6 +1036,39 @@ const initAdvancedVSeed_initAdvancedVSeed = (advancedVSeed, context)=>{
         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;
@@ -1080,23 +1087,26 @@ const isVTable = (vseed)=>[
 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;
         }
@@ -1107,77 +1117,49 @@ const isPivotChart = (vseed)=>{
     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__';
@@ -1194,8 +1176,6 @@ const AngleEncoding = '__Dim_Angle__';
 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
@@ -1235,7 +1215,7 @@ const autoDimensions_autoDimensions = (advancedVSeed, context)=>{
     result.dimensions.push(MeaName);
     return result;
 };
-const encodingForColumn = (advancedVSeed, context)=>{
+const encodingForLine = (advancedVSeed, context)=>{
     const { vseed } = context;
     const { dimensions } = advancedVSeed;
     if (!dimensions) return advancedVSeed;
@@ -1248,10 +1228,7 @@ const encodingForColumn = (advancedVSeed, context)=>{
             (dimensions[1] || dimensions[0]).id
         ];
         const detail = encoding.detail || [];
-        const mergedDetail = unique([
-            ...color,
-            ...detail
-        ]);
+        const mergedDetail = 0 === detail.length ? dimensions.map((d)=>d.id).filter((id)=>!x.includes(id)) : encoding.detail;
         return {
             ...advancedVSeed,
             encoding: {
@@ -1283,11 +1260,20 @@ const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
         if (usePivotChart) return execPipeline(pivotPipeline, context, advancedVSeed);
         return execPipeline(pipeline, context, advancedVSeed);
     };
-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);
@@ -1304,6 +1290,19 @@ const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName
         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;
     }
@@ -1339,7 +1338,7 @@ const unfoldDimensions = (dataset, dimensions, encoding, options)=>{
         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 ? [
@@ -1360,29 +1359,14 @@ const unfoldDimensions = (dataset, dimensions, encoding, options)=>{
 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,
@@ -1394,6 +1378,24 @@ const dataReshapeByEncoding = (dataset, dimensions, measures, encoding, options)
         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
@@ -1403,7 +1405,9 @@ const reshapeWithEncoding = (advancedVSeed, context)=>{
     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,
@@ -1439,7 +1443,8 @@ const pivotReshapeWithEncoding = (advancedVSeed, context)=>{
         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,
@@ -1646,9 +1651,9 @@ const annotation_annotation = (advancedVSeed, context)=>{
 };
 const lineAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
-    encodingForColumn,
+    encodingForLine,
     pivotAdapter([
         reshapeWithEncoding
     ], [
@@ -1672,7 +1677,7 @@ const initLine = (spec, context)=>{
     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 = [
         {
@@ -1733,6 +1738,31 @@ const createSpecifiedForColorMapping = (colorMapping, colorIdMap, colorItems)=>{
         ...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
@@ -2240,6 +2270,95 @@ const discreteLegend = (spec, context)=>{
     };
     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';
@@ -2336,7 +2455,10 @@ const pointStyle_pointStyle = (spec, context)=>{
     const { markStyle } = advancedVSeed;
     const { pointStyle } = markStyle;
     const result = {
-        ...spec
+        ...spec,
+        point: {
+            style: {}
+        }
     };
     if (!pointStyle) return result;
     const pointStyles = Array.isArray(pointStyle) ? pointStyle : [
@@ -2380,6 +2502,7 @@ const pointStyle_pointStyle = (spec, context)=>{
     return {
         ...result,
         point: {
+            ...result.point,
             state: {
                 ...customMap
             }
@@ -2435,15 +2558,31 @@ const pointStateHover = (spec, context)=>{
     };
     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;
+    };
 const lineStyle_lineStyle = (spec, context)=>{
     const { advancedVSeed } = context;
     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
     ];
@@ -2487,6 +2626,7 @@ const lineStyle_lineStyle = (spec, context)=>{
     return {
         ...result,
         line: {
+            ...result.line,
             state: {
                 ...customMap
             }
@@ -3259,7 +3399,7 @@ const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
     };
 const line_line = [
     initLine,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -3268,10 +3408,10 @@ const line_line = [
     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,
@@ -3312,9 +3452,51 @@ const registerLine = ()=>{
     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 ? unique([
+            ...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([
@@ -3354,9 +3536,14 @@ const stackCornerRadius_stackCornerRadius = (spec, context)=>{
     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)=>{
@@ -3406,6 +3593,19 @@ const verticalCrosshairRect = (spec, context)=>{
     };
     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;
@@ -3594,18 +3794,105 @@ const annotationAreaBand = (spec, context)=>{
                     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,
@@ -3614,8 +3901,8 @@ const column = [
     label_label,
     tooltip_tooltip,
     verticalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorAdapter(discreteLegend, colorLegend),
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -3630,7 +3917,7 @@ const pivotColumn = [
         initColumn,
         stackCornerRadius_stackCornerRadius,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
@@ -3639,7 +3926,7 @@ const pivotColumn = [
         label_label,
         tooltip_tooltip,
         verticalCrosshairRect,
-        barStyle_barStyle,
+        colorBarStyleFill(barStyle_barStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3647,7 +3934,7 @@ const pivotColumn = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const columnSpecPipeline = [
     pivotAdapter_pivotAdapter(column, pivotColumn)
@@ -3658,7 +3945,7 @@ const registerColumn = ()=>{
 };
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForColumn,
     pivotAdapter([
@@ -3703,7 +3990,7 @@ const initColumnParallel = (spec, context)=>{
 const columnParallel = [
     initColumnParallel,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -3711,9 +3998,9 @@ const columnParallel = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    discreteLegend,
+    colorAdapter(discreteLegend, colorLegend),
     verticalCrosshairRect,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -3727,7 +4014,7 @@ const pivotColumnParallel = [
     pivotIndicators_pivotIndicators([
         initColumnParallel,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
@@ -3736,7 +4023,7 @@ const pivotColumnParallel = [
         label_label,
         tooltip_tooltip,
         verticalCrosshairRect,
-        barStyle_barStyle,
+        colorBarStyleFill(barStyle_barStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3744,7 +4031,7 @@ const pivotColumnParallel = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const columnParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(columnParallel, pivotColumnParallel)
@@ -3755,7 +4042,7 @@ const registerColumnParallel = ()=>{
 };
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForColumn,
     pivotAdapter([
@@ -3781,7 +4068,7 @@ const columnPercent = [
     initColumn,
     stackCornerRadius_stackCornerRadius,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     percent,
     datasetXY,
@@ -3790,9 +4077,9 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     verticalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -3807,7 +4094,7 @@ const pivotColumnPercent = [
         initColumn,
         stackCornerRadius_stackCornerRadius,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         percent,
         background_backgroundColor,
         datasetXY,
@@ -3817,7 +4104,7 @@ const pivotColumnPercent = [
         label_label,
         tooltip_tooltip,
         verticalCrosshairRect,
-        barStyle_barStyle,
+        colorBarStyleFill(barStyle_barStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3825,7 +4112,7 @@ const pivotColumnPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const columnPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(columnPercent, pivotColumnPercent)
@@ -3847,10 +4134,10 @@ const encodingForBar = (advancedVSeed, context)=>{
             (dimensions[1] || dimensions[0]).id
         ];
         const detail = encoding.detail || [];
-        const mergedDetail = unique([
+        const mergedDetail = 0 === detail.length ? unique([
             ...color,
             ...detail
-        ]);
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
@@ -3894,7 +4181,7 @@ const sortYBandAxis = (advancedVSeed, context)=>{
 };
 const barAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForBar,
     pivotAdapter([
@@ -4194,7 +4481,7 @@ const horizontalCrosshairRect = (spec, context)=>{
 const bar = [
     initBar,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetYX,
     progressive,
@@ -4202,9 +4489,9 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     horizontalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -4218,7 +4505,7 @@ const pivotBar = [
     pivotIndicators_pivotIndicators([
         initBar,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetYX,
         progressive,
@@ -4227,8 +4514,8 @@ const pivotBar = [
         label_label,
         label_label,
         tooltip_tooltip,
+        colorBarStyleFill(barStyle_barStyle),
         horizontalCrosshairRect,
-        barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -4236,7 +4523,7 @@ const pivotBar = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const barSpecPipeline = [
     pivotAdapter_pivotAdapter(bar, pivotBar)
@@ -4247,7 +4534,7 @@ const registerBar = ()=>{
 };
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForBar,
     pivotAdapter([
@@ -4292,7 +4579,7 @@ const initBarParallel = (spec, context)=>{
 const barParallel = [
     initBarParallel,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetYX,
     progressive,
@@ -4300,9 +4587,9 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     horizontalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -4316,15 +4603,15 @@ const pivotBarParallel = [
     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,
@@ -4332,7 +4619,7 @@ const pivotBarParallel = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const barParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
@@ -4343,7 +4630,7 @@ const registerBarParallel = ()=>{
 };
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForBar,
     pivotAdapter([
@@ -4361,7 +4648,7 @@ const barPercentAdvancedPipeline = [
 const barPercent = [
     initBar,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     percent,
     datasetYX,
@@ -4370,9 +4657,9 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     horizontalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -4386,7 +4673,7 @@ const pivotBarPercent = [
     pivotIndicators_pivotIndicators([
         initBar,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         percent,
         datasetYX,
@@ -4394,8 +4681,8 @@ const pivotBarPercent = [
         xLinear,
         label_label,
         tooltip_tooltip,
+        colorBarStyleFill(barStyle_barStyle),
         horizontalCrosshairRect,
-        barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -4403,7 +4690,7 @@ const pivotBarPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const barPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
@@ -4414,7 +4701,7 @@ const registerBarPercent = ()=>{
 };
 const areaAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForColumn,
     pivotAdapter([
@@ -4440,7 +4727,7 @@ const initArea = (spec, context)=>{
     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 = [
         {
@@ -4450,20 +4737,32 @@ const initArea = (spec, context)=>{
     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
     ];
@@ -4491,6 +4790,7 @@ const areaStyle_areaStyle = (spec, context)=>{
     return {
         ...result,
         area: {
+            ...result.area,
             visible: true,
             state: {
                 ...customMap
@@ -4501,7 +4801,7 @@ const areaStyle_areaStyle = (spec, context)=>{
 const area_area = [
     initArea,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -4509,12 +4809,12 @@ const area_area = [
     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,
@@ -4527,7 +4827,7 @@ const pivotArea = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initArea,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         stackInverse,
         datasetXY,
@@ -4537,10 +4837,10 @@ const pivotArea = [
         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,
@@ -4548,7 +4848,7 @@ const pivotArea = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const areaSpecPipeline = [
     pivotAdapter_pivotAdapter(area_area, pivotArea)
@@ -4559,7 +4859,7 @@ const registerArea = ()=>{
 };
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForColumn,
     pivotAdapter([
@@ -4577,7 +4877,7 @@ const areaPercentAdvancedPipeline = [
 const areaPercent = [
     initArea,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     percent,
     datasetXY,
@@ -4586,11 +4886,12 @@ const areaPercent = [
     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,
@@ -4604,7 +4905,7 @@ const pivotAreaPercent = [
     pivotIndicators_pivotIndicators([
         initArea,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         percent,
         datasetXY,
@@ -4614,9 +4915,10 @@ const pivotAreaPercent = [
         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,
@@ -4624,7 +4926,7 @@ const pivotAreaPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -4633,95 +4935,105 @@ const registerAreaPercent = ()=>{
     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;
@@ -4732,10 +5044,10 @@ const encodingForScatter = (advancedVSeed, context)=>{
         const color = encoding.color || [
             (dimensions[1] || dimensions[0]).id
         ];
-        const mergedDetail = unique([
+        const mergedDetail = 0 === detail.length ? unique([
             ...color,
             ...detail
-        ]);
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
@@ -4777,7 +5089,8 @@ const reshapeWithScatterEncoding = (advancedVSeed, context)=>{
     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);
@@ -4786,7 +5099,8 @@ const reshapeWithScatterEncoding = (advancedVSeed, context)=>{
     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);
@@ -4841,7 +5155,8 @@ const pivotReshapeWithScatterEncoding = (advancedVSeed, context)=>{
         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);
@@ -4850,7 +5165,8 @@ const pivotReshapeWithScatterEncoding = (advancedVSeed, context)=>{
         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);
@@ -4885,7 +5201,7 @@ const pivotReshapeWithScatterEncoding = (advancedVSeed, context)=>{
 };
 const scatterAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoScatterMeasures,
+    buildMeasuresForScatter,
     autoDimensions_autoDimensions,
     encodingForScatter,
     pivotAdapter([
@@ -4979,7 +5295,7 @@ const horizontalCrosshairLine = (spec, context)=>{
 };
 const scatter = [
     initScatter,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetScatter,
     progressive,
@@ -4987,10 +5303,10 @@ const scatter = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     verticalCrosshairLine,
     horizontalCrosshairLine,
-    discreteLegend,
-    pointStyle_pointStyle,
+    colorPointStyleFill(pointStyle_pointStyle),
     pointStateHover,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
@@ -5004,7 +5320,7 @@ const pivotScatter = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initScatter,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetScatter,
         progressive,
@@ -5014,7 +5330,7 @@ const pivotScatter = [
         tooltip_tooltip,
         verticalCrosshairLine,
         horizontalCrosshairLine,
-        pointStyle_pointStyle,
+        colorPointStyleFill(pointStyle_pointStyle),
         pointStateHover,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -5032,68 +5348,55 @@ const registerScatter = ()=>{
     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(),
@@ -5105,7 +5408,7 @@ const dualMeasuresToMeasureTree = (dualMeasures)=>{
                 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(),
@@ -5113,14 +5416,37 @@ const dualMeasuresToMeasureTree = (dualMeasures)=>{
             });
         }
         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;
@@ -5134,10 +5460,10 @@ const encodingForDualAxis = (advancedVSeed, context)=>{
             (dimensions[1] || dimensions[0]).id
         ];
         const detail = encoding.detail || [];
-        const mergedDetail = unique([
+        const mergedDetail = 0 === detail.length ? unique([
             ...color,
             ...detail
-        ]);
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
@@ -5179,7 +5505,8 @@ const reshapeWithDualEncoding = (advancedVSeed, context)=>{
     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);
@@ -5187,7 +5514,8 @@ const reshapeWithDualEncoding = (advancedVSeed, context)=>{
     }
     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);
@@ -5241,7 +5569,8 @@ const pivotReshapeWithDualEncoding = (advancedVSeed, context)=>{
         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);
@@ -5249,7 +5578,8 @@ const pivotReshapeWithDualEncoding = (advancedVSeed, context)=>{
         }
         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);
@@ -5307,7 +5637,7 @@ const dualAxisConfig = (advancedVSeed, context)=>{
 };
 const dualAxisAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoDualMeasures,
+    buildMeasuresForDualAxis,
     autoDimensions_autoDimensions,
     encodingForDualAxis,
     pivotAdapter([
@@ -5394,7 +5724,7 @@ const initDualAxisSecondary = (spec, context)=>{
     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;
 };
@@ -6020,6 +6350,37 @@ const yLinearSecondary = (spec, context)=>{
     ];
     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,
@@ -6028,11 +6389,11 @@ const dualAxis = [
         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,
@@ -6040,18 +6401,18 @@ const dualAxis = [
         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,
@@ -6071,11 +6432,11 @@ const pivotDualAxis = [
             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,
@@ -6083,16 +6444,16 @@ const pivotDualAxis = [
             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,
@@ -6102,7 +6463,7 @@ const pivotDualAxis = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const dualAxisSpecPipeline = [
     pivotAdapter_pivotAdapter(dualAxis, pivotDualAxis)
@@ -6137,7 +6498,7 @@ const encodingForPie = (advancedVSeed, context)=>{
 };
 const pieAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForPie,
     pivotAdapter([
@@ -6228,7 +6589,7 @@ const registerPie = ()=>{
 };
 const donutAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForPie,
     pivotAdapter([
@@ -6329,10 +6690,10 @@ const encodingForRose = (advancedVSeed, context)=>{
             (dimensions[1] || dimensions[0]).id
         ];
         const detail = encoding.detail || [];
-        const mergedDetail = unique([
+        const mergedDetail = 0 === detail.length ? unique([
             ...color,
             ...detail
-        ]);
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
@@ -6360,7 +6721,7 @@ const encodingForRose = (advancedVSeed, context)=>{
 };
 const roseAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForRose,
     pivotAdapter([
@@ -6529,7 +6890,7 @@ const registerRose = ()=>{
 };
 const roseParallelAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForRose,
     pivotAdapter([
@@ -6648,10 +7009,10 @@ const encodingForRadar = (advancedVSeed, context)=>{
             (dimensions[1] || dimensions[0]).id
         ];
         const detail = encoding.detail || [];
-        const mergedDetail = unique([
+        const mergedDetail = 0 === detail.length ? unique([
             ...color,
             ...detail
-        ]);
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
@@ -6678,7 +7039,7 @@ const encodingForRadar = (advancedVSeed, context)=>{
 };
 const radarAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForRadar,
     pivotAdapter([
@@ -6702,7 +7063,7 @@ const initRadar = (spec, context)=>{
     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 = [
         {
@@ -6767,7 +7128,7 @@ const radarRadiusAxis = (spec, context)=>{
 };
 const radar = [
     initRadar,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -6775,12 +7136,12 @@ const radar = [
     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,
@@ -6789,7 +7150,7 @@ const pivotRadar = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initRadar,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
@@ -6798,14 +7159,14 @@ const pivotRadar = [
         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)
@@ -6840,7 +7201,7 @@ const encodingForFunnel = (advancedVSeed, context)=>{
 };
 const funnelAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForFunnel,
     pivotAdapter([
@@ -6971,7 +7332,7 @@ const encodingForHeatmap = (advancedVSeed, context)=>{
 };
 const heatmapAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    autoMeasures_autoMeasures,
+    buildMeasures,
     autoDimensions_autoDimensions,
     encodingForHeatmap,
     pivotAdapter([
@@ -7193,6 +7554,10 @@ const lightTheme = ()=>{
     const baseConfig = {
         backgroundColor: 'transparent',
         color: {
+            linearColorScheme: [
+                '#C2CEFF',
+                '#5766EC'
+            ],
             colorScheme: [
                 '#8D72F6',
                 '#5766EC',
@@ -7257,8 +7622,8 @@ const lightTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnParallel: {
@@ -7269,8 +7634,8 @@ const lightTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnPercent: {
@@ -7281,8 +7646,8 @@ const lightTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             bar: {
@@ -7291,10 +7656,10 @@ const lightTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             barParallel: {
@@ -7303,10 +7668,10 @@ const lightTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             barPercent: {
@@ -7315,10 +7680,10 @@ const lightTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             area: {
@@ -7383,38 +7748,10 @@ const lightTheme = ()=>{
                 ...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
             }
         }
     };
@@ -7526,6 +7863,10 @@ const darkTheme = ()=>{
     const baseConfig = {
         backgroundColor: 'transparent',
         color: {
+            linearColorScheme: [
+                '#A0CEFF',
+                '#2E62F1'
+            ],
             colorScheme: [
                 '#2E62F1',
                 '#4DC36A',
@@ -7589,8 +7930,8 @@ const darkTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnParallel: {
@@ -7601,8 +7942,8 @@ const darkTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnPercent: {
@@ -7613,8 +7954,8 @@ const darkTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             bar: {
@@ -7635,10 +7976,10 @@ const darkTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect: crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             barPercent: {
@@ -7647,10 +7988,10 @@ const darkTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect: crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             area: {
@@ -7715,21 +8056,7 @@ const darkTheme = ()=>{
                 ...baseConfig
             },
             funnel: {
-                ...baseConfig,
-                color: {
-                    colorScheme: [
-                        '#2E62F1',
-                        '#3A6EF6',
-                        '#4780FA',
-                        '#548CFE',
-                        '#6198FF',
-                        '#6FA3FF',
-                        '#7CACFF',
-                        '#88B7FF',
-                        '#94C2FF',
-                        '#A0CEFF'
-                    ]
-                }
+                ...baseConfig
             },
             heatmap: {
                 ...baseConfig
@@ -7780,9 +8107,6 @@ const updateAdvanced = (chartType, advancedPipe)=>{
 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);
 const zChartType = z["enum"]([
     'table',
     'pivotTable',
@@ -7875,7 +8199,20 @@ const zMeasure = z.object({
     id: z.string(),
     alias: z.string().optional(),
     autoFormat: z.boolean().default(true),
-    format: zNumFormat["default"]({})
+    format: zNumFormat["default"]({}),
+    encoding: z["enum"]([
+        'primaryYAxis',
+        'secondaryYAxis',
+        'xAxis',
+        'yAxis',
+        'angle',
+        'radius',
+        'size',
+        'color',
+        'label',
+        'tooltip'
+    ]).optional(),
+    parentId: z.string().optional()
 });
 const zMeasureGroup = z.object({
     id: z.string(),
@@ -7900,6 +8237,8 @@ const zScatterMeasure = z.object({
 const zScatterMeasures = z.array(zScatterMeasure);
 const zFoldInfo = z.object({
     foldMap: z.record(z.string(), z.string().or(z.undefined())),
+    colorRange: z.array(z.number()),
+    measureRange: z.array(z.number()),
     measureId: z.string(),
     measureName: z.string(),
     measureValue: z.string()
@@ -7935,7 +8274,6 @@ const zEncoding = z.object({
     column: z.array(z.string()).nullish(),
     group: z.array(z.string()).nullish().describe("\u5DF2\u5F03\u7528, \u8BF7\u4F7F\u7528\u989C\u8272\u66FF\u4EE3")
 });
-const zEncodings = z.array(zEncoding);
 const zXBandAxis = z.object({
     visible: z.boolean().default(true).nullish(),
     labelAutoHide: z.boolean().default(true).nullish(),
@@ -8044,10 +8382,11 @@ const zStackCornerRadius = z.number().or(z.array(z.number())).default([
 const zBackgroundColor = z.string().default('transparent').nullish();
 const zColor = z.object({
     colorScheme: z.array(z.string()).nullish(),
+    linearColorScheme: z.array(z.string()).nullish(),
     colorMapping: z.record(z.string(), z.string()).nullish()
 });
 const zLinearColor = z.object({
-    colorScheme: z.array(z.string()).nullish()
+    linearColorScheme: z.array(z.string()).nullish()
 });
 const zLabel = z.object({
     enable: z.boolean().default(true).nullish()
@@ -9028,7 +9367,7 @@ const zFunnel = z.object({
     dimensions: zDimensions.nullish(),
     measures: zMeasureTree.nullish(),
     backgroundColor: zBackgroundColor.nullish(),
-    color: zLinearColor.nullish(),
+    color: zColor.nullish(),
     label: zLabel.nullish(),
     legend: zColorLegend.nullish(),
     tooltip: zTooltip.nullish(),
@@ -9041,7 +9380,7 @@ const zHeatmap = z.object({
     dimensions: zDimensions.nullish(),
     measures: zMeasureTree.nullish(),
     backgroundColor: zBackgroundColor.nullish(),
-    color: zLinearColor.nullish(),
+    color: zColor.nullish(),
     label: zLabel.nullish(),
     legend: zColorLegend.nullish(),
     tooltip: zTooltip.nullish(),
@@ -9077,7 +9416,6 @@ const zAdvancedVSeed = z.object({
     dimensions: zDimensionTree,
     measures: zMeasureTree,
     encoding: zEncoding,
-    encodings: zEncodings,
     config: zConfig,
     analysis: zAnalysis,
     theme: zTheme,
@@ -9086,6 +9424,6 @@ const zAdvancedVSeed = z.object({
     annotation: zAnnotation,
     locale: zLocale
 });
-export { AngleEncoding, Builder, ColorEncoding, ColorIdEncoding, DetailEncoding, FoldMeasureId, FoldMeasureName, FoldMeasureValue, FoldPrimaryMeasureValue, FoldSecondaryMeasureValue, FoldXMeasureValue, FoldYMeasureValue, MeasureName, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, UnfoldDimensionGroupId, XEncoding, YEncoding, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeByEncoding, donutAdvancedPipeline, donutSpecPipeline, dualAxisAdvancedPipeline, dualAxisSpecPipeline, execPipeline, findAllDimensions, findAllMeasures, findDimensionById, findFirstDimension, findFirstMeasure, findMeasureById, foldMeasures, funnelAdvancedPipeline, funnelSpecPipeline, heatmapAdvancedPipeline, heatmapSpecPipeline, i18n, intl, isDimension, isDimensionGroup, isDimensionSelector, isDimensions, isMeasure, isMeasureGroup, isMeasureSelector, isMeasures, isPartialDatumSelector, isPivotChart, isPivotTable, isTable, isVChart, isVTable, isValueSelector, lightTheme, lineAdvancedPipeline, lineSpecPipeline, measureDepth, pieAdvancedPipeline, pieSpecPipeline, pivotTableAdvancedPipeline, pivotTableSpecPipeline, preorderTraverse, radarAdvancedPipeline, radarSpecPipeline, registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerDonut, registerFunnel, registerHeatmap, registerLightTheme, registerLine, registerPie, registerPivotTable, registerRadar, registerRose, registerRoseParallel, registerScatter, registerTable, roseAdvancedPipeline, roseParallelAdvancedPipeline, roseParallelSpecPipeline, roseSpecPipeline, scatterAdvancedPipeline, scatterSpecPipeline, selector_selector as selector, tableAdvancedPipeline, tableSpecPipeline, unfoldDimensions, updateAdvanced, updateSpec, zAdvancedVSeed, zAnalysis, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zArea, zAreaConfig, zAreaPercent, zAreaPercentConfig, zAreaStyle, zAxis, zBackgroundColor, zBar, zBarConfig, zBarParallel, zBarParallelConfig, zBarPercent, zBarPercentConfig, zBarStyle, zChartType, zColor, zColorLegend, zColumn, zColumnConfig, zColumnParallel, zColumnParallelConfig, zColumnPercent, zColumnPercentConfig, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensionGroup, zDimensionTree, zDimensions, zDonut, zDonutConfig, zDualAxis, zDualAxisConfig, zDualChartType, zDualMeasure, zDualMeasures, zEncoding, zEncodings, zFoldInfo, zFunnel, zFunnelConfig, zHeatmap, zHeatmapConfig, zLabel, zLegend, zLine, zLineConfig, zLineStyle, zLinearColor, zLocale, zMarkStyle, zMeasure, zMeasureGroup, zMeasureTree, zMeasures, zNumFormat, zPie, zPieConfig, zPivotTable, zPivotTableConfig, zPointStyle, zRadar, zRadarConfig, zRose, zRoseConfig, zRoseParallel, zRoseParallelConfig, zScatter, zScatterConfig, zScatterMeasure, zScatterMeasures, zSort, zSortLegend, zStackCornerRadius, zTable, zTableConfig, zTheme, zTooltip, zUnfoldInfo, zVSeed, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
+export { AngleEncoding, Builder, ColorEncoding, ColorIdEncoding, DetailEncoding, FoldMeasureId, FoldMeasureName, FoldMeasureValue, FoldPrimaryMeasureValue, FoldSecondaryMeasureValue, FoldXMeasureValue, FoldYMeasureValue, MeasureName, ORIGINAL_DATA, Separator, XEncoding, YEncoding, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeByEncoding, donutAdvancedPipeline, donutSpecPipeline, dualAxisAdvancedPipeline, dualAxisSpecPipeline, execPipeline, findAllDimensions, findAllMeasures, findFirstMeasure, findMeasureById, foldMeasures, funnelAdvancedPipeline, funnelSpecPipeline, heatmapAdvancedPipeline, heatmapSpecPipeline, i18n, intl, isDimensionSelector, isMeasure, isMeasureGroup, isMeasureSelector, isMeasures, isPartialDatumSelector, isPivotChart, isPivotTable, isTable, isVChart, isVTable, isValueSelector, lightTheme, lineAdvancedPipeline, lineSpecPipeline, measureDepth, pieAdvancedPipeline, pieSpecPipeline, pivotTableAdvancedPipeline, pivotTableSpecPipeline, preorderTraverse, radarAdvancedPipeline, radarSpecPipeline, registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerDonut, registerFunnel, registerHeatmap, registerLightTheme, registerLine, registerPie, registerPivotTable, registerRadar, registerRose, registerRoseParallel, registerScatter, registerTable, roseAdvancedPipeline, roseParallelAdvancedPipeline, roseParallelSpecPipeline, roseSpecPipeline, scatterAdvancedPipeline, scatterSpecPipeline, selector_selector as selector, tableAdvancedPipeline, tableSpecPipeline, unfoldDimensions, updateAdvanced, updateSpec, zAdvancedVSeed, zAnalysis, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zArea, zAreaConfig, zAreaPercent, zAreaPercentConfig, zAreaStyle, zAxis, zBackgroundColor, zBar, zBarConfig, zBarParallel, zBarParallelConfig, zBarPercent, zBarPercentConfig, zBarStyle, zChartType, zColor, zColorLegend, zColumn, zColumnConfig, zColumnParallel, zColumnParallelConfig, zColumnPercent, zColumnPercentConfig, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensionGroup, zDimensionTree, zDimensions, zDonut, zDonutConfig, zDualAxis, zDualAxisConfig, zDualChartType, zDualMeasure, zDualMeasures, zEncoding, zFoldInfo, zFunnel, zFunnelConfig, zHeatmap, zHeatmapConfig, zLabel, zLegend, zLine, zLineConfig, zLineStyle, zLinearColor, zLocale, zMarkStyle, zMeasure, zMeasureGroup, zMeasureTree, zMeasures, zNumFormat, zPie, zPieConfig, zPivotTable, zPivotTableConfig, zPointStyle, zRadar, zRadarConfig, zRose, zRoseConfig, zRoseParallel, zRoseParallelConfig, zScatter, zScatterConfig, zScatterMeasure, zScatterMeasures, zSort, zSortLegend, zStackCornerRadius, zTable, zTableConfig, zTheme, zTooltip, zUnfoldInfo, zVSeed, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map