@visactor/vseed 0.0.20 → 0.0.22

package/dist/index.cjs

@@ -1,5 +1,14 @@
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -41,6 +50,7 @@ __webpack_require__.d(__webpack_exports__, {
     columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
     zColumnConfig: ()=>zColumnConfig,
     zAnnotation: ()=>zAnnotation,
+    zSortLegend: ()=>zSortLegend,
     pivotTableAdvancedPipeline: ()=>pivotTableAdvancedPipeline,
     zYBandAxis: ()=>zYBandAxis,
     dataReshapeFor1D2M: ()=>dataReshapeFor1D2M,
@@ -54,6 +64,7 @@ __webpack_require__.d(__webpack_exports__, {
     registerColumn: ()=>registerColumn,
     findAllMeasures: ()=>findAllMeasures,
     funnelSpecPipeline: ()=>funnelSpecPipeline,
+    zAnalysis: ()=>zAnalysis,
     preorderTraverse: ()=>preorderTraverse,
     zDimensionTree: ()=>zDimensionTree,
     roseParallelSpecPipeline: ()=>roseParallelSpecPipeline,
@@ -67,6 +78,7 @@ __webpack_require__.d(__webpack_exports__, {
     barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
     findAllDimensions: ()=>findAllDimensions,
     findDimensionById: ()=>findDimensionById,
+    zPivotTableConfig: ()=>zPivotTableConfig,
     zArea: ()=>zArea,
     zColumnParallel: ()=>zColumnParallel,
     zDimensions: ()=>zDimensions,
@@ -85,6 +97,7 @@ __webpack_require__.d(__webpack_exports__, {
     registerBarPercent: ()=>registerBarPercent,
     roseSpecPipeline: ()=>roseSpecPipeline,
     zPivotTable: ()=>zPivotTable,
+    zSortAxis: ()=>zSortAxis,
     registerLightTheme: ()=>registerLightTheme,
     roseAdvancedPipeline: ()=>roseAdvancedPipeline,
     zBarParallel: ()=>zBarParallel,
@@ -146,6 +159,7 @@ __webpack_require__.d(__webpack_exports__, {
     zColumn: ()=>zColumn,
     zCustomTheme: ()=>zCustomTheme,
     zLineConfig: ()=>zLineConfig,
+    zTableConfig: ()=>zTableConfig,
     zXBandAxis: ()=>zXBandAxis,
     zColumnPercentConfig: ()=>zColumnPercentConfig,
     findMeasureById: ()=>findMeasureById,
@@ -255,7 +269,6 @@ const createNumFormatter = (format, locale = intl.getLocale())=>{
         roundingMode,
         roundingPriority
     };
-    console.log('debug roundingMode', roundingMode);
     if ((0, external_remeda_namespaceObject.isNumber)(fractionDigits)) {
         if (fractionDigits >= 0) {
             numFormatterOptions.minimumFractionDigits = fractionDigits;
@@ -946,11 +959,12 @@ const encodingXY = (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 : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : xDimension?.id
         ];
         const y = [
             foldInfo.measureValue
@@ -982,11 +996,12 @@ const encodingYX = (advancedVSeed)=>{
     };
     const { datasetReshapeInfo, dimensions } = advancedVSeed;
     if (!datasetReshapeInfo || !dimensions) return result;
+    const yDimension = 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 y = [
-            isZeroDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : yDimension?.id
         ];
         const x = [
             foldInfo.measureValue
@@ -1054,6 +1069,7 @@ const encodingRose = (advancedVSeed)=>{
     };
     const { datasetReshapeInfo, dimensions, measures } = advancedVSeed;
     if (!datasetReshapeInfo || !dimensions || !measures) return result;
+    const angleDimension = dimensions.find((item)=>'rowDimension' !== item.location && 'columnDimension' !== item.location);
     const is1D1M = 1 === dimensions.length && 1 === measures.length;
     const isZeroDimension = 0 === dimensions.length;
     const encoding = datasetReshapeInfo.reduce((prev, cur)=>{
@@ -1062,13 +1078,13 @@ const encodingRose = (advancedVSeed)=>{
             foldInfo.measureValue
         ];
         const angle = [
-            isZeroDimension ? foldInfo.measureName : dimensions[0].id
+            isZeroDimension ? foldInfo.measureName : angleDimension?.id
         ];
         const group = [
-            is1D1M ? dimensions[0].id : unfoldInfo.groupId
+            is1D1M ? angleDimension?.id : unfoldInfo.groupId
         ];
         const color = [
-            is1D1M ? dimensions[0].id : unfoldInfo.groupId
+            is1D1M ? angleDimension?.id : unfoldInfo.groupId
         ];
         return [
             ...prev,
@@ -1288,6 +1304,81 @@ const annotation_annotation = (advancedVSeed, context)=>{
         annotation
     };
 };
+const sortXBandAxis = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { sortAxis, dataset } = vseed;
+    const { encoding } = advancedVSeed;
+    const xField = encoding?.[0]?.x?.[0];
+    if (!sortAxis || !xField) return advancedVSeed;
+    if (!result.analysis) result.analysis = {};
+    if (!result.analysis.orderMapping) result.analysis.orderMapping = {};
+    const axisOrderResult = calcOrder(sortAxis, xField, dataset);
+    result.analysis.orderMapping[xField] = axisOrderResult;
+    return result;
+};
+const sortYBandAxis = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { sortAxis, dataset } = vseed;
+    const { encoding } = advancedVSeed;
+    const yField = encoding?.[0]?.y?.[0];
+    if (!sortAxis || !yField) return advancedVSeed;
+    if (!result.analysis) result.analysis = {};
+    if (!result.analysis.orderMapping) result.analysis.orderMapping = {};
+    const axisOrderResult = calcOrder(sortAxis, yField, dataset);
+    result.analysis.orderMapping[yField] = axisOrderResult;
+    return result;
+};
+const sort_sortLegend = (advancedVSeed, context)=>{
+    const result = {
+        ...advancedVSeed
+    };
+    const { vseed } = context;
+    const { sortLegend } = vseed;
+    const { datasetReshapeInfo } = advancedVSeed;
+    const groupField = datasetReshapeInfo?.[0]?.unfoldInfo?.groupId;
+    const colorIdMap = datasetReshapeInfo?.[0]?.unfoldInfo?.colorIdMap;
+    const colorItems = datasetReshapeInfo?.[0]?.unfoldInfo?.colorItems;
+    if (!sortLegend || !groupField || !colorIdMap || !colorItems) return advancedVSeed;
+    if (!result.analysis) result.analysis = {};
+    if (!result.analysis.orderMapping) result.analysis.orderMapping = {};
+    if (sortLegend.customOrder) {
+        const nameMap = Object.keys(colorIdMap).reduce((pre, cur)=>{
+            pre[colorIdMap[cur]] = cur;
+            return pre;
+        }, {});
+        const orderRes = sortLegend.customOrder.map((itemNameOrId)=>nameMap[itemNameOrId] ? nameMap[itemNameOrId] : itemNameOrId);
+        result.analysis.orderMapping[groupField] = orderRes;
+        return result;
+    }
+    const dataset = advancedVSeed.dataset?.flat(2);
+    const orderRes = calcOrder(sortLegend, groupField, dataset || []);
+    result.analysis.orderMapping[groupField] = orderRes;
+    return result;
+};
+const calcOrder = (sortAxis, id, dataset)=>{
+    if (sortAxis.customOrder) return sortAxis.customOrder;
+    const order = sortAxis.order || 'asc';
+    const orderBy = sortAxis.orderBy;
+    const res = (0, external_remeda_namespaceObject.sort)(dataset, (a, b)=>{
+        const aValue = a[orderBy || id];
+        const bValue = b[orderBy || id];
+        if ('asc' === order) {
+            if (aValue < bValue) return -1;
+            if (aValue > bValue) return 1;
+            return 0;
+        }
+        if (aValue > bValue) return -1;
+        if (aValue < bValue) return 1;
+        return 0;
+    });
+    return (0, external_remeda_namespaceObject.unique)(res.map((item)=>item[id]));
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
     autoMeasures,
@@ -1298,6 +1389,8 @@ const lineAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     lineConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1313,6 +1406,8 @@ const barAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    sortYBandAxis,
+    sort_sortLegend,
     barConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1328,6 +1423,8 @@ const barParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    sortYBandAxis,
+    sort_sortLegend,
     barParallelConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1343,6 +1440,8 @@ const barPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    sortYBandAxis,
+    sort_sortLegend,
     barPercentConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1358,6 +1457,8 @@ const columnAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     columnConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1373,6 +1474,8 @@ const columnParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     columnParallelConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1388,6 +1491,8 @@ const columnPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     columnPercentConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1403,6 +1508,8 @@ const areaAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     areaConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1418,6 +1525,8 @@ const areaPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     areaPercentConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1664,23 +1773,54 @@ const tableAdvancedPipeline = [
 ];
 const dataset_dataset = (spec, context)=>{
     const { advancedVSeed } = context;
-    const { encoding } = advancedVSeed;
+    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;
     const fields = {};
     if (angle) fields[angle] = {
         sortIndex: 0
     };
-    if (x) fields[x] = {
-        sortIndex: 0
-    };
-    if (group) fields[group] = {
-        sortIndex: 1
-    };
+    if (x) {
+        const order = orderMapping[x];
+        if (order) fields[x] = {
+            sortIndex: 0,
+            domain: order,
+            lockStatisticsByDomain: true
+        };
+        else fields[x] = {
+            sortIndex: 0
+        };
+    }
+    if (y) {
+        const order = orderMapping[y];
+        if (order) fields[y] = {
+            sortIndex: 0,
+            domain: order,
+            lockStatisticsByDomain: true
+        };
+        else fields[y] = {
+            sortIndex: 0
+        };
+    }
+    if (group) {
+        const order = orderMapping[group];
+        if (order) fields[group] = {
+            sortIndex: 0,
+            domain: order,
+            lockStatisticsByDomain: true
+        };
+        else fields[group] = {
+            sortIndex: 0
+        };
+    }
     return {
         ...spec,
         data: {
+            id,
             values: advancedVSeed.dataset,
             fields: fields
         }
@@ -1702,12 +1842,6 @@ const datasetPivot = (spec, context)=>{
         records: records
     };
 };
-const datasetPivotPlaceholder = (spec)=>({
-        ...spec,
-        data: {
-            id: 'placeholderDataId'
-        }
-    });
 const initColumn = (spec, context)=>{
     const result = {
         ...spec
@@ -2736,7 +2870,7 @@ const pivotDiscreteLegend = (spec, context)=>{
         }), {});
     const { legend, color } = baseConfig;
     const { colorScheme } = color;
-    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight, maxSize, border, shapeType = 'rectRound' } = legend || {};
+    const { enable, position = 'bottom', labelFontColor, labelFontSize = 12, labelFontWeight = 400, maxSize, border, shapeType = 'rectRound' } = legend || {};
     const orient = [
         'bottom',
         'bottomLeft',
@@ -4097,7 +4231,7 @@ const pivotLine = [
         initLine,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4148,7 +4282,7 @@ const pivotColumn = [
         stackInverse,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4195,7 +4329,7 @@ const pivotColumnParallel = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4246,7 +4380,7 @@ const pivotColumnPercent = [
         color_color,
         percent,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4293,7 +4427,8 @@ const pivotBar = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
+        xLinear,
         yBand,
         label_label,
         label_label,
@@ -4340,9 +4475,9 @@ const pivotBarParallel = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
-        yBand,
+        dataset_dataset,
         xLinear,
+        yBand,
         label_label,
         tooltip_tooltip,
         horizontalCrosshairRect,
@@ -4389,7 +4524,7 @@ const pivotBarPercent = [
         color_color,
         background_backgroundColor,
         percent,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         yBand,
         xLinear,
         label_label,
@@ -4439,7 +4574,7 @@ const pivotArea = [
         color_color,
         background_backgroundColor,
         stackInverse,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4493,7 +4628,7 @@ const pivotAreaPercent = [
         color_color,
         background_backgroundColor,
         percent,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4536,7 +4671,7 @@ const pivotPie = [
         initPie,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -4573,7 +4708,7 @@ const pivotDonut = [
         initDonut,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -4613,7 +4748,7 @@ const pivotRose = [
         stackInverse,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         radiusAxis,
         angleAxis,
         label_label,
@@ -4654,7 +4789,7 @@ const pivotRoseParallel = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         radiusAxis,
         angleAxis,
         label_label,
@@ -4694,7 +4829,7 @@ const pivotFunnel = [
         initFunnel,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -4737,7 +4872,7 @@ const pivotScatter = [
         initScatter,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xLinear,
         yLinear,
         label_label,
@@ -4768,7 +4903,57 @@ const initTable = (spec, context)=>{
         heightMode: 'autoHeight',
         autoWrapText: true,
         columnResizeMode: 'all',
-        showHeader: true
+        showHeader: true,
+        tooltip: {
+            isShowOverflowTextTooltip: true
+        },
+        animationAppear: {
+            duration: 300,
+            delay: 250,
+            type: 'one-by-one',
+            direction: 'row'
+        },
+        hover: {
+            highlightMode: 'row'
+        },
+        theme: {
+            underlayBackgroundColor: 'transparent'
+        }
+    };
+};
+const initPivotTable = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { dataset } = advancedVSeed;
+    return {
+        ...spec,
+        records: dataset,
+        widthMode: 'standard',
+        heightMode: 'autoHeight',
+        autoWrapText: true,
+        columnResizeMode: 'all',
+        columnResizeType: 'column',
+        showColumnHeader: true,
+        showRowHeader: true,
+        select: {
+            highlightMode: 'cell',
+            headerSelectMode: 'inline'
+        },
+        hover: {
+            highlightMode: 'cross'
+        },
+        tooltip: {
+            isShowOverflowTextTooltip: true
+        },
+        widthAdaptiveMode: 'all',
+        animationAppear: {
+            duration: 300,
+            delay: 250,
+            type: 'one-by-one',
+            direction: 'row'
+        },
+        theme: {
+            underlayBackgroundColor: 'transparent'
+        }
     };
 };
 const measureTreeToColumns = (spec, context)=>{
@@ -4777,7 +4962,13 @@ const measureTreeToColumns = (spec, context)=>{
     const result = {
         ...spec
     };
-    const columns = treeTreeToColumns(measures);
+    const eachNode = (node)=>{
+        if ('children' in node) return {};
+        return {
+            width: 'auto'
+        };
+    };
+    const columns = treeTreeToColumns(measures, eachNode);
     return {
         ...result,
         columns: [
@@ -4792,7 +4983,13 @@ const dimensionTreeToColumns = (spec, context)=>{
     const result = {
         ...spec
     };
-    const columns = treeTreeToColumns(dimensions);
+    const eachNode = (node)=>{
+        if ('children' in node) return {};
+        return {
+            width: 'auto'
+        };
+    };
+    const columns = treeTreeToColumns(dimensions, eachNode);
     return {
         ...result,
         columns: [
@@ -4801,39 +4998,33 @@ const dimensionTreeToColumns = (spec, context)=>{
         ]
     };
 };
-const treeTreeToColumns = (tree = [])=>{
+const treeTreeToColumns = (tree, callback)=>{
     const result = tree.map((item)=>{
-        const field = item.id;
-        const title = item.alias ?? item.id;
-        if ('children' in item && Array.isArray(item.children)) return {
-            field,
-            title,
-            columns: treeTreeToColumns(item.children)
-        };
-        return {
-            field,
-            title
-        };
+        if ('children' in item && Array.isArray(item.children)) {
+            const groupNode = item;
+            const field = groupNode.id;
+            const title = groupNode.alias ?? groupNode.id;
+            const props = callback?.(groupNode) || {};
+            return {
+                field,
+                title,
+                columns: treeTreeToColumns(item.children, callback),
+                ...props
+            };
+        }
+        {
+            const field = item.id;
+            const title = item.alias ?? item.id;
+            const props = callback?.(item) || {};
+            return {
+                field,
+                title,
+                ...props
+            };
+        }
     });
     return result || [];
 };
-const tableSpecPipeline = [
-    initTable,
-    dimensionTreeToColumns,
-    measureTreeToColumns
-];
-const initPivotTable = (spec, context)=>{
-    const { advancedVSeed } = context;
-    const { dataset } = advancedVSeed;
-    return {
-        ...spec,
-        records: dataset,
-        widthMode: 'standard',
-        heightMode: 'autoHeight',
-        autoWrapText: true,
-        columnResizeMode: 'all'
-    };
-};
 const pivotColumns = (spec, context)=>{
     const { advancedVSeed } = context;
     const dimensions = advancedVSeed.dimensions;
@@ -4866,6 +5057,7 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
     return {
         ...spec,
         indicatorsAsCol: true,
+        indicatorTitle: intl.i18n`指标名称`,
         indicators: measures.map((item)=>({
                 cellType: 'text',
                 indicatorKey: item.id,
@@ -4874,11 +5066,255 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
             }))
     };
 };
+const external_d3_color_namespaceObject = require("d3-color");
+const bodyStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.bodyBackgroundColor || '#fff';
+    const fontColor = themConfig.bodyFontColor || '#1B1F23';
+    const fontSize = themConfig.bodyFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverBodyBackgroundColor || '#bedaff';
+    const hoverInlineColor = (0, external_d3_color_namespaceObject.color)(hoverCellBgColor)?.copy({
+        opacity: 0.2
+    }).toString();
+    result.theme.bodyStyle = {
+        borderColor: borderColor,
+        borderLineWidth: 1,
+        padding: [
+            8.6,
+            12,
+            8.6,
+            12
+        ],
+        textAlign: 'right',
+        hover: {
+            cellBgColor: hoverCellBgColor,
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        color: fontColor,
+        fontSize: fontSize,
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontVariant: 'normal',
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const headerStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.headerBackgroundColor || '#EEF1F5';
+    const fontColor = themConfig.headerFontColor || '#1B1F23';
+    const fontSize = themConfig.headerFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverHeaderBackgroundColor || '#bedaff';
+    const hoverInlineColor = themConfig.hoverHeaderBackgroundColor;
+    result.theme.headerStyle = {
+        borderColor: borderColor,
+        borderLineWidth: 1,
+        padding: [
+            8,
+            12,
+            8,
+            12
+        ],
+        textAlign: 'center',
+        hover: {
+            cellBgColor: (0, external_d3_color_namespaceObject.color)(hoverCellBgColor)?.copy({
+                opacity: 1
+            }).brighter(0.5).toString(),
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        frameStyle: {
+            borderColor: [
+                null,
+                null,
+                borderColor,
+                null
+            ],
+            borderLineWidth: 1
+        },
+        fontSize: fontSize,
+        fontVariant: 'normal',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: fontColor,
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const rowHeaderStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.headerBackgroundColor || '#EEF1F5';
+    const fontColor = themConfig.headerFontColor || '#1B1F23';
+    const fontSize = themConfig.headerFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverHeaderBackgroundColor || '#bedaff';
+    const hoverInlineColor = themConfig.hoverHeaderBackgroundColor;
+    result.theme.rowHeaderStyle = {
+        borderColor: borderColor,
+        borderLineWidth: 1,
+        padding: [
+            8.6,
+            12,
+            8.6,
+            12
+        ],
+        textAlign: 'left',
+        hover: {
+            cellBgColor: (0, external_d3_color_namespaceObject.color)(hoverCellBgColor)?.copy({
+                opacity: 1
+            }).brighter(0.5).toString(),
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        frameStyle: {
+            borderColor: [
+                null,
+                borderColor,
+                null,
+                null
+            ],
+            borderLineWidth: 1
+        },
+        fontSize: fontSize,
+        fontVariant: 'normal',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: fontColor,
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const cornerHeaderStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    const backgroundColor = themConfig.headerBackgroundColor || '#EEF1F5';
+    const fontColor = themConfig.headerFontColor || '#1B1F23';
+    const fontSize = themConfig.headerFontSize || 12;
+    const hoverCellBgColor = themConfig.hoverHeaderBackgroundColor || '#bedaff';
+    const hoverInlineColor = themConfig.hoverHeaderBackgroundColor;
+    result.theme.cornerHeaderStyle = {
+        borderColor: [
+            borderColor,
+            borderColor
+        ],
+        borderLineWidth: 1,
+        padding: [
+            8,
+            12,
+            8,
+            12
+        ],
+        textAlign: 'left',
+        hover: {
+            cellBgColor: (0, external_d3_color_namespaceObject.color)(hoverCellBgColor)?.copy({
+                opacity: 1
+            }).brighter(0.5).toString(),
+            inlineRowBgColor: hoverInlineColor,
+            inlineColumnBgColor: hoverInlineColor
+        },
+        frameStyle: {
+            borderColor: [
+                null,
+                borderColor,
+                borderColor,
+                null
+            ],
+            borderLineWidth: 1
+        },
+        fontSize: fontSize,
+        fontVariant: 'normal',
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color: fontColor,
+        bgColor: backgroundColor,
+        lineHeight: 1.5 * fontSize
+    };
+    return result;
+};
+const frameStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.borderColor || 'rgb(224, 224, 224)';
+    result.theme.frameStyle = {
+        borderColor,
+        borderLineWidth: 0,
+        cornerRadius: 4
+    };
+    return result;
+};
+const selectionStyle = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed } = context;
+    const { customTheme, chartType } = advancedVSeed;
+    const themConfig = customTheme?.config?.[chartType];
+    if (!result.theme || !themConfig) return result;
+    const borderColor = themConfig.selectedBorderColor || 'rgb(224, 224, 224)';
+    result.theme.selectionStyle = {
+        cellBorderColor: borderColor,
+        cellBorderLineWidth: 2,
+        cellBgColor: (0, external_d3_color_namespaceObject.color)(borderColor)?.copy({
+            opacity: 0.15
+        }).toString()
+    };
+    return result;
+};
+const tableSpecPipeline = [
+    initTable,
+    dimensionTreeToColumns,
+    measureTreeToColumns,
+    bodyStyle,
+    headerStyle,
+    frameStyle,
+    selectionStyle
+];
 const pivotTableSpecPipeline = [
     initPivotTable,
     pivotColumns,
     pivotRows,
-    pivotIndicators_pivotIndicators
+    pivotIndicators_pivotIndicators,
+    bodyStyle,
+    headerStyle,
+    rowHeaderStyle,
+    cornerHeaderStyle,
+    frameStyle,
+    selectionStyle
 ];
 const buildAdvanced = (builder)=>{
     const { chartType } = builder.vseed;
@@ -4931,6 +5367,16 @@ const getColorItems = (builder)=>{
         }), {});
     return colorItems.map((d)=>colorIdMap[d]);
 };
+const getColorIdMap = (builder)=>{
+    const advancedVSeed = builder.advancedVSeed;
+    if (!advancedVSeed) return {};
+    const { datasetReshapeInfo } = advancedVSeed;
+    const colorIdMap = datasetReshapeInfo.reduce((prev, cur)=>({
+            ...prev,
+            ...cur.unfoldInfo.colorIdMap
+        }), {});
+    return colorIdMap;
+};
 class Builder {
     _vseed;
     _advancedVSeed = null;
@@ -4947,6 +5393,7 @@ class Builder {
     getTheme = (themeKey)=>Builder._themeMap[themeKey];
     getThemeMap = ()=>Builder._themeMap;
     getColorItems = ()=>getColorItems(this);
+    getColorIdMap = ()=>getColorIdMap(this);
     get vseed() {
         return this._vseed;
     }
@@ -5176,8 +5623,22 @@ const lightTheme = ()=>{
             labelFontWeight: 400
         }
     };
+    const tableConfig = {
+        borderColor: '#e3e5eb',
+        bodyFontSize: 12,
+        bodyFontColor: '#141414',
+        bodyBackgroundColor: 'transparent',
+        headerFontSize: 12,
+        headerFontColor: '#21252c',
+        headerBackgroundColor: '#f6f7f9',
+        hoverBodyBackgroundColor: '#bedaff',
+        hoverHeaderBackgroundColor: '#D9DDE488',
+        selectedBorderColor: '#4080ff'
+    };
     return {
         config: {
+            table: tableConfig,
+            pivotTable: tableConfig,
             line: {
                 ...baseConfig,
                 xAxis: bandAxis,
@@ -5455,8 +5916,22 @@ const darkTheme = ()=>{
             labelFontWeight: 400
         }
     };
+    const tableConfig = {
+        borderColor: '#4b4e53',
+        bodyFontSize: 12,
+        bodyFontColor: '#fdfdfd',
+        bodyBackgroundColor: 'transparent',
+        headerFontSize: 12,
+        headerFontColor: '#fdfdfd',
+        headerBackgroundColor: '#36393e',
+        hoverBodyBackgroundColor: '#4284ff66',
+        hoverHeaderBackgroundColor: '#5f5f5f88',
+        selectedBorderColor: '#3073F2'
+    };
     return {
         config: {
+            table: tableConfig,
+            pivotTable: tableConfig,
             line: {
                 ...baseConfig,
                 xAxis: bandAxis,
@@ -5632,6 +6107,7 @@ const registerAll = ()=>{
     registerDarkTheme();
 };
 const external_zod_namespaceObject = require("zod");
+var external_zod_default = /*#__PURE__*/ __webpack_require__.n(external_zod_namespaceObject);
 const zChartType = external_zod_namespaceObject.z["enum"]([
     'table',
     'pivotTable',
@@ -5661,7 +6137,7 @@ const zDimension = external_zod_namespaceObject.z.object({
         'dimension',
         'rowDimension',
         'columnDimension'
-    ]).default('dimension').optional()
+    ]).default('dimension')
 });
 const zDimensionGroup = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
@@ -5705,8 +6181,8 @@ const zNumFormat = external_zod_namespaceObject.z.object({
 const zMeasure = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
     alias: external_zod_namespaceObject.z.string().optional(),
-    autoFormat: external_zod_namespaceObject.z.boolean().default(true).optional(),
-    format: zNumFormat["default"]({}).optional()
+    autoFormat: external_zod_namespaceObject.z.boolean().default(true),
+    format: zNumFormat["default"]({})
 });
 const zMeasureGroup = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
@@ -5914,6 +6390,19 @@ const zLegend = external_zod_namespaceObject.z.object({
 const zTooltip = external_zod_namespaceObject.z.object({
     enable: external_zod_namespaceObject.z.boolean().default(true).optional()
 });
+const zTableConfig = external_zod_namespaceObject.z.object({
+    borderColor: external_zod_namespaceObject.z.string().optional(),
+    bodyFontSize: external_zod_namespaceObject.z.number().optional(),
+    bodyFontColor: external_zod_namespaceObject.z.string().optional(),
+    bodyBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    hoverBodyBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    headerFontSize: external_zod_namespaceObject.z.number().optional(),
+    headerFontColor: external_zod_namespaceObject.z.string().optional(),
+    headerBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    hoverHeaderBackgroundColor: external_zod_namespaceObject.z.string().optional(),
+    selectedBorderColor: external_zod_namespaceObject.z.string().optional()
+});
+const zPivotTableConfig = zTableConfig;
 const zLineConfig = external_zod_namespaceObject.z.object({
     backgroundColor: zBackgroundColor.optional(),
     label: zLabel.optional(),
@@ -6002,8 +6491,8 @@ const zFunnelConfig = external_zod_namespaceObject.z.object({
     legend: zLegend.optional()
 });
 const zConfig = external_zod_namespaceObject.z.object({
-    table: external_zod_namespaceObject.z.object({}).optional(),
-    pivotTable: external_zod_namespaceObject.z.object({}).optional(),
+    table: zTableConfig.optional(),
+    pivotTable: zPivotTableConfig.optional(),
     line: zLineConfig.optional(),
     column: zColumnConfig.optional(),
     columnParallel: zColumnParallelConfig.optional(),
@@ -6375,6 +6864,25 @@ const zAnnotation = external_zod_namespaceObject.z.object({
     annotationHorizontalLine: zAnnotationHorizontalLine.or(external_zod_namespaceObject.z.array(zAnnotationHorizontalLine)).optional(),
     annotationArea: zAnnotationArea.or(external_zod_namespaceObject.z.array(zAnnotationArea)).optional()
 });
+const zSortAxis = external_zod_namespaceObject.z.object({
+    order: external_zod_namespaceObject.z["enum"]([
+        'asc',
+        'desc'
+    ]).default('asc'),
+    orderBy: external_zod_namespaceObject.z.string().optional(),
+    customOrder: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.any()).optional()
+});
+const zSortLegend = external_zod_namespaceObject.z.object({
+    order: external_zod_namespaceObject.z["enum"]([
+        'asc',
+        'desc'
+    ]).default('asc'),
+    orderBy: external_zod_namespaceObject.z.string().optional(),
+    customOrder: external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.any()).optional()
+});
+const zAnalysis = external_zod_default().object({
+    orderMapping: external_zod_default().record(external_zod_default().string(), external_zod_default().array(external_zod_default().string())).optional()
+});
 const zLocale = external_zod_namespaceObject.z["enum"]([
     'zh-CN',
     'en-US'
@@ -6410,6 +6918,8 @@ const zLine = external_zod_namespaceObject.z.object({
     xAxis: zXBandAxis.optional(),
     yAxis: zYLinearAxis.optional(),
     crosshairLine: zCrosshairLine.optional(),
+    sortAxis: zSortAxis.optional(),
+    sortLegend: zSortLegend.optional(),
     theme: zTheme.optional(),
     pointStyle: zPointStyle.optional(),
     lineStyle: zLineStyle.optional(),
@@ -6710,6 +7220,7 @@ const zAdvancedVSeed = external_zod_namespaceObject.z.object({
     measures: zMeasureTree,
     encoding: zEncoding,
     config: zConfig,
+    analysis: zAnalysis,
     theme: zTheme,
     markStyle: zMarkStyle,
     customTheme: zCustomThemeConfig,
@@ -6806,6 +7317,7 @@ exports.tableAdvancedPipeline = __webpack_exports__.tableAdvancedPipeline;
 exports.tableSpecPipeline = __webpack_exports__.tableSpecPipeline;
 exports.unfoldDimensions = __webpack_exports__.unfoldDimensions;
 exports.zAdvancedVSeed = __webpack_exports__.zAdvancedVSeed;
+exports.zAnalysis = __webpack_exports__.zAnalysis;
 exports.zAnnotation = __webpack_exports__.zAnnotation;
 exports.zAnnotationArea = __webpack_exports__.zAnnotationArea;
 exports.zAnnotationHorizontalLine = __webpack_exports__.zAnnotationHorizontalLine;
@@ -6867,6 +7379,7 @@ exports.zNumFormat = __webpack_exports__.zNumFormat;
 exports.zPie = __webpack_exports__.zPie;
 exports.zPieConfig = __webpack_exports__.zPieConfig;
 exports.zPivotTable = __webpack_exports__.zPivotTable;
+exports.zPivotTableConfig = __webpack_exports__.zPivotTableConfig;
 exports.zPointStyle = __webpack_exports__.zPointStyle;
 exports.zRose = __webpack_exports__.zRose;
 exports.zRoseConfig = __webpack_exports__.zRoseConfig;
@@ -6874,8 +7387,11 @@ exports.zRoseParallel = __webpack_exports__.zRoseParallel;
 exports.zRoseParallelConfig = __webpack_exports__.zRoseParallelConfig;
 exports.zScatter = __webpack_exports__.zScatter;
 exports.zScatterConfig = __webpack_exports__.zScatterConfig;
+exports.zSortAxis = __webpack_exports__.zSortAxis;
+exports.zSortLegend = __webpack_exports__.zSortLegend;
 exports.zStackCornerRadius = __webpack_exports__.zStackCornerRadius;
 exports.zTable = __webpack_exports__.zTable;
+exports.zTableConfig = __webpack_exports__.zTableConfig;
 exports.zTheme = __webpack_exports__.zTheme;
 exports.zTooltip = __webpack_exports__.zTooltip;
 exports.zUnfoldInfo = __webpack_exports__.zUnfoldInfo;
@@ -6975,6 +7491,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "tableSpecPipeline",
     "unfoldDimensions",
     "zAdvancedVSeed",
+    "zAnalysis",
     "zAnnotation",
     "zAnnotationArea",
     "zAnnotationHorizontalLine",
@@ -7036,6 +7553,7 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zPie",
     "zPieConfig",
     "zPivotTable",
+    "zPivotTableConfig",
     "zPointStyle",
     "zRose",
     "zRoseConfig",
@@ -7043,8 +7561,11 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zRoseParallelConfig",
     "zScatter",
     "zScatterConfig",
+    "zSortAxis",
+    "zSortLegend",
     "zStackCornerRadius",
     "zTable",
+    "zTableConfig",
     "zTheme",
     "zTooltip",
     "zUnfoldInfo",