@visactor/vseed 0.1.4 → 0.1.5

package/dist/umd/index.js

@@ -1465,8 +1465,7 @@
             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 [];
@@ -1551,12 +1550,11 @@
             encoding.y = chunk_QJLMYOTX_i(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 = chunk_QJLMYOTX_i(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 = [];
@@ -1568,14 +1566,13 @@
             if (color.length > 0) encoding.color = color;
         };
         const generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+            encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            encoding.detail = chunk_QJLMYOTX_i(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;
@@ -2511,117 +2508,6 @@
             ];
             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 (!chunk_VCYTMP4D_n(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 (!chunk_VCYTMP4D_n(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 (!chunk_VCYTMP4D_n(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
@@ -3146,6 +3032,117 @@
                 }
             };
         };
+        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 (!chunk_VCYTMP4D_n(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 (!chunk_VCYTMP4D_n(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 (!chunk_VCYTMP4D_n(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;
@@ -3907,31 +3904,118 @@
                 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,
@@ -3940,18 +4024,18 @@
             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,
@@ -3959,7 +4043,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const lineSpecPipeline = [
             pivotAdapter_pivotAdapter(line_line, pivotLine)
@@ -4008,7 +4092,7 @@
             return encoding;
         };
         const column_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+            encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.x.length) encoding.x = [
@@ -4324,93 +4408,6 @@
                 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,
@@ -4684,7 +4681,7 @@
             return encoding;
         };
         const bar_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.y = chunk_QJLMYOTX_i(dimensions.filter((item)=>'yAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+            encoding.y = chunk_QJLMYOTX_i(dimensions.filter((item)=>'yAxis' === item.encoding).map((item)=>item.id));
             encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.y.length) encoding.y = [
@@ -5231,7 +5228,7 @@
         };
         const areaAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            encodingForColumn,
+            encodingForLine,
             buildMeasures,
             autoDimensions_autoDimensions,
             pivotAdapter([
@@ -5389,7 +5386,7 @@
         };
         const areaPercentAdvancedPipeline = [
             initAdvancedVSeed_initAdvancedVSeed,
-            encodingForColumn,
+            encodingForLine,
             buildMeasures,
             autoDimensions_autoDimensions,
             pivotAdapter([
@@ -5876,7 +5873,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const scatterSpecPipeline = [
             pivotAdapter_pivotAdapter(scatter, pivotScatter)
@@ -5925,7 +5922,7 @@
             return encoding;
         };
         const dualAxis_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding || !item.encoding).map((item)=>item.id));
+            encoding.x = chunk_QJLMYOTX_i(dimensions.filter((item)=>'xAxis' === item.encoding).map((item)=>item.id));
             encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.x.length) encoding.x = [
@@ -7079,9 +7076,8 @@
                 ...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;
@@ -7093,30 +7089,57 @@
                     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,
@@ -7129,10 +7152,11 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initPie,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
+                colorPieStyleFill(pieStyle),
                 label_label,
                 tooltip_tooltip,
                 annotationPoint_annotationPoint,
@@ -7142,7 +7166,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const pieSpecPipeline = [
             pivotAdapter_pivotAdapter(pie, pivotPie)
@@ -7170,9 +7194,8 @@
                 ...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;
@@ -7184,29 +7207,19 @@
                     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,
@@ -7219,11 +7232,12 @@
             datasetPivot,
             pivotIndicators_pivotIndicators([
                 initDonut,
-                color_color,
+                colorAdapter(color_color, linearColor),
                 background_backgroundColor,
                 datasetXY,
                 progressive,
                 label_label,
+                colorPieStyleFill(pieStyle),
                 tooltip_tooltip,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
@@ -7232,7 +7246,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const donutSpecPipeline = [
             pivotAdapter_pivotAdapter(donut, pivotDonut)
@@ -7280,7 +7294,7 @@
             if (color.length > 0) encoding.color = color;
         };
         const rose_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.angle = chunk_QJLMYOTX_i(dimensions.filter((item)=>'angle' === item.encoding || !item.encoding).map((item)=>item.id));
+            encoding.angle = chunk_QJLMYOTX_i(dimensions.filter((item)=>'angle' === item.encoding).map((item)=>item.id));
             encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
             encoding.detail = chunk_QJLMYOTX_i(dimensions.filter((item)=>'detail' === item.encoding).map((item)=>item.id));
             if (0 === encoding.angle.length) encoding.angle = [
@@ -7320,18 +7334,6 @@
             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
@@ -7340,7 +7342,7 @@
             result.animation = true;
             return result;
         };
-        const radiusAxis = (spec, context)=>{
+        const angleAxis = (spec, context)=>{
             const result = {
                 ...spec
             };
@@ -7352,26 +7354,37 @@
             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
             };
@@ -7383,50 +7396,79 @@
             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,
@@ -7437,19 +7479,20 @@
                 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)
@@ -7518,15 +7561,16 @@
         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,
@@ -7541,15 +7585,16 @@
             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,
@@ -7557,7 +7602,7 @@
             ]),
             pivotRowDimensions,
             pivotColumnDimensions,
-            pivotDiscreteLegend
+            colorAdapter(pivotDiscreteLegend, pivotColorLegend)
         ];
         const roseParallelSpecPipeline = [
             pivotAdapter_pivotAdapter(roseParallel, pivotRoseParallel)
@@ -7588,12 +7633,11 @@
             encoding.radius = chunk_QJLMYOTX_i(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 = chunk_QJLMYOTX_i(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 = [];
@@ -7605,14 +7649,13 @@
             if (color.length > 0) encoding.color = color;
         };
         const radar_generateDimensionEncoding = (dimensions, encoding)=>{
-            encoding.angle = chunk_QJLMYOTX_i(dimensions.filter((item)=>'angle' === item.encoding || !item.encoding).map((item)=>item.id));
+            encoding.angle = chunk_QJLMYOTX_i(dimensions.filter((item)=>'angle' === item.encoding).map((item)=>item.id));
             encoding.color = chunk_QJLMYOTX_i(dimensions.filter((item)=>'color' === item.encoding).map((item)=>item.id));
-            encoding.detail = chunk_QJLMYOTX_i(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,
@@ -7828,34 +7871,55 @@
                     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,
@@ -7870,17 +7934,18 @@
                 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)
@@ -7967,6 +8032,37 @@
             };
             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
@@ -7981,13 +8077,6 @@
             result.seriesField = unfoldInfo.encodingColorId;
             result.valueField = foldInfo.measureValue;
             result.padding = 0;
-            result.cell = {
-                style: {
-                    shape: 'rect',
-                    stroke: '#ffffff',
-                    lineWidth: 1
-                }
-            };
             result.axes = [
                 {
                     type: 'band',
@@ -8012,14 +8101,12 @@
             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,
@@ -8034,21 +8121,20 @@
                 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)