@antv/infographic 0.0.1-beta.1

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

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

package/esm/designs/items/CandyCardLite.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Group, Path } from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemId, getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const CandyCardLite = (props) => {
+    const [{ indexes, datum, width = 280, height = 140, themeColors }, restProps,] = getItemProps(props, ['width', 'height']);
+    return (_jsxs(Group, { ...restProps, children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, rx: 18, ry: 18, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary }), _jsx(Path, { x: width - 85, y: 0.5, width: 85, height: 65, id: getItemId(indexes, 'static', 'decoration'), d: "M0.496704 0H61.7558C74.0725 0 84.0571 9.99394 84.0571 22.3221V60.1302L78.4401 62.9458C64.9296 68.1198 49.0492 65.0802 38.3968 53.9843L10.7444 25.1801C5.41799 19.6306 2.15489 12.855 0.935998 5.80383L0.496704 0Z", fill: "white" }), _jsx(ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "center", fill: themeColors.colorText, children: datum.label }), _jsx(ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), _jsx(ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
+};
+registerItem('candy-card-lite', {
+    component: CandyCardLite,
+    composites: ['icon', 'label', 'desc'],
+});

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

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

package/esm/designs/items/CapsuleItem.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, Ellipse, getElementBounds, Group, Rect, } from '@antv/infographic-jsx';
+import { ItemDesc, ItemIconCircle, ItemLabel } from '../components';
+import { DropShadow } from '../defs';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const CapsuleItem = (props) => {
+    const [{ datum, indexes, width = 300, height = 80, gap = 12, positionH = 'normal', iconPadding = height / 10, themeColors, }, restProps,] = getItemProps(props, ['width', 'height', 'gap', 'iconPadding']);
+    // Capsule border radius and icon size (icon with some padding inside)
+    const borderRadius = height / 2;
+    const iconSize = height - iconPadding * 2; // Icon diameter with padding
+    // Calculate positions based on positionH and icon presence
+    const isFlipped = positionH === 'flipped';
+    const hasIcon = !!datum.icon;
+    // Calculate text area dimensions
+    const textWidth = hasIcon ? width - height - gap : width - gap * 2;
+    const textX = hasIcon ? (isFlipped ? gap : height) : gap;
+    const textAlign = hasIcon ? (isFlipped ? 'right' : 'left') : 'center';
+    const labelProps = {
+        indexes,
+        width: textWidth,
+        alignHorizontal: textAlign,
+        alignVertical: 'center',
+        fontSize: 16,
+        fontWeight: '600',
+        fill: themeColors.colorWhite,
+    };
+    // Get label bounds to calculate layout
+    const labelBounds = getElementBounds(_jsx(ItemLabel, { ...labelProps, children: datum.label }));
+    const descProps = {
+        indexes,
+        width: textWidth,
+        alignHorizontal: textAlign,
+        alignVertical: 'top',
+        fontSize: 12,
+        lineNumber: 1,
+        fill: themeColors.colorWhite,
+    };
+    // Get desc bounds to calculate layout
+    const descBounds = getElementBounds(datum.desc ? _jsx(ItemDesc, { ...descProps, children: datum.desc }) : null);
+    // Calculate vertical positions for text elements
+    const textGap = 4;
+    const totalTextHeight = labelBounds.height + textGap + descBounds.height;
+    const textStartY = (height - totalTextHeight) / 2;
+    const labelY = textStartY;
+    const descY = labelY + labelBounds.height + textGap;
+    // Calculate icon position (centered in the circle area with padding)
+    const iconX = isFlipped ? width - height + iconPadding : iconPadding;
+    const iconY = iconPadding;
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Defs, { children: _jsx(DropShadow, {}) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary, rx: borderRadius, ry: borderRadius }), datum.icon && (_jsxs(_Fragment, { children: [_jsx(Ellipse, { x: iconX, y: iconY, width: iconSize, height: iconSize, fillOpacity: 0.5, filter: "url(#drop-shadow)" }), _jsx(ItemIconCircle, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg, colorBg: themeColors.colorPrimary })] })), datum.label && (_jsx(ItemLabel, { x: textX, y: labelY, ...labelProps, children: datum.label })), datum.desc && (_jsx(ItemDesc, { x: textX, y: descY, ...descProps, children: datum.desc }))] }));
+};
+registerItem('capsule-item', {
+    component: CapsuleItem,
+    composites: ['icon', 'label', 'desc'],
+});

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

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

package/esm/designs/items/CircleNode.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Defs, Ellipse, Group } from '@antv/infographic-jsx';
+import tinycolor from 'tinycolor2';
+import { ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const CircleNode = (props) => {
+    const [{ indexes, datum, themeColors, positionH = 'normal', width = 240, height = width, }, restProps,] = getItemProps(props, ['width', 'height']);
+    const size = Math.min(width, height);
+    const innerCircleSize = size * 0.7;
+    const innerCircleOffset = (size - innerCircleSize) / 2;
+    const labelSize = (innerCircleSize * Math.sqrt(2)) / 2;
+    const labelOffset = (size - labelSize) / 2;
+    const base = tinycolor(themeColors.colorPrimary);
+    const colorOuterStart = fadeWithWhite(base, 80, 0.2);
+    const colorOuterEnd = fadeWithWhite(base, 20, 0.8);
+    const colorInnerStart = fadeWithWhite(base, 75, 0.32);
+    const colorInnerEnd = fadeWithWhite(base, 45, 0.4);
+    const colorText = base.clone().darken(5).toRgbString();
+    const outerGradientId = `${themeColors.colorPrimary}-${positionH}-outer`;
+    const innerGradientId = `${themeColors.colorPrimary}-${positionH}-inner`;
+    const gradientDirection = positionH === 'flipped'
+        ? { x1: '0%', y1: '0%', x2: '100%', y2: '0%' }
+        : { x1: '100%', y1: '0%', x2: '0%', y2: '0%' };
+    return (_jsxs(Group, { ...restProps, children: [_jsxs(Defs, { children: [_jsxs("linearGradient", { id: outerGradientId, ...gradientDirection, children: [_jsx("stop", { offset: "0%", stopColor: colorOuterStart }), _jsx("stop", { offset: "100%", stopColor: colorOuterEnd })] }), _jsxs("linearGradient", { id: innerGradientId, ...gradientDirection, children: [_jsx("stop", { offset: "0%", stopColor: colorInnerStart }), _jsx("stop", { offset: "100%", stopColor: colorInnerEnd })] })] }), _jsx(Ellipse, { width: size, height: size, fill: `url(#${outerGradientId})` }), _jsx(Ellipse, { x: innerCircleOffset, y: innerCircleOffset, width: innerCircleSize, height: innerCircleSize, fill: `url(#${innerGradientId})`, stroke: "#FFFFFF", strokeWidth: 1 }), _jsx(ItemLabel, { indexes: indexes, x: labelOffset, y: labelOffset, width: labelSize, height: labelSize, lineHeight: 1.1, alignHorizontal: "center", alignVertical: "center", fill: colorText, fontWeight: "500", children: datum.label })] }));
+};
+registerItem('circle-node', {
+    component: CircleNode,
+    composites: ['label'],
+});
+function fadeWithWhite(color, mixPct, alpha) {
+    return tinycolor.mix(color, '#ffffff', mixPct).setAlpha(alpha).toRgbString();
+}

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

@@ -0,0 +1,9 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface CircularProgressProps extends BaseItemProps {
+    size?: number;
+    strokeWidth?: number;
+    gap?: number;
+}
+export declare const CircularProgress: ComponentType<CircularProgressProps>;

package/esm/designs/items/CircularProgress.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Ellipse, Group } from '@antv/infographic-jsx';
+import { ItemLabel, ItemValue } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const CircularProgress = (props) => {
+    const [{ datum, indexes, size = 120, strokeWidth = 12, gap = 8, themeColors, valueFormatter = (value) => `${Math.round(value)}%`, }, restProps,] = getItemProps(props, ['size', 'strokeWidth', 'gap']);
+    const value = datum.value ?? 0;
+    const maxValue = 100;
+    const percentage = Math.min(Math.max(value / maxValue, 0), 1);
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDasharray = circumference;
+    const strokeDashoffset = circumference * (1 - percentage);
+    const center = size / 2;
+    const start = strokeWidth / 2;
+    const d = size - strokeWidth;
+    return (_jsxs(Group, { ...restProps, width: size, height: size + gap + 20, children: [_jsx(Ellipse, { x: start, y: start, width: d, height: d, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth }), _jsx(Ellipse, { x: start, y: start, width: d, height: d, fill: "none", stroke: themeColors.colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, transform: `rotate(-90 ${center} ${center})` }), _jsx(ItemValue, { indexes: indexes, x: strokeWidth, y: strokeWidth, width: d - strokeWidth, height: d - strokeWidth, fontSize: 24, fontWeight: "bold", fill: themeColors.colorPrimary, alignHorizontal: "center", alignVertical: "center", value: value, formatter: valueFormatter }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
+};
+registerItem('circular-progress', {
+    component: CircularProgress,
+    composites: ['label', 'value'],
+});

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

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

package/esm/designs/items/CompactCard.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, Rect } from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel, ItemValue } from '../components';
+import { FlexLayout } from '../layouts';
+import { getItemId, getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const CompactCard = (props) => {
+    const [{ datum, indexes, width = 200, height = 60, iconSize = 20, gap = 8, positionH = 'normal', themeColors, valueFormatter, }, restProps,] = getItemProps(props, ['width', 'height', 'iconSize', 'gap']);
+    const value = datum.value;
+    const hasValue = value !== undefined && value !== null;
+    const shadowId = getItemId(indexes, 'def', 'compact-shadow');
+    const iconX = positionH === 'flipped' ? width - gap - iconSize : gap;
+    const textStartX = positionH === 'flipped' ? gap : iconSize + 2 * gap;
+    const textWidth = width - iconSize - 3 * gap;
+    // 为 Label 和 Value 分配空间
+    const labelWidth = hasValue ? textWidth * 0.8 : textWidth;
+    const valueWidth = hasValue ? textWidth * 0.2 : 0;
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Defs, { children: _jsx("filter", { id: shadowId, children: _jsx("feDropShadow", { dx: "0", dy: "2", stdDeviation: "2", floodOpacity: "0.15" }) }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorBgElevated, strokeWidth: 1, rx: 6, ry: 6, filter: `url(#${shadowId})` }), _jsx(Rect, { x: positionH === 'flipped' ? width - 3 : 0, y: 0, width: 3, height: height, fill: themeColors.colorPrimary, rx: 1.5, ry: 1.5 }), _jsx(ItemIcon, { indexes: indexes, x: iconX, y: (height - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimary }), _jsxs(FlexLayout, { x: textStartX, y: gap, width: textWidth, height: height - gap * 2, flexDirection: "column", justifyContent: "center", alignItems: "flex-start", children: [_jsxs(FlexLayout, { width: textWidth, flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: labelWidth, alignHorizontal: "left", fontSize: 12, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: valueWidth, alignHorizontal: "right", fontSize: 12, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), _jsx(ItemDesc, { indexes: indexes, width: textWidth, alignHorizontal: "left", alignVertical: "center", fontSize: 10, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc })] })] }));
+};
+registerItem('compact-card', {
+    component: CompactCard,
+    composites: ['icon', 'label', 'value', 'desc'],
+});

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

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

package/esm/designs/items/DoneList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Group, Path } from '@antv/infographic-jsx';
+import { ItemDesc } from '../components';
+import { getItemId, getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const DoneList = (props) => {
+    const [{ datum, indexes, width = 300, height = 30, iconSize = 30, gap = 5, positionH = 'normal', positionV = 'center', themeColors, }, restProps,] = getItemProps(props, ['width', 'height', 'iconSize', 'gap']);
+    const descWidth = width - iconSize - gap;
+    const shapeY = positionV === 'center'
+        ? (height - iconSize) / 2
+        : positionV === 'flipped'
+            ? height - iconSize
+            : 0;
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Path, { id: getItemId(indexes, 'shape', 'done-icon'), x: positionH === 'flipped' ? descWidth + gap : 0, y: shapeY, fill: themeColors.colorPrimary, width: iconSize, height: iconSize, d: "M14.7273 30C6.54538 30 0 22.9077 0 14.7269C0 6.54617 6.54538 0 14.7273 0C22.9092 0 30 6.54617 30 14.7269C30 22.9077 22.9092 30 14.7273 30ZM24.5454 10.9077C22.9092 9.27307 22.9092 9.27307 22.9092 9.27307C22.3638 8.72692 22.3638 8.7269 21.8181 8.7269C21.2727 8.7269 21.2727 8.72692 20.7273 9.27307C13.0908 16.9077 13.0908 16.9077 13.0908 16.9077C8.72731 12.5461 8.72731 12.5462 8.72731 12.5462C8.18193 12.5462 8.18193 12 7.63654 12L7.09077 12.5462C4.90923 14.1808 4.90923 14.1808 4.90923 14.1808C4.90923 14.7269 4.90923 14.7269 4.90923 15.2731C4.90923 15.8192 4.90923 15.8192 4.90923 16.3654C12 23.4539 12 23.4538 12 23.4538C12.5454 23.4538 12.5454 23.4538 13.0908 23.4538C13.6365 23.4538 13.6365 23.4538 14.1819 23.4538C24.5454 12.5461 24.5454 12.5462 24.5454 12.5462L25.0908 12C25.0908 11.4538 24.5454 10.9077 24.5454 10.9077Z" }), _jsx(ItemDesc, { indexes: indexes, x: positionH === 'flipped' ? 0 : iconSize + gap, fontSize: 16, width: descWidth, height: height, alignVertical: "center", wordWrap: false, children: datum.desc })] }));
+};
+registerItem('done-list', {
+    component: DoneList,
+    composites: ['desc'],
+});

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

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

package/esm/designs/items/HorizontalIconArrow.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Ellipse, getElementBounds, Group, Path, Polygon, Text, } from '@antv/infographic-jsx';
+import { Gap, ItemDesc, ItemIconCircle, ItemLabel } from '../components';
+import { FlexLayout } from '../layouts';
+import { AlignLayout } from '../layouts/Align';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const HorizontalIconArrow = (props) => {
+    const [{ indexes, datum, width = 140, themeColors, positionV = 'normal' }, restProps,] = getItemProps(props, ['width']);
+    const isVNormal = positionV !== 'flipped';
+    const textAlignVertical = positionV === 'normal' ? '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 icon = (_jsx(ItemIconCircle, { indexes: indexes, fill: themeColors.colorPrimary, colorBg: themeColors.colorWhite }));
+    const dotLine = (_jsx(DotLine, { width: 8, height: 30, fill: themeColors.colorPrimary, positionV: positionV }));
+    const dotLineGap = 5;
+    const iconGap = 25;
+    const arrowHeight = 30;
+    const labelBounds = getElementBounds(label);
+    const descBounds = getElementBounds(desc);
+    const iconBounds = getElementBounds(icon);
+    const dotLineBounds = getElementBounds(dotLine);
+    const fixedGap = labelBounds.height +
+        descBounds.height +
+        dotLineGap +
+        dotLineBounds.height -
+        iconBounds.height -
+        iconGap;
+    const totalHeight = iconBounds.height +
+        iconGap +
+        arrowHeight +
+        dotLineBounds.height +
+        dotLineGap +
+        labelBounds.height +
+        descBounds.height;
+    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: dotLineGap }), dotLine] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: fixedGap }), icon, _jsx(Gap, { height: iconGap })] })), _jsxs(AlignLayout, { horizontal: "center", vertical: "center", children: [_jsx(VerticalArrow, { 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: [dotLine, _jsx(Gap, { height: dotLineGap }), label, desc] })) : (_jsxs(_Fragment, { children: [_jsx(Gap, { height: iconGap }), icon] }))] }) }));
+};
+const VerticalArrow = (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 }));
+};
+const DotLine = (props) => {
+    const { x = 0, y = 0, width = 10, height = 50, fill, positionV = 'top', } = props;
+    const r = width / 2;
+    const lineLength = height - r;
+    const strokeWidth = 2;
+    const lineX = r;
+    return (_jsxs(Group, { x: x, y: y, width: width, height: height, children: [_jsx(Ellipse, { width: width, height: width, fill: fill, y: positionV === 'top' ? 0 : lineLength - r }), _jsx(Path, { d: positionV === 'top'
+                    ? `M${lineX},${r} L${lineX},${r + lineLength}`
+                    : `M${lineX},0 L${lineX},${lineLength - r}`, strokeWidth: strokeWidth, stroke: fill })] }));
+};
+registerItem('horizontal-icon-arrow', {
+    component: HorizontalIconArrow,
+    composites: ['icon', 'label', 'desc', 'time'],
+});

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

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

package/esm/designs/items/HorizontalIconLine.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Ellipse, getElementBounds, Rect, Text, } from '@antv/infographic-jsx';
+import { Gap, ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { AlignLayout, FlexLayout } from '../layouts';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const HorizontalIconLine = (props) => {
+    const [{ indexes, datum, width = 160, themeColors, positionH = 'center', positionV = 'normal', }, restProps,] = getItemProps(props, ['width']);
+    const textAlignHorizontal = positionH === 'normal'
+        ? 'left'
+        : positionH === 'flipped'
+            ? 'right'
+            : 'center';
+    const label = (_jsx(ItemLabel, { indexes: indexes, width: width, alignHorizontal: textAlignHorizontal, fill: themeColors.colorPrimary, children: datum.label }));
+    const labelBounds = getElementBounds(label);
+    const desc = datum.desc ? (_jsx(ItemDesc, { indexes: indexes, width: width, fill: themeColors.colorTextSecondary, alignHorizontal: textAlignHorizontal, alignVertical: positionV === 'flipped' ? 'top' : 'bottom', children: datum.desc })) : null;
+    const descBounds = getElementBounds(desc);
+    const iconSize = 45;
+    const icon = datum.icon ? (_jsxs(AlignLayout, { horizontal: "center", vertical: "center", children: [_jsx(Ellipse, { width: iconSize, height: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemIcon, { indexes: indexes, width: iconSize * 0.58, height: iconSize * 0.58, fill: themeColors.colorBg })] })) : null;
+    const iconBounds = getElementBounds(icon);
+    const time = datum.time ? (_jsx(Text, { width: width, height: 30, alignHorizontal: "center", alignVertical: "center", fill: themeColors.colorPrimary, fontSize: 18, fontWeight: "bold", children: datum.time })) : null;
+    const timeBounds = getElementBounds(time);
+    const lineHeight = 18;
+    const line = (_jsxs(AlignLayout, { horizontal: "center", width: width, height: lineHeight, children: [_jsx(Rect, { width: width, height: lineHeight, fill: themeColors.colorPrimary }), _jsx(Ellipse, { y: -3, width: lineHeight + 6, height: lineHeight + 6, fill: themeColors.colorBg, fillOpacity: 0.5 }), _jsx(Ellipse, { y: (lineHeight - 12) / 2, width: 12, height: 12, fill: "white" })] }));
+    const textSideHeight = labelBounds.height + descBounds.height;
+    const iconSideHeight = iconBounds.height + timeBounds.height + 5;
+    // 平衡line两侧高度，使 line 位于垂直居中位置
+    const heightDiff = Math.abs(iconSideHeight - textSideHeight);
+    const topBalance = iconSideHeight > textSideHeight ? heightDiff : 0;
+    const bottomBalance = textSideHeight > iconSideHeight ? heightDiff : 0;
+    if (positionV === 'flipped') {
+        return (_jsxs(FlexLayout, { ...restProps, flexDirection: "column", alignItems: "center", children: [_jsx(Gap, { height: bottomBalance }), time, icon, _jsx(Gap, { height: 5 }), line, label, desc, _jsx(Gap, { height: topBalance })] }));
+    }
+    return (_jsxs(FlexLayout, { ...restProps, flexDirection: "column", alignItems: "center", children: [_jsx(Gap, { height: topBalance }), label, desc, line, _jsx(Gap, { height: 5 }), icon, time, _jsx(Gap, { height: bottomBalance })] }));
+};
+registerItem('horizontal-icon-line', {
+    component: HorizontalIconLine,
+    composites: ['icon', 'label', 'desc'],
+});

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

@@ -0,0 +1,10 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface IconBadgeProps extends BaseItemProps {
+    size?: number;
+    iconSize?: number;
+    badgeSize?: number;
+    gap?: number;
+}
+export declare const IconBadge: ComponentType<IconBadgeProps>;

package/esm/designs/items/IconBadge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, Ellipse, Group, Text, } from '@antv/infographic-jsx';
+import tinycolor from 'tinycolor2';
+import { ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const IconBadge = (props) => {
+    const [{ datum, indexes, size = 80, iconSize = 28, badgeSize = 24, gap = 8, themeColors, width = 84, height = 105, }, restProps,] = getItemProps(props, ['size', 'iconSize', 'badgeSize', 'gap']);
+    const value = datum.value ?? 0;
+    const gradientId = `${themeColors.colorPrimary}-icon`;
+    const badgeGradientId = '#ff6b6b-badge';
+    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(Defs, { children: [_jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "30%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: tinycolor(themeColors.colorPrimary)
+                                    .lighten(30)
+                                    .toHexString() }), _jsx("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), _jsxs("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "#ff6b6b" }), _jsx("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), _jsx(Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})` }), _jsx(ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), _jsx(Ellipse, { x: size - badgeSize + 4, y: 0, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), _jsx(Text, { x: size - badgeSize / 2 + 4, y: badgeSize / 2, fontSize: 10, fontWeight: "bold", fill: themeColors.colorWhite, alignHorizontal: "center", alignVertical: "center", children: value > 99 ? '99+' : Math.round(value) }), _jsx(ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
+};
+registerItem('icon-badge', {
+    component: IconBadge,
+    composites: ['icon', 'label'],
+});

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

@@ -0,0 +1,20 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface IndexedCardProps extends BaseItemProps {
+    /** 卡片宽度 */
+    width?: number;
+    /** 卡片圆角半径 */
+    borderRadius?: number;
+    /** 内部边距 */
+    padding?: number;
+    /** 标题分隔线高度 */
+    separatorHeight?: number;
+    /** 序号字体大小 */
+    indexFontSize?: number;
+    /** 标签字体大小 */
+    labelFontSize?: number;
+    /** 元素间距 */
+    gap?: number;
+}
+export declare const IndexedCard: ComponentType<IndexedCardProps>;

package/esm/designs/items/IndexedCard.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+// 根据需要选择性导入原子组件和类型
+import { Rect, Text } from '@antv/infographic-jsx';
+// 根据需要选择性导入封装组件
+import { ItemDesc, ItemLabel } from '../components';
+import tinycolor from 'tinycolor2';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+// -----------------------------------------------------------------------------------
+// 2. 组件实现
+// -----------------------------------------------------------------------------------
+export const IndexedCard = (props) => {
+    const [{ datum, indexes, width = 200, borderRadius = 12, padding = 16, separatorHeight = 2, indexFontSize = 20, labelFontSize = 16, gap = 8, themeColors, }, restProps,] = getItemProps(props, [
+        'width',
+        'height',
+        'borderRadius',
+        'padding',
+        'separatorHeight',
+        'indexFontSize',
+        'labelFontSize',
+        'gap',
+    ]);
+    // 1. 数据处理
+    const indexNumber = indexes[0] + 1;
+    const indexStr = String(indexNumber).padStart(2, '0');
+    const showLabel = datum.label !== undefined;
+    const showDesc = datum.desc !== undefined;
+    // 2. 颜色计算
+    const separatorColor = tinycolor
+        .mix(themeColors.colorPrimary, themeColors.colorWhite, 40)
+        .toHexString();
+    const cardBgColor = themeColors.colorBgElevated || themeColors.colorWhite;
+    // 3. 布局计算优化
+    const contentWidth = width - 2 * padding;
+    // 3.1 序号元素尺寸计算
+    const indexBounds = getElementBounds(_jsx(Text, { fontSize: indexFontSize, fontWeight: "bold", children: indexStr }));
+    // 3.2 标签元素尺寸计算（考虑可用宽度）
+    const labelAvailableWidth = contentWidth - indexBounds.width - gap;
+    const labelBounds = showLabel
+        ? getElementBounds(_jsx(ItemLabel, { indexes: indexes, width: labelAvailableWidth, fontSize: labelFontSize, fontWeight: "bold", x: indexFontSize, children: datum.label }))
+        : { width: 0, height: 0 };
+    // 3.3 描述元素尺寸计算
+    const descBounds = showDesc
+        ? getElementBounds(_jsx(ItemDesc, { indexes: indexes, width: contentWidth, fontSize: 14, lineHeight: 1.5, wordWrap: true, children: datum.desc }))
+        : { width: 0, height: 0 };
+    // 3.4 动态内容高度计算
+    const titleRowHeight = Math.max(indexBounds.height, labelBounds.height);
+    const contentHeight = padding * 2 + // 上下内边距
+        titleRowHeight + // 标题行高度
+        (showLabel || showDesc ? gap : 0) + // 标题后间距
+        separatorHeight + // 分隔线高度
+        (showDesc ? gap : 0) + // 分隔线后间距
+        descBounds.height; // 描述高度
+    // 4. 组件结构
+    return (_jsxs(Group, { ...restProps, width: width, height: contentHeight, children: [_jsx(Rect, { x: 0, y: 0, width: width, height: contentHeight, rx: borderRadius, ry: borderRadius, fill: cardBgColor, stroke: tinycolor(cardBgColor).darken(5).toHexString(), strokeWidth: 0.5 }), _jsxs(Group, { x: padding, y: padding, children: [_jsxs(Group, { x: 0, y: 0, children: [_jsx(Text, { x: 0, y: 0, fontSize: indexFontSize, fontWeight: "bold", fill: themeColors.colorPrimary, alignVertical: "top", children: indexStr }), showLabel && (_jsx(ItemLabel, { indexes: indexes, x: indexFontSize + gap, y: 0, width: labelAvailableWidth, fontSize: labelFontSize, fontWeight: "bold", fill: themeColors.colorTextSecondary, alignVertical: "top", children: datum.label }))] }), _jsx(Rect, { x: 0, y: titleRowHeight + gap, width: contentWidth, height: separatorHeight, fill: separatorColor }), showDesc && (_jsx(ItemDesc, { indexes: indexes, x: 0, y: titleRowHeight + gap + separatorHeight + gap, width: contentWidth, fontSize: 14, lineHeight: 1.5, wordWrap: true, fill: themeColors.colorTextSecondary, children: datum.desc }))] })] }));
+};
+registerItem('indexed-card', {
+    component: IndexedCard,
+    composites: ['label', 'desc'],
+});

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

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

package/esm/designs/items/LCornerCard.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Group, Path, Polygon } from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const LCornerCard = (props) => {
+    const [{ indexes, datum, width = 140, iconSize = 24, themeColors }, restProps,] = getItemProps(props, ['width', 'iconSize']);
+    const { label, desc } = datum;
+    const lStroke = 8;
+    const arrowSize = 16;
+    const arrowGap = 12;
+    const descX = arrowSize + arrowGap;
+    const descWidth = width - descX;
+    const descHeight = 60;
+    const verticalLen = iconSize + 44;
+    const arrowX1 = arrowSize;
+    const arrowY1 = descHeight + arrowGap;
+    const arrowY2 = descHeight + arrowSize + arrowGap;
+    const arrowVertices = [
+        { x: 0, y: arrowY2 },
+        { x: arrowX1, y: arrowY1 },
+        { x: arrowX1, y: arrowY2 },
+    ];
+    const innerWidth = width - arrowX1 - arrowGap;
+    const lx1 = arrowX1 + arrowGap;
+    const lx2 = lx1 + innerWidth;
+    const ly1 = arrowY1 + lStroke / 2;
+    const ly2 = ly1 + verticalLen;
+    const d = `M ${lx1} ${ly2} L ${lx1} ${ly1} L ${lx2} ${ly1}`;
+    const halfStroke = lStroke / 2;
+    const x1 = lx1 + halfStroke;
+    const y1 = ly1 + halfStroke;
+    const gap = 8;
+    return (_jsxs(Group, { ...restProps, children: [_jsx(ItemDesc, { indexes: indexes, x: descX, width: descWidth, height: descHeight, fontSize: 12, alignHorizontal: "left", alignVertical: "bottom", fill: themeColors.colorTextSecondary, children: desc }), _jsx(Polygon, { points: arrowVertices, fill: themeColors.colorPrimary, opacity: 0.9, width: arrowSize, height: arrowSize }), _jsx(Path, { d: d, stroke: themeColors.colorPrimary, strokeWidth: lStroke, fill: "none" }), _jsx(ItemIcon, { indexes: indexes, x: x1 + innerWidth / 2 - iconSize / 2, y: y1 + gap, size: iconSize, fill: themeColors.colorPrimary }), _jsx(ItemLabel, { indexes: indexes, x: x1, y: y1 + iconSize + gap * 2, width: innerWidth, fontSize: 14, fontWeight: "bold", alignHorizontal: "center", alignVertical: "center", fill: themeColors.colorText, children: label })] }));
+};
+registerItem('l-corner-card', {
+    component: LCornerCard,
+    composites: ['icon', 'label', 'desc'],
+});

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

@@ -0,0 +1,16 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface LetterCardProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    showStripe?: boolean;
+    showGradient?: boolean;
+    showBottomShade?: boolean;
+}
+/**
+ * 字母卡片组件
+ * 用于显示大字母和标题
+ * 支持渐变背景、斜纹和底部阴影效果
+ */
+export declare const LetterCard: ComponentType<LetterCardProps>;

package/esm/designs/items/LetterCard.js

@@ -0,0 +1,54 @@
+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 tinycolor from 'tinycolor2';
+import { ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+/**
+ * 字母卡片组件
+ * 用于显示大字母和标题
+ * 支持渐变背景、斜纹和底部阴影效果
+ */
+export const LetterCard = (props) => {
+    const [{ datum, indexes, width = 280, height = 160, showStripe = true, showGradient = true, showBottomShade = true, themeColors, }, restProps,] = getItemProps(props, [
+        'width',
+        'height',
+        'showStripe',
+        'showGradient',
+        'showBottomShade',
+    ]);
+    const displayLetter = datum.label?.[0].toUpperCase();
+    const displayTitle = datum.label?.toUpperCase();
+    const baseColor = themeColors.colorPrimary;
+    const base = tinycolor(baseColor);
+    const stripeWidth = 4;
+    const gapWidth = 6;
+    const rotationDeg = 45;
+    const bottomShadeHeight = 40;
+    const gradientLighten = 12;
+    const gradientDarken = 4;
+    const gradStart = base.clone().darken(gradientDarken).toHexString();
+    const gradEnd = base.clone().lighten(gradientLighten).toHexString();
+    const lightStripe = 'rgba(255, 255, 255, 0)';
+    const darkStripe = 'rgba(0, 0, 0, 0.03)';
+    const uniqueId = `letter-card-${indexes.join('-')}`;
+    const gradientId = `${uniqueId}-gradient`;
+    const patternId = `${uniqueId}-pattern`;
+    const shadeId = `${uniqueId}-shade`;
+    const tile = stripeWidth + gapWidth;
+    const ratio = 1;
+    const letterFontSize = 96;
+    const letterHeight = letterFontSize * ratio;
+    const titleFontSize = 16;
+    const titleHeight = titleFontSize * ratio;
+    const textGap = height / 16;
+    const textTotalHeight = letterHeight + textGap + titleHeight;
+    const letterY = (height - textTotalHeight) / 2;
+    const titleY = letterY + letterHeight + textGap;
+    return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsxs(Defs, { children: [showGradient && (_jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: gradStart }), _jsx("stop", { offset: "100%", stopColor: gradEnd })] })), showStripe && (_jsxs("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, patternTransform: `rotate(${rotationDeg})`, children: [_jsx("rect", { x: "0", y: "0", width: tile, height: tile, fill: lightStripe }), _jsx("rect", { x: "0", y: "0", width: stripeWidth, height: tile, fill: darkStripe })] })), showBottomShade && (_jsxs("linearGradient", { id: shadeId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(0,0,0,0)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(0,0,0,0.16)" })] }))] }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: showGradient ? `url(#${gradientId})` : baseColor, rx: 0, ry: 0 }), showStripe && (_jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: `url(#${patternId})`, rx: 0, ry: 0 })), showBottomShade && (_jsx(Rect, { x: 0, y: height - bottomShadeHeight, width: width, height: bottomShadeHeight, fill: `url(#${shadeId})`, rx: 0, ry: 0 })), displayLetter && (_jsx(ItemLabel, { indexes: indexes, x: 0, y: letterY, width: width, fontSize: letterFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "top", lineHeight: 1, children: displayLetter })), _jsx(ItemLabel, { indexes: indexes, x: 0, y: titleY, width: width, fontSize: titleFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "center", lineHeight: 1, children: displayTitle })] }));
+};
+registerItem('letter-card', {
+    component: LetterCard,
+    composites: ['label'],
+});