@antv/infographic 0.0.1-beta.1

package/esm/designs/items/PillBadge.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface PillBadgeProps extends BaseItemProps {
+    width?: number;
+    pillWidth?: number;
+    pillHeight?: number;
+    gap?: number;
+}
+export declare const PillBadge: ComponentType<PillBadgeProps>;

package/esm/designs/items/PillBadge.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, Group, Rect } from '@antv/infographic-jsx';
+import { ItemDesc, ItemLabel } from '../components';
+import { DropShadow, LinearGradient } from '../defs';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const PillBadge = (props) => {
+    const [{ datum, indexes, width = 300, pillWidth = 120, pillHeight = 36, gap = 16, positionH = 'normal', themeColors, }, restProps,] = getItemProps(props, ['width', 'pillWidth', 'pillHeight', 'gap']);
+    // Optimize: when no description, use pillWidth as component width
+    const hasDesc = !!datum.desc;
+    const componentWidth = hasDesc ? width : pillWidth;
+    // Calculate pill position based on alignment
+    const pillX = hasDesc
+        ? positionH === 'center'
+            ? (componentWidth - pillWidth) / 2
+            : positionH === 'flipped'
+                ? componentWidth - pillWidth
+                : 0
+        : 0; // Always 0 when no description
+    const pillY = 0;
+    // Calculate content position (only needed when hasDesc is true)
+    const contentX = hasDesc
+        ? positionH === 'center'
+            ? 0
+            : positionH === 'flipped'
+                ? 0
+                : 0
+        : 0;
+    const contentY = pillHeight + gap;
+    const contentWidth = componentWidth;
+    const dropShadowId = `drop-shadow-${themeColors.colorPrimary}`;
+    const linearGradientId = `linear-gradient-white-top-bottom`;
+    return (_jsxs(Group, { ...restProps, children: [_jsxs(Defs, { children: [_jsx(DropShadow, { id: dropShadowId, color: themeColors.colorPrimary }), _jsx(LinearGradient, { id: linearGradientId, startColor: "#fff", stopColor: "#ffffff33", direction: "top-bottom" })] }), _jsx(Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, rx: pillHeight / 2, ry: pillHeight / 2, filter: `url(#${dropShadowId})` }), _jsx(Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: `url(#${linearGradientId})`, opacity: themeColors.isDarkMode ? 0.4 : 0.7, rx: pillHeight / 2, ry: pillHeight / 2 }), _jsx(ItemLabel, { indexes: indexes, x: pillX, y: pillY, width: pillWidth, height: pillHeight, alignHorizontal: "center", alignVertical: "center", fontSize: 14, fontWeight: "500", fill: themeColors.colorText, children: datum.label }), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentX, y: contentY, width: contentWidth, alignHorizontal: positionH === 'center'
+                    ? 'center'
+                    : positionH === 'flipped'
+                        ? 'right'
+                        : 'left', fontSize: 12, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc }))] }));
+};
+registerItem('pill-badge', {
+    component: PillBadge,
+    composites: ['label', 'desc'],
+});

package/esm/designs/items/PlainText.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface LabelTextProps extends BaseItemProps {
+    width?: number;
+    formatter?: (text?: string) => string;
+    usePaletteColor?: boolean;
+}
+export declare const LabelText: ComponentType<LabelTextProps>;

package/esm/designs/items/PlainText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const LabelText = (props) => {
+    const [{ indexes, datum, width = 120, themeColors, positionH = 'normal', formatter = (text) => text || '', usePaletteColor = false, }, restProps,] = getItemProps(props, ['width', 'formatter', 'usePaletteColor']);
+    return (_jsx(ItemLabel, { ...restProps, indexes: indexes, width: width, fill: usePaletteColor ? themeColors.colorPrimary : themeColors.colorText, fontSize: 14, fontWeight: "regular", alignHorizontal: positionH === 'flipped'
+            ? 'right'
+            : positionH === 'center'
+                ? 'center'
+                : 'left', alignVertical: "center", children: formatter(datum.label || datum.desc) }));
+};
+registerItem('plain-text', {
+    component: LabelText,
+    composites: ['label'],
+});

package/esm/designs/items/ProgressCard.d.ts

@@ -0,0 +1,12 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface ProgressCardProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    iconSize?: number;
+    gap?: number;
+    progressHeight?: number;
+    borderRadius?: number;
+}
+export declare const ProgressCard: ComponentType<ProgressCardProps>;

package/esm/designs/items/ProgressCard.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, getElementBounds, Group, Rect, } from '@antv/infographic-jsx';
+import { scaleLinear } from 'd3';
+import tinycolor from 'tinycolor2';
+import { ItemDesc, ItemIcon, ItemLabel, ItemValue } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const ProgressCard = (props) => {
+    const [{ datum, data, indexes, width = 280, height = 120, iconSize = 32, gap = 12, progressHeight = 8, borderRadius = 12, positionH = 'normal', themeColors, valueFormatter = (v) => `${v}%`, }, restProps,] = getItemProps(props, [
+        'width',
+        'height',
+        'iconSize',
+        'gap',
+        'progressHeight',
+        'borderRadius',
+    ]);
+    const value = datum.value;
+    const displayValue = value ?? 0;
+    const maxValue = Math.max(...data.items.map((item) => item.value ?? 0), 100);
+    const progressWidth = width - 2 * gap;
+    // 计算进度条的填充宽度
+    const progressScale = scaleLinear()
+        .domain([0, maxValue])
+        .range([0, progressWidth]);
+    const progressFillWidth = progressScale(displayValue);
+    // 生成唯一的渐变ID
+    const gradientId = `${themeColors.colorPrimary}-progress`;
+    const progressBgId = `${themeColors.colorPrimaryBg}-progress-bg`;
+    // 获取元素边界用于布局计算
+    const labelBounds = getElementBounds(_jsx(ItemLabel, { indexes: indexes }));
+    // 计算布局位置
+    const contentY = gap;
+    const iconX = positionH === 'flipped' ? width - gap - iconSize : gap;
+    const iconY = contentY;
+    const textStartX = positionH === 'flipped' ? gap : iconSize + 2 * gap;
+    const textWidth = width - iconSize - 3 * gap;
+    const textY = iconY;
+    const progressY = height - gap - progressHeight;
+    const hasValue = value !== undefined;
+    return (_jsxs(Group, { ...restProps, children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor
+                                    .mix(themeColors.colorPrimary, '#fff', 20)
+                                    .toHexString() })] }), _jsxs("linearGradient", { id: progressBgId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimaryBg }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorBg })] })] }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: borderRadius, ry: borderRadius }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: textStartX, y: textY, width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", fontSize: 16, fontWeight: "medium", fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, x: textStartX, y: textY + labelBounds.height, width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", lineHeight: 1, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, value: displayValue, formatter: valueFormatter })), _jsx(ItemDesc, { indexes: indexes, x: textStartX, y: textY + labelBounds.height + (hasValue ? 27 : 4), width: textWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "top", fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: hasValue ? 2 : 3, wordWrap: true, children: datum.desc }), _jsx(Rect, { x: gap, y: progressY, width: progressWidth, height: progressHeight, fill: `url(#${progressBgId})`, rx: progressHeight / 2, ry: progressHeight / 2 }), _jsx(Rect, { x: gap, y: progressY, width: progressFillWidth, height: progressHeight, fill: `url(#${gradientId})`, rx: progressHeight / 2, ry: progressHeight / 2 })] }));
+};
+registerItem('progress-card', {
+    component: ProgressCard,
+    composites: ['icon', 'label', 'value', 'desc'],
+});

package/esm/designs/items/QuarterCircular.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface QuarterCircularProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    iconSize?: number;
+    circleRadius?: number;
+}
+export declare const QuarterCircular: ComponentType<QuarterCircularProps>;

package/esm/designs/items/QuarterCircular.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Ellipse, getElementBounds, Group, Path, Text, } from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const QuarterCircular = (props) => {
+    const [{ datum, indexes, width = 280, height = 120, iconSize = 30, circleRadius = 80, positionH = 'normal', positionV = 'normal', themeColors, }, restProps,] = getItemProps(props, ['width', 'height', 'iconSize', 'circleRadius']);
+    // 圆的质心
+    const CIRCLE_MASS = (4 * circleRadius) / (3 * Math.PI);
+    // 配置参数
+    const LINE_WIDTH = 2;
+    const DOT_RADIUS = 4;
+    const VALUE_SIZE = 28;
+    const CARD_Y = 20;
+    const CARD_CONTENT_Y = CARD_Y + 20;
+    const LABEL_Y = CARD_Y;
+    const DESC_Y_OFFSET = 8;
+    const DECORATION_VERTICAL_SPACING = 35;
+    const DECORATION_HORIZONTAL_SPACING = 40;
+    const DECORATION_END_SPACING = 30;
+    // 序号（使用 indexes 的第一个值 + 1）
+    const indexStr = String(indexes[0] + 1).padStart(2, '0');
+    // 根据 positionH 调整布局
+    const isFlipped = positionH === 'flipped';
+    const isCentered = positionH === 'center';
+    // 根据 positionV 调整布局
+    const isVFlipped = positionV === 'flipped';
+    // 计算装饰线的坐标
+    const getDecorationCoords = () => {
+        if (isFlipped) {
+            // 右对齐（镜像布局）
+            return {
+                diagonalStartX: width - DOT_RADIUS,
+                diagonalStartY: isVFlipped
+                    ? height - DECORATION_VERTICAL_SPACING
+                    : DECORATION_VERTICAL_SPACING,
+                diagonalEndX: width - DECORATION_HORIZONTAL_SPACING,
+                diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
+                topLineStartX: width - DECORATION_HORIZONTAL_SPACING,
+                topLineEndX: CIRCLE_MASS,
+                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 {
+                diagonalStartX: DOT_RADIUS,
+                diagonalStartY: isVFlipped
+                    ? height - DECORATION_VERTICAL_SPACING
+                    : DECORATION_VERTICAL_SPACING,
+                diagonalEndX: DECORATION_HORIZONTAL_SPACING,
+                diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
+                topLineStartX: DECORATION_HORIZONTAL_SPACING,
+                topLineEndX: width - CIRCLE_MASS,
+                topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
+            };
+        }
+    };
+    // 计算内容区域的坐标
+    const getContentCoords = () => {
+        if (isFlipped) {
+            // 右对齐（镜像布局）
+            const contentX = circleRadius + 10;
+            const contentWidth = width - contentX - DECORATION_HORIZONTAL_SPACING;
+            return {
+                valueX: width - DECORATION_END_SPACING,
+                contentX,
+                contentWidth,
+                circleX: 0,
+                circleY: isVFlipped ? 0 : height,
+                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 {
+                valueX: 0,
+                contentX: DECORATION_HORIZONTAL_SPACING,
+                contentWidth: width - DECORATION_HORIZONTAL_SPACING - circleRadius - 10,
+                circleX: width,
+                circleY: isVFlipped ? 0 : height,
+                iconX: width - CIRCLE_MASS - iconSize / 2,
+            };
+        }
+    };
+    // 获取坐标值
+    const decorationCoords = getDecorationCoords();
+    const contentCoords = getContentCoords();
+    // 计算图标Y坐标
+    const iconY = isVFlipped
+        ? CIRCLE_MASS - iconSize / 2
+        : height - CIRCLE_MASS - iconSize / 2;
+    // 获取文本尺寸
+    const labelBounds = getElementBounds(_jsx(ItemLabel, { indexes: indexes, width: contentCoords.contentWidth, children: datum.label }));
+    const descY = LABEL_Y + labelBounds.height + DESC_Y_OFFSET;
+    // 生成1/4圆路径
+    const getQuarterCirclePath = () => {
+        const { circleX, circleY } = contentCoords;
+        if (isFlipped) {
+            return isVFlipped
+                ? `M ${circleX} ${circleY} L ${circleX} ${circleY + circleRadius} A ${circleRadius} ${circleRadius} 0 0 0 ${circleX + circleRadius} ${circleY} Z`
+                : `M ${circleX} ${circleY} L ${circleX} ${circleY - circleRadius} A ${circleRadius} ${circleRadius} 0 0 1 ${circleX + circleRadius} ${circleY} Z`;
+        }
+        else {
+            return isVFlipped
+                ? `M ${circleX} ${circleY} L ${circleX} ${circleY + circleRadius} A ${circleRadius} ${circleRadius} 0 0 1 ${circleX - circleRadius} ${circleY} Z`
+                : `M ${circleX} ${circleY} L ${circleX} ${circleY - circleRadius} A ${circleRadius} ${circleRadius} 0 0 0 ${circleX - circleRadius} ${circleY} Z`;
+        }
+    };
+    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(Group, { children: [_jsx(Path, { d: `M ${decorationCoords.diagonalStartX} ${decorationCoords.diagonalStartY} L ${decorationCoords.diagonalEndX} ${decorationCoords.diagonalEndY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), _jsx(Path, { d: `M ${decorationCoords.topLineStartX} ${decorationCoords.topLineY} L ${decorationCoords.topLineEndX} ${decorationCoords.topLineY}`, stroke: themeColors.colorPrimary, strokeWidth: LINE_WIDTH, fill: "none" }), _jsx(Ellipse, { x: decorationCoords.diagonalStartX - DOT_RADIUS, y: decorationCoords.diagonalStartY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary }), _jsx(Ellipse, { x: decorationCoords.topLineEndX - DOT_RADIUS, y: decorationCoords.topLineY - DOT_RADIUS, width: DOT_RADIUS * 2, height: DOT_RADIUS * 2, fill: themeColors.colorPrimary })] }), _jsxs(Group, { children: [_jsx(Text, { x: contentCoords.valueX, y: CARD_CONTENT_Y, fontSize: VALUE_SIZE, fontWeight: "bold", fill: themeColors.colorPrimary, width: 40, children: indexStr }), _jsx(Path, { d: getQuarterCirclePath(), fill: themeColors.colorPrimary }), datum.icon && (_jsx(ItemIcon, { indexes: indexes, x: contentCoords.iconX, y: iconY, size: iconSize, fill: themeColors.colorWhite })), datum.label && (_jsx(ItemLabel, { indexes: indexes, x: contentCoords.contentX, y: LABEL_Y, width: contentCoords.contentWidth, fontWeight: "bold", fill: themeColors.colorText, children: datum.label })), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: contentCoords.contentX, y: descY, width: contentCoords.contentWidth, fill: themeColors.colorTextSecondary, children: datum.desc }))] })] }));
+};
+registerItem('quarter-circular', {
+    component: QuarterCircular,
+    composites: ['icon', 'label', 'desc'],
+});

package/esm/designs/items/QuarterSimpleCard.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface QuarterSimpleCardProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    iconSize?: number;
+    padding?: number;
+    borderRadius?: number;
+}
+export declare const QuarterSimpleCard: ComponentType<QuarterSimpleCardProps>;

package/esm/designs/items/QuarterSimpleCard.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Group, Path, getElementBounds, } from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const QuarterSimpleCard = (props) => {
+    const [{ datum, indexes, width = 150, height = 150, iconSize = 30, padding = 20, borderRadius = 16, positionH = 'center', positionV = 'center', themeColors, }, restProps,] = getItemProps(props, [
+        'width',
+        'height',
+        'iconSize',
+        'padding',
+        'borderRadius',
+    ]);
+    // 计算内容区域
+    const contentWidth = width - padding * 2;
+    const contentX = padding;
+    const contentY = padding;
+    // 图标位置
+    const iconX = positionH === 'flipped'
+        ? width - padding - iconSize
+        : positionH === 'center'
+            ? (width - iconSize) / 2
+            : contentX;
+    const iconY = contentY;
+    // 标签位置（图标下方）
+    const labelY = iconY + iconSize + 8;
+    const labelBounds = getElementBounds(_jsx(ItemLabel, { indexes: indexes, width: contentWidth, children: datum.label }));
+    const labelX = positionH === 'flipped'
+        ? width - padding - contentWidth
+        : positionH === 'center'
+            ? padding
+            : contentX;
+    // 描述位置（标签下方）
+    const descY = labelY + labelBounds.height + 4;
+    const descX = labelX;
+    // 根据 positionH 和 positionV 决定直角位置
+    const r = borderRadius;
+    let cardPath = '';
+    if (positionH === 'center' && positionV === 'center') {
+        // 四个角都为圆角
+        cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+    }
+    else if (positionH === 'flipped' && positionV === 'flipped') {
+        // 直角在左下角
+        cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 0
+  L ${r} 0
+  Z
+`;
+    }
+    else if (positionH === 'normal' && positionV === 'flipped') {
+        // 右上角为直角，其它角为圆角
+        cardPath = `
+  M 0 0
+  L ${width} 0
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+    }
+    else if (positionH === 'flipped') {
+        // 直角在左上角
+        cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L 0 ${height}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+    }
+    else {
+        // 默认逻辑：直角在右下角
+        cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+    }
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Path, { d: cardPath, x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg }), _jsx(ItemLabel, { indexes: indexes, x: labelX, y: labelY, width: contentWidth, fontSize: 14, fontWeight: "bold", fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.label }), datum.desc && (_jsx(ItemDesc, { indexes: indexes, x: descX, y: descY, width: contentWidth, fontSize: 11, wordWrap: true, fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.desc }))] }));
+};
+registerItem('quarter-simple-card', {
+    component: QuarterSimpleCard,
+    composites: ['icon', 'label', 'desc'],
+});

package/esm/designs/items/RibbonCard.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface RibbonCardProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    iconSize?: number;
+    gap?: number;
+    ribbonHeight?: number;
+}
+export declare const RibbonCard: ComponentType<RibbonCardProps>;

package/esm/designs/items/RibbonCard.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, Group, Path, Rect } from '@antv/infographic-jsx';
+import tinycolor from 'tinycolor2';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const RibbonCard = (props) => {
+    const [{ datum, indexes, width = 240, height = 140, iconSize = 28, gap = 12, ribbonHeight = 32, themeColors, }, restProps,] = getItemProps(props, [
+        'width',
+        'height',
+        'iconSize',
+        'gap',
+        'ribbonHeight',
+    ]);
+    const gradientId = `${themeColors.colorPrimary}-ribbon`;
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Defs, { children: _jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
+                                .darken(15)
+                                .toHexString() })] }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: 8, ry: 8 }), _jsx(Rect, { x: 0, y: 0, width: width, height: ribbonHeight, fill: `url(#${gradientId})`, rx: 8, ry: 8 }), _jsx(Rect, { x: 0, y: 8, width: width, height: ribbonHeight - 8, fill: `url(#${gradientId})` }), _jsx(Path, { x: width - 20, y: ribbonHeight, width: 20, height: 8, fill: tinycolor(themeColors.colorPrimary).darken(25).toHexString(), d: "M0,0 L20,0 L15,8 L5,8 Z" }), _jsx(ItemIcon, { indexes: indexes, x: gap, y: ribbonHeight + gap, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: iconSize + 2 * gap, y: ribbonHeight + gap, width: width - iconSize - 3 * gap, height: iconSize, alignHorizontal: "left", alignVertical: "center", lineHeight: 1, fontWeight: "bold", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: gap, y: ribbonHeight + iconSize + gap + 5, width: width - 2 * gap, alignHorizontal: "left", fill: themeColors.colorTextSecondary, lineNumber: 3, wordWrap: true, children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - gap - 8, y: gap / 2, size: 16, fill: themeColors.colorWhite })] }));
+};
+registerItem('ribbon-card', {
+    component: RibbonCard,
+    composites: ['icon', 'label', 'desc'],
+});

package/esm/designs/items/RoundedRectNode.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface RoundedRectNodeProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    padding?: number;
+}
+export declare const RoundedRectNode: ComponentType<RoundedRectNodeProps>;

package/esm/designs/items/RoundedRectNode.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Group, Rect } from '@antv/infographic-jsx';
+import { ItemLabel } from '../components';
+import { getItemId, getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const RoundedRectNode = (props) => {
+    const [{ indexes, datum, themeColors, width = 300, height = 40, padding = 4, positionH = 'normal', }, restProps,] = getItemProps(props, ['width', 'height', 'borderRadius', 'padding']);
+    const borderRadius = height / 2;
+    // Calculate text positioning
+    const textX = borderRadius;
+    const textY = padding;
+    const textWidth = width - borderRadius * 2;
+    const textHeight = height - padding * 2;
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Rect, { id: getItemId(indexes, 'shape', 'rect'), width: width, height: height, rx: borderRadius, ry: borderRadius, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, strokeWidth: 1, opacity: 0.8 }), _jsx(ItemLabel, { indexes: indexes, x: textX, y: textY, width: textWidth, height: textHeight, alignHorizontal: positionH === 'flipped'
+                    ? 'right'
+                    : positionH === 'center'
+                        ? 'center'
+                        : 'left', alignVertical: "center", fontSize: 14, fontWeight: "500", fill: themeColors.colorText, children: datum.label })] }));
+};
+registerItem('rounded-rect-node', {
+    component: RoundedRectNode,
+    composites: ['label'],
+});

package/esm/designs/items/SimpleHorizontalArrow.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface SimpleHorizontalArrowProps extends BaseItemProps {
+    width?: number;
+    /** 翻转方向 */
+    flipped?: boolean;
+}
+export declare const SimpleHorizontalArrow: ComponentType<SimpleHorizontalArrowProps>;

package/esm/designs/items/SimpleHorizontalArrow.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { getElementBounds, Group, Polygon, Text, } from '@antv/infographic-jsx';
+import { Gap, ItemDesc, ItemLabel } from '../components';
+import { FlexLayout } from '../layouts';
+import { AlignLayout } from '../layouts/Align';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const SimpleHorizontalArrow = (props) => {
+    const [{ indexes, datum, width = 140, themeColors, positionV = 'normal' }, restProps,] = getItemProps(props, ['width']);
+    const isVNormal = positionV !== 'flipped';
+    const textAlignVertical = isVNormal ? 'bottom' : 'top';
+    const label = (_jsx(ItemLabel, { indexes: indexes, width: width, fill: themeColors.colorText, alignHorizontal: "center", alignVertical: textAlignVertical, fontSize: 14, children: datum.label }));
+    const desc = (_jsx(ItemDesc, { indexes: indexes, width: width, fill: themeColors.colorTextSecondary, alignHorizontal: "center", alignVertical: textAlignVertical, children: datum.desc }));
+    const arrowHeight = 30;
+    const labelGap = 10;
+    const labelBounds = getElementBounds(label);
+    const descBounds = getElementBounds(desc);
+    const textHeight = labelBounds.height + descBounds.height;
+    const totalHeight = textHeight + labelGap + arrowHeight + labelGap + textHeight;
+    return (_jsx(Group, { width: width, height: totalHeight, ...restProps, children: _jsxs(FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? (_jsxs(_Fragment, { children: [desc, label, _jsx(Gap, { height: labelGap })] })) : (_jsx(_Fragment, { children: _jsx(Gap, { height: textHeight + labelGap }) })), _jsxs(AlignLayout, { horizontal: "center", vertical: "center", children: [_jsx(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), _jsx(Text, { width: width, height: arrowHeight, alignHorizontal: "center", alignVertical: "center", fill: themeColors.colorWhite, fontWeight: "bold", fontSize: 16, children: datum.time
+                                ? datum.time
+                                : String(indexes[0] + 1)
+                                    .padStart(2, '0')
+                                    .slice(-2) })] }), !isVNormal ? (_jsxs(_Fragment, { children: [_jsx(Gap, { height: labelGap }), label, desc] })) : (_jsx(_Fragment, { children: _jsx(Gap, { height: textHeight + labelGap }) }))] }) }));
+};
+const HorizontalArrow = (props) => {
+    const { x = 0, y = 0, width = 100, height = 40, fill = '#1890FF', size = 10, } = props;
+    return (_jsx(Polygon, { width: width, height: height, points: [
+            { x, y },
+            { x: x + width - size, y },
+            { x: x + width, y: y + height / 2 },
+            { x: x + width - size, y: y + height },
+            { x, y: y + height },
+            { x: x + size, y: y + height / 2 },
+        ], fill: fill }));
+};
+registerItem('simple-horizontal-arrow', {
+    component: SimpleHorizontalArrow,
+    composites: ['label', 'desc', 'time'],
+});

package/esm/designs/items/SimpleIllusItem.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface SimpleIllusItemProps extends BaseItemProps {
+    width?: number;
+    illusSize?: number;
+    gap?: number;
+    usePaletteColor?: boolean;
+}
+export declare const SimpleIllusItem: ComponentType<SimpleIllusItemProps>;

package/esm/designs/items/SimpleIllusItem.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { getElementBounds } from '@antv/infographic-jsx';
+import { Illus, ItemDesc, ItemLabel } from '../components';
+import { FlexLayout } from '../layouts';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const SimpleIllusItem = (props) => {
+    const [{ indexes, datum, width = 180, illusSize = width, gap = 8, themeColors, usePaletteColor = false, }, restProps,] = getItemProps(props, ['width', 'illusSize', 'gap', 'usePaletteColor']);
+    const { label, desc } = datum;
+    const labelColor = usePaletteColor
+        ? themeColors.colorPrimary
+        : themeColors.colorText;
+    const labelContent = (_jsx(ItemLabel, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "center", fill: labelColor, children: label }));
+    const labelBounds = getElementBounds(labelContent);
+    return (_jsxs(FlexLayout, { ...restProps, width: width, height: illusSize + gap + labelBounds.height + gap + 48, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: gap, children: [_jsx(Illus, { indexes: indexes, width: illusSize, height: illusSize }), labelContent, _jsx(ItemDesc, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "top", fill: themeColors.colorTextSecondary, lineNumber: 3, children: desc })] }));
+};
+registerItem('simple-illus', {
+    component: SimpleIllusItem,
+    composites: ['illus', 'label', 'desc'],
+});

package/esm/designs/items/SimpleItem.d.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface SimpleItemProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    gap?: number;
+    showIcon?: boolean;
+    iconSize?: number;
+    iconType?: 'default' | 'circle';
+    usePaletteColor?: boolean;
+}
+export declare const SimpleItem: ComponentType<SimpleItemProps>;