@visactor/vseed 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -26,7 +26,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     registerBar: ()=>registerBar,
     isVChart: ()=>isVChart,
-    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
+    zBaseConfig: ()=>zBaseConfig,
     pieAdvancedPipeline: ()=>pieAdvancedPipeline,
     execPipeline: ()=>execPipeline,
     areaSpecPipeline: ()=>areaSpecPipeline,
@@ -41,22 +41,26 @@ __webpack_require__.d(__webpack_exports__, {
     columnPercentAdvancedPipeline: ()=>columnPercentAdvancedPipeline,
     zAxis: ()=>zAxis,
     isVTable: ()=>isVTable,
+    zAnnotation: ()=>zAnnotation,
     columnSpecPipeline: ()=>columnSpecPipeline,
     UnfoldDimensionGroup: ()=>UnfoldDimensionGroup,
     zDatasetReshapeInfo: ()=>zDatasetReshapeInfo,
     zFoldInfo: ()=>zFoldInfo,
     zYBandAxis: ()=>zYBandAxis,
     ORIGINAL_DATA: ()=>ORIGINAL_DATA,
-    zYLinearAxis: ()=>zYLinearAxis,
+    zAnnotationHorizontalLine: ()=>zAnnotationHorizontalLine,
+    zAnnotationArea: ()=>zAnnotationArea,
     zMarkStyle: ()=>zMarkStyle,
+    zYLinearAxis: ()=>zYLinearAxis,
     Separator: ()=>Separator,
     columnAdvancedPipeline: ()=>columnAdvancedPipeline,
     columnParallelSpecPipeline: ()=>columnParallelSpecPipeline,
     zLabel: ()=>zLabel,
     registerColumn: ()=>registerColumn,
-    zDimension: ()=>zDimension,
+    zAnnotationPoint: ()=>zAnnotationPoint,
     lightTheme: ()=>lightTheme,
     registerColumnParallel: ()=>registerColumnParallel,
+    zDimension: ()=>zDimension,
     isPivotChart: ()=>isPivotChart,
     zCustomTheme: ()=>zCustomTheme,
     zXBandAxis: ()=>zXBandAxis,
@@ -86,7 +90,7 @@ __webpack_require__.d(__webpack_exports__, {
     foldMeasures: ()=>foldMeasures,
     dataReshapeFor2D1M: ()=>dataReshapeFor2D1M,
     registerLightTheme: ()=>registerLightTheme,
-    zChartType: ()=>zChartType,
+    zAnnotationVerticalLine: ()=>zAnnotationVerticalLine,
     registerDarkTheme: ()=>registerDarkTheme,
     barParallelAdvancedPipeline: ()=>barParallelAdvancedPipeline,
     FoldMeasureValue: ()=>FoldMeasureValue,
@@ -95,13 +99,14 @@ __webpack_require__.d(__webpack_exports__, {
     pieSpecPipeline: ()=>pieSpecPipeline,
     barSpecPipeline: ()=>barSpecPipeline,
     lineSpecPipeline: ()=>lineSpecPipeline,
+    zChartType: ()=>zChartType,
     zTooltip: ()=>zTooltip,
-    zBaseConfig: ()=>zBaseConfig,
     unfoldDimensions: ()=>unfoldDimensions,
     areaAdvancedPipeline: ()=>areaAdvancedPipeline,
     areaPercentSpecPipeline: ()=>areaPercentSpecPipeline,
     Builder: ()=>Builder,
     barParallelSpecPipeline: ()=>barParallelSpecPipeline,
+    columnPercentSpecPipeline: ()=>columnPercentSpecPipeline,
     registerAll: ()=>all_registerAll
 });
 const initAdvancedVSeed = (advancedVSeed, context)=>{
@@ -744,6 +749,19 @@ const markStyle_markStyle = (advancedVSeed, context)=>{
         markStyle
     };
 };
+const annotation_annotation = (advancedVSeed, context)=>{
+    const { vseed } = context;
+    const annotation = (0, external_remeda_namespaceObject.pick)(vseed, [
+        'annotationPoint',
+        'annotationHorizontalLine',
+        'annotationVerticalLine',
+        'annotationArea'
+    ]);
+    return {
+        ...advancedVSeed,
+        annotation
+    };
+};
 const lineAdvancedPipeline = [
     initAdvancedVSeed,
     autoMeasures,
@@ -756,7 +774,8 @@ const lineAdvancedPipeline = [
     encodingXY,
     vchartBaseConfig,
     lineConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const barAdvancedPipeline = [
     initAdvancedVSeed,
@@ -771,7 +790,8 @@ const barAdvancedPipeline = [
     barConfig,
     vchartBaseConfig,
     vchartTheme,
-    markStyle_markStyle
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const barParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -786,7 +806,8 @@ const barParallelAdvancedPipeline = [
     barParallelConfig,
     vchartBaseConfig,
     vchartTheme,
-    markStyle_markStyle
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const barPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -801,7 +822,8 @@ const barPercentAdvancedPipeline = [
     barPercentConfig,
     vchartBaseConfig,
     vchartTheme,
-    markStyle_markStyle
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnAdvancedPipeline = [
     initAdvancedVSeed,
@@ -816,7 +838,8 @@ const columnAdvancedPipeline = [
     columnConfig,
     vchartBaseConfig,
     vchartTheme,
-    markStyle_markStyle
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnParallelAdvancedPipeline = [
     initAdvancedVSeed,
@@ -831,7 +854,8 @@ const columnParallelAdvancedPipeline = [
     columnParallelConfig,
     vchartBaseConfig,
     vchartTheme,
-    markStyle_markStyle
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const columnPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -846,7 +870,8 @@ const columnPercentAdvancedPipeline = [
     columnPercentConfig,
     vchartBaseConfig,
     vchartTheme,
-    markStyle_markStyle
+    markStyle_markStyle,
+    annotation_annotation
 ];
 const areaAdvancedPipeline = [
     initAdvancedVSeed,
@@ -860,7 +885,8 @@ const areaAdvancedPipeline = [
     encodingXY,
     areaConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const areaPercentAdvancedPipeline = [
     initAdvancedVSeed,
@@ -874,7 +900,8 @@ const areaPercentAdvancedPipeline = [
     encodingXY,
     areaPercentConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const pieAdvancedPipeline = [
     initAdvancedVSeed,
@@ -888,7 +915,8 @@ const pieAdvancedPipeline = [
     encodingPolar,
     pieConfig,
     vchartBaseConfig,
-    vchartTheme
+    vchartTheme,
+    annotation_annotation
 ];
 const dataset_dataset = (spec, context)=>{
     const { advancedVSeed } = context;
@@ -1917,11 +1945,13 @@ const selector_selector = (datum, 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 '!=':
@@ -1946,11 +1976,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;
     }
@@ -1958,19 +1997,32 @@ 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);
+    ].includes(selector.operator) || [
+        'in',
+        'not in'
+    ].includes(selector.op));
 const barStyle_barStyle = (spec, context)=>{
     const { advancedVSeed } = context;
     const { markStyle, encoding } = advancedVSeed;
@@ -1984,23 +2036,23 @@ const barStyle_barStyle = (spec, context)=>{
         ...result,
         bar: {
             style: {
-                fill: (datum, context)=>{
+                fill: barColor ? (datum, context)=>{
                     if (selector_selector(datum, barSelector)) return barColor;
                     return context.seriesColor(datum[encoding[0]?.group?.[0]]);
-                },
-                fillOpacity: (datum)=>{
+                } : void 0,
+                fillOpacity: barColorOpacity ? (datum)=>{
                     if (selector_selector(datum, barSelector)) return barColorOpacity;
                     return 1;
-                },
-                stroke: (datum, context)=>{
+                } : void 0,
+                stroke: barBorderColor ? (datum, context)=>{
                     if (selector_selector(datum, barSelector)) return barBorderColor;
                     return context.seriesColor(datum[encoding[0]?.group?.[0]]);
-                },
-                lineWidth: (datum)=>{
+                } : void 0,
+                lineWidth: barBorderWidth ? (datum)=>{
                     if (selector_selector(datum, barSelector)) return barBorderWidth;
                     return 0;
-                },
-                lineDash: (datum)=>{
+                } : void 0,
+                lineDash: barBorderStyle ? (datum)=>{
                     if (selector_selector(datum, barSelector)) {
                         if ('solid' === barBorderStyle) ;
                         else if ('dashed' === barBorderStyle) return [
@@ -2016,15 +2068,518 @@ const barStyle_barStyle = (spec, context)=>{
                         0,
                         0
                     ];
-                },
-                cornerRadius: (datum)=>{
+                } : void 0,
+                cornerRadius: barRadius ? (datum)=>{
                     if (selector_selector(datum, barSelector)) return barRadius;
                     return 0;
-                }
+                } : void 0
             }
         }
     };
 };
+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;
+    if (!annotation || !annotation.annotationPoint) return spec;
+    const { annotationPoint } = annotation;
+    const annotationPointList = Array.isArray(annotationPoint) ? annotationPoint : [
+        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 = 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)=>({
+                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 {
+                            x,
+                            y: y
+                        };
+                    }
+                },
+                itemLine: {
+                    visible: false
+                },
+                itemContent: {
+                    offsetY,
+                    offsetX,
+                    text: {
+                        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
+                            }
+                        }
+                    }
+                }
+            }));
+    });
+    return {
+        ...spec,
+        markPoint
+    };
+};
+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,
+                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 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,
+                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 = 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 {
+            regionRelative: true,
+            positions: (data, context)=>{
+                console.log('debug selectedData', selectedData);
+                const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
+                const xyList = positionData.map((datum)=>context.dataToPosition(datum));
+                const xScale = context.scaleX;
+                const yScale = context.scaleY;
+                const xBandWidth = xScale?.bandwidth?.();
+                const yBandWidth = yScale?.bandwidth?.();
+                if (xBandWidth) {
+                    const 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 (yBandWidth) {
+                    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 {
+            regionRelative: true,
+            positions: (data, context)=>{
+                const positionData = data.filter((item)=>selectedData.some((datum)=>isSubset(datum, item)));
+                const xyList = positionData.map((datum)=>context.dataToPosition(datum));
+                const xScale = context.scaleX;
+                const yScale = context.scaleY;
+                const xBandWidth = xScale?.bandwidth?.();
+                const yBandWidth = yScale?.bandwidth?.();
+                if (xBandWidth) {
+                    const 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 (yBandWidth) {
+                    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 line_line = [
     initLine,
     color_color,
@@ -2034,7 +2589,11 @@ const line_line = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    discreteLegend
+    discreteLegend,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotLine = [
     initPivot,
@@ -2049,7 +2608,11 @@ const pivotLine = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2069,7 +2632,11 @@ const column = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    barStyle_barStyle
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotColumn = [
     initPivot,
@@ -2086,7 +2653,11 @@ const pivotColumn = [
         yLinear,
         label_label,
         tooltip_tooltip,
-        barStyle_barStyle
+        barStyle_barStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2105,7 +2676,11 @@ const columnParallel = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    barStyle_barStyle
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotColumnParallel = [
     initPivot,
@@ -2121,7 +2696,11 @@ const pivotColumnParallel = [
         yLinear,
         label_label,
         tooltip_tooltip,
-        barStyle_barStyle
+        barStyle_barStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2142,7 +2721,11 @@ const columnPercent = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    barStyle_barStyle
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotColumnPercent = [
     initPivot,
@@ -2160,7 +2743,11 @@ const pivotColumnPercent = [
         yLinear,
         label_label,
         tooltip_tooltip,
-        barStyle_barStyle
+        barStyle_barStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2179,7 +2766,11 @@ const bar = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    barStyle_barStyle
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotBar = [
     initPivot,
@@ -2195,7 +2786,11 @@ const pivotBar = [
         label_label,
         label_label,
         tooltip_tooltip,
-        barStyle_barStyle
+        barStyle_barStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2214,7 +2809,11 @@ const barParallel = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    barStyle_barStyle
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotBarParallel = [
     initPivot,
@@ -2230,7 +2829,11 @@ const pivotBarParallel = [
         xLinear,
         label_label,
         tooltip_tooltip,
-        barStyle_barStyle
+        barStyle_barStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2250,7 +2853,11 @@ const barPercent = [
     label_label,
     tooltip_tooltip,
     discreteLegend,
-    barStyle_barStyle
+    barStyle_barStyle,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationAreaBand
 ];
 const pivotBarPercent = [
     initPivot,
@@ -2267,7 +2874,11 @@ const pivotBarPercent = [
         xLinear,
         label_label,
         tooltip_tooltip,
-        barStyle_barStyle
+        barStyle_barStyle,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationAreaBand
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2286,7 +2897,11 @@ const area_area = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    discreteLegend
+    discreteLegend,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotArea = [
     initPivot,
@@ -2302,7 +2917,11 @@ const pivotArea = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2322,7 +2941,11 @@ const areaPercent = [
     yLinear,
     label_label,
     tooltip_tooltip,
-    discreteLegend
+    discreteLegend,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotAreaPercent = [
     initPivot,
@@ -2339,7 +2962,11 @@ const pivotAreaPercent = [
         xBand,
         yLinear,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2355,7 +2982,11 @@ const pie = [
     dataset_dataset,
     label_label,
     tooltip_tooltip,
-    discreteLegend
+    discreteLegend,
+    annotationPoint_annotationPoint,
+    annotationVerticalLine_annotationVerticalLine,
+    annotationHorizontalLine_annotationHorizontalLine,
+    annotationArea_annotationArea
 ];
 const pivotPie = [
     initPivot,
@@ -2368,7 +2999,11 @@ const pivotPie = [
         background_backgroundColor,
         datasetPivotPlaceholder,
         label_label,
-        tooltip_tooltip
+        tooltip_tooltip,
+        annotationPoint_annotationPoint,
+        annotationVerticalLine_annotationVerticalLine,
+        annotationHorizontalLine_annotationHorizontalLine,
+        annotationArea_annotationArea
     ]),
     pivotRowDimensions,
     pivotColumnDimensions,
@@ -2410,17 +3045,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;
     }
@@ -2443,6 +3078,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 = {};
@@ -3190,7 +3831,26 @@ const zSelector = external_zod_namespaceObject.z.union([
     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(),
@@ -3202,7 +3862,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(),
@@ -3218,24 +3885,204 @@ const zBarStyle = external_zod_namespaceObject.z.object({
     selector: external_zod_namespaceObject.z.union([
         zSelector,
         zSelectors
-    ]),
-    barColor: external_zod_namespaceObject.z.string(),
-    barColorOpacity: external_zod_namespaceObject.z.number(),
-    barBorderColor: external_zod_namespaceObject.z.string(),
-    barBorderWidth: external_zod_namespaceObject.z.number(),
+    ]).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 zMarkStyle = external_zod_namespaceObject.z.object({
     barStyle: zBarStyle.optional()
 });
+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(),
+    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(),
+    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 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 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(),
+    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(),
+    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(),
+    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()
+});
 exports.Builder = __webpack_exports__.Builder;
 exports.FoldMeasureId = __webpack_exports__.FoldMeasureId;
 exports.FoldMeasureName = __webpack_exports__.FoldMeasureName;
@@ -3286,6 +4133,11 @@ exports.registerDarkTheme = __webpack_exports__.registerDarkTheme;
 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.zAxis = __webpack_exports__.zAxis;
 exports.zBackgroundColor = __webpack_exports__.zBackgroundColor;
 exports.zBarStyle = __webpack_exports__.zBarStyle;
@@ -3366,6 +4218,11 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "registerLightTheme",
     "registerLine",
     "unfoldDimensions",
+    "zAnnotation",
+    "zAnnotationArea",
+    "zAnnotationHorizontalLine",
+    "zAnnotationPoint",
+    "zAnnotationVerticalLine",
     "zAxis",
     "zBackgroundColor",
     "zBarStyle",