@visactor/vseed 0.5.0 → 0.5.2

package/dist/umd/index.js

@@ -1346,7 +1346,7 @@
                 registerScatter: ()=>registerScatter,
                 zAreaPercent: ()=>zAreaPercent,
                 isDimension: ()=>isDimension,
-                isBarLikeChart: ()=>chatType_isBarLikeChart,
+                isBarLikeChart: ()=>isBarLikeChart,
                 columnParallelAdvancedPipeline: ()=>columnParallelAdvancedPipeline,
                 deleteDimensionTreeByCallback: ()=>deleteDimensionTreeByCallback,
                 zBarConfig: ()=>zBarConfig,
@@ -3202,7 +3202,7 @@ self.R = R;
             const isAreaPercent = (vseed)=>vseed.chartType === ChartTypeEnum.AreaPercent;
             const isColumnPercent = (vseed)=>vseed.chartType === ChartTypeEnum.ColumnPercent;
             const isBarPercent = (vseed)=>vseed.chartType === ChartTypeEnum.BarPercent;
-            const chatType_isBarLikeChart = (vseed)=>vseed.chartType === ChartTypeEnum.Bar || vseed.chartType === ChartTypeEnum.RaceBar || vseed.chartType === ChartTypeEnum.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
+            const isBarLikeChart = (vseed)=>vseed.chartType === ChartTypeEnum.Bar || vseed.chartType === ChartTypeEnum.RaceBar || vseed.chartType === ChartTypeEnum.BarPercent || vseed.chartType === ChartTypeEnum.BarParallel;
             const isVTable = (vseed)=>[
                     'table',
                     'pivotTable'
@@ -3279,6 +3279,77 @@ self.R = R;
                     'areaPercent',
                     'scatter'
                 ].includes(chartType);
+            function colorAdapter(ordinalPipe, linearPipe) {
+                return (spec, context)=>{
+                    const { advancedVSeed, vseed } = context;
+                    if (isLinearColor(advancedVSeed, vseed)) return linearPipe(spec, context);
+                    return ordinalPipe(spec, context);
+                };
+            }
+            const isLinearColor = (advancedVSeed, vseed)=>{
+                const { encoding, chartType } = advancedVSeed;
+                const measureIdList = (vseed.measures || advancedVSeed.measures).map((measure)=>measure.id);
+                const { color = [] } = encoding;
+                return 'heatmap' === chartType ? color.length >= 1 && color.every((c)=>measureIdList.includes(c)) : 1 === color.length && measureIdList.includes(color[0]);
+            };
+            const getColorMeasureId = (advancedVSeed, vseed)=>{
+                if (isLinearColor(advancedVSeed, vseed)) {
+                    const { encoding } = advancedVSeed;
+                    const { color } = encoding;
+                    return color?.[0];
+                }
+            };
+            const color_color = (spec, context)=>{
+                const result = {
+                    ...spec
+                };
+                const { advancedVSeed } = context;
+                const { datasetReshapeInfo, chartType } = advancedVSeed;
+                const { unfoldInfo } = datasetReshapeInfo[0];
+                const baseConfig = advancedVSeed.config[chartType];
+                if (!baseConfig || !baseConfig.color) return result;
+                const colorItems = unfoldInfo.colorItems;
+                const colorIdMap = unfoldInfo.colorIdMap;
+                const { color } = baseConfig;
+                const { colorScheme, colorMapping } = color;
+                result.color = {
+                    type: 'ordinal',
+                    domain: colorItems,
+                    range: colorScheme,
+                    specified: createSpecifiedForColorMapping(colorMapping, colorIdMap, colorItems)
+                };
+                return result;
+            };
+            const createSpecifiedForColorMapping = (colorMapping, colorIdMap, colorItems)=>{
+                if (!colorMapping || !colorIdMap || !colorItems) return;
+                const matchedList = [];
+                const colors = Object.entries(colorMapping).sort((a, b)=>b[0].length - a[0].length);
+                const accurateMap = colors.reduce((prev, cur)=>{
+                    const name = cur[0];
+                    const colorValue = cur[1];
+                    const accurateMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorObj])=>colorKey === name || colorObj.alias === name || colorObj.id === name);
+                    accurateMatchedList.forEach((item)=>{
+                        prev[item[0]] = colorValue;
+                        matchedList.push(name);
+                    });
+                    return prev;
+                }, {});
+                const fuzzyMap = colors.reduce((prev, cur)=>{
+                    const name = cur[0];
+                    const colorValue = cur[1];
+                    if (matchedList.includes(name)) return prev;
+                    const fuzzyMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorObj])=>colorKey.includes(name) || colorObj.alias.includes(name) || colorObj.id.includes(name));
+                    fuzzyMatchedList.forEach((item)=>{
+                        if (prev[item[0]]) return;
+                        prev[item[0]] = colorValue;
+                    });
+                    return prev;
+                }, {});
+                return {
+                    ...fuzzyMap,
+                    ...accurateMap
+                };
+            };
             const getColorItems = (builder)=>{
                 const advancedVSeed = builder.advancedVSeed;
                 if (!advancedVSeed || isTable(builder.vseed) || isPivotTable(builder.vseed)) return [];
@@ -3303,6 +3374,24 @@ self.R = R;
                     }), {});
                 return colorIdMap;
             };
+            const getColorValueMap = (builder)=>{
+                const advancedVSeed = builder.advancedVSeed;
+                if (!advancedVSeed || isTable(builder.vseed) || isPivotTable(builder.vseed) || isLinearColor(advancedVSeed, builder.vseed)) return;
+                const { datasetReshapeInfo, chartType } = advancedVSeed;
+                const unfoldInfo = datasetReshapeInfo[0]?.unfoldInfo;
+                const baseConfig = advancedVSeed.config?.[chartType];
+                const colorConfig = baseConfig?.color;
+                if (!unfoldInfo || !colorConfig) return;
+                const colorItems = unfoldInfo.colorItems ?? [];
+                const colorIdMap = unfoldInfo.colorIdMap;
+                const colorScheme = colorConfig.colorScheme ?? [];
+                const specified = createSpecifiedForColorMapping(colorConfig.colorMapping, colorIdMap, colorItems) ?? {};
+                return colorItems.reduce((prev, colorId, index)=>{
+                    const colorValue = specified[colorId] ?? colorScheme[index % colorScheme.length];
+                    if (colorValue) prev[colorId] = colorValue;
+                    return prev;
+                }, {});
+            };
             class Builder {
                 _vseed;
                 _advancedVSeed = null;
@@ -3323,6 +3412,7 @@ self.R = R;
                 buildAdvanced = ()=>buildAdvanced(this);
                 getColorItems = ()=>getColorItems(this);
                 getColorIdMap = ()=>getColorIdMap(this);
+                getColorValueMap = ()=>getColorValueMap(this);
                 get vseed() {
                     return this._vseed;
                 }
@@ -5422,26 +5512,6 @@ self.R = R;
                     unfoldInfo
                 };
             };
-            function colorAdapter(ordinalPipe, linearPipe) {
-                return (spec, context)=>{
-                    const { advancedVSeed, vseed } = context;
-                    if (isLinearColor(advancedVSeed, vseed)) return linearPipe(spec, context);
-                    return ordinalPipe(spec, context);
-                };
-            }
-            const isLinearColor = (advancedVSeed, vseed)=>{
-                const { encoding, chartType } = advancedVSeed;
-                const measureIdList = (vseed.measures || advancedVSeed.measures).map((measure)=>measure.id);
-                const { color = [] } = encoding;
-                return 'heatmap' === chartType ? color.length >= 1 && color.every((c)=>measureIdList.includes(c)) : 1 === color.length && measureIdList.includes(color[0]);
-            };
-            const getColorMeasureId = (advancedVSeed, vseed)=>{
-                if (isLinearColor(advancedVSeed, vseed)) {
-                    const { encoding } = advancedVSeed;
-                    const { color } = encoding;
-                    return color?.[0];
-                }
-            };
             const reshapeWithEncoding = (advancedVSeed, context)=>{
                 const result = {
                     ...advancedVSeed
@@ -5729,48 +5799,6 @@ self.R = R;
                 const effect = effects[effects.length - 1] ?? EFFECT_NONE;
                 return effect !== EFFECT_NONE;
             };
-            const atmospherePoint = (effect)=>{
-                if (effect === EFFECT_NONE) return {};
-                if ('breath' === effect) return {
-                    channel: {
-                        scaleX: {
-                            from: 0.8,
-                            to: 1.2
-                        },
-                        scaleY: {
-                            from: 0.8,
-                            to: 1.2
-                        }
-                    }
-                };
-                if ('reveal' === effect) return {
-                    channel: {
-                        fillOpacity: {
-                            from: 0.6,
-                            to: 1
-                        },
-                        strokeOpacity: {
-                            from: 0.6,
-                            to: 1
-                        }
-                    }
-                };
-                return {
-                    channel: {
-                        outerBorder: {
-                            from: {
-                                distance: 0,
-                                strokeOpacity: 1
-                            },
-                            to: (...args)=>({
-                                    distance: 16,
-                                    strokeOpacity: 1e-8,
-                                    stroke: args[1]?.attribute?.fill
-                                })
-                        }
-                    }
-                };
-            };
             class Generator {
                 static GenAutoIncrementId() {
                     return Generator.auto_increment_id++;
@@ -8998,7 +9026,7 @@ self.R = R;
                 if (loopEffect === VScreenAnimationType.highLight && loop) {
                     const groupDuration = 0.7;
                     const stopDuration = 0.85;
-                    loopDuration = groupDuration * getGroupCountFromSpec(spec).groupCount + stopDuration;
+                    loopDuration = loop.duration ?? groupDuration * getGroupCountFromSpec(spec).groupCount + stopDuration;
                     result.push(...groupHighLightBar(startTime, loop, loopDuration, interval, atmosphereDuration, barMotion_isHorizontalBar(chartType), spec));
                 } else if (loop) result.push({
                     ...getLoopResult(loopEffect, chartType, spec),
@@ -9042,6 +9070,57 @@ self.R = R;
                     }
                 };
             };
+            const pointAtmosphere_EFFECT_NONE = VScreenAnimationType.none;
+            const atmospherePoint = (effect)=>{
+                if (effect === pointAtmosphere_EFFECT_NONE) return {};
+                if ('breath' === effect) return {
+                    channel: {
+                        scaleX: {
+                            from: 0.8,
+                            to: 2
+                        },
+                        scaleY: {
+                            from: 0.8,
+                            to: 2
+                        }
+                    }
+                };
+                if ('reveal' === effect) return {
+                    channel: {
+                        fillOpacity: {
+                            from: 0.6,
+                            to: 1
+                        },
+                        strokeOpacity: {
+                            from: 0.6,
+                            to: 1
+                        }
+                    }
+                };
+                return {
+                    channel: {
+                        outerBorder: {
+                            from: {
+                                distance: 0,
+                                strokeOpacity: 1
+                            },
+                            to: (...args)=>({
+                                    distance: 16,
+                                    strokeOpacity: 1e-8,
+                                    stroke: args[1]?.attribute?.fill
+                                })
+                        }
+                    },
+                    custom: (ratio, from, to, out, graphic)=>{
+                        graphic.attribute.strokeOpacity = ratio * (to.strokeOpacity - from.strokeOpacity) + from.strokeOpacity;
+                        graphic.attribute.outerBorder = {
+                            distance: ratio * (to.outerBorder.distance - from.outerBorder.distance) + from.outerBorder.distance,
+                            strokeOpacity: ratio * (to.outerBorder.strokeOpacity - from.outerBorder.strokeOpacity) + from.outerBorder.strokeOpacity,
+                            stroke: to.outerBorder.stroke
+                        };
+                    }
+                };
+            };
             const growthTopLine = ()=>({
                     type: 'growPointsYIn',
                     options: {
@@ -9616,57 +9695,6 @@ self.R = R;
                     ]
                 };
             };
-            const color_color = (spec, context)=>{
-                const result = {
-                    ...spec
-                };
-                const { advancedVSeed } = context;
-                const { datasetReshapeInfo, chartType } = advancedVSeed;
-                const { unfoldInfo } = datasetReshapeInfo[0];
-                const baseConfig = advancedVSeed.config[chartType];
-                if (!baseConfig || !baseConfig.color) return result;
-                const colorItems = unfoldInfo.colorItems;
-                const colorIdMap = unfoldInfo.colorIdMap;
-                const { color } = baseConfig;
-                const { colorScheme, colorMapping } = color;
-                result.color = {
-                    type: 'ordinal',
-                    domain: colorItems,
-                    range: colorScheme,
-                    specified: createSpecifiedForColorMapping(colorMapping, colorIdMap, colorItems)
-                };
-                return result;
-            };
-            const createSpecifiedForColorMapping = (colorMapping, colorIdMap, colorItems)=>{
-                if (!colorMapping || !colorIdMap || !colorItems) return;
-                const matchedList = [];
-                const colors = Object.entries(colorMapping).sort((a, b)=>b[0].length - a[0].length);
-                const accurateMap = colors.reduce((prev, cur)=>{
-                    const name = cur[0];
-                    const colorValue = cur[1];
-                    const accurateMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorObj])=>colorKey === name || colorObj.alias === name || colorObj.id === name);
-                    accurateMatchedList.forEach((item)=>{
-                        prev[item[0]] = colorValue;
-                        matchedList.push(name);
-                    });
-                    return prev;
-                }, {});
-                const fuzzyMap = colors.reduce((prev, cur)=>{
-                    const name = cur[0];
-                    const colorValue = cur[1];
-                    if (matchedList.includes(name)) return prev;
-                    const fuzzyMatchedList = Object.entries(colorIdMap).filter(([colorKey, colorObj])=>colorKey.includes(name) || colorObj.alias.includes(name) || colorObj.id.includes(name));
-                    fuzzyMatchedList.forEach((item)=>{
-                        if (prev[item[0]]) return;
-                        prev[item[0]] = colorValue;
-                    });
-                    return prev;
-                }, {});
-                return {
-                    ...fuzzyMap,
-                    ...accurateMap
-                };
-            };
             const linearColor = (spec, context)=>{
                 const result = {
                     ...spec
@@ -10843,6 +10871,20 @@ self.R = R;
                     ...meaContent
                 ];
             };
+            const getAnnotationLineDash = (lineStyle, lineDash)=>{
+                if (Array.isArray(lineDash)) return lineDash;
+                if ('dashed' === lineStyle) return [
+                    2,
+                    2
+                ];
+                if ('dotted' === lineStyle) return [
+                    2,
+                    5
+                ];
+                return [
+                    0
+                ];
+            };
             const isSubset = (sub, obj, excludeMeasuresIds)=>Object.entries(sub).every(([key, value])=>{
                     if (excludeMeasuresIds && excludeMeasuresIds.includes(key)) return false;
                     if ('string' == typeof value) return obj[key] === value;
@@ -10924,7 +10966,7 @@ self.R = R;
                     const annotationPointList = Array.isArray(annotationPoint) ? annotationPoint : [
                         annotationPoint
                     ];
-                    const isHorizontalBar = chatType_isBarLikeChart(advancedVSeed);
+                    const isHorizontalBar = isBarLikeChart(advancedVSeed);
                     const defaultStyle = isHorizontalBar ? {
                         textAlign: 'right',
                         textBaseline: 'middle'
@@ -10934,6 +10976,7 @@ self.R = R;
                     };
                     const markPoint = annotationPointList.flatMap((annotationPoint)=>{
                         const { selector: selectorPoint, measureId, dynamicFilter, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = defaultStyle.textAlign, textBaseline = defaultStyle.textBaseline, textBackgroundBorderColor = theme?.textBackgroundBorderColor, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundPadding = theme?.textBackgroundPadding ?? 2, textBackgroundVisible = theme?.textBackgroundVisible ?? true, offsetX = theme?.offsetX ?? 0, offsetY = theme?.offsetY ?? 0 } = annotationPoint;
+                        const textBackgroundOpacity = theme?.textBackgroundOpacity;
                         const dataset = advancedVSeed.dataset.flat();
                         const selectedData = selectorPoint || dynamicFilter ? findSelectedDatas({
                             dataset,
@@ -10961,7 +11004,7 @@ self.R = R;
                                         visible: textBackgroundVisible,
                                         padding: textBackgroundPadding,
                                         style: {
-                                            opacity: 0.95,
+                                            opacity: textBackgroundOpacity ?? 0.95,
                                             cornerRadius: textBackgroundBorderRadius ?? 4,
                                             fill: textBackgroundColor,
                                             stroke: textBackgroundBorderColor,
@@ -10972,7 +11015,6 @@ self.R = R;
                                     }
                                 },
                                 style: {
-                                    opacity: 0.95,
                                     visible: true,
                                     textAlign: textAlign,
                                     textBaseline: textBaseline,
@@ -11209,14 +11251,19 @@ self.R = R;
                 if ('percent' === differenceType) return `${(100 * differenceValue).toFixed(2)}%`;
                 return `${differenceValue}`;
             };
+            const inferDifferenceConnectDirection = (vseed, values)=>{
+                const isNegativeSide = values.every((value)=>value < 0);
+                if (isBarLikeChart(vseed)) return isNegativeSide ? 'left' : 'right';
+                return isNegativeSide ? 'bottom' : 'top';
+            };
             const DEFAULT_LINE_COLOR = '#BCC1CB';
             const DEFAULT_TEXT_COLOR = '#ffffff';
             const DEFAULT_TEXT_BACKGROUND_COLOR = '#BCC1CB';
             const DEFAULT_TEXT_FONT_SIZE = 12;
-            const DEFAULT_LINE_WIDTH = 2;
-            const DEFAULT_CORNER_RADIUS = 4;
+            const DEFAULT_LINE_WIDTH = 1;
+            const DEFAULT_CORNER_RADIUS = 3;
             const DEFAULT_LABEL_PADDING = 4;
-            const DEFAULT_END_SYMBOL_SIZE = 12;
+            const DEFAULT_END_SYMBOL_SIZE = 6;
             const DEFAULT_END_SYMBOL_REF_X = -4;
             const DEFAULT_GUTTER_BASE_OFFSET = 20;
             const DEFAULT_GUTTER_RIGHT_PADDING = 44;
@@ -11229,6 +11276,7 @@ self.R = R;
                 type: 'percent',
                 fractionDigits: 2
             };
+            const shouldInferDifferenceConnectDirection = (chartType)=>'column' === chartType || 'bar' === chartType || 'columnParallel' === chartType || 'barParallel' === chartType;
             const getDifferenceLinePath = (index, total)=>1 === total ? 'annotationDifferenceLine' : `annotationDifferenceLine[${index}]`;
             const annotationDifferenceLine_toArray = (value)=>{
                 if (Array.isArray(value)) return value;
@@ -11269,21 +11317,45 @@ self.R = R;
                     ]
                 };
             };
-            const buildFixedGutterExpandDistance = (isHorizontalChart)=>(_markerData, context)=>{
+            const buildFixedGutterExpandDistance = (connectDirection)=>(_markerData, context)=>{
                     const region = context?.region;
                     const coordinatePoints = Array.isArray(context?.coordinatePoints) ? context.coordinatePoints : [];
                     if (!region || 0 === coordinatePoints.length) return 0;
                     const { x: regionStartX, y: regionStartY } = region.getLayoutStartPoint();
-                    const { width } = region.getLayoutRect();
-                    if (isHorizontalChart) {
+                    const { width, height } = region.getLayoutRect();
+                    if ('top' === connectDirection) {
                         const targetY = regionStartY - DEFAULT_GUTTER_BASE_OFFSET;
                         const minY = Math.min(...coordinatePoints.map((point)=>point.y));
                         return Math.max(0, minY - targetY);
                     }
+                    if ('bottom' === connectDirection) {
+                        const targetY = regionStartY + height + DEFAULT_GUTTER_BASE_OFFSET;
+                        const maxY = Math.max(...coordinatePoints.map((point)=>point.y));
+                        return Math.max(0, targetY - maxY);
+                    }
+                    if ('left' === connectDirection) {
+                        const targetX = regionStartX - DEFAULT_GUTTER_BASE_OFFSET;
+                        const minX = Math.min(...coordinatePoints.map((point)=>point.x));
+                        return Math.max(0, minX - targetX);
+                    }
                     const targetX = regionStartX + width + DEFAULT_GUTTER_BASE_OFFSET;
                     const maxX = Math.max(...coordinatePoints.map((point)=>point.x));
                     return Math.max(0, targetX - maxX);
                 };
+            const getDifferenceLinePaddingPatch = (connectDirection)=>{
+                if ('top' === connectDirection) return {
+                    top: DEFAULT_GUTTER_TOP_PADDING
+                };
+                if ('bottom' === connectDirection) return {
+                    bottom: DEFAULT_GUTTER_TOP_PADDING
+                };
+                if ('left' === connectDirection) return {
+                    left: DEFAULT_GUTTER_RIGHT_PADDING
+                };
+                return {
+                    right: DEFAULT_GUTTER_RIGHT_PADDING
+                };
+            };
             const getAxisFormatter = (spec)=>{
                 const valueAxisOrient = 'horizontal' === spec.direction ? 'bottom' : 'left';
                 const formatMethod = spec.axes?.find((axis)=>axis.orient === valueAxisOrient)?.label?.formatMethod;
@@ -11352,6 +11424,12 @@ self.R = R;
                 const axisFormatter = getAxisFormatter(chartSpec);
                 const percentFormatter = createFormatter(DEFAULT_PERCENT_DIFFERENCE_FORMAT);
                 const isHorizontalChart = 'horizontal' === chartSpec.direction;
+                const paddingPatch = {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    left: 0
+                };
                 const markLine = annotationDifferenceLineList.flatMap((annotationDifferenceLine, index)=>{
                     try {
                         assertDifferenceLineConfig(annotationDifferenceLine, getDifferenceLinePath(index, annotationDifferenceLineList.length));
@@ -11375,11 +11453,23 @@ self.R = R;
                         if (start.mode !== end.mode) return [];
                         const usesRuntimeStackEnd = useElementStackEnd || ('column' === vseed.chartType || 'bar' === vseed.chartType) && 'element' === start.mode && 'auto' === stackResolveMode;
                         const useBracketStyle = isBracketChart || ('column' === vseed.chartType || 'bar' === vseed.chartType) && 'element' === start.mode && 'auto' === stackResolveMode;
-                        const connectDirection = isHorizontalChart ? 'top' : 'right';
-                        const expandDistance = buildFixedGutterExpandDistance(isHorizontalChart);
+                        const connectDirection = shouldInferDifferenceConnectDirection(vseed.chartType) ? inferDifferenceConnectDirection(vseed, [
+                            start.value,
+                            end.value
+                        ]) : isHorizontalChart ? 'top' : 'right';
+                        const expandDistance = buildFixedGutterExpandDistance(connectDirection);
+                        const currentPaddingPatch = getDifferenceLinePaddingPatch(connectDirection);
+                        paddingPatch.top = Math.max(paddingPatch.top, currentPaddingPatch.top ?? 0);
+                        paddingPatch.right = Math.max(paddingPatch.right, currentPaddingPatch.right ?? 0);
+                        paddingPatch.bottom = Math.max(paddingPatch.bottom, currentPaddingPatch.bottom ?? 0);
+                        paddingPatch.left = Math.max(paddingPatch.left, currentPaddingPatch.left ?? 0);
                         const lineColor = annotationDifferenceLine.lineColor ?? theme?.lineColor ?? DEFAULT_LINE_COLOR;
+                        const lineStyle = annotationDifferenceLine.lineStyle;
+                        const themeLineStyle = theme?.lineStyle;
+                        const configuredLineDash = lineStyle ? getAnnotationLineDash(lineStyle) : theme?.lineDash ?? (themeLineStyle ? getAnnotationLineDash(themeLineStyle) : void 0);
                         const textColor = annotationDifferenceLine.textColor ?? theme?.textColor ?? DEFAULT_TEXT_COLOR;
                         const textBackgroundColor = annotationDifferenceLine.textBackgroundColor ?? theme?.textBackgroundColor ?? DEFAULT_TEXT_BACKGROUND_COLOR;
+                        const textBackgroundOpacity = theme?.textBackgroundOpacity;
                         const textFontSize = annotationDifferenceLine.textFontSize ?? theme?.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
                         const differenceType = annotationDifferenceLine.differenceType ?? 'absolute';
                         const startMeasureId = resolveDifferenceMeasureId(start, annotationDifferenceLine.start.selector, measureIds);
@@ -11414,6 +11504,7 @@ self.R = R;
                                 visible: true,
                                 padding: DEFAULT_LABEL_PADDING,
                                 style: {
+                                    opacity: textBackgroundOpacity ?? 0.95,
                                     fill: textBackgroundColor,
                                     fillOpacity: 1,
                                     stroke: lineColor,
@@ -11434,6 +11525,7 @@ self.R = R;
                                 visible: true,
                                 padding: DEFAULT_LABEL_PADDING,
                                 style: {
+                                    opacity: textBackgroundOpacity ?? 0.95,
                                     fill: textBackgroundColor,
                                     fillOpacity: 1,
                                     stroke: lineColor,
@@ -11477,18 +11569,21 @@ self.R = R;
                                             visible: true,
                                             stroke: lineColor,
                                             lineWidth: DEFAULT_LINE_WIDTH,
-                                            lineDash: DEFAULT_BRACKET_LINE_DASH
+                                            lineDash: configuredLineDash ?? DEFAULT_BRACKET_LINE_DASH
                                         },
                                         {
                                             visible: true,
                                             stroke: lineColor,
-                                            lineWidth: DEFAULT_LINE_WIDTH
+                                            lineWidth: DEFAULT_LINE_WIDTH,
+                                            ...configuredLineDash ? {
+                                                lineDash: configuredLineDash
+                                            } : {}
                                         },
                                         {
                                             visible: true,
                                             stroke: lineColor,
                                             lineWidth: DEFAULT_LINE_WIDTH,
-                                            lineDash: DEFAULT_BRACKET_LINE_DASH
+                                            lineDash: configuredLineDash ?? DEFAULT_BRACKET_LINE_DASH
                                         }
                                     ]
                                 } : {
@@ -11496,7 +11591,7 @@ self.R = R;
                                         visible: true,
                                         stroke: lineColor,
                                         lineWidth: DEFAULT_LINE_WIDTH,
-                                        lineDash: [
+                                        lineDash: configuredLineDash ?? [
                                             0
                                         ],
                                         cornerRadius: DEFAULT_CORNER_RADIUS
@@ -11529,11 +11624,7 @@ self.R = R;
                     ]
                 };
                 if (0 === markLine.length) return nextSpec;
-                return mergeDifferenceLineRegionPadding(nextSpec, isHorizontalChart ? {
-                    top: DEFAULT_GUTTER_TOP_PADDING
-                } : {
-                    right: DEFAULT_GUTTER_RIGHT_PADDING
-                });
+                return mergeDifferenceLineRegionPadding(nextSpec, paddingPatch);
             };
             const annotationVerticalLine_annotationVerticalLine = (spec, context)=>{
                 const { advancedVSeed, vseed } = context;
@@ -11553,7 +11644,10 @@ self.R = R;
                     insideEnd: 'insideEndTop'
                 };
                 const markLine = annotationVerticalLineList.flatMap((annotationVerticalLine)=>{
-                    const { xValue, dynamicFilter, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'center', textBaseline = 'top', lineColor = theme?.lineColor ?? '#212121', lineStyle = theme?.lineStyle ?? 'dashed', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationVerticalLine;
+                    const { xValue, dynamicFilter, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'center', textBaseline = 'top', lineColor = theme?.lineColor ?? '#212121', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationVerticalLine;
+                    const lineStyle = annotationVerticalLine.lineStyle ?? theme?.lineStyle ?? 'dashed';
+                    const lineDash = getAnnotationLineDash(lineStyle, annotationVerticalLine.lineStyle ? void 0 : theme?.lineDash);
+                    const textBackgroundOpacity = theme?.textBackgroundOpacity;
                     const generateOneMarkLine = (x)=>({
                             x,
                             autoRange: true,
@@ -11564,15 +11658,7 @@ self.R = R;
                                     stroke: lineColor,
                                     lineStyle: lineStyle,
                                     lineWidth: lineWidth,
-                                    lineDash: 'dashed' === lineStyle ? [
-                                        5,
-                                        2
-                                    ] : 'dotted' === lineStyle ? [
-                                        2,
-                                        5
-                                    ] : [
-                                        0
-                                    ]
+                                    lineDash
                                 }
                             },
                             label: {
@@ -11580,7 +11666,6 @@ self.R = R;
                                 text: text,
                                 position: positionMap[textPosition || 'insideEnd'],
                                 style: {
-                                    opacity: 0.95,
                                     dx: 5,
                                     visible: true,
                                     stroke: textBackgroundColor,
@@ -11595,13 +11680,13 @@ self.R = R;
                                     visible: textBackgroundVisible,
                                     padding: textBackgroundPadding,
                                     style: {
-                                        opacity: 0.95,
+                                        opacity: textBackgroundOpacity ?? 0.95,
                                         dx: 5,
                                         cornerRadius: textBackgroundBorderRadius,
                                         fill: textBackgroundColor,
-                                        fillOpacity: 1,
                                         stroke: textBackgroundBorderColor,
-                                        lineWidth: textBackgroundBorderWidth
+                                        lineWidth: textBackgroundBorderWidth,
+                                        fillOpacity: 1
                                     }
                                 }
                             },
@@ -11665,7 +11750,10 @@ self.R = R;
                     insideEnd: 'insideEndTop'
                 };
                 const markLine = annotationHorizontalLineList.flatMap((annotationHorizontalLine)=>{
-                    const { yValue, dynamicFilter, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'right', textBaseline = 'bottom', lineColor = theme?.lineColor ?? '#212121', lineStyle = theme?.lineStyle ?? 'dashed', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationHorizontalLine;
+                    const { yValue, dynamicFilter, text = '', textPosition = 'insideEnd', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textAlign = 'right', textBaseline = 'bottom', lineColor = theme?.lineColor ?? '#212121', lineVisible = theme?.lineStyle ?? true, lineWidth = theme?.lineWidth ?? 1, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#212121', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#212121', textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundPadding = theme?.textBackgroundPadding ?? 2 } = annotationHorizontalLine;
+                    const lineStyle = annotationHorizontalLine.lineStyle ?? theme?.lineStyle ?? 'dashed';
+                    const lineDash = getAnnotationLineDash(lineStyle, annotationHorizontalLine.lineStyle ? void 0 : theme?.lineDash);
+                    const textBackgroundOpacity = theme?.textBackgroundOpacity;
                     const generateOneMarkLine = (y)=>({
                             y,
                             autoRange: true,
@@ -11675,15 +11763,7 @@ self.R = R;
                                     visible: lineVisible,
                                     stroke: lineColor,
                                     lineWidth: lineWidth,
-                                    lineDash: 'dashed' === lineStyle ? [
-                                        5,
-                                        2
-                                    ] : 'dotted' === lineStyle ? [
-                                        2,
-                                        5
-                                    ] : [
-                                        0
-                                    ]
+                                    lineDash
                                 }
                             },
                             label: {
@@ -11691,7 +11771,6 @@ self.R = R;
                                 text: text,
                                 position: positionMap[textPosition || 'insideEnd'],
                                 style: {
-                                    opacity: 0.95,
                                     visible: true,
                                     dy: 4,
                                     stroke: textBackgroundColor,
@@ -11706,7 +11785,7 @@ self.R = R;
                                     visible: textBackgroundVisible,
                                     padding: textBackgroundPadding,
                                     style: {
-                                        opacity: 0.95,
+                                        opacity: textBackgroundOpacity ?? 0.95,
                                         dy: 4,
                                         cornerRadius: textBackgroundBorderRadius,
                                         fill: textBackgroundColor,
@@ -11777,9 +11856,10 @@ self.R = R;
                     left: 'insideLeft',
                     right: 'insideRight'
                 };
-                const defaultTextPosition = chatType_isBarLikeChart(advancedVSeed) ? 'right' : 'top';
+                const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
                 const markArea = annotationAreaList.flatMap((annotationArea)=>{
                     const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
+                    const textBackgroundOpacity = theme?.textBackgroundOpacity;
                     const dataset = advancedVSeed.dataset.flat();
                     const selectedData = selectorPoint ? dataset.filter((datum)=>selector_selector(datum, selectorPoint)) : [];
                     const textPosition = annotationArea.textPosition ?? defaultTextPosition;
@@ -11850,7 +11930,6 @@ self.R = R;
                             visible: true,
                             text: text,
                             style: {
-                                opacity: 0.95,
                                 textAlign: textAlign,
                                 textBaseline: textBaseline,
                                 fill: textColor,
@@ -11863,7 +11942,7 @@ self.R = R;
                                 visible: textBackgroundVisible,
                                 padding: textBackgroundPadding,
                                 style: {
-                                    opacity: 0.95,
+                                    opacity: textBackgroundOpacity ?? 0.95,
                                     cornerRadius: textBackgroundBorderRadius ?? 4,
                                     fill: textBackgroundColor,
                                     stroke: textBackgroundBorderColor,
@@ -13466,20 +13545,45 @@ self.R = R;
                 if (hasNegativePart) return reverseStackCornerRadius(cornerRadius);
                 return 0;
             };
+            const createStackCornerRadius = (cornerRadius)=>(_, datum)=>{
+                    const stackRangeCornerRadius = getStackRangeCornerRadius(cornerRadius, datum);
+                    if (void 0 !== stackRangeCornerRadius) return stackRangeCornerRadius;
+                    const value = datum?.[datum?.[FoldMeasureId]];
+                    if (value > 0) return cornerRadius;
+                    if (value < 0) return reverseStackCornerRadius(cornerRadius);
+                    return 0;
+                };
+            const hasMoveInAnimation = (animation)=>{
+                if (!animation) return false;
+                if (Array.isArray(animation)) return animation.some(hasMoveInAnimation);
+                if ('object' != typeof animation) return false;
+                const animationRecord = animation;
+                return 'moveIn' === animationRecord.type || Object.values(animationRecord).some(hasMoveInAnimation);
+            };
+            const hasBarMoveInAnimation = (spec)=>[
+                    spec.animationAppear,
+                    spec.animationNormal,
+                    spec.animationEnter,
+                    spec.animationUpdate
+                ].some(hasMoveInAnimation);
             const stackCornerRadius_stackCornerRadius = (spec, context)=>{
                 const { advancedVSeed, vseed } = context;
                 const { chartType } = vseed;
                 const stackCornerRadius = advancedVSeed.config?.[chartType]?.stackCornerRadius;
                 if ('dualAxis' === chartType && 'bar' !== spec.type) return spec;
+                const stackCornerRadiusCallback = createStackCornerRadius(stackCornerRadius);
+                if (!hasBarMoveInAnimation(spec)) return {
+                    ...spec,
+                    stackCornerRadius: stackCornerRadiusCallback
+                };
                 return {
                     ...spec,
-                    stackCornerRadius: (_, datum)=>{
-                        const stackRangeCornerRadius = getStackRangeCornerRadius(stackCornerRadius, datum);
-                        if (void 0 !== stackRangeCornerRadius) return stackRangeCornerRadius;
-                        const value = datum?.[datum?.[FoldMeasureId]];
-                        if (value > 0) return stackCornerRadius;
-                        if (value < 0) return reverseStackCornerRadius(stackCornerRadius);
-                        return 0;
+                    bar: {
+                        ...spec.bar,
+                        style: {
+                            ...spec.bar?.style,
+                            cornerRadius: stackCornerRadiusCallback
+                        }
                     }
                 };
             };
@@ -13639,9 +13743,10 @@ self.R = R;
                     left: 'insideLeft',
                     right: 'insideRight'
                 };
-                const defaultTextPosition = chatType_isBarLikeChart(advancedVSeed) ? 'right' : 'top';
+                const defaultTextPosition = isBarLikeChart(advancedVSeed) ? 'right' : 'top';
                 const markArea = annotationAreaList.flatMap((annotationArea)=>{
                     const { selector: selectorPoint, text = '', textColor = theme?.textColor ?? '#ffffff', textFontSize = theme?.textFontSize ?? 12, textFontWeight = theme?.textFontWeight ?? 400, textBackgroundVisible = theme?.textBackgroundVisible ?? true, textBackgroundColor = theme?.textBackgroundColor ?? '#191d24', textBackgroundBorderColor = theme?.textBackgroundBorderColor ?? '#191d24', textBackgroundBorderWidth = theme?.textBackgroundBorderWidth ?? 1, textBackgroundBorderRadius = theme?.textBackgroundBorderRadius ?? 4, textBackgroundPadding = theme?.textBackgroundPadding ?? 4, areaColor = theme?.areaColor ?? '#888888', areaColorOpacity = theme?.areaColorOpacity ?? 0.15, areaBorderColor = theme?.areaBorderColor ?? '#888888', areaBorderRadius = theme?.areaBorderRadius ?? 4, areaBorderWidth = theme?.areaBorderWidth ?? 1, areaLineDash = theme?.areaLineDash, outerPadding = theme?.outerPadding ?? 4 } = annotationArea;
+                    const textBackgroundOpacity = theme?.textBackgroundOpacity;
                     const textPosition = annotationArea.textPosition ?? defaultTextPosition;
                     const textAlign = annotationArea.textAlign ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textAlign;
                     const textBaseline = annotationArea.textBaseline ?? ANNOTATION_AREA_TEXT_STYLE_BY_POSITION[textPosition].textBaseline;
@@ -13725,7 +13830,6 @@ self.R = R;
                             visible: true,
                             text: text,
                             style: {
-                                opacity: 0.95,
                                 textAlign: textAlign,
                                 textBaseline: textBaseline,
                                 stroke: textBackgroundColor,
@@ -13738,7 +13842,7 @@ self.R = R;
                                 visible: textBackgroundVisible,
                                 padding: textBackgroundPadding,
                                 style: {
-                                    opacity: 0.95,
+                                    opacity: textBackgroundOpacity ?? 0.95,
                                     cornerRadius: textBackgroundBorderRadius ?? 4,
                                     fill: textBackgroundColor,
                                     stroke: textBackgroundBorderColor,
@@ -29940,7 +30044,12 @@ self.R = R;
                 textFontSize: schemas_number().nullish(),
                 textColor: schemas_string().nullish(),
                 textBackgroundColor: schemas_string().nullish(),
-                lineColor: schemas_string().nullish()
+                lineColor: schemas_string().nullish(),
+                lineStyle: schemas_enum([
+                    'solid',
+                    'dashed',
+                    'dotted'
+                ]).nullish()
             });
             const zAnnotationHorizontalLine = schemas_object({
                 yValue: union([
@@ -30036,7 +30145,9 @@ self.R = R;
                 selector: true,
                 measureId: true,
                 text: true
-            }).partial();
+            }).partial().extend({
+                textBackgroundOpacity: schemas_number().nullish()
+            });
             const zAnnotationHorizontalLineConfig = zAnnotationHorizontalLine.pick({
                 lineColor: true,
                 lineWidth: true,
@@ -30052,6 +30163,8 @@ self.R = R;
                 textBackgroundBorderRadius: true,
                 textBackgroundPadding: true
             }).extend({
+                lineDash: schemas_array(schemas_number()).nullish(),
+                textBackgroundOpacity: schemas_number().nullish(),
                 endSymbolVisible: schemas_boolean().nullish(),
                 endSymbolType: schemas_string().nullish(),
                 endSymbolSize: schemas_number().nullish(),
@@ -30077,12 +30190,18 @@ self.R = R;
                 areaBorderRadius: true,
                 areaLineDash: true,
                 outerPadding: true
+            }).extend({
+                textBackgroundOpacity: schemas_number().nullish()
             }).partial();
             const zAnnotationDifferenceLineConfig = zAnnotationDifferenceLine.pick({
                 lineColor: true,
+                lineStyle: true,
                 textColor: true,
                 textFontSize: true,
                 textBackgroundColor: true
+            }).extend({
+                lineDash: schemas_array(schemas_number()).nullish(),
+                textBackgroundOpacity: schemas_number().nullish()
             }).partial();
             const zAnnotationConfig = schemas_object({
                 annotationPoint: zAnnotationPointConfig.nullish(),
@@ -31810,23 +31929,52 @@ self.R = R;
                         titleColor: tokens.textPrimary
                     }
                 });
-            const getAnnotationPatch = (tokens)=>({
+            const getAnnotationLinePatch = (tokens)=>({
+                    lineColor: tokens.annotationLineColor,
+                    lineStyle: tokens.annotationLineStyle,
+                    lineDash: tokens.annotationLineDash,
+                    textColor: tokens.annotationTextColor,
+                    textBackgroundColor: tokens.annotationTextBackgroundColor,
+                    textBackgroundBorderColor: tokens.annotationTextBackgroundColor,
+                    textBackgroundOpacity: tokens.annotationTextBackgroundOpacity
+                });
+            const getAnnotationTextPatch = (tokens)=>({
+                    textColor: tokens.annotationTextColor,
+                    textBackgroundColor: tokens.annotationTextBackgroundColor,
+                    textBackgroundBorderColor: tokens.annotationTextBackgroundColor,
+                    textBackgroundOpacity: tokens.annotationTextBackgroundOpacity
+                });
+            const getAnnotationPatch = (tokens)=>{
+                const annotationLinePatch = getAnnotationLinePatch(tokens);
+                const annotationTextPatch = getAnnotationTextPatch(tokens);
+                return {
                     annotationPoint: {
-                        textFontSize: tokens.labelFontSize
+                        textFontSize: tokens.labelFontSize,
+                        ...annotationTextPatch
                     },
                     annotationHorizontalLine: {
-                        textFontSize: tokens.labelFontSize
+                        textFontSize: tokens.labelFontSize,
+                        ...annotationLinePatch
                     },
                     annotationVerticalLine: {
-                        textFontSize: tokens.labelFontSize
+                        textFontSize: tokens.labelFontSize,
+                        ...annotationLinePatch
                     },
                     annotationDifferenceLine: {
-                        textFontSize: tokens.labelFontSize
+                        textFontSize: tokens.labelFontSize,
+                        lineColor: tokens.annotationLineColor,
+                        lineStyle: tokens.annotationLineStyle,
+                        lineDash: tokens.annotationLineDash,
+                        textColor: tokens.annotationTextColor,
+                        textBackgroundColor: tokens.annotationTextBackgroundColor,
+                        textBackgroundOpacity: tokens.annotationTextBackgroundOpacity
                     },
                     annotationArea: {
-                        textFontSize: tokens.labelFontSize
+                        textFontSize: tokens.labelFontSize,
+                        ...annotationTextPatch
                     }
-                });
+                };
+            };
             const getRegressionLinePatch = (tokens)=>({
                     kdeRegressionLine: {
                         textFontSize: tokens.labelFontSize