@antv/infographic 0.0.1-beta.1

package/lib/designs/items/CircleNode.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircleNode = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+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 CircleNode = (props) => {
+    const [{ indexes, datum, themeColors, positionH = 'normal', width = 240, height = width, }, restProps,] = (0, utils_1.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 = (0, tinycolor2_1.default)(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 ((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: outerGradientId, ...gradientDirection, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: colorOuterStart }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: colorOuterEnd })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: innerGradientId, ...gradientDirection, children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: colorInnerStart }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: colorInnerEnd })] })] }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { width: size, height: size, fill: `url(#${outerGradientId})` }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: innerCircleOffset, y: innerCircleOffset, width: innerCircleSize, height: innerCircleSize, fill: `url(#${innerGradientId})`, stroke: "#FFFFFF", strokeWidth: 1 }), (0, jsx_runtime_1.jsx)(components_1.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 })] }));
+};
+exports.CircleNode = CircleNode;
+(0, registry_1.registerItem)('circle-node', {
+    component: exports.CircleNode,
+    composites: ['label'],
+});
+function fadeWithWhite(color, mixPct, alpha) {
+    return tinycolor2_1.default.mix(color, '#ffffff', mixPct).setAlpha(alpha).toRgbString();
+}

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircularProgress = 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 CircularProgress = (props) => {
+    const [{ datum, indexes, size = 120, strokeWidth = 12, gap = 8, themeColors, valueFormatter = (value) => `${Math.round(value)}%`, }, restProps,] = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: size, height: size + gap + 20, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: start, y: start, width: d, height: d, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.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})` }), (0, jsx_runtime_1.jsx)(components_1.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 }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorTextSecondary, children: datum.label })] }));
+};
+exports.CircularProgress = CircularProgress;
+(0, registry_1.registerItem)('circular-progress', {
+    component: exports.CircularProgress,
+    composites: ['label', 'value'],
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompactCard = 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 CompactCard = (props) => {
+    const [{ datum, indexes, width = 200, height = 60, iconSize = 20, gap = 8, positionH = 'normal', themeColors, valueFormatter, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height', 'iconSize', 'gap']);
+    const value = datum.value;
+    const hasValue = value !== undefined && value !== null;
+    const shadowId = (0, utils_1.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 ((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.jsx)("filter", { id: shadowId, children: (0, jsx_runtime_1.jsx)("feDropShadow", { dx: "0", dy: "2", stdDeviation: "2", floodOpacity: "0.15" }) }) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorBgElevated, stroke: themeColors.colorBgElevated, strokeWidth: 1, rx: 6, ry: 6, filter: `url(#${shadowId})` }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: positionH === 'flipped' ? width - 3 : 0, y: 0, width: 3, height: height, fill: themeColors.colorPrimary, rx: 1.5, ry: 1.5 }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: iconX, y: (height - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { x: textStartX, y: gap, width: textWidth, height: height - gap * 2, flexDirection: "column", justifyContent: "center", alignItems: "flex-start", children: [(0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { width: textWidth, flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: labelWidth, alignHorizontal: "left", fontSize: 12, fill: themeColors.colorText, children: datum.label }), hasValue && ((0, jsx_runtime_1.jsx)(components_1.ItemValue, { indexes: indexes, width: valueWidth, alignHorizontal: "right", fontSize: 12, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, width: textWidth, alignHorizontal: "left", alignVertical: "center", fontSize: 10, fill: themeColors.colorTextSecondary, lineNumber: 2, wordWrap: true, children: datum.desc })] })] }));
+};
+exports.CompactCard = CompactCard;
+(0, registry_1.registerItem)('compact-card', {
+    component: exports.CompactCard,
+    composites: ['icon', 'label', 'value', 'desc'],
+});

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DoneList = 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 DoneList = (props) => {
+    const [{ datum, indexes, width = 300, height = 30, iconSize = 30, gap = 5, positionH = 'normal', positionV = 'center', themeColors, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height', 'iconSize', 'gap']);
+    const descWidth = width - iconSize - gap;
+    const shapeY = positionV === 'center'
+        ? (height - iconSize) / 2
+        : positionV === 'flipped'
+            ? height - iconSize
+            : 0;
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { id: (0, utils_1.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" }), (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: positionH === 'flipped' ? 0 : iconSize + gap, fontSize: 16, width: descWidth, height: height, alignVertical: "center", wordWrap: false, children: datum.desc })] }));
+};
+exports.DoneList = DoneList;
+(0, registry_1.registerItem)('done-list', {
+    component: exports.DoneList,
+    composites: ['desc'],
+});

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalIconArrow = 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 HorizontalIconArrow = (props) => {
+    const [{ indexes, datum, width = 140, themeColors, positionV = 'normal' }, restProps,] = (0, utils_1.getItemProps)(props, ['width']);
+    const isVNormal = positionV !== 'flipped';
+    const textAlignVertical = positionV === 'normal' ? '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 icon = ((0, jsx_runtime_1.jsx)(components_1.ItemIconCircle, { indexes: indexes, fill: themeColors.colorPrimary, colorBg: themeColors.colorWhite }));
+    const dotLine = ((0, jsx_runtime_1.jsx)(DotLine, { width: 8, height: 30, fill: themeColors.colorPrimary, positionV: positionV }));
+    const dotLineGap = 5;
+    const iconGap = 25;
+    const arrowHeight = 30;
+    const labelBounds = (0, infographic_jsx_1.getElementBounds)(label);
+    const descBounds = (0, infographic_jsx_1.getElementBounds)(desc);
+    const iconBounds = (0, infographic_jsx_1.getElementBounds)(icon);
+    const dotLineBounds = (0, infographic_jsx_1.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 ((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: dotLineGap }), dotLine] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: fixedGap }), icon, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: iconGap })] })), (0, jsx_runtime_1.jsxs)(Align_1.AlignLayout, { horizontal: "center", vertical: "center", children: [(0, jsx_runtime_1.jsx)(VerticalArrow, { 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: [dotLine, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: dotLineGap }), label, desc] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: iconGap }), icon] }))] }) }));
+};
+exports.HorizontalIconArrow = HorizontalIconArrow;
+const VerticalArrow = (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 }));
+};
+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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: x, y: y, width: width, height: height, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { width: width, height: width, fill: fill, y: positionV === 'top' ? 0 : lineLength - r }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: positionV === 'top'
+                    ? `M${lineX},${r} L${lineX},${r + lineLength}`
+                    : `M${lineX},0 L${lineX},${lineLength - r}`, strokeWidth: strokeWidth, stroke: fill })] }));
+};
+(0, registry_1.registerItem)('horizontal-icon-arrow', {
+    component: exports.HorizontalIconArrow,
+    composites: ['icon', 'label', 'desc', 'time'],
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalIconLine = 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 HorizontalIconLine = (props) => {
+    const [{ indexes, datum, width = 160, themeColors, positionH = 'center', positionV = 'normal', }, restProps,] = (0, utils_1.getItemProps)(props, ['width']);
+    const textAlignHorizontal = positionH === 'normal'
+        ? 'left'
+        : positionH === 'flipped'
+            ? 'right'
+            : 'center';
+    const label = ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: width, alignHorizontal: textAlignHorizontal, fill: themeColors.colorPrimary, children: datum.label }));
+    const labelBounds = (0, infographic_jsx_1.getElementBounds)(label);
+    const desc = datum.desc ? ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, width: width, fill: themeColors.colorTextSecondary, alignHorizontal: textAlignHorizontal, alignVertical: positionV === 'flipped' ? 'top' : 'bottom', children: datum.desc })) : null;
+    const descBounds = (0, infographic_jsx_1.getElementBounds)(desc);
+    const iconSize = 45;
+    const icon = datum.icon ? ((0, jsx_runtime_1.jsxs)(layouts_1.AlignLayout, { horizontal: "center", vertical: "center", children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { width: iconSize, height: iconSize, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, width: iconSize * 0.58, height: iconSize * 0.58, fill: themeColors.colorBg })] })) : null;
+    const iconBounds = (0, infographic_jsx_1.getElementBounds)(icon);
+    const time = datum.time ? ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Text, { width: width, height: 30, alignHorizontal: "center", alignVertical: "center", fill: themeColors.colorPrimary, fontSize: 18, fontWeight: "bold", children: datum.time })) : null;
+    const timeBounds = (0, infographic_jsx_1.getElementBounds)(time);
+    const lineHeight = 18;
+    const line = ((0, jsx_runtime_1.jsxs)(layouts_1.AlignLayout, { horizontal: "center", width: width, height: lineHeight, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { width: width, height: lineHeight, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { y: -3, width: lineHeight + 6, height: lineHeight + 6, fill: themeColors.colorBg, fillOpacity: 0.5 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.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 ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { ...restProps, flexDirection: "column", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: bottomBalance }), time, icon, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: 5 }), line, label, desc, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: topBalance })] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { ...restProps, flexDirection: "column", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(components_1.Gap, { height: topBalance }), label, desc, line, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: 5 }), icon, time, (0, jsx_runtime_1.jsx)(components_1.Gap, { height: bottomBalance })] }));
+};
+exports.HorizontalIconLine = HorizontalIconLine;
+(0, registry_1.registerItem)('horizontal-icon-line', {
+    component: exports.HorizontalIconLine,
+    composites: ['icon', 'label', 'desc'],
+});

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconBadge = 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 IconBadge = (props) => {
+    const [{ datum, indexes, size = 80, iconSize = 28, badgeSize = 24, gap = 8, themeColors, width = 84, height = 105, }, restProps,] = (0, utils_1.getItemProps)(props, ['size', 'iconSize', 'badgeSize', 'gap']);
+    const value = datum.value ?? 0;
+    const gradientId = `${themeColors.colorPrimary}-icon`;
+    const badgeGradientId = '#ff6b6b-badge';
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Defs, { children: [(0, jsx_runtime_1.jsxs)("radialGradient", { id: gradientId, cx: "50%", cy: "30%", r: "70%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: (0, tinycolor2_1.default)(themeColors.colorPrimary)
+                                    .lighten(30)
+                                    .toHexString() }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: themeColors.colorPrimary })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: badgeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "#ff6b6b" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "#ee5a52" })] })] }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: 0, y: 0, width: size, height: size, fill: `url(#${gradientId})` }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: (size - iconSize) / 2, y: (size - iconSize) / 2, size: iconSize, fill: themeColors.colorPrimaryText }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: size - badgeSize + 4, y: 0, width: badgeSize, height: badgeSize, fill: `url(#${badgeGradientId})` }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.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) }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: size + gap, width: size, alignHorizontal: "center", fontSize: 12, fill: themeColors.colorText, children: datum.label })] }));
+};
+exports.IconBadge = IconBadge;
+(0, registry_1.registerItem)('icon-badge', {
+    component: exports.IconBadge,
+    composites: ['icon', 'label'],
+});

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

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IndexedCard = 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 infographic_jsx_2 = require("@antv/infographic-jsx");
+// 根据需要选择性导入封装组件
+const components_1 = require("../components");
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+// -----------------------------------------------------------------------------------
+// 2. 组件实现
+// -----------------------------------------------------------------------------------
+const IndexedCard = (props) => {
+    const [{ datum, indexes, width = 200, borderRadius = 12, padding = 16, separatorHeight = 2, indexFontSize = 20, labelFontSize = 16, gap = 8, themeColors, }, restProps,] = (0, utils_1.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 = tinycolor2_1.default
+        .mix(themeColors.colorPrimary, themeColors.colorWhite, 40)
+        .toHexString();
+    const cardBgColor = themeColors.colorBgElevated || themeColors.colorWhite;
+    // 3. 布局计算优化
+    const contentWidth = width - 2 * padding;
+    // 3.1 序号元素尺寸计算
+    const indexBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(infographic_jsx_2.Text, { fontSize: indexFontSize, fontWeight: "bold", children: indexStr }));
+    // 3.2 标签元素尺寸计算（考虑可用宽度）
+    const labelAvailableWidth = contentWidth - indexBounds.width - gap;
+    const labelBounds = showLabel
+        ? (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: labelAvailableWidth, fontSize: labelFontSize, fontWeight: "bold", x: indexFontSize, children: datum.label }))
+        : { width: 0, height: 0 };
+    // 3.3 描述元素尺寸计算
+    const descBounds = showDesc
+        ? (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: width, height: contentHeight, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_2.Rect, { x: 0, y: 0, width: width, height: contentHeight, rx: borderRadius, ry: borderRadius, fill: cardBgColor, stroke: (0, tinycolor2_1.default)(cardBgColor).darken(5).toHexString(), strokeWidth: 0.5 }), (0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: padding, y: padding, children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { x: 0, y: 0, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_2.Text, { x: 0, y: 0, fontSize: indexFontSize, fontWeight: "bold", fill: themeColors.colorPrimary, alignVertical: "top", children: indexStr }), showLabel && ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: indexFontSize + gap, y: 0, width: labelAvailableWidth, fontSize: labelFontSize, fontWeight: "bold", fill: themeColors.colorTextSecondary, alignVertical: "top", children: datum.label }))] }), (0, jsx_runtime_1.jsx)(infographic_jsx_2.Rect, { x: 0, y: titleRowHeight + gap, width: contentWidth, height: separatorHeight, fill: separatorColor }), showDesc && ((0, jsx_runtime_1.jsx)(components_1.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 }))] })] }));
+};
+exports.IndexedCard = IndexedCard;
+(0, registry_1.registerItem)('indexed-card', {
+    component: exports.IndexedCard,
+    composites: ['label', 'desc'],
+});

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LCornerCard = 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 LCornerCard = (props) => {
+    const [{ indexes, datum, width = 140, iconSize = 24, themeColors }, restProps,] = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: descX, width: descWidth, height: descHeight, fontSize: 12, alignHorizontal: "left", alignVertical: "bottom", fill: themeColors.colorTextSecondary, children: desc }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Polygon, { points: arrowVertices, fill: themeColors.colorPrimary, opacity: 0.9, width: arrowSize, height: arrowSize }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { d: d, stroke: themeColors.colorPrimary, strokeWidth: lStroke, fill: "none" }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: x1 + innerWidth / 2 - iconSize / 2, y: y1 + gap, size: iconSize, fill: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(components_1.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 })] }));
+};
+exports.LCornerCard = LCornerCard;
+(0, registry_1.registerItem)('l-corner-card', {
+    component: exports.LCornerCard,
+    composites: ['icon', 'label', 'desc'],
+});

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LetterCard = 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 LetterCard = (props) => {
+    const [{ datum, indexes, width = 280, height = 160, showStripe = true, showGradient = true, showBottomShade = true, themeColors, }, restProps,] = (0, utils_1.getItemProps)(props, [
+        'width',
+        'height',
+        'showStripe',
+        'showGradient',
+        'showBottomShade',
+    ]);
+    const displayLetter = datum.label?.[0].toUpperCase();
+    const displayTitle = datum.label?.toUpperCase();
+    const baseColor = themeColors.colorPrimary;
+    const base = (0, tinycolor2_1.default)(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 ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsxs)(infographic_jsx_1.Defs, { children: [showGradient && ((0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: gradStart }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: gradEnd })] })), showStripe && ((0, jsx_runtime_1.jsxs)("pattern", { id: patternId, patternUnits: "userSpaceOnUse", width: tile, height: tile, patternTransform: `rotate(${rotationDeg})`, children: [(0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: tile, height: tile, fill: lightStripe }), (0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: stripeWidth, height: tile, fill: darkStripe })] })), showBottomShade && ((0, jsx_runtime_1.jsxs)("linearGradient", { id: shadeId, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(0,0,0,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(0,0,0,0.16)" })] }))] }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: showGradient ? `url(#${gradientId})` : baseColor, rx: 0, ry: 0 }), showStripe && ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: `url(#${patternId})`, rx: 0, ry: 0 })), showBottomShade && ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: height - bottomShadeHeight, width: width, height: bottomShadeHeight, fill: `url(#${shadeId})`, rx: 0, ry: 0 })), displayLetter && ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: letterY, width: width, fontSize: letterFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "top", lineHeight: 1, children: displayLetter })), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 0, y: titleY, width: width, fontSize: titleFontSize, fontWeight: "bold", fill: "#FFFFFF", alignHorizontal: "center", alignVertical: "center", lineHeight: 1, children: displayTitle })] }));
+};
+exports.LetterCard = LetterCard;
+(0, registry_1.registerItem)('letter-card', {
+    component: exports.LetterCard,
+    composites: ['label'],
+});

package/lib/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>;