@visactor/vseed 0.0.10 → 0.0.12

package/dist/index.cjs

@@ -26,7 +26,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     registerBar: ()=>registerBar,
     isVChart: ()=>isVChart,
-    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
+    zBaseConfig: ()=>zBaseConfig,
+    zTooltip: ()=>zTooltip,
     pieAdvancedPipeline: ()=>pieAdvancedPipeline,
     execPipeline: ()=>execPipeline,
     areaSpecPipeline: ()=>areaSpecPipeline,
@@ -36,8 +37,10 @@ __webpack_require__.d(__webpack_exports__, {
     zMeasureGroup: ()=>zMeasureGroup,
     zUnfoldInfo: ()=>zUnfoldInfo,
     zMeasures: ()=>zMeasures,
+    zCrosshairRect: ()=>zCrosshairRect,
     FoldMeasureName: ()=>FoldMeasureName,
     darkTheme: ()=>darkTheme,
+    createNumFormatter: ()=>createNumFormatter,
     columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
     zAxis: ()=>zAxis,
     isVTable: ()=>isVTable,
@@ -47,9 +50,12 @@ __webpack_require__.d(__webpack_exports__, {
     zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
     zFoldInfo: ()=>zFoldInfo,
     zYBandAxis: ()=>zYBandAxis,
+    zAreaStyle: ()=>zAreaStyle,
     ORIGINAL_DATA: ()=>ORIGINAL_DATA,
-    zYLinearAxis: ()=>zYLinearAxis,
+    zAnnotationHorizontalLine: ()=>zAnnotationHorizontalLine,
+    zAnnotationArea: ()=>zAnnotationArea,
     zMarkStyle: ()=>zMarkStyle,
+    zYLinearAxis: ()=>zYLinearAxis,
     Separator: ()=>Separator,
     columnAdvancedPipeline: ()=>columnAdvancedPipeline,
     columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
@@ -59,12 +65,16 @@ __webpack_require__.d(__webpack_exports__, {
     lightTheme: ()=>lightTheme,
     registerColumnParallel: ()=>registerColumnParallel,
     zDimension: ()=>zDimension,
+    zPointStyle: ()=>zPointStyle,
     isPivotChart: ()=>isPivotChart,
     zCustomTheme: ()=>zCustomTheme,
+    zLineStyle: ()=>zLineStyle,
     zXBandAxis: ()=>zXBandAxis,
     dataReshapeFor1D1M: ()=>dataReshapeFor1D1M,
     registerArea: ()=>registerArea,
+    findMeasureById: ()=>findMeasureById,
     zDataset: ()=>zDataset,
+    zNumFormat: ()=>zNumFormat,
     barPercentAdvancedPipeline: ()=>barPercentAdvancedPipeline,
     areaPercentAdvancedPipeline: ()=>areaPercentAdvancedPipeline,
     zBackgroundColor: ()=>zBackgroundColor,
@@ -85,11 +95,13 @@ __webpack_require__.d(__webpack_exports__, {
     columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
     registerColumnPercent: ()=>registerColumnPercent,
     registerBarPercent: ()=>registerBarPercent,
+    zCrosshairLine: ()=>zCrosshairLine,
     foldMeasures: ()=>foldMeasures,
     dataReshapeFor2D1M: ()=>dataReshapeFor2D1M,
     registerLightTheme: ()=>registerLightTheme,
+    zStackCornerRadius: ()=>zStackCornerRadius,
     registerDarkTheme: ()=>registerDarkTheme,
-    zChartType: ()=>zChartType,
+    zAnnotationVerticalLine: ()=>zAnnotationVerticalLine,
     barParallelAdvancedPipeline: ()=>barParallelAdvancedPipeline,
     FoldMeasureValue: ()=>FoldMeasureValue,
     barPercentSpecPipeline: ()=>barPercentSpecPipeline,
@@ -97,13 +109,14 @@ __webpack_require__.d(__webpack_exports__, {
     pieSpecPipeline: ()=>pieSpecPipeline,
     barSpecPipeline: ()=>barSpecPipeline,
     lineSpecPipeline: ()=>lineSpecPipeline,
-    zTooltip: ()=>zTooltip,
-    zBaseConfig: ()=>zBaseConfig,
+    zChartType: ()=>zChartType,
+    createFormatter: ()=>createFormatter,
     unfoldDimensions: ()=>unfoldDimensions,
     areaAdvancedPipeline: ()=>areaAdvancedPipeline,
     areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
     Builder: ()=>Builder,
     barParallelSpecPipeline: ()=>barParallelSpecPipeline,
+    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
     registerAll: ()=>all_registerAll
 });
 const initAdvancedVSeed = (advancedVSeed, context)=>{
@@ -175,16 +188,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();
     }
@@ -668,7 +681,28 @@ const lineConfig = (advancedVSeed, context)=>{
     };
     const config = (0, external_remeda_namespaceObject.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 = (0, external_remeda_namespaceObject.pick)(vseed, [
+        'xAxis',
+        'yAxis',
+        'crosshairRect',
+        'stackCornerRadius'
     ]);
     result.config = {
         ...result.config || {},
@@ -693,14 +727,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;
@@ -739,7 +772,10 @@ const pivotAdapter = (pipeline, pivotPipeline)=>(advancedVSeed, context)=>{
 const markStyle_markStyle = (advancedVSeed, context)=>{
     const { vseed } = context;
     const markStyle = (0, external_remeda_namespaceObject.pick)(vseed, [
-        'barStyle'
+        'barStyle',
+        'pointStyle',
+        'lineStyle',
+        'areaStyle'
     ]);
     return {
         ...advancedVSeed,
@@ -749,7 +785,10 @@ const markStyle_markStyle = (advancedVSeed, context)=>{
 const annotation_annotation = (advancedVSeed, context)=>{
     const { vseed } = context;
     const annotation = (0, external_remeda_namespaceObject.pick)(vseed, [
-        'annotationPoint'
+        'annotationPoint',
+        'annotationHorizontalLine',
+        'annotationVerticalLine',
+        'annotationArea'
     ]);
     return {
         ...advancedVSeed,
@@ -769,6 +808,7 @@ const lineAdvancedPipeline = [
     vchartBaseConfig,
     lineConfig,
     vchartTheme,
+    markStyle_markStyle,
     annotation_annotation
 ];
 const barAdvancedPipeline = [
@@ -880,6 +920,7 @@ const areaAdvancedPipeline = [
     areaConfig,
     vchartBaseConfig,
     vchartTheme,
+    markStyle_markStyle,
     annotation_annotation
 ];
 const areaPercentAdvancedPipeline = [
@@ -895,6 +936,7 @@ const areaPercentAdvancedPipeline = [
     areaPercentConfig,
     vchartBaseConfig,
     vchartTheme,
+    markStyle_markStyle,
     annotation_annotation
 ];
 const pieAdvancedPipeline = [
@@ -1185,7 +1227,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,
@@ -1193,6 +1243,8 @@ const xBand = (spec, context)=>{
     ];
     return result;
 };
+const ANNOTATION_Z_INDEX = 1000;
+const LINEAR_AXIS_INNER_OFFSET_TOP = 5;
 const xLinear = (spec, context)=>{
     const result = {
         ...spec
@@ -1261,6 +1313,9 @@ const xLinear = (spec, context)=>{
                 lineWidth: line?.lineWidth,
                 stroke: line?.lineColor
             }
+        },
+        innerOffset: {
+            top: LINEAR_AXIS_INNER_OFFSET_TOP
         }
     };
     result.axes = [
@@ -1348,7 +1403,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,
@@ -1424,6 +1487,9 @@ const yLinear = (spec, context)=>{
                 lineWidth: line?.lineWidth,
                 stroke: line?.lineColor
             }
+        },
+        innerOffset: {
+            top: LINEAR_AXIS_INNER_OFFSET_TOP
         }
     };
     result.axes = [
@@ -1446,6 +1512,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
@@ -1459,6 +1534,43 @@ const background_backgroundColor = (spec, context)=>{
         background: backgroundColor
     };
 };
+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 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 createFormatter = (format)=>createNumFormatter(format);
 const defaultTooltip = {
     enable: true
 };
@@ -1467,11 +1579,55 @@ 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 (format || autoFormat) {
+                            const formatter = createFormatter(format);
+                            return formatter(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 (format || autoFormat) {
+                            const formatter = createFormatter(format);
+                            return formatter(value);
+                        }
+                        return String(value);
+                    }
+                }
+            ]
+        }
     };
     return result;
 };
@@ -1480,12 +1636,24 @@ const label_label = (spec, context)=>{
         ...spec
     };
     const { advancedVSeed } = context;
+    const { measures, datasetReshapeInfo } = 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 (format || autoFormat) {
+                const formatter = createFormatter(format);
+                return formatter(value);
+            }
+        }
     };
     return result;
 };
@@ -1788,6 +1956,7 @@ const pivotGridStyle = (spec)=>{
         ...spec
     };
     const transparent = 'rgba(0,0,0,0)';
+    const hoverBackgroundColor = 'rgba(178,186,207, 0.2)';
     return {
         ...result,
         theme: {
@@ -1806,7 +1975,10 @@ const pivotGridStyle = (spec)=>{
                     0,
                     1,
                     0
-                ]
+                ],
+                hover: {
+                    cellBgColor: 'transparent'
+                }
             },
             headerStyle: {
                 borderColor: 'rgba(0,4,20,0.2)',
@@ -1816,7 +1988,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             rowHeaderStyle: {
@@ -1826,7 +1998,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerHeaderStyle: {
@@ -1843,7 +2015,7 @@ const pivotGridStyle = (spec)=>{
                 ],
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerRightTopCellStyle: {
@@ -1851,7 +2023,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerLeftBottomCellStyle: {
@@ -1859,7 +2031,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             cornerRightBottomCellStyle: {
@@ -1867,7 +2039,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: ''
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             rightFrozenStyle: {
@@ -1875,7 +2047,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             bottomFrozenStyle: {
@@ -1883,7 +2055,7 @@ const pivotGridStyle = (spec)=>{
                 borderLineWidth: 0,
                 bgColor: transparent,
                 hover: {
-                    cellBgColor: 'rgba(178,186,207, 0.2)'
+                    cellBgColor: hoverBackgroundColor
                 }
             },
             selectionStyle: {
@@ -1931,19 +2103,23 @@ 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 = (0, external_remeda_namespaceObject.omit)(vchartDatum, vchartKeys);
     const selectors = Array.isArray(selector) ? selector : [
         selector
     ];
     for (const selector of selectors)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(selector.operator){
+        switch(op){
             case '=':
+            case '==':
                 if (datum[selector.field] === selectorValueArr[0]) return true;
                 break;
             case '!=':
@@ -1968,11 +2144,20 @@ const selector_selector = (datum, selector)=>{
                 break;
         }
     } else if (isDimensionSelector(selector)) {
+        const op = selector.operator || selector.op;
         const selectorValueArr = Array.isArray(selector.value) ? selector.value : [
             selector.value
         ];
-        if ('in' === selector.operator && selectorValueArr.includes(datum[selector.field])) return true;
-        if ('not in' === selector.operator && !selectorValueArr.includes(datum[selector.field])) return true;
+        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;
+            default:
+                break;
+        }
     } else if (isPartialDatumSelector(selector)) {
         if (Object.keys(selector).every((key)=>datum[key] === selector[key])) return true;
     }
@@ -1980,73 +2165,257 @@ const selector_selector = (datum, selector)=>{
 };
 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 && 'value' in 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.operator);
-const isDimensionSelector = (selector)=>'object' == typeof selector && null !== selector && 'field' in selector && 'operator' in selector && 'value' in selector && [
+    ].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.operator);
+    ].includes(selector.op));
 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 = (0, external_remeda_namespaceObject.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 = (0, external_remeda_namespaceObject.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
             }
         }
     };
 };
+const isSubset = (sub, obj)=>Object.entries(sub).every(([key, value])=>{
+        if ('string' == typeof value) return obj[key] === value;
+        if ('number' == typeof value) return obj[key] === value;
+        return true;
+    });
 const annotationPoint_annotationPoint = (spec, context)=>{
     const { advancedVSeed } = context;
     const { annotation } = advancedVSeed;
@@ -2056,24 +2425,19 @@ const annotationPoint_annotationPoint = (spec, context)=>{
         annotationPoint
     ];
     const markPoint = annotationPointList.flatMap((annotationPoint)=>{
-        const { selector: selectorPoint, text = '', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'middle', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#212121', backgroundPadding = 4, backgroundVisible = true, offsetX = 0, offsetY = 0 } = annotationPoint;
+        const { selector: selectorPoint, text = '', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'middle', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#212121', backgroundPadding = 2, backgroundVisible = true, offsetX = 0, offsetY = 0 } = annotationPoint;
         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
                         };
                     }
                 },
@@ -2112,67 +2476,632 @@ const annotationPoint_annotationPoint = (spec, context)=>{
         markPoint
     };
 };
-const isSubset = (sub, obj)=>Object.entries(sub).every(([key, value])=>{
-        if ('string' == typeof value) return obj[key] === value;
-        if ('number' == typeof value) return obj[key] === value;
-        return true;
+const annotationVerticalLine_annotationVerticalLine = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { annotation, encoding } = advancedVSeed;
+    if (!annotation || !annotation.annotationVerticalLine) return spec;
+    const { annotationVerticalLine } = annotation;
+    const annotationVerticalLineList = Array.isArray(annotationVerticalLine) ? annotationVerticalLine : [
+        annotationVerticalLine
+    ];
+    const positionMap = {
+        outsideStart: 'start',
+        outsideEnd: 'end',
+        outsideMiddle: 'middle',
+        insideStart: 'insideStartTop',
+        insideMiddle: 'insideMiddleTop',
+        insideEnd: 'insideEndTop'
+    };
+    const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
+        const { selector: selectorPoint, xValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'right', textBaseline = 'top', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#212121', backgroundPadding = 2, backgroundVisible = true, offsetX = 0, offsetY = 0, lineColor = '#212121', lineStyle = 'dashed', lineVisible = true, lineWidth = 1 } = annotationVerticalLine;
+        const dataset = advancedVSeed.dataset.flat();
+        const generateOneMarkLine = (x)=>({
+                x: x,
+                zIndex: ANNOTATION_Z_INDEX,
+                line: {
+                    visible: lineVisible,
+                    style: {
+                        offsetX,
+                        offsetY,
+                        stroke: lineColor,
+                        lineStyle: lineStyle,
+                        lineWidth: lineWidth,
+                        lineDash: 'dashed' === lineStyle ? [
+                            5,
+                            2
+                        ] : 'dotted' === lineStyle ? [
+                            2,
+                            5
+                        ] : [
+                            0
+                        ]
+                    }
+                },
+                label: {
+                    text: text,
+                    position: positionMap[textPosition],
+                    style: {
+                        offsetX,
+                        offsetY,
+                        visible: true,
+                        textAlign: textAlign,
+                        textBaseline: textBaseline,
+                        fill: textColor,
+                        fontSize: textFontSize,
+                        fontWeight: textFontWeight
+                    },
+                    labelBackground: {
+                        visible: backgroundVisible,
+                        padding: backgroundPadding,
+                        style: {
+                            offsetX,
+                            offsetY,
+                            cornerRadius: backgroundBorderRadius ?? 4,
+                            fill: backgroundColor,
+                            stroke: backgroundBorderColor,
+                            strokeWidth: backgroundBorderWidth
+                        }
+                    }
+                },
+                endSymbol: {
+                    visible: true,
+                    style: {
+                        fill: lineColor
+                    }
+                }
+            });
+        if (!selectorPoint && (0, external_remeda_namespaceObject.isArray)(xValue) || (0, external_remeda_namespaceObject.isString)(xValue) || (0, external_remeda_namespaceObject.isNumber)(xValue)) {
+            const xValueArr = Array.isArray(xValue) ? xValue : [
+                xValue
+            ];
+            return xValueArr.map(generateOneMarkLine);
+        }
+        const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
+        return selectedData.map((datum)=>{
+            const x = encoding[0]?.x?.[0];
+            if (!x) return {};
+            return generateOneMarkLine(datum[x]);
+        });
     });
-const line_line = [
-    initLine,
-    color_color,
-    background_backgroundColor,
-    dataset_dataset,
-    xBand,
-    yLinear,
-    label_label,
-    tooltip_tooltip,
-    discreteLegend,
-    annotationPoint_annotationPoint
-];
-const pivotLine = [
-    initPivot,
-    pivotGridStyle,
-    pivotIndicators_pivotIndicatorsAsRow,
-    datasetPivot,
-    pivotIndicators([
-        initLine,
-        color_color,
-        background_backgroundColor,
-        datasetPivotPlaceholder,
-        xBand,
-        yLinear,
-        label_label,
-        tooltip_tooltip,
-        annotationPoint_annotationPoint
-    ]),
-    pivotRowDimensions,
-    pivotColumnDimensions,
-    pivotDiscreteLegend
-];
-const lineSpecPipeline = [
-    pivotAdapter_pivotAdapter(line_line, pivotLine)
-];
-const column = [
-    initColumn,
-    stackInverse,
-    color_color,
-    background_backgroundColor,
-    dataset_dataset,
-    xBand,
-    yLinear,
-    label_label,
-    tooltip_tooltip,
-    discreteLegend,
-    barStyle_barStyle,
-    annotationPoint_annotationPoint
-];
-const pivotColumn = [
-    initPivot,
-    pivotGridStyle,
-    pivotIndicators_pivotIndicatorsAsRow,
-    datasetPivot,
-    pivotIndicators([
+    const specMarkLine = spec.markLine || [];
+    const newMarkLine = [
+        ...specMarkLine,
+        ...markLine || []
+    ];
+    return {
+        ...spec,
+        markLine: newMarkLine
+    };
+};
+const annotationHorizontalLine_annotationHorizontalLine = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { annotation, encoding } = advancedVSeed;
+    if (!annotation || !annotation.annotationHorizontalLine) return spec;
+    const { annotationHorizontalLine } = annotation;
+    const annotationVerticalLineList = Array.isArray(annotationHorizontalLine) ? annotationHorizontalLine : [
+        annotationHorizontalLine
+    ];
+    const positionMap = {
+        outsideStart: 'start',
+        outsideEnd: 'end',
+        outsideMiddle: 'middle',
+        insideStart: 'insideStartTop',
+        insideMiddle: 'insideMiddleTop',
+        insideEnd: 'insideEndTop'
+    };
+    const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
+        const { selector: selectorPoint, yValue, text = '', textPosition = 'insideEnd', textColor = '#ffffff', textFontSize = 12, textFontWeight = 400, textAlign = 'center', textBaseline = 'bottom', backgroundBorderColor, backgroundBorderRadius = 4, backgroundBorderWidth = 1, backgroundColor = '#212121', backgroundPadding = 2, backgroundVisible = true, offsetX = 0, offsetY = 0, lineColor = '#212121', lineStyle = 'dashed', lineVisible = true, lineWidth = 1 } = annotationVerticalLine;
+        const dataset = advancedVSeed.dataset.flat();
+        const generateOneMarkLine = (y)=>({
+                y,
+                zIndex: ANNOTATION_Z_INDEX,
+                line: {
+                    visible: lineVisible,
+                    style: {
+                        offsetX,
+                        offsetY,
+                        stroke: lineColor,
+                        lineStyle: lineStyle,
+                        lineWidth: lineWidth,
+                        lineDash: 'dashed' === lineStyle ? [
+                            5,
+                            2
+                        ] : 'dotted' === lineStyle ? [
+                            2,
+                            5
+                        ] : [
+                            0
+                        ]
+                    }
+                },
+                label: {
+                    text: text,
+                    position: positionMap[textPosition],
+                    style: {
+                        offsetX,
+                        offsetY,
+                        visible: true,
+                        textAlign: textAlign,
+                        textBaseline: textBaseline,
+                        fill: textColor,
+                        fontSize: textFontSize,
+                        fontWeight: textFontWeight
+                    },
+                    labelBackground: {
+                        visible: backgroundVisible,
+                        padding: backgroundPadding,
+                        style: {
+                            offsetX,
+                            offsetY,
+                            cornerRadius: backgroundBorderRadius ?? 4,
+                            fill: backgroundColor,
+                            stroke: backgroundBorderColor,
+                            strokeWidth: backgroundBorderWidth
+                        }
+                    }
+                },
+                endSymbol: {
+                    visible: true,
+                    style: {
+                        fill: lineColor
+                    }
+                }
+            });
+        if (!selectorPoint && (0, external_remeda_namespaceObject.isArray)(yValue) || (0, external_remeda_namespaceObject.isString)(yValue) || (0, external_remeda_namespaceObject.isNumber)(yValue)) {
+            const yValueArr = Array.isArray(yValue) ? yValue : [
+                yValue
+            ];
+            return yValueArr.map(generateOneMarkLine);
+        }
+        const selectedData = dataset.filter((datum)=>selector_selector(datum, selectorPoint));
+        return selectedData.map((datum)=>{
+            const y = encoding[0]?.y?.[0];
+            if (!y) return {};
+            return generateOneMarkLine(datum[y]);
+        });
+    });
+    const specMarkLine = spec.markLine || [];
+    const newMarkLine = [
+        ...specMarkLine,
+        ...markLine || []
+    ];
+    return {
+        ...spec,
+        markLine: newMarkLine
+    };
+};
+const annotationArea_annotationArea = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { annotation } = advancedVSeed;
+    if (!annotation || !annotation.annotationArea) return spec;
+    const { annotationArea } = annotation;
+    const annotationAreaList = Array.isArray(annotationArea) ? annotationArea : [
+        annotationArea
+    ];
+    const positionMap = {
+        top: 'insideTop',
+        topRight: 'insideTopRight',
+        topLeft: 'insideTopLeft',
+        bottom: 'insideBottom',
+        bottomLeft: 'insideBottomLeft',
+        bottomRight: 'insideBottomRight',
+        left: 'insideLeft',
+        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 = 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)=>{
+                const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
+                const xyList = positionData.map((datum)=>context.dataToPosition(datum));
+                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());
+                    const maxY = Math.max(...yScale.range());
+                    return [
+                        {
+                            x: minX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: maxY
+                        },
+                        {
+                            x: minX,
+                            y: maxY
+                        }
+                    ];
+                }
+                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());
+                    const maxX = Math.max(...xScale.range());
+                    return [
+                        {
+                            x: minX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: maxY
+                        },
+                        {
+                            x: minX,
+                            y: maxY
+                        }
+                    ];
+                }
+                return [];
+            },
+            label: {
+                position: positionMap[textPosition],
+                visible: true,
+                text: text,
+                style: {
+                    textAlign: textAlign,
+                    textBaseline: textBaseline,
+                    fill: textColor,
+                    fontSize: textFontSize,
+                    fontWeight: textFontWeight
+                },
+                labelBackground: {
+                    visible: backgroundVisible,
+                    padding: backgroundPadding,
+                    style: {
+                        cornerRadius: backgroundBorderRadius ?? 4,
+                        fill: backgroundColor,
+                        stroke: backgroundBorderColor,
+                        strokeWidth: backgroundBorderWidth
+                    }
+                }
+            },
+            area: {
+                style: {
+                    visible: true,
+                    fill: areaColor,
+                    fillOpacity: areaColorOpacity,
+                    stroke: areaBorderColor,
+                    strokeWidth: areaBorderWidth,
+                    cornerRadius: areaBorderRadius
+                }
+            }
+        };
+    });
+    return {
+        ...spec,
+        markArea: markArea
+    };
+};
+const annotationAreaBand = (spec, context)=>{
+    const { advancedVSeed } = context;
+    const { annotation } = advancedVSeed;
+    if (!annotation || !annotation.annotationArea) return spec;
+    const { annotationArea } = annotation;
+    const annotationAreaList = Array.isArray(annotationArea) ? annotationArea : [
+        annotationArea
+    ];
+    const positionMap = {
+        top: 'insideTop',
+        topRight: 'insideTopRight',
+        topLeft: 'insideTopLeft',
+        bottom: 'insideBottom',
+        bottomLeft: 'insideBottomLeft',
+        bottomRight: 'insideBottomRight',
+        left: 'insideLeft',
+        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 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 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());
+                    const maxY = Math.max(...yScale.range());
+                    return [
+                        {
+                            x: minX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: maxY
+                        },
+                        {
+                            x: minX,
+                            y: maxY
+                        }
+                    ];
+                }
+                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());
+                    const maxX = Math.max(...xScale.range());
+                    return [
+                        {
+                            x: minX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: minY
+                        },
+                        {
+                            x: maxX,
+                            y: maxY
+                        },
+                        {
+                            x: minX,
+                            y: maxY
+                        }
+                    ];
+                }
+                return [];
+            },
+            label: {
+                position: positionMap[textPosition],
+                visible: true,
+                text: text,
+                style: {
+                    textAlign: textAlign,
+                    textBaseline: textBaseline,
+                    fill: textColor,
+                    fontSize: textFontSize,
+                    fontWeight: textFontWeight
+                },
+                labelBackground: {
+                    visible: backgroundVisible,
+                    padding: backgroundPadding,
+                    style: {
+                        cornerRadius: backgroundBorderRadius ?? 4,
+                        fill: backgroundColor,
+                        stroke: backgroundBorderColor,
+                        strokeWidth: backgroundBorderWidth
+                    }
+                }
+            },
+            area: {
+                style: {
+                    visible: true,
+                    fill: areaColor,
+                    fillOpacity: areaColorOpacity,
+                    stroke: areaBorderColor,
+                    strokeWidth: areaBorderWidth,
+                    cornerRadius: areaBorderRadius
+                }
+            }
+        };
+    });
+    return {
+        ...spec,
+        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,
+    background_backgroundColor,
+    dataset_dataset,
+    xBand,
+    yLinear,
+    label_label,
+    tooltip_tooltip,
+    verticalCrosshairLine,
+    discreteLegend,
+    pointStyle_pointStyle,
+    lineStyle_lineStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
+];
+const pivotLine = [
+    initPivot,
+    pivotGridStyle,
+    pivotIndicators_pivotIndicatorsAsRow,
+    datasetPivot,
+    pivotIndicators([
+        initLine,
+        color_color,
+        background_backgroundColor,
+        datasetPivotPlaceholder,
+        xBand,
+        yLinear,
+        label_label,
+        tooltip_tooltip,
+        verticalCrosshairLine,
+        pointStyle_pointStyle,
+        lineStyle_lineStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
+    ]),
+    pivotRowDimensions,
+    pivotColumnDimensions,
+    pivotDiscreteLegend
+];
+const lineSpecPipeline = [
+    pivotAdapter_pivotAdapter(line_line, pivotLine)
+];
+const column = [
+    initColumn,
+    stackCornerRadius_stackCornerRadius,
+    stackInverse,
+    color_color,
+    background_backgroundColor,
+    dataset_dataset,
+    xBand,
+    yLinear,
+    label_label,
+    tooltip_tooltip,
+    verticalCrosshairRect,
+    discreteLegend,
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
+];
+const pivotColumn = [
+    initPivot,
+    pivotGridStyle,
+    pivotIndicators_pivotIndicatorsAsRow,
+    datasetPivot,
+    pivotIndicators([
         initColumn,
+        stackCornerRadius_stackCornerRadius,
         stackInverse,
         color_color,
         background_backgroundColor,
@@ -2181,8 +3110,12 @@ const pivotColumn = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairRect,
         barStyle_barStyle,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2193,6 +3126,7 @@ const columnSpecPipeline = [
 ];
 const columnParallel = [
     initColumnParallel,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -2201,8 +3135,12 @@ const columnParallel = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
+    verticalCrosshairRect,
     barStyle_barStyle,
-    annotationPoint_annotationPoint
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotColumnParallel = [
     initPivot,
@@ -2211,6 +3149,7 @@ const pivotColumnParallel = [
     datasetPivot,
     pivotIndicators([
         initColumnParallel,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
@@ -2218,8 +3157,12 @@ const pivotColumnParallel = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairRect,
         barStyle_barStyle,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2230,6 +3173,7 @@ const columnParallelSpecPipeline = [
 ];
 const columnPercent = [
     initColumn,
+    stackCornerRadius_stackCornerRadius,
     stackInverse,
     color_color,
     background_backgroundColor,
@@ -2239,9 +3183,13 @@ const columnPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
-    annotationPoint_annotationPoint
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotColumnPercent = [
     initPivot,
@@ -2250,6 +3198,7 @@ const pivotColumnPercent = [
     datasetPivot,
     pivotIndicators([
         initColumn,
+        stackCornerRadius_stackCornerRadius,
         stackInverse,
         color_color,
         percent,
@@ -2259,8 +3208,12 @@ const pivotColumnPercent = [
         yLinear,
         label_label,
         tooltip_tooltip,
+        verticalCrosshairRect,
         barStyle_barStyle,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2271,6 +3224,7 @@ const columnPercentSpecPipeline = [
 ];
 const bar = [
     initBar,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -2278,9 +3232,13 @@ const bar = [
     yBand,
     label_label,
     tooltip_tooltip,
+    horizontalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
-    annotationPoint_annotationPoint
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotBar = [
     initPivot,
@@ -2289,6 +3247,7 @@ const pivotBar = [
     datasetPivot,
     pivotIndicators([
         initBar,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
@@ -2296,8 +3255,12 @@ const pivotBar = [
         label_label,
         label_label,
         tooltip_tooltip,
+        horizontalCrosshairRect,
         barStyle_barStyle,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2308,6 +3271,7 @@ const barSpecPipeline = [
 ];
 const barParallel = [
     initBarParallel,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     dataset_dataset,
@@ -2315,9 +3279,13 @@ const barParallel = [
     yBand,
     label_label,
     tooltip_tooltip,
+    horizontalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
-    annotationPoint_annotationPoint
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotBarParallel = [
     initPivot,
@@ -2326,6 +3294,7 @@ const pivotBarParallel = [
     datasetPivot,
     pivotIndicators([
         initBarParallel,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         datasetPivotPlaceholder,
@@ -2333,8 +3302,12 @@ const pivotBarParallel = [
         xLinear,
         label_label,
         tooltip_tooltip,
+        horizontalCrosshairRect,
         barStyle_barStyle,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2345,6 +3318,7 @@ const barParallelSpecPipeline = [
 ];
 const barPercent = [
     initBar,
+    stackCornerRadius_stackCornerRadius,
     color_color,
     background_backgroundColor,
     percent,
@@ -2353,9 +3327,13 @@ const barPercent = [
     yBand,
     label_label,
     tooltip_tooltip,
+    horizontalCrosshairRect,
     discreteLegend,
     barStyle_barStyle,
-    annotationPoint_annotationPoint
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotBarPercent = [
     initPivot,
@@ -2364,6 +3342,7 @@ const pivotBarPercent = [
     datasetPivot,
     pivotIndicators([
         initBar,
+        stackCornerRadius_stackCornerRadius,
         color_color,
         background_backgroundColor,
         percent,
@@ -2372,8 +3351,12 @@ const pivotBarPercent = [
         xLinear,
         label_label,
         tooltip_tooltip,
+        horizontalCrosshairRect,
         barStyle_barStyle,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2392,8 +3375,15 @@ const area_area = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairLine,
     discreteLegend,
-    annotationPoint_annotationPoint
+    pointStyle_pointStyle,
+    lineStyle_lineStyle,
+    areaStyle_areaStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotArea = [
     initPivot,
@@ -2410,7 +3400,14 @@ const pivotArea = [
         yLinear,
         label_label,
         tooltip_tooltip,
-        annotationPoint_annotationPoint
+        verticalCrosshairLine,
+        pointStyle_pointStyle,
+        lineStyle_lineStyle,
+        areaStyle_areaStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2430,8 +3427,15 @@ const areaPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
+    verticalCrosshairLine,
     discreteLegend,
-    annotationPoint_annotationPoint
+    pointStyle_pointStyle,
+    lineStyle_lineStyle,
+    areaStyle_areaStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotAreaPercent = [
     initPivot,
@@ -2449,7 +3453,14 @@ const pivotAreaPercent = [
         yLinear,
         label_label,
         tooltip_tooltip,
-        annotationPoint_annotationPoint
+        verticalCrosshairLine,
+        pointStyle_pointStyle,
+        lineStyle_lineStyle,
+        areaStyle_areaStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2466,7 +3477,10 @@ const pie = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    annotationPoint_annotationPoint
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotPie = [
     initPivot,
@@ -2480,7 +3494,10 @@ const pivotPie = [
         datasetPivotPlaceholder,
         label_label,
         tooltip_tooltip,
-        annotationPoint_annotationPoint
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2522,17 +3539,17 @@ const buildSpec = (builder, advancedVSeed)=>{
     }
 };
 const build = (builder)=>{
-    console.log('debug vseed', builder.vseed);
     const advancedVSeed = builder.buildAdvanced();
-    console.log('debug advancedVSeed', advancedVSeed);
+    builder.advancedVSeed = advancedVSeed;
     if (!advancedVSeed) throw new Error('advancedVSeed is null');
     const spec = builder.buildSpec(advancedVSeed);
-    console.log('debug spec', spec);
+    builder.spec = spec;
     return spec;
 };
 class Builder {
     _vseed;
     _advancedVSeed = null;
+    _spec = null;
     constructor(vseed){
         this._vseed = vseed;
     }
@@ -2555,6 +3572,12 @@ class Builder {
     set advancedVSeed(value) {
         this._advancedVSeed = value;
     }
+    get spec() {
+        return this._spec;
+    }
+    set spec(value) {
+        this._spec = value;
+    }
     static _advancedPipelineMap = {};
     static _specPipelineMap = {};
     static _themeMap = {};
@@ -2641,7 +3664,7 @@ const lightTheme = ()=>{
         labelAutoHideGap: 4,
         labelAutoLimit: true,
         labelAutoLimitLength: 100,
-        labelAutoRotate: true,
+        labelAutoRotate: false,
         labelAutoRotateAngleRange: [
             0,
             -45,
@@ -2691,6 +3714,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: {
@@ -2733,39 +3770,84 @@ 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
             }
         }
     };
@@ -2810,7 +3892,7 @@ const darkTheme = ()=>{
         labelAutoHideGap: 4,
         labelAutoLimit: true,
         labelAutoLimitLength: 100,
-        labelAutoRotate: true,
+        labelAutoRotate: false,
         labelAutoRotateAngleRange: [
             0,
             -45,
@@ -2847,6 +3929,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: {
@@ -2889,45 +3998,94 @@ 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
             }
         }
     };
 };
 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());
@@ -2980,29 +4138,30 @@ const zDimension = external_zod_namespaceObject.z.object({
     ])
 });
 const zDimensions = external_zod_namespaceObject.z.array(zDimension).optional();
+const zNumFormat = external_zod_namespaceObject.z.object({
+    type: external_zod_namespaceObject.z["enum"]([
+        'number',
+        'percent',
+        'permille'
+    ]).default('number').optional(),
+    ratio: external_zod_namespaceObject.z.number().default(1).optional(),
+    symbol: external_zod_namespaceObject.z.string().default('').optional(),
+    thousandSeparator: external_zod_namespaceObject.z.boolean().default(false).optional(),
+    decimalPlaces: external_zod_namespaceObject.z.number().default(2).optional(),
+    round: external_zod_namespaceObject.z["enum"]([
+        'round',
+        'floor',
+        'ceil'
+    ]).default('round').optional(),
+    prefix: external_zod_namespaceObject.z.string().default('').optional(),
+    suffix: external_zod_namespaceObject.z.string().default('').optional()
+}).optional();
 const zMeasure = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
     alias: external_zod_namespaceObject.z.string().optional(),
     visible: external_zod_namespaceObject.z.boolean().default(true).optional(),
     autoFormat: external_zod_namespaceObject.z.boolean().default(true).optional(),
-    format: external_zod_namespaceObject.z.object({
-        type: external_zod_namespaceObject.z["enum"]([
-            'number',
-            'percent',
-            'permille'
-        ]).optional().default('number'),
-        ratio: external_zod_namespaceObject.z.number().optional().default(1),
-        symbol: external_zod_namespaceObject.z.string().optional().default(''),
-        thousandSeparator: external_zod_namespaceObject.z.boolean().optional().default(false),
-        decimalPlaces: external_zod_namespaceObject.z.number().optional().default(2),
-        round: external_zod_namespaceObject.z["enum"]([
-            'round',
-            'floor',
-            'ceil'
-        ]).optional().default('round'),
-        prefix: external_zod_namespaceObject.z.string().optional().default(''),
-        suffix: external_zod_namespaceObject.z.string().optional().default('')
-    }).optional()
+    format: zNumFormat.optional()
 });
 const zMeasureGroup = external_zod_namespaceObject.z.object({
     id: external_zod_namespaceObject.z.string(),
@@ -3247,42 +4406,77 @@ const zXLinearAxis = external_zod_namespaceObject.z.object({
     }).optional()
 });
 const zYLinearAxis = zXLinearAxis;
+const zCrosshairLine = external_zod_namespaceObject.z.object({
+    visible: external_zod_namespaceObject.z.boolean().optional(),
+    lineColor: external_zod_namespaceObject.z.string().optional(),
+    labelColor: external_zod_namespaceObject.z.string().optional(),
+    labelVisible: external_zod_namespaceObject.z.boolean().optional(),
+    labelBackgroundColor: external_zod_namespaceObject.z.string().optional()
+});
+const zCrosshairRect = external_zod_namespaceObject.z.object({
+    visible: external_zod_namespaceObject.z.boolean().optional(),
+    rectColor: external_zod_namespaceObject.z.string().optional(),
+    labelColor: external_zod_namespaceObject.z.string().optional(),
+    labelVisible: external_zod_namespaceObject.z.boolean().optional(),
+    labelBackgroundColor: external_zod_namespaceObject.z.string().optional()
+});
+const zStackCornerRadius = external_zod_namespaceObject.z.number().or(external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.number())).default([
+    3,
+    3,
+    0,
+    0
+]);
 const zConfig = external_zod_namespaceObject.z.object({
     line: external_zod_namespaceObject.z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairLine: zCrosshairLine.optional()
     }).optional(),
     column: external_zod_namespaceObject.z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     columnParallel: external_zod_namespaceObject.z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     columnPercent: external_zod_namespaceObject.z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     bar: external_zod_namespaceObject.z.object({
-        xAxis: zXLinearAxis,
-        yAxis: zYBandAxis
+        xAxis: zXLinearAxis.optional(),
+        yAxis: zYBandAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     barParallel: external_zod_namespaceObject.z.object({
-        xAxis: zXLinearAxis,
-        yAxis: zYBandAxis
+        xAxis: zXLinearAxis.optional(),
+        yAxis: zYBandAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     barPercent: external_zod_namespaceObject.z.object({
-        xAxis: zXLinearAxis,
-        yAxis: zYBandAxis
+        xAxis: zXLinearAxis.optional(),
+        yAxis: zYBandAxis.optional(),
+        crosshairRect: zCrosshairRect.optional(),
+        stackCornerRadius: zStackCornerRadius.optional()
     }).optional(),
     area: external_zod_namespaceObject.z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairLine: zCrosshairLine.optional()
     }).optional(),
     areaPercent: external_zod_namespaceObject.z.object({
-        xAxis: zXBandAxis,
-        yAxis: zYLinearAxis
+        xAxis: zXBandAxis.optional(),
+        yAxis: zYLinearAxis.optional(),
+        crosshairLine: zCrosshairLine.optional()
     }).optional(),
     pie: external_zod_namespaceObject.z.object({}).optional(),
     donut: external_zod_namespaceObject.z.object({}).optional(),
@@ -3291,18 +4485,31 @@ const zConfig = external_zod_namespaceObject.z.object({
     table: external_zod_namespaceObject.z.object({}).optional(),
     pivotTable: external_zod_namespaceObject.z.object({}).optional()
 });
-const zCustomThemeConfig = external_zod_namespaceObject.z.object({
-    baseConfig: zBaseConfig.optional(),
-    config: zConfig.optional()
-});
-const zCustomTheme = external_zod_namespaceObject.z.record(external_zod_namespaceObject.z.string(), zCustomThemeConfig).optional();
-const zTheme = external_zod_namespaceObject.z.string();
 const zSelector = external_zod_namespaceObject.z.union([
     external_zod_namespaceObject.z.string(),
     external_zod_namespaceObject.z.number(),
     external_zod_namespaceObject.z.object({
         field: external_zod_namespaceObject.z.string(),
-        operator: external_zod_namespaceObject.z.string(),
+        operator: external_zod_namespaceObject.z["enum"]([
+            '=',
+            '==',
+            '!=',
+            '>',
+            '<',
+            '>=',
+            '<=',
+            'between'
+        ]).optional(),
+        op: external_zod_namespaceObject.z["enum"]([
+            '=',
+            '==',
+            '!=',
+            '>',
+            '<',
+            '>=',
+            '<=',
+            'between'
+        ]).optional(),
         value: external_zod_namespaceObject.z.union([
             external_zod_namespaceObject.z.string(),
             external_zod_namespaceObject.z.number(),
@@ -3314,7 +4521,14 @@ const zSelector = external_zod_namespaceObject.z.union([
     }),
     external_zod_namespaceObject.z.object({
         field: external_zod_namespaceObject.z.string(),
-        operator: external_zod_namespaceObject.z.string(),
+        operator: external_zod_namespaceObject.z["enum"]([
+            'in',
+            'not in'
+        ]).optional(),
+        op: external_zod_namespaceObject.z["enum"]([
+            'in',
+            'not in'
+        ]).optional(),
         value: external_zod_namespaceObject.z.union([
             external_zod_namespaceObject.z.string(),
             external_zod_namespaceObject.z.number(),
@@ -3326,33 +4540,153 @@ const zSelector = external_zod_namespaceObject.z.union([
     })
 ]);
 const zSelectors = external_zod_namespaceObject.z.array(zSelector);
-const zBarStyle = external_zod_namespaceObject.z.object({
+const zAnnotationPoint = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]),
+    text: external_zod_namespaceObject.z.string().or(external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())).optional(),
+    textColor: external_zod_namespaceObject.z.string().default('#ffffff').optional(),
+    textFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+    textFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+    textAlign: external_zod_namespaceObject.z["enum"]([
+        'left',
+        'right',
+        'center'
+    ]).default('center').optional(),
+    textBaseline: external_zod_namespaceObject.z["enum"]([
+        'top',
+        'middle',
+        'bottom'
+    ]).default('middle').optional(),
+    backgroundVisible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    backgroundColor: external_zod_namespaceObject.z.string().default('#212121').optional(),
+    backgroundBorderColor: external_zod_namespaceObject.z.string().optional(),
+    backgroundBorderWidth: external_zod_namespaceObject.z.number().default(1).optional(),
+    backgroundBorderRadius: external_zod_namespaceObject.z.number().default(4).optional(),
+    backgroundPadding: external_zod_namespaceObject.z.number().optional(),
+    offsetY: external_zod_namespaceObject.z.number().default(0).optional(),
+    offsetX: external_zod_namespaceObject.z.number().default(0).optional()
+});
+const zAnnotationVerticalLine = external_zod_namespaceObject.z.object({
     selector: external_zod_namespaceObject.z.union([
         zSelector,
         zSelectors
     ]).optional(),
-    barColor: external_zod_namespaceObject.z.string().optional(),
-    barColorOpacity: external_zod_namespaceObject.z.number().optional(),
-    barBorderColor: external_zod_namespaceObject.z.string().optional(),
-    barBorderWidth: external_zod_namespaceObject.z.number().optional(),
-    barBorderStyle: external_zod_namespaceObject.z.union([
+    xValue: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.number(),
+        external_zod_namespaceObject.z.string(),
+        external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.union([
+            external_zod_namespaceObject.z.number(),
+            external_zod_namespaceObject.z.string()
+        ]))
+    ]).optional(),
+    text: external_zod_namespaceObject.z.string().or(external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())).optional(),
+    textPosition: external_zod_namespaceObject.z["enum"]([
+        'outsideStart',
+        'outsideEnd',
+        'outsideMiddle',
+        'insideStart',
+        'insideMiddle',
+        'insideEnd'
+    ]).default('insideEnd').optional(),
+    textColor: external_zod_namespaceObject.z.string().default('#ffffff').optional(),
+    textFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+    textFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+    textAlign: external_zod_namespaceObject.z["enum"]([
+        'left',
+        'right',
+        'center'
+    ]).default('right').optional(),
+    textBaseline: external_zod_namespaceObject.z["enum"]([
+        'top',
+        'middle',
+        'bottom'
+    ]).default('top').optional(),
+    lineVisible: external_zod_namespaceObject.z.boolean().optional(),
+    lineColor: external_zod_namespaceObject.z.string().optional(),
+    lineWidth: external_zod_namespaceObject.z.number().optional(),
+    lineStyle: external_zod_namespaceObject.z.union([
         external_zod_namespaceObject.z.literal('solid'),
         external_zod_namespaceObject.z.literal('dashed'),
         external_zod_namespaceObject.z.literal('dotted')
     ]).optional(),
-    barRadius: external_zod_namespaceObject.z.union([
-        external_zod_namespaceObject.z.number(),
-        external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.number())
-    ]).optional()
+    backgroundVisible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    backgroundColor: external_zod_namespaceObject.z.string().default('#212121').optional(),
+    backgroundBorderColor: external_zod_namespaceObject.z.string().optional(),
+    backgroundBorderWidth: external_zod_namespaceObject.z.number().default(1).optional(),
+    backgroundBorderRadius: external_zod_namespaceObject.z.number().default(4).optional(),
+    backgroundPadding: external_zod_namespaceObject.z.number().optional(),
+    offsetY: external_zod_namespaceObject.z.number().default(0).optional(),
+    offsetX: external_zod_namespaceObject.z.number().default(0).optional()
 });
-const zMarkStyle = external_zod_namespaceObject.z.object({
-    barStyle: zBarStyle.optional()
+const zAnnotationHorizontalLine = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    yValue: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.number(),
+        external_zod_namespaceObject.z.string(),
+        external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.union([
+            external_zod_namespaceObject.z.number(),
+            external_zod_namespaceObject.z.string()
+        ]))
+    ]).optional(),
+    text: external_zod_namespaceObject.z.string().or(external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())).optional(),
+    textPosition: external_zod_namespaceObject.z["enum"]([
+        'outsideStart',
+        'outsideEnd',
+        'outsideMiddle',
+        'insideStart',
+        'insideMiddle',
+        'insideEnd'
+    ]).default('insideMiddle').optional(),
+    textColor: external_zod_namespaceObject.z.string().default('#ffffff').optional(),
+    textFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
+    textFontWeight: external_zod_namespaceObject.z.number().default(400).optional(),
+    textAlign: external_zod_namespaceObject.z["enum"]([
+        'left',
+        'right',
+        'center'
+    ]).default('center').optional(),
+    textBaseline: external_zod_namespaceObject.z["enum"]([
+        'top',
+        'middle',
+        'bottom'
+    ]).default('bottom').optional(),
+    lineVisible: external_zod_namespaceObject.z.boolean().optional(),
+    lineColor: external_zod_namespaceObject.z.string().optional(),
+    lineWidth: external_zod_namespaceObject.z.number().optional(),
+    lineStyle: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.literal('solid'),
+        external_zod_namespaceObject.z.literal('dashed'),
+        external_zod_namespaceObject.z.literal('dotted')
+    ]).optional(),
+    backgroundVisible: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    backgroundColor: external_zod_namespaceObject.z.string().default('#212121').optional(),
+    backgroundBorderColor: external_zod_namespaceObject.z.string().optional(),
+    backgroundBorderWidth: external_zod_namespaceObject.z.number().default(1).optional(),
+    backgroundBorderRadius: external_zod_namespaceObject.z.number().default(4).optional(),
+    backgroundPadding: external_zod_namespaceObject.z.number().optional(),
+    offsetY: external_zod_namespaceObject.z.number().default(0).optional(),
+    offsetX: external_zod_namespaceObject.z.number().default(0).optional()
 });
-const zAnnotationPoint = external_zod_namespaceObject.z.object({
+const zAnnotationArea = external_zod_namespaceObject.z.object({
     selector: external_zod_namespaceObject.z.union([
         zSelector,
         zSelectors
     ]),
+    textPosition: external_zod_namespaceObject.z["enum"]([
+        'top',
+        'topRight',
+        'topLeft',
+        'bottom',
+        'bottomLeft',
+        'bottomRight',
+        'left',
+        'right'
+    ]).default('top').optional(),
     text: external_zod_namespaceObject.z.string().or(external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.string())).optional(),
     textColor: external_zod_namespaceObject.z.string().default('#ffffff').optional(),
     textFontSize: external_zod_namespaceObject.z.number().default(12).optional(),
@@ -3373,12 +4707,95 @@ const zAnnotationPoint = external_zod_namespaceObject.z.object({
     backgroundBorderWidth: external_zod_namespaceObject.z.number().default(1).optional(),
     backgroundBorderRadius: external_zod_namespaceObject.z.number().default(4).optional(),
     backgroundPadding: external_zod_namespaceObject.z.number().optional(),
-    offsetY: external_zod_namespaceObject.z.number().default(0).optional(),
-    offsetX: external_zod_namespaceObject.z.number().default(0).optional()
+    areaColor: external_zod_namespaceObject.z.string().default('red').optional(),
+    areaColorOpacity: external_zod_namespaceObject.z.number().default(0.5).optional(),
+    areaBorderColor: external_zod_namespaceObject.z.number().optional(),
+    areaBorderWidth: external_zod_namespaceObject.z.number().default(2).optional(),
+    areaBorderRadius: external_zod_namespaceObject.z.number().default(4).optional(),
+    outerPadding: external_zod_namespaceObject.z.number().optional()
 });
 const zAnnotation = external_zod_namespaceObject.z.object({
-    annotationPoint: zAnnotationPoint.or(external_zod_namespaceObject.z.array(zAnnotationPoint)).optional()
+    annotationPoint: zAnnotationPoint.or(external_zod_namespaceObject.z.array(zAnnotationPoint)).optional(),
+    annotationVerticalLine: zAnnotationVerticalLine.or(external_zod_namespaceObject.z.array(zAnnotationVerticalLine)).optional(),
+    annotationHorizontalLine: zAnnotationHorizontalLine.or(external_zod_namespaceObject.z.array(zAnnotationHorizontalLine)).optional(),
+    annotationArea: zAnnotationArea.or(external_zod_namespaceObject.z.array(zAnnotationArea)).optional()
+});
+const zBarStyle = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    barColor: external_zod_namespaceObject.z.string().optional(),
+    barColorOpacity: external_zod_namespaceObject.z.number().optional(),
+    barBorderColor: external_zod_namespaceObject.z.string().optional(),
+    barBorderWidth: external_zod_namespaceObject.z.number().optional(),
+    barBorderStyle: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.literal('solid'),
+        external_zod_namespaceObject.z.literal('dashed'),
+        external_zod_namespaceObject.z.literal('dotted')
+    ]).optional(),
+    barRadius: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z.number(),
+        external_zod_namespaceObject.z.array(external_zod_namespaceObject.z.number())
+    ]).optional()
+});
+const zPointStyle = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    pointSize: external_zod_namespaceObject.z.number().optional(),
+    pointColor: external_zod_namespaceObject.z.string().optional(),
+    pointColorOpacity: external_zod_namespaceObject.z.number().optional(),
+    pointBorderColor: external_zod_namespaceObject.z.string().optional(),
+    pointBorderWidth: external_zod_namespaceObject.z.number().optional(),
+    pointBorderStyle: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z["enum"]([
+            'solid',
+            'dashed',
+            'dotted'
+        ])
+    ]).optional()
 });
+const zLineStyle = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    lineSmooth: external_zod_namespaceObject.z.boolean().default(true).optional(),
+    lineColor: external_zod_namespaceObject.z.string().optional(),
+    lineColorOpacity: external_zod_namespaceObject.z.number().optional(),
+    lineWidth: external_zod_namespaceObject.z.number().optional(),
+    lineStyle: external_zod_namespaceObject.z.union([
+        external_zod_namespaceObject.z["enum"]([
+            'solid',
+            'dashed',
+            'dotted'
+        ])
+    ]).optional()
+});
+const zAreaStyle = external_zod_namespaceObject.z.object({
+    selector: external_zod_namespaceObject.z.union([
+        zSelector,
+        zSelectors
+    ]).optional(),
+    areaColor: external_zod_namespaceObject.z.string().optional(),
+    areaColorOpacity: external_zod_namespaceObject.z.number().optional()
+});
+const zMarkStyle = external_zod_namespaceObject.z.object({
+    barStyle: zBarStyle.or(external_zod_namespaceObject.z.array(zBarStyle)).optional(),
+    pointStyle: zPointStyle.or(external_zod_namespaceObject.z.array(zPointStyle)).optional(),
+    lineStyle: zLineStyle.or(external_zod_namespaceObject.z.array(zLineStyle)).optional(),
+    areaStyle: zAreaStyle.or(external_zod_namespaceObject.z.array(zAreaStyle)).optional()
+});
+const zCustomThemeConfig = external_zod_namespaceObject.z.object({
+    baseConfig: zBaseConfig.optional(),
+    config: zConfig.optional(),
+    annotation: zAnnotation.optional(),
+    markStyle: zMarkStyle.optional()
+});
+const zCustomTheme = external_zod_namespaceObject.z.record(external_zod_namespaceObject.z.string(), zCustomThemeConfig).optional();
+const zTheme = external_zod_namespaceObject.z.string();
 exports.Builder = __webpack_exports__.Builder;
 exports.FoldMeasureId = __webpack_exports__.FoldMeasureId;
 exports.FoldMeasureName = __webpack_exports__.FoldMeasureName;
@@ -3402,10 +4819,13 @@ exports.columnParallelSpecPipeline = __webpack_exports__.columnParallelSpecPipel
 exports.columnPercentAdvancedPipeline = __webpack_exports__.columnPercentAdvancedPipeline;
 exports.columnPercentSpecPipeline = __webpack_exports__.columnPercentSpecPipeline;
 exports.columnSpecPipeline = __webpack_exports__.columnSpecPipeline;
+exports.createFormatter = __webpack_exports__.createFormatter;
+exports.createNumFormatter = __webpack_exports__.createNumFormatter;
 exports.darkTheme = __webpack_exports__.darkTheme;
 exports.dataReshapeFor1D1M = __webpack_exports__.dataReshapeFor1D1M;
 exports.dataReshapeFor2D1M = __webpack_exports__.dataReshapeFor2D1M;
 exports.execPipeline = __webpack_exports__.execPipeline;
+exports.findMeasureById = __webpack_exports__.findMeasureById;
 exports.foldMeasures = __webpack_exports__.foldMeasures;
 exports.isPivotChart = __webpack_exports__.isPivotChart;
 exports.isVChart = __webpack_exports__.isVChart;
@@ -3430,7 +4850,11 @@ exports.registerLightTheme = __webpack_exports__.registerLightTheme;
 exports.registerLine = __webpack_exports__.registerLine;
 exports.unfoldDimensions = __webpack_exports__.unfoldDimensions;
 exports.zAnnotation = __webpack_exports__.zAnnotation;
+exports.zAnnotationArea = __webpack_exports__.zAnnotationArea;
+exports.zAnnotationHorizontalLine = __webpack_exports__.zAnnotationHorizontalLine;
 exports.zAnnotationPoint = __webpack_exports__.zAnnotationPoint;
+exports.zAnnotationVerticalLine = __webpack_exports__.zAnnotationVerticalLine;
+exports.zAreaStyle = __webpack_exports__.zAreaStyle;
 exports.zAxis = __webpack_exports__.zAxis;
 exports.zBackgroundColor = __webpack_exports__.zBackgroundColor;
 exports.zBarStyle = __webpack_exports__.zBarStyle;
@@ -3438,6 +4862,8 @@ exports.zBaseConfig = __webpack_exports__.zBaseConfig;
 exports.zChartType = __webpack_exports__.zChartType;
 exports.zColor = __webpack_exports__.zColor;
 exports.zConfig = __webpack_exports__.zConfig;
+exports.zCrosshairLine = __webpack_exports__.zCrosshairLine;
+exports.zCrosshairRect = __webpack_exports__.zCrosshairRect;
 exports.zCustomTheme = __webpack_exports__.zCustomTheme;
 exports.zCustomThemeConfig = __webpack_exports__.zCustomThemeConfig;
 exports.zDataset = __webpack_exports__.zDataset;
@@ -3449,10 +4875,14 @@ exports.zEncoding = __webpack_exports__.zEncoding;
 exports.zFoldInfo = __webpack_exports__.zFoldInfo;
 exports.zLabel = __webpack_exports__.zLabel;
 exports.zLegend = __webpack_exports__.zLegend;
+exports.zLineStyle = __webpack_exports__.zLineStyle;
 exports.zMarkStyle = __webpack_exports__.zMarkStyle;
 exports.zMeasure = __webpack_exports__.zMeasure;
 exports.zMeasureGroup = __webpack_exports__.zMeasureGroup;
 exports.zMeasures = __webpack_exports__.zMeasures;
+exports.zNumFormat = __webpack_exports__.zNumFormat;
+exports.zPointStyle = __webpack_exports__.zPointStyle;
+exports.zStackCornerRadius = __webpack_exports__.zStackCornerRadius;
 exports.zTheme = __webpack_exports__.zTheme;
 exports.zTooltip = __webpack_exports__.zTooltip;
 exports.zUnfoldInfo = __webpack_exports__.zUnfoldInfo;
@@ -3484,10 +4914,13 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "columnPercentAdvancedPipeline",
     "columnPercentSpecPipeline",
     "columnSpecPipeline",
+    "createFormatter",
+    "createNumFormatter",
     "darkTheme",
     "dataReshapeFor1D1M",
     "dataReshapeFor2D1M",
     "execPipeline",
+    "findMeasureById",
     "foldMeasures",
     "isPivotChart",
     "isVChart",
@@ -3512,7 +4945,11 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "registerLine",
     "unfoldDimensions",
     "zAnnotation",
+    "zAnnotationArea",
+    "zAnnotationHorizontalLine",
     "zAnnotationPoint",
+    "zAnnotationVerticalLine",
+    "zAreaStyle",
     "zAxis",
     "zBackgroundColor",
     "zBarStyle",
@@ -3520,6 +4957,8 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zChartType",
     "zColor",
     "zConfig",
+    "zCrosshairLine",
+    "zCrosshairRect",
     "zCustomTheme",
     "zCustomThemeConfig",
     "zDataset",
@@ -3531,10 +4970,14 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "zFoldInfo",
     "zLabel",
     "zLegend",
+    "zLineStyle",
     "zMarkStyle",
     "zMeasure",
     "zMeasureGroup",
     "zMeasures",
+    "zNumFormat",
+    "zPointStyle",
+    "zStackCornerRadius",
     "zTheme",
     "zTooltip",
     "zUnfoldInfo",