@visactor/vseed 0.1.0 → 0.1.2

package/dist/umd/index.js

@@ -30,7 +30,6 @@
         var __webpack_exports__ = {};
         __webpack_require__.r(__webpack_exports__);
         __webpack_require__.d(__webpack_exports__, {
-            zTooltip: ()=>zTooltip,
             funnelAdvancedPipeline: ()=>funnelAdvancedPipeline,
             zHeatmapConfig: ()=>zHeatmapConfig,
             zBar: ()=>zBar,
@@ -80,12 +79,10 @@
             zRoseParallel: ()=>zRoseParallel,
             MeasureName: ()=>MeasureName,
             zDataset: ()=>zDataset,
-            UnfoldDimensionGroupId: ()=>UnfoldDimensionGroupId,
             zNumFormat: ()=>zNumFormat,
             barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
             findAllDimensions: ()=>findAllDimensions,
             FoldYMeasureValue: ()=>FoldYMeasureValue,
-            findDimensionById: ()=>findDimensionById,
             zPivotTableConfig: ()=>zPivotTableConfig,
             zArea: ()=>zArea,
             zColumnParallel: ()=>zColumnParallel,
@@ -111,31 +108,31 @@
             registerLightTheme: ()=>registerLightTheme,
             roseAdvancedPipeline: ()=>roseAdvancedPipeline,
             zBarParallel: ()=>zBarParallel,
-            registerDarkTheme: ()=>registerDarkTheme,
-            registerPivotTable: ()=>registerPivotTable,
             isPartialDatumSelector: ()=>isPartialDatumSelector,
-            pieSpecPipeline: ()=>pieSpecPipeline,
-            isDimensionGroup: ()=>isDimensionGroup,
-            dualAxisSpecPipeline: ()=>dualAxisSpecPipeline,
+            registerPivotTable: ()=>registerPivotTable,
             tableAdvancedPipeline: ()=>tableAdvancedPipeline,
-            barSpecPipeline: ()=>barSpecPipeline,
+            registerDarkTheme: ()=>registerDarkTheme,
+            dualAxisSpecPipeline: ()=>dualAxisSpecPipeline,
+            pieSpecPipeline: ()=>pieSpecPipeline,
             zAnnotationVerticalLine: ()=>zAnnotationVerticalLine,
-            registerRose: ()=>registerRose,
+            barSpecPipeline: ()=>barSpecPipeline,
             zChartType: ()=>zChartType,
+            registerRose: ()=>registerRose,
+            zMeasureTree: ()=>zMeasureTree,
             unfoldDimensions: ()=>unfoldDimensions,
             roseParallelAdvancedPipeline: ()=>roseParallelAdvancedPipeline,
             registerTable: ()=>registerTable,
-            Builder: ()=>Builder,
             isMeasureGroup: ()=>isMeasureGroup,
+            autoFormatter: ()=>autoFormatter,
             YEncoding: ()=>YEncoding,
             registerAll: ()=>registerAll,
             registerBar: ()=>registerBar,
             isVChart: ()=>isVChart,
             radarSpecPipeline: ()=>radarSpecPipeline,
-            findFirstDimension: ()=>findFirstDimension,
-            autoFormatter: ()=>autoFormatter,
-            zMeasureTree: ()=>zMeasureTree,
+            Builder: ()=>Builder,
             zPieConfig: ()=>zPieConfig,
+            zPivotTable: ()=>zPivotTable,
+            zRadar: ()=>zRadar,
             registerLine: ()=>registerLine,
             registerCustomTheme: ()=>registerCustomTheme,
             zColor: ()=>zColor,
@@ -155,21 +152,19 @@
             zAxis: ()=>zAxis,
             isVTable: ()=>isVTable,
             zMeasures: ()=>zMeasures,
-            zPivotTable: ()=>zPivotTable,
+            zRadarConfig: ()=>zRadarConfig,
             zLine: ()=>zLine,
             columnSpecPipeline: ()=>columnSpecPipeline,
-            UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
-            zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
             zFoldInfo: ()=>zFoldInfo,
+            zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
             zLinearColor: ()=>zLinearColor,
+            zStackCornerRadius: ()=>zStackCornerRadius,
             zAreaStyle: ()=>zAreaStyle,
             ORIGINAL_DATA: ()=>ORIGINAL_DATA,
-            zRadarConfig: ()=>zRadarConfig,
+            zUnfoldInfo: ()=>zUnfoldInfo,
             zAnnotationArea: ()=>zAnnotationArea,
-            zStackCornerRadius: ()=>zStackCornerRadius,
             DetailEncoding: ()=>DetailEncoding,
             zRose: ()=>zRose,
-            zUnfoldInfo: ()=>zUnfoldInfo,
             columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
             i18n: ()=>i18n,
             zPointStyle: ()=>zPointStyle,
@@ -178,7 +173,6 @@
             registerColumnParallel: ()=>registerColumnParallel,
             updateAdvanced: ()=>updateAdvanced,
             zDimension: ()=>zDimension,
-            zRadar: ()=>zRadar,
             zTable: ()=>zTable,
             isMeasure: ()=>isMeasure,
             FoldSecondaryMeasureValue: ()=>FoldSecondaryMeasureValue,
@@ -202,9 +196,9 @@
             registerBarParallel: ()=>registerBarParallel,
             registerRadar: ()=>registerRadar,
             zEncodings: ()=>zEncodings,
-            isDimension: ()=>isDimension,
             pivotTableSpecPipeline: ()=>pivotTableSpecPipeline,
             zLocale: ()=>zLocale,
+            zMeasure: ()=>zMeasure,
             FoldXMeasureValue: ()=>FoldXMeasureValue,
             dualAxisAdvancedPipeline: ()=>dualAxisAdvancedPipeline,
             registerScatter: ()=>registerScatter,
@@ -216,10 +210,9 @@
             zAdvancedVSeed: ()=>zAdvancedVSeed,
             zConfig: ()=>zConfig,
             zBarStyle: ()=>zBarStyle,
-            zMeasure: ()=>zMeasure,
             zRoseParallelConfig: ()=>zRoseParallelConfig,
-            zAreaPercent: ()=>zAreaPercent,
             zXLinearAxis: ()=>zXLinearAxis,
+            zAreaPercent: ()=>zAreaPercent,
             columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
             isValueSelector: ()=>isValueSelector,
             donutAdvancedPipeline: ()=>donutAdvancedPipeline,
@@ -237,8 +230,8 @@
             lineAdvancedPipeline: ()=>lineAdvancedPipeline,
             dataReshapeByEncoding: ()=>dataReshapeByEncoding,
             lineSpecPipeline: ()=>lineSpecPipeline,
-            isDimensions: ()=>isDimensions,
             zBarPercentConfig: ()=>zBarPercentConfig,
+            zTooltip: ()=>zTooltip,
             createFormatter: ()=>createFormatter,
             zDimensionGroup: ()=>zDimensionGroup,
             isMeasureSelector: ()=>isMeasureSelector,
@@ -1130,32 +1123,6 @@
                 }));
             return result;
         };
-        const findDimensionById = (dimensions = [], id)=>{
-            if (!dimensions) return;
-            let result;
-            preorderTraverse(dimensions, (node)=>{
-                if (!('children' in node)) {
-                    if (node.id === id) {
-                        result = node;
-                        return true;
-                    }
-                }
-                return false;
-            });
-            return result;
-        };
-        const findFirstDimension = (dimensions = [])=>{
-            if (!dimensions) return;
-            let result;
-            preorderTraverse(dimensions, (node)=>{
-                if (!('children' in node)) {
-                    result = node;
-                    return true;
-                }
-                return false;
-            });
-            return result;
-        };
         const findAllDimensions = (dimensions = [])=>{
             if (!dimensions) return [];
             const result = [];
@@ -1611,8 +1578,6 @@
         const DetailEncoding = '__Dim_Detail__';
         const ColorEncoding = '__Dim_Color__';
         const ColorIdEncoding = '__Dim_ColorId__';
-        const UnfoldDimensionGroup = '__DimGroup__';
-        const UnfoldDimensionGroupId = '__DimGroupID__';
         const autoDimensions_autoDimensions = (advancedVSeed, context)=>{
             const result = {
                 ...advancedVSeed
@@ -1652,23 +1617,26 @@
             result.dimensions.push(MeaName);
             return result;
         };
-        const encodingForColumn = (advancedVSeed, context)=>{
+        const encodingForLine = (advancedVSeed, context)=>{
             const { vseed } = context;
             const { dimensions } = advancedVSeed;
             if (!dimensions) return advancedVSeed;
             const encoding = vseed.encoding;
             if (encoding) {
-                const x = encoding.x || [];
-                const detail = encoding.detail || [];
-                const color = encoding.color || [];
-                const mergedDetail = [
-                    ...color.filter((d)=>!x.includes(d)),
-                    ...detail
+                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 ? dimensions.map((d)=>d.id).filter((id)=>!x.includes(id)) : encoding.detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
                         ...encoding,
+                        x,
+                        color,
                         detail: mergedDetail
                     }
                 };
@@ -1676,7 +1644,7 @@
             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(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: [],
@@ -1715,11 +1683,21 @@
             for (let r of e)delete o[r];
             return o;
         }
-        const foldMeasures = (dataset, measures, measureId = FoldMeasureId, measureName = FoldMeasureName, measureValue = FoldMeasureValue)=>{
+        const foldMeasures = (dataset, measures, encoding, options)=>{
+            const { measureId = FoldMeasureId, measureName = FoldMeasureName, measureValue = FoldMeasureValue } = options || {};
+            const colorMeasureId = encoding?.color?.length === 1 && measures.some((m)=>m.id === encoding?.color?.[0]) ? encoding?.color?.[0] : void 0;
             const foldInfo = {
                 measureId,
                 measureName,
                 measureValue,
+                colorRange: [
+                    0,
+                    1
+                ],
+                measureRange: [
+                    0,
+                    1
+                ],
                 foldMap: {}
             };
             const result = new Array(dataset.length * measures.length);
@@ -1736,6 +1714,19 @@
                 datum[measureId] = id;
                 datum[measureName] = alias || id;
                 datum[measureValue] = dataset[i][id];
+                if (colorMeasureId) {
+                    const value = datum[ORIGINAL_DATA][colorMeasureId];
+                    datum[ColorEncoding] = value;
+                    datum[ColorIdEncoding] = colorMeasureId;
+                    foldInfo.colorRange = [
+                        Math.min(foldInfo.colorRange[0] || 1 / 0, Number(value)),
+                        Math.max(foldInfo.colorRange[1] || -1 / 0, Number(value))
+                    ];
+                }
+                foldInfo.measureRange = [
+                    Math.min(foldInfo.measureRange[0] || 1 / 0, Number(datum[id])),
+                    Math.max(foldInfo.measureRange[1] || -1 / 0, Number(datum[id]))
+                ];
                 foldInfo.foldMap[id] = alias;
                 result[index++] = datum;
             }
@@ -1771,7 +1762,7 @@
                 applyEncoding(YEncoding, yDimensions, datum, separator);
                 applyEncoding(ColorEncoding, colorDimensions, datum, separator);
                 applyEncoding(DetailEncoding, detailDimensions, datum, separator);
-                if (!datum[ColorEncoding]) continue;
+                if (!colorDimensions.length || !datum[ColorEncoding]) continue;
                 const measureId = String(datum[foldMeasureId]);
                 const colorItem = String(datum[ColorEncoding]);
                 const colorId = colorItemAsId ? colorItem : measureId ? [
@@ -1792,29 +1783,13 @@
         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 { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, encoding, {
+                measureId: foldMeasureId,
+                measureName: foldMeasureName,
+                measureValue: foldMeasureValue
+            });
             const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, dimensions, encoding, {
                 foldMeasureId,
                 separator: Separator,
@@ -2089,7 +2064,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             autoMeasures_autoMeasures,
             autoDimensions_autoDimensions,
-            encodingForColumn,
+            encodingForLine,
             pivotAdapter([
                 reshapeWithEncoding
             ], [
@@ -2102,6 +2077,17 @@
             markStyle_markStyle,
             annotation_annotation
         ];
+        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 initLine = (spec, context)=>{
             const result = {
                 ...spec
@@ -2113,7 +2099,7 @@
             result.direction = 'vertical';
             result.xField = unfoldInfo.encodingX;
             result.yField = foldInfo.measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -2174,6 +2160,31 @@
                 ...accurateMap
             };
         };
+        const linearColor = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const { unfoldInfo, id } = datasetReshapeInfo[0];
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.color) return result;
+            const { color } = baseConfig;
+            const { colorScheme, linearColorScheme } = color;
+            result.color = {
+                type: 'linear',
+                range: linearColorScheme || colorScheme || [],
+                domain: [
+                    {
+                        dataId: id,
+                        fields: [
+                            unfoldInfo.encodingColor
+                        ]
+                    }
+                ]
+            };
+            return result;
+        };
         const background_backgroundColor = (spec, context)=>{
             const result = {
                 ...spec
@@ -2681,6 +2692,95 @@
             };
             return result;
         };
+        const colorLegend = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType } = advancedVSeed;
+            const { unfoldInfo } = datasetReshapeInfo[0];
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.legend) return result;
+            const { legend } = baseConfig;
+            const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight } = legend || {};
+            const orient = [
+                'bottom',
+                'bottomLeft',
+                'bottomRight',
+                'bl',
+                'br'
+            ].includes(position) ? 'bottom' : [
+                'top',
+                'topLeft',
+                'topRight',
+                'tl',
+                'tr'
+            ].includes(position) ? 'top' : [
+                'left',
+                'leftTop',
+                'leftBottom',
+                'lt',
+                'lb'
+            ].includes(position) ? 'left' : 'right';
+            const legendPosition = [
+                'topLeft',
+                'bottomLeft',
+                'leftTop',
+                'rightTop',
+                'lt',
+                'rt',
+                'tl',
+                'bl'
+            ].includes(position) ? 'start' : [
+                'topRight',
+                'bottomRight',
+                'leftBottom',
+                'rightBottom',
+                'lb',
+                'rb',
+                'rt',
+                'br'
+            ].includes(position) ? 'end' : 'middle';
+            result.legends = {
+                type: 'color',
+                visible: enable,
+                orient,
+                position: legendPosition,
+                padding: 0,
+                field: unfoldInfo.encodingColor,
+                maxWidth: '30%',
+                startText: {
+                    visible: true,
+                    style: {
+                        fill: labelFontColor,
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight
+                    }
+                },
+                endText: {
+                    visible: true,
+                    style: {
+                        fill: labelFontColor,
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight
+                    }
+                }
+            };
+            return result;
+        };
+        const colorPointStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.point?.style) result.point.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         const selector_selector = (vchartDatum, selector)=>{
             if (!selector) return true;
             const selectorMode = 'And';
@@ -2777,7 +2877,10 @@
             const { markStyle } = advancedVSeed;
             const { pointStyle } = markStyle;
             const result = {
-                ...spec
+                ...spec,
+                point: {
+                    style: {}
+                }
             };
             if (!pointStyle) return result;
             const pointStyles = Array.isArray(pointStyle) ? pointStyle : [
@@ -2821,6 +2924,7 @@
             return {
                 ...result,
                 point: {
+                    ...result.point,
                     state: {
                         ...customMap
                     }
@@ -2876,6 +2980,19 @@
             };
             return result;
         };
+        const colorLineStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.line?.style) result.line.style.stroke = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         function chunk_HVPVHFDT_i(...e) {
             return chunk_WIMGWYZL_u(chunk_HVPVHFDT_p, e);
         }
@@ -2897,10 +3014,13 @@
             const { markStyle, datasetReshapeInfo, dataset } = advancedVSeed;
             const { unfoldInfo } = datasetReshapeInfo[0];
             const { lineStyle } = markStyle;
-            if (!lineStyle) return spec;
             const result = {
-                ...spec
+                ...spec,
+                line: {
+                    style: {}
+                }
             };
+            if (!lineStyle) return result;
             const lineStyles = Array.isArray(lineStyle) ? lineStyle : [
                 lineStyle
             ];
@@ -2944,6 +3064,7 @@
             return {
                 ...result,
                 line: {
+                    ...result.line,
                     state: {
                         ...customMap
                     }
@@ -3719,7 +3840,7 @@
             };
         const line_line = [
             initLine,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -3728,10 +3849,10 @@
             label_label,
             tooltip_tooltip,
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorAdapter(discreteLegend, colorLegend),
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateDimensionHover,
-            lineStyle_lineStyle,
+            colorLineStyleFill(lineStyle_lineStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -3772,6 +3893,48 @@
             Builder._advancedPipelineMap.line = lineAdvancedPipeline;
             Builder._specPipelineMap.line = lineSpecPipeline;
         };
+        const encodingForColumn = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const { dimensions } = advancedVSeed;
+            if (!dimensions) return advancedVSeed;
+            const encoding = vseed.encoding;
+            if (encoding) {
+                const x = encoding.x || [
+                    dimensions[0].id
+                ];
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
+                const detail = encoding.detail || [];
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
+                    ...color,
+                    ...detail
+                ]) : detail;
+                return {
+                    ...advancedVSeed,
+                    encoding: {
+                        ...encoding,
+                        x,
+                        color,
+                        detail: mergedDetail
+                    }
+                };
+            }
+            const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
+            const mergedEncoding = {
+                x: dimensions.slice(0, 1).map((item)=>item.id),
+                color: dimensions.slice(onlyMeasureName ? 0 : 1).map((item)=>item.id),
+                detail: dimensions.slice(onlyMeasureName ? 0 : 1).map((item)=>item.id),
+                tooltip: dimensions.map((item)=>item.id),
+                label: [],
+                row: [],
+                column: []
+            };
+            return {
+                ...advancedVSeed,
+                encoding: mergedEncoding
+            };
+        };
         const columnAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
             autoMeasures_autoMeasures,
@@ -3814,9 +3977,14 @@
             const { advancedVSeed, vseed } = context;
             const { chartType } = vseed;
             const stackCornerRadius = advancedVSeed.config?.[chartType]?.stackCornerRadius;
+            const { datasetReshapeInfo } = advancedVSeed;
+            const { foldInfo } = datasetReshapeInfo[0];
             return {
                 ...spec,
-                stackCornerRadius
+                stackCornerRadius: (_, datum)=>{
+                    if (datum[foldInfo.measureValue] > 0) return stackCornerRadius;
+                    return 0;
+                }
             };
         };
         const stackInverse = (spec)=>{
@@ -3866,6 +4034,19 @@
             };
             return result;
         };
+        const colorBarStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.bar?.style) result.bar.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         const barStyle_barStyle = (spec, context)=>{
             const { advancedVSeed } = context;
             const { markStyle, dataset = [] } = advancedVSeed;
@@ -4061,11 +4242,98 @@
                 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 {
+                ...result,
+                legends
+            };
+        };
         const column = [
             initColumn,
             stackCornerRadius_stackCornerRadius,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -4074,8 +4342,8 @@
             label_label,
             tooltip_tooltip,
             verticalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorAdapter(discreteLegend, colorLegend),
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4090,7 +4358,7 @@
                 initColumn,
                 stackCornerRadius_stackCornerRadius,
                 stackInverse,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
@@ -4099,7 +4367,7 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairRect,
-                barStyle_barStyle,
+                colorBarStyleFill(barStyle_barStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4107,7 +4375,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const columnSpecPipeline = [
             pivotAdapter_pivotAdapter(column, pivotColumn)
@@ -4163,7 +4431,7 @@
         const columnParallel = [
             initColumnParallel,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -4171,9 +4439,9 @@
             yLinear,
             label_label,
             tooltip_tooltip,
-            discreteLegend,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairRect,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4187,7 +4455,7 @@
             pivotIndicators_pivotIndicators([
                 initColumnParallel,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
@@ -4196,7 +4464,7 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairRect,
-                barStyle_barStyle,
+                colorBarStyleFill(barStyle_barStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4204,7 +4472,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const columnParallelSpecPipeline = [
             pivotAdapter_pivotAdapter(columnParallel, pivotColumnParallel)
@@ -4241,7 +4509,7 @@
             initColumn,
             stackCornerRadius_stackCornerRadius,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent,
             datasetXY,
@@ -4250,9 +4518,9 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4267,7 +4535,7 @@
                 initColumn,
                 stackCornerRadius_stackCornerRadius,
                 stackInverse,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 percent,
                 background_backgroundColor,
                 datasetXY,
@@ -4277,7 +4545,7 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairRect,
-                barStyle_barStyle,
+                colorBarStyleFill(barStyle_barStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4285,7 +4553,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const columnPercentSpecPipeline = [
             pivotAdapter_pivotAdapter(columnPercent, pivotColumnPercent)
@@ -4300,17 +4568,23 @@
             if (!dimensions) return advancedVSeed;
             const encoding = vseed.encoding;
             if (encoding) {
-                const y = encoding.y || [];
+                const y = encoding.y || [
+                    dimensions[0].id
+                ];
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
                 const detail = encoding.detail || [];
-                const color = encoding.color || [];
-                const mergedDetail = [
-                    ...color.filter((d)=>!y.includes(d)),
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
+                    ...color,
                     ...detail
-                ];
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
                         ...encoding,
+                        y,
+                        color,
                         detail: mergedDetail
                     }
                 };
@@ -4318,7 +4592,7 @@
             const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
             const mergedEncoding = {
                 y: dimensions.slice(0, 1).map((item)=>item.id),
-                color: dimensions.slice(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: [],
@@ -4648,7 +4922,7 @@
         const bar = [
             initBar,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetYX,
             progressive,
@@ -4656,9 +4930,9 @@
             yBand,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             horizontalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4672,7 +4946,7 @@
             pivotIndicators_pivotIndicators([
                 initBar,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetYX,
                 progressive,
@@ -4681,8 +4955,8 @@
                 label_label,
                 label_label,
                 tooltip_tooltip,
+                colorBarStyleFill(barStyle_barStyle),
                 horizontalCrosshairRect,
-                barStyle_barStyle,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4690,7 +4964,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const barSpecPipeline = [
             pivotAdapter_pivotAdapter(bar, pivotBar)
@@ -4746,7 +5020,7 @@
         const barParallel = [
             initBarParallel,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetYX,
             progressive,
@@ -4754,9 +5028,9 @@
             yBand,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             horizontalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4770,15 +5044,15 @@
             pivotIndicators_pivotIndicators([
                 initBarParallel,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetYX,
                 xLinear,
                 yBand,
                 label_label,
                 tooltip_tooltip,
+                colorBarStyleFill(barStyle_barStyle),
                 horizontalCrosshairRect,
-                barStyle_barStyle,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4786,7 +5060,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const barParallelSpecPipeline = [
             pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
@@ -4815,7 +5089,7 @@
         const barPercent = [
             initBar,
             stackCornerRadius_stackCornerRadius,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent,
             datasetYX,
@@ -4824,9 +5098,9 @@
             yBand,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             horizontalCrosshairRect,
-            discreteLegend,
-            barStyle_barStyle,
+            colorBarStyleFill(barStyle_barStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4840,7 +5114,7 @@
             pivotIndicators_pivotIndicators([
                 initBar,
                 stackCornerRadius_stackCornerRadius,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 percent,
                 datasetYX,
@@ -4848,8 +5122,8 @@
                 xLinear,
                 label_label,
                 tooltip_tooltip,
+                colorBarStyleFill(barStyle_barStyle),
                 horizontalCrosshairRect,
-                barStyle_barStyle,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -4857,7 +5131,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const barPercentSpecPipeline = [
             pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
@@ -4894,7 +5168,7 @@
             result.direction = 'vertical';
             result.yField = foldInfo.measureValue;
             result.xField = unfoldInfo.encodingX;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -4904,20 +5178,32 @@
             result.animation = true;
             return result;
         };
+        const colorAreaStyleFill = (stylePipe)=>(spec, context)=>{
+                const result = stylePipe(spec, context);
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                if (isLinearColor(advancedVSeed)) {
+                    if (result?.area?.style) result.area.style.fill = {
+                        field: unfoldInfo.encodingColor,
+                        scale: 'color'
+                    };
+                }
+                return result;
+            };
         const areaStyle_areaStyle = (spec, context)=>{
             const { advancedVSeed } = context;
             const { markStyle, datasetReshapeInfo, dataset } = advancedVSeed;
             const { areaStyle } = markStyle;
             const { unfoldInfo } = datasetReshapeInfo[0];
-            if (!areaStyle) return {
+            const result = {
                 ...spec,
                 area: {
-                    visible: true
+                    visible: true,
+                    style: {}
                 }
             };
-            const result = {
-                ...spec
-            };
+            if (!areaStyle) return result;
             const areaStyles = Array.isArray(areaStyle) ? areaStyle : [
                 areaStyle
             ];
@@ -4945,6 +5231,7 @@
             return {
                 ...result,
                 area: {
+                    ...result.area,
                     visible: true,
                     state: {
                         ...customMap
@@ -4955,7 +5242,7 @@
         const area_area = [
             initArea,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -4963,12 +5250,12 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateDimensionHover,
-            lineStyle_lineStyle,
-            areaStyle_areaStyle,
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -4981,7 +5268,7 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initArea,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 stackInverse,
                 datasetXY,
@@ -4991,10 +5278,10 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairLine,
-                pointStyle_pointStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateDimensionHover,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle,
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -5002,7 +5289,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const areaSpecPipeline = [
             pivotAdapter_pivotAdapter(area_area, pivotArea)
@@ -5031,7 +5318,7 @@
         const areaPercent = [
             initArea,
             stackInverse,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             percent,
             datasetXY,
@@ -5040,11 +5327,12 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
-            lineStyle_lineStyle,
-            areaStyle_areaStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
+            pointStateDimensionHover,
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle),
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -5058,7 +5346,7 @@
             pivotIndicators_pivotIndicators([
                 initArea,
                 stackInverse,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 percent,
                 datasetXY,
@@ -5068,9 +5356,10 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairLine,
-                pointStyle_pointStyle,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
+                pointStateDimensionHover,
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -5078,7 +5367,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const areaPercentSpecPipeline = [
             pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -5183,15 +5472,18 @@
             const encoding = vseed.encoding;
             if (encoding) {
                 const detail = encoding.detail || [];
-                const color = encoding.color || [];
-                const mergedDetail = chunk_QJLMYOTX_i([
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
                     ...color,
                     ...detail
-                ]);
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
                         ...encoding,
+                        color,
                         detail: mergedDetail
                     }
                 };
@@ -5430,7 +5722,7 @@
         };
         const scatter = [
             initScatter,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetScatter,
             progressive,
@@ -5438,10 +5730,10 @@
             yLinear,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
             horizontalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateHover,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
@@ -5455,7 +5747,7 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initScatter,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetScatter,
                 progressive,
@@ -5465,7 +5757,7 @@
                 tooltip_tooltip,
                 verticalCrosshairLine,
                 horizontalCrosshairLine,
-                pointStyle_pointStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateHover,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
@@ -5578,17 +5870,23 @@
             if (!dimensions) return advancedVSeed;
             const encoding = vseed.encoding;
             if (encoding) {
-                const x = encoding.x || [];
+                const x = encoding.x || [
+                    dimensions[0].id
+                ];
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
                 const detail = encoding.detail || [];
-                const color = encoding.color || [];
-                const mergedDetail = [
-                    ...color.filter((d)=>!x.includes(d)),
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
+                    ...color,
                     ...detail
-                ];
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
                         ...encoding,
+                        x,
+                        color,
                         detail: mergedDetail
                     }
                 };
@@ -6568,7 +6866,6 @@
                 }
             };
             const mergedEncoding = {
-                angle: dimensions.slice(0, 1).map((item)=>item.id),
                 color: dimensions.slice(0).map((item)=>item.id),
                 detail: dimensions.slice(0).map((item)=>item.id),
                 tooltip: dimensions.map((item)=>item.id),
@@ -6607,8 +6904,7 @@
             result.outerRadius = 0.8;
             result.innerRadius = 0;
             result.valueField = foldInfo.measureValue;
-            result.categoryField = unfoldInfo.encodingAngle;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.categoryField = unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -6699,8 +6995,7 @@
             result.outerRadius = 0.8;
             result.innerRadius = 0.8 * result.outerRadius;
             result.valueField = foldInfo.measureValue;
-            result.categoryField = unfoldInfo.encodingDetail;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.categoryField = unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -6770,17 +7065,23 @@
             if (!dimensions) return advancedVSeed;
             const encoding = vseed.encoding;
             if (encoding) {
-                const angle = encoding.angle || [];
+                const angle = encoding.angle || [
+                    dimensions[0].id
+                ];
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
                 const detail = encoding.detail || [];
-                const color = encoding.color || [];
-                const mergedDetail = [
-                    ...color.filter((d)=>!angle.includes(d)),
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
+                    ...color,
                     ...detail
-                ];
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
                         ...encoding,
+                        angle,
+                        color,
                         detail: mergedDetail
                     }
                 };
@@ -6788,7 +7089,7 @@
             const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
             const mergedEncoding = {
                 angle: dimensions.slice(0, 1).map((item)=>item.id),
-                color: dimensions.slice(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: [],
@@ -6823,7 +7124,7 @@
             const { dataset, datasetReshapeInfo } = advancedVSeed;
             const { foldInfo, unfoldInfo } = datasetReshapeInfo[0];
             result.type = 'rose';
-            result.categoryField = unfoldInfo.encodingAngle;
+            result.angleField = unfoldInfo.encodingAngle;
             result.seriesField = unfoldInfo.encodingColorId;
             result.valueField = foldInfo.measureValue;
             result.padding = 0;
@@ -6993,7 +7294,7 @@
             const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
             const sameDimensionsMode = dimensions.length > 1 && dimensions.every((dim)=>dim.id === dimensions[0].id);
             result.type = 'rose';
-            result.categoryField = sameDimensionsMode ? [
+            result.angleField = sameDimensionsMode ? [
                 unfoldInfo.encodingAngle
             ] : [
                 unfoldInfo.encodingAngle,
@@ -7083,17 +7384,23 @@
             if (!dimensions) return advancedVSeed;
             const encoding = vseed.encoding;
             if (encoding) {
-                const angle = encoding.angle || [];
+                const angle = encoding.angle || [
+                    dimensions[0].id
+                ];
+                const color = encoding.color || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
                 const detail = encoding.detail || [];
-                const color = encoding.color || [];
-                const mergedDetail = [
-                    ...color.filter((d)=>!angle.includes(d)),
+                const mergedDetail = 0 === detail.length ? chunk_QJLMYOTX_i([
+                    ...color,
                     ...detail
-                ];
+                ]) : detail;
                 return {
                     ...advancedVSeed,
                     encoding: {
                         ...encoding,
+                        angle,
+                        color,
                         detail: mergedDetail
                     }
                 };
@@ -7138,7 +7445,7 @@
             result.type = 'radar';
             result.angleField = unfoldInfo.encodingAngle;
             result.radiusField = foldInfo.measureValue;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.seriesField = isLinearColor(advancedVSeed) ? unfoldInfo.encodingDetail : unfoldInfo.encodingColorId;
             result.padding = 0;
             result.region = [
                 {
@@ -7203,7 +7510,7 @@
         };
         const radar = [
             initRadar,
-            color_color,
+            colorAdapter(color_color, linearColor),
             background_backgroundColor,
             datasetXY,
             progressive,
@@ -7211,12 +7518,12 @@
             radarRadiusAxis,
             label_label,
             tooltip_tooltip,
+            colorAdapter(discreteLegend, colorLegend),
             verticalCrosshairLine,
-            discreteLegend,
-            pointStyle_pointStyle,
+            colorPointStyleFill(pointStyle_pointStyle),
             pointStateDimensionHover,
-            lineStyle_lineStyle,
-            areaStyle_areaStyle
+            colorLineStyleFill(lineStyle_lineStyle),
+            colorAreaStyleFill(areaStyle_areaStyle)
         ];
         const pivotRadar = [
             initPivot,
@@ -7225,7 +7532,7 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initRadar,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
@@ -7234,14 +7541,14 @@
                 label_label,
                 tooltip_tooltip,
                 verticalCrosshairLine,
-                pointStyle_pointStyle,
+                colorPointStyleFill(pointStyle_pointStyle),
                 pointStateDimensionHover,
-                lineStyle_lineStyle,
-                areaStyle_areaStyle
+                colorLineStyleFill(lineStyle_lineStyle),
+                colorAreaStyleFill(areaStyle_areaStyle)
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const radarSpecPipeline = [
             pivotAdapter_pivotAdapter(radar, pivotRadar)
@@ -7297,8 +7604,7 @@
             const { foldInfo, unfoldInfo } = datasetReshapeInfo[0];
             result.type = 'funnel';
             result.valueField = foldInfo.measureValue;
-            result.categoryField = unfoldInfo.encodingDetail;
-            result.seriesField = unfoldInfo.encodingColorId;
+            result.categoryField = unfoldInfo.encodingColorId;
             result.padding = 0;
             result.isTransform = true;
             result.shape = 'rect';
@@ -7333,6 +7639,7 @@
             initFunnel,
             background_backgroundColor,
             datasetXY,
+            color_color,
             label_label,
             tooltip_tooltip,
             discreteLegend,
@@ -7350,6 +7657,7 @@
                 initFunnel,
                 background_backgroundColor,
                 datasetXY,
+                color_color,
                 label_label,
                 tooltip_tooltip,
                 discreteLegend,
@@ -7373,12 +7681,22 @@
             const { dimensions } = advancedVSeed;
             if (!dimensions) return advancedVSeed;
             const encoding = vseed.encoding;
-            if (encoding) return {
-                ...advancedVSeed,
-                encoding: {
-                    ...encoding
-                }
-            };
+            if (encoding) {
+                const x = encoding.x || [
+                    dimensions[0].id
+                ];
+                const y = encoding.y || [
+                    (dimensions[1] || dimensions[0]).id
+                ];
+                return {
+                    ...advancedVSeed,
+                    encoding: {
+                        x,
+                        y,
+                        ...encoding
+                    }
+                };
+            }
             const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
             const mergedEncoding = {
                 x: dimensions.slice(0, 1).map((item)=>item.id),
@@ -7465,6 +7783,7 @@
             initHeatmap,
             background_backgroundColor,
             datasetXY,
+            color_color,
             label_label,
             labelColorInversion,
             discreteLegend,
@@ -7486,6 +7805,7 @@
                 initHeatmap,
                 background_backgroundColor,
                 datasetXY,
+                color_color,
                 label_label,
                 labelColorInversion,
                 discreteLegend,
@@ -7616,6 +7936,10 @@
             const baseConfig = {
                 backgroundColor: 'transparent',
                 color: {
+                    linearColorScheme: [
+                        '#C2CEFF',
+                        '#5766EC'
+                    ],
                     colorScheme: [
                         '#8D72F6',
                         '#5766EC',
@@ -7680,8 +8004,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnParallel: {
@@ -7692,8 +8016,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnPercent: {
@@ -7704,8 +8028,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     bar: {
@@ -7714,10 +8038,10 @@
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     barParallel: {
@@ -7726,10 +8050,10 @@
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     barPercent: {
@@ -7738,10 +8062,10 @@
                         yAxis: barBandAxis,
                         crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     area: {
@@ -7806,38 +8130,10 @@
                         ...baseConfig
                     },
                     funnel: {
-                        ...baseConfig,
-                        color: {
-                            colorScheme: [
-                                '#5766EC',
-                                '#6372F0',
-                                '#7080F4',
-                                '#7C8CFA',
-                                '#8998FF',
-                                '#95A3FF',
-                                '#A0AEFF',
-                                '#ACB9FF',
-                                '#B7C4FF',
-                                '#C2CEFF'
-                            ].reverse()
-                        }
+                        ...baseConfig
                     },
                     heatmap: {
-                        ...baseConfig,
-                        color: {
-                            colorScheme: [
-                                '#5766EC',
-                                '#6372F0',
-                                '#7080F4',
-                                '#7C8CFA',
-                                '#8998FF',
-                                '#95A3FF',
-                                '#A0AEFF',
-                                '#ACB9FF',
-                                '#B7C4FF',
-                                '#C2CEFF'
-                            ].reverse()
-                        }
+                        ...baseConfig
                     }
                 }
             };
@@ -7949,6 +8245,10 @@
             const baseConfig = {
                 backgroundColor: 'transparent',
                 color: {
+                    linearColorScheme: [
+                        '#A0CEFF',
+                        '#2E62F1'
+                    ],
                     colorScheme: [
                         '#2E62F1',
                         '#4DC36A',
@@ -8012,8 +8312,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnParallel: {
@@ -8024,8 +8324,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     columnPercent: {
@@ -8036,8 +8336,8 @@
                         stackCornerRadius: [
                             4,
                             4,
-                            4,
-                            4
+                            0,
+                            0
                         ]
                     },
                     bar: {
@@ -8058,10 +8358,10 @@
                         yAxis: barBandAxis,
                         crosshairRect: crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     barPercent: {
@@ -8070,10 +8370,10 @@
                         yAxis: barBandAxis,
                         crosshairRect: crosshairRect,
                         stackCornerRadius: [
+                            0,
                             4,
                             4,
-                            4,
-                            4
+                            0
                         ]
                     },
                     area: {
@@ -8138,21 +8438,7 @@
                         ...baseConfig
                     },
                     funnel: {
-                        ...baseConfig,
-                        color: {
-                            colorScheme: [
-                                '#2E62F1',
-                                '#3A6EF6',
-                                '#4780FA',
-                                '#548CFE',
-                                '#6198FF',
-                                '#6FA3FF',
-                                '#7CACFF',
-                                '#88B7FF',
-                                '#94C2FF',
-                                '#A0CEFF'
-                            ]
-                        }
+                        ...baseConfig
                     },
                     heatmap: {
                         ...baseConfig
@@ -8203,9 +8489,6 @@
         const updateSpec = (chartType, specPipe)=>{
             Builder._customSpecPipe[chartType] = specPipe;
         };
-        const isDimension = (dimension)=>!('children' in dimension);
-        const isDimensionGroup = (dimension)=>'children' in dimension;
-        const isDimensions = (dimensions)=>dimensions.every(isDimension);
         Object.freeze({
             status: "aborted"
         });
@@ -11606,6 +11889,8 @@
         const zScatterMeasures = schemas_array(zScatterMeasure);
         const zFoldInfo = schemas_object({
             foldMap: record(schemas_string(), schemas_string().or(schemas_undefined())),
+            colorRange: schemas_array(schemas_number()),
+            measureRange: schemas_array(schemas_number()),
             measureId: schemas_string(),
             measureName: schemas_string(),
             measureValue: schemas_string()
@@ -11750,10 +12035,11 @@
         const zBackgroundColor = schemas_string().default('transparent').nullish();
         const zColor = schemas_object({
             colorScheme: schemas_array(schemas_string()).nullish(),
+            linearColorScheme: schemas_array(schemas_string()).nullish(),
             colorMapping: record(schemas_string(), schemas_string()).nullish()
         });
         const zLinearColor = schemas_object({
-            colorScheme: schemas_array(schemas_string()).nullish()
+            linearColorScheme: schemas_array(schemas_string()).nullish()
         });
         const zLabel = schemas_object({
             enable: schemas_boolean().default(true).nullish()
@@ -12734,7 +13020,7 @@
             dimensions: zDimensions.nullish(),
             measures: zMeasureTree.nullish(),
             backgroundColor: zBackgroundColor.nullish(),
-            color: zLinearColor.nullish(),
+            color: zColor.nullish(),
             label: zLabel.nullish(),
             legend: zColorLegend.nullish(),
             tooltip: zTooltip.nullish(),
@@ -12747,7 +13033,7 @@
             dimensions: zDimensions.nullish(),
             measures: zMeasureTree.nullish(),
             backgroundColor: zBackgroundColor.nullish(),
-            color: zLinearColor.nullish(),
+            color: zColor.nullish(),
             label: zLabel.nullish(),
             legend: zColorLegend.nullish(),
             tooltip: zTooltip.nullish(),