@visactor/vchart-extension 2.1.0-alpha.15 → 2.1.0-alpha.16

package/build/index.js

@@ -5901,12 +5901,12 @@
             case 'dome':
                 centers = arcCenters(count, inner, block, layout, 160, 20);
                 break;
-            case 'left-wing':
-                centers = arcCenters(count, inner, block, layout, 250, 110);
-                break;
-            case 'right-wing':
-                centers = arcCenters(count, inner, block, layout, -70, 70);
+            case 'wing': {
+                const direction = layout.direction === 'right' ? 'right' : 'left';
+                const [s, e] = direction === 'right' ? [110, 250] : [-70, 70];
+                centers = arcCenters(count, inner, block, layout, s, e);
                 break;
+            }
             case 'landscape':
             default:
                 centers = lineCenters(count, inner.x + block.width / 2, center.y, inner.x + inner.width - block.width / 2, center.y);
@@ -6068,6 +6068,7 @@
     const isClock = (spec) => normalizeLayout(spec.layout).type === 'clock';
     const isDome = (spec) => normalizeLayout(spec.layout).type === 'dome';
     const isBowl = (spec) => normalizeLayout(spec.layout).type === 'bowl';
+    const isWing = (spec) => normalizeLayout(spec.layout).type === 'wing';
     const getThemeColor = (spec) => { var _a; return (_a = spec.themeColor) !== null && _a !== void 0 ? _a : DEFAULT_THEME_COLOR; };
     const withAlpha = (color, alpha) => {
         const safeAlpha = Math.max(0, Math.min(1, alpha));
@@ -6344,7 +6345,24 @@
                             }, y: (_d, ctx) => {
                                 const g = getClockGeometry(spec, ctx);
                                 return g.cy - g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO;
-                            }, width: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, height: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style)
+                            }, width: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, height: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: (_d, ctx) => getClockGeometry(spec, ctx).R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                                const g = getClockGeometry(spec, ctx);
+                                return [g.cx, g.cy];
+                            }, dx: (_d, ctx) => {
+                                var _a, _b;
+                                const g = getClockGeometry(spec, ctx);
+                                const rectW = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const w = typeof userWidth === 'number' ? userWidth : rectW;
+                                return (rectW - w) / 2;
+                            }, dy: (_d, ctx) => {
+                                var _a, _b;
+                                const g = getClockGeometry(spec, ctx);
+                                const rectH = g.R * CLOCK_CENTER_RADIUS_RATIO * CLOCK_CENTER_IMAGE_INSET_RATIO * 2;
+                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
+                                const h = typeof userHeight === 'number' ? userHeight : rectH;
+                                return (rectH - h) / 2;
+                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style)
                     }
                     : {
                         type: 'symbol',
@@ -7092,8 +7110,7 @@
     const DOME_TEXT_BOX_HEIGHT = 300;
     const DOME_TITLE_TO_CONTENT_GAP = 4;
     const DOME_TEXT_LEFT_PADDING = 20;
-    const DOME_CENTER_IMAGE_WIDTH_RATIO = 0.32;
-    const DOME_CENTER_IMAGE_HEIGHT_RATIO = 0.32;
+    const DOME_CENTER_IMAGE_SIZE_RATIO = 0.4;
     const DOME_ARC_TOP_GAP_FROM_CENTER_IMAGE = 300;
     const getDomeCenterImageRect = (spec, ctx) => {
         var _a, _b, _c, _e, _f;
@@ -7101,8 +7118,9 @@
         const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
         const innerWidth = Math.max(width - padding.left - padding.right, 1);
         const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : innerWidth * DOME_CENTER_IMAGE_WIDTH_RATIO, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : innerHeight * DOME_CENTER_IMAGE_HEIGHT_RATIO, 60);
+        const baseSize = Math.min(innerWidth, innerHeight) * DOME_CENTER_IMAGE_SIZE_RATIO;
+        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : baseSize, 80);
+        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : baseSize, 80);
         const cx = startX + padding.left + innerWidth / 2;
         const top = startY + padding.top + innerHeight - h;
         return { x: cx - w / 2, y: top, width: w, height: h };
@@ -7259,7 +7277,22 @@
                     }
                 },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-dome-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getDomeCenterImageRect(spec, ctx).x, y: (_d, ctx) => getDomeCenterImageRect(spec, ctx).y, width: (_d, ctx) => getDomeCenterImageRect(spec, ctx).width, height: (_d, ctx) => getDomeCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-dome-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getDomeCenterImageRect(spec, ctx).x, y: (_d, ctx) => getDomeCenterImageRect(spec, ctx).y, width: (_d, ctx) => getDomeCenterImageRect(spec, ctx).width, height: (_d, ctx) => getDomeCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', anchor: (_d, ctx) => {
+                                const r = getDomeCenterImageRect(spec, ctx);
+                                return [r.x + r.width / 2, r.y + r.height / 2];
+                            }, dx: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getDomeCenterImageRect(spec, ctx);
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const w = typeof userWidth === 'number' ? userWidth : r.width;
+                                return (r.width - w) / 2;
+                            }, dy: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getDomeCenterImageRect(spec, ctx);
+                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
+                                const h = typeof userHeight === 'number' ? userHeight : r.height;
+                                return (r.height - h) / 2;
+                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7367,8 +7400,7 @@
     const BOWL_TEXT_BOX_HEIGHT = 300;
     const BOWL_TITLE_TO_CONTENT_GAP = 4;
     const BOWL_TEXT_LEFT_PADDING = 20;
-    const BOWL_CENTER_IMAGE_WIDTH_RATIO = 0.32;
-    const BOWL_CENTER_IMAGE_HEIGHT_RATIO = 0.32;
+    const BOWL_CENTER_IMAGE_SIZE_RATIO = 0.4;
     const BOWL_ARC_BOTTOM_GAP_FROM_CENTER_IMAGE = 300;
     const getBowlCenterImageRect = (spec, ctx) => {
         var _a, _b, _c, _e, _f;
@@ -7376,8 +7408,9 @@
         const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
         const innerWidth = Math.max(width - padding.left - padding.right, 1);
         const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
-        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : innerWidth * BOWL_CENTER_IMAGE_WIDTH_RATIO, 80);
-        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : innerHeight * BOWL_CENTER_IMAGE_HEIGHT_RATIO, 60);
+        const baseSize = Math.min(innerWidth, innerHeight) * BOWL_CENTER_IMAGE_SIZE_RATIO;
+        const w = Math.max((_c = (_b = spec.centerImage) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : baseSize, 80);
+        const h = Math.max((_f = (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : baseSize, 80);
         const cx = startX + padding.left + innerWidth / 2;
         const top = startY + padding.top;
         return { x: cx - w / 2, y: top, width: w, height: h };
@@ -7518,23 +7551,23 @@
                         lineWidth: 2
                     }
                 },
-                {
-                    type: 'rect',
-                    name: 'storyline-bowl-center-rect',
-                    interactive: false,
-                    style: {
-                        x: (_d, ctx) => getBowlCenterImageRect(spec, ctx).x,
-                        y: (_d, ctx) => getBowlCenterImageRect(spec, ctx).y,
-                        width: (_d, ctx) => getBowlCenterImageRect(spec, ctx).width,
-                        height: (_d, ctx) => getBowlCenterImageRect(spec, ctx).height,
-                        cornerRadius: 12,
-                        fill: '#ffffff',
-                        stroke: themeColor,
-                        lineWidth: 2
-                    }
-                },
                 hasImage
-                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-bowl-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getBowlCenterImageRect(spec, ctx).x, y: (_d, ctx) => getBowlCenterImageRect(spec, ctx).y, width: (_d, ctx) => getBowlCenterImageRect(spec, ctx).width, height: (_d, ctx) => getBowlCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center' }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
+                    ? Object.assign(Object.assign({ type: 'image', name: 'storyline-bowl-center-image', interactive: false }, spec.centerImage), { style: Object.assign({ x: (_d, ctx) => getBowlCenterImageRect(spec, ctx).x, y: (_d, ctx) => getBowlCenterImageRect(spec, ctx).y, width: (_d, ctx) => getBowlCenterImageRect(spec, ctx).width, height: (_d, ctx) => getBowlCenterImageRect(spec, ctx).height, image: (_c = spec.centerImage) === null || _c === void 0 ? void 0 : _c.image, cornerRadius: 12, repeatX: 'no-repeat', repeatY: 'no-repeat', imagePosition: 'center', anchor: (_d, ctx) => {
+                                const r = getBowlCenterImageRect(spec, ctx);
+                                return [r.x + r.width / 2, r.y + r.height / 2];
+                            }, dx: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getBowlCenterImageRect(spec, ctx);
+                                const userWidth = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.width;
+                                const w = typeof userWidth === 'number' ? userWidth : r.width;
+                                return (r.width - w) / 2;
+                            }, dy: (_d, ctx) => {
+                                var _a, _b;
+                                const r = getBowlCenterImageRect(spec, ctx);
+                                const userHeight = (_b = (_a = spec.centerImage) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.height;
+                                const h = typeof userHeight === 'number' ? userHeight : r.height;
+                                return (r.height - h) / 2;
+                            } }, (_e = spec.centerImage) === null || _e === void 0 ? void 0 : _e.style) })
                     : null
             ].filter(Boolean)
         };
@@ -7634,6 +7667,219 @@
         };
     };
 
+    const WING_BLOCK_IMAGE_SIZE = 96;
+    const WING_TEXT_GAP_FROM_IMAGE = 14;
+    const WING_TITLE_LINE_HEIGHT = 26;
+    const WING_TITLE_FONT_SIZE = 20;
+    const WING_CONTENT_LINE_HEIGHT = 17;
+    const WING_CONTENT_FONT_SIZE = 12;
+    const WING_TEXT_BOX_WIDTH = 240;
+    const WING_TEXT_BOX_HEIGHT = 110;
+    const WING_TITLE_TO_CONTENT_GAP = 4;
+    const getWingDirection = (spec) => {
+        var _a;
+        return (_a = normalizeLayout(spec.layout).direction) !== null && _a !== void 0 ? _a : 'left';
+    };
+    const getWingArcGeometry = (spec, ctx) => {
+        var _a, _b, _c, _e;
+        const { width, height, startX, startY } = getRegionGeometry(ctx);
+        const padding = normalizePadding((_a = spec.block) === null || _a === void 0 ? void 0 : _a.padding);
+        const innerWidth = Math.max(width - padding.left - padding.right, 1);
+        const innerHeight = Math.max(height - padding.top - padding.bottom, 1);
+        const layoutOpt = normalizeLayout(spec.layout);
+        const direction = getWingDirection(spec);
+        const defaultStart = direction === 'right' ? 110 : -70;
+        const defaultEnd = direction === 'right' ? 250 : 70;
+        const startAngle = (_b = layoutOpt.startAngle) !== null && _b !== void 0 ? _b : defaultStart;
+        const endAngle = (_c = layoutOpt.endAngle) !== null && _c !== void 0 ? _c : defaultEnd;
+        const ratio = (_e = layoutOpt.radiusRatio) !== null && _e !== void 0 ? _e : 0.92;
+        const ry = (innerHeight / 2) * ratio;
+        const rx = innerWidth * 0.6 * ratio;
+        const cx = direction === 'right' ? startX + padding.left + innerWidth - rx * 0.1 : startX + padding.left + rx * 0.1;
+        const cy = startY + padding.top + innerHeight / 2;
+        return { cx, cy, rx, ry, startAngle, endAngle };
+    };
+    const getWingBlockCenter = (spec, ctx, index) => {
+        var _a, _b;
+        const arc = getWingArcGeometry(spec, ctx);
+        const count = (_b = (_a = spec.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        if (count <= 0) {
+            return { x: arc.cx, y: arc.cy };
+        }
+        const t = count === 1 ? 0.5 : index / (count - 1);
+        const angle = ((arc.startAngle + (arc.endAngle - arc.startAngle) * t) / 180) * Math.PI;
+        return {
+            x: arc.cx + Math.cos(angle) * arc.rx,
+            y: arc.cy + Math.sin(angle) * arc.ry
+        };
+    };
+    const isTextOnLeft = (spec, index) => {
+        const direction = getWingDirection(spec);
+        return direction === 'right' ? index % 2 === 1 : index % 2 === 0;
+    };
+    const buildWingArcMark = (spec) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j;
+        if (((_a = spec.line) === null || _a === void 0 ? void 0 : _a.visible) === false) {
+            return null;
+        }
+        const themeColor = getThemeColor(spec);
+        const lineStyle = ((_c = (_b = spec.line) === null || _b === void 0 ? void 0 : _b.style) !== null && _c !== void 0 ? _c : {});
+        const startWidth = Math.max(Number((_e = lineStyle.startWidth) !== null && _e !== void 0 ? _e : 2), 0.5);
+        const endWidth = Math.max(Number((_g = (_f = lineStyle.endWidth) !== null && _f !== void 0 ? _f : lineStyle.lineWidth) !== null && _g !== void 0 ? _g : 18), startWidth);
+        return {
+            type: 'group',
+            name: 'storyline-wing-arc',
+            zIndex: vchart.LayoutZIndex.Mark,
+            children: [
+                {
+                    type: 'path',
+                    name: 'storyline-wing-arc-path',
+                    interactive: false,
+                    style: {
+                        stroke: false,
+                        lineWidth: 0,
+                        fill: (_j = (_h = lineStyle.fill) !== null && _h !== void 0 ? _h : lineStyle.stroke) !== null && _j !== void 0 ? _j : themeColor,
+                        opacity: 0.95,
+                        path: (_d, ctx) => {
+                            const arc = getWingArcGeometry(spec, ctx);
+                            const span = arc.endAngle - arc.startAngle;
+                            const samples = 96;
+                            const pts = [];
+                            for (let i = 0; i <= samples; i++) {
+                                const t = i / samples;
+                                const angle = ((arc.startAngle + span * t) / 180) * Math.PI;
+                                const cx = arc.cx + Math.cos(angle) * arc.rx;
+                                const cy = arc.cy + Math.sin(angle) * arc.ry;
+                                const nxRaw = Math.cos(angle) / arc.rx;
+                                const nyRaw = Math.sin(angle) / arc.ry;
+                                const nLen = Math.hypot(nxRaw, nyRaw) || 1;
+                                pts.push({
+                                    x: cx,
+                                    y: cy,
+                                    nx: nxRaw / nLen,
+                                    ny: nyRaw / nLen,
+                                    w: startWidth + (endWidth - startWidth) * t
+                                });
+                            }
+                            const segments = [];
+                            for (let i = 0; i < pts.length; i++) {
+                                const p = pts[i];
+                                const x = p.x + p.nx * (p.w / 2);
+                                const y = p.y + p.ny * (p.w / 2);
+                                segments.push(`${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`);
+                            }
+                            for (let i = pts.length - 1; i >= 0; i--) {
+                                const p = pts[i];
+                                const x = p.x - p.nx * (p.w / 2);
+                                const y = p.y - p.ny * (p.w / 2);
+                                segments.push(`L ${x.toFixed(2)} ${y.toFixed(2)}`);
+                            }
+                            segments.push('Z');
+                            return segments.join(' ');
+                        }
+                    }
+                }
+            ]
+        };
+    };
+    const getWingBlockMetrics = (spec, index) => {
+        var _a, _b, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const titleFontSize = Number((_c = (_b = (_a = spec.title) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.fontSize) !== null && _c !== void 0 ? _c : WING_TITLE_FONT_SIZE);
+        const titleLineHeight = Number((_g = (_f = (_e = spec.title) === null || _e === void 0 ? void 0 : _e.style) === null || _f === void 0 ? void 0 : _f.lineHeight) !== null && _g !== void 0 ? _g : Math.max(WING_TITLE_LINE_HEIGHT, Math.round(titleFontSize * 1.3)));
+        const contentFontSize = Number((_k = (_j = (_h = spec.content) === null || _h === void 0 ? void 0 : _h.style) === null || _j === void 0 ? void 0 : _j.fontSize) !== null && _k !== void 0 ? _k : WING_CONTENT_FONT_SIZE);
+        const contentLineHeight = Number((_o = (_m = (_l = spec.content) === null || _l === void 0 ? void 0 : _l.style) === null || _m === void 0 ? void 0 : _m.lineHeight) !== null && _o !== void 0 ? _o : WING_CONTENT_LINE_HEIGHT);
+        const titleToContentGap = WING_TITLE_TO_CONTENT_GAP;
+        const textHeight = WING_TEXT_BOX_HEIGHT;
+        const contentHeight = Math.max(textHeight - titleLineHeight - titleToContentGap, contentLineHeight);
+        const imageWidth = (_q = (_p = spec.image) === null || _p === void 0 ? void 0 : _p.width) !== null && _q !== void 0 ? _q : WING_BLOCK_IMAGE_SIZE;
+        const imageHeight = (_s = (_r = spec.image) === null || _r === void 0 ? void 0 : _r.height) !== null && _s !== void 0 ? _s : WING_BLOCK_IMAGE_SIZE;
+        const imageBox = {
+            x: -imageWidth / 2,
+            y: -imageHeight / 2,
+            width: imageWidth,
+            height: imageHeight
+        };
+        const onLeft = isTextOnLeft(spec, index);
+        const textWidth = WING_TEXT_BOX_WIDTH;
+        const textX = onLeft
+            ? -imageWidth / 2 - WING_TEXT_GAP_FROM_IMAGE - textWidth
+            : imageWidth / 2 + WING_TEXT_GAP_FROM_IMAGE;
+        const textY = -textHeight / 2;
+        const textBox = { x: textX, y: textY, width: textWidth, height: textHeight };
+        const contentBox = {
+            x: textX,
+            y: textY + titleLineHeight + titleToContentGap,
+            width: textWidth,
+            height: contentHeight
+        };
+        return {
+            onLeft,
+            titleFontSize,
+            titleLineHeight,
+            contentFontSize,
+            contentLineHeight,
+            imageBox,
+            textBox,
+            contentBox
+        };
+    };
+    const buildWingBlockMark = (spec, block, index) => {
+        var _a, _b, _c, _e;
+        const hasImage = !!block.image;
+        const contentText = Array.isArray(block.content) ? block.content : block.content ? [block.content] : [];
+        const themeColor = getThemeColor(spec);
+        const metrics = getWingBlockMetrics(spec, index);
+        return {
+            type: 'group',
+            id: `storyline-block-${(_a = block.id) !== null && _a !== void 0 ? _a : index}`,
+            name: `storyline-block-${index}`,
+            zIndex: vchart.LayoutZIndex.Mark + 1,
+            style: {
+                x: (_d, ctx) => getWingBlockCenter(spec, ctx, index).x,
+                y: (_d, ctx) => getWingBlockCenter(spec, ctx, index).y
+            },
+            children: [
+                {
+                    type: 'symbol',
+                    name: `storyline-block-image-halo-${index}`,
+                    interactive: false,
+                    style: {
+                        x: 0,
+                        y: 0,
+                        size: Math.max(metrics.imageBox.width, metrics.imageBox.height) + 12,
+                        symbolType: 'circle',
+                        fill: withAlpha(themeColor, 0.18),
+                        stroke: themeColor,
+                        lineWidth: 1.5
+                    }
+                },
+                hasImage
+                    ? Object.assign(Object.assign({ type: 'image', name: `storyline-block-image-${index}`, interactive: false }, omitImageLayoutSpec(spec.image)), { style: Object.assign({ x: metrics.imageBox.x, y: metrics.imageBox.y, width: metrics.imageBox.width, height: metrics.imageBox.height, image: block.image, cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2, repeatX: 'no-repeat', repeatY: 'no-repeat', imageMode: 'cover', imagePosition: 'center', stroke: '#ffffff', lineWidth: 3 }, (_b = spec.image) === null || _b === void 0 ? void 0 : _b.style) })
+                    : {
+                        type: 'rect',
+                        name: `storyline-block-image-bg-${index}`,
+                        interactive: false,
+                        style: {
+                            x: metrics.imageBox.x,
+                            y: metrics.imageBox.y,
+                            width: metrics.imageBox.width,
+                            height: metrics.imageBox.height,
+                            cornerRadius: Math.min(metrics.imageBox.width, metrics.imageBox.height) / 2,
+                            fill: '#ffffff',
+                            stroke: themeColor,
+                            lineWidth: 2
+                        }
+                    },
+                block.title
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-title-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.title), { style: Object.assign({ x: metrics.onLeft ? metrics.textBox.x + metrics.textBox.width : metrics.textBox.x, y: metrics.textBox.y, text: block.title, maxLineWidth: metrics.textBox.width, fontSize: metrics.titleFontSize, lineHeight: metrics.titleLineHeight, fontWeight: 'bold', fill: themeColor, textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top' }, (_c = spec.title) === null || _c === void 0 ? void 0 : _c.style) })
+                    : null,
+                contentText.length
+                    ? Object.assign(Object.assign({ type: 'text', name: `storyline-block-content-${index}`, interactive: false, zIndex: vchart.LayoutZIndex.Mark + 10 }, spec.content), { textType: 'rich', style: Object.assign({ x: metrics.onLeft ? metrics.contentBox.x + metrics.contentBox.width : metrics.contentBox.x, y: metrics.contentBox.y, width: metrics.contentBox.width, height: metrics.contentBox.height, maxLineWidth: metrics.contentBox.width, heightLimit: metrics.contentBox.height, text: buildRichContent(contentText, spec), fontSize: WING_CONTENT_FONT_SIZE, lineHeight: WING_CONTENT_LINE_HEIGHT, textAlign: metrics.onLeft ? 'right' : 'left', textBaseline: 'top', wordBreak: 'break-word', ellipsis: '...', fill: '#1f2430' }, (_e = spec.content) === null || _e === void 0 ? void 0 : _e.style) })
+                    : null
+            ].filter(Boolean)
+        };
+    };
+
     class StorylineChartSpecTransformer extends vchart.CommonChartSpecTransformer {
         transformSpec(spec) {
             var _a;
@@ -7651,28 +7897,31 @@
     }
     const applyDefaultPadding = (spec) => {
         var _a, _b, _c, _d;
-        const DEFAULT_BOTTOM = 100;
-        const DEFAULT_OTHER = 20;
+        const LARGE = 100;
+        const SMALL = 20;
+        const bowl = isBowl(spec);
+        const defaultTop = bowl ? LARGE : SMALL;
+        const defaultBottom = bowl ? SMALL : LARGE;
         const p = spec.padding;
         if (p === undefined || p === null) {
-            spec.padding = [DEFAULT_OTHER, DEFAULT_OTHER, DEFAULT_BOTTOM, DEFAULT_OTHER];
+            spec.padding = [defaultTop, SMALL, defaultBottom, SMALL];
             return;
         }
         if (typeof p === 'number') {
-            spec.padding = [p, p, Math.max(p, DEFAULT_BOTTOM), p];
+            spec.padding = bowl ? [Math.max(p, LARGE), p, p, p] : [p, p, Math.max(p, LARGE), p];
             return;
         }
         if (Array.isArray(p)) {
-            const [t = DEFAULT_OTHER, r = DEFAULT_OTHER, b, l = DEFAULT_OTHER] = p;
-            spec.padding = [t, r, b !== null && b !== void 0 ? b : DEFAULT_BOTTOM, l];
+            const [t, r = SMALL, b, l = SMALL] = p;
+            spec.padding = [t !== null && t !== void 0 ? t : defaultTop, r, b !== null && b !== void 0 ? b : defaultBottom, l];
             return;
         }
         if (typeof p === 'object') {
             spec.padding = {
-                top: (_a = p.top) !== null && _a !== void 0 ? _a : DEFAULT_OTHER,
-                right: (_b = p.right) !== null && _b !== void 0 ? _b : DEFAULT_OTHER,
-                bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : DEFAULT_BOTTOM,
-                left: (_d = p.left) !== null && _d !== void 0 ? _d : DEFAULT_OTHER
+                top: (_a = p.top) !== null && _a !== void 0 ? _a : defaultTop,
+                right: (_b = p.right) !== null && _b !== void 0 ? _b : SMALL,
+                bottom: (_c = p.bottom) !== null && _c !== void 0 ? _c : defaultBottom,
+                left: (_d = p.left) !== null && _d !== void 0 ? _d : SMALL
             };
         }
     };
@@ -7701,6 +7950,10 @@
             const centerImageMark = buildClockCenterImageMark(spec);
             return [ringsMark, ...blockMarks, centerImageMark].filter(Boolean);
         }
+        if (isWing(spec)) {
+            const arcMark = buildWingArcMark(spec);
+            return [arcMark, ...blockMarks].filter(Boolean);
+        }
         return [lineMark, ...blockMarks].filter(Boolean);
     };
     const buildLineMark = (spec) => {
@@ -7732,6 +7985,9 @@
         if (isClock(spec)) {
             return buildClockBlockMark(spec, block, index);
         }
+        if (isWing(spec)) {
+            return buildWingBlockMark(spec, block, index);
+        }
         return buildDefaultBlockMark(spec, block, index);
     };