@antv/infographic 0.1.1 → 0.1.3

package/lib/designs/items/QuarterCircular.js

@@ -25,7 +25,6 @@ const QuarterCircular = (props) => {
     const indexStr = String(indexes[0] + 1).padStart(2, '0');
     // 根据 positionH 调整布局
     const isFlipped = positionH === 'flipped';
-    const isCentered = positionH === 'center';
     // 根据 positionV 调整布局
     const isVFlipped = positionV === 'flipped';
     // 计算装饰线的坐标
@@ -44,22 +43,6 @@ const QuarterCircular = (props) => {
                 topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
             };
         }
-        else if (isCentered) {
-            // 居中对齐
-            const totalContentWidth = width - circleRadius - DECORATION_HORIZONTAL_SPACING;
-            const centerOffset = (width - totalContentWidth) / 2;
-            return {
-                diagonalStartX: centerOffset + DOT_RADIUS,
-                diagonalStartY: isVFlipped
-                    ? height - DECORATION_VERTICAL_SPACING
-                    : DECORATION_VERTICAL_SPACING,
-                diagonalEndX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-                diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
-                topLineStartX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-                topLineEndX: centerOffset + totalContentWidth - CIRCLE_MASS,
-                topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
-            };
-        }
         else {
             // 默认左对齐
             return {
@@ -90,19 +73,6 @@ const QuarterCircular = (props) => {
                 iconX: CIRCLE_MASS - iconSize / 2,
             };
         }
-        else if (isCentered) {
-            // 居中对齐
-            const totalContentWidth = width - circleRadius - DECORATION_HORIZONTAL_SPACING;
-            const centerOffset = (width - totalContentWidth) / 2;
-            return {
-                valueX: centerOffset,
-                contentX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-                contentWidth: totalContentWidth - circleRadius - 10,
-                circleX: centerOffset + totalContentWidth,
-                circleY: isVFlipped ? 0 : height,
-                iconX: centerOffset + totalContentWidth - CIRCLE_MASS - iconSize / 2,
-            };
-        }
         else {
             // 默认左对齐
             return {
@@ -139,7 +109,7 @@ const QuarterCircular = (props) => {
                 : `M ${circleX} ${circleY} L ${circleX} ${circleY - circleRadius} A ${circleRadius} ${circleRadius} 0 0 0 ${circleX - circleRadius} ${circleY} Z`;
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${decorationCoords.diagonalStartX} ${decorationCoords.diagonalStartY} L ${decorationCoords.diagonalEndX} ${decorationCoords.diagonalEndY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${decorationCoords.topLineStartX} ${decorationCoords.topLineY} L ${decorationCoords.topLineEndX} ${decorationCoords.topLineY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: decorationCoords.diagonalStartX - DOT_RADIUS, y: decorationCoords.diagonalStartY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: decorationCoords.topLineEndX - DOT_RADIUS, y: decorationCoords.topLineY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary })] }), (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Text, { x: contentCoords.valueX, y: CARD_CONTENT_Y, fontSize: VALUE_SIZE, fontWeight: "bold", fill: themeColors.colorPrimary, width: 40, children: indexStr }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: getQuarterCirclePath(), fill: themeColors.colorPrimary, "data-element-type": "shape" }), datum.icon && ((0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: contentCoords.iconX, y: iconY, size: iconSize, fill: themeColors.colorWhite })), datum.label && ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: contentCoords.contentX, y: LABEL_Y, width: contentCoords.contentWidth, fontWeight: "bold", fill: themeColors.colorText, children: datum.label })), datum.desc && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: contentCoords.contentX, y: descY, width: contentCoords.contentWidth, fill: themeColors.colorTextSecondary, children: datum.desc }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(components_1.ShapesGroup, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${decorationCoords.diagonalStartX} ${decorationCoords.diagonalStartY} L ${decorationCoords.diagonalEndX} ${decorationCoords.diagonalEndY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${decorationCoords.topLineStartX} ${decorationCoords.topLineY} L ${decorationCoords.topLineEndX} ${decorationCoords.topLineY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: decorationCoords.diagonalStartX - DOT_RADIUS, y: decorationCoords.diagonalStartY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: decorationCoords.topLineEndX - DOT_RADIUS, y: decorationCoords.topLineY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary })] }), (0, jsx_runtime_1.jsxs)(jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(jsx_1.Text, { x: contentCoords.valueX, y: CARD_CONTENT_Y, fontSize: VALUE_SIZE, fontWeight: "bold", fill: themeColors.colorPrimary, children: indexStr }), (0, jsx_runtime_1.jsx)(jsx_1.Path, { d: getQuarterCirclePath(), fill: themeColors.colorPrimary, "data-element-type": "shape" }), datum.icon && ((0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: contentCoords.iconX, y: iconY, size: iconSize, fill: themeColors.colorWhite })), datum.label && ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: contentCoords.contentX, y: LABEL_Y, width: contentCoords.contentWidth, fontWeight: "bold", fill: themeColors.colorText, alignHorizontal: isFlipped ? 'right' : 'left', children: datum.label })), datum.desc && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: contentCoords.contentX, y: descY, width: contentCoords.contentWidth, fill: themeColors.colorTextSecondary, alignHorizontal: isFlipped ? 'right' : 'left', children: datum.desc }))] })] }));
 };
 exports.QuarterCircular = QuarterCircular;
 (0, registry_1.registerItem)('quarter-circular', {

package/lib/designs/items/index.d.ts

@@ -11,6 +11,7 @@ export * from './IconBadge';
 export * from './IndexedCard';
 export * from './LCornerCard';
 export * from './LetterCard';
+export * from './LinedText';
 export * from './PillBadge';
 export * from './PlainText';
 export * from './ProgressCard';

package/lib/designs/items/index.js

@@ -28,6 +28,7 @@ __exportStar(require("./IconBadge"), exports);
 __exportStar(require("./IndexedCard"), exports);
 __exportStar(require("./LCornerCard"), exports);
 __exportStar(require("./LetterCard"), exports);
+__exportStar(require("./LinedText"), exports);
 __exportStar(require("./PillBadge"), exports);
 __exportStar(require("./PlainText"), exports);
 __exportStar(require("./ProgressCard"), exports);

package/lib/designs/layouts/Align.js

@@ -8,74 +8,60 @@ exports.AlignLayout = (0, jsx_1.createLayout)((children, { horizontal, vertical,
         return (0, jsx_runtime_1.jsx)(jsx_1.Group, { ...props });
     }
     const childBounds = children.map((child) => (0, jsx_1.getElementBounds)(child));
-    // 检查是否设置了容器的宽高
-    const hasContainerWidth = props.width !== undefined;
-    const hasContainerHeight = props.height !== undefined;
-    let positionedChildren = [...children];
-    // 如果没有设置容器尺寸，先获取子节点的整体包围盒
     const childrenBounds = (0, jsx_1.getElementsBounds)(children);
-    // 确定对齐的基础区域
-    const alignmentWidth = hasContainerWidth
-        ? props.width
-        : childrenBounds.width;
-    const alignmentHeight = hasContainerHeight
-        ? props.height
-        : childrenBounds.height;
-    const alignmentX = hasContainerWidth ? props.x || 0 : childrenBounds.x;
-    const alignmentY = hasContainerHeight ? props.y || 0 : childrenBounds.y;
-    // 应用对齐
-    positionedChildren = children.map((child, index) => {
+    // 容器尺寸和位置
+    const containerX = props.x ?? childrenBounds.x;
+    const containerY = props.y ?? childrenBounds.y;
+    const containerWidth = props.width ?? childrenBounds.width;
+    const containerHeight = props.height ?? childrenBounds.height;
+    // 对齐子元素（使用相对于容器的坐标）
+    const positionedChildren = children.map((child, index) => {
         const bounds = childBounds[index];
         const childProps = { ...child.props };
-        // 水平对齐
-        if (horizontal) {
+        // 水平对齐（相对于容器左边界）
+        if (horizontal !== undefined) {
             switch (horizontal) {
                 case 'left':
-                    childProps.x = alignmentX;
+                    childProps.x = 0; // 相对容器
                     break;
                 case 'center':
-                    childProps.x = alignmentX + (alignmentWidth - bounds.width) / 2;
+                    childProps.x = (containerWidth - bounds.width) / 2;
                     break;
                 case 'right':
-                    childProps.x = alignmentX + alignmentWidth - bounds.width;
+                    childProps.x = containerWidth - bounds.width;
                     break;
             }
         }
-        else {
-            // 如果没有设置水平对齐，保持原有的 x 坐标
-            childProps.x = child.props.x || bounds.x;
+        else if (childProps.x === undefined) {
+            // 保持相对位置
+            childProps.x = bounds.x - containerX;
         }
-        // 垂直对齐
-        if (vertical) {
+        // 垂直对齐（相对于容器顶边界）
+        if (vertical !== undefined) {
             switch (vertical) {
                 case 'top':
-                    childProps.y = alignmentY;
+                    childProps.y = 0;
                     break;
                 case 'middle':
-                    childProps.y = alignmentY + (alignmentHeight - bounds.height) / 2;
+                    childProps.y = (containerHeight - bounds.height) / 2;
                     break;
                 case 'bottom':
-                    childProps.y = alignmentY + alignmentHeight - bounds.height;
+                    childProps.y = containerHeight - bounds.height;
                     break;
             }
         }
-        else {
-            // 如果没有设置垂直对齐，保持原有的 y 坐标
-            childProps.y = child.props.y || bounds.y;
+        else if (childProps.y === undefined) {
+            // 保持相对位置
+            childProps.y = bounds.y - containerY;
         }
         return (0, jsx_1.cloneElement)(child, childProps);
     });
-    // 如果没有设置容器尺寸，更新容器的边界框
-    if (!hasContainerWidth || !hasContainerHeight) {
-        const finalBounds = (0, jsx_1.getElementsBounds)(positionedChildren);
-        if (!hasContainerWidth) {
-            // props.x ??= finalBounds.x;
-            props.width ?? (props.width = finalBounds.width);
-        }
-        if (!hasContainerHeight) {
-            // props.y ??= finalBounds.y;
-            props.height ?? (props.height = finalBounds.height);
-        }
-    }
-    return (0, jsx_runtime_1.jsx)(jsx_1.Group, { ...props, children: positionedChildren });
+    const containerProps = {
+        ...props,
+        x: containerX,
+        y: containerY,
+        width: containerWidth,
+        height: containerHeight,
+    };
+    return (0, jsx_runtime_1.jsx)(jsx_1.Group, { ...containerProps, children: positionedChildren });
 });

package/lib/designs/layouts/Flex.js

@@ -10,9 +10,10 @@ exports.FlexLayout = (0, jsx_1.createLayout)((children, { flexDirection = 'row',
     const isRow = flexDirection === 'row' || flexDirection === 'row-reverse';
     const isReverse = flexDirection === 'row-reverse' || flexDirection === 'column-reverse';
     const childBounds = children.map((child) => (0, jsx_1.getElementBounds)(child));
+    const childrenBounds = (0, jsx_1.getElementsBounds)(children);
+    const containerWidth = props.width ?? childrenBounds.width;
+    const containerHeight = props.height ?? childrenBounds.height;
     const hasContainerSize = props.width !== undefined && props.height !== undefined;
-    const containerWidth = props.width || 0;
-    const containerHeight = props.height || 0;
     const lines = [];
     if (flexWrap === 'wrap' && hasContainerSize) {
         let currentLine = [];
@@ -174,33 +175,36 @@ exports.FlexLayout = (0, jsx_1.createLayout)((children, { flexDirection = 'row',
         }
     }
     if (!hasContainerSize) {
-        if (alignItems === 'center' && !isRow) {
-            // For column layout, center items horizontally
-            const maxWidth = Math.max(...childBounds.map((bounds) => bounds.width));
-            layoutChildren.forEach((child, index) => {
-                const bounds = childBounds[index];
-                const centerOffset = (maxWidth - bounds.width) / 2;
-                const newProps = { ...child.props };
-                newProps.x = (newProps.x || 0) + centerOffset;
-                layoutChildren[index] = (0, jsx_1.cloneElement)(child, newProps);
-            });
-        }
-        else if (alignItems === 'center' && isRow) {
-            // For row layout, center items vertically
-            const maxHeight = Math.max(...childBounds.map((bounds) => bounds.height));
-            layoutChildren.forEach((child, index) => {
-                const bounds = childBounds[index];
-                const centerOffset = (maxHeight - bounds.height) / 2;
-                const newProps = { ...child.props };
-                newProps.y = (newProps.y || 0) + centerOffset;
-                layoutChildren[index] = (0, jsx_1.cloneElement)(child, newProps);
-            });
+        if (alignItems === 'center') {
+            if (isRow) {
+                const maxHeight = Math.max(...childBounds.map((b) => b.height));
+                layoutChildren.forEach((child, index) => {
+                    const bounds = childBounds[index];
+                    const centerOffset = (maxHeight - bounds.height) / 2;
+                    const newProps = { ...child.props };
+                    newProps.y = (newProps.y || 0) + centerOffset;
+                    layoutChildren[index] = (0, jsx_1.cloneElement)(child, newProps);
+                });
+            }
+            else {
+                const maxWidth = Math.max(...childBounds.map((b) => b.width));
+                layoutChildren.forEach((child, index) => {
+                    const bounds = childBounds[index];
+                    const centerOffset = (maxWidth - bounds.width) / 2;
+                    const newProps = { ...child.props };
+                    newProps.x = (newProps.x || 0) + centerOffset;
+                    layoutChildren[index] = (0, jsx_1.cloneElement)(child, newProps);
+                });
+            }
         }
-        const finalBounds = (0, jsx_1.getElementsBounds)(layoutChildren);
-        // props.x ??= finalBounds.x;
-        // props.y ??= finalBounds.y;
-        props.width ?? (props.width = finalBounds.width);
-        props.height ?? (props.height = finalBounds.height);
     }
-    return (0, jsx_runtime_1.jsx)(jsx_1.Group, { ...props, children: layoutChildren });
+    const finalBounds = (0, jsx_1.getElementsBounds)(layoutChildren);
+    const containerProps = {
+        ...props,
+        x: props.x ?? childrenBounds.x,
+        y: props.y ?? childrenBounds.y,
+        width: props.width ?? finalBounds.width,
+        height: props.height ?? finalBounds.height,
+    };
+    return (0, jsx_runtime_1.jsx)(jsx_1.Group, { ...containerProps, children: layoutChildren });
 });

package/lib/designs/structures/chart-bar.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType } from '../../jsx';
+import { ItemDatum, Padding } from '../../types';
+import type { BaseStructureProps } from './types';
+export interface ChartBarProps extends BaseStructureProps {
+    width?: number;
+    gap?: number;
+    barGap?: number;
+    barHeight?: number;
+    barAreaWidth?: number;
+    labelGap?: number;
+    padding?: Padding;
+    showValue?: boolean;
+    valueFormatter?: (value: number, datum: ItemDatum) => string;
+}
+export declare const ChartBar: ComponentType<ChartBarProps>;

package/lib/designs/structures/chart-bar.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartBar = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const d3_1 = require("d3");
+const jsx_1 = require("../../jsx");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_2 = require("../utils");
+const registry_1 = require("./registry");
+const ChartBar = (props) => {
+    const { Title, Item, data, width, gap, barGap, barHeight = 28, barAreaWidth, labelGap = 16, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
+    const resolvedBarAreaWidth = barAreaWidth ?? width ?? 480;
+    const { title, desc, items = [], xTitle, yTitle } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = (0, utils_1.parsePadding)(padding);
+    const sampleDatum = items[0] ?? { label: '', value: 0 };
+    const itemBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { indexes: [0], datum: sampleDatum, data: data }));
+    const labelWidth = itemBounds.width || 140;
+    const labelHeight = itemBounds.height || barHeight;
+    const rowHeight = Math.max(barHeight, labelHeight);
+    const gapByHeight = Math.max(12, rowHeight * 0.35);
+    const resolvedGap = barGap ?? gap ?? gapByHeight;
+    const values = items.map((item) => item.value ?? 0);
+    const maxValue = Math.max(...values, 0);
+    const minValue = Math.min(...values, 0);
+    const domainMin = minValue < 0 ? minValue * 1.1 : 0;
+    let domainMax = maxValue > 0 ? maxValue * 1.1 : 0;
+    if (domainMax === domainMin) {
+        domainMax = domainMin + 1;
+    }
+    const scale = (0, d3_1.scaleLinear)()
+        .domain([domainMin, domainMax])
+        .range([0, resolvedBarAreaWidth]);
+    const zeroX = Math.min(Math.max(scale(0), 0), resolvedBarAreaWidth);
+    const minBarWidth = Math.max(2, resolvedBarAreaWidth * 0.02);
+    const chartHeight = items.length * (rowHeight + resolvedGap) - resolvedGap;
+    const yTitleSpace = yTitle ? 24 : 0;
+    const xTickSpace = 20;
+    const xTitleSpace = xTitle ? 24 : 0;
+    const yStart = paddingTop + yTitleSpace;
+    const barStartX = paddingLeft + labelWidth + labelGap;
+    const valueSpace = showValue ? 80 : 0;
+    const axisGap = Math.max(8, rowHeight * 0.2);
+    const totalWidth = barStartX + resolvedBarAreaWidth + valueSpace + paddingRight;
+    const totalHeight = yStart + chartHeight + axisGap + xTickSpace + xTitleSpace + paddingBottom;
+    const themeColors = (0, utils_2.getThemeColors)(options.themeConfig);
+    const axisColor = themeColors.colorText || '#666';
+    const colorPrimary = (0, utils_2.getColorPrimary)(options);
+    const barElements = [];
+    const valueElements = [];
+    const itemElements = [];
+    const axisElements = [];
+    const tickElements = [];
+    const gridElements = [];
+    const titleElements = [];
+    const axisY = yStart + chartHeight + axisGap;
+    const formatTick = (value) => Number.isInteger(value) ? value.toString() : value.toFixed(1);
+    items.forEach((item, index) => {
+        const indexes = [index];
+        const value = item.value ?? 0;
+        const rowY = yStart + index * (rowHeight + resolvedGap);
+        const barY = rowY + (rowHeight - barHeight) / 2;
+        const barX = value >= 0 ? barStartX + zeroX : barStartX + scale(value);
+        const barWidthRaw = value >= 0 ? scale(value) - zeroX : zeroX - scale(value);
+        const barWidth = barWidthRaw === 0 ? minBarWidth : barWidthRaw;
+        const barColor = (0, utils_2.getPaletteColor)(options, [index]) || themeColors.colorPrimary;
+        barElements.push((0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: barX, y: barY, width: barWidth, height: barHeight, fill: barColor, rx: 6, ry: 6, "data-element-type": "shape" }));
+        if (showValue) {
+            const valueX = value >= 0 ? barX + barWidth + 8 : barX - 8;
+            valueElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: valueX, y: barY + barHeight / 2, alignHorizontal: value >= 0 ? 'left' : 'right', alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: barColor, children: valueFormatter(value, item) }));
+        }
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, x: paddingLeft, y: rowY + (rowHeight - labelHeight) / 2, width: labelWidth, height: labelHeight, positionV: "middle" }));
+    });
+    const tickCount = Math.max(3, Math.min(7, Math.floor(resolvedBarAreaWidth / 80)));
+    const ticks = scale.ticks(tickCount);
+    ticks.forEach((tick) => {
+        const tickX = barStartX + scale(tick);
+        gridElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${tickX} ${yStart} L${tickX} ${yStart + chartHeight}`, stroke: axisColor, strokeOpacity: 0.08, "data-element-type": "shape" }));
+        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${tickX - 0.5} ${axisY} L${tickX - 0.5} ${axisY + 6}`, stroke: axisColor, "data-element-type": "shape" }));
+        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: tickX, y: axisY + 14, alignHorizontal: "center", alignVertical: "middle", fontSize: 12, fill: axisColor, children: formatTick(tick) }));
+    });
+    axisElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M${barStartX} ${axisY} L${barStartX + resolvedBarAreaWidth} ${axisY}`, stroke: axisColor, "data-element-type": "shape" }));
+    if (domainMin < 0) {
+        axisElements.push((0, jsx_runtime_1.jsx)(jsx_1.Rect, { x: barStartX + zeroX - 0.5, y: yStart, width: 1, height: chartHeight, fill: colorPrimary, "data-element-type": "shape" }));
+    }
+    if (yTitle) {
+        titleElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: paddingLeft + labelWidth / 2, y: paddingTop + yTitleSpace / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: yTitle }));
+    }
+    if (xTitle) {
+        titleElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: barStartX + resolvedBarAreaWidth / 2, y: axisY + xTickSpace + xTitleSpace / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: xTitle }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: [(0, jsx_runtime_1.jsx)(jsx_1.Group, { children: gridElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: barElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: valueElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: titleElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: [...axisElements, ...tickElements] }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: itemElements })] })] }));
+};
+exports.ChartBar = ChartBar;
+(0, registry_1.registerStructure)('chart-bar', {
+    component: exports.ChartBar,
+    composites: ['title', 'item', 'xTitle', 'yTitle'],
+});

package/lib/designs/structures/chart-line.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType } from '../../jsx';
+import { ItemDatum, Padding } from '../../types';
+import type { BaseStructureProps } from './types';
+export interface ChartLineProps extends BaseStructureProps {
+    width?: number;
+    height?: number;
+    gap?: number;
+    padding?: Padding;
+    showValue?: boolean;
+    valueFormatter?: (value: number, datum: ItemDatum) => string;
+}
+export declare const ChartLine: ComponentType<ChartLineProps>;

package/lib/designs/structures/chart-line.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartLine = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const d3_1 = require("d3");
+const jsx_1 = require("../../jsx");
+const utils_1 = require("../../utils");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_2 = require("../utils");
+const registry_1 = require("./registry");
+const ChartLine = (props) => {
+    const { Title, Item, data, width, height = 260, gap = 10, padding = 24, showValue = true, options, valueFormatter = (value) => value.toString(), } = props;
+    const { title, desc, items = [], xTitle, yTitle } = data;
+    const titleContent = Title ? (0, jsx_runtime_1.jsx)(Title, { title: title, desc: desc }) : null;
+    if (items.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: titleContent }));
+    }
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = (0, utils_1.parsePadding)(padding);
+    const itemProps = {
+        indexes: [0],
+        datum: items[0],
+        data,
+        positionH: 'center',
+        positionV: 'normal',
+    };
+    const sampleBounds = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(Item, { ...itemProps }));
+    const labelWidth = sampleBounds.width;
+    const labelHeight = sampleBounds.height;
+    const xTickSpace = Math.max(28, labelHeight + 14);
+    const yTickSpace = 44;
+    const yTitleSpace = yTitle ? 26 : 0;
+    const xTitleSpace = xTitle ? 22 : 0;
+    const baseSpacing = labelWidth + gap;
+    const naturalChartWidth = items.length > 0 ? (items.length - 1) * baseSpacing + labelWidth : 0;
+    const targetChartWidth = width !== undefined ? width : Math.max(200, naturalChartWidth || 320);
+    const spacing = items.length > 1
+        ? Math.max(baseSpacing, (targetChartWidth - labelWidth) / (items.length - 1))
+        : 0;
+    const derivedChartWidth = items.length > 0
+        ? Math.max(labelWidth, (items.length - 1) * spacing + labelWidth)
+        : 0;
+    const chartOriginX = paddingLeft + yTickSpace + yTitleSpace;
+    const chartOriginY = paddingTop + yTitleSpace;
+    const totalWidth = chartOriginX + derivedChartWidth + paddingRight;
+    const totalHeight = chartOriginY + height + xTickSpace + xTitleSpace + paddingBottom;
+    const values = items.map((item) => item.value ?? 0);
+    const maxValue = Math.max(...values, 0);
+    const minValue = Math.min(...values, 0);
+    const domainPadding = Math.max(Math.abs(maxValue), Math.abs(minValue)) * 0.1;
+    const domainMin = minValue < 0 ? minValue - domainPadding : 0;
+    let domainMax = maxValue > 0 ? maxValue + domainPadding : 1;
+    if (domainMax === domainMin) {
+        domainMax = domainMin + 1;
+    }
+    const scaleY = (0, d3_1.scaleLinear)()
+        .domain([domainMin, domainMax])
+        .nice()
+        .range([height, 0]);
+    const zeroY = Math.max(0, Math.min(height, scaleY(0)));
+    const axisBaseY = domainMax <= 0 ? 0 : domainMin >= 0 ? height : zeroY;
+    const colorPrimary = (0, utils_2.getColorPrimary)(options);
+    const themeColors = (0, utils_2.getThemeColors)(options.themeConfig);
+    const axisColor = themeColors.colorText || '#666';
+    const gridElements = [];
+    const axisElements = [];
+    const lineElements = [];
+    const pointElements = [];
+    const valueElements = [];
+    const titleElements = [];
+    const tickElements = [];
+    const ticksY = scaleY.ticks(6);
+    ticksY.forEach((tick) => {
+        const yPos = chartOriginY + scaleY(tick);
+        gridElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${chartOriginX} ${yPos} L ${chartOriginX + derivedChartWidth} ${yPos}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape", opacity: 0.08 }));
+        tickElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: chartOriginX - 8, y: yPos, alignHorizontal: "right", alignVertical: "middle", fontSize: 12, fill: axisColor, children: Number.isInteger(tick) ? tick.toString() : tick.toFixed(1) }));
+    });
+    const xLabels = [];
+    const pointPositions = [];
+    const colorStopsData = [];
+    const createSmoothPath = (points) => {
+        if (points.length === 0)
+            return '';
+        if (points.length === 1) {
+            const p = points[0];
+            return `M ${p.x} ${p.y}`;
+        }
+        const segments = [];
+        segments.push(`M ${points[0].x} ${points[0].y}`);
+        for (let i = 0; i < points.length - 1; i++) {
+            const p0 = points[i - 1] || points[i];
+            const p1 = points[i];
+            const p2 = points[i + 1];
+            const p3 = points[i + 2] || p2;
+            const cp1x = p1.x + (p2.x - p0.x) / 6;
+            const cp1y = p1.y + (p2.y - p0.y) / 6;
+            const cp2x = p2.x - (p3.x - p1.x) / 6;
+            const cp2y = p2.y - (p3.y - p1.y) / 6;
+            segments.push(`C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`);
+        }
+        return segments.join(' ');
+    };
+    items.forEach((item, index) => {
+        const x = chartOriginX + index * spacing + labelWidth / 2;
+        const y = chartOriginY + scaleY(item.value ?? 0);
+        pointPositions.push({ x, y, datum: item });
+        xLabels.push((0, jsx_runtime_1.jsx)(Item, { ...itemProps, indexes: [index], datum: item, x: x - labelWidth / 2, y: chartOriginY + height + 4 }));
+        const stopColor = (0, utils_2.getPaletteColor)(options, [index]) || themeColors.colorPrimary;
+        colorStopsData.push({ x, color: stopColor });
+    });
+    const minStopX = colorStopsData.length > 0
+        ? Math.min(...colorStopsData.map((s) => s.x))
+        : chartOriginX;
+    const maxStopX = colorStopsData.length > 0
+        ? Math.max(...colorStopsData.map((s) => s.x))
+        : chartOriginX + derivedChartWidth;
+    const stopSpan = Math.max(1, maxStopX - minStopX);
+    const gradientStops = colorStopsData.map((s) => ((0, jsx_runtime_1.jsx)("stop", { offset: `${((s.x - minStopX) / stopSpan) * 100}%`, stopColor: s.color })));
+    const areaStops = colorStopsData.map((s) => ((0, jsx_runtime_1.jsx)("stop", { offset: `${((s.x - minStopX) / stopSpan) * 100}%`, stopColor: s.color, stopOpacity: "0.18" })));
+    if (colorStopsData.length > 0) {
+        const lastColor = colorStopsData[colorStopsData.length - 1].color;
+        gradientStops.push((0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: lastColor }));
+        areaStops.push((0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: lastColor, stopOpacity: "0.04" }));
+    }
+    const gradientIdBase = `chart-line-${(0, utils_1.getSimpleHash)([
+        derivedChartWidth,
+        height,
+        axisColor,
+        colorPrimary,
+        colorStopsData.map((s) => `${s.x.toFixed(2)}-${s.color}`).join(),
+    ].join(':'))}`;
+    const gradientStrokeId = `${gradientIdBase}-stroke`;
+    const gradientAreaId = `${gradientIdBase}-area`;
+    const smoothLinePath = createSmoothPath(pointPositions);
+    lineElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: smoothLinePath, width: derivedChartWidth, height: height, stroke: `url(#${gradientStrokeId})`, strokeWidth: 3, fill: "none", "data-element-type": "shape" }));
+    const areaCurveTail = smoothLinePath.includes('C')
+        ? smoothLinePath.slice(smoothLinePath.indexOf('C'))
+        : '';
+    const areaPath = [
+        `M ${pointPositions[0].x} ${chartOriginY + axisBaseY}`,
+        `L ${pointPositions[0].x} ${pointPositions[0].y}`,
+        areaCurveTail,
+        `L ${pointPositions[pointPositions.length - 1].x} ${chartOriginY + axisBaseY}`,
+        'Z',
+    ].join(' ');
+    lineElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: areaPath, width: derivedChartWidth, height: height, fill: `url(#${gradientAreaId})`, stroke: "none", "data-element-type": "shape" }));
+    pointPositions.forEach((pos, index) => {
+        const paletteColor = (0, utils_2.getPaletteColor)(options, [index]) || themeColors.colorPrimary;
+        pointElements.push((0, jsx_runtime_1.jsx)(jsx_1.Ellipse, { x: pos.x - 6, y: pos.y - 6, width: 12, height: 12, fill: paletteColor, "data-element-type": "shape" }));
+        if (showValue) {
+            valueElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: pos.x, y: pos.y - 12, alignHorizontal: "center", alignVertical: "bottom", fontSize: 12, fontWeight: "bold", fill: paletteColor, children: valueFormatter(pos.datum.value ?? 0, pos.datum) }));
+        }
+    });
+    axisElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${chartOriginX} ${chartOriginY + axisBaseY} L ${chartOriginX + derivedChartWidth} ${chartOriginY + axisBaseY}`, width: derivedChartWidth, height: 1, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape" }));
+    axisElements.push((0, jsx_runtime_1.jsx)(jsx_1.Path, { d: `M ${chartOriginX} ${chartOriginY} L ${chartOriginX} ${chartOriginY + height}`, width: 1, height: height, stroke: axisColor, strokeWidth: 1, "data-element-type": "shape" }));
+    if (xTitle) {
+        titleElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: chartOriginX + derivedChartWidth / 2, y: chartOriginY + height + xTickSpace + xTitleSpace / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: xTitle }));
+    }
+    if (yTitle) {
+        titleElements.push((0, jsx_runtime_1.jsx)(jsx_1.Text, { x: paddingLeft + yTitleSpace / 2, y: chartOriginY + height / 2, alignHorizontal: "center", alignVertical: "middle", fontSize: 14, fontWeight: "bold", fill: axisColor, children: yTitle }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: [titleContent, (0, jsx_runtime_1.jsxs)(jsx_1.Group, { width: totalWidth, height: totalHeight, children: [(0, jsx_runtime_1.jsxs)(jsx_1.Defs, { children: [(0, jsx_runtime_1.jsx)("linearGradient", { id: gradientStrokeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: gradientStops }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientAreaId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [areaStops, (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: colorPrimary, stopOpacity: "0.04" })] })] }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: gridElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: [...axisElements, ...tickElements] }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: lineElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: pointElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: valueElements }), (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: titleElements }), (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { children: xLabels })] })] }));
+};
+exports.ChartLine = ChartLine;
+(0, registry_1.registerStructure)('chart-line', {
+    component: exports.ChartLine,
+    composites: ['title', 'item', 'xTitle', 'yTitle'],
+});

package/lib/designs/structures/chart-pie.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface ChartPieProps extends BaseStructureProps {
+    radius?: number;
+    innerRadius?: number;
+    padding?: number;
+    showPercentage?: boolean;
+}
+export declare const ChartPie: ComponentType<ChartPieProps>;