@antv/infographic 0.0.1-beta.1 → 0.0.1-beta.2

package/esm/designs/items/BadgeCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@antv/infographic-jsx/jsx-runtime";
 /** @jsxImportSource @antv/infographic-jsx */
 import { Defs, Ellipse, Group, Rect, } from '@antv/infographic-jsx';
 import tinycolor from 'tinycolor2';
@@ -9,13 +9,18 @@ import { registerItem } from './registry';
 export const BadgeCard = (props) => {
     const [{ datum, indexes, width = 200, height = 80, iconSize = 24, badgeSize = 32, gap = 8, positionH = 'normal', themeColors, valueFormatter, }, restProps,] = getItemProps(props, ['width', 'height', 'iconSize', 'badgeSize', 'gap']);
     const value = datum.value;
+    const hasValue = value !== undefined;
+    const hasDesc = !!datum.desc;
+    const hasIcon = !!datum.icon;
     const gradientId = `${themeColors.colorPrimary}-badge`;
     const badgeX = positionH === 'flipped' ? width - gap - badgeSize : gap;
-    const contentStartX = positionH === 'flipped' ? gap : badgeSize + 2 * gap;
-    const contentWidth = width - badgeSize - 3 * gap;
+    const contentStartX = hasIcon
+        ? positionH === 'flipped'
+            ? gap
+            : badgeSize + 2 * gap
+        : gap; // 没有图标时从左边距开始
     const fullWidth = width - gap * 2;
-    const hasValue = value !== undefined;
-    const hasDesc = !!datum.desc;
+    const contentWidth = hasIcon ? width - badgeSize - 3 * gap : fullWidth;
     // 描述区域的固定位置（label + value 区域的下方）
     const descY = gap + 14 + 18 + 8; // label(14) + value(18) + gap(8)
     const contentAreaHeight = descY - gap; // label 和 value 占据的总高度
@@ -25,7 +30,7 @@ export const BadgeCard = (props) => {
     const contentY = !hasValue && !hasDesc ? (height - 14) / 2 : gap;
     return (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsx(Defs, { children: _jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
                                 .darken(20)
-                                .toHexString() })] }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), _jsx(Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), _jsx(ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite }), _jsxs(FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: 'center', fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "center", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && (_jsx(ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] }));
+                                .toHexString() })] }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), hasIcon && (_jsxs(_Fragment, { children: [_jsx(Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), _jsx(ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite })] })), _jsxs(FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: 'center', fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "center", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && (_jsx(ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] }));
 };
 registerItem('badge-card', {
     component: BadgeCard,

package/esm/designs/items/CircularProgress.js

@@ -1,6 +1,6 @@
 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 { Ellipse, Group, Rect } from '@antv/infographic-jsx';
 import { ItemLabel, ItemValue } from '../components';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
@@ -16,7 +16,8 @@ export const CircularProgress = (props) => {
     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 })] }));
+    const bounds = { x: start, y: start, width: d, height: d };
+    return (_jsxs(Group, { ...restProps, width: size, height: size + gap + 20, children: [_jsx(Rect, { width: size, height: size, fill: "none" }), _jsx(Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth }), _jsx(Ellipse, { ...bounds, 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,

package/esm/designs/items/DoneList.js

@@ -1,20 +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 { ItemLabel } 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 textWidth = 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 })] }));
+    return (_jsxs(Group, { ...restProps, children: [_jsx(Path, { id: getItemId(indexes, 'shape', 'done-icon'), x: positionH === 'flipped' ? textWidth + 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(ItemLabel, { indexes: indexes, x: positionH === 'flipped' ? 0 : iconSize + gap, width: textWidth, height: height, fontWeight: "normal", alignVertical: "center", wordWrap: false, fill: "#666", children: datum.label || datum.desc })] }));
 };
 registerItem('done-list', {
     component: DoneList,
-    composites: ['desc'],
+    composites: ['label'],
 });

package/esm/designs/structures/list-column.js

@@ -16,7 +16,7 @@ export const ListColumn = (props) => {
     items.forEach((item, index) => {
         const itemY = (itemBounds.height + gap) * index;
         const indexes = [index];
-        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, y: itemY, width: width, positionV: "center", positionH: zigzag && index % 2 === 0 ? 'normal' : 'flipped' }));
+        itemElements.push(_jsx(Item, { indexes: indexes, datum: item, data: data, y: itemY, width: width, positionV: "center", positionH: zigzag ? (index % 2 === 0 ? 'normal' : 'flipped') : 'normal' }));
         btnElements.push(_jsx(BtnRemove, { indexes: indexes, x: -btnBounds.width - 10, y: itemY + (itemBounds.height - btnBounds.height) / 2 }));
         const btnAddY = index === 0 ? -btnBounds.height : itemY - gap / 2 - btnBounds.height / 2;
         btnElements.push(_jsx(BtnAdd, { indexes: indexes, x: btnAddX, y: btnAddY }));

package/esm/resource/types/resource.d.ts

@@ -4,4 +4,4 @@ export interface ResourceConfig {
     [key: string]: any;
 }
 export type Resource = SVGSymbolElement;
-export type ResourceLoader = (config: ResourceConfig) => Promise<Resource>;
+export type ResourceLoader = (config: ResourceConfig) => Promise<Resource | null>;

package/lib/designs/items/BadgeCard.js

@@ -15,13 +15,18 @@ const registry_1 = require("./registry");
 const BadgeCard = (props) => {
     const [{ datum, indexes, width = 200, height = 80, iconSize = 24, badgeSize = 32, gap = 8, positionH = 'normal', themeColors, valueFormatter, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height', 'iconSize', 'badgeSize', 'gap']);
     const value = datum.value;
+    const hasValue = value !== undefined;
+    const hasDesc = !!datum.desc;
+    const hasIcon = !!datum.icon;
     const gradientId = `${themeColors.colorPrimary}-badge`;
     const badgeX = positionH === 'flipped' ? width - gap - badgeSize : gap;
-    const contentStartX = positionH === 'flipped' ? gap : badgeSize + 2 * gap;
-    const contentWidth = width - badgeSize - 3 * gap;
+    const contentStartX = hasIcon
+        ? positionH === 'flipped'
+            ? gap
+            : badgeSize + 2 * gap
+        : gap; // 没有图标时从左边距开始
     const fullWidth = width - gap * 2;
-    const hasValue = value !== undefined;
-    const hasDesc = !!datum.desc;
+    const contentWidth = hasIcon ? width - badgeSize - 3 * gap : fullWidth;
     // 描述区域的固定位置（label + value 区域的下方）
     const descY = gap + 14 + 18 + 8; // label(14) + value(18) + gap(8)
     const contentAreaHeight = descY - gap; // label 和 value 占据的总高度
@@ -31,7 +36,7 @@ const BadgeCard = (props) => {
     const contentY = !hasValue && !hasDesc ? (height - 14) / 2 : gap;
     return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: (0, jsx_runtime_1.jsxs)("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", 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(20)
-                                .toHexString() })] }) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite }), (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: 'center', fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && ((0, jsx_runtime_1.jsx)(components_1.ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "center", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] }));
+                                .toHexString() })] }) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), hasIcon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite })] })), (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: 'center', fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && ((0, jsx_runtime_1.jsx)(components_1.ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "center", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] }));
 };
 exports.BadgeCard = BadgeCard;
 (0, registry_1.registerItem)('badge-card', {

package/lib/designs/items/CircularProgress.js

@@ -19,7 +19,8 @@ const CircularProgress = (props) => {
     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 })] }));
+    const bounds = { x: start, y: start, width: d, height: d };
+    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.Rect, { width: size, height: size, fill: "none" }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { ...bounds, fill: "none", stroke: "#f0f0f0", strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { ...bounds, 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', {

package/lib/designs/items/DoneList.js

@@ -9,16 +9,16 @@ 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 textWidth = 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 })] }));
+    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' ? textWidth + 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.ItemLabel, { indexes: indexes, x: positionH === 'flipped' ? 0 : iconSize + gap, width: textWidth, height: height, fontWeight: "normal", alignVertical: "center", wordWrap: false, fill: "#666", children: datum.label || datum.desc })] }));
 };
 exports.DoneList = DoneList;
 (0, registry_1.registerItem)('done-list', {
     component: exports.DoneList,
-    composites: ['desc'],
+    composites: ['label'],
 });

package/lib/designs/structures/list-column.js

@@ -19,7 +19,7 @@ const ListColumn = (props) => {
     items.forEach((item, index) => {
         const itemY = (itemBounds.height + gap) * index;
         const indexes = [index];
-        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, y: itemY, width: width, positionV: "center", positionH: zigzag && index % 2 === 0 ? 'normal' : 'flipped' }));
+        itemElements.push((0, jsx_runtime_1.jsx)(Item, { indexes: indexes, datum: item, data: data, y: itemY, width: width, positionV: "center", positionH: zigzag ? (index % 2 === 0 ? 'normal' : 'flipped') : 'normal' }));
         btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnRemove, { indexes: indexes, x: -btnBounds.width - 10, y: itemY + (itemBounds.height - btnBounds.height) / 2 }));
         const btnAddY = index === 0 ? -btnBounds.height : itemY - gap / 2 - btnBounds.height / 2;
         btnElements.push((0, jsx_runtime_1.jsx)(components_1.BtnAdd, { indexes: indexes, x: btnAddX, y: btnAddY }));

package/lib/resource/types/resource.d.ts

@@ -4,4 +4,4 @@ export interface ResourceConfig {
     [key: string]: any;
 }
 export type Resource = SVGSymbolElement;
-export type ResourceLoader = (config: ResourceConfig) => Promise<Resource>;
+export type ResourceLoader = (config: ResourceConfig) => Promise<Resource | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "description": "AntV Infographic generator and visualization library",
   "keywords": [
     "antv",

package/src/designs/items/BadgeCard.tsx

@@ -38,14 +38,19 @@ export const BadgeCard: ComponentType<BadgeCardProps> = (props) => {
     restProps,
   ] = getItemProps(props, ['width', 'height', 'iconSize', 'badgeSize', 'gap']);
   const value = datum.value;
+  const hasValue = value !== undefined;
+  const hasDesc = !!datum.desc;
+  const hasIcon = !!datum.icon;
   const gradientId = `${themeColors.colorPrimary}-badge`;
 
   const badgeX = positionH === 'flipped' ? width - gap - badgeSize : gap;
-  const contentStartX = positionH === 'flipped' ? gap : badgeSize + 2 * gap;
-  const contentWidth = width - badgeSize - 3 * gap;
+  const contentStartX = hasIcon
+    ? positionH === 'flipped'
+      ? gap
+      : badgeSize + 2 * gap
+    : gap; // 没有图标时从左边距开始
   const fullWidth = width - gap * 2;
-  const hasValue = value !== undefined;
-  const hasDesc = !!datum.desc;
+  const contentWidth = hasIcon ? width - badgeSize - 3 * gap : fullWidth;
 
   // 描述区域的固定位置（label + value 区域的下方）
   const descY = gap + 14 + 18 + 8; // label(14) + value(18) + gap(8)
@@ -81,23 +86,27 @@ export const BadgeCard: ComponentType<BadgeCardProps> = (props) => {
         ry={8}
       />
 
-      {/* 徽章背景 */}
-      <Ellipse
-        x={badgeX}
-        y={badgeY}
-        width={badgeSize}
-        height={badgeSize}
-        fill={`url(#${gradientId})`}
-      />
+      {hasIcon && (
+        <>
+          {/* 徽章背景 */}
+          <Ellipse
+            x={badgeX}
+            y={badgeY}
+            width={badgeSize}
+            height={badgeSize}
+            fill={`url(#${gradientId})`}
+          />
 
-      {/* 徽章图标 */}
-      <ItemIcon
-        indexes={indexes}
-        x={badgeX + (badgeSize - iconSize) / 2}
-        y={badgeY + (badgeSize - iconSize) / 2}
-        size={iconSize}
-        fill={themeColors.colorWhite}
-      />
+          {/* 徽章图标 */}
+          <ItemIcon
+            indexes={indexes}
+            x={badgeX + (badgeSize - iconSize) / 2}
+            y={badgeY + (badgeSize - iconSize) / 2}
+            size={iconSize}
+            fill={themeColors.colorWhite}
+          />
+        </>
+      )}
 
       {/* 上方内容区域：label 和 value */}
       <FlexLayout

package/src/designs/items/CircularProgress.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @antv/infographic-jsx */
-import { ComponentType, Ellipse, Group } from '@antv/infographic-jsx';
+import { ComponentType, Ellipse, Group, Rect } from '@antv/infographic-jsx';
 import { ItemLabel, ItemValue } from '../components';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
@@ -40,14 +40,14 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
   const start = strokeWidth / 2;
   const d = size - strokeWidth;
 
+  const bounds = { x: start, y: start, width: d, height: d };
   return (
     <Group {...restProps} width={size} height={size + gap + 20}>
+      {/* 圆环背景轮廓，避免 getBBox 不准确 */}
+      <Rect width={size} height={size} fill="none" />
       {/* 完整圆环背景轨道 - 表示100% */}
       <Ellipse
-        x={start}
-        y={start}
-        width={d}
-        height={d}
+        {...bounds}
         fill="none"
         stroke="#f0f0f0"
         strokeWidth={strokeWidth}
@@ -55,10 +55,7 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
 
       {/* 进度圆环 */}
       <Ellipse
-        x={start}
-        y={start}
-        width={d}
-        height={d}
+        {...bounds}
         fill="none"
         stroke={themeColors.colorPrimary}
         strokeWidth={strokeWidth}

package/src/designs/items/DoneList.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @antv/infographic-jsx */
 import { ComponentType, Group, Path } from '@antv/infographic-jsx';
-import { ItemDesc } from '../components';
+import { ItemLabel } from '../components';
 import { getItemId, getItemProps } from '../utils';
 import { registerItem } from './registry';
 import type { BaseItemProps } from './types';
@@ -28,7 +28,7 @@ export const DoneList: ComponentType<DoneListProps> = (props) => {
     restProps,
   ] = getItemProps(props, ['width', 'height', 'iconSize', 'gap']);
 
-  const descWidth = width - iconSize - gap;
+  const textWidth = width - iconSize - gap;
 
   const shapeY =
     positionV === 'center'
@@ -41,29 +41,30 @@ export const DoneList: ComponentType<DoneListProps> = (props) => {
     <Group {...restProps}>
       <Path
         id={getItemId(indexes, 'shape', 'done-icon')}
-        x={positionH === 'flipped' ? descWidth + gap : 0}
+        x={positionH === 'flipped' ? textWidth + 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"
       />
-      <ItemDesc
+      <ItemLabel
         indexes={indexes}
         x={positionH === 'flipped' ? 0 : iconSize + gap}
-        fontSize={16}
-        width={descWidth}
+        width={textWidth}
         height={height}
+        fontWeight="normal"
         alignVertical="center"
         wordWrap={false}
+        fill="#666"
       >
-        {datum.desc}
-      </ItemDesc>
+        {datum.label || datum.desc}
+      </ItemLabel>
     </Group>
   );
 };
 
 registerItem('done-list', {
   component: DoneList,
-  composites: ['desc'],
+  composites: ['label'],
 });

package/src/designs/structures/list-column.tsx

@@ -40,7 +40,7 @@ export const ListColumn: ComponentType<ListColumnProps> = (props) => {
         y={itemY}
         width={width}
         positionV="center"
-        positionH={zigzag && index % 2 === 0 ? 'normal' : 'flipped'}
+        positionH={zigzag ? (index % 2 === 0 ? 'normal' : 'flipped') : 'normal'}
       />,
     );
 

package/src/options/parser.ts

@@ -35,6 +35,7 @@ export function parseOptions(
     : {};
 
   const { design: templateDesign, ...restTemplateOptions } = templateOptions;
+
   return {
     ...restTemplateOptions,
     ...restOptions,

package/src/resource/types/resource.ts

@@ -6,4 +6,6 @@ export interface ResourceConfig {
 
 export type Resource = SVGSymbolElement;
 
-export type ResourceLoader = (config: ResourceConfig) => Promise<Resource>;
+export type ResourceLoader = (
+  config: ResourceConfig,
+) => Promise<Resource | null>;