@visactor/vseed 0.0.11 → 0.0.13

package/dist/index.js

@@ -1,4 +1,4 @@
-import { clone as external_remeda_clone, isArray, isNumber, isString, mergeDeep as external_remeda_mergeDeep, omit, pick as external_remeda_pick, unique } from "remeda";
+import { clone as external_remeda_clone, groupBy, isArray, isEmpty, isNullish, isNumber, isString, mergeDeep as external_remeda_mergeDeep, omit, pick as external_remeda_pick, unique } from "remeda";
 import { z } from "zod";
 const initAdvancedVSeed = (advancedVSeed, context)=>{
     const { vseed } = context;
@@ -23,6 +23,145 @@ const isPivotChart = (vseed)=>{
     const hasMeasureGroup = measures && measures.find((measure)=>measure && measure.children);
     return hasRowOrColumnDimension || hasMeasureGroup;
 };
+var i18n_namespaceObject = JSON.parse('{"指标名称":{"en-US":"MeasureName","zh-CN":"指标名称"},"指标Id":{"en-US":"MeasureId","zh-CN":"指标Id"},"指标值":{"en-US":"MeasureValue","zh-CN":"指标值"}}');
+class Intl {
+    static instance;
+    translateMap = i18n_namespaceObject;
+    locale = 'zh-CN';
+    canTranslate = (value)=>!!this.translateMap[value];
+    i18n = (segments, ...values)=>{
+        const text = segments.map((segment, index)=>segment + (values[index] || '')).join('');
+        const translatedText = this.translateMap?.[text]?.[this.locale];
+        if (isNullish(translatedText)) {
+            console.warn(`i18n ${this.locale} no translate: ${text}`);
+            return text;
+        }
+        return translatedText;
+    };
+    setLocale = (locale)=>{
+        this.locale = locale;
+    };
+    getLocale = ()=>this.locale;
+    static getInstance() {
+        if (!Intl.instance) Intl.instance = new Intl();
+        return Intl.instance;
+    }
+}
+const intl = Intl.getInstance();
+const i18n = intl.i18n;
+const createNumFormatter = (format)=>{
+    const { type = 'number', ratio = 1, symbol = '', thousandSeparator = true, decimalPlaces = 2, round = 'round', prefix = '', suffix = '' } = format || {};
+    return (value)=>{
+        let num = Number(value);
+        let typeSymbol = '';
+        if (Number.isNaN(num)) return num.toString();
+        if ('percent' === type) {
+            num *= 100;
+            typeSymbol = '%';
+        } else if ('permille' === type) {
+            num *= 1000;
+            typeSymbol = "\u2030";
+        } else if ('number' === type) num /= ratio || 1;
+        const multiplier = 10 ** decimalPlaces;
+        num = Math[round](num * multiplier) / multiplier;
+        let numStr = num.toFixed(decimalPlaces);
+        if (thousandSeparator) {
+            const parts = numStr.split('.');
+            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            numStr = parts.join('.');
+        }
+        return `${prefix}${numStr}${typeSymbol}${symbol}${suffix}`;
+    };
+};
+const autoNumFormatter = (value, locale = intl.getLocale())=>{
+    if (null == value) return String(value);
+    const num = Number(value);
+    if (Number.isNaN(num)) return String(value);
+    const countDecimalPlaces = (num)=>{
+        if (Number.isInteger(num)) return 0;
+        const str = num.toString();
+        if (str.indexOf('e-') > -1) return parseInt(str.split('e-')[1]);
+        const decimalPart = str.split('.')[1];
+        if (!decimalPart) return 0;
+        const decimalPlaces = decimalPart.replace(/0+$/, '').length;
+        return Math.max(2, decimalPlaces);
+    };
+    const numFormat = {
+        type: 'number',
+        decimalPlaces: countDecimalPlaces(num),
+        round: 'round',
+        thousandSeparator: true
+    };
+    const rules = NUMBER_FORMAT_RULES[locale] || NUMBER_FORMAT_RULES['default'];
+    for (const rule of rules)if (num >= rule.threshold) {
+        numFormat.ratio = rule.ratio;
+        numFormat.symbol = rule.symbol;
+        break;
+    }
+    return createNumFormatter(numFormat)(value);
+};
+const NUMBER_FORMAT_RULES = {
+    'zh-CN': [
+        {
+            threshold: 100000000,
+            ratio: 100000000,
+            symbol: "\u4EBF"
+        },
+        {
+            threshold: 10000,
+            ratio: 10000,
+            symbol: "\u4E07"
+        }
+    ],
+    'en-US': [
+        {
+            threshold: 1000000000,
+            ratio: 1000000000,
+            symbol: 'B'
+        },
+        {
+            threshold: 1000000,
+            ratio: 1000000,
+            symbol: 'M'
+        },
+        {
+            threshold: 1000,
+            ratio: 1000,
+            symbol: 'K'
+        }
+    ],
+    default: [
+        {
+            threshold: 1000000000,
+            ratio: 1000000000,
+            symbol: 'B'
+        },
+        {
+            threshold: 1000000,
+            ratio: 1000000,
+            symbol: 'M'
+        },
+        {
+            threshold: 1000,
+            ratio: 1000,
+            symbol: 'K'
+        }
+    ]
+};
+const createFormatter = (format)=>createNumFormatter(format);
+const autoFormatter = (value, locale)=>autoNumFormatter(value, locale);
+function findMeasureById(measures, id) {
+    if (!measures) return;
+    const stack = [
+        ...measures
+    ];
+    while(stack.length > 0){
+        const current = stack.pop();
+        if (!current) continue;
+        if (current.id === id && !('children' in current)) return current;
+        if ('children' in current && current.children) stack.push(...current.children);
+    }
+}
 const autoMeasures = (advancedVSeed, context)=>{
     const result = {
         ...advancedVSeed
@@ -73,16 +212,16 @@ const autoMeasureGroup = (advancedVSeed, context)=>{
     const measureGroups = [];
     for (const measure of measures)if ('children' in measure) {
         if (currentGroup.children?.length) {
-            currentGroup.id = currentGroup.children.map((item)=>item.id).join('-');
             currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
+            currentGroup.id = currentGroup.alias + currentGroup.children.map((item)=>item.id).join('-');
             measureGroups.push(currentGroup);
             currentGroup = createEmptyMeasureGroup();
         }
         measureGroups.push(measure);
     } else currentGroup.children?.push(measure);
     if (currentGroup.children?.length) {
-        currentGroup.id = currentGroup.children.map((item)=>item.id).join('-');
         currentGroup.alias = currentGroup.children.map((item)=>item.alias).join('-');
+        currentGroup.id = currentGroup.alias + currentGroup.children.map((item)=>item.id).join('-');
         measureGroups.push(currentGroup);
         currentGroup = createEmptyMeasureGroup();
     }
@@ -207,18 +346,18 @@ const dataReshapeFor2D1M = (dataset, dimensions, measures, options)=>{
         const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, [
             {
                 id: foldMeasureId,
-                alias: "\u6307\u6807Id",
+                alias: i18n`指标Id`,
                 location: 'dimension'
             },
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
         ], 1, unfoldDimensionGroup);
         return {
@@ -232,13 +371,13 @@ const dataReshapeFor2D1M = (dataset, dimensions, measures, options)=>{
             ...dimensions,
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
         ], 1, unfoldDimensionGroup);
         return {
@@ -269,13 +408,13 @@ const dataReshapeFor1D1M = (dataset, dimensions, measures, options)=>{
         const { dataset: finalDataset, unfoldInfo } = unfoldDimensions(foldedDataset, [
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
         ], 0, unfoldDimensionGroup);
         return {
@@ -289,13 +428,13 @@ const dataReshapeFor1D1M = (dataset, dimensions, measures, options)=>{
             ...dimensions,
             {
                 id: foldMeasureName,
-                alias: "\u6307\u6807\u540D\u79F0",
+                alias: i18n`指标名称`,
                 location: 'dimension'
             }
         ], [
             {
                 id: foldMeasureValue,
-                alias: "\u6307\u6807\u503C"
+                alias: i18n`指标值`
             }
         ], 0, unfoldDimensionGroup);
         return {
@@ -565,7 +704,28 @@ const lineConfig = (advancedVSeed, context)=>{
     };
     const config = external_remeda_pick(vseed, [
         'xAxis',
-        'yAxis'
+        'yAxis',
+        'crosshairLine'
+    ]);
+    result.config = {
+        ...result.config || {},
+        [chartType]: {
+            ...config
+        }
+    };
+    return result;
+};
+const columnConfig = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { chartType } = vseed;
+    const result = {
+        ...advancedVSeed
+    };
+    const config = external_remeda_pick(vseed, [
+        'xAxis',
+        'yAxis',
+        'crosshairRect',
+        'stackCornerRadius'
     ]);
     result.config = {
         ...result.config || {},
@@ -590,14 +750,13 @@ const pieConfig = (advancedVSeed, context)=>{
     };
     return result;
 };
-const barConfig = lineConfig;
-const barParallelConfig = lineConfig;
-const barPercentConfig = lineConfig;
-const columnConfig = lineConfig;
-const columnParallelConfig = lineConfig;
-const columnPercentConfig = lineConfig;
 const areaConfig = lineConfig;
 const areaPercentConfig = lineConfig;
+const barConfig = columnConfig;
+const barParallelConfig = columnConfig;
+const barPercentConfig = columnConfig;
+const columnParallelConfig = columnConfig;
+const columnPercentConfig = columnConfig;
 const vchartTheme = (advancedVSeed, context)=>{
     const { customTheme, vseed } = context;
     const { theme = 'light', chartType } = vseed;
@@ -632,7 +791,10 @@ const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
 const markStyle_markStyle = (advancedVSeed, context)=>{
     const { vseed } = context;
     const markStyle = external_remeda_pick(vseed, [
-        'barStyle'
+        'barStyle',
+        'pointStyle',
+        'lineStyle',
+        'areaStyle'
     ]);
     return {
         ...advancedVSeed,
@@ -652,8 +814,17 @@ const annotation_annotation = (advancedVSeed, context)=>{
         annotation
     };
 };
+const locale_locale = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const { locale } = vseed;
+    return {
+        ...advancedVSeed,
+        locale: locale || 'zh-CN'
+    };
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -665,10 +836,12 @@ const lineAdvancedPipeline = [
     vchartBaseConfig,
     lineConfig,
     vchartTheme,
+    markStyle_markStyle,
     annotation_annotation
 ];
 const barAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -685,6 +858,7 @@ const barAdvancedPipeline = [
 ];
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -701,6 +875,7 @@ const barParallelAdvancedPipeline = [
 ];
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -717,6 +892,7 @@ const barPercentAdvancedPipeline = [
 ];
 const columnAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -733,6 +909,7 @@ const columnAdvancedPipeline = [
 ];
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -749,6 +926,7 @@ const columnParallelAdvancedPipeline = [
 ];
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -765,6 +943,7 @@ const columnPercentAdvancedPipeline = [
 ];
 const areaAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -776,10 +955,12 @@ const areaAdvancedPipeline = [
     areaConfig,
     vchartBaseConfig,
     vchartTheme,
+    markStyle_markStyle,
     annotation_annotation
 ];
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -791,10 +972,12 @@ const areaPercentAdvancedPipeline = [
     areaPercentConfig,
     vchartBaseConfig,
     vchartTheme,
+    markStyle_markStyle,
     annotation_annotation
 ];
 const pieAdvancedPipeline = [
     initAdvancedVSeed,
+    locale_locale,
     autoMeasures,
     autoDimensions,
     pivotAdapter([
@@ -1081,7 +1264,15 @@ const xBand = (spec, context)=>{
                 lineWidth: line?.lineWidth,
                 stroke: line?.lineColor
             }
-        }
+        },
+        paddingInner: [
+            0.15,
+            0.1
+        ],
+        paddingOuter: [
+            0.075,
+            0.1
+        ]
     };
     result.axes = [
         ...result.axes,
@@ -1089,12 +1280,15 @@ const xBand = (spec, context)=>{
     ];
     return result;
 };
+const ANNOTATION_Z_INDEX = 1000;
+const LINEAR_AXIS_INNER_OFFSET_TOP = 7;
 const xLinear = (spec, context)=>{
     const result = {
         ...spec
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
+    const { locale } = advancedVSeed;
     const config = advancedVSeed.config?.[chartType]?.xAxis;
     if (!result.axes) result.axes = [];
     if (!config) {
@@ -1120,6 +1314,7 @@ const xLinear = (spec, context)=>{
         min,
         label: {
             visible: label?.visible,
+            formatMethod: (value)=>autoFormatter(value, locale),
             style: {
                 fill: label?.labelColor,
                 angle: label?.labelAngle,
@@ -1157,6 +1352,9 @@ const xLinear = (spec, context)=>{
                 lineWidth: line?.lineWidth,
                 stroke: line?.lineColor
             }
+        },
+        innerOffset: {
+            top: LINEAR_AXIS_INNER_OFFSET_TOP
         }
     };
     result.axes = [
@@ -1244,7 +1442,15 @@ const yBand = (spec, context)=>{
                 lineWidth: line?.lineWidth,
                 stroke: line?.lineColor
             }
-        }
+        },
+        paddingInner: [
+            0.15,
+            0.1
+        ],
+        paddingOuter: [
+            0.075,
+            0.1
+        ]
     };
     result.axes = [
         ...result.axes,
@@ -1258,6 +1464,7 @@ const yLinear = (spec, context)=>{
     };
     const { advancedVSeed, vseed } = context;
     const { chartType } = vseed;
+    const { locale } = advancedVSeed;
     const config = advancedVSeed.config?.[chartType]?.yAxis;
     if (!result.axes) result.axes = [];
     if (!config) {
@@ -1283,6 +1490,7 @@ const yLinear = (spec, context)=>{
         min,
         label: {
             visible: label?.visible,
+            formatMethod: (value)=>autoFormatter(value, locale),
             style: {
                 fill: label?.labelColor,
                 angle: label?.labelAngle,
@@ -1320,6 +1528,9 @@ const yLinear = (spec, context)=>{
                 lineWidth: line?.lineWidth,
                 stroke: line?.lineColor
             }
+        },
+        innerOffset: {
+            top: LINEAR_AXIS_INNER_OFFSET_TOP
         }
     };
     result.axes = [
@@ -1342,6 +1553,15 @@ const stackInverse = (spec)=>{
     result.stackInverse = true;
     return result;
 };
+const stackCornerRadius_stackCornerRadius = (spec, context)=>{
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const stackCornerRadius = advancedVSeed.config?.[chartType]?.stackCornerRadius;
+    return {
+        ...spec,
+        stackCornerRadius
+    };
+};
 const background_backgroundColor = (spec, context)=>{
     const result = {
         ...spec
@@ -1363,11 +1583,57 @@ const tooltip_tooltip = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
+    const { measures, datasetReshapeInfo } = advancedVSeed;
     const baseConfig = advancedVSeed.baseConfig.vchart;
     const { tooltip = defaultTooltip } = baseConfig;
     const { enable } = tooltip;
+    const { measureId, measureName, measureValue } = datasetReshapeInfo[0].foldInfo;
     result.tooltip = {
-        visible: enable
+        visible: enable,
+        mark: {
+            content: [
+                {
+                    visible: true,
+                    key: (datum)=>datum && datum[measureName] || '',
+                    value: (datum)=>{
+                        if (!datum) return '';
+                        const value = datum[measureValue];
+                        const id = datum[measureId];
+                        const measure = findMeasureById(measures, id);
+                        if (!measure) return String(value);
+                        const { format = {}, autoFormat = true } = measure;
+                        if (!isEmpty(format)) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        if (autoFormat) return autoFormatter(value);
+                        return String(value);
+                    }
+                }
+            ]
+        },
+        dimension: {
+            content: [
+                {
+                    visible: true,
+                    key: (datum)=>datum && datum[measureName] || '',
+                    value: (datum)=>{
+                        if (!datum) return '';
+                        const value = datum[measureValue];
+                        const id = datum[measureId];
+                        const measure = findMeasureById(measures, id);
+                        if (!measure) return String(value);
+                        const { format = {}, autoFormat = true } = measure;
+                        if (!isEmpty(format)) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        if (autoFormat) return autoFormatter(value);
+                        return String(value);
+                    }
+                }
+            ]
+        }
     };
     return result;
 };
@@ -1376,12 +1642,26 @@ const label_label = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
+    const { measures, datasetReshapeInfo, locale } = advancedVSeed;
     const baseConfig = advancedVSeed.baseConfig.vchart;
     if (!baseConfig || !baseConfig.label) return result;
+    const { measureId } = datasetReshapeInfo[0].foldInfo;
     const { label } = baseConfig;
     const { enable } = label;
     result.label = {
-        visible: enable
+        visible: enable,
+        formatMethod: (value, datum)=>{
+            const id = datum[measureId];
+            const measure = findMeasureById(measures, id);
+            if (!measure) return value;
+            const { format = {}, autoFormat = true } = measure;
+            if (!isEmpty(format)) {
+                const formatter = createFormatter(format);
+                return formatter(value);
+            }
+            if (autoFormat) return autoFormatter(value, locale);
+            return String(value);
+        }
     };
     return result;
 };
@@ -1684,6 +1964,7 @@ const pivotGridStyle = (spec)=>{
         ...spec
     };
     const transparent = 'rgba(0,0,0,0)';
+    const hoverBackgroundColor = 'rgba(178,186,207, 0.2)';
     return {
         ...result,
         theme: {
@@ -1702,7 +1983,10 @@ const pivotGridStyle = (spec)=>{
                     0,
                     1,
                     0
-                ]
+                ],
+                hover: {
+                    cellBgColor: 'transparent'
+                }
             },
             headerStyle: {
                 borderColor: 'rgba(0,4,20,0.2)',
@@ -1712,7 +1996,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             rowHeaderStyle: {
@@ -1722,7 +2006,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerHeaderStyle: {
@@ -1739,7 +2023,7 @@ const pivotGridStyle = (spec)=>{
                 ],
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerRightTopCellStyle: {
@@ -1747,7 +2031,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerLeftBottomCellStyle: {
@@ -1755,7 +2039,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerRightBottomCellStyle: {
@@ -1763,7 +2047,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             rightFrozenStyle: {
@@ -1771,7 +2055,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             bottomFrozenStyle: {
@@ -1779,7 +2063,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             selectionStyle: {
@@ -1827,8 +2111,10 @@ const pivotRowDimensions = (spec, context)=>{
         rows: rows
     };
 };
-const selector_selector = (datum, selector)=>{
+const selector_selector = (vchartDatum, selector)=>{
     if (!selector) return true;
+    const vchartKeys = Object.keys(vchartDatum).filter((k)=>k.toLocaleLowerCase().startsWith('__vchart'));
+    const datum = omit(vchartDatum, vchartKeys);
     const selectors = Array.isArray(selector) ? selector : [
         selector
     ];
@@ -1917,52 +2203,218 @@ const barStyle_barStyle = (spec, context)=>{
     const { advancedVSeed } = context;
     const { markStyle, encoding } = advancedVSeed;
     const { barStyle } = markStyle;
-    if (!barStyle) return spec;
     const result = {
-        ...spec
+        ...spec,
+        bar: {
+            state: {
+                hover: {
+                    stroke: (datum, context)=>{
+                        const field = encoding[0]?.group?.[0];
+                        const color = context.seriesColor(datum[field]);
+                        return color;
+                    },
+                    lineWidth: 4,
+                    fillOpacity: 0.6
+                }
+            }
+        }
     };
-    const { selector: barSelector, barBorderColor, barBorderStyle, barBorderWidth, barColor, barColorOpacity, barRadius } = barStyle;
+    if (!barStyle) return result;
+    const barStyles = Array.isArray(barStyle) ? barStyle : [
+        barStyle
+    ];
+    const customMap = barStyles.reduce((result, style, index)=>{
+        const { barBorderColor, barBorderStyle, barBorderWidth, barColor, barColorOpacity, barRadius } = style;
+        const lineDash = 'dashed' === barBorderStyle ? [
+            5,
+            2
+        ] : 'dotted' === barBorderStyle ? [
+            2,
+            5
+        ] : [
+            0,
+            0
+        ];
+        return {
+            ...result,
+            [`custom${index + 1}`]: {
+                level: index + 1,
+                filter: (datum)=>{
+                    if (selector_selector(datum, style.selector)) return true;
+                    return false;
+                },
+                style: {
+                    fill: barColor,
+                    fillOpacity: barColorOpacity,
+                    stroke: barBorderColor,
+                    lineWidth: barBorderWidth,
+                    lineDash: lineDash,
+                    cornerRadius: barRadius
+                }
+            }
+        };
+    }, {});
     return {
         ...result,
         bar: {
-            style: {
-                fill: barColor ? (datum, context)=>{
-                    if (selector_selector(datum, barSelector)) return barColor;
-                    return context.seriesColor(datum[encoding[0]?.group?.[0]]);
-                } : void 0,
-                fillOpacity: barColorOpacity ? (datum)=>{
-                    if (selector_selector(datum, barSelector)) return barColorOpacity;
-                    return 1;
-                } : void 0,
-                stroke: barBorderColor ? (datum, context)=>{
-                    if (selector_selector(datum, barSelector)) return barBorderColor;
-                    return context.seriesColor(datum[encoding[0]?.group?.[0]]);
-                } : void 0,
-                lineWidth: barBorderWidth ? (datum)=>{
-                    if (selector_selector(datum, barSelector)) return barBorderWidth;
-                    return 0;
-                } : void 0,
-                lineDash: barBorderStyle ? (datum)=>{
-                    if (selector_selector(datum, barSelector)) {
-                        if ('solid' === barBorderStyle) ;
-                        else if ('dashed' === barBorderStyle) return [
-                            5,
-                            5
-                        ];
-                        else if ('dotted' === barBorderStyle) return [
-                            1,
-                            5
-                        ];
-                    }
-                    return [
-                        0,
-                        0
-                    ];
-                } : void 0,
-                cornerRadius: barRadius ? (datum)=>{
-                    if (selector_selector(datum, barSelector)) return barRadius;
-                    return 0;
-                } : void 0
+            state: {
+                ...customMap
+            }
+        }
+    };
+};
+const pointStyle_pointStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { markStyle } = advancedVSeed;
+    const { pointStyle } = markStyle;
+    const result = {
+        ...spec,
+        point: {
+            state: {
+                dimension_hover: {
+                    scaleX: 1.4,
+                    scaleY: 1.4
+                }
+            }
+        }
+    };
+    if (!pointStyle) return result;
+    const pointStyles = Array.isArray(pointStyle) ? pointStyle : [
+        pointStyle
+    ];
+    const customMap = pointStyles.reduce((result, style, index)=>{
+        const { pointBorderColor, pointBorderStyle, pointBorderWidth, pointColor, pointColorOpacity, pointSize } = style;
+        const lineDash = 'dashed' === pointBorderStyle ? [
+            5,
+            2
+        ] : 'dotted' === pointBorderStyle ? [
+            2,
+            5
+        ] : [
+            0,
+            0
+        ];
+        return {
+            ...result,
+            [`custom${index + 1}`]: {
+                level: index + 1,
+                filter: (datum)=>{
+                    if (selector_selector(datum, style.selector)) return true;
+                    return false;
+                },
+                style: {
+                    size: pointSize,
+                    fill: pointColor,
+                    fillOpacity: pointColorOpacity,
+                    stroke: pointBorderColor,
+                    lineWidth: pointBorderWidth,
+                    lineDash: lineDash
+                }
+            }
+        };
+    }, {});
+    return {
+        ...result,
+        point: {
+            state: {
+                ...customMap
+            }
+        }
+    };
+};
+const lineStyle_lineStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { markStyle, encoding, dataset } = advancedVSeed;
+    const { lineStyle } = markStyle;
+    if (!lineStyle) return spec;
+    const result = {
+        ...spec
+    };
+    const lineStyles = Array.isArray(lineStyle) ? lineStyle : [
+        lineStyle
+    ];
+    const group = encoding[0]?.group?.[0];
+    const lineGroups = groupBy(dataset, (d)=>d[group ?? '']);
+    const customMap = lineStyles.reduce((result, style, index)=>{
+        const { lineColor, lineColorOpacity, lineSmooth, lineStyle, lineWidth } = style;
+        const dashSegment = (lineWidth ?? 2) * 2;
+        const dashGap = lineWidth ?? 2;
+        const lineDash = 'dashed' === lineStyle ? [
+            dashSegment,
+            dashSegment
+        ] : 'dotted' === lineStyle ? [
+            dashGap / 2,
+            2 * dashGap
+        ] : [
+            0,
+            0
+        ];
+        const curveType = lineSmooth ? 'monotone' : 'linear';
+        return {
+            ...result,
+            [`custom${index + 1}`]: {
+                level: index + 1,
+                filter: (datum)=>{
+                    const lineData = lineGroups[datum[group ?? '']];
+                    for (const d of lineData)if (selector_selector(d, style.selector)) return true;
+                    return false;
+                },
+                style: {
+                    curveType: curveType,
+                    fill: lineColor,
+                    fillOpacity: lineColorOpacity,
+                    stroke: lineColor,
+                    lineWidth: lineWidth,
+                    lineDash: lineDash
+                }
+            }
+        };
+    }, {});
+    return {
+        ...result,
+        line: {
+            state: {
+                ...customMap
+            }
+        }
+    };
+};
+const areaStyle_areaStyle = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { markStyle, encoding, dataset } = advancedVSeed;
+    const { areaStyle } = markStyle;
+    if (!areaStyle) return spec;
+    const result = {
+        ...spec
+    };
+    const areaStyles = Array.isArray(areaStyle) ? areaStyle : [
+        areaStyle
+    ];
+    const group = encoding[0]?.group?.[0];
+    const lineGroups = groupBy(dataset, (d)=>d[group ?? '']);
+    const customMap = areaStyles.reduce((result, style, index)=>{
+        const { areaColor, areaColorOpacity } = style;
+        return {
+            ...result,
+            [`custom${index + 1}`]: {
+                level: index + 1,
+                filter: (datum)=>{
+                    const lineData = lineGroups[datum[group ?? '']];
+                    for (const d of lineData)if (selector_selector(d, style.selector)) return true;
+                    return false;
+                },
+                style: {
+                    fill: areaColor,
+                    fillOpacity: areaColorOpacity
+                }
+            }
+        };
+    }, {});
+    return {
+        ...result,
+        area: {
+            state: {
+                ...customMap
             }
         }
     };
@@ -1985,20 +2437,15 @@ const annotationPoint_annotationPoint = (spec, context)=>{
         const dataset = advancedVSeed.dataset.flat();
         const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
         return selectedData.map((datum)=>({
+                zIndex: ANNOTATION_Z_INDEX,
                 regionRelative: true,
                 position: (data, context)=>{
                     const targetDatum = data.find((item)=>isSubset(datum, item));
                     if (targetDatum) {
                         const { x, y } = context.dataToPosition(targetDatum);
-                        const xBandWidth = context.scaleX?.bandwidth?.();
-                        const yBandWidth = context.scaleY?.bandwidth?.();
-                        if (xBandWidth) return {
-                            x: x,
-                            y: y
-                        };
-                        if (yBandWidth) return {
+                        return {
                             x,
-                            y: y
+                            y
                         };
                     }
                 },
@@ -2058,6 +2505,7 @@ const annotationVerticalLine_annotationVerticalLine = (spec, context)=>{
         const dataset = advancedVSeed.dataset.flat();
         const generateOneMarkLine = (x)=>({
                 x: x,
+                zIndex: ANNOTATION_Z_INDEX,
                 line: {
                     visible: lineVisible,
                     style: {
@@ -2154,6 +2602,7 @@ const annotationHorizontalLine_annotationHorizontalLine = (spec, context)=>{
         const dataset = advancedVSeed.dataset.flat();
         const generateOneMarkLine = (y)=>({
                 y,
+                zIndex: ANNOTATION_Z_INDEX,
                 line: {
                     visible: lineVisible,
                     style: {
@@ -2248,20 +2697,19 @@ const annotationArea_annotationArea = (spec, context)=>{
         right: 'insideRight'
     };
     const markArea = annotationAreaList.flatMap((annotationArea)=>{
-        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#191d24', backgroundPadding = 4, backgroundVisible = true, outerPadding = 8, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor, areaBorderRadius, areaBorderWidth } = annotationArea;
+        const { selector: selectorPoint, text = '', textPosition = 'top', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'top', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#191d24', backgroundPadding = 4, backgroundVisible = true, outerPadding = 0, areaColor = '#888888', areaColorOpacity = 0.15, areaBorderColor, areaBorderRadius, areaBorderWidth } = annotationArea;
         const dataset = advancedVSeed.dataset.flat();
         const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
         return {
+            zIndex: ANNOTATION_Z_INDEX,
             regionRelative: true,
             positions: (data, context)=>{
-                console.log('debug selectedData', selectedData);
                 const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
                 const xyList = positionData.map((datum)=>context.dataToPosition(datum));
-                const xScale = context.scaleX;
-                const yScale = context.scaleY;
-                const xBandWidth = xScale?.bandwidth?.();
-                const yBandWidth = yScale?.bandwidth?.();
-                if (xBandWidth) {
+                const yAxisHelper = context.getYAxisHelper();
+                const xAxisHelper = context.getXAxisHelper();
+                if ('function' == typeof xAxisHelper?.getBandwidth) {
+                    const yScale = yAxisHelper.getScale();
                     const minX = Math.min(...xyList.map((item)=>item.x)) - outerPadding;
                     const maxX = Math.max(...xyList.map((item)=>item.x)) + outerPadding;
                     const minY = Math.min(...yScale.range());
@@ -2285,7 +2733,8 @@ const annotationArea_annotationArea = (spec, context)=>{
                         }
                     ];
                 }
-                if (yBandWidth) {
+                if ('function' == typeof yAxisHelper?.getBandwidth) {
+                    const xScale = xAxisHelper.getScale();
                     const minY = Math.min(...xyList.map((item)=>item.y)) - outerPadding;
                     const maxY = Math.max(...xyList.map((item)=>item.y)) + outerPadding;
                     const minX = Math.min(...xScale.range());
@@ -2373,15 +2822,17 @@ const annotationAreaBand = (spec, context)=>{
         const dataset = advancedVSeed.dataset.flat();
         const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
         return {
+            zIndex: ANNOTATION_Z_INDEX,
             regionRelative: true,
             positions: (data, context)=>{
                 const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
                 const xyList = positionData.map((datum)=>context.dataToPosition(datum));
-                const xScale = context.scaleX;
-                const yScale = context.scaleY;
-                const xBandWidth = xScale?.bandwidth?.();
-                const yBandWidth = yScale?.bandwidth?.();
-                if (xBandWidth) {
+                const yAxisHelper = context.getYAxisHelper();
+                const xAxisHelper = context.getXAxisHelper();
+                if ('function' == typeof xAxisHelper?.getBandwidth) {
+                    const depth = context.fieldX.length ?? 0;
+                    const xBandWidth = xAxisHelper?.getBandwidth?.(depth - 1);
+                    const yScale = yAxisHelper.getScale();
                     const minX = Math.min(...xyList.map((item)=>item.x)) - outerPadding;
                     const maxX = Math.max(...xyList.map((item)=>item.x)) + xBandWidth + outerPadding;
                     const minY = Math.min(...yScale.range());
@@ -2405,7 +2856,10 @@ const annotationAreaBand = (spec, context)=>{
                         }
                     ];
                 }
-                if (yBandWidth) {
+                if ('function' == typeof yAxisHelper?.getBandwidth) {
+                    const depth = context.fieldY.length ?? 0;
+                    const yBandWidth = yAxisHelper?.getBandwidth?.(depth - 1);
+                    const xScale = xAxisHelper.getScale();
                     const minY = Math.min(...xyList.map((item)=>item.y)) - outerPadding;
                     const maxY = Math.max(...xyList.map((item)=>item.y)) + yBandWidth + outerPadding;
                     const minX = Math.min(...xScale.range());
@@ -2470,6 +2924,118 @@ const annotationAreaBand = (spec, context)=>{
         markArea: markArea
     };
 };
+const verticalCrosshairLine = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.crosshairLine;
+    if (!config) return result;
+    if (!result.crosshair) result.crosshair = {};
+    const { visible = true, lineColor, labelColor, labelVisible, labelBackgroundColor } = config;
+    const crosshair = result.crosshair;
+    crosshair.xField = {
+        visible,
+        line: {
+            type: 'line',
+            style: {
+                lineWidth: 1,
+                opacity: 1,
+                stroke: lineColor,
+                lineDash: [
+                    4,
+                    2
+                ]
+            }
+        },
+        label: {
+            visible: labelVisible,
+            labelBackground: {
+                visible: labelVisible,
+                style: {
+                    fill: labelBackgroundColor
+                }
+            },
+            style: {
+                fill: labelColor
+            }
+        }
+    };
+    return result;
+};
+const verticalCrosshairRect = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.crosshairRect;
+    if (!config) return result;
+    if (!result.crosshair) result.crosshair = {};
+    const { visible = true, rectColor, labelColor, labelVisible, labelBackgroundColor } = config;
+    const crosshair = result.crosshair;
+    crosshair.xField = {
+        visible,
+        line: {
+            type: 'rect',
+            style: {
+                lineWidth: 0,
+                opacity: 0.2,
+                fill: rectColor
+            }
+        },
+        label: {
+            visible: labelVisible,
+            labelBackground: {
+                visible: labelVisible,
+                style: {
+                    fill: labelBackgroundColor
+                }
+            },
+            style: {
+                fill: labelColor
+            }
+        }
+    };
+    return result;
+};
+const horizontalCrosshairRect = (spec, context)=>{
+    const result = {
+        ...spec
+    };
+    const { advancedVSeed, vseed } = context;
+    const { chartType } = vseed;
+    const config = advancedVSeed.config?.[chartType]?.crosshairRect;
+    if (!config) return result;
+    if (!result.crosshair) result.crosshair = {};
+    const { visible = true, rectColor, labelColor, labelVisible, labelBackgroundColor } = config;
+    const crosshair = result.crosshair;
+    crosshair.yField = {
+        visible,
+        line: {
+            type: 'rect',
+            style: {
+                lineWidth: 0,
+                opacity: 0.2,
+                fill: rectColor
+            }
+        },
+        label: {
+            visible: labelVisible,
+            labelBackground: {
+                visible: labelVisible,
+                style: {
+                    fill: labelBackgroundColor
+                }
+            },
+            style: {
+                fill: labelColor
+            }
+        }
+    };
+    return result;
+};
 const line_line = [
     initLine,
     color_color,
@@ -2479,7 +3045,10 @@ const line_line = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairLine,
     discreteLegend,
+    pointStyle_pointStyle,
+    lineStyle_lineStyle,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -2499,6 +3068,9 @@ const pivotLine = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairLine,
+        pointStyle_pointStyle,
+        lineStyle_lineStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -2513,6 +3085,7 @@ const lineSpecPipeline = [
 ];
 const column = [
     initColumn,
+    stackCornerRadius_stackCornerRadius,
     stackInverse,
     color_color,
     background_backgroundColor,
@@ -2521,6 +3094,7 @@ const column = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
     annotationPoint_annotationPoint,
@@ -2535,6 +3109,7 @@ const pivotColumn = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackCornerRadius_stackCornerRadius,
         stackInverse,
         color_color,
         background_backgroundColor,
@@ -2543,6 +3118,7 @@ const pivotColumn = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairRect,
         barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -2558,6 +3134,7 @@ const columnSpecPipeline = [
 ];
 const columnParallel = [
     initColumnParallel,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -2566,6 +3143,7 @@ const columnParallel = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
+    verticalCrosshairRect,
     barStyle_barStyle,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
@@ -2579,6 +3157,7 @@ const pivotColumnParallel = [
     datasetPivot,
     pivotIndicators([
         initColumnParallel,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
@@ -2586,6 +3165,7 @@ const pivotColumnParallel = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairRect,
         barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -2601,6 +3181,7 @@ const columnParallelSpecPipeline = [
 ];
 const columnPercent = [
     initColumn,
+    stackCornerRadius_stackCornerRadius,
     stackInverse,
     color_color,
     background_backgroundColor,
@@ -2610,6 +3191,7 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
     annotationPoint_annotationPoint,
@@ -2624,6 +3206,7 @@ const pivotColumnPercent = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackCornerRadius_stackCornerRadius,
         stackInverse,
         color_color,
         percent,
@@ -2633,6 +3216,7 @@ const pivotColumnPercent = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairRect,
         barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -2648,6 +3232,7 @@ const columnPercentSpecPipeline = [
 ];
 const bar = [
     initBar,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -2655,6 +3240,7 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
+    horizontalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
     annotationPoint_annotationPoint,
@@ -2669,6 +3255,7 @@ const pivotBar = [
     datasetPivot,
     pivotIndicators([
         initBar,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
@@ -2676,6 +3263,7 @@ const pivotBar = [
         label_label,
         label_label,
         tooltip_tooltip,
+        horizontalCrosshairRect,
         barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -2691,6 +3279,7 @@ const barSpecPipeline = [
 ];
 const barParallel = [
     initBarParallel,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -2698,6 +3287,7 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
+    horizontalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
     annotationPoint_annotationPoint,
@@ -2712,6 +3302,7 @@ const pivotBarParallel = [
     datasetPivot,
     pivotIndicators([
         initBarParallel,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
@@ -2719,6 +3310,7 @@ const pivotBarParallel = [
         xLinear,
         label_label,
         tooltip_tooltip,
+        horizontalCrosshairRect,
         barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -2734,6 +3326,7 @@ const barParallelSpecPipeline = [
 ];
 const barPercent = [
     initBar,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     percent,
@@ -2742,6 +3335,7 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
+    horizontalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
     annotationPoint_annotationPoint,
@@ -2756,6 +3350,7 @@ const pivotBarPercent = [
     datasetPivot,
     pivotIndicators([
         initBar,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         percent,
@@ -2764,6 +3359,7 @@ const pivotBarPercent = [
         xLinear,
         label_label,
         tooltip_tooltip,
+        horizontalCrosshairRect,
         barStyle_barStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
@@ -2787,7 +3383,11 @@ const area_area = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairLine,
     discreteLegend,
+    pointStyle_pointStyle,
+    lineStyle_lineStyle,
+    areaStyle_areaStyle,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -2808,6 +3408,10 @@ const pivotArea = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairLine,
+        pointStyle_pointStyle,
+        lineStyle_lineStyle,
+        areaStyle_areaStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -2831,7 +3435,11 @@ const areaPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairLine,
     discreteLegend,
+    pointStyle_pointStyle,
+    lineStyle_lineStyle,
+    areaStyle_areaStyle,
     annotationPoint_annotationPoint,
     annotationVerticalLine_annotationVerticalLine,
     annotationHorizontalLine_annotationHorizontalLine,
@@ -2853,6 +3461,10 @@ const pivotAreaPercent = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairLine,
+        pointStyle_pointStyle,
+        lineStyle_lineStyle,
+        areaStyle_areaStyle,
         annotationPoint_annotationPoint,
         annotationVerticalLine_annotationVerticalLine,
         annotationHorizontalLine_annotationHorizontalLine,
@@ -2948,6 +3560,7 @@ class Builder {
     _spec = null;
     constructor(vseed){
         this._vseed = vseed;
+        this._vseed.locale = vseed.locale || intl.getLocale();
     }
     build = ()=>build(this);
     buildSpec = (advanced)=>buildSpec(this, advanced);
@@ -3059,7 +3672,7 @@ const darkTheme = ()=>{
         labelAutoHideGap: 4,
         labelAutoLimit: true,
         labelAutoLimitLength: 100,
-        labelAutoRotate: true,
+        labelAutoRotate: false,
         labelAutoRotateAngleRange: [
             0,
             -45,
@@ -3096,6 +3709,33 @@ const darkTheme = ()=>{
             lineWidth: 1
         }
     };
+    const barBandAxis = {
+        ...bandAxis,
+        labelAutoHide: false,
+        labelAutoHideGap: 1,
+        labelAutoLimit: false,
+        labelAutoLimitLength: void 0,
+        labelAutoRotate: false,
+        labelAutoRotateAngleRange: [
+            0,
+            -45,
+            -90
+        ]
+    };
+    const crosshairLine = {
+        visible: true,
+        labelVisible: true,
+        lineColor: '#E2E3E6',
+        labelColor: '#4B4F54',
+        labelBackgroundColor: '#ffffff'
+    };
+    const crosshairRect = {
+        visible: true,
+        labelVisible: true,
+        lineColor: '#E2E3E6',
+        labelColor: '#4B4F54',
+        labelBackgroundColor: '#ffffff'
+    };
     return {
         baseConfig: {
             vtable: {
@@ -3138,39 +3778,84 @@ const darkTheme = ()=>{
         config: {
             line: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairLine: crosshairLine
             },
             column: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairRect: crosshairRect,
+                stackCornerRadius: [
+                    4,
+                    4,
+                    0,
+                    0
+                ]
             },
             columnParallel: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairRect: crosshairRect,
+                stackCornerRadius: [
+                    4,
+                    4,
+                    0,
+                    0
+                ]
             },
             columnPercent: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairRect: crosshairRect,
+                stackCornerRadius: [
+                    4,
+                    4,
+                    0,
+                    0
+                ]
             },
             bar: {
                 xAxis: linearAxis,
-                yAxis: bandAxis
+                yAxis: barBandAxis,
+                crosshairRect: crosshairRect,
+                stackCornerRadius: [
+                    0,
+                    4,
+                    4,
+                    0
+                ]
             },
             barParallel: {
                 xAxis: linearAxis,
-                yAxis: bandAxis
+                yAxis: barBandAxis,
+                crosshairRect: crosshairRect,
+                stackCornerRadius: [
+                    0,
+                    4,
+                    4,
+                    0
+                ]
             },
             barPercent: {
                 xAxis: linearAxis,
-                yAxis: bandAxis
+                yAxis: barBandAxis,
+                crosshairRect: crosshairRect,
+                stackCornerRadius: [
+                    0,
+                    4,
+                    4,
+                    0
+                ]
             },
             area: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairLine: crosshairLine
             },
             areaPercent: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairLine: crosshairLine
             }
         }
     };
@@ -3216,7 +3901,7 @@ const lightTheme = ()=>{
         labelAutoHideGap: 4,
         labelAutoLimit: true,
         labelAutoLimitLength: 100,
-        labelAutoRotate: true,
+        labelAutoRotate: false,
         labelAutoRotateAngleRange: [
             0,
             -45,
@@ -3266,6 +3951,20 @@ const lightTheme = ()=>{
             -90
         ]
     };
+    const crosshairLine = {
+        visible: true,
+        labelVisible: true,
+        lineColor: '#3641594d',
+        labelColor: '#ffffff',
+        labelBackgroundColor: '#364159'
+    };
+    const crosshairRect = {
+        visible: true,
+        labelVisible: true,
+        rectColor: '#3641594d',
+        labelColor: '#ffffff',
+        labelBackgroundColor: '#364159'
+    };
     return {
         baseConfig: {
             vtable: {
@@ -3308,45 +4007,94 @@ const lightTheme = ()=>{
         config: {
             line: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairLine
             },
             column: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairRect,
+                stackCornerRadius: [
+                    4,
+                    4,
+                    0,
+                    0
+                ]
             },
             columnParallel: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairRect,
+                stackCornerRadius: [
+                    4,
+                    4,
+                    0,
+                    0
+                ]
             },
             columnPercent: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairRect,
+                stackCornerRadius: [
+                    4,
+                    4,
+                    0,
+                    0
+                ]
             },
             bar: {
                 xAxis: linearAxis,
-                yAxis: barBandAxis
+                yAxis: barBandAxis,
+                crosshairRect,
+                stackCornerRadius: [
+                    0,
+                    4,
+                    4,
+                    0
+                ]
             },
             barParallel: {
                 xAxis: linearAxis,
-                yAxis: barBandAxis
+                yAxis: barBandAxis,
+                crosshairRect,
+                stackCornerRadius: [
+                    0,
+                    4,
+                    4,
+                    0
+                ]
             },
             barPercent: {
                 xAxis: linearAxis,
-                yAxis: barBandAxis
+                yAxis: barBandAxis,
+                crosshairRect,
+                stackCornerRadius: [
+                    0,
+                    4,
+                    4,
+                    0
+                ]
             },
             area: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairLine
             },
             areaPercent: {
                 xAxis: bandAxis,
-                yAxis: linearAxis
+                yAxis: linearAxis,
+                crosshairLine
             }
         }
     };
 };
 const registerCustomTheme = (key, themeConfig)=>{
-    Builder._themeMap[key] = themeConfig;
+    const customTheme = 'function' == typeof themeConfig ? themeConfig({
+        lightTheme: lightTheme(),
+        darkTheme: darkTheme()
+    }) : themeConfig;
+    Builder._themeMap[key] = customTheme;
 };
 const registerLightTheme = ()=>{
     registerCustomTheme('light', lightTheme());
@@ -3398,29 +4146,30 @@ const zDimension = z.object({
     ])
 });
 const zDimensions = z.array(zDimension).optional();
+const zNumFormat = z.object({
+    type: z["enum"]([
+        'number',
+        'percent',
+        'permille'
+    ]).default('number').optional(),
+    ratio: z.number().default(1).optional(),
+    symbol: z.string().default('').optional(),
+    thousandSeparator: z.boolean().default(false).optional(),
+    decimalPlaces: z.number().default(2).optional(),
+    round: z["enum"]([
+        'round',
+        'floor',
+        'ceil'
+    ]).default('round').optional(),
+    prefix: z.string().default('').optional(),
+    suffix: z.string().default('').optional()
+}).optional();
 const zMeasure = z.object({
     id: z.string(),
     alias: z.string().optional(),
     visible: z.boolean().default(true).optional(),
     autoFormat: z.boolean().default(true).optional(),
-    format: z.object({
-        type: z["enum"]([
-            'number',
-            'percent',
-            'permille'
-        ]).optional().default('number'),
-        ratio: z.number().optional().default(1),
-        symbol: z.string().optional().default(''),
-        thousandSeparator: z.boolean().optional().default(false),
-        decimalPlaces: z.number().optional().default(2),
-        round: z["enum"]([
-            'round',
-            'floor',
-            'ceil'
-        ]).optional().default('round'),
-        prefix: z.string().optional().default(''),
-        suffix: z.string().optional().default('')
-    }).optional()
+    format: zNumFormat["default"]({}).optional()
 });
 const zMeasureGroup = z.object({
     id: z.string(),
@@ -3665,42 +4414,77 @@ const zXLinearAxis = z.object({
     }).optional()
 });
 const zYLinearAxis = zXLinearAxis;
+const zCrosshairLine = z.object({
+    visible: z.boolean().optional(),
+    lineColor: z.string().optional(),
+    labelColor: z.string().optional(),
+    labelVisible: z.boolean().optional(),
+    labelBackgroundColor: z.string().optional()
+});
+const zCrosshairRect = z.object({
+    visible: z.boolean().optional(),
+    rectColor: z.string().optional(),
+    labelColor: z.string().optional(),
+    labelVisible: z.boolean().optional(),
+    labelBackgroundColor: z.string().optional()
+});
+const zStackCornerRadius = z.number().or(z.array(z.number())).default([
+    3,
+    3,
+    0,
+    0
+]);
 const zConfig = z.object({
     line: z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairLine: zCrosshairLine.optional()
     }).optional(),
     column: z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     columnParallel: z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     columnPercent: z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     bar: z.object({
-        xAxis: zXLinearAxis,
-        yAxis: zYBandAxis
+        xAxis: zXLinearAxis.optional(),
+        yAxis: zYBandAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     barParallel: z.object({
-        xAxis: zXLinearAxis,
-        yAxis: zYBandAxis
+        xAxis: zXLinearAxis.optional(),
+        yAxis: zYBandAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     barPercent: z.object({
-        xAxis: zXLinearAxis,
-        yAxis: zYBandAxis
+        xAxis: zXLinearAxis.optional(),
+        yAxis: zYBandAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     area: z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairLine: zCrosshairLine.optional()
     }).optional(),
     areaPercent: z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairLine: zCrosshairLine.optional()
     }).optional(),
     pie: z.object({}).optional(),
     donut: z.object({}).optional(),
@@ -3709,12 +4493,6 @@ const zConfig = z.object({
     table: z.object({}).optional(),
     pivotTable: z.object({}).optional()
 });
-const zCustomThemeConfig = z.object({
-    baseConfig: zBaseConfig.optional(),
-    config: zConfig.optional()
-});
-const zCustomTheme = z.record(z.string(), zCustomThemeConfig).optional();
-const zTheme = z.string();
 const zSelector = z.union([
     z.string(),
     z.number(),
@@ -3770,28 +4548,6 @@ const zSelector = z.union([
     })
 ]);
 const zSelectors = z.array(zSelector);
-const zBarStyle = z.object({
-    selector: z.union([
-        zSelector,
-        zSelectors
-    ]).optional(),
-    barColor: z.string().optional(),
-    barColorOpacity: z.number().optional(),
-    barBorderColor: z.string().optional(),
-    barBorderWidth: z.number().optional(),
-    barBorderStyle: z.union([
-        z.literal('solid'),
-        z.literal('dashed'),
-        z.literal('dotted')
-    ]).optional(),
-    barRadius: z.union([
-        z.number(),
-        z.array(z.number())
-    ]).optional()
-});
-const zMarkStyle = z.object({
-    barStyle: zBarStyle.optional()
-});
 const zAnnotationPoint = z.object({
     selector: z.union([
         zSelector,
@@ -3972,6 +4728,82 @@ const zAnnotation = z.object({
     annotationHorizontalLine: zAnnotationHorizontalLine.or(z.array(zAnnotationHorizontalLine)).optional(),
     annotationArea: zAnnotationArea.or(z.array(zAnnotationArea)).optional()
 });
-export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, darkTheme, dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, foldMeasures, isPivotChart, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, all_registerAll as registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerLightTheme, registerLine, unfoldDimensions, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zAxis, zBackgroundColor, zBarStyle, zBaseConfig, zChartType, zColor, zConfig, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zMarkStyle, zMeasure, zMeasureGroup, zMeasures, zTheme, zTooltip, zUnfoldInfo, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
+const zBarStyle = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    barColor: z.string().optional(),
+    barColorOpacity: z.number().optional(),
+    barBorderColor: z.string().optional(),
+    barBorderWidth: z.number().optional(),
+    barBorderStyle: z.union([
+        z.literal('solid'),
+        z.literal('dashed'),
+        z.literal('dotted')
+    ]).optional(),
+    barRadius: z.union([
+        z.number(),
+        z.array(z.number())
+    ]).optional()
+});
+const zPointStyle = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    pointSize: z.number().optional(),
+    pointColor: z.string().optional(),
+    pointColorOpacity: z.number().optional(),
+    pointBorderColor: z.string().optional(),
+    pointBorderWidth: z.number().optional(),
+    pointBorderStyle: z.union([
+        z["enum"]([
+            'solid',
+            'dashed',
+            'dotted'
+        ])
+    ]).optional()
+});
+const zLineStyle = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    lineSmooth: z.boolean().default(true).optional(),
+    lineColor: z.string().optional(),
+    lineColorOpacity: z.number().optional(),
+    lineWidth: z.number().optional(),
+    lineStyle: z.union([
+        z["enum"]([
+            'solid',
+            'dashed',
+            'dotted'
+        ])
+    ]).optional()
+});
+const zAreaStyle = z.object({
+    selector: z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    areaColor: z.string().optional(),
+    areaColorOpacity: z.number().optional()
+});
+const zMarkStyle = z.object({
+    barStyle: zBarStyle.or(z.array(zBarStyle)).optional(),
+    pointStyle: zPointStyle.or(z.array(zPointStyle)).optional(),
+    lineStyle: zLineStyle.or(z.array(zLineStyle)).optional(),
+    areaStyle: zAreaStyle.or(z.array(zAreaStyle)).optional()
+});
+const zCustomThemeConfig = z.object({
+    baseConfig: zBaseConfig.optional(),
+    config: zConfig.optional(),
+    annotation: zAnnotation.optional(),
+    markStyle: zMarkStyle.optional()
+});
+const zCustomTheme = z.record(z.string(), zCustomThemeConfig).optional();
+const zTheme = z.string();
+export { Builder, FoldMeasureId, FoldMeasureName, FoldMeasureValue, ORIGINAL_DATA, Separator, UnfoldDimensionGroup, areaAdvancedPipeline, areaPercentAdvancedPipeline, areaPercentSpecPipeline, areaSpecPipeline, autoFormatter, autoNumFormatter, barAdvancedPipeline, barParallelAdvancedPipeline, barParallelSpecPipeline, barPercentAdvancedPipeline, barPercentSpecPipeline, barSpecPipeline, columnAdvancedPipeline, columnParallelAdvancedPipeline, columnParallelSpecPipeline, columnPercentAdvancedPipeline, columnPercentSpecPipeline, columnSpecPipeline, createFormatter, createNumFormatter, darkTheme, dataReshapeFor1D1M, dataReshapeFor2D1M, execPipeline, findMeasureById, foldMeasures, i18n, intl, isPivotChart, isVChart, isVTable, lightTheme, lineAdvancedPipeline, lineSpecPipeline, pieAdvancedPipeline, pieSpecPipeline, all_registerAll as registerAll, registerArea, registerAreaPercent, registerBar, registerBarParallel, registerBarPercent, registerColumn, registerColumnParallel, registerColumnPercent, registerCustomTheme, registerDarkTheme, registerLightTheme, registerLine, unfoldDimensions, zAnnotation, zAnnotationArea, zAnnotationHorizontalLine, zAnnotationPoint, zAnnotationVerticalLine, zAreaStyle, zAxis, zBackgroundColor, zBarStyle, zBaseConfig, zChartType, zColor, zConfig, zCrosshairLine, zCrosshairRect, zCustomTheme, zCustomThemeConfig, zDataset, zDatasetReshapeInfo, zDatum, zDimension, zDimensions, zEncoding, zFoldInfo, zLabel, zLegend, zLineStyle, zMarkStyle, zMeasure, zMeasureGroup, zMeasures, zNumFormat, zPointStyle, zStackCornerRadius, zTheme, zTooltip, zUnfoldInfo, zXBandAxis, zXLinearAxis, zYBandAxis, zYLinearAxis };
 
 //# sourceMappingURL=index.js.map