npm - @visactor/vseed - Versions diffs - 0.1.43 → 0.1.45 - Mend

@visactor/vseed 0.1.43 → 0.1.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (474) hide show

package/dist/umd/index.js CHANGED Viewed

@@ -107,7 +107,7 @@
             zColumnParallel: ()=>zColumnParallel,
             zDimensions: ()=>zDimensions,
             zLegend: ()=>zLegend,
-            LINEAR_AXIS_INNER_OFFSET_TOP: ()=>7,
+            LINEAR_AXIS_INNER_OFFSET_TOP: ()=>12,
             replaceNullToUndefined: ()=>replaceNullToUndefined,
             zHeatmap: ()=>zHeatmap,
             FoldXMeasureId: ()=>FoldXMeasureId,
@@ -199,16 +199,18 @@
             zEcdfRegressionLine: ()=>zEcdfRegressionLine,
             zBarParallelConfig: ()=>zBarParallelConfig,
             lineAdvancedPipeline: ()=>lineAdvancedPipeline,
+            AXIS_LABEL_SPACE: ()=>8,
             FoldMeasureValue: ()=>FoldMeasureValue,
             ANNOTATION_Z_INDEX: ()=>1000,
             Q3MeasureValue: ()=>"__Q3__",
             createFormatter: ()=>createFormatter,
             columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
+            BAND_AXIS_INNER_OFFSET_IN_PIVOT: ()=>2,
             isMeasureSelector: ()=>isMeasureSelector,
             areaAdvancedPipeline: ()=>areaAdvancedPipeline,
+            zBarConfig: ()=>zBarConfig,
             areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
             barParallelSpecPipeline: ()=>barParallelSpecPipeline,
-            zBarConfig: ()=>zBarConfig,
             zPie: ()=>zPie,
             zBar: ()=>zBar,
             pieAdvancedPipeline: ()=>pieAdvancedPipeline,
@@ -222,6 +224,7 @@
             zFunnelTransform: ()=>zFunnelTransform,
             zLinearRegressionLine: ()=>zLinearRegressionLine,
             zRoseConfig: ()=>zRoseConfig,
+            zBodyCellStyle: ()=>zBodyCellStyle,
             zScatterMeasures: ()=>zScatterMeasures,
             zAnnotation: ()=>zAnnotation,
             selector: ()=>selector_selector,
@@ -506,7 +509,7 @@
                     next: t
                 });
         }
-        const preorderTraverse = (tree, callback)=>{
+        const preorderTraverse = (tree, callback, childrenKey = 'children')=>{
             if (!tree || 0 === tree.length) return;
             const stack = [
                 ...tree
@@ -515,9 +518,8 @@
                 const node = stack.pop();
                 const stop = callback(node);
                 if (true === stop) return;
-                if (!('children' in node)) continue;
-                const children = node.children;
-                if (children && children.length > 0) for(let i = children.length - 1; i >= 0; i--){
+                const children = node[childrenKey];
+                if (Array.isArray(children) && children.length > 0) for(let i = children.length - 1; i >= 0; i--){
                     const child = children[i];
                     stack.push(child);
                 }
@@ -892,14 +894,6 @@
                 dimensions: newDimensions
             };
         };
-        const records_records = (advancedVSeed, context)=>{
-            const { vseed } = context;
-            const { dataset } = vseed;
-            return {
-                ...advancedVSeed,
-                dataset
-            };
-        };
         function chunk_2T7K3PFL_i(...e) {
             return chunk_WIMGWYZL_u(chunk_2T7K3PFL_o, e);
         }
@@ -908,6 +902,47 @@
             for (let n of s)n in e && (r[n] = e[n]);
             return r;
         }
+        function chunk_BZNENX2T_r(o) {
+            if ("object" != typeof o || null === o) return !1;
+            let e = Object.getPrototypeOf(o);
+            return null === e || e === Object.prototype;
+        }
+        function chunk_3ZJAREUD_i(...e) {
+            return chunk_WIMGWYZL_u(chunk_3ZJAREUD_o, e);
+        }
+        function chunk_3ZJAREUD_o(e, r) {
+            let a = {};
+            for (let [n, u] of Object.entries(e)){
+                let l = r(u, n, e);
+                a[n] = l;
+            }
+            return a;
+        }
+        const replaceNullToUndefined = (obj)=>{
+            if (null === obj) return;
+            if (Array.isArray(obj)) return obj.map(replaceNullToUndefined);
+            if (chunk_BZNENX2T_r(obj)) return C(obj, chunk_3ZJAREUD_i((value)=>replaceNullToUndefined(value)));
+            return obj;
+        };
+        const cellStyle_cellStyle = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const pickedCellStyle = chunk_2T7K3PFL_i(vseed, [
+                'bodyCellStyle'
+            ]);
+            const style = replaceNullToUndefined(pickedCellStyle);
+            return {
+                ...advancedVSeed,
+                cellStyle: style
+            };
+        };
+        const records_records = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const { dataset } = vseed;
+            return {
+                ...advancedVSeed,
+                dataset
+            };
+        };
         const tableConfig_tableConfig = (advancedVSeed, context)=>{
             const { vseed } = context;
             const { chartType } = vseed;
@@ -935,11 +970,6 @@
             };
             return result;
         };
-        function chunk_BZNENX2T_r(o) {
-            if ("object" != typeof o || null === o) return !1;
-            let e = Object.getPrototypeOf(o);
-            return null === e || e === Object.prototype;
-        }
         function D(...e) {
             return chunk_WIMGWYZL_u(chunk_PDQFB3TV_s, e);
         }
@@ -1010,6 +1040,7 @@
             initAdvancedVSeed,
             defaultMeasures_defaultMeasures,
             defaultDimensions,
+            cellStyle_cellStyle,
             records_records,
             tableConfig_tableConfig,
             theme_theme
@@ -1344,6 +1375,170 @@
             };
             return result;
         };
+        const isType_isType = (value, type)=>Object.prototype.toString.call(value) === `[object ${type}]`;
+        const isType = isType_isType;
+        const isArray_isArray = (value)=>Array.isArray ? Array.isArray(value) : isType(value, "Array");
+        const common_isArray = isArray_isArray;
+        const isValid = (value)=>null != value;
+        const common_isValid = isValid;
+        function array_array(arr) {
+            return common_isValid(arr) ? common_isArray(arr) ? arr : [
+                arr
+            ] : [];
+        }
+        function chunk_AIG3BDKO_i(...e) {
+            return chunk_WIMGWYZL_u(chunk_AIG3BDKO_n, e);
+        }
+        var chunk_AIG3BDKO_n = (e, r)=>e.length >= r;
+        function chunk_KI5X74E2_y(...t) {
+            return chunk_WIMGWYZL_u(chunk_KI5X74E2_f, t);
+        }
+        function chunk_KI5X74E2_f(t, e) {
+            if (!chunk_AIG3BDKO_i(e, 1)) return {
+                ...t
+            };
+            if (!chunk_AIG3BDKO_i(e, 2)) {
+                let { [e[0]]: r, ...m } = t;
+                return m;
+            }
+            let o = {
+                ...t
+            };
+            for (let r of e)delete o[r];
+            return o;
+        }
+        const selector_selector = (vchartDatum, selector, selectorMode = 'And')=>{
+            if (!selector) return true;
+            const vchartKeys = Object.keys(vchartDatum).filter((k)=>k.toLocaleLowerCase().startsWith('__vchart'));
+            const datum = chunk_KI5X74E2_y(vchartDatum, vchartKeys);
+            const selectors = Array.isArray(selector) ? selector : [
+                selector
+            ];
+            return selectors['And' === selectorMode ? 'every' : 'some']((selector)=>{
+                if (isValueSelector(selector)) {
+                    if (Object.values(datum).find((v)=>v === selector)) return true;
+                } else if (isMeasureSelector(selector)) {
+                    const op = selector.operator || selector.op;
+                    const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
+                        selector.value
+                    ];
+                    switch(op){
+                        case '=':
+                            if (String(datum[selector.field]) === String(selectorValueArr[0])) return true;
+                            break;
+                        case '==':
+                            if (datum[selector.field] === selectorValueArr[0]) return true;
+                            break;
+                        case '!=':
+                            if (datum[selector.field] !== selectorValueArr[0]) return true;
+                            break;
+                        case '>':
+                            if (datum[selector.field] > selectorValueArr[0]) return true;
+                            break;
+                        case '<':
+                            if (datum[selector.field] < selectorValueArr[0]) return true;
+                            break;
+                        case '>=':
+                            if (datum[selector.field] >= selectorValueArr[0]) return true;
+                            break;
+                        case '<=':
+                            if (datum[selector.field] <= selectorValueArr[0]) return true;
+                            break;
+                        case 'between':
+                            if (Array.isArray(selector.value) && datum[selector.field] >= selectorValueArr[0] && datum[selector.field] <= selectorValueArr[1]) return true;
+                            break;
+                    }
+                } else if (isDimensionSelector(selector)) {
+                    const op = selector.operator || selector.op;
+                    const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
+                        selector.value
+                    ];
+                    switch(op){
+                        case 'in':
+                            if (selectorValueArr.includes(datum[selector.field])) return true;
+                            break;
+                        case 'not in':
+                            if (!selectorValueArr.includes(datum[selector.field])) return true;
+                            break;
+                    }
+                } else if (isPartialDatumSelector(selector)) {
+                    if (Object.keys(selector).every((key)=>datum[key] === selector[key])) return true;
+                }
+                return false;
+            });
+        };
+        const isValueSelector = (selector)=>'string' == typeof selector || 'number' == typeof selector;
+        const isPartialDatumSelector = (selector)=>'object' == typeof selector && null !== selector;
+        const isMeasureSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && ('operator' in selector || 'op' in selector) && 'value' in selector && ([
+                '=',
+                '==',
+                '!=',
+                '>',
+                '<',
+                '>=',
+                '<=',
+                'between'
+            ].includes(selector.operator) || [
+                '=',
+                '==',
+                '!=',
+                '>',
+                '<',
+                '>=',
+                '<=',
+                'between'
+            ].includes(selector.op));
+        const isDimensionSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && ('operator' in selector || 'op' in selector) && 'value' in selector && ([
+                'in',
+                'not in'
+            ].includes(selector.operator) || [
+                'in',
+                'not in'
+            ].includes(selector.op));
+        const tableStyleMap = {
+            backgroundColor: 'bgColor',
+            textColor: 'color',
+            textFontSize: 'fontSize',
+            borderColor: 'borderColor',
+            borderLineWidth: 'borderLineWidth'
+        };
+        const pickBodyCellStyle = (bodyCellStyle)=>Object.keys(tableStyleMap).reduce((acc, key)=>{
+                if (key in bodyCellStyle) acc[tableStyleMap[key]] = bodyCellStyle[key];
+                return acc;
+            }, {});
+        const tableBodyCell = (spec, context)=>{
+            const { advancedVSeed } = context;
+            const { cellStyle } = advancedVSeed;
+            const bodyCellStyle = cellStyle?.bodyCellStyle;
+            if (!bodyCellStyle) return spec;
+            const bodyCellStyleList = array_array(bodyCellStyle);
+            const columns = spec.columns || [];
+            const setStyleOfColumn = (col)=>{
+                const field = col.field;
+                const matchedStyles = bodyCellStyleList.filter((style)=>{
+                    if (chunk_JK3VNB42_n(style.selector)) return true;
+                    const selectors = array_array(style.selector);
+                    return selectors.some((selector)=>chunk_BZNENX2T_r(selector) ? chunk_JK3VNB42_n(selector.field) || selector.field === field : chunk_6GTAPB47_e(selector) || chunk_SFZGYJFI_t(selector));
+                });
+                if (!matchedStyles.length) return false;
+                col.style = (datum)=>{
+                    const originalDatum = {
+                        [field]: datum.dataValue
+                    };
+                    const mergedStyle = matchedStyles.reduce((result, style)=>{
+                        if (selector_selector(originalDatum, style.selector)) return {
+                            ...result,
+                            ...pickBodyCellStyle(style)
+                        };
+                        return result;
+                    }, {});
+                    return mergedStyle;
+                };
+                return false;
+            };
+            preorderTraverse(columns, setStyleOfColumn, 'columns');
+            return spec;
+        };
         const tableSpecPipeline = [
             initTable,
             dimensionTreeToColumns,
@@ -1351,7 +1546,8 @@
             bodyStyle,
             headerStyle,
             frameStyle,
-            selectionStyle
+            selectionStyle,
+            tableBodyCell
         ];
         const registerTable = ()=>{
             Builder._advancedPipelineMap.table = tableAdvancedPipeline;
@@ -1383,13 +1579,13 @@
         const BinEndMeasureId = '__BinEnd__';
         const BinCountMeasureId = '__BinCount__';
         const BinPercentageMeasureId = '__BinPercentage__';
-        const defaultMeasureName = (advancedVSeed)=>{
+        const defaultMeasureId = (advancedVSeed)=>{
             const result = {
                 ...advancedVSeed
             };
             const measures = findAllMeasures(advancedVSeed.measures);
             if (measures.length > 1 && !result.dimensions?.some((dim)=>dim.id === MeasureName)) result.dimensions?.push({
-                id: MeasureName,
+                id: MeasureId,
                 alias: intl.i18n`指标名称`,
                 encoding: 'row'
             });
@@ -1441,27 +1637,6 @@
             encoding.tooltip = measures.map((item)=>item.id);
             encoding.detail = chunk_QJLMYOTX_i(measures.filter((item)=>'detail' === item.encoding || !item.encoding).map((item)=>item.id));
         };
-        function chunk_AIG3BDKO_i(...e) {
-            return chunk_WIMGWYZL_u(chunk_AIG3BDKO_n, e);
-        }
-        var chunk_AIG3BDKO_n = (e, r)=>e.length >= r;
-        function chunk_KI5X74E2_y(...t) {
-            return chunk_WIMGWYZL_u(chunk_KI5X74E2_f, t);
-        }
-        function chunk_KI5X74E2_f(t, e) {
-            if (!chunk_AIG3BDKO_i(e, 1)) return {
-                ...t
-            };
-            if (!chunk_AIG3BDKO_i(e, 2)) {
-                let { [e[0]]: r, ...m } = t;
-                return m;
-            }
-            let o = {
-                ...t
-            };
-            for (let r of e)delete o[r];
-            return o;
-        }
         const foldMeasures = (dataset, measures, options)=>{
             const { measureId, measureName, measureValue, colorMeasureId, allowEmptyFold = true, omitIds = [] } = options || {};
             const foldInfo = {
@@ -1579,7 +1754,8 @@
             initAdvancedVSeed,
             defaultMeasures_defaultMeasures,
             defaultDimensions,
-            defaultMeasureName,
+            defaultMeasureId,
+            cellStyle_cellStyle,
             encodingForPivotTable,
             reshapePivotTable,
             pivotTableConfig,
@@ -1644,15 +1820,23 @@
         const pivotRows = (spec, context)=>{
             const { advancedVSeed } = context;
             const dimensions = advancedVSeed.dimensions;
-            const { encoding } = advancedVSeed;
+            const { encoding, measures } = advancedVSeed;
             const rows = dimensions.filter((item)=>encoding.row?.includes(item.id));
+            const allMeasures = findAllMeasures(measures);
             return {
                 ...spec,
-                rows: rows.map((item)=>({
+                rows: rows.map((item)=>{
+                    const res = {
                         dimensionKey: item.id,
                         title: item.alias || item.id,
                         width: 'auto'
-                    }))
+                    };
+                    if (item.id === MeasureId) res.headerFormat = (measureId)=>{
+                        const measure = allMeasures.find((m)=>m.id === measureId);
+                        return measure?.alias ?? measureId;
+                    };
+                    return res;
+                })
             };
         };
         const titleOnDimension = (spec)=>{
@@ -1795,6 +1979,47 @@
             };
             return result;
         };
+        const pivotTableBodyCell = (spec, context)=>{
+            const { advancedVSeed } = context;
+            const { cellStyle } = advancedVSeed;
+            const bodyCellStyle = cellStyle?.bodyCellStyle;
+            if (!bodyCellStyle) return spec;
+            const bodyCellStyleList = array_array(bodyCellStyle);
+            const indicators = spec.indicators || [];
+            const newIndicators = indicators.map((ind)=>{
+                const newInd = chunk_SFZGYJFI_t(ind) ? {
+                    indicatorKey: ind
+                } : ind;
+                const { indicatorKey } = newInd;
+                newInd.style = (datum)=>{
+                    const { dataValue, cellHeaderPaths } = datum;
+                    const headerPaths = [
+                        ...cellHeaderPaths.colHeaderPaths,
+                        ...cellHeaderPaths.rowHeaderPaths
+                    ];
+                    const originalDatum = {
+                        [indicatorKey]: dataValue
+                    };
+                    headerPaths.forEach((path)=>{
+                        if (path.dimensionKey) originalDatum[path.dimensionKey] = path.value;
+                    });
+                    if (!chunk_JK3VNB42_n(originalDatum[MeasureId]) && !chunk_JK3VNB42_n(originalDatum[FoldMeasureValue])) originalDatum[originalDatum[MeasureId]] = originalDatum[FoldMeasureValue];
+                    const mergedStyle = bodyCellStyleList.reduce((result, style)=>{
+                        if (selector_selector(originalDatum, style.selector)) return {
+                            ...result,
+                            ...pickBodyCellStyle(style)
+                        };
+                        return result;
+                    }, {});
+                    return mergedStyle;
+                };
+                return newInd;
+            });
+            return {
+                ...spec,
+                indicators: newIndicators
+            };
+        };
         const dataConfig = (spec, context)=>{
             const { advancedVSeed } = context;
             const measures = findAllMeasures(advancedVSeed.measures);
@@ -1822,7 +2047,8 @@
             cornerHeaderStyle,
             frameStyle,
             selectionStyle,
-            dataConfig
+            dataConfig,
+            pivotTableBodyCell
         ];
         const registerPivotTable = ()=>{
             Builder._advancedPipelineMap.pivotTable = pivotTableAdvancedPipeline;
@@ -1902,7 +2128,7 @@
                 dimensions: newDimensions
             };
         };
-        const defaultMeasureId = (advancedVSeed)=>{
+        const defaultMeasureId_defaultMeasureId = (advancedVSeed)=>{
             const result = {
                 ...advancedVSeed
             };
@@ -2225,11 +2451,13 @@
                 unfoldInfo
             };
         };
-        const colorAdapter = (ordinalPipe, linearPipe)=>(spec, context)=>{
+        function colorAdapter(ordinalPipe, linearPipe) {
+            return (spec, context)=>{
                 const { advancedVSeed, vseed } = context;
                 if (isLinearColor(advancedVSeed, vseed)) return linearPipe(spec, context);
                 return ordinalPipe(spec, context);
             };
+        }
         const isLinearColor = (advancedVSeed, vseed)=>{
             const { encoding } = advancedVSeed;
             const measures = vseed.measures || advancedVSeed.measures;
@@ -2376,23 +2604,6 @@
             result.analysis.orderMapping[colorId] = orderRes;
             return result;
         };
-        function chunk_3ZJAREUD_i(...e) {
-            return chunk_WIMGWYZL_u(chunk_3ZJAREUD_o, e);
-        }
-        function chunk_3ZJAREUD_o(e, r) {
-            let a = {};
-            for (let [n, u] of Object.entries(e)){
-                let l = r(u, n, e);
-                a[n] = l;
-            }
-            return a;
-        }
-        const replaceNullToUndefined = (obj)=>{
-            if (null === obj) return;
-            if (Array.isArray(obj)) return obj.map(replaceNullToUndefined);
-            if (chunk_BZNENX2T_r(obj)) return C(obj, chunk_3ZJAREUD_i((value)=>replaceNullToUndefined(value)));
-            return obj;
-        };
         const line_lineConfig = (advancedVSeed, context)=>{
             const { vseed } = context;
             const { chartType } = vseed;
@@ -2449,7 +2660,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForLine,
                 buildMeasures
@@ -2771,6 +2982,7 @@
                 max,
                 min,
                 label: {
+                    space: 8,
                     visible: label?.visible,
                     formatMethod: (value)=>{
                         if (isBarPercent(vseed) || isColumnPercent(vseed) || isAreaPercent(vseed)) return createLinearPercentFormat(value, autoFormat, numFormat, formatter, percentFormatter);
@@ -2816,7 +3028,7 @@
                     }
                 },
                 innerOffset: {
-                    top: 7
+                    top: 12
                 }
             };
             result.axes = [
@@ -2879,7 +3091,7 @@
             const baseConfig = advancedVSeed.config[chartType];
             if (!baseConfig || !baseConfig.legend) return result;
             const { legend } = baseConfig;
-            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, labelFontWeight, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
+            const { enable, position = 'bottom', labelFontColor, labelColor, labelFontSize = 12, pagerIconColor, pagerIconDisableColor, labelFontWeight, maxSize = 1, border, shapeType = 'rectRound' } = legend || {};
             const orient = [
                 'bottom',
                 'bottomLeft',
@@ -2918,6 +3130,7 @@
                 'rt',
                 'br'
             ].includes(position) ? 'end' : 'middle';
+            const labelTextColor = labelColor || labelFontColor;
             result.legends = {
                 type: 'discrete',
                 visible: enable,
@@ -2931,7 +3144,7 @@
                     maxWidth: '30%',
                     focusIconStyle: {
                         size: labelFontSize + 2,
-                        fill: labelColor || labelFontColor,
+                        fill: labelTextColor,
                         fontWeight: labelFontWeight
                     },
                     shape: {
@@ -2956,7 +3169,7 @@
                         }
                     },
                     label: {
-                        formatMethod: (value)=>unfoldInfo.colorIdMap[String(value)].alias ?? value,
+                        formatMethod: (value)=>unfoldInfo.colorIdMap[String(value)]?.alias ?? value,
                         style: {
                             fontSize: labelFontSize,
                             fill: labelColor || labelFontColor,
@@ -2981,6 +3194,21 @@
                         }
                     }
                 },
+                pager: {
+                    textStyle: {
+                        fill: labelTextColor
+                    },
+                    handler: {
+                        style: {
+                            fill: pagerIconColor
+                        },
+                        state: {
+                            disable: {
+                                fill: pagerIconDisableColor
+                            }
+                        }
+                    }
+                },
                 padding: 0
             };
             return result;
@@ -3051,6 +3279,12 @@
                     }
                 }
             };
+            const measures = findAllMeasures(advancedVSeed.measures);
+            const colorMeasure = measures.find((m)=>'color' === m.encoding);
+            if (colorMeasure) {
+                const formatter = createFormatterByMeasure(colorMeasure);
+                result.legends.handlerText.formatter = formatter;
+            }
             return result;
         };
         const colorPointStyleFill = (stylePipe)=>(spec, context)=>{
@@ -3066,95 +3300,6 @@
                 }
                 return result;
             };
-        const selector_selector = (vchartDatum, selector)=>{
-            if (!selector) return true;
-            const selectorMode = 'And';
-            const vchartKeys = Object.keys(vchartDatum).filter((k)=>k.toLocaleLowerCase().startsWith('__vchart'));
-            const datum = chunk_KI5X74E2_y(vchartDatum, vchartKeys);
-            const selectors = Array.isArray(selector) ? selector : [
-                selector
-            ];
-            return selectors['And' === selectorMode ? 'every' : 'some']((selector)=>{
-                if (isValueSelector(selector)) {
-                    if (Object.values(datum).find((v)=>v === selector)) return true;
-                } else if (isMeasureSelector(selector)) {
-                    const op = selector.operator || selector.op;
-                    const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
-                        selector.value
-                    ];
-                    switch(op){
-                        case '=':
-                            if (String(datum[selector.field]) === String(selectorValueArr[0])) return true;
-                            break;
-                        case '==':
-                            if (datum[selector.field] === selectorValueArr[0]) return true;
-                            break;
-                        case '!=':
-                            if (datum[selector.field] !== selectorValueArr[0]) return true;
-                            break;
-                        case '>':
-                            if (datum[selector.field] > selectorValueArr[0]) return true;
-                            break;
-                        case '<':
-                            if (datum[selector.field] < selectorValueArr[0]) return true;
-                            break;
-                        case '>=':
-                            if (datum[selector.field] >= selectorValueArr[0]) return true;
-                            break;
-                        case '<=':
-                            if (datum[selector.field] <= selectorValueArr[0]) return true;
-                            break;
-                        case 'between':
-                            if (Array.isArray(selector.value) && datum[selector.field] >= selectorValueArr[0] && datum[selector.field] <= selectorValueArr[1]) return true;
-                            break;
-                    }
-                } else if (isDimensionSelector(selector)) {
-                    const op = selector.operator || selector.op;
-                    const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
-                        selector.value
-                    ];
-                    switch(op){
-                        case 'in':
-                            if (selectorValueArr.includes(datum[selector.field])) return true;
-                            break;
-                        case 'not in':
-                            if (!selectorValueArr.includes(datum[selector.field])) return true;
-                            break;
-                    }
-                } else if (isPartialDatumSelector(selector)) {
-                    if (Object.keys(selector).every((key)=>datum[key] === selector[key])) return true;
-                }
-                return false;
-            });
-        };
-        const isValueSelector = (selector)=>'string' == typeof selector || 'number' == typeof selector;
-        const isPartialDatumSelector = (selector)=>'object' == typeof selector && null !== selector;
-        const isMeasureSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && ('operator' in selector || 'op' in selector) && 'value' in selector && ([
-                '=',
-                '==',
-                '!=',
-                '>',
-                '<',
-                '>=',
-                '<=',
-                'between'
-            ].includes(selector.operator) || [
-                '=',
-                '==',
-                '!=',
-                '>',
-                '<',
-                '>=',
-                '<=',
-                'between'
-            ].includes(selector.op));
-        const isDimensionSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && ('operator' in selector || 'op' in selector) && 'value' in selector && ([
-                'in',
-                'not in'
-            ].includes(selector.operator) || [
-                'in',
-                'not in'
-            ].includes(selector.op));
         const pointStyle_pointStyle = (spec, context)=>{
             const { advancedVSeed } = context;
             const { markStyle } = advancedVSeed;
@@ -3388,7 +3533,7 @@
             const percentFormatter = createFormatter(percentFormat);
             const result = {
                 visible: enable,
-                dataFilter: (data)=>data.filter((entry)=>entry.data?.[DATUM_HIDE_KEY] !== true),
+                dataFilter: (data)=>data.filter((entry)=>entry.data?.[DATUM_HIDE_KEY] !== true && selector_selector(entry.data, label.selector, 'Or')),
                 formatMethod: (_, datum)=>{
                     const result = [];
                     const dimLabels = labelDims.map((item)=>{
@@ -3427,6 +3572,34 @@
             };
             return result;
         };
+        const getTooltipStyle = (tooltipConfig)=>({
+                panel: {
+                    padding: tooltipConfig.padding,
+                    border: {
+                        radius: tooltipConfig.borderRadius,
+                        width: tooltipConfig.borderWidth,
+                        color: tooltipConfig.borderColor
+                    },
+                    backgroundColor: tooltipConfig.backgroundColor
+                },
+                keyLabel: {
+                    lineHeight: tooltipConfig.lineHeight,
+                    fontSize: tooltipConfig.fontSize,
+                    fontColor: tooltipConfig.keyColor
+                },
+                valueLabel: {
+                    lineHeight: tooltipConfig.lineHeight,
+                    fontSize: tooltipConfig.fontSize,
+                    fontColor: tooltipConfig.valueColor,
+                    fontWeight: 'medium'
+                },
+                titleLabel: {
+                    fontSize: tooltipConfig.fontSize,
+                    lineHeight: tooltipConfig.lineHeight,
+                    fontColor: tooltipConfig.titleColor,
+                    fontWeight: 'bold'
+                }
+            });
         const tooltip_tooltip = (spec, context)=>{
             const result = {
                 ...spec
@@ -3437,10 +3610,11 @@
             const { tooltip = {
                 enable: true
             } } = baseConfig;
-            const { enable } = tooltip;
+            const { enable = true } = tooltip;
             const { foldInfo, unfoldInfo } = datasetReshapeInfo[0];
             result.tooltip = {
-                visible: enable,
+                style: getTooltipStyle(tooltip),
+                visible: !!enable,
                 mark: {
                     title: {
                         visible: false
@@ -3548,6 +3722,40 @@
                 if ('number' == typeof value) return obj[key] === value;
                 return true;
             });
+        const ANNOTATION_AREA_TEXT_STYLE_BY_POSITION = {
+            top: {
+                textAlign: 'center',
+                textBaseline: 'top'
+            },
+            topRight: {
+                textAlign: 'right',
+                textBaseline: 'top'
+            },
+            topLeft: {
+                textAlign: 'left',
+                textBaseline: 'top'
+            },
+            bottom: {
+                textAlign: 'center',
+                textBaseline: 'bottom'
+            },
+            bottomLeft: {
+                textAlign: 'left',
+                textBaseline: 'bottom'
+            },
+            bottomRight: {
+                textAlign: 'right',
+                textBaseline: 'bottom'
+            },
+            left: {
+                textAlign: 'left',
+                textBaseline: 'middle'
+            },
+            right: {
+                textAlign: 'right',
+                textBaseline: 'middle'
+            }
+        };
         const annotationPoint_annotationPoint = (spec, context)=>{
             const { advancedVSeed, vseed } = context;
             const { annotation, config } = advancedVSeed;
@@ -3585,6 +3793,7 @@
                             text: {
                                 text: text,
                                 style: {
+                                    opacity: 0.95,
                                     visible: true,
                                     textAlign: textAlign,
                                     textBaseline: textBaseline,
@@ -3600,6 +3809,7 @@
                                     visible: textBackgroundVisible,
                                     padding: textBackgroundPadding,
                                     style: {
+                                        opacity: 0.95,
                                         cornerRadius: textBackgroundBorderRadius ?? 4,
                                         fill: textBackgroundColor,
                                         stroke: textBackgroundBorderColor,
@@ -3642,7 +3852,8 @@
                 const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'center', textBaseline = 'top', lineColor = theme?.lineColor ?? '#212121', lineStyle = theme?.lineStyle ?? 'dashed', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationVerticalLine;
                 const dataset = advancedVSeed.dataset.flat();
                 const generateOneMarkLine = (x)=>({
-                        x: x,
+                        x,
+                        autoRange: true,
                         zIndex: 1000,
                         line: {
                             style: {
@@ -3662,9 +3873,11 @@
                             }
                         },
                         label: {
+                            confine: true,
                             text: text,
                             position: positionMap[textPosition || 'insideEnd'],
                             style: {
+                                opacity: 0.95,
                                 dx: 5,
                                 visible: true,
                                 stroke: textBackgroundColor,
@@ -3679,6 +3892,7 @@
                                 visible: textBackgroundVisible,
                                 padding: textBackgroundPadding,
                                 style: {
+                                    opacity: 0.95,
                                     dx: 5,
                                     cornerRadius: textBackgroundBorderRadius,
                                     fill: textBackgroundColor,
@@ -3753,6 +3967,7 @@
                 const dataset = advancedVSeed.dataset.flat();
                 const generateOneMarkLine = (y)=>({
                         y,
+                        autoRange: true,
                         zIndex: 1000,
                         line: {
                             style: {
@@ -3771,9 +3986,11 @@
                             }
                         },
                         label: {
+                            confine: true,
                             text: text,
                             position: positionMap[textPosition || 'insideEnd'],
                             style: {
+                                opacity: 0.95,
                                 visible: true,
                                 dy: 4,
                                 stroke: textBackgroundColor,
@@ -3788,6 +4005,7 @@
                                 visible: textBackgroundVisible,
                                 padding: textBackgroundPadding,
                                 style: {
+                                    opacity: 0.95,
                                     dy: 4,
                                     cornerRadius: textBackgroundBorderRadius,
                                     fill: textBackgroundColor,
@@ -3800,9 +4018,9 @@
                         startSymbol: {
                             visible: theme?.startSymbolVisible ?? true,
                             symbolType: theme?.startSymbolType ?? 'triangleDown',
-                            size: 5,
+                            size: 5 + (lineWidth || 1),
                             style: {
-                                dx: 0,
+                                dx: 3,
                                 fill: lineColor
                             }
                         },
@@ -3858,12 +4076,14 @@
                 left: 'insideLeft',
                 right: 'insideRight'
             };
+            const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
             const markArea = annotationAreaList.flatMap((annotationArea)=>{
-                const { selector: selectorPoint, text = '', textPosition = 'top', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'center', textBaseline = 'top', textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
+                const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
-                const labelPosition = positionMap[textPosition || 'top'];
-                const isBottom = labelPosition.toLocaleLowerCase().includes('bottom');
+                const textPosition = annotationArea.textPosition ?? defaultTextPosition;
+                const textAlign = annotationArea.textAlign ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textAlign;
+                const textBaseline = annotationArea.textBaseline ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textBaseline;
                 return {
                     zIndex: 1000,
                     regionRelative: true,
@@ -3873,11 +4093,11 @@
                         const yAxisHelper = context.getYAxisHelper();
                         const xAxisHelper = context.getXAxisHelper();
                         if ('function' == typeof xAxisHelper?.getBandwidth) {
-                            const yScale = yAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const minX = Math.min(...xyList.map((item)=>item.x)) - (outerPadding || 4);
                             const maxX = Math.max(...xyList.map((item)=>item.x)) + (outerPadding || 4);
-                            const minY = Math.min(...yScale.range());
-                            const maxY = Math.max(...yScale.range());
+                            const minY = 0;
+                            const maxY = regionRect.height;
                             return [
                                 {
                                     x: minX,
@@ -3898,11 +4118,11 @@
                             ];
                         }
                         if ('function' == typeof yAxisHelper?.getBandwidth) {
-                            const xScale = xAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const minY = Math.min(...xyList.map((item)=>item.y)) - (outerPadding || 4);
                             const maxY = Math.max(...xyList.map((item)=>item.y)) + (outerPadding || 4);
-                            const minX = Math.min(...xScale.range());
-                            const maxX = Math.max(...xScale.range());
+                            const minX = 0;
+                            const maxX = regionRect.width;
                             return [
                                 {
                                     x: minX,
@@ -3925,11 +4145,11 @@
                         return [];
                     },
                     label: {
-                        position: labelPosition,
+                        position: positionMap[textPosition],
                         visible: true,
                         text: text,
                         style: {
-                            dy: isBottom ? 2 * -(textFontSize || 12) : 0,
+                            opacity: 0.95,
                             textAlign: textAlign,
                             textBaseline: textBaseline,
                             fill: textColor,
@@ -3942,7 +4162,7 @@
                             visible: textBackgroundVisible,
                             padding: textBackgroundPadding,
                             style: {
-                                dy: isBottom ? 2 * -(textFontSize || 12) : 0,
+                                opacity: 0.95,
                                 cornerRadius: textBackgroundBorderRadius ?? 4,
                                 fill: textBackgroundColor,
                                 stroke: textBackgroundBorderColor,
@@ -3969,17 +4189,6 @@
                 markArea: markArea
             };
         };
-        const isType_isType = (value, type)=>Object.prototype.toString.call(value) === `[object ${type}]`;
-        const isType = isType_isType;
-        const isArray_isArray = (value)=>Array.isArray ? Array.isArray(value) : isType(value, "Array");
-        const common_isArray = isArray_isArray;
-        const isValid = (value)=>null != value;
-        const common_isValid = isValid;
-        function array_array(arr) {
-            return common_isValid(arr) ? common_isArray(arr) ? arr : [
-                arr
-            ] : [];
-        }
         const isNumber = (value, fuzzy = !1)=>{
             const type = typeof value;
             return fuzzy ? "number" === type : "number" === type || isType(value, "Number");
@@ -4346,6 +4555,24 @@
                 return this.formatHex();
             }
         }
+        function clamper(a, b) {
+            let t;
+            return a > b && (t = a, a = b, b = t), (x)=>Math.max(a, Math.min(b, x));
+        }
+        const formatGradientStops = (stops)=>{
+            const firstInvalidateIndex = stops.findIndex((stop)=>stop.offset < 0 || stop.offset > 1);
+            if (firstInvalidateIndex >= 0) {
+                if (stops[firstInvalidateIndex].offset > 1) {
+                    const newStops = stops.slice(0, firstInvalidateIndex + 1);
+                    newStops[newStops.length - 1].offset = 1;
+                    return newStops;
+                }
+                const newStops = stops.slice(firstInvalidateIndex + 1);
+                newStops[0].offset = 0;
+                return newStops;
+            }
+            return stops;
+        };
         const splitLine = (spec, context)=>{
             const { advancedVSeed } = context;
             const { annotation, chartType, datasetReshapeInfo } = advancedVSeed;
@@ -4387,7 +4614,8 @@
                             });
                         });
                         if (!points || !points.length) return;
-                        const splitCoordinate = lineSeries.getYAxisHelper().getScale(0).scale(splitValue);
+                        const scale = lineSeries.getYAxisHelper().getScale(0);
+                        const splitCoordinate = scale.scale(splitValue);
                         const minY = Math.min(...points.map((p)=>p.y));
                         const maxY = Math.max(...points.map((p)=>p.y));
                         const ratio = (splitCoordinate - minY) / (maxY - minY);
@@ -4397,7 +4625,7 @@
                             x1: 0,
                             y0: 0,
                             y1: 1,
-                            stops: [
+                            stops: formatGradientStops([
                                 {
                                     color: colorConfig.positiveColor,
                                     offset: 0
@@ -4414,7 +4642,7 @@
                                     color: colorConfig.negativeColor,
                                     offset: 1
                                 }
-                            ]
+                            ])
                         };
                         const areaFill = {
                             gradient: 'linear',
@@ -4422,7 +4650,7 @@
                             x1: 0,
                             y0: 0,
                             y1: 1,
-                            stops: [
+                            stops: formatGradientStops([
                                 {
                                     color: colorConfig.positiveColor,
                                     offset: 0
@@ -4439,7 +4667,7 @@
                                     color: colorConfig.negativeColor,
                                     offset: 1
                                 }
-                            ]
+                            ])
                         };
                         const attrs = {
                             segments: null,
@@ -4452,12 +4680,13 @@
                         lineGraphics[0].setAttributes(attrs);
                         lineGraphics[0].setFinalAttributes?.(attrs);
                         const start = lineSeries.getRegion().getLayoutStartPoint();
+                        const range = scale.range();
                         return {
                             points: points.map((entry)=>({
                                     x: entry.x + start.x,
                                     y: entry.y + start.y
                                 })),
-                            splitCoordinate,
+                            splitCoordinate: clamper(range[0], range[range.length - 1])(splitCoordinate) + start.y,
                             areaFill,
                             lineStroke
                         };
@@ -4501,11 +4730,11 @@
                 if (!seriesSpec.point.style) seriesSpec.point.style = {};
                 if (!seriesSpec.line.style) seriesSpec.line.style = {};
                 const measureValueKey = datasetReshapeInfo[0].foldInfo.measureValue;
-                seriesSpec.point.style.fill = (datum)=>datum?.[measureValueKey] >= splitValue ? colorConfig.positiveColor : colorConfig.negativeColor;
-                seriesSpec.line.style.stroke = (datum)=>datum?.[measureValueKey] >= splitValue ? colorConfig.positiveColor : colorConfig.negativeColor;
+                seriesSpec.point.style.fill = (datum)=>datum?.[measureValueKey] < splitValue ? colorConfig.negativeColor : colorConfig.positiveColor;
+                seriesSpec.line.style.stroke = (datum)=>datum?.[measureValueKey] < splitValue ? colorConfig.negativeColor : colorConfig.positiveColor;
                 if (seriesSpec.label && seriesSpec.label.visible && chunk_JK3VNB42_n(seriesSpec.label.style?.fill)) seriesSpec.label.style = {
                     ...seriesSpec.label.style,
-                    fill: (datum)=>datum?.[measureValueKey] >= splitValue ? colorConfig.positiveColor : colorConfig.negativeColor
+                    fill: (datum)=>datum?.[measureValueKey] < splitValue ? colorConfig.negativeColor : colorConfig.positiveColor
                 };
             }
             return result;
@@ -4552,14 +4781,13 @@
         };
         const pivotGridStyle = (spec, context)=>{
             const { vseed, advancedVSeed } = context;
-            const { config, chartType, dimensions } = advancedVSeed;
+            const { config, chartType } = advancedVSeed;
             const themConfig = config?.[chartType]?.pivotGrid ?? {};
             const onlyCombination = !isPivot(vseed) && isCombination(vseed);
             const result = {
                 ...spec
             };
             const transparent = 'rgba(0,0,0,0)';
-            const hasColumnDimension = dimensions.some((dim)=>'column' === dim.encoding);
             const borderColor = themConfig.borderColor ?? '#e3e5eb';
             const bodyFontColor = themConfig.bodyFontColor ?? '#141414';
             const headerFontColor = themConfig.headerFontColor ?? '#21252c';
@@ -4577,12 +4805,15 @@
                     bodyStyle: {
                         borderColor,
                         color: bodyFontColor,
-                        borderLineWidth: (arg)=>[
+                        borderLineWidth: (arg)=>{
+                            const noYAxis = 'pie' === chartType || 'rose' === chartType || 'donut' === chartType || 'funnel' === chartType || 'radar' === chartType || 'roseParallel' === chartType;
+                            return [
                                 0 === arg.row ? outlineBorderLineWidth : 1,
                                 outlineBorderLineWidth,
                                 0,
-                                0 === arg.col ? outlineBorderLineWidth : 1
-                            ],
+                                0 === arg.col || noYAxis && 1 === arg.col ? outlineBorderLineWidth : 1
+                            ];
+                        },
                         bgColor: transparent,
                         hover: {
                             cellBgColor: 'transparent'
@@ -4612,7 +4843,7 @@
                         color: headerFontColor,
                         padding: [
                             0,
-                            4,
+                            12,
                             0,
                             4
                         ],
@@ -4636,7 +4867,7 @@
                         color: headerFontColor,
                         padding: [
                             0,
-                            4,
+                            12,
                             0,
                             4
                         ],
@@ -4657,23 +4888,6 @@
                             inlineColumnBgColor: hoverHeaderInlineBackgroundColor || void 0
                         }
                     },
-                    cornerRightTopCellStyle: {
-                        borderColor,
-                        borderLineWidth: 0,
-                        frameStyle: {
-                            borderColor,
-                            borderLineWidth: [
-                                outlineBorderLineWidth,
-                                outlineBorderLineWidth,
-                                1,
-                                1
-                            ]
-                        },
-                        bgColor: headerBackgroundColor,
-                        hover: {
-                            cellBgColor: hoverHeaderBackgroundColor
-                        }
-                    },
                     cornerLeftBottomCellStyle: {
                         borderColor,
                         borderLineWidth: [
@@ -4696,24 +4910,19 @@
                             cellBgColor: hoverHeaderBackgroundColor
                         }
                     },
-                    cornerRightBottomCellStyle: {
+                    cornerRightTopCellStyle: {
                         borderColor,
-                        bgColor: headerBackgroundColor,
                         borderLineWidth: [
-                            1,
                             outlineBorderLineWidth,
                             outlineBorderLineWidth,
+                            1,
                             1
                         ],
                         frameStyle: {
                             borderColor,
-                            borderLineWidth: [
-                                1,
-                                outlineBorderLineWidth,
-                                outlineBorderLineWidth,
-                                1
-                            ]
+                            borderLineWidth: 0
                         },
+                        bgColor: headerBackgroundColor,
                         hover: {
                             cellBgColor: hoverHeaderBackgroundColor
                         }
@@ -4722,16 +4931,41 @@
                         borderColor,
                         bgColor: headerBackgroundColor,
                         borderLineWidth: (arg)=>[
-                                0 === arg.row || hasColumnDimension && 1 === arg.row ? outlineBorderLineWidth : 1,
+                                0 === arg.row ? outlineBorderLineWidth : 1,
                                 outlineBorderLineWidth,
                                 0,
                                 1
                             ],
+                        frameStyle: {
+                            borderLineWidth: 0
+                        },
                         hover: {
                             borderLineWidth: 0,
                             cellBgColor: hoverHeaderBackgroundColor
                         }
                     },
+                    cornerRightBottomCellStyle: {
+                        borderColor,
+                        bgColor: headerBackgroundColor,
+                        borderLineWidth: [
+                            1,
+                            outlineBorderLineWidth,
+                            outlineBorderLineWidth,
+                            1
+                        ],
+                        frameStyle: {
+                            borderColor,
+                            borderLineWidth: [
+                                1,
+                                outlineBorderLineWidth,
+                                outlineBorderLineWidth,
+                                1
+                            ]
+                        },
+                        hover: {
+                            cellBgColor: hoverHeaderBackgroundColor
+                        }
+                    },
                     bottomFrozenStyle: {
                         borderColor,
                         borderLineWidth: [
@@ -4762,10 +4996,13 @@
                     ...spec
                 };
                 const { advancedVSeed } = context;
-                const { measures, datasetReshapeInfo, dataset } = advancedVSeed;
+                const { measures, datasetReshapeInfo, dataset, encoding } = advancedVSeed;
                 const colorItems = chunk_QJLMYOTX_i(datasetReshapeInfo.flatMap((d)=>d.unfoldInfo.colorItems));
+                const allMeasureIds = chunk_QJLMYOTX_i(datasetReshapeInfo.flatMap((d)=>Object.keys(d.foldInfo.foldMap || {})));
                 const indicators = datasetReshapeInfo.map((reshapeInfo, index)=>{
-                    const measure = measures?.find((d)=>d.id === reshapeInfo.id);
+                    const measureGroup = measures?.find((d)=>d.id === reshapeInfo.id);
+                    const subMeasuresId = (measureGroup?.children || []).map((d)=>d.id);
+                    const invalideMeasuresIds = allMeasureIds.filter((id)=>!subMeasuresId.includes(id));
                     const newDataset = dataset[index];
                     const newDatasetReshapeInfo = [
                         {
@@ -4781,13 +5018,17 @@
                         advancedVSeed: {
                             ...advancedVSeed,
                             datasetReshapeInfo: newDatasetReshapeInfo,
+                            encoding: Object.keys(encoding).reduce((res, key)=>{
+                                res[key] = encoding[key]?.filter((e)=>!invalideMeasuresIds.includes(e));
+                                return res;
+                            }, {}),
                             dataset: newDataset
                         }
                     };
                     const chartSpec = execPipeline(chartPipeline, newContext, {});
                     return {
                         indicatorKey: reshapeInfo.id,
-                        title: measure?.alias,
+                        title: measureGroup?.alias,
                         cellType: 'chart',
                         chartModule: 'vchart',
                         chartSpec: chartSpec,
@@ -4842,12 +5083,28 @@
         };
         const pivotAxisStyle = (axisStyle)=>(spec, context)=>{
                 const result = axisStyle(spec, context);
-                if (result.axes) result.axes.forEach((axis)=>{
-                    axis.domainLine = {
-                        visible: false
-                    };
-                    if (axis.grid && axis.grid.visible && axis.grid.style) axis.grid.style.strokeOpacity = 0.3;
-                });
+                if (result.axes) {
+                    const { advancedVSeed } = context;
+                    const { config, chartType } = advancedVSeed;
+                    const themConfig = config?.[chartType]?.pivotGrid ?? {};
+                    result.axes.forEach((axis)=>{
+                        axis.domainLine = {
+                            visible: false
+                        };
+                        if (themConfig.chartGridColor && axis.grid && axis.grid.visible && axis.grid.style) axis.grid.style.stroke = themConfig.chartGridColor;
+                        if (themConfig.axisLabelColor && axis.label && axis.label.visible && axis.label.style) axis.label.style.fill = themConfig.axisLabelColor;
+                        if ('band' === axis.type) {
+                            if ('left' === axis.orient || 'right' === axis.orient) axis.innerOffset = {
+                                top: 2,
+                                bottom: 2
+                            };
+                            else if ('top' === axis.orient || 'bottom' === axis.orient) axis.innerOffset = {
+                                left: 2,
+                                right: 2
+                            };
+                        }
+                    });
+                }
                 return result;
             };
         const pivotRowDimensions = (spec, context)=>{
@@ -4966,6 +5223,7 @@
                 'br'
             ].includes(position) ? 'end' : 'middle';
             const legends = {
+                padding: 0,
                 visible: enable,
                 type: 'discrete',
                 orient,
@@ -5103,12 +5361,15 @@
                 legends
             };
         };
-        const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>(spec, context)=>{
+        const pivotAdapter_pivotAdapter = (pipeline, pivotPipeline)=>{
+            const adapted = (spec, context)=>{
                 const { vseed } = context;
                 const usePivotChart = isPivotChart(vseed);
                 if (usePivotChart) return execPipeline(pivotPipeline, context, spec);
                 return execPipeline(pipeline, context, spec);
             };
+            return adapted;
+        };
         const line_line = [
             initLine,
             colorAdapter(color_color, linearColor),
@@ -5286,7 +5547,7 @@
                 keys.forEach((key)=>{
                     if (vseed[key]) {
                         hasLine = true;
-                        regressionLineConfig[key] = true === vseed[key] ? {} : vseed[key];
+                        regressionLineConfig[key] = vseed[key];
                     }
                 });
                 return hasLine ? {
@@ -5300,7 +5561,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForColumn,
                 buildMeasures
@@ -5458,7 +5719,7 @@
                 barStyle
             ];
             const customMap = barStyles.reduce((result, style, index)=>{
-                const { barBorderColor, barBorderStyle, barBorderWidth = 1, barColor, barColorOpacity, barRadius, barVisible = true } = style;
+                const { barBorderColor, barBorderStyle, barBorderWidth = 1, barColor, barColorOpacity, barBorderOpacity, barRadius, barVisible = true } = style;
                 const lineDash = 'dashed' === barBorderStyle ? [
                     5,
                     2
@@ -5482,12 +5743,10 @@
                             fill: barColor,
                             fillOpacity: barColorOpacity,
                             cornerRadius: barRadius,
-                            innerBorder: {
-                                stroke: barBorderColor,
-                                lineWidth: barBorderWidth,
-                                distance: (barBorderWidth || 0) / 2,
-                                lineDash: lineDash
-                            }
+                            lineWidth: barBorderWidth,
+                            stroke: barBorderColor,
+                            strokeOpacity: barBorderOpacity,
+                            lineDash: lineDash
                         }
                     }
                 };
@@ -5517,17 +5776,12 @@
                 left: 'insideLeft',
                 right: 'insideRight'
             };
-            const defaultOptions = isBarLikeChart(advancedVSeed) ? {
-                textPosition: 'right',
-                textAlign: 'right'
-            } : {
-                textPosition: 'top',
-                textAlign: 'center'
-            };
+            const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
             const markArea = annotationAreaList.flatMap((annotationArea)=>{
-                const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = defaultOptions.textAlign, textBaseline = 'middle', textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
-                const textPosition = annotationArea.textPosition ?? defaultOptions.textPosition;
-                const dy = textPosition.includes('bottom') ? -1 * textFontSize : 0;
+                const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
+                const textPosition = annotationArea.textPosition ?? defaultTextPosition;
+                const textAlign = annotationArea.textAlign ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textAlign;
+                const textBaseline = annotationArea.textBaseline ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textBaseline;
                 const dataset = advancedVSeed.dataset.flat();
                 const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
                 return {
@@ -5542,15 +5796,15 @@
                         if ('function' == typeof xAxisHelper?.getBandwidth) {
                             const depth = context.fieldX.length ?? 0;
                             const xBandWidth = xAxisHelper?.getBandwidth?.(depth - 1);
-                            const yScale = yAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const startX = Math.min(...xyList.map((item)=>item.x)) - (outerPadding || 4);
                             const endX = Math.max(...xyList.map((item)=>item.x)) + (outerPadding || 4);
                             const width = endX - startX + xBandWidth;
                             const middleX = (endX + startX) / 2 + xBandWidth * (0.5 - bandPosition);
                             const minX = middleX - width / 2;
                             const maxX = middleX + width / 2;
-                            const minY = Math.min(...yScale.range());
-                            const maxY = Math.max(...yScale.range());
+                            const minY = 0;
+                            const maxY = regionRect.height;
                             return [
                                 {
                                     x: minX,
@@ -5573,15 +5827,15 @@
                         if ('function' == typeof yAxisHelper?.getBandwidth) {
                             const depth = context.fieldY.length ?? 0;
                             const yBandWidth = yAxisHelper?.getBandwidth?.(depth - 1);
-                            const xScale = xAxisHelper.getScale();
+                            const regionRect = context.getRegion().getLayoutRect();
                             const startY = Math.min(...xyList.map((item)=>item.y)) - (outerPadding || 4);
                             const endY = Math.max(...xyList.map((item)=>item.y)) + (outerPadding || 4);
                             const width = endY - startY + yBandWidth;
                             const middleY = (endY + startY) / 2 + yBandWidth * (0.5 - bandPosition);
                             const minY = middleY - width / 2;
                             const maxY = middleY + width / 2;
-                            const minX = Math.min(...xScale.range());
-                            const maxX = Math.max(...xScale.range());
+                            const minX = 0;
+                            const maxX = regionRect.width;
                             return [
                                 {
                                     x: minX,
@@ -5608,7 +5862,7 @@
                         visible: true,
                         text: text,
                         style: {
-                            dy: dy,
+                            opacity: 0.95,
                             textAlign: textAlign,
                             textBaseline: textBaseline,
                             stroke: textBackgroundColor,
@@ -5621,7 +5875,7 @@
                             visible: textBackgroundVisible,
                             padding: textBackgroundPadding,
                             style: {
-                                dy: dy,
+                                opacity: 0.95,
                                 cornerRadius: textBackgroundBorderRadius ?? 4,
                                 fill: textBackgroundColor,
                                 stroke: textBackgroundBorderColor,
@@ -5648,10 +5902,6 @@
                 markArea: markArea
             };
         };
-        function clamper(a, b) {
-            let t;
-            return a > b && (t = a, a = b, b = t), (x)=>Math.max(a, Math.min(b, x));
-        }
         function invNorm(p) {
             if (p <= 0 || p >= 1) return 0;
             const c1 = -0.00778489400243029, c2 = -0.322396458041136, c3 = -2.40075827716184, c4 = -2.54973253934373, c5 = 4.37466414146497, c6 = 2.93816398269878, d1 = .00778469570904146, d2 = .32246712907004, d3 = 2.445134137143, d4 = 3.75440866190742;
@@ -6182,7 +6432,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForColumn,
                 buildMeasures
@@ -6347,7 +6597,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForColumn,
                 buildMeasures
@@ -6529,7 +6779,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForBar,
                 buildMeasures
@@ -6645,6 +6895,7 @@
                 max,
                 min,
                 label: {
+                    space: 8,
                     visible: label?.visible,
                     formatMethod: (value)=>{
                         if (isBarPercent(vseed) || isColumnPercent(vseed) || isAreaPercent(vseed)) return createLinearPercentFormat(value, autoFormat, numFormat, formatter, percentFormatter);
@@ -6690,7 +6941,7 @@
                     }
                 },
                 innerOffset: {
-                    right: 7
+                    right: 12
                 }
             };
             result.axes = [
@@ -6885,7 +7136,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForBar,
                 buildMeasures
@@ -6999,7 +7250,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForBar,
                 buildMeasures
@@ -7086,7 +7337,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForLine,
                 buildMeasures
@@ -7283,7 +7534,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForLine,
                 buildMeasures
@@ -7696,7 +7947,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForScatter,
                 buildMeasuresForScatter
@@ -7802,6 +8053,7 @@
             const { enable } = tooltip;
             const { foldInfoList } = datasetReshapeInfo[0];
             result.tooltip = {
+                style: getTooltipStyle(tooltip),
                 visible: enable,
                 mark: {
                     title: {
@@ -8688,7 +8940,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForDualAxis,
                 buildMeasuresForDualAxis
@@ -9029,6 +9281,7 @@
             const foldInfoList = datasetReshapeInfo[0].foldInfoList;
             const unfoldInfo = datasetReshapeInfo[0].unfoldInfo;
             result.tooltip = {
+                style: getTooltipStyle(tooltip),
                 visible: enable,
                 mark: {
                     title: {
@@ -9112,6 +9365,7 @@
                 max,
                 min,
                 label: {
+                    space: 8,
                     visible: label?.visible,
                     formatMethod: (value)=>createLinearFormat(value, autoFormat, numFormat, formatter),
                     style: {
@@ -9154,7 +9408,7 @@
                     }
                 },
                 innerOffset: {
-                    top: 7
+                    top: 12
                 }
             };
             result.axes = [
@@ -9205,6 +9459,7 @@
                 max,
                 min,
                 label: {
+                    space: 8,
                     visible: label?.visible,
                     formatMethod: (value)=>createLinearFormat(value, autoFormat, numFormat, formatter),
                     style: {
@@ -9247,7 +9502,7 @@
                     }
                 },
                 innerOffset: {
-                    top: 7
+                    top: 12
                 }
             };
             result.axes = [
@@ -9460,7 +9715,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForPie,
                 buildMeasures
@@ -9621,7 +9876,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForPie,
                 buildMeasures
@@ -9786,7 +10041,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForRose,
                 buildMeasures
@@ -9939,7 +10194,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForRose,
                 buildMeasures
@@ -10134,7 +10389,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForRadar,
                 buildMeasures
@@ -10349,7 +10604,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForFunnel,
                 buildMeasures
@@ -10576,7 +10831,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             encodingAdapter([
                 defaultEncodingForHeatmap,
                 buildMeasures
@@ -10627,7 +10882,7 @@
                 }
                 return result;
             };
-        const cellStyle = (spec, context)=>{
+        const markStyle_cellStyle_cellStyle = (spec, context)=>{
             const result = {
                 ...spec,
                 cell: {
@@ -10662,6 +10917,7 @@
             const { enable } = tooltip;
             const { foldInfo } = datasetReshapeInfo[0];
             result.tooltip = {
+                style: getTooltipStyle(tooltip),
                 visible: enable,
                 mark: {
                     title: {
@@ -10779,7 +11035,7 @@
             colorAdapter(color_color, linearColor),
             label_label,
             colorAdapter(discreteLegend, heatmapColorLegend),
-            colorCellStyleFill(cellStyle),
+            colorCellStyleFill(markStyle_cellStyle_cellStyle),
             tooltipHeatmap,
             annotationPoint_annotationPoint,
             annotationVerticalLine_annotationVerticalLine,
@@ -10798,7 +11054,7 @@
                 colorAdapter(color_color, linearColor),
                 label_label,
                 tooltipHeatmap,
-                colorCellStyleFill(cellStyle),
+                colorCellStyleFill(markStyle_cellStyle_cellStyle),
                 annotationPoint_annotationPoint,
                 annotationVerticalLine_annotationVerticalLine,
                 annotationHorizontalLine_annotationHorizontalLine,
@@ -11152,7 +11408,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             boxplotConfig,
             encodingAdapter([
                 defaultEncodingForBoxplot,
@@ -11247,6 +11503,7 @@
             const defaultFormatter = valueMeasure ? createFormatterByMeasure(valueMeasure) : (v)=>v;
             result.tooltip = {
                 visible: enable,
+                style: getTooltipStyle(tooltip),
                 mark: {
                     title: {
                         visible: false
@@ -11374,6 +11631,7 @@
             const result = {
                 ...advancedVSeed
             };
+            const hasColorEncoding = (advancedVSeed?.dimensions || []).find((field)=>field?.encoding === 'color');
             const pickedConfig = chunk_2T7K3PFL_i(vseed, [
                 'backgroundColor',
                 'color',
@@ -11387,7 +11645,14 @@
                 'binStep',
                 'binValueType'
             ]);
-            const config = replaceNullToUndefined(pickedConfig);
+            let config = replaceNullToUndefined(pickedConfig);
+            if (!hasColorEncoding && !config?.legend?.enable) config = {
+                ...config,
+                legend: {
+                    ...config?.legend,
+                    enable: false
+                }
+            };
             result.config = {
                 ...result.config || {},
                 [chartType]: {
@@ -11396,6 +11661,30 @@
             };
             return result;
         };
+        const histogramXAxisConfig = (advancedVSeed, context)=>{
+            const { vseed } = context;
+            const { chartType } = vseed;
+            const result = {
+                ...advancedVSeed
+            };
+            const { dataset = [] } = advancedVSeed;
+            const flattenDatasert = dataset.flat();
+            const minValue = Math.min(...flattenDatasert.map((v)=>+v[BinStartMeasureId]));
+            const maxValue = Math.max(...flattenDatasert.map((v)=>+v[BinEndMeasureId]));
+            const chartConfig = result.config?.[chartType];
+            result.config = {
+                ...result.config || {},
+                [chartType]: {
+                    ...chartConfig,
+                    xAxis: {
+                        min: Number.isNaN(minValue) ? void 0 : minValue,
+                        max: Number.isNaN(maxValue) ? void 0 : maxValue,
+                        ...chartConfig?.xAxis || {}
+                    }
+                }
+            };
+            return result;
+        };
         const defaultEncodingForHistogram = (advancedVSeed)=>{
             const { measures: vseedMeasures = [], dimensions = [] } = advancedVSeed;
             const measures = findAllMeasures(vseedMeasures);
@@ -11467,42 +11756,9 @@
                 ...tooltip
             ]);
         };
-        const bin_bin = (data, options)=>{
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            const field = null == options ? void 0 : options.field;
-            if (!field) return [];
-            const countField = options.countField, n = data.length;
-            let thresholds, min = 1 / 0, max = -1 / 0;
-            if (options.extent) min = options.extent[0], max = options.extent[1];
-            else for(let i = 0; i < n; i++){
-                const v = data[i][field];
-                if (common_isNil(v)) continue;
-                const num = +v;
-                Number.isFinite(num) && (num < min && (min = num), num > max && (max = num));
-            }
-            if (!Number.isFinite(min) || !Number.isFinite(max) || 0 === n) return [];
-            if (options.thresholds && options.thresholds.length) thresholds = options.thresholds.slice(), thresholds.sort((a, b)=>a - b);
-            else if ("number" == typeof options.step && options.step > 0) {
-                const stepSize = options.step;
-                let startMin = min;
-                for(options.extent || (startMin = Math.floor(min / stepSize) * stepSize), thresholds = [
-                    startMin
-                ]; startMin < max;)startMin += stepSize, thresholds.push(startMin);
-            } else {
-                const bins = options.bins && options.bins > 0 ? Math.floor(options.bins) : 10;
-                if (max - min > 1) {
-                    const start = Math.floor(min), stepSizeInt = Math.ceil((max - start) / bins);
-                    thresholds = new Array(bins + 1);
-                    for(let i = 0; i <= bins; i++)thresholds[i] = i === bins ? max : start + stepSizeInt * i;
-                } else {
-                    const stepSize = (max - min) / bins;
-                    thresholds = new Array(bins + 1);
-                    for(let i = 0; i <= bins; i++)thresholds[i] = i === bins ? max : min + stepSize * i;
-                }
-            }
-            const numBins = Math.max(0, thresholds.length - 1);
-            if (0 === numBins) return [];
-            const x0Name = null != (_b = null == (_a = options.outputNames) ? void 0 : _a.x0) ? _b : "x0", x1Name = null != (_d = null == (_c = options.outputNames) ? void 0 : _c.x1) ? _d : "x1", countName = null != (_f = null == (_e = options.outputNames) ? void 0 : _e.count) ? _f : "count", valuesName = null != (_h = null == (_g = options.outputNames) ? void 0 : _g.values) ? _h : "values", percentageName = null != (_k = null == (_j = options.outputNames) ? void 0 : _j.percentage) ? _k : "percentage", out = [];
+        const subBin = (data, options)=>{
+            var _a, _b;
+            const { numBins: numBins, thresholds: thresholds, countName: countName, percentageName: percentageName, valuesName: valuesName, countField: countField, field: field, n: n, x0Name: x0Name, x1Name: x1Name } = options, out = [];
             if (!options.groupField) for(let i = 0; i < numBins; i++){
                 const rec = {
                     [x0Name]: thresholds[i],
@@ -11519,11 +11775,11 @@
                 if (Number.isFinite(num)) for(let j = 0; j < numBins; j++){
                     const left = thresholds[j], right = thresholds[j + 1];
                     if (num >= left && num < right || j === numBins - 1 && num <= right) {
-                        const datumCount = null != (_l = data[i][countField]) ? _l : 1;
+                        const datumCount = null != (_a = data[i][countField]) ? _a : 1;
                         if (usingGroup) {
                             let gk;
                             gk = common_isArray(groupField) ? groupField.map((f)=>String(data[i][f])).join("||") : String(data[i][groupField]);
-                            const m = binGroupCounts[j], prev = null != (_m = m.get(gk)) ? _m : 0;
+                            const m = binGroupCounts[j], prev = null != (_b = m.get(gk)) ? _b : 0;
                             m.set(gk, prev + datumCount);
                             const repMap = binGroupRepr[j];
                             if (repMap.has(gk) || (common_isArray(groupField) ? repMap.set(gk, Object.fromEntries(groupField.map((f)=>[
@@ -11565,6 +11821,72 @@
             }
             return finalOut;
         };
+        const bin_bin = (data, options)=>{
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            const field = null == options ? void 0 : options.field;
+            if (!field) return [];
+            const countField = options.countField, n = data.length;
+            let thresholds, min = 1 / 0, max = -1 / 0;
+            if (options.extent) min = options.extent[0], max = options.extent[1];
+            else for(let i = 0; i < n; i++){
+                const v = data[i][field];
+                if (common_isNil(v)) continue;
+                const num = +v;
+                Number.isFinite(num) && (num < min && (min = num), num > max && (max = num));
+            }
+            if (!Number.isFinite(min) || !Number.isFinite(max) || 0 === n) return [];
+            if (options.thresholds && options.thresholds.length) thresholds = options.thresholds.slice(), thresholds.sort((a, b)=>a - b);
+            else if ("number" == typeof options.step && options.step > 0) {
+                const stepSize = options.step;
+                let startMin = min;
+                for(options.extent || (startMin = Math.floor(min / stepSize) * stepSize), thresholds = [
+                    startMin
+                ]; startMin <= max;)startMin += stepSize, thresholds.push(startMin);
+            } else {
+                const bins = options.bins && options.bins > 0 ? Math.floor(options.bins) : 10;
+                if (max - min > 1) {
+                    const start = Math.floor(min), stepSizeInt = Math.ceil((max - start) / bins);
+                    thresholds = new Array(bins + 1);
+                    for(let i = 0; i <= bins; i++)thresholds[i] = start + stepSizeInt * i;
+                } else {
+                    const stepSize = (max - min) / bins;
+                    thresholds = new Array(bins + 1);
+                    for(let i = 0; i <= bins; i++)thresholds[i] = min + stepSize * i;
+                }
+            }
+            const numBins = Math.max(0, thresholds.length - 1);
+            if (0 === numBins) return [];
+            const x0Name = null != (_b = null == (_a = options.outputNames) ? void 0 : _a.x0) ? _b : "x0", x1Name = null != (_d = null == (_c = options.outputNames) ? void 0 : _c.x1) ? _d : "x1", countName = null != (_f = null == (_e = options.outputNames) ? void 0 : _e.count) ? _f : "count", valuesName = null != (_h = null == (_g = options.outputNames) ? void 0 : _g.values) ? _h : "values", percentageName = null != (_k = null == (_j = options.outputNames) ? void 0 : _j.percentage) ? _k : "percentage", facetField = common_isArray(null == options ? void 0 : options.facetField) ? null == options ? void 0 : options.facetField : (null == options ? void 0 : options.facetField) ? [
+                options.facetField
+            ] : [], groupField = common_isArray(null == options ? void 0 : options.groupField) ? null == options ? void 0 : options.groupField : (null == options ? void 0 : options.groupField) ? [
+                options.groupField
+            ] : [], subViewOptions = Object.assign(Object.assign({}, options), {
+                numBins: numBins,
+                thresholds: thresholds,
+                countName: countName,
+                percentageName: percentageName,
+                valuesName: valuesName,
+                countField: countField,
+                field: field,
+                n: n,
+                x0Name: x0Name,
+                x1Name: x1Name
+            });
+            if (!facetField.length) return subBin(data, subViewOptions);
+            const subViewMap = {};
+            return data.forEach((dataItem)=>{
+                const subViewKey = facetField.map((field)=>null == dataItem ? void 0 : dataItem[field]).join("-&&-");
+                subViewMap[subViewKey] ? subViewMap[subViewKey].push(dataItem) : subViewMap[subViewKey] = [
+                    dataItem
+                ];
+            }), Object.values(subViewMap).map((subDataset)=>subBin(subDataset, Object.assign(Object.assign({}, subViewOptions), {
+                    groupField: [
+                        ...groupField,
+                        ...facetField
+                    ],
+                    n: subDataset.length
+                }))).flat();
+        };
         const reshapeWithHistogramEncoding = (advancedVSeed, context)=>{
             const result = {
                 ...advancedVSeed
@@ -11578,7 +11900,20 @@
             const binStep = chartConfig?.binStep;
             const binValueType = chartConfig?.binValueType;
             let newDatasets = [];
-            let foldInfo = {};
+            let foldInfo = {
+                foldMap: {},
+                measureId: FoldMeasureId,
+                measureName: FoldMeasureName,
+                measureValue: FoldMeasureValue,
+                statistics: {
+                    max: -1 / 0,
+                    min: 1 / 0,
+                    sum: 0,
+                    count: 0,
+                    colorMin: 1 / 0,
+                    colorMax: -1 / 0
+                }
+            };
             let unfoldInfo = {};
             const colorMeasureId = getColorMeasureId(advancedVSeed, vseed);
             const allMeasures = findAllMeasures(measures);
@@ -11603,8 +11938,15 @@
                 binData.forEach((datum)=>{
                     datum[FoldMeasureId] = valueField;
                     datum[FoldMeasureName] = m?.alias ?? valueField;
-                    datum[FoldMeasureValue] = 'percentage' === binValueType ? datum[BinPercentageMeasureId] : datum[BinCountMeasureId];
+                    const valueNumber = 'percentage' === binValueType ? +datum[BinPercentageMeasureId] : +datum[BinCountMeasureId];
+                    datum[FoldMeasureValue] = valueNumber;
+                    datum[valueField] = valueNumber;
+                    foldInfo.statistics.min = Math.min(foldInfo.statistics.min, valueNumber);
+                    foldInfo.statistics.max = Math.max(foldInfo.statistics.max, valueNumber);
+                    foldInfo.statistics.sum += valueNumber;
+                    foldInfo.statistics.count++;
                 });
+                if (m?.id) foldInfo.foldMap[m?.id] = m?.alias;
                 const res = unfoldDimensions(binData, uniqDims, encoding, {
                     foldMeasureId: FoldMeasureId,
                     separator: "-",
@@ -11622,7 +11964,6 @@
                 res.dataset.forEach((datum)=>{
                     datum[BinStartMeasureId] = datum[encoding.x0[0]];
                     datum[BinEndMeasureId] = datum[encoding.x1[0]];
-                    datum[FoldMeasureId] = datum[encoding.y[0]];
                 });
                 newDatasets = res.dataset;
                 foldInfo = res.foldInfo;
@@ -11668,7 +12009,20 @@
                 if (!subMeasures) return;
                 const groupId = measureGroup.id;
                 let newDatasets = [];
-                let foldInfo = {};
+                let foldInfo = {
+                    foldMap: {},
+                    measureId: FoldMeasureId,
+                    measureName: FoldMeasureName,
+                    measureValue: FoldMeasureValue,
+                    statistics: {
+                        max: -1 / 0,
+                        min: 1 / 0,
+                        sum: 0,
+                        count: 0,
+                        colorMin: 1 / 0,
+                        colorMax: -1 / 0
+                    }
+                };
                 let unfoldInfo = {};
                 if (encoding.value?.length) {
                     const valueField = encoding.value[0];
@@ -11692,8 +12046,15 @@
                     binData.forEach((datum)=>{
                         datum[FoldMeasureId] = valueField;
                         datum[FoldMeasureName] = m?.alias ?? valueField;
-                        datum[FoldMeasureValue] = 'percentage' === binValueType ? datum[BinPercentageMeasureId] : datum[BinCountMeasureId];
+                        const valueNumber = 'percentage' === binValueType ? +datum[BinPercentageMeasureId] : +datum[BinCountMeasureId];
+                        datum[FoldMeasureValue] = valueNumber;
+                        datum[valueField] = valueNumber;
+                        foldInfo.statistics.min = Math.min(foldInfo.statistics.min, valueNumber);
+                        foldInfo.statistics.max = Math.max(foldInfo.statistics.max, valueNumber);
+                        foldInfo.statistics.sum += valueNumber;
+                        foldInfo.statistics.count++;
                     });
+                    if (m?.id) foldInfo.foldMap[m?.id] = m?.alias;
                     const res = unfoldDimensions(binData, uniqDims, encoding, {
                         foldMeasureId: FoldMeasureId,
                         separator: "-",
@@ -11736,7 +12097,7 @@
             initAdvancedVSeed_initAdvancedVSeed,
             default_defaultMeasures_defaultMeasures,
             defaultDimensions_defaultDimensions,
-            defaultMeasureId,
+            defaultMeasureId_defaultMeasureId,
             histogramConfig,
             encodingAdapter([
                 defaultEncodingForHistogram,
@@ -11756,6 +12117,7 @@
             ], [
                 pivotReshapeWithHistogramEncoding
             ]),
+            histogramXAxisConfig,
             sortLegend_sortLegend,
             theme_theme,
             markStyle_markStyle,
@@ -11776,6 +12138,10 @@
                     clip: true
                 }
             ];
+            result.legends = {
+                visible: false
+            };
+            result.barGap = 2;
             result.animation = true;
             return result;
         };
@@ -11806,6 +12172,7 @@
             } } = baseConfig;
             const { enable } = tooltip;
             result.tooltip = {
+                style: getTooltipStyle(tooltip),
                 visible: enable,
                 mark: {
                     title: {
@@ -11973,7 +12340,7 @@
             const lineTheme = advancedVSeed.config[chartType]?.regressionLine;
             if (!regressionLine || !regressionLine.kdeRegressionLine) return result;
             const rowColumnFields = T(dimensions.filter((dim)=>'row' === dim.encoding || 'column' === dim.encoding), (item)=>item.id);
-            const lineList = array_array(regressionLine.kdeRegressionLine);
+            const lineList = array_array(regressionLine.kdeRegressionLine).filter((kdeLine)=>false !== kdeLine.enable);
             if (!result.customMark) result.customMark = [];
             lineList.forEach((line, lineIndex)=>{
                 const theme = lineTheme.kdeRegressionLine ?? {};
@@ -11996,7 +12363,7 @@
                                 const scaleY = s.getYAxisHelper().getScale?.(0);
                                 const viewData = s.getViewData()?.latestData;
                                 if (!dataset || !dataset.length || !viewData || !viewData.length || !scaleY) return null;
-                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>d[encoding.value?.[0]]);
+                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>+d[encoding.value?.[0]]);
                                 const res = kde_kde(simpleData, {
                                     bandwidth: Math.abs(viewData[0][BinEndMeasureId] - viewData[0][BinStartMeasureId])
                                 });
@@ -12109,7 +12476,7 @@
             const lineTheme = advancedVSeed.config[chartType]?.regressionLine;
             if (!regressionLine || !regressionLine.ecdfRegressionLine) return result;
             const rowColumnFields = T(dimensions.filter((dim)=>'row' === dim.encoding || 'column' === dim.encoding), (item)=>item.id);
-            const lineList = array_array(regressionLine.ecdfRegressionLine);
+            const lineList = array_array(regressionLine.ecdfRegressionLine).filter((ecdfLine)=>false !== ecdfLine.enable);
             if (!result.customMark) result.customMark = [];
             lineList.forEach((line, lineIndex)=>{
                 const theme = lineTheme?.ecdfRegressionLine ?? {};
@@ -12132,7 +12499,7 @@
                                 const scaleY = s.getYAxisHelper().getScale?.(0);
                                 const viewData = s.getViewData()?.latestData;
                                 if (!dataset || !dataset.length || !viewData || !viewData.length || !scaleY) return null;
-                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>d[encoding.value?.[0]]);
+                                const simpleData = dataset.filter((entry)=>rowColumnFields.length ? rowColumnFields.every((dim)=>entry[dim.id] === viewData[0][dim.id]) : true).map((d)=>+d[encoding.value?.[0]]);
                                 const res = ecdf(simpleData);
                                 const N = Math.max(3, Math.floor(simpleData.length / 4));
                                 const lineData = res.evaluateGrid(N);
@@ -12340,10 +12707,21 @@
                 maxSize: 1,
                 shapeType: 'rectRound',
                 position: 'rt',
-                labelColor: '#646A73',
                 labelFontSize: 12,
                 labelFontWeight: 400
             });
+        const getDarkLegend = ()=>({
+                ...getDefaultLegend(),
+                labelColor: '#BBBDC3',
+                pagerIconColor: '#89909D',
+                pagerIconDisableColor: '#2A2D33'
+            });
+        const getLightLegend = ()=>({
+                ...getDefaultLegend(),
+                labelColor: '#606773',
+                pagerIconColor: '#89909D',
+                pagerIconDisableColor: '#F1F2F5'
+            });
         const getDefaultTableConfig = ()=>({
                 bodyFontSize: 12,
                 bodyBackgroundColor: 'transparent',
@@ -12389,10 +12767,40 @@
                 titleFontSize: tableConfig.headerFontSize,
                 titleFontWeight: 'bold'
             });
-        const getLightPivotChartGridConfig = ()=>pickPivotChartGridConfig(getLightTableConfig());
-        const getDarkPivotChartGridConfig = ()=>pickPivotChartGridConfig(getDarkTableConfig());
+        const getLightPivotChartGridConfig = ()=>{
+            const res = pickPivotChartGridConfig(getLightTableConfig());
+            res.chartGridColor = '#F0F1F6';
+            res.axisLabelColor = '#BCC1CB';
+            return res;
+        };
+        const getDarkPivotChartGridConfig = ()=>{
+            const res = pickPivotChartGridConfig(getDarkTableConfig());
+            return res;
+        };
         const getDefaultTooltip = ()=>({
-                enable: true
+                enable: true,
+                borderRadius: 12,
+                borderWidth: 1,
+                padding: 7,
+                lineHeight: 12,
+                fontSize: 12,
+                lineSpace: 6
+            });
+        const getLightTooltip = ()=>({
+                ...getDefaultTooltip(),
+                borderColor: '#e3e5e8',
+                backgroundColor: '#fff',
+                keyColor: '#606773',
+                valueColor: '#21252c',
+                titleColor: '#21252c'
+            });
+        const getDarkTooltip = ()=>({
+                ...getDefaultTooltip(),
+                borderColor: '#3c3f44',
+                backgroundColor: '#2b2d30',
+                keyColor: '#89909D',
+                valueColor: '#E2E3E6',
+                titleColor: '#E2E3E6'
             });
         const getLightLinearAxis = ()=>({
                 nice: true,
@@ -12401,20 +12809,20 @@
                 label: {
                     visible: true,
                     labelAngle: 0,
-                    labelColor: '#797B85',
+                    labelColor: '#8F959E',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 },
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#646A73',
+                    titleColor: '#606773',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
                 grid: {
                     visible: true,
-                    gridColor: '#36415926',
+                    gridColor: '#E3E5EB',
                     gridWidth: 0.5,
                     gridLineDash: [
                         4,
@@ -12425,11 +12833,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#3641594d'
+                    tickColor: '#21252C'
                 },
                 line: {
                     visible: false,
-                    lineColor: '#3641594d',
+                    lineColor: '#21252C',
                     lineWidth: 1
                 }
             });
@@ -12447,20 +12855,20 @@
                 label: {
                     visible: true,
                     labelAngle: 0,
-                    labelColor: '#797B85',
+                    labelColor: '#8F959E',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 },
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#646A73',
+                    titleColor: '#606773',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
                 grid: {
                     visible: false,
-                    gridColor: '#36415926',
+                    gridColor: '#E3E5EB',
                     gridWidth: 0.5,
                     gridLineDash: [
                         4,
@@ -12471,11 +12879,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#3641594d'
+                    tickColor: '#21252C'
                 },
                 line: {
                     visible: true,
-                    lineColor: '#3641594d',
+                    lineColor: '#21252C',
                     lineWidth: 1
                 }
             });
@@ -12485,14 +12893,14 @@
                 label: {
                     visible: true,
                     labelAngle: 0,
-                    labelColor: '#E2E3E6',
+                    labelColor: '#888C93',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 },
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#FDFDFD',
+                    titleColor: '#BBBDC3',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
@@ -12509,11 +12917,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#4B4F54'
+                    tickColor: '#303339'
                 },
                 line: {
                     visible: false,
-                    lineColor: '#4B4F54',
+                    lineColor: '#303339',
                     lineWidth: 1
                 }
             });
@@ -12531,14 +12939,14 @@
                 label: {
                     visible: true,
                     labelAngle: 0,
-                    labelColor: '#E2E3E6',
+                    labelColor: '#888C93',
                     labelFontSize: 12,
                     labelFontWeight: 400
                 },
                 title: {
                     visible: false,
                     titleText: '',
-                    titleColor: '#FDFDFD',
+                    titleColor: '#BBBDC3',
                     titleFontSize: 12,
                     titleFontWeight: 400
                 },
@@ -12555,11 +12963,11 @@
                     visible: false,
                     tickInside: false,
                     tickSize: 4,
-                    tickColor: '#4B4F54'
+                    tickColor: '#303339'
                 },
                 line: {
                     visible: true,
-                    lineColor: '#4B4F54',
+                    lineColor: '#303339',
                     lineWidth: 1
                 }
             });
@@ -12567,15 +12975,15 @@
                 textBackgroundVisible: true,
                 textFontSize: 12,
                 textFontWeight: 400,
-                textBackgroundBorderRadius: 4,
+                textBackgroundBorderRadius: 0,
                 textBackgroundBorderWidth: 1,
                 textBackgroundPadding: 2
             });
         const getLightAnnotationPoint = ()=>({
                 ...getDefaultAnnotationPoint(),
                 textColor: '#ffffff',
-                textBackgroundColor: '#364159',
-                textBackgroundBorderColor: '#3641594d'
+                textBackgroundColor: '#BCC1CB',
+                textBackgroundBorderColor: '#BCC1CB'
             });
         const getDefaultAnnotationLine = ()=>({
                 lineVisible: true,
@@ -12604,7 +13012,7 @@
                 textBackgroundVisible: true,
                 textBackgroundBorderWidth: 1,
                 textBackgroundBorderRadius: 0,
-                textBackgroundPadding: 4,
+                textBackgroundPadding: 2,
                 areaBorderWidth: 0,
                 areaBorderRadius: 0,
                 areaLineDash: [
@@ -12630,9 +13038,9 @@
             });
         const getDarkAnnotationPoint = ()=>({
                 ...getDefaultAnnotationPoint(),
-                textColor: '#4B4F54',
-                textBackgroundColor: '#ffffff',
-                textBackgroundBorderColor: '#ffffff'
+                textColor: '#E2E3E6',
+                textBackgroundColor: '#55595F',
+                textBackgroundBorderColor: '#55595F'
             });
         const getDarkAnnotationHorizontalLine = ()=>({
                 ...getDefaultAnnotationLine(),
@@ -12758,8 +13166,8 @@
                 backgroundColor: 'transparent',
                 color: getLightColor(),
                 label: getLightLabel(),
-                legend: getDefaultLegend(),
-                tooltip: getDefaultTooltip()
+                legend: getLightLegend(),
+                tooltip: getLightTooltip()
             };
             const tableConfig = getLightTableConfig();
             return {
@@ -13027,8 +13435,8 @@
                 backgroundColor: 'transparent',
                 color: getDarkColor(),
                 label: getDarkLabel(),
-                legend: getDefaultLegend(),
-                tooltip: getDefaultTooltip()
+                legend: getDarkLegend(),
+                tooltip: getDarkTooltip()
             };
             const tableConfig = getDarkTableConfig();
             return {
@@ -16996,6 +17404,61 @@
         const zLinearColor = schemas_object({
             linearColorScheme: schemas_array(schemas_string()).nullish()
         });
+        const zSelector = union([
+            schemas_string(),
+            schemas_number(),
+            schemas_object({
+                field: schemas_string(),
+                operator: schemas_enum([
+                    '=',
+                    '==',
+                    '!=',
+                    '>',
+                    '<',
+                    '>=',
+                    '<=',
+                    'between'
+                ]).nullish(),
+                op: schemas_enum([
+                    '=',
+                    '==',
+                    '!=',
+                    '>',
+                    '<',
+                    '>=',
+                    '<=',
+                    'between'
+                ]).nullish(),
+                value: union([
+                    schemas_string(),
+                    schemas_number(),
+                    schemas_array(union([
+                        schemas_string(),
+                        schemas_number()
+                    ]))
+                ])
+            }),
+            schemas_object({
+                field: schemas_string(),
+                operator: schemas_enum([
+                    'in',
+                    'not in'
+                ]).nullish(),
+                op: schemas_enum([
+                    'in',
+                    'not in'
+                ]).nullish(),
+                value: union([
+                    schemas_string(),
+                    schemas_number(),
+                    schemas_array(union([
+                        schemas_string(),
+                        schemas_number()
+                    ]))
+                ])
+            })
+        ]);
+        const zSelectors = schemas_array(zSelector);
         const zLabel = schemas_object({
             enable: schemas_boolean().nullish(),
             wrap: schemas_boolean().nullish(),
@@ -17010,7 +17473,11 @@
             labelColor: schemas_string().nullish(),
             labelColorSmartInvert: schemas_boolean().nullish(),
             labelPosition: schemas_string().nullish(),
-            labelOverlap: schemas_boolean().nullish()
+            labelOverlap: schemas_boolean().nullish(),
+            selector: union([
+                zSelector,
+                zSelectors
+            ]).nullish()
         });
         const zLegend = schemas_object({
             enable: schemas_boolean().default(true).nullish(),
@@ -17063,6 +17530,8 @@
                 'br'
             ]).default('bottom').nullish(),
             labelColor: schemas_string().default('#fff').nullish(),
+            pagerIconColor: schemas_string().nullish(),
+            pagerIconDisableColor: schemas_string().nullish(),
             labelFontSize: schemas_number().default(12).nullish(),
             labelFontWeight: schemas_number().or(schemas_string()).default(400).nullish()
         });
@@ -17092,63 +17561,19 @@
             enable: schemas_boolean().default(true).nullish()
         });
         const zTooltip = schemas_object({
-            enable: schemas_boolean().default(true).nullish()
+            enable: schemas_boolean().default(true).nullish(),
+            borderColor: schemas_string().nullish(),
+            borderWidth: schemas_number().nullish(),
+            borderRadius: schemas_number().nullish(),
+            padding: schemas_number().or(schemas_array(schemas_number()).length(4)).nullish(),
+            backgroundColor: schemas_string().nullish(),
+            lineHeight: schemas_number().nullish(),
+            fontSize: schemas_number().nullish(),
+            lineSpace: schemas_number().nullish(),
+            keyColor: schemas_string().nullish(),
+            valueColor: schemas_string().nullish(),
+            titleColor: schemas_string().nullish()
         });
-        const zSelector = union([
-            schemas_string(),
-            schemas_number(),
-            schemas_object({
-                field: schemas_string(),
-                operator: schemas_enum([
-                    '=',
-                    '==',
-                    '!=',
-                    '>',
-                    '<',
-                    '>=',
-                    '<=',
-                    'between'
-                ]).nullish(),
-                op: schemas_enum([
-                    '=',
-                    '==',
-                    '!=',
-                    '>',
-                    '<',
-                    '>=',
-                    '<=',
-                    'between'
-                ]).nullish(),
-                value: union([
-                    schemas_string(),
-                    schemas_number(),
-                    schemas_array(union([
-                        schemas_string(),
-                        schemas_number()
-                    ]))
-                ])
-            }),
-            schemas_object({
-                field: schemas_string(),
-                operator: schemas_enum([
-                    'in',
-                    'not in'
-                ]).nullish(),
-                op: schemas_enum([
-                    'in',
-                    'not in'
-                ]).nullish(),
-                value: union([
-                    schemas_string(),
-                    schemas_number(),
-                    schemas_array(union([
-                        schemas_string(),
-                        schemas_number()
-                    ]))
-                ])
-            })
-        ]);
-        const zSelectors = schemas_array(zSelector);
         const zAnnotationPoint = schemas_object({
             selector: union([
                 zSelector,
@@ -17334,7 +17759,9 @@
             minChartHeight: schemas_number().nullish(),
             titleFontColor: schemas_string().nullish(),
             titleFontSize: schemas_number().nullish(),
-            titleFontWeight: schemas_string().nullish()
+            titleFontWeight: schemas_string().nullish(),
+            chartGridColor: schemas_string().nullish(),
+            axisLabelColor: schemas_string().nullish()
         });
         const zLineConfig = schemas_object({
             backgroundColor: zBackgroundColor.nullish(),
@@ -17357,6 +17784,7 @@
         const zBarMaxWidth = schemas_number().or(schemas_string());
         const zBarGapInGroup = schemas_number().or(schemas_string());
         const zEcdfRegressionLine = schemas_object({
+            enable: schemas_boolean().nullish(),
             color: schemas_string().nullish(),
             lineWidth: schemas_number().nullish(),
             lineDash: schemas_array(schemas_number()).nullish(),
@@ -17723,6 +18151,17 @@
         const zAnalysis = schemas_object({
             orderMapping: record(schemas_string(), schemas_array(schemas_string())).nullish()
         });
+        const zBodyCellStyle = schemas_object({
+            selector: union([
+                zSelector,
+                zSelectors
+            ]).nullish(),
+            backgroundColor: schemas_string().nullish(),
+            textColor: schemas_string().nullish(),
+            textFontSize: schemas_number().nullish(),
+            borderColor: schemas_string().nullish(),
+            borderLineWidth: schemas_number().nullish()
+        });
         const zLocale = schemas_enum([
             'zh-CN',
             'en-US'
@@ -17746,6 +18185,7 @@
             hoverHeaderInlineBackgroundColor: schemas_string().nullish(),
             selectedBorderColor: schemas_string().nullish(),
             selectedBackgroundColor: schemas_string().nullish(),
+            bodyCellStyle: zBodyCellStyle.nullish(),
             theme: zTheme.nullish(),
             locale: zLocale.nullish()
         });
@@ -17768,6 +18208,7 @@
             hoverHeaderInlineBackgroundColor: schemas_string().nullish(),
             selectedBorderColor: schemas_string().nullish(),
             selectedBackgroundColor: schemas_string().nullish(),
+            bodyCellStyle: zBodyCellStyle.nullish(),
             theme: zTheme.nullish(),
             locale: zLocale.nullish()
         });
@@ -18077,8 +18518,8 @@
             annotationVerticalLine: schemas_array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(),
             annotationHorizontalLine: schemas_array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(),
             annotationArea: schemas_array(zAnnotationArea).or(zAnnotationArea).nullish(),
-            ecdfRegressionLine: schemas_array(zEcdfRegressionLine).or(zEcdfRegressionLine).or(schemas_boolean()).nullish(),
-            kdeRegressionLine: schemas_array(zKdeRegressionLine).or(zKdeRegressionLine).or(schemas_boolean()).nullish(),
+            ecdfRegressionLine: schemas_array(zEcdfRegressionLine).or(zEcdfRegressionLine).nullish(),
+            kdeRegressionLine: schemas_array(zKdeRegressionLine).or(zKdeRegressionLine).nullish(),
             locale: zLocale.nullish()
         });
         const zRose = schemas_object({
@@ -18226,6 +18667,9 @@
             zBoxplot,
             zHistogram
         ]);
+        const zCellStyle = schemas_object({
+            bodyCellStyle: zBodyCellStyle.nullish()
+        });
         const zAdvancedVSeed = schemas_object({
             chartType: zChartType,
             dataset: zDataset,
@@ -18237,6 +18681,7 @@
             analysis: zAnalysis,
             theme: zTheme,
             markStyle: zMarkStyle,
+            cellStyle: zCellStyle,
             customTheme: zCustomThemeConfig,
             annotation: zAnnotation,
             locale: zLocale,