@visactor/vseed 0.1.0 → 0.1.2

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 = [];
@@ -1194,8 +1168,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,23 +1207,26 @@ 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;
     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
             }
         };
@@ -1259,7 +1234,7 @@ const encodingForColumn = (advancedVSeed, context)=>{
     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: [],
@@ -1277,11 +1252,21 @@ 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 = 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);
@@ -1298,6 +1283,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;
     }
@@ -1333,7 +1331,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 ? [
@@ -1354,29 +1352,13 @@ 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 { dataset: foldedDataset, foldInfo } = foldMeasures(dataset, measures, encoding, {
+        measureId: foldMeasureId,
+        measureName: foldMeasureName,
+        measureValue: foldMeasureValue
+    });
     const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, dimensions, encoding, {
         foldMeasureId,
         separator: Separator,
@@ -1642,7 +1624,7 @@ const lineAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
     autoMeasures_autoMeasures,
     autoDimensions_autoDimensions,
-    encodingForColumn,
+    encodingForLine,
     pivotAdapter([
         reshapeWithEncoding
     ], [
@@ -1655,6 +1637,17 @@ const lineAdvancedPipeline = [
     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
@@ -1666,7 +1659,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 = [
         {
@@ -1727,6 +1720,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
@@ -2234,6 +2252,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';
@@ -2330,7 +2437,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 : [
@@ -2374,6 +2484,7 @@ const pointStyle_pointStyle = (spec, context)=>{
     return {
         ...result,
         point: {
+            ...result.point,
             state: {
                 ...customMap
             }
@@ -2429,15 +2540,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
     ];
@@ -2481,6 +2608,7 @@ const lineStyle_lineStyle = (spec, context)=>{
     return {
         ...result,
         line: {
+            ...result.line,
             state: {
                 ...customMap
             }
@@ -3253,7 +3381,7 @@ const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
     };
 const line_line = [
     initLine,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -3262,10 +3390,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,
@@ -3306,6 +3434,48 @@ 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,
@@ -3348,9 +3518,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)=>{
@@ -3400,6 +3575,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;
@@ -3595,11 +3783,98 @@ const annotationAreaBand = (spec, context)=>{
         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,
@@ -3608,8 +3883,8 @@ const column = [
     label_label,
     tooltip_tooltip,
     verticalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorAdapter(discreteLegend, colorLegend),
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -3624,7 +3899,7 @@ const pivotColumn = [
         initColumn,
         stackCornerRadius_stackCornerRadius,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
@@ -3633,7 +3908,7 @@ const pivotColumn = [
         label_label,
         tooltip_tooltip,
         verticalCrosshairRect,
-        barStyle_barStyle,
+        colorBarStyleFill(barStyle_barStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3641,7 +3916,7 @@ const pivotColumn = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const columnSpecPipeline = [
     pivotAdapter_pivotAdapter(column, pivotColumn)
@@ -3697,7 +3972,7 @@ const initColumnParallel = (spec, context)=>{
 const columnParallel = [
     initColumnParallel,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -3705,9 +3980,9 @@ const columnParallel = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    discreteLegend,
+    colorAdapter(discreteLegend, colorLegend),
     verticalCrosshairRect,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -3721,7 +3996,7 @@ const pivotColumnParallel = [
     pivotIndicators_pivotIndicators([
         initColumnParallel,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
@@ -3730,7 +4005,7 @@ const pivotColumnParallel = [
         label_label,
         tooltip_tooltip,
         verticalCrosshairRect,
-        barStyle_barStyle,
+        colorBarStyleFill(barStyle_barStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3738,7 +4013,7 @@ const pivotColumnParallel = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const columnParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(columnParallel, pivotColumnParallel)
@@ -3775,7 +4050,7 @@ const columnPercent = [
     initColumn,
     stackCornerRadius_stackCornerRadius,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     percent,
     datasetXY,
@@ -3784,9 +4059,9 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     verticalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -3801,7 +4076,7 @@ const pivotColumnPercent = [
         initColumn,
         stackCornerRadius_stackCornerRadius,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         percent,
         background_backgroundColor,
         datasetXY,
@@ -3811,7 +4086,7 @@ const pivotColumnPercent = [
         label_label,
         tooltip_tooltip,
         verticalCrosshairRect,
-        barStyle_barStyle,
+        colorBarStyleFill(barStyle_barStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3819,7 +4094,7 @@ const pivotColumnPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const columnPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(columnPercent, pivotColumnPercent)
@@ -3834,17 +4109,23 @@ const encodingForBar = (advancedVSeed, context)=>{
     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 ? unique([
+            ...color,
             ...detail
-        ];
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
                 ...encoding,
+                y,
+                color,
                 detail: mergedDetail
             }
         };
@@ -3852,7 +4133,7 @@ const encodingForBar = (advancedVSeed, context)=>{
     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: [],
@@ -4182,7 +4463,7 @@ const horizontalCrosshairRect = (spec, context)=>{
 const bar = [
     initBar,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetYX,
     progressive,
@@ -4190,9 +4471,9 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     horizontalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -4206,7 +4487,7 @@ const pivotBar = [
     pivotIndicators_pivotIndicators([
         initBar,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetYX,
         progressive,
@@ -4215,8 +4496,8 @@ const pivotBar = [
         label_label,
         label_label,
         tooltip_tooltip,
+        colorBarStyleFill(barStyle_barStyle),
         horizontalCrosshairRect,
-        barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -4224,7 +4505,7 @@ const pivotBar = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const barSpecPipeline = [
     pivotAdapter_pivotAdapter(bar, pivotBar)
@@ -4280,7 +4561,7 @@ const initBarParallel = (spec, context)=>{
 const barParallel = [
     initBarParallel,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetYX,
     progressive,
@@ -4288,9 +4569,9 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     horizontalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -4304,15 +4585,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,
@@ -4320,7 +4601,7 @@ const pivotBarParallel = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const barParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(barParallel, pivotBarParallel)
@@ -4349,7 +4630,7 @@ const barPercentAdvancedPipeline = [
 const barPercent = [
     initBar,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     percent,
     datasetYX,
@@ -4358,9 +4639,9 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     horizontalCrosshairRect,
-    discreteLegend,
-    barStyle_barStyle,
+    colorBarStyleFill(barStyle_barStyle),
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -4374,7 +4655,7 @@ const pivotBarPercent = [
     pivotIndicators_pivotIndicators([
         initBar,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         percent,
         datasetYX,
@@ -4382,8 +4663,8 @@ const pivotBarPercent = [
         xLinear,
         label_label,
         tooltip_tooltip,
+        colorBarStyleFill(barStyle_barStyle),
         horizontalCrosshairRect,
-        barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -4391,7 +4672,7 @@ const pivotBarPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const barPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(barPercent, pivotBarPercent)
@@ -4428,7 +4709,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 = [
         {
@@ -4438,20 +4719,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
     ];
@@ -4479,6 +4772,7 @@ const areaStyle_areaStyle = (spec, context)=>{
     return {
         ...result,
         area: {
+            ...result.area,
             visible: true,
             state: {
                 ...customMap
@@ -4489,7 +4783,7 @@ const areaStyle_areaStyle = (spec, context)=>{
 const area_area = [
     initArea,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -4497,12 +4791,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,
@@ -4515,7 +4809,7 @@ const pivotArea = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initArea,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         stackInverse,
         datasetXY,
@@ -4525,10 +4819,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,
@@ -4536,7 +4830,7 @@ const pivotArea = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const areaSpecPipeline = [
     pivotAdapter_pivotAdapter(area_area, pivotArea)
@@ -4565,7 +4859,7 @@ const areaPercentAdvancedPipeline = [
 const areaPercent = [
     initArea,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     percent,
     datasetXY,
@@ -4574,11 +4868,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,
@@ -4592,7 +4887,7 @@ const pivotAreaPercent = [
     pivotIndicators_pivotIndicators([
         initArea,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         percent,
         datasetXY,
@@ -4602,9 +4897,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,
@@ -4612,7 +4908,7 @@ const pivotAreaPercent = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const areaPercentSpecPipeline = [
     pivotAdapter_pivotAdapter(areaPercent, pivotAreaPercent)
@@ -4717,15 +5013,18 @@ const encodingForScatter = (advancedVSeed, context)=>{
     const encoding = vseed.encoding;
     if (encoding) {
         const detail = encoding.detail || [];
-        const color = encoding.color || [];
-        const mergedDetail = unique([
+        const color = encoding.color || [
+            (dimensions[1] || dimensions[0]).id
+        ];
+        const mergedDetail = 0 === detail.length ? unique([
             ...color,
             ...detail
-        ]);
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
                 ...encoding,
+                color,
                 detail: mergedDetail
             }
         };
@@ -4964,7 +5263,7 @@ const horizontalCrosshairLine = (spec, context)=>{
 };
 const scatter = [
     initScatter,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetScatter,
     progressive,
@@ -4972,10 +5271,10 @@ const scatter = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    colorAdapter(discreteLegend, colorLegend),
     verticalCrosshairLine,
     horizontalCrosshairLine,
-    discreteLegend,
-    pointStyle_pointStyle,
+    colorPointStyleFill(pointStyle_pointStyle),
     pointStateHover,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
@@ -4989,7 +5288,7 @@ const pivotScatter = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initScatter,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetScatter,
         progressive,
@@ -4999,7 +5298,7 @@ const pivotScatter = [
         tooltip_tooltip,
         verticalCrosshairLine,
         horizontalCrosshairLine,
-        pointStyle_pointStyle,
+        colorPointStyleFill(pointStyle_pointStyle),
         pointStateHover,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -5112,17 +5411,23 @@ const encodingForDualAxis = (advancedVSeed, context)=>{
     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 ? unique([
+            ...color,
             ...detail
-        ];
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
                 ...encoding,
+                x,
+                color,
                 detail: mergedDetail
             }
         };
@@ -6102,7 +6407,6 @@ const encodingForPie = (advancedVSeed, context)=>{
         }
     };
     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),
@@ -6141,8 +6445,7 @@ const initPie = (spec, context)=>{
     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 = [
         {
@@ -6233,8 +6536,7 @@ const initDonut = (spec, context)=>{
     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 = [
         {
@@ -6304,17 +6606,23 @@ const encodingForRose = (advancedVSeed, context)=>{
     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 ? unique([
+            ...color,
             ...detail
-        ];
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
                 ...encoding,
+                angle,
+                color,
                 detail: mergedDetail
             }
         };
@@ -6322,7 +6630,7 @@ const encodingForRose = (advancedVSeed, context)=>{
     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: [],
@@ -6357,7 +6665,7 @@ const initRose = (spec, context)=>{
     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;
@@ -6527,7 +6835,7 @@ const initRoseParallel = (spec, context)=>{
     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,
@@ -6617,17 +6925,23 @@ const encodingForRadar = (advancedVSeed, context)=>{
     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 ? unique([
+            ...color,
             ...detail
-        ];
+        ]) : detail;
         return {
             ...advancedVSeed,
             encoding: {
                 ...encoding,
+                angle,
+                color,
                 detail: mergedDetail
             }
         };
@@ -6672,7 +6986,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 = [
         {
@@ -6737,7 +7051,7 @@ const radarRadiusAxis = (spec, context)=>{
 };
 const radar = [
     initRadar,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
@@ -6745,12 +7059,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,
@@ -6759,7 +7073,7 @@ const pivotRadar = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initRadar,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
@@ -6768,14 +7082,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)
@@ -6831,8 +7145,7 @@ const initFunnel = (spec, context)=>{
     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';
@@ -6867,6 +7180,7 @@ const funnel = [
     initFunnel,
     background_backgroundColor,
     datasetXY,
+    color_color,
     label_label,
     tooltip_tooltip,
     discreteLegend,
@@ -6884,6 +7198,7 @@ const pivotFunnel = [
         initFunnel,
         background_backgroundColor,
         datasetXY,
+        color_color,
         label_label,
         tooltip_tooltip,
         discreteLegend,
@@ -6907,12 +7222,22 @@ const encodingForHeatmap = (advancedVSeed, context)=>{
     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),
@@ -6999,6 +7324,7 @@ const heatmap = [
     initHeatmap,
     background_backgroundColor,
     datasetXY,
+    color_color,
     label_label,
     labelColorInversion,
     discreteLegend,
@@ -7020,6 +7346,7 @@ const pivotHeatmap = [
         initHeatmap,
         background_backgroundColor,
         datasetXY,
+        color_color,
         label_label,
         labelColorInversion,
         discreteLegend,
@@ -7150,6 +7477,10 @@ const lightTheme = ()=>{
     const baseConfig = {
         backgroundColor: 'transparent',
         color: {
+            linearColorScheme: [
+                '#C2CEFF',
+                '#5766EC'
+            ],
             colorScheme: [
                 '#8D72F6',
                 '#5766EC',
@@ -7214,8 +7545,8 @@ const lightTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnParallel: {
@@ -7226,8 +7557,8 @@ const lightTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnPercent: {
@@ -7238,8 +7569,8 @@ const lightTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             bar: {
@@ -7248,10 +7579,10 @@ const lightTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             barParallel: {
@@ -7260,10 +7591,10 @@ const lightTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             barPercent: {
@@ -7272,10 +7603,10 @@ const lightTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             area: {
@@ -7340,38 +7671,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
             }
         }
     };
@@ -7483,6 +7786,10 @@ const darkTheme = ()=>{
     const baseConfig = {
         backgroundColor: 'transparent',
         color: {
+            linearColorScheme: [
+                '#A0CEFF',
+                '#2E62F1'
+            ],
             colorScheme: [
                 '#2E62F1',
                 '#4DC36A',
@@ -7546,8 +7853,8 @@ const darkTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnParallel: {
@@ -7558,8 +7865,8 @@ const darkTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             columnPercent: {
@@ -7570,8 +7877,8 @@ const darkTheme = ()=>{
                 stackCornerRadius: [
                     4,
                     4,
-                    4,
-                    4
+                    0,
+                    0
                 ]
             },
             bar: {
@@ -7592,10 +7899,10 @@ const darkTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect: crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             barPercent: {
@@ -7604,10 +7911,10 @@ const darkTheme = ()=>{
                 yAxis: barBandAxis,
                 crosshairRect: crosshairRect,
                 stackCornerRadius: [
+                    0,
                     4,
                     4,
-                    4,
-                    4
+                    0
                 ]
             },
             area: {
@@ -7672,21 +7979,7 @@ const darkTheme = ()=>{
                 ...baseConfig
             },
             funnel: {
-                ...baseConfig,
-                color: {
-                    colorScheme: [
-                        '#2E62F1',
-                        '#3A6EF6',
-                        '#4780FA',
-                        '#548CFE',
-                        '#6198FF',
-                        '#6FA3FF',
-                        '#7CACFF',
-                        '#88B7FF',
-                        '#94C2FF',
-                        '#A0CEFF'
-                    ]
-                }
+                ...baseConfig
             },
             heatmap: {
                 ...baseConfig
@@ -7737,9 +8030,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',
@@ -7857,6 +8147,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()
@@ -8001,10 +8293,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()
@@ -8985,7 +9278,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(),
@@ -8998,7 +9291,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(),
@@ -9043,6 +9336,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, 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 };
 
 //# sourceMappingURL=index.js.map