@visactor/vseed 0.0.20 → 0.0.21

package/dist/umd/index.js

@@ -73,6 +73,7 @@
             barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
             findAllDimensions: ()=>findAllDimensions,
             findDimensionById: ()=>findDimensionById,
+            zPivotTableConfig: ()=>zPivotTableConfig,
             zArea: ()=>zArea,
             zColumnParallel: ()=>zColumnParallel,
             zDimensions: ()=>zDimensions,
@@ -152,6 +153,7 @@
             zColumn: ()=>zColumn,
             zCustomTheme: ()=>zCustomTheme,
             zLineConfig: ()=>zLineConfig,
+            zTableConfig: ()=>zTableConfig,
             zXBandAxis: ()=>zXBandAxis,
             zColumnPercentConfig: ()=>zColumnPercentConfig,
             findMeasureById: ()=>findMeasureById,
@@ -4972,7 +4974,54 @@
                 heightMode: 'autoHeight',
                 autoWrapText: true,
                 columnResizeMode: 'all',
-                showHeader: true
+                showHeader: true,
+                tooltip: {
+                    isShowOverflowTextTooltip: true
+                },
+                animationAppear: {
+                    duration: 300,
+                    delay: 250,
+                    type: 'one-by-one',
+                    direction: '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)=>{
@@ -4981,7 +5030,13 @@
             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: [
@@ -4996,7 +5051,13 @@
             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: [
@@ -5005,39 +5066,33 @@
                 ]
             };
         };
-        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;
@@ -5070,6 +5125,7 @@
             return {
                 ...spec,
                 indicatorsAsCol: true,
+                indicatorTitle: intl.i18n`指标名称`,
                 indicators: measures.map((item)=>({
                         cellType: 'text',
                         indicatorKey: item.id,
@@ -5078,11 +5134,577 @@
                     }))
             };
         };
+        function src_define(constructor, factory, prototype) {
+            constructor.prototype = factory.prototype = prototype;
+            prototype.constructor = constructor;
+        }
+        function extend(parent, definition) {
+            var prototype = Object.create(parent.prototype);
+            for(var key in definition)prototype[key] = definition[key];
+            return prototype;
+        }
+        function Color() {}
+        var darker = 0.7;
+        var brighter = 1 / darker;
+        var reI = "\\s*([+-]?\\d+)\\s*", reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*", reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*", reHex = /^#([0-9a-f]{3,8})$/, reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`), reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`), reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`), reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`), reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`), reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
+        var named = {
+            aliceblue: 0xf0f8ff,
+            antiquewhite: 0xfaebd7,
+            aqua: 0x00ffff,
+            aquamarine: 0x7fffd4,
+            azure: 0xf0ffff,
+            beige: 0xf5f5dc,
+            bisque: 0xffe4c4,
+            black: 0x000000,
+            blanchedalmond: 0xffebcd,
+            blue: 0x0000ff,
+            blueviolet: 0x8a2be2,
+            brown: 0xa52a2a,
+            burlywood: 0xdeb887,
+            cadetblue: 0x5f9ea0,
+            chartreuse: 0x7fff00,
+            chocolate: 0xd2691e,
+            coral: 0xff7f50,
+            cornflowerblue: 0x6495ed,
+            cornsilk: 0xfff8dc,
+            crimson: 0xdc143c,
+            cyan: 0x00ffff,
+            darkblue: 0x00008b,
+            darkcyan: 0x008b8b,
+            darkgoldenrod: 0xb8860b,
+            darkgray: 0xa9a9a9,
+            darkgreen: 0x006400,
+            darkgrey: 0xa9a9a9,
+            darkkhaki: 0xbdb76b,
+            darkmagenta: 0x8b008b,
+            darkolivegreen: 0x556b2f,
+            darkorange: 0xff8c00,
+            darkorchid: 0x9932cc,
+            darkred: 0x8b0000,
+            darksalmon: 0xe9967a,
+            darkseagreen: 0x8fbc8f,
+            darkslateblue: 0x483d8b,
+            darkslategray: 0x2f4f4f,
+            darkslategrey: 0x2f4f4f,
+            darkturquoise: 0x00ced1,
+            darkviolet: 0x9400d3,
+            deeppink: 0xff1493,
+            deepskyblue: 0x00bfff,
+            dimgray: 0x696969,
+            dimgrey: 0x696969,
+            dodgerblue: 0x1e90ff,
+            firebrick: 0xb22222,
+            floralwhite: 0xfffaf0,
+            forestgreen: 0x228b22,
+            fuchsia: 0xff00ff,
+            gainsboro: 0xdcdcdc,
+            ghostwhite: 0xf8f8ff,
+            gold: 0xffd700,
+            goldenrod: 0xdaa520,
+            gray: 0x808080,
+            green: 0x008000,
+            greenyellow: 0xadff2f,
+            grey: 0x808080,
+            honeydew: 0xf0fff0,
+            hotpink: 0xff69b4,
+            indianred: 0xcd5c5c,
+            indigo: 0x4b0082,
+            ivory: 0xfffff0,
+            khaki: 0xf0e68c,
+            lavender: 0xe6e6fa,
+            lavenderblush: 0xfff0f5,
+            lawngreen: 0x7cfc00,
+            lemonchiffon: 0xfffacd,
+            lightblue: 0xadd8e6,
+            lightcoral: 0xf08080,
+            lightcyan: 0xe0ffff,
+            lightgoldenrodyellow: 0xfafad2,
+            lightgray: 0xd3d3d3,
+            lightgreen: 0x90ee90,
+            lightgrey: 0xd3d3d3,
+            lightpink: 0xffb6c1,
+            lightsalmon: 0xffa07a,
+            lightseagreen: 0x20b2aa,
+            lightskyblue: 0x87cefa,
+            lightslategray: 0x778899,
+            lightslategrey: 0x778899,
+            lightsteelblue: 0xb0c4de,
+            lightyellow: 0xffffe0,
+            lime: 0x00ff00,
+            limegreen: 0x32cd32,
+            linen: 0xfaf0e6,
+            magenta: 0xff00ff,
+            maroon: 0x800000,
+            mediumaquamarine: 0x66cdaa,
+            mediumblue: 0x0000cd,
+            mediumorchid: 0xba55d3,
+            mediumpurple: 0x9370db,
+            mediumseagreen: 0x3cb371,
+            mediumslateblue: 0x7b68ee,
+            mediumspringgreen: 0x00fa9a,
+            mediumturquoise: 0x48d1cc,
+            mediumvioletred: 0xc71585,
+            midnightblue: 0x191970,
+            mintcream: 0xf5fffa,
+            mistyrose: 0xffe4e1,
+            moccasin: 0xffe4b5,
+            navajowhite: 0xffdead,
+            navy: 0x000080,
+            oldlace: 0xfdf5e6,
+            olive: 0x808000,
+            olivedrab: 0x6b8e23,
+            orange: 0xffa500,
+            orangered: 0xff4500,
+            orchid: 0xda70d6,
+            palegoldenrod: 0xeee8aa,
+            palegreen: 0x98fb98,
+            paleturquoise: 0xafeeee,
+            palevioletred: 0xdb7093,
+            papayawhip: 0xffefd5,
+            peachpuff: 0xffdab9,
+            peru: 0xcd853f,
+            pink: 0xffc0cb,
+            plum: 0xdda0dd,
+            powderblue: 0xb0e0e6,
+            purple: 0x800080,
+            rebeccapurple: 0x663399,
+            red: 0xff0000,
+            rosybrown: 0xbc8f8f,
+            royalblue: 0x4169e1,
+            saddlebrown: 0x8b4513,
+            salmon: 0xfa8072,
+            sandybrown: 0xf4a460,
+            seagreen: 0x2e8b57,
+            seashell: 0xfff5ee,
+            sienna: 0xa0522d,
+            silver: 0xc0c0c0,
+            skyblue: 0x87ceeb,
+            slateblue: 0x6a5acd,
+            slategray: 0x708090,
+            slategrey: 0x708090,
+            snow: 0xfffafa,
+            springgreen: 0x00ff7f,
+            steelblue: 0x4682b4,
+            tan: 0xd2b48c,
+            teal: 0x008080,
+            thistle: 0xd8bfd8,
+            tomato: 0xff6347,
+            turquoise: 0x40e0d0,
+            violet: 0xee82ee,
+            wheat: 0xf5deb3,
+            white: 0xffffff,
+            whitesmoke: 0xf5f5f5,
+            yellow: 0xffff00,
+            yellowgreen: 0x9acd32
+        };
+        src_define(Color, src_color_color, {
+            copy (channels) {
+                return Object.assign(new this.constructor, this, channels);
+            },
+            displayable () {
+                return this.rgb().displayable();
+            },
+            hex: color_formatHex,
+            formatHex: color_formatHex,
+            formatHex8: color_formatHex8,
+            formatHsl: color_formatHsl,
+            formatRgb: color_formatRgb,
+            toString: color_formatRgb
+        });
+        function color_formatHex() {
+            return this.rgb().formatHex();
+        }
+        function color_formatHex8() {
+            return this.rgb().formatHex8();
+        }
+        function color_formatHsl() {
+            return hslConvert(this).formatHsl();
+        }
+        function color_formatRgb() {
+            return this.rgb().formatRgb();
+        }
+        function src_color_color(format) {
+            var m, l;
+            format = (format + "").trim().toLowerCase();
+            return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), 6 === l ? rgbn(m) : 3 === l ? new Rgb(m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | 0xf0 & m, (0xf & m) << 4 | 0xf & m, 1) : 8 === l ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (0xff & m) / 0xff) : 4 === l ? rgba(m >> 12 & 0xf | m >> 8 & 0xf0, m >> 8 & 0xf | m >> 4 & 0xf0, m >> 4 & 0xf | 0xf0 & m, ((0xf & m) << 4 | 0xf & m) / 0xff) : null) : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) : (m = reRgbPercent.exec(format)) ? new Rgb(255 * m[1] / 100, 255 * m[2] / 100, 255 * m[3] / 100, 1) : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) : (m = reRgbaPercent.exec(format)) ? rgba(255 * m[1] / 100, 255 * m[2] / 100, 255 * m[3] / 100, m[4]) : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) : named.hasOwnProperty(format) ? rgbn(named[format]) : "transparent" === format ? new Rgb(NaN, NaN, NaN, 0) : null;
+        }
+        function rgbn(n) {
+            return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, 0xff & n, 1);
+        }
+        function rgba(r, g, b, a) {
+            if (a <= 0) r = g = b = NaN;
+            return new Rgb(r, g, b, a);
+        }
+        function rgbConvert(o) {
+            if (!(o instanceof Color)) o = src_color_color(o);
+            if (!o) return new Rgb;
+            o = o.rgb();
+            return new Rgb(o.r, o.g, o.b, o.opacity);
+        }
+        function rgb(r, g, b, opacity) {
+            return 1 === arguments.length ? rgbConvert(r) : new Rgb(r, g, b, null == opacity ? 1 : opacity);
+        }
+        function Rgb(r, g, b, opacity) {
+            this.r = +r;
+            this.g = +g;
+            this.b = +b;
+            this.opacity = +opacity;
+        }
+        src_define(Rgb, rgb, extend(Color, {
+            brighter (k) {
+                k = null == k ? brighter : Math.pow(brighter, k);
+                return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+            },
+            darker (k) {
+                k = null == k ? darker : Math.pow(darker, k);
+                return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+            },
+            rgb () {
+                return this;
+            },
+            clamp () {
+                return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+            },
+            displayable () {
+                return -0.5 <= this.r && this.r < 255.5 && -0.5 <= this.g && this.g < 255.5 && -0.5 <= this.b && this.b < 255.5 && 0 <= this.opacity && this.opacity <= 1;
+            },
+            hex: rgb_formatHex,
+            formatHex: rgb_formatHex,
+            formatHex8: rgb_formatHex8,
+            formatRgb: rgb_formatRgb,
+            toString: rgb_formatRgb
+        }));
+        function rgb_formatHex() {
+            return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+        }
+        function rgb_formatHex8() {
+            return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
+        }
+        function rgb_formatRgb() {
+            const a = clampa(this.opacity);
+            return `${1 === a ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${1 === a ? ")" : `, ${a})`}`;
+        }
+        function clampa(opacity) {
+            return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+        }
+        function clampi(value) {
+            return Math.max(0, Math.min(255, Math.round(value) || 0));
+        }
+        function hex(value) {
+            value = clampi(value);
+            return (value < 16 ? "0" : "") + value.toString(16);
+        }
+        function hsla(h, s, l, a) {
+            if (a <= 0) h = s = l = NaN;
+            else if (l <= 0 || l >= 1) h = s = NaN;
+            else if (s <= 0) h = NaN;
+            return new Hsl(h, s, l, a);
+        }
+        function hslConvert(o) {
+            if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+            if (!(o instanceof Color)) o = src_color_color(o);
+            if (!o) return new Hsl;
+            if (o instanceof Hsl) return o;
+            o = o.rgb();
+            var r = o.r / 255, g = o.g / 255, b = o.b / 255, min = Math.min(r, g, b), max = Math.max(r, g, b), h = NaN, s = max - min, l = (max + min) / 2;
+            if (s) {
+                h = r === max ? (g - b) / s + (g < b) * 6 : g === max ? (b - r) / s + 2 : (r - g) / s + 4;
+                s /= l < 0.5 ? max + min : 2 - max - min;
+                h *= 60;
+            } else s = l > 0 && l < 1 ? 0 : h;
+            return new Hsl(h, s, l, o.opacity);
+        }
+        function hsl(h, s, l, opacity) {
+            return 1 === arguments.length ? hslConvert(h) : new Hsl(h, s, l, null == opacity ? 1 : opacity);
+        }
+        function Hsl(h, s, l, opacity) {
+            this.h = +h;
+            this.s = +s;
+            this.l = +l;
+            this.opacity = +opacity;
+        }
+        src_define(Hsl, hsl, extend(Color, {
+            brighter (k) {
+                k = null == k ? brighter : Math.pow(brighter, k);
+                return new Hsl(this.h, this.s, this.l * k, this.opacity);
+            },
+            darker (k) {
+                k = null == k ? darker : Math.pow(darker, k);
+                return new Hsl(this.h, this.s, this.l * k, this.opacity);
+            },
+            rgb () {
+                var h = this.h % 360 + (this.h < 0) * 360, s = isNaN(h) || isNaN(this.s) ? 0 : this.s, l = this.l, m2 = l + (l < 0.5 ? l : 1 - l) * s, m1 = 2 * l - m2;
+                return new Rgb(hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2), hsl2rgb(h, m1, m2), hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2), this.opacity);
+            },
+            clamp () {
+                return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+            },
+            displayable () {
+                return (0 <= this.s && this.s <= 1 || isNaN(this.s)) && 0 <= this.l && this.l <= 1 && 0 <= this.opacity && this.opacity <= 1;
+            },
+            formatHsl () {
+                const a = clampa(this.opacity);
+                return `${1 === a ? "hsl(" : "hsla("}${clamph(this.h)}, ${100 * clampt(this.s)}%, ${100 * clampt(this.l)}%${1 === a ? ")" : `, ${a})`}`;
+            }
+        }));
+        function clamph(value) {
+            value = (value || 0) % 360;
+            return value < 0 ? value + 360 : value;
+        }
+        function clampt(value) {
+            return Math.max(0, Math.min(1, value || 0));
+        }
+        function hsl2rgb(h, m1, m2) {
+            return (h < 60 ? m1 + (m2 - m1) * h / 60 : h < 180 ? m2 : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60 : m1) * 255;
+        }
+        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 = src_color_color(hoverCellBgColor)?.copy({
+                opacity: 0.1
+            }).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: src_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: src_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: src_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: 0
+            };
+            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: src_color_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;
@@ -5380,8 +6002,22 @@
                     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,
@@ -5659,8 +6295,22 @@
                     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,
@@ -6154,7 +6804,7 @@
             });
             return clone(schema, def);
         }
-        function extend(schema, shape) {
+        function util_extend(schema, shape) {
             if (!isPlainObject(shape)) throw new Error("Invalid input to extend: expected a plain object");
             const def = mergeDefs(schema._zod.def, {
                 get shape () {
@@ -8847,7 +9497,7 @@
                     ...inst._zod.def,
                     catchall: void 0
                 });
-            inst.extend = (incoming)=>extend(inst, incoming);
+            inst.extend = (incoming)=>util_extend(inst, incoming);
             inst.merge = (other)=>merge(inst, other);
             inst.pick = (mask)=>pick(inst, mask);
             inst.omit = (mask)=>omit(inst, mask);
@@ -9147,7 +9797,7 @@
                 'dimension',
                 'rowDimension',
                 'columnDimension'
-            ]).default('dimension').optional()
+            ]).default('dimension')
         });
         const zDimensionGroup = schemas_object({
             id: schemas_string(),
@@ -9191,8 +9841,8 @@
         const zMeasure = schemas_object({
             id: schemas_string(),
             alias: schemas_string().optional(),
-            autoFormat: schemas_boolean().default(true).optional(),
-            format: zNumFormat["default"]({}).optional()
+            autoFormat: schemas_boolean().default(true),
+            format: zNumFormat["default"]({})
         });
         const zMeasureGroup = schemas_object({
             id: schemas_string(),
@@ -9400,6 +10050,19 @@
         const zTooltip = schemas_object({
             enable: schemas_boolean().default(true).optional()
         });
+        const zTableConfig = schemas_object({
+            borderColor: schemas_string().optional(),
+            bodyFontSize: schemas_number().optional(),
+            bodyFontColor: schemas_string().optional(),
+            bodyBackgroundColor: schemas_string().optional(),
+            hoverBodyBackgroundColor: schemas_string().optional(),
+            headerFontSize: schemas_number().optional(),
+            headerFontColor: schemas_string().optional(),
+            headerBackgroundColor: schemas_string().optional(),
+            hoverHeaderBackgroundColor: schemas_string().optional(),
+            selectedBorderColor: schemas_string().optional()
+        });
+        const zPivotTableConfig = zTableConfig;
         const zLineConfig = schemas_object({
             backgroundColor: zBackgroundColor.optional(),
             label: zLabel.optional(),
@@ -9488,8 +10151,8 @@
             legend: zLegend.optional()
         });
         const zConfig = schemas_object({
-            table: schemas_object({}).optional(),
-            pivotTable: schemas_object({}).optional(),
+            table: zTableConfig.optional(),
+            pivotTable: zPivotTableConfig.optional(),
             line: zLineConfig.optional(),
             column: zColumnConfig.optional(),
             columnParallel: zColumnParallelConfig.optional(),