@antv/infographic 0.0.1-beta.1

package/lib/designs/items/PillBadge.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PillBadge = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const defs_1 = require("../defs");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const PillBadge = (props) => {
+    const [{ datum, indexes, width = 300, pillWidth = 120, pillHeight = 36, gap = 16, positionH = 'normal', themeColors, }, restProps,] = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Defs, { children: [(0, jsx_runtime_1.jsx)(defs_1.DropShadow, { id: dropShadowId, color: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(defs_1.LinearGradient, { id: linearGradientId, startColor: "#fff", stopColor: "#ffffff33", direction: "top-bottom" })] }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: pillX, y: pillY, width: pillWidth, height: pillHeight, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, rx: pillHeight / 2, ry: pillHeight / 2, filter: `url(#${dropShadowId})` }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.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 }), (0, jsx_runtime_1.jsx)(components_1.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 && ((0, jsx_runtime_1.jsx)(components_1.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 }))] }));
+};
+exports.PillBadge = PillBadge;
+(0, registry_1.registerItem)('pill-badge', {
+    component: exports.PillBadge,
+    composites: ['label', 'desc'],
+});

package/lib/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/lib/designs/items/PlainText.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelText = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const LabelText = (props) => {
+    const [{ indexes, datum, width = 120, themeColors, positionH = 'normal', formatter = (text) => text || '', usePaletteColor = false, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'formatter', 'usePaletteColor']);
+    return ((0, jsx_runtime_1.jsx)(components_1.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) }));
+};
+exports.LabelText = LabelText;
+(0, registry_1.registerItem)('plain-text', {
+    component: exports.LabelText,
+    composites: ['label'],
+});

package/lib/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/lib/designs/items/ProgressCard.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressCard = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const d3_1 = require("d3");
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+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,] = (0, utils_1.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 = (0, d3_1.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 = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Defs, { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: tinycolor2_1.default
+                                    .mix(themeColors.colorPrimary, '#fff', 20)
+                                    .toHexString() })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: progressBgId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: themeColors.colorPrimaryBg }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: themeColors.colorBg })] })] }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: borderRadius, ry: borderRadius }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(components_1.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 && ((0, jsx_runtime_1.jsx)(components_1.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 })), (0, jsx_runtime_1.jsx)(components_1.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 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: gap, y: progressY, width: progressWidth, height: progressHeight, fill: `url(#${progressBgId})`, rx: progressHeight / 2, ry: progressHeight / 2 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: gap, y: progressY, width: progressFillWidth, height: progressHeight, fill: `url(#${gradientId})`, rx: progressHeight / 2, ry: progressHeight / 2 })] }));
+};
+exports.ProgressCard = ProgressCard;
+(0, registry_1.registerItem)('progress-card', {
+    component: exports.ProgressCard,
+    composites: ['icon', 'label', 'value', 'desc'],
+});

package/lib/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/lib/designs/items/QuarterCircular.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuarterCircular = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const QuarterCircular = (props) => {
+    const [{ datum, indexes, width = 280, height = 120, iconSize = 30, circleRadius = 80, positionH = 'normal', positionV = 'normal', themeColors, }, restProps,] = (0, utils_1.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 = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(infographic_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)(infographic_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)(infographic_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)(infographic_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)(infographic_jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)(infographic_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)(infographic_jsx_1.Path, { d: getQuarterCirclePath(), fill: themeColors.colorPrimary }), 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 }))] })] }));
+};
+exports.QuarterCircular = QuarterCircular;
+(0, registry_1.registerItem)('quarter-circular', {
+    component: exports.QuarterCircular,
+    composites: ['icon', 'label', 'desc'],
+});

package/lib/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/lib/designs/items/QuarterSimpleCard.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuarterSimpleCard = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const QuarterSimpleCard = (props) => {
+    const [{ datum, indexes, width = 150, height = 150, iconSize = 30, padding = 20, borderRadius = 16, positionH = 'center', positionV = 'center', themeColors, }, restProps,] = (0, utils_1.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 = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: cardPath, x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg }), (0, jsx_runtime_1.jsx)(components_1.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 && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: descX, y: descY, width: contentWidth, fontSize: 11, wordWrap: true, fill: themeColors.colorBg, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', children: datum.desc }))] }));
+};
+exports.QuarterSimpleCard = QuarterSimpleCard;
+(0, registry_1.registerItem)('quarter-simple-card', {
+    component: exports.QuarterSimpleCard,
+    composites: ['icon', 'label', 'desc'],
+});

package/lib/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/lib/designs/items/RibbonCard.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RibbonCard = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const RibbonCard = (props) => {
+    const [{ datum, indexes, width = 240, height = 140, iconSize = 28, gap = 12, ribbonHeight = 32, themeColors, }, restProps,] = (0, utils_1.getItemProps)(props, [
+        'width',
+        'height',
+        'iconSize',
+        'gap',
+        'ribbonHeight',
+    ]);
+    const gradientId = `${themeColors.colorPrimary}-ribbon`;
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: (0, tinycolor2_1.default)(themeColors.colorPrimary)
+                                .darken(15)
+                                .toHexString() })] }) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorPrimaryBg, strokeWidth: 1, rx: 8, ry: 8 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: ribbonHeight, fill: `url(#${gradientId})`, rx: 8, ry: 8 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 8, width: width, height: ribbonHeight - 8, fill: `url(#${gradientId})` }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { x: width - 20, y: ribbonHeight, width: 20, height: 8, fill: (0, tinycolor2_1.default)(themeColors.colorPrimary).darken(25).toHexString(), d: "M0,0 L20,0 L15,8 L5,8 Z" }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: gap, y: ribbonHeight + gap, size: iconSize, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(components_1.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 }), (0, jsx_runtime_1.jsx)(components_1.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 }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: width - gap - 8, y: gap / 2, size: 16, fill: themeColors.colorWhite })] }));
+};
+exports.RibbonCard = RibbonCard;
+(0, registry_1.registerItem)('ribbon-card', {
+    component: exports.RibbonCard,
+    composites: ['icon', 'label', 'desc'],
+});

package/lib/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/lib/designs/items/RoundedRectNode.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RoundedRectNode = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const RoundedRectNode = (props) => {
+    const [{ indexes, datum, themeColors, width = 300, height = 40, padding = 4, positionH = 'normal', }, restProps,] = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { id: (0, utils_1.getItemId)(indexes, 'shape', 'rect'), width: width, height: height, rx: borderRadius, ry: borderRadius, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary, strokeWidth: 1, opacity: 0.8 }), (0, jsx_runtime_1.jsx)(components_1.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 })] }));
+};
+exports.RoundedRectNode = RoundedRectNode;
+(0, registry_1.registerItem)('rounded-rect-node', {
+    component: exports.RoundedRectNode,
+    composites: ['label'],
+});

package/lib/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/lib/designs/items/SimpleHorizontalArrow.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleHorizontalArrow = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const Align_1 = require("../layouts/Align");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const SimpleHorizontalArrow = (props) => {
+    const [{ indexes, datum, width = 140, themeColors, positionV = 'normal' }, restProps,] = (0, utils_1.getItemProps)(props, ['width']);
+    const isVNormal = positionV !== 'flipped';
+    const textAlignVertical = isVNormal ? 'bottom' : 'top';
+    const label = ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: width, fill: themeColors.colorText, alignHorizontal: "center", alignVertical: textAlignVertical, fontSize: 14, children: datum.label }));
+    const desc = ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, width: width, fill: themeColors.colorTextSecondary, alignHorizontal: "center", alignVertical: textAlignVertical, children: datum.desc }));
+    const arrowHeight = 30;
+    const labelGap = 10;
+    const labelBounds = (0, infographic_jsx_1.getElementBounds)(label);
+    const descBounds = (0, infographic_jsx_1.getElementBounds)(desc);
+    const textHeight = labelBounds.height + descBounds.height;
+    const totalHeight = textHeight + labelGap + arrowHeight + labelGap + textHeight;
+    return ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { width: width, height: totalHeight, ...restProps, children: (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", alignItems: "center", children: [isVNormal ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [desc, label, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: labelGap })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.Gap, { height: textHeight + labelGap }) })), (0, jsx_runtime_1.jsxs)(Align_1.AlignLayout, { horizontal: "center", vertical: "center", children: [(0, jsx_runtime_1.jsx)(HorizontalArrow, { width: width, height: arrowHeight, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: labelGap }), label, desc] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.Gap, { height: textHeight + labelGap }) }))] }) }));
+};
+exports.SimpleHorizontalArrow = SimpleHorizontalArrow;
+const HorizontalArrow = (props) => {
+    const { x = 0, y = 0, width = 100, height = 40, fill = '#1890FF', size = 10, } = props;
+    return ((0, jsx_runtime_1.jsx)(infographic_jsx_1.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 }));
+};
+(0, registry_1.registerItem)('simple-horizontal-arrow', {
+    component: exports.SimpleHorizontalArrow,
+    composites: ['label', 'desc', 'time'],
+});

package/lib/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/lib/designs/items/SimpleIllusItem.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleIllusItem = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const SimpleIllusItem = (props) => {
+    const [{ indexes, datum, width = 180, illusSize = width, gap = 8, themeColors, usePaletteColor = false, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'illusSize', 'gap', 'usePaletteColor']);
+    const { label, desc } = datum;
+    const labelColor = usePaletteColor
+        ? themeColors.colorPrimary
+        : themeColors.colorText;
+    const labelContent = ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "center", fill: labelColor, children: label }));
+    const labelBounds = (0, infographic_jsx_1.getElementBounds)(labelContent);
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { ...restProps, width: width, height: illusSize + gap + labelBounds.height + gap + 48, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: gap, children: [(0, jsx_runtime_1.jsx)(components_1.Illus, { indexes: indexes, width: illusSize, height: illusSize }), labelContent, (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, width: width, alignHorizontal: "center", alignVertical: "top", fill: themeColors.colorTextSecondary, lineNumber: 3, children: desc })] }));
+};
+exports.SimpleIllusItem = SimpleIllusItem;
+(0, registry_1.registerItem)('simple-illus', {
+    component: exports.SimpleIllusItem,
+    composites: ['illus', 'label', 'desc'],
+});