@visactor/vseed 0.1.4 → 0.1.5

package/dist/index.js

@@ -1056,8 +1056,7 @@ const getBasicDimensions = (vseed)=>{
     const { dimensions, dataset } = vseed;
     const MeaName = {
         id: MeasureName,
-        alias: intl.i18n`指标名称`,
-        encoding: 'detail'
+        alias: intl.i18n`指标名称`
     };
     if (!dataset) throw new Error('dataset is required');
     if (0 === dataset.length) return [];
@@ -1142,12 +1141,11 @@ const generateDefaultMeasureEncoding = (measures, encoding)=>{
     encoding.y = unique(measures.filter((item)=>'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
 };
 const generateDefaultDimensionEncoding = (dimensions, encoding)=>{
-    const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
     const uniqueDimIds = unique(dimensions.map((d)=>d.id));
     encoding.x = uniqueDimIds.slice(0, 1);
-    encoding.color = uniqueDimIds.slice(onlyMeasureName ? 0 : 1);
-    encoding.detail = uniqueDimIds.slice(onlyMeasureName ? 0 : 1);
+    encoding.color = uniqueDimIds.slice(1);
     encoding.tooltip = uniqueDimIds;
+    encoding.detail = [];
     encoding.label = [];
     encoding.row = [];
     encoding.column = [];
@@ -1159,14 +1157,13 @@ const generateMeasureEncoding = (measures, encoding)=>{
     if (color.length > 0) encoding.color = color;
 };
 const generateDimensionEncoding = (dimensions, encoding)=>{
-    encoding.x = unique(dimensions.filter((item)=>'xAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+    encoding.x = unique(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
     encoding.color = unique(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-    encoding.detail = unique(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
+    encoding.detail = [];
     if (0 === encoding.x.length) encoding.x = [
         dimensions[0].id
     ];
     if (0 === encoding.color.length) encoding.color = dimensions.filter((item)=>!encoding.x?.includes(item.id)).map((item)=>item.id);
-    if (0 === encoding.detail.length) encoding.detail = dimensions.filter((item)=>!encoding.x?.includes(item.id)).map((item)=>item.id);
 };
 const measureDepth = (measures = [])=>{
     if (!measures) return 0;
@@ -2058,117 +2055,6 @@ const yLinear = (spec, context)=>{
     ];
     return result;
 };
-const label_label = (spec, context)=>{
-    const result = {
-        ...spec
-    };
-    const { advancedVSeed } = context;
-    const { measures, datasetReshapeInfo, locale } = advancedVSeed;
-    const { chartType } = advancedVSeed;
-    const baseConfig = advancedVSeed.config[chartType];
-    if (!baseConfig || !baseConfig.label) return result;
-    const { measureId, measureValue } = datasetReshapeInfo[0].foldInfo;
-    const { label } = baseConfig;
-    const { enable } = label;
-    result.label = {
-        visible: enable,
-        formatMethod: (value, datum)=>{
-            const result = [];
-            const formatValue = (value)=>{
-                const id = datum[measureId];
-                const measure = findMeasureById(measures, id);
-                if (!measure) return value;
-                const { format = {}, autoFormat = true } = measure;
-                if (!external_remeda_isEmpty(format)) {
-                    const formatter = createFormatter(format);
-                    return formatter(value);
-                }
-                if (autoFormat) return autoFormatter(value, locale);
-                return String(value);
-            };
-            result.push(formatValue(datum[measureValue]));
-            return result.join(' ');
-        }
-    };
-    return result;
-};
-const tooltip_tooltip = (spec, context)=>{
-    const result = {
-        ...spec
-    };
-    const { advancedVSeed } = context;
-    const { measures, datasetReshapeInfo, chartType, locale, dimensions } = advancedVSeed;
-    const baseConfig = advancedVSeed.config[chartType];
-    const { tooltip = {
-        enable: true
-    } } = baseConfig;
-    const { enable } = tooltip;
-    const { measureId, measureValue, measureName } = datasetReshapeInfo[0].foldInfo;
-    const { encodingColor: colorName } = datasetReshapeInfo[0].unfoldInfo;
-    result.tooltip = {
-        visible: enable,
-        mark: {
-            title: {
-                visible: true
-            },
-            content: [
-                ...dimensions.map((item)=>({
-                        visible: true,
-                        hasShape: true,
-                        shapeType: 'rectRound',
-                        key: (datum)=>{
-                            if (item.alias || item.id) return item.alias || item.id;
-                            return datum && datum[item.id];
-                        },
-                        value: (datum)=>datum && datum[item.id]
-                    })),
-                {
-                    visible: true,
-                    hasShape: true,
-                    key: (datum)=>datum && datum[measureName || colorName] || '',
-                    value: (datum)=>{
-                        if (!datum) return '';
-                        const value = datum[measureValue];
-                        const id = datum[measureId];
-                        const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!external_remeda_isEmpty(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
-                    }
-                }
-            ]
-        },
-        dimension: {
-            content: [
-                {
-                    visible: true,
-                    key: (datum)=>datum && datum[colorName] || '',
-                    value: (datum)=>{
-                        if (!datum) return '';
-                        const value = datum[measureValue];
-                        const id = datum[measureId];
-                        const measure = findMeasureById(measures, id);
-                        if (!measure) return String(value);
-                        const { format = {}, autoFormat = true } = measure;
-                        if (!external_remeda_isEmpty(format)) {
-                            const formatter = createFormatter(format);
-                            return formatter(value);
-                        }
-                        if (autoFormat) return autoFormatter(value, locale);
-                        return String(value);
-                    },
-                    shapeType: 'rectRound'
-                }
-            ]
-        }
-    };
-    return result;
-};
 const verticalCrosshairLine = (spec, context)=>{
     const result = {
         ...spec
@@ -2677,6 +2563,117 @@ const lineStyle_lineStyle = (spec, context)=>{
         }
     };
 };
+const label_label = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { measures, datasetReshapeInfo, locale } = advancedVSeed;
+    const { chartType } = advancedVSeed;
+    const baseConfig = advancedVSeed.config[chartType];
+    if (!baseConfig || !baseConfig.label) return result;
+    const { measureId, measureValue } = datasetReshapeInfo[0].foldInfo;
+    const { label } = baseConfig;
+    const { enable } = label;
+    result.label = {
+        visible: enable,
+        formatMethod: (value, datum)=>{
+            const result = [];
+            const formatValue = (value)=>{
+                const id = datum[measureId];
+                const measure = findMeasureById(measures, id);
+                if (!measure) return value;
+                const { format = {}, autoFormat = true } = measure;
+                if (!external_remeda_isEmpty(format)) {
+                    const formatter = createFormatter(format);
+                    return formatter(value);
+                }
+                if (autoFormat) return autoFormatter(value, locale);
+                return String(value);
+            };
+            result.push(formatValue(datum[measureValue]));
+            return result.join(' ');
+        }
+    };
+    return result;
+};
+const tooltip_tooltip = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { measures, datasetReshapeInfo, chartType, locale, dimensions } = advancedVSeed;
+    const baseConfig = advancedVSeed.config[chartType];
+    const { tooltip = {
+        enable: true
+    } } = baseConfig;
+    const { enable } = tooltip;
+    const { measureId, measureValue, measureName } = datasetReshapeInfo[0].foldInfo;
+    const { encodingColor: colorName } = datasetReshapeInfo[0].unfoldInfo;
+    result.tooltip = {
+        visible: enable,
+        mark: {
+            title: {
+                visible: true
+            },
+            content: [
+                ...dimensions.map((item)=>({
+                        visible: true,
+                        hasShape: true,
+                        shapeType: 'rectRound',
+                        key: (datum)=>{
+                            if (item.alias || item.id) return item.alias || item.id;
+                            return datum && datum[item.id];
+                        },
+                        value: (datum)=>datum && datum[item.id]
+                    })),
+                {
+                    visible: true,
+                    hasShape: true,
+                    key: (datum)=>datum && datum[measureName || colorName] || '',
+                    value: (datum)=>{
+                        if (!datum) return '';
+                        const value = datum[measureValue];
+                        const id = datum[measureId];
+                        const measure = findMeasureById(measures, id);
+                        if (!measure) return String(value);
+                        const { format = {}, autoFormat = true } = measure;
+                        if (!external_remeda_isEmpty(format)) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return String(value);
+                    }
+                }
+            ]
+        },
+        dimension: {
+            content: [
+                {
+                    visible: true,
+                    key: (datum)=>datum && datum[colorName] || '',
+                    value: (datum)=>{
+                        if (!datum) return '';
+                        const value = datum[measureValue];
+                        const id = datum[measureId];
+                        const measure = findMeasureById(measures, id);
+                        if (!measure) return String(value);
+                        const { format = {}, autoFormat = true } = measure;
+                        if (!external_remeda_isEmpty(format)) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        if (autoFormat) return autoFormatter(value, locale);
+                        return String(value);
+                    },
+                    shapeType: 'rectRound'
+                }
+            ]
+        }
+    };
+    return result;
+};
 const isSubset = (sub, obj)=>Object.entries(sub).every(([key, value])=>{
         if ('string' == typeof value) return obj[key] === value;
         if ('number' == typeof value) return obj[key] === value;
@@ -3435,31 +3432,118 @@ const pivotDiscreteLegend = (spec, context)=>{
         legends
     };
 };
-const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
-        const { vseed } = context;
-        const usePivotChart = isPivotChart(vseed);
-        if (usePivotChart) return execPipeline(pivotPipeline, context, spec);
-        return execPipeline(pipeline, context, spec);
+const pivotColorLegend = (spec, context)=>{
+    const result = {
+        ...spec
     };
-const line_line = [
-    initLine,
-    colorAdapter(color_color, linearColor),
-    background_backgroundColor,
-    datasetXY,
-    progressive,
-    xBand,
-    yLinear,
-    label_label,
-    tooltip_tooltip,
-    verticalCrosshairLine,
-    colorAdapter(discreteLegend, colorLegend),
-    colorPointStyleFill(pointStyle_pointStyle),
-    pointStateDimensionHover,
-    colorLineStyleFill(lineStyle_lineStyle),
-    annotationPoint_annotationPoint,
-    annotationVerticalLine_annotationVerticalLine,
-    annotationHorizontalLine_annotationHorizontalLine,
-    annotationArea_annotationArea
+    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 pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
+        const { vseed } = context;
+        const usePivotChart = isPivotChart(vseed);
+        if (usePivotChart) return execPipeline(pivotPipeline, context, spec);
+        return execPipeline(pipeline, context, spec);
+    };
+const line_line = [
+    initLine,
+    colorAdapter(color_color, linearColor),
+    background_backgroundColor,
+    datasetXY,
+    progressive,
+    xBand,
+    yLinear,
+    verticalCrosshairLine,
+    colorAdapter(discreteLegend, colorLegend),
+    colorPointStyleFill(pointStyle_pointStyle),
+    pointStateDimensionHover,
+    colorLineStyleFill(lineStyle_lineStyle),
+    label_label,
+    tooltip_tooltip,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotLine = [
     initPivot,
@@ -3468,18 +3552,18 @@ const pivotLine = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initLine,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
         xBand,
         yLinear,
-        label_label,
-        tooltip_tooltip,
         verticalCrosshairLine,
-        pointStyle_pointStyle,
+        colorPointStyleFill(pointStyle_pointStyle),
         pointStateDimensionHover,
-        lineStyle_lineStyle,
+        colorLineStyleFill(lineStyle_lineStyle),
+        label_label,
+        tooltip_tooltip,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -3487,7 +3571,7 @@ const pivotLine = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const lineSpecPipeline = [
     pivotAdapter_pivotAdapter(line_line, pivotLine)
@@ -3536,7 +3620,7 @@ const column_generateMeasureEncoding = (measures, encoding)=>{
     return encoding;
 };
 const column_generateDimensionEncoding = (dimensions, encoding)=>{
-    encoding.x = unique(dimensions.filter((item)=>'xAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+    encoding.x = unique(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
     encoding.color = unique(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
     encoding.detail = unique(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
     if (0 === encoding.x.length) encoding.x = [
@@ -3852,93 +3936,6 @@ 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,
@@ -4212,7 +4209,7 @@ const bar_generateMeasureEncoding = (measures, encoding)=>{
     return encoding;
 };
 const bar_generateDimensionEncoding = (dimensions, encoding)=>{
-    encoding.y = unique(dimensions.filter((item)=>'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+    encoding.y = unique(dimensions.filter((item)=>'yAxis' === item.encoding).map((item)=>item.id));
     encoding.color = unique(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
     encoding.detail = unique(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
     if (0 === encoding.y.length) encoding.y = [
@@ -4759,7 +4756,7 @@ const registerBarPercent = ()=>{
 };
 const areaAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    encodingForColumn,
+    encodingForLine,
     buildMeasures,
     autoDimensions_autoDimensions,
     pivotAdapter([
@@ -4917,7 +4914,7 @@ const registerArea = ()=>{
 };
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
-    encodingForColumn,
+    encodingForLine,
     buildMeasures,
     autoDimensions_autoDimensions,
     pivotAdapter([
@@ -5404,7 +5401,7 @@ const pivotScatter = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const scatterSpecPipeline = [
     pivotAdapter_pivotAdapter(scatter, pivotScatter)
@@ -5453,7 +5450,7 @@ const dualAxis_generateMeasureEncoding = (measures, encoding)=>{
     return encoding;
 };
 const dualAxis_generateDimensionEncoding = (dimensions, encoding)=>{
-    encoding.x = unique(dimensions.filter((item)=>'xAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+    encoding.x = unique(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
     encoding.color = unique(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
     encoding.detail = unique(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
     if (0 === encoding.x.length) encoding.x = [
@@ -6607,9 +6604,8 @@ const initPie = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
-    const { datasetReshapeInfo, dataset } = advancedVSeed;
+    const { datasetReshapeInfo } = advancedVSeed;
     const { unfoldInfo, foldInfo } = datasetReshapeInfo[0];
-    const showStroke = dataset.length <= 30;
     result.type = 'pie';
     result.outerRadius = 0.8;
     result.innerRadius = 0;
@@ -6621,30 +6617,57 @@ const initPie = (spec, context)=>{
             clip: true
         }
     ];
-    result.pie = {
-        style: {
-            stroke: '#ffffff',
-            lineWidth: showStroke ? 1 : 0,
-            centerOffset: 0
-        },
-        state: {
-            hover: {
-                outerRadius: 1.1 * result.outerRadius
+    result.animation = true;
+    return result;
+};
+const colorPieStyleFill = (stylePipe)=>(spec, context)=>{
+        const result = stylePipe(spec, context);
+        const { advancedVSeed } = context;
+        const { datasetReshapeInfo } = advancedVSeed;
+        const { unfoldInfo } = datasetReshapeInfo[0];
+        if (isLinearColor(advancedVSeed)) {
+            if (result?.pie?.style) result.pie.style.fill = {
+                field: unfoldInfo.encodingColor,
+                scale: 'color'
+            };
+        }
+        return result;
+    };
+const pieStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { dataset } = advancedVSeed;
+    const showStroke = dataset.length <= 30;
+    const result = {
+        ...spec,
+        pie: {
+            style: {}
+        }
+    };
+    return {
+        ...result,
+        pie: {
+            style: {
+                stroke: '#ffffff',
+                lineWidth: showStroke ? 1 : 0
+            },
+            state: {
+                hover: {
+                    outerRadius: 1.1 * result.outerRadius
+                }
             }
         }
     };
-    result.animation = true;
-    return result;
 };
 const pie = [
     initPie,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
+    colorPieStyleFill(pieStyle),
+    colorAdapter(discreteLegend, colorLegend),
     label_label,
     tooltip_tooltip,
-    discreteLegend,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -6657,10 +6680,11 @@ const pivotPie = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initPie,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
+        colorPieStyleFill(pieStyle),
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -6670,7 +6694,7 @@ const pivotPie = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const pieSpecPipeline = [
     pivotAdapter_pivotAdapter(pie, pivotPie)
@@ -6698,9 +6722,8 @@ const initDonut = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
-    const { datasetReshapeInfo, dataset } = advancedVSeed;
+    const { datasetReshapeInfo } = advancedVSeed;
     const { foldInfo, unfoldInfo } = datasetReshapeInfo[0];
-    const showStroke = dataset.length <= 30;
     result.type = 'pie';
     result.outerRadius = 0.8;
     result.innerRadius = 0.8 * result.outerRadius;
@@ -6712,29 +6735,19 @@ const initDonut = (spec, context)=>{
             clip: true
         }
     ];
-    result.pie = {
-        style: {
-            stroke: '#ffffff',
-            lineWidth: showStroke ? 1 : 0
-        },
-        state: {
-            hover: {
-                outerRadius: 1.1 * result.outerRadius
-            }
-        }
-    };
     result.animation = true;
     return result;
 };
 const donut = [
     initDonut,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
     label_label,
+    colorPieStyleFill(pieStyle),
+    colorAdapter(discreteLegend, colorLegend),
     tooltip_tooltip,
-    discreteLegend,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -6747,11 +6760,12 @@ const pivotDonut = [
     datasetPivot,
     pivotIndicators_pivotIndicators([
         initDonut,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
         label_label,
+        colorPieStyleFill(pieStyle),
         tooltip_tooltip,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -6760,7 +6774,7 @@ const pivotDonut = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const donutSpecPipeline = [
     pivotAdapter_pivotAdapter(donut, pivotDonut)
@@ -6808,7 +6822,7 @@ const rose_generateMeasureEncoding = (measures, encoding)=>{
     if (color.length > 0) encoding.color = color;
 };
 const rose_generateDimensionEncoding = (dimensions, encoding)=>{
-    encoding.angle = unique(dimensions.filter((item)=>'angle' === item.encoding || !item.encoding).map((item)=>item.id));
+    encoding.angle = unique(dimensions.filter((item)=>'angle' === item.encoding).map((item)=>item.id));
     encoding.color = unique(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
     encoding.detail = unique(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
     if (0 === encoding.angle.length) encoding.angle = [
@@ -6848,18 +6862,6 @@ const initRose = (spec, context)=>{
     result.innerRadius = 0;
     const hasNegativeValue = dataset.flat().find((d)=>d[foldInfo.measureValue] < 0);
     if (hasNegativeValue) result.innerRadius = 0.05;
-    result.rose = {
-        style: {
-            stroke: '#ffffff',
-            lineWidth: 1
-        },
-        state: {
-            hover: {
-                lineWidth: 1,
-                fillOpacity: 0.6
-            }
-        }
-    };
     result.region = [
         {
             clip: true
@@ -6868,7 +6870,7 @@ const initRose = (spec, context)=>{
     result.animation = true;
     return result;
 };
-const radiusAxis = (spec, context)=>{
+const angleAxis = (spec, context)=>{
     const result = {
         ...spec
     };
@@ -6880,26 +6882,37 @@ const radiusAxis = (spec, context)=>{
     const showAxis = !(is0D || is1M1D);
     if (!result.axes) result.axes = [];
     result.axes.push({
-        orient: 'radius',
+        orient: 'angle',
         visible: showAxis,
         zero: true,
         nice: !!showAxis,
+        paddingInner: showAxis ? [
+            0.15,
+            0.1
+        ] : [
+            0,
+            0
+        ],
+        paddingOuter: showAxis ? [
+            0.075,
+            0.1
+        ] : [
+            0,
+            0
+        ],
         grid: {
             visible: showAxis
         },
-        tick: {
-            visible: showAxis
-        },
-        label: {
+        domainLine: {
             visible: showAxis
         },
-        domainLine: {
+        tick: {
             visible: showAxis
         }
     });
     return result;
 };
-const angleAxis = (spec, context)=>{
+const radiusAxis = (spec, context)=>{
     const result = {
         ...spec
     };
@@ -6911,50 +6924,79 @@ const angleAxis = (spec, context)=>{
     const showAxis = !(is0D || is1M1D);
     if (!result.axes) result.axes = [];
     result.axes.push({
-        orient: 'angle',
+        orient: 'radius',
         visible: showAxis,
         zero: true,
         nice: !!showAxis,
-        paddingInner: showAxis ? [
-            0.15,
-            0.1
-        ] : [
-            0,
-            0
-        ],
-        paddingOuter: showAxis ? [
-            0.075,
-            0.1
-        ] : [
-            0,
-            0
-        ],
         grid: {
             visible: showAxis
         },
-        domainLine: {
+        tick: {
             visible: showAxis
         },
-        tick: {
+        label: {
+            visible: showAxis
+        },
+        domainLine: {
             visible: showAxis
         }
     });
     return result;
 };
+const colorRoseStyleFill = (stylePipe)=>(spec, context)=>{
+        const result = stylePipe(spec, context);
+        const { advancedVSeed } = context;
+        const { datasetReshapeInfo } = advancedVSeed;
+        const { unfoldInfo } = datasetReshapeInfo[0];
+        if (isLinearColor(advancedVSeed)) {
+            if (result?.rose?.style) result.rose.style.fill = {
+                field: unfoldInfo.encodingColor,
+                scale: 'color'
+            };
+        }
+        return result;
+    };
+const roseStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { dataset } = advancedVSeed;
+    const showStroke = dataset.length <= 30;
+    const result = {
+        ...spec,
+        rose: {
+            style: {}
+        }
+    };
+    return {
+        ...result,
+        rose: {
+            style: {
+                stroke: '#ffffff',
+                lineWidth: showStroke ? 1 : 0
+            },
+            state: {
+                hover: {
+                    lineWidth: 1,
+                    fillOpacity: 0.6
+                }
+            }
+        }
+    };
+};
 const rose = [
     initRose,
     stackCornerRadius_stackCornerRadius,
     stackInverse,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
-    radiusAxis,
     angleAxis,
-    label_label,
-    tooltip_tooltip,
+    radiusAxis,
     verticalCrosshairRect,
-    discreteLegend
+    colorRoseStyleFill(roseStyle),
+    colorAdapter(discreteLegend, colorLegend),
+    label_label,
+    tooltip_tooltip
 ];
 const pivotRose = [
     initPivot,
@@ -6965,19 +7007,20 @@ const pivotRose = [
         initRose,
         stackCornerRadius_stackCornerRadius,
         stackInverse,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
         radiusAxis,
         angleAxis,
+        verticalCrosshairRect,
+        colorRoseStyleFill(roseStyle),
         label_label,
-        tooltip_tooltip,
-        verticalCrosshairRect
+        tooltip_tooltip
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const roseSpecPipeline = [
     pivotAdapter_pivotAdapter(rose, pivotRose)
@@ -7046,15 +7089,16 @@ const initRoseParallel = (spec, context)=>{
 const roseParallel = [
     initRoseParallel,
     stackCornerRadius_stackCornerRadius,
-    color_color,
+    colorAdapter(color_color, linearColor),
     background_backgroundColor,
     datasetXY,
     progressive,
     radiusAxis,
     angleAxis,
+    colorRoseStyleFill(roseStyle),
+    colorAdapter(discreteLegend, colorLegend),
     label_label,
     tooltip_tooltip,
-    discreteLegend,
     verticalCrosshairRect,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
@@ -7069,15 +7113,16 @@ const pivotRoseParallel = [
     pivotIndicators_pivotIndicators([
         initRoseParallel,
         stackCornerRadius_stackCornerRadius,
-        color_color,
+        colorAdapter(color_color, linearColor),
         background_backgroundColor,
         datasetXY,
         progressive,
         radiusAxis,
         angleAxis,
+        verticalCrosshairRect,
+        colorRoseStyleFill(roseStyle),
         label_label,
         tooltip_tooltip,
-        verticalCrosshairRect,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -7085,7 +7130,7 @@ const pivotRoseParallel = [
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
-    pivotDiscreteLegend
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const roseParallelSpecPipeline = [
     pivotAdapter_pivotAdapter(roseParallel, pivotRoseParallel)
@@ -7116,12 +7161,11 @@ const radar_generateDefaultMeasureEncoding = (measures, encoding)=>{
     encoding.radius = unique(measures.filter((item)=>'radius' === item.encoding || !item.encoding).map((item)=>item.id));
 };
 const radar_generateDefaultDimensionEncoding = (dimensions, encoding)=>{
-    const onlyMeasureName = 1 === dimensions.length && dimensions.find((item)=>item.id === MeasureName);
     const uniqueDimIds = unique(dimensions.map((d)=>d.id));
     encoding.angle = uniqueDimIds.slice(0, 1);
-    encoding.color = uniqueDimIds.slice(onlyMeasureName ? 0 : 1);
-    encoding.detail = uniqueDimIds.slice(onlyMeasureName ? 0 : 1);
+    encoding.color = uniqueDimIds.slice(1);
     encoding.tooltip = uniqueDimIds;
+    encoding.detail = [];
     encoding.label = [];
     encoding.row = [];
     encoding.column = [];
@@ -7133,14 +7177,13 @@ const radar_generateMeasureEncoding = (measures, encoding)=>{
     if (color.length > 0) encoding.color = color;
 };
 const radar_generateDimensionEncoding = (dimensions, encoding)=>{
-    encoding.angle = unique(dimensions.filter((item)=>'angle' === item.encoding || !item.encoding).map((item)=>item.id));
+    encoding.angle = unique(dimensions.filter((item)=>'angle' === item.encoding).map((item)=>item.id));
     encoding.color = unique(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-    encoding.detail = unique(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
+    encoding.detail = [];
     if (0 === encoding.angle.length) encoding.angle = [
         dimensions[0].id
     ];
     if (0 === encoding.color.length) encoding.color = dimensions.filter((item)=>!encoding.angle?.includes(item.id)).map((item)=>item.id);
-    if (0 === encoding.detail.length) encoding.detail = dimensions.filter((item)=>!encoding.angle?.includes(item.id)).map((item)=>item.id);
 };
 const radarAdvancedPipeline = [
     initAdvancedVSeed_initAdvancedVSeed,
@@ -7356,34 +7399,55 @@ const initFunnel = (spec, context)=>{
             clip: true
         }
     ];
-    result.funnel = {
-        style: {
-            cornerRadius: 4,
-            fill: {
-                field: unfoldInfo.encodingColorId,
-                scale: 'color'
-            }
-        },
-        state: {
-            hover: {
-                fillOpacity: 0.6
-            }
-        }
-    };
     result.transformLabel = {
         visible: true
     };
     result.animation = true;
     return result;
 };
+const colorFunnelStyleFill = (stylePipe)=>(spec, context)=>{
+        const result = stylePipe(spec, context);
+        const { advancedVSeed } = context;
+        const { datasetReshapeInfo } = advancedVSeed;
+        const { unfoldInfo } = datasetReshapeInfo[0];
+        if (isLinearColor(advancedVSeed)) {
+            if (result?.funnel?.style) result.funnel.style.fill = {
+                field: unfoldInfo.encodingColor,
+                scale: 'color'
+            };
+        }
+        return result;
+    };
+const funnelStyle = (spec)=>{
+    const result = {
+        ...spec,
+        funnel: {
+            style: {}
+        }
+    };
+    return {
+        ...result,
+        funnel: {
+            style: {
+                cornerRadius: 4
+            },
+            state: {
+                hover: {
+                    fillOpacity: 0.6
+                }
+            }
+        }
+    };
+};
 const funnel = [
     initFunnel,
     background_backgroundColor,
     datasetXY,
-    color_color,
+    colorAdapter(color_color, linearColor),
     label_label,
+    colorAdapter(discreteLegend, colorLegend),
+    colorFunnelStyleFill(funnelStyle),
     tooltip_tooltip,
-    discreteLegend,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -7398,17 +7462,18 @@ const pivotFunnel = [
         initFunnel,
         background_backgroundColor,
         datasetXY,
-        color_color,
+        colorAdapter(color_color, linearColor),
         label_label,
         tooltip_tooltip,
-        discreteLegend,
+        colorFunnelStyleFill(funnelStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
         annotationArea_annotationArea
     ]),
     pivotRowDimensions,
-    pivotColumnDimensions
+    pivotColumnDimensions,
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const funnelSpecPipeline = [
     pivotAdapter_pivotAdapter(funnel, pivotFunnel)
@@ -7495,6 +7560,37 @@ const labelColorInversion = (spec)=>{
     };
     return result;
 };
+const colorCellStyleFill = (stylePipe)=>(spec, context)=>{
+        const result = stylePipe(spec, context);
+        const { advancedVSeed } = context;
+        const { datasetReshapeInfo } = advancedVSeed;
+        const { unfoldInfo } = datasetReshapeInfo[0];
+        if (isLinearColor(advancedVSeed)) {
+            if (result?.cell?.style) result.cell.style.fill = {
+                field: unfoldInfo.encodingColor,
+                scale: 'color'
+            };
+        }
+        return result;
+    };
+const cellStyle = (spec)=>{
+    const result = {
+        ...spec,
+        cell: {
+            style: {}
+        }
+    };
+    return {
+        ...result,
+        cell: {
+            style: {
+                shape: 'rect',
+                stroke: '#ffffff',
+                lineWidth: 1
+            }
+        }
+    };
+};
 const initHeatmap = (spec, context)=>{
     const result = {
         ...spec
@@ -7509,13 +7605,6 @@ const initHeatmap = (spec, context)=>{
     result.seriesField = unfoldInfo.encodingColorId;
     result.valueField = foldInfo.measureValue;
     result.padding = 0;
-    result.cell = {
-        style: {
-            shape: 'rect',
-            stroke: '#ffffff',
-            lineWidth: 1
-        }
-    };
     result.axes = [
         {
             type: 'band',
@@ -7540,14 +7629,12 @@ const heatmap = [
     initHeatmap,
     background_backgroundColor,
     datasetXY,
-    color_color,
+    colorAdapter(color_color, linearColor),
     label_label,
     labelColorInversion,
-    discreteLegend,
+    colorAdapter(discreteLegend, colorLegend),
+    colorCellStyleFill(cellStyle),
     tooltip_tooltip,
-    pointStyle_pointStyle,
-    pointStateDimensionHover,
-    lineStyle_lineStyle,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -7562,21 +7649,20 @@ const pivotHeatmap = [
         initHeatmap,
         background_backgroundColor,
         datasetXY,
-        color_color,
+        colorAdapter(color_color, linearColor),
         label_label,
         labelColorInversion,
         discreteLegend,
         tooltip_tooltip,
-        pointStyle_pointStyle,
-        pointStateDimensionHover,
-        lineStyle_lineStyle,
+        colorCellStyleFill(cellStyle),
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
         annotationArea_annotationArea
     ]),
     pivotRowDimensions,
-    pivotColumnDimensions
+    pivotColumnDimensions,
+    colorAdapter(pivotDiscreteLegend, pivotColorLegend)
 ];
 const heatmapSpecPipeline = [
     pivotAdapter_pivotAdapter(heatmap, pivotHeatmap)