@visactor/vseed 0.0.24 → 0.0.25

package/dist/umd/index.js

@@ -64,6 +64,7 @@
             findAllMeasures: ()=>findAllMeasures,
             funnelSpecPipeline: ()=>funnelSpecPipeline,
             zAnalysis: ()=>zAnalysis,
+            zColorLegend: ()=>zColorLegend,
             preorderTraverse: ()=>preorderTraverse,
             zDimensionTree: ()=>zDimensionTree,
             roseParallelSpecPipeline: ()=>roseParallelSpecPipeline,
@@ -152,9 +153,10 @@
             UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
             zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
             zFoldInfo: ()=>zFoldInfo,
-            zUnfoldInfo: ()=>zUnfoldInfo,
+            zLinearColor: ()=>zLinearColor,
             zAreaStyle: ()=>zAreaStyle,
             ORIGINAL_DATA: ()=>ORIGINAL_DATA,
+            zUnfoldInfo: ()=>zUnfoldInfo,
             zAnnotationArea: ()=>zAnnotationArea,
             columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
             i18n: ()=>i18n,
@@ -2332,7 +2334,7 @@
                     unfoldInfo.groupId
                 ];
                 const color = [
-                    unfoldInfo.groupId
+                    foldInfo.measureValue
                 ];
                 return [
                     ...prev,
@@ -2880,6 +2882,39 @@
             markStyle_markStyle,
             annotation_annotation
         ];
+        const encodingMatrix = (advancedVSeed)=>{
+            const result = {
+                ...advancedVSeed
+            };
+            const { datasetReshapeInfo, dimensions } = advancedVSeed;
+            if (!datasetReshapeInfo || !dimensions) return result;
+            const xDimension = dimensions.find((item)=>'rowDimension' !== item.location && 'columnDimension' !== item.location);
+            const isZeroDimension = 0 === dimensions.length;
+            const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
+                const { foldInfo, unfoldInfo } = cur;
+                const x = [
+                    isZeroDimension ? foldInfo.measureName : xDimension?.id
+                ];
+                const y = [
+                    unfoldInfo.groupName
+                ];
+                const color = [
+                    foldInfo.measureValue
+                ];
+                return [
+                    ...prev,
+                    {
+                        x,
+                        y,
+                        color
+                    }
+                ];
+            }, []);
+            return {
+                ...result,
+                encoding
+            };
+        };
         const heatmapAdvancedPipeline = [
             initAdvancedVSeed,
             autoMeasures,
@@ -2889,7 +2924,7 @@
             ], [
                 pivotReshapeTo2D1M
             ]),
-            encodingXY,
+            encodingMatrix,
             sortXBandAxis,
             heatmapConfig,
             theme_theme,
@@ -3064,12 +3099,11 @@
             records_records,
             theme_theme
         ];
-        const dataset_dataset = (spec, context)=>{
+        const datasetYX = (spec, context)=>{
             const { advancedVSeed, vseed } = context;
             const { encoding, analysis, datasetReshapeInfo } = advancedVSeed;
             const { orderMapping = {} } = analysis ?? {};
             const angle = encoding[0]?.angle?.[0];
-            const x = encoding[0]?.x?.[0];
             const y = encoding[0]?.y?.[0];
             const group = encoding[0]?.group?.[0];
             const id = datasetReshapeInfo[0].id;
@@ -3077,25 +3111,57 @@
             if (angle) fields[angle] = {
                 sortIndex: 0
             };
-            if (x) {
-                const order = orderMapping[x];
-                if (order) fields[x] = {
+            if (y) {
+                const order = orderMapping[y];
+                if (order) fields[y] = {
                     sortIndex: 0,
                     domain: order,
                     lockStatisticsByDomain: true
                 };
-                else fields[x] = {
+                else fields[y] = {
                     sortIndex: 0
                 };
             }
-            if (y) {
-                const order = orderMapping[y];
-                if (order) fields[y] = {
+            if (group) {
+                const order = orderMapping[group];
+                if (order) fields[group] = {
                     sortIndex: 0,
                     domain: order,
                     lockStatisticsByDomain: true
                 };
-                else fields[y] = {
+                else fields[group] = {
+                    sortIndex: 0
+                };
+            }
+            return {
+                ...spec,
+                data: {
+                    id,
+                    values: isPivotChart(vseed) ? void 0 : advancedVSeed.dataset,
+                    fields: fields
+                }
+            };
+        };
+        const datasetXY = (spec, context)=>{
+            const { advancedVSeed, vseed } = context;
+            const { encoding, analysis, datasetReshapeInfo } = advancedVSeed;
+            const { orderMapping = {} } = analysis ?? {};
+            const angle = encoding[0]?.angle?.[0];
+            const x = encoding[0]?.x?.[0];
+            const group = encoding[0]?.group?.[0];
+            const id = datasetReshapeInfo[0].id;
+            const fields = {};
+            if (angle) fields[angle] = {
+                sortIndex: 0
+            };
+            if (x) {
+                const order = orderMapping[x];
+                if (order) fields[x] = {
+                    sortIndex: 0,
+                    domain: order,
+                    lockStatisticsByDomain: true
+                };
+                else fields[x] = {
                     sortIndex: 0
                 };
             }
@@ -3356,8 +3422,9 @@
                 ...spec
             };
             const { advancedVSeed } = context;
-            const { encoding } = advancedVSeed;
+            const { encoding, dataset } = advancedVSeed;
             if (!encoding[0].angle || !encoding[0].radius || !encoding[0].group) return result;
+            const showStroke = dataset.length > 20;
             result.type = 'pie';
             result.outerRadius = 0.8;
             result.innerRadius = 0;
@@ -3373,7 +3440,7 @@
             result.pie = {
                 style: {
                     stroke: '#ffffff',
-                    lineWidth: 1,
+                    lineWidth: showStroke ? 1 : 0,
                     centerOffset: 0
                 },
                 state: {
@@ -3391,8 +3458,9 @@
                 ...spec
             };
             const { advancedVSeed } = context;
-            const { encoding } = advancedVSeed;
+            const { encoding, dataset } = advancedVSeed;
             if (!encoding[0].angle || !encoding[0].radius || !encoding[0].group) return result;
+            const showStroke = dataset.length > 20;
             result.type = 'pie';
             result.outerRadius = 0.8;
             result.innerRadius = 0.8 * result.outerRadius;
@@ -3408,7 +3476,7 @@
             result.pie = {
                 style: {
                     stroke: '#ffffff',
-                    lineWidth: 1
+                    lineWidth: showStroke ? 1 : 0
                 },
                 state: {
                     hover: {
@@ -3559,7 +3627,11 @@
             ];
             result.funnel = {
                 style: {
-                    cornerRadius: 4
+                    cornerRadius: 4,
+                    fill: {
+                        field: encoding[0].color[0],
+                        scale: 'color'
+                    }
                 },
                 state: {
                     hover: {
@@ -4208,6 +4280,16 @@
             };
             return result;
         };
+        const labelColorInversion = (spec)=>{
+            const result = {
+                ...spec
+            };
+            if (result.label) result.label.smartInvert = true;
+            else result.label = {
+                smartInvert: true
+            };
+            return result;
+        };
         const discreteLegend = (spec, context)=>{
             const result = {
                 ...spec
@@ -4417,6 +4499,69 @@
                 legends
             };
         };
+        const colorLegend = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { chartType } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            const { encoding } = advancedVSeed;
+            if (!encoding[0].color) return result;
+            if (!baseConfig || !baseConfig.legend) return result;
+            const { legend } = baseConfig;
+            const { enable, position = 'bottom' } = legend || {};
+            const orient = [
+                'bottom',
+                'bottomLeft',
+                'bottomRight',
+                'bl',
+                'br'
+            ].includes(position) ? 'bottom' : [
+                'top',
+                'topLeft',
+                'topRight',
+                'tl',
+                'tr'
+            ].includes(position) ? 'top' : [
+                'left',
+                'leftTop',
+                'leftBottom',
+                'lt',
+                'lb'
+            ].includes(position) ? 'left' : 'right';
+            const legendPosition = [
+                'topLeft',
+                'bottomLeft',
+                'leftTop',
+                'rightTop',
+                'lt',
+                'rt',
+                'tl',
+                'bl'
+            ].includes(position) ? 'start' : [
+                'topRight',
+                'bottomRight',
+                'leftBottom',
+                'rightBottom',
+                'lb',
+                'rb',
+                'rt',
+                'br'
+            ].includes(position) ? 'end' : 'middle';
+            result.legends = {
+                type: 'color',
+                visible: enable,
+                orient,
+                position: legendPosition,
+                field: encoding[0].color[0],
+                inverse: !![
+                    'left',
+                    'right'
+                ].includes(orient)
+            };
+            return result;
+        };
         const color_color = (spec, context)=>{
             const result = {
                 ...spec
@@ -4444,6 +4589,28 @@
             };
             return result;
         };
+        const linearColor = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { datasetReshapeInfo, chartType, encoding } = advancedVSeed;
+            const baseConfig = advancedVSeed.config[chartType];
+            if (!baseConfig || !baseConfig.color) return result;
+            const { color } = baseConfig;
+            const { colorScheme } = color;
+            result.color = {
+                type: 'linear',
+                domain: [
+                    {
+                        dataId: datasetReshapeInfo[0].id,
+                        fields: encoding?.[0]?.color
+                    }
+                ],
+                range: colorScheme
+            };
+            return result;
+        };
         const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
                 const { vseed } = context;
                 const usePivotChart = isPivotChart(vseed);
@@ -5697,7 +5864,7 @@
             initLine,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             xBand,
             yLinear,
             label_label,
@@ -5721,7 +5888,7 @@
                 initLine,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -5748,7 +5915,7 @@
             stackInverse,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             xBand,
             yLinear,
             label_label,
@@ -5772,7 +5939,7 @@
                 stackInverse,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -5796,7 +5963,7 @@
             stackCornerRadius_stackCornerRadius,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             xBand,
             yLinear,
             label_label,
@@ -5819,7 +5986,7 @@
                 stackCornerRadius_stackCornerRadius,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -5845,7 +6012,7 @@
             color_color,
             background_backgroundColor,
             percent,
-            dataset_dataset,
+            datasetXY,
             xBand,
             yLinear,
             label_label,
@@ -5870,7 +6037,7 @@
                 color_color,
                 percent,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -5894,7 +6061,7 @@
             stackCornerRadius_stackCornerRadius,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetYX,
             xLinear,
             yBand,
             label_label,
@@ -5917,7 +6084,7 @@
                 stackCornerRadius_stackCornerRadius,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetYX,
                 xLinear,
                 yBand,
                 label_label,
@@ -5942,7 +6109,7 @@
             stackCornerRadius_stackCornerRadius,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetYX,
             xLinear,
             yBand,
             label_label,
@@ -5965,7 +6132,7 @@
                 stackCornerRadius_stackCornerRadius,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetYX,
                 xLinear,
                 yBand,
                 label_label,
@@ -5990,7 +6157,7 @@
             color_color,
             background_backgroundColor,
             percent,
-            dataset_dataset,
+            datasetYX,
             xLinear,
             yBand,
             label_label,
@@ -6014,7 +6181,7 @@
                 color_color,
                 background_backgroundColor,
                 percent,
-                dataset_dataset,
+                datasetYX,
                 yBand,
                 xLinear,
                 label_label,
@@ -6038,7 +6205,7 @@
             stackInverse,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             xBand,
             yLinear,
             label_label,
@@ -6064,7 +6231,7 @@
                 color_color,
                 background_backgroundColor,
                 stackInverse,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -6092,7 +6259,7 @@
             color_color,
             background_backgroundColor,
             percent,
-            dataset_dataset,
+            datasetXY,
             xBand,
             yLinear,
             label_label,
@@ -6118,7 +6285,7 @@
                 color_color,
                 background_backgroundColor,
                 percent,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -6154,7 +6321,7 @@
                 pointStyle_pointStyle,
                 pointStateDimensionHover
             ]),
-            dataset_dataset,
+            datasetXY,
             background_backgroundColor,
             xBand,
             yLinear,
@@ -6186,7 +6353,7 @@
                     pointStateDimensionHover
                 ]),
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 xBand,
                 yLinear,
                 label_label,
@@ -6206,7 +6373,7 @@
             initScatter,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             xLinear,
             yLinear,
             label_label,
@@ -6230,7 +6397,7 @@
                 initScatter,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 xLinear,
                 yLinear,
                 label_label,
@@ -6255,7 +6422,7 @@
             initPie,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             label_label,
             tooltip_tooltip,
             discreteLegend,
@@ -6273,7 +6440,7 @@
                 initPie,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 label_label,
                 tooltip_tooltip,
                 annotationPoint_annotationPoint,
@@ -6292,7 +6459,7 @@
             initDonut,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             label_label,
             tooltip_tooltip,
             discreteLegend,
@@ -6310,7 +6477,7 @@
                 initDonut,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 label_label,
                 tooltip_tooltip,
                 annotationPoint_annotationPoint,
@@ -6331,7 +6498,7 @@
             stackInverse,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             radiusAxis,
             angleAxis,
             label_label,
@@ -6350,7 +6517,7 @@
                 stackInverse,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 radiusAxis,
                 angleAxis,
                 label_label,
@@ -6369,7 +6536,7 @@
             stackCornerRadius_stackCornerRadius,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             radiusAxis,
             angleAxis,
             label_label,
@@ -6391,7 +6558,7 @@
                 stackCornerRadius_stackCornerRadius,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 radiusAxis,
                 angleAxis,
                 label_label,
@@ -6413,7 +6580,7 @@
             initRadar,
             color_color,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             radarAngleAxis,
             radarRadiusAxis,
             label_label,
@@ -6434,7 +6601,7 @@
                 initRadar,
                 color_color,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 radarAngleAxis,
                 radarRadiusAxis,
                 label_label,
@@ -6454,12 +6621,12 @@
         ];
         const funnel = [
             initFunnel,
-            color_color,
+            linearColor,
             background_backgroundColor,
-            dataset_dataset,
+            datasetXY,
             label_label,
             tooltip_tooltip,
-            discreteLegend,
+            colorLegend,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
             annotationHorizontalLine_annotationHorizontalLine,
@@ -6472,34 +6639,76 @@
             datasetPivot,
             pivotIndicators([
                 initFunnel,
-                color_color,
+                linearColor,
                 background_backgroundColor,
-                dataset_dataset,
+                datasetXY,
                 label_label,
                 tooltip_tooltip,
+                colorLegend,
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
                 annotationArea_annotationArea
             ]),
             pivotRowDimensions,
-            pivotColumnDimensions,
-            pivotDiscreteLegend
+            pivotColumnDimensions
         ];
         const funnelSpecPipeline = [
             pivotAdapter_pivotAdapter(funnel, pivotFunnel)
         ];
+        const initHeatmap = (spec, context)=>{
+            const result = {
+                ...spec
+            };
+            const { advancedVSeed } = context;
+            const { encoding } = advancedVSeed;
+            if (!encoding[0].y || !encoding[0].x || !encoding[0].color) return result;
+            result.type = 'heatmap';
+            result.direction = 'vertical';
+            result.xField = encoding[0].x[0];
+            result.yField = encoding[0].y[0];
+            result.valueField = encoding[0].color[0];
+            result.padding = 0;
+            result.cell = {
+                style: {
+                    shape: 'rect',
+                    stroke: '#ffffff',
+                    lineWidth: 1,
+                    fill: {
+                        field: encoding[0].color[0],
+                        scale: 'color'
+                    }
+                }
+            };
+            result.axes = [
+                {
+                    type: 'band',
+                    orient: 'left',
+                    bandPadding: 0
+                },
+                {
+                    type: 'band',
+                    orient: 'bottom',
+                    bandPadding: 0
+                }
+            ];
+            result.region = [
+                {
+                    clip: true
+                }
+            ];
+            result.animation = true;
+            return result;
+        };
         const heatmap = [
-            initLine,
-            color_color,
+            initHeatmap,
+            linearColor,
             background_backgroundColor,
-            dataset_dataset,
-            xBand,
-            yLinear,
+            datasetXY,
             label_label,
+            labelColorInversion,
+            colorLegend,
             tooltip_tooltip,
-            verticalCrosshairLine,
-            discreteLegend,
             pointStyle_pointStyle,
             pointStateDimensionHover,
             lineStyle_lineStyle,
@@ -6514,15 +6723,14 @@
             pivotIndicators_pivotIndicatorsAsRow,
             datasetPivot,
             pivotIndicators([
-                initLine,
-                color_color,
+                initHeatmap,
+                linearColor,
                 background_backgroundColor,
-                dataset_dataset,
-                xBand,
-                yLinear,
+                datasetXY,
                 label_label,
+                labelColorInversion,
+                colorLegend,
                 tooltip_tooltip,
-                verticalCrosshairLine,
                 pointStyle_pointStyle,
                 pointStateDimensionHover,
                 lineStyle_lineStyle,
@@ -6532,8 +6740,7 @@
                 annotationArea_annotationArea
             ]),
             pivotRowDimensions,
-            pivotColumnDimensions,
-            pivotDiscreteLegend
+            pivotColumnDimensions
         ];
         const heatmapSpecPipeline = [
             pivotAdapter_pivotAdapter(heatmap, pivotHeatmap)
@@ -7773,7 +7980,24 @@
                                 '#ACB9FF',
                                 '#B7C4FF',
                                 '#C2CEFF'
-                            ]
+                            ].reverse()
+                        }
+                    },
+                    heatmap: {
+                        ...baseConfig,
+                        color: {
+                            colorScheme: [
+                                '#5766EC',
+                                '#6372F0',
+                                '#7080F4',
+                                '#7C8CFA',
+                                '#8998FF',
+                                '#95A3FF',
+                                '#A0AEFF',
+                                '#ACB9FF',
+                                '#B7C4FF',
+                                '#C2CEFF'
+                            ].reverse()
                         }
                     }
                 }
@@ -8077,6 +8301,9 @@
                                 '#A0CEFF'
                             ]
                         }
+                    },
+                    heatmap: {
+                        ...baseConfig
                     }
                 }
             };
@@ -13154,6 +13381,9 @@
             colorScheme: schemas_array(schemas_string()).optional(),
             colorMapping: record(schemas_string(), schemas_string()).optional()
         });
+        const zLinearColor = schemas_object({
+            colorScheme: schemas_array(schemas_string()).optional()
+        });
         const zLabel = schemas_object({
             enable: schemas_boolean().default(true).optional()
         });
@@ -13211,6 +13441,31 @@
             labelFontColor: schemas_string().default('#fff').optional(),
             labelFontWeight: schemas_number().or(schemas_string()).default(400).optional()
         });
+        const zColorLegend = schemas_object({
+            position: schemas_enum([
+                'left',
+                'leftTop',
+                'leftBottom',
+                'lt',
+                'lb',
+                'top',
+                'topLeft',
+                'topRight',
+                'tl',
+                'tr',
+                'right',
+                'rightTop',
+                'rightBottom',
+                'rt',
+                'rb',
+                'bottom',
+                'bottomLeft',
+                'bottomRight',
+                'bl',
+                'br'
+            ]).default('bottom').optional(),
+            enable: schemas_boolean().default(true).optional()
+        });
         const zTooltip = schemas_object({
             enable: schemas_boolean().default(true).optional()
         });
@@ -13486,7 +13741,7 @@
                 zSelector,
                 zSelectors
             ]).optional(),
-            lineSmooth: schemas_boolean().default(true).optional(),
+            lineSmooth: schemas_boolean().optional(),
             lineColor: schemas_string().optional(),
             lineColorOpacity: schemas_number().optional(),
             lineWidth: schemas_number().optional(),
@@ -19752,9 +20007,9 @@
             dimensions: zDimensions.optional(),
             measures: zMeasureTree.optional(),
             backgroundColor: zBackgroundColor.optional(),
-            color: zColor.optional(),
+            color: zLinearColor.optional(),
             label: zLabel.optional(),
-            legend: zLegend.optional(),
+            legend: zColorLegend.optional(),
             tooltip: zTooltip.optional(),
             theme: zTheme.optional(),
             locale: zLocale.optional()
@@ -19765,9 +20020,9 @@
             dimensions: zDimensions.optional(),
             measures: zMeasureTree.optional(),
             backgroundColor: zBackgroundColor.optional(),
-            color: zColor.optional(),
+            color: zLinearColor.optional(),
             label: zLabel.optional(),
-            legend: zLegend.optional(),
+            legend: zColorLegend.optional(),
             tooltip: zTooltip.optional(),
             theme: zTheme.optional(),
             locale: zLocale.optional()