@visactor/vseed 0.0.20 → 0.0.22

package/dist/index.js

@@ -1,5 +1,6 @@
-import { clone, groupBy, isArray, isEmpty, isNullish, isNumber, isString, mergeDeep, omit, pick, unique } from "remeda";
-import { z } from "zod";
+import { clone, groupBy, isArray, isEmpty, isNullish, isNumber, isString, mergeDeep, omit, pick, sort, unique } from "remeda";
+import { color as external_d3_color_color } from "d3-color";
+import zod, { z } from "zod";
 const initAdvancedVSeed = (advancedVSeed, context)=>{
     const { vseed } = context;
     const { chartType, locale } = vseed;
@@ -61,7 +62,6 @@ const createNumFormatter = (format, locale = intl.getLocale())=>{
         roundingMode,
         roundingPriority
     };
-    console.log('debug roundingMode', roundingMode);
     if (isNumber(fractionDigits)) {
         if (fractionDigits >= 0) {
             numFormatterOptions.minimumFractionDigits = fractionDigits;
@@ -752,11 +752,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
@@ -788,11 +789,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
@@ -860,6 +862,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)=>{
@@ -868,13 +871,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,
@@ -1094,6 +1097,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 = 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 unique(res.map((item)=>item[id]));
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
     autoMeasures,
@@ -1104,6 +1182,8 @@ const lineAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     lineConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1119,6 +1199,8 @@ const barAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    sortYBandAxis,
+    sort_sortLegend,
     barConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1134,6 +1216,8 @@ const barParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    sortYBandAxis,
+    sort_sortLegend,
     barParallelConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1149,6 +1233,8 @@ const barPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingYX,
+    sortYBandAxis,
+    sort_sortLegend,
     barPercentConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1164,6 +1250,8 @@ const columnAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     columnConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1179,6 +1267,8 @@ const columnParallelAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     columnParallelConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1194,6 +1284,8 @@ const columnPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     columnPercentConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1209,6 +1301,8 @@ const areaAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     areaConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1224,6 +1318,8 @@ const areaPercentAdvancedPipeline = [
         pivotReshapeTo2D1M
     ]),
     encodingXY,
+    sortXBandAxis,
+    sort_sortLegend,
     areaPercentConfig,
     theme_theme,
     markStyle_markStyle,
@@ -1470,23 +1566,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
         }
@@ -1508,12 +1635,6 @@ const datasetPivot = (spec, context)=>{
         records: records
     };
 };
-const datasetPivotPlaceholder = (spec)=>({
-        ...spec,
-        data: {
-            id: 'placeholderDataId'
-        }
-    });
 const initColumn = (spec, context)=>{
     const result = {
         ...spec
@@ -2542,7 +2663,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',
@@ -3903,7 +4024,7 @@ const pivotLine = [
         initLine,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -3954,7 +4075,7 @@ const pivotColumn = [
         stackInverse,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4001,7 +4122,7 @@ const pivotColumnParallel = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4052,7 +4173,7 @@ const pivotColumnPercent = [
         color_color,
         percent,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4099,7 +4220,8 @@ const pivotBar = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
+        xLinear,
         yBand,
         label_label,
         label_label,
@@ -4146,9 +4268,9 @@ const pivotBarParallel = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
-        yBand,
+        dataset_dataset,
         xLinear,
+        yBand,
         label_label,
         tooltip_tooltip,
         horizontalCrosshairRect,
@@ -4195,7 +4317,7 @@ const pivotBarPercent = [
         color_color,
         background_backgroundColor,
         percent,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         yBand,
         xLinear,
         label_label,
@@ -4245,7 +4367,7 @@ const pivotArea = [
         color_color,
         background_backgroundColor,
         stackInverse,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4299,7 +4421,7 @@ const pivotAreaPercent = [
         color_color,
         background_backgroundColor,
         percent,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xBand,
         yLinear,
         label_label,
@@ -4342,7 +4464,7 @@ const pivotPie = [
         initPie,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -4379,7 +4501,7 @@ const pivotDonut = [
         initDonut,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -4419,7 +4541,7 @@ const pivotRose = [
         stackInverse,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         radiusAxis,
         angleAxis,
         label_label,
@@ -4460,7 +4582,7 @@ const pivotRoseParallel = [
         stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         radiusAxis,
         angleAxis,
         label_label,
@@ -4500,7 +4622,7 @@ const pivotFunnel = [
         initFunnel,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         label_label,
         tooltip_tooltip,
         annotationPoint_annotationPoint,
@@ -4543,7 +4665,7 @@ const pivotScatter = [
         initScatter,
         color_color,
         background_backgroundColor,
-        datasetPivotPlaceholder,
+        dataset_dataset,
         xLinear,
         yLinear,
         label_label,
@@ -4574,7 +4696,22 @@ 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)=>{
@@ -4586,7 +4723,30 @@ const initPivotTable = (spec, context)=>{
         widthMode: 'standard',
         heightMode: 'autoHeight',
         autoWrapText: true,
-        columnResizeMode: 'all'
+        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)=>{
@@ -4595,7 +4755,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: [
@@ -4610,7 +4776,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: [
@@ -4619,19 +4791,30 @@ 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 || [];
 };
@@ -4667,6 +4850,7 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
     return {
         ...spec,
         indicatorsAsCol: true,
+        indicatorTitle: intl.i18n`指标名称`,
         indicators: measures.map((item)=>({
                 cellType: 'text',
                 indicatorKey: item.id,
@@ -4675,16 +4859,254 @@ const pivotIndicators_pivotIndicators = (spec, context)=>{
             }))
     };
 };
+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 = external_d3_color_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: external_d3_color_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: external_d3_color_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: external_d3_color_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: external_d3_color_color(borderColor)?.copy({
+            opacity: 0.15
+        }).toString()
+    };
+    return result;
+};
 const tableSpecPipeline = [
     initTable,
     dimensionTreeToColumns,
-    measureTreeToColumns
+    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;
@@ -4737,6 +5159,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;
@@ -4753,6 +5185,7 @@ class Builder {
     getTheme = (themeKey)=>Builder._themeMap[themeKey];
     getThemeMap = ()=>Builder._themeMap;
     getColorItems = ()=>getColorItems(this);
+    getColorIdMap = ()=>getColorIdMap(this);
     get vseed() {
         return this._vseed;
     }
@@ -4981,8 +5414,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,
@@ -5261,8 +5708,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,
@@ -5466,7 +5927,7 @@ const zDimension = z.object({
         'dimension',
         'rowDimension',
         'columnDimension'
-    ]).default('dimension').optional()
+    ]).default('dimension')
 });
 const zDimensionGroup = z.object({
     id: z.string(),
@@ -5510,8 +5971,8 @@ const zNumFormat = z.object({
 const zMeasure = z.object({
     id: z.string(),
     alias: z.string().optional(),
-    autoFormat: z.boolean().default(true).optional(),
-    format: zNumFormat["default"]({}).optional()
+    autoFormat: z.boolean().default(true),
+    format: zNumFormat["default"]({})
 });
 const zMeasureGroup = z.object({
     id: z.string(),
@@ -5719,6 +6180,19 @@ const zLegend = z.object({
 const zTooltip = z.object({
     enable: z.boolean().default(true).optional()
 });
+const zTableConfig = z.object({
+    borderColor: z.string().optional(),
+    bodyFontSize: z.number().optional(),
+    bodyFontColor: z.string().optional(),
+    bodyBackgroundColor: z.string().optional(),
+    hoverBodyBackgroundColor: z.string().optional(),
+    headerFontSize: z.number().optional(),
+    headerFontColor: z.string().optional(),
+    headerBackgroundColor: z.string().optional(),
+    hoverHeaderBackgroundColor: z.string().optional(),
+    selectedBorderColor: z.string().optional()
+});
+const zPivotTableConfig = zTableConfig;
 const zLineConfig = z.object({
     backgroundColor: zBackgroundColor.optional(),
     label: zLabel.optional(),
@@ -5807,8 +6281,8 @@ const zFunnelConfig = z.object({
     legend: zLegend.optional()
 });
 const zConfig = z.object({
-    table: z.object({}).optional(),
-    pivotTable: z.object({}).optional(),
+    table: zTableConfig.optional(),
+    pivotTable: zPivotTableConfig.optional(),
     line: zLineConfig.optional(),
     column: zColumnConfig.optional(),
     columnParallel: zColumnParallelConfig.optional(),
@@ -6180,6 +6654,25 @@ const zAnnotation = z.object({
     annotationHorizontalLine: zAnnotationHorizontalLine.or(z.array(zAnnotationHorizontalLine)).optional(),
     annotationArea: zAnnotationArea.or(z.array(zAnnotationArea)).optional()
 });
+const zSortAxis = z.object({
+    order: z["enum"]([
+        'asc',
+        'desc'
+    ]).default('asc'),
+    orderBy: z.string().optional(),
+    customOrder: z.array(z.any()).optional()
+});
+const zSortLegend = z.object({
+    order: z["enum"]([
+        'asc',
+        'desc'
+    ]).default('asc'),
+    orderBy: z.string().optional(),
+    customOrder: z.array(z.any()).optional()
+});
+const zAnalysis = zod.object({
+    orderMapping: zod.record(zod.string(), zod.array(zod.string())).optional()
+});
 const zLocale = z["enum"]([
     'zh-CN',
     'en-US'
@@ -6215,6 +6708,8 @@ const zLine = 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(),
@@ -6515,12 +7010,13 @@ const zAdvancedVSeed = z.object({
     measures: zMeasureTree,
     encoding: zEncoding,
     config: zConfig,
+    analysis: zAnalysis,
     theme: zTheme,
     markStyle: zMarkStyle,
     customTheme: zCustomThemeConfig,
     annotation: zAnnotation,
     locale: zLocale
 });
-export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, UnfoldDimensionGroupId, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeFor1D1M, dataReshapeFor1D2M, dataReshapeFor2D1M, donutAdvancedPipeline, donutSpecPipeline, execPipeline, findAllDimensions, findAllMeasures, findDimensionById, findFirstDimension, findFirstMeasure, findMeasureById, foldMeasures, funnelAdvancedPipeline, funnelSpecPipeline, i18n, intl, isPivotChart, isPivotTable, isTable, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, pivotTableAdvancedPipeline, pivotTableSpecPipeline, preorderTraverse, registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerDonut, registerFunnel, registerLightTheme, registerLine, registerPie, registerPivotTable, registerRose, registerRoseParallel, registerScatter, registerTable, roseAdvancedPipeline, roseParallelAdvancedPipeline, roseParallelSpecPipeline, roseSpecPipeline, scatterAdvancedPipeline, scatterSpecPipeline, tableAdvancedPipeline, tableSpecPipeline, unfoldDimensions, zAdvancedVSeed, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zArea, zAreaConfig, zAreaPercent, zAreaPercentConfig, zAreaStyle, zAxis, zBackgroundColor, zBar, zBarConfig, zBarParallel, zBarParallelConfig, zBarPercent, zBarPercentConfig, zBarStyle, zChartType, zColor, zColumn, zColumnConfig, zColumnParallel, zColumnParallelConfig, zColumnPercent, zColumnPercentConfig, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensionGroup, zDimensionTree, zDimensions, zDonut, zDonutConfig, zDualAxisConfig, zEncoding, zFoldInfo, zFunnel, zFunnelConfig, zLabel, zLegend, zLine, zLineConfig, zLineStyle, zLocale, zMarkStyle, zMeasure, zMeasureGroup, zMeasureTree, zMeasures, zNumFormat, zPie, zPieConfig, zPivotTable, zPointStyle, zRose, zRoseConfig, zRoseParallel, zRoseParallelConfig, zScatter, zScatterConfig, zStackCornerRadius, zTable, zTheme, zTooltip, zUnfoldInfo, zVSeed, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
+export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, UnfoldDimensionGroupId, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeFor1D1M, dataReshapeFor1D2M, dataReshapeFor2D1M, donutAdvancedPipeline, donutSpecPipeline, execPipeline, findAllDimensions, findAllMeasures, findDimensionById, findFirstDimension, findFirstMeasure, findMeasureById, foldMeasures, funnelAdvancedPipeline, funnelSpecPipeline, i18n, intl, isPivotChart, isPivotTable, isTable, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, pivotTableAdvancedPipeline, pivotTableSpecPipeline, preorderTraverse, registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerDonut, registerFunnel, registerLightTheme, registerLine, registerPie, registerPivotTable, registerRose, registerRoseParallel, registerScatter, registerTable, roseAdvancedPipeline, roseParallelAdvancedPipeline, roseParallelSpecPipeline, roseSpecPipeline, scatterAdvancedPipeline, scatterSpecPipeline, tableAdvancedPipeline, tableSpecPipeline, unfoldDimensions, zAdvancedVSeed, zAnalysis, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zArea, zAreaConfig, zAreaPercent, zAreaPercentConfig, zAreaStyle, zAxis, zBackgroundColor, zBar, zBarConfig, zBarParallel, zBarParallelConfig, zBarPercent, zBarPercentConfig, zBarStyle, zChartType, zColor, zColumn, zColumnConfig, zColumnParallel, zColumnParallelConfig, zColumnPercent, zColumnPercentConfig, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensionGroup, zDimensionTree, zDimensions, zDonut, zDonutConfig, zDualAxisConfig, zEncoding, zFoldInfo, zFunnel, zFunnelConfig, zLabel, zLegend, zLine, zLineConfig, zLineStyle, zLocale, zMarkStyle, zMeasure, zMeasureGroup, zMeasureTree, zMeasures, zNumFormat, zPie, zPieConfig, zPivotTable, zPivotTableConfig, zPointStyle, zRose, zRoseConfig, zRoseParallel, zRoseParallelConfig, zScatter, zScatterConfig, zSortAxis, zSortLegend, zStackCornerRadius, zTable, zTableConfig, zTheme, zTooltip, zUnfoldInfo, zVSeed, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map