@antv/infographic 0.1.2 → 0.1.4

package/src/designs/items/CircularProgress.tsx

@@ -36,6 +36,7 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
   const start = strokeWidth / 2;
   const d = size - strokeWidth;
 
+  const isFullCircle = percentage >= 1;
   const angle = percentage * 360;
   const pathData = describeArc(center, center, radius, 0, angle);
 
@@ -54,14 +55,24 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
       />
 
       {/* 进度圆环 */}
-      <Path
-        d={pathData}
-        fill="none"
-        stroke={themeColors.colorPrimary}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        data-element-type="shape"
-      />
+      {isFullCircle ? (
+        <Ellipse
+          {...bounds}
+          fill="none"
+          stroke={themeColors.colorPrimary}
+          strokeWidth={strokeWidth}
+          data-element-type="shape"
+        />
+      ) : (
+        <Path
+          d={pathData}
+          fill="none"
+          stroke={themeColors.colorPrimary}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          data-element-type="shape"
+        />
+      )}
 
       {/* 中心数值 */}
       <ItemValue

package/src/designs/items/HorizontalIconArrow.tsx

@@ -16,7 +16,6 @@ import {
   ShapesGroup,
 } from '../components';
 import { FlexLayout } from '../layouts';
-import { AlignLayout } from '../layouts/Align';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 import type { BaseItemProps } from './types';
@@ -115,15 +114,15 @@ export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
             <Gap height={iconGap} />
           </>
         )}
-        <AlignLayout horizontal="center" vertical="middle">
+        <Group>
           <HorizontalArrow
             width={width}
             height={arrowHeight}
             fill={themeColors.colorPrimary}
           />
           <Text
-            width={width}
-            height={arrowHeight}
+            x={width / 2}
+            y={arrowHeight / 2}
             alignHorizontal="center"
             alignVertical="middle"
             fill={themeColors.colorWhite}
@@ -136,7 +135,7 @@ export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
                   .padStart(2, '0')
                   .slice(-2)}
           </Text>
-        </AlignLayout>
+        </Group>
         {!isVNormal ? (
           <>
             {dotLine}

package/src/designs/items/HorizontalIconLine.tsx

@@ -87,10 +87,14 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
     </Text>
   ) : null;
   const timeBounds = getElementBounds(time);
-
   const lineHeight = 18;
   const line = (
-    <AlignLayout horizontal="center" width={width} height={lineHeight}>
+    <AlignLayout
+      horizontal="center"
+      vertical="middle"
+      width={width}
+      height={lineHeight}
+    >
       <Rect
         width={width}
         height={lineHeight}
@@ -98,20 +102,13 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
         data-element-type="shape"
       />
       <Ellipse
-        y={-3}
         width={lineHeight + 6}
         height={lineHeight + 6}
         fill={themeColors.colorBg}
         fillOpacity={0.5}
         data-element-type="shape"
       />
-      <Ellipse
-        y={(lineHeight - 12) / 2}
-        width={12}
-        height={12}
-        fill="white"
-        data-element-type="shape"
-      />
+      <Ellipse width={12} height={12} fill="white" data-element-type="shape" />
     </AlignLayout>
   );
 

package/src/designs/items/IconBadge.tsx

@@ -78,7 +78,6 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
       {/* 数值徽章 */}
       <Ellipse
         x={size - badgeSize + 4}
-        y={0}
         width={badgeSize}
         height={badgeSize}
         fill={`url(#${badgeGradientId})`}
@@ -86,8 +85,9 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
 
       {/* 徽章数值 */}
       <Text
-        x={size - badgeSize / 2 + 4}
-        y={badgeSize / 2}
+        x={size - badgeSize + 4}
+        width={badgeSize}
+        height={badgeSize}
         fontSize={10}
         fontWeight="bold"
         fill={themeColors.colorWhite}

package/src/designs/items/LinedText.tsx

@@ -0,0 +1,131 @@
+import { ComponentType, Group, Path, getElementBounds } from '../../jsx';
+import { ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+import type { BaseItemProps } from './types';
+
+export interface LinedTextProps extends BaseItemProps {
+  width?: number;
+  formatter?: (text?: string) => string;
+  usePaletteColor?: boolean;
+  showUnderline?: boolean;
+  underlineGap?: number;
+  underlineExtend?: number;
+  underlineThickness?: number;
+}
+
+export const LinedText: ComponentType<LinedTextProps> = (props) => {
+  const [
+    {
+      datum,
+      indexes,
+      width,
+      themeColors,
+      positionH = 'normal',
+      positionV = 'center',
+      formatter = (text?: string) => text || '',
+      usePaletteColor = false,
+      showUnderline = false,
+      underlineGap = 6,
+      underlineExtend = 8,
+      underlineThickness = 2,
+    },
+    restProps,
+  ] = getItemProps(props, [
+    'width',
+    'formatter',
+    'usePaletteColor',
+    'showUnderline',
+    'underlineGap',
+    'underlineExtend',
+    'underlineThickness',
+  ]);
+
+  const content = formatter(datum.label ?? datum.desc ?? '');
+  const alignH =
+    positionH === 'flipped'
+      ? 'right'
+      : positionH === 'center'
+        ? 'center'
+        : 'left';
+
+  const measuredLabel = getElementBounds(
+    <ItemLabel indexes={indexes} width={width}>
+      {content}
+    </ItemLabel>,
+  );
+  const contentWidth = width ?? measuredLabel.width;
+  const labelHeight = measuredLabel.height;
+  const underlineWidth = showUnderline ? contentWidth + underlineExtend * 2 : 0;
+  const totalHeight =
+    labelHeight + (showUnderline ? underlineGap + underlineThickness : 0);
+  const finalWidth = showUnderline
+    ? Math.max(contentWidth, underlineWidth)
+    : contentWidth;
+  const finalHeight = (restProps.height as number | undefined) ?? totalHeight;
+  const offsetY =
+    positionV === 'middle'
+      ? (finalHeight - totalHeight) / 2
+      : positionV === 'flipped'
+        ? finalHeight - totalHeight
+        : 0;
+
+  const labelX =
+    alignH === 'right'
+      ? finalWidth - contentWidth
+      : alignH === 'center'
+        ? (finalWidth - contentWidth) / 2
+        : 0;
+  const labelY = offsetY;
+  const underlineX =
+    alignH === 'right'
+      ? finalWidth - underlineWidth
+      : alignH === 'center'
+        ? (finalWidth - underlineWidth) / 2
+        : 0;
+  const underlineY = finalHeight;
+
+  return (
+    <Group {...restProps} width={finalWidth} height={finalHeight}>
+      <ItemLabel
+        indexes={indexes}
+        x={labelX}
+        y={labelY}
+        width={contentWidth}
+        height={labelHeight}
+        alignHorizontal={alignH}
+        alignVertical={
+          positionV === 'flipped'
+            ? 'bottom'
+            : positionV === 'center'
+              ? 'middle'
+              : 'top'
+        }
+        fill={
+          usePaletteColor ? themeColors.colorPrimary : themeColors.colorText
+        }
+      >
+        {content}
+      </ItemLabel>
+      {showUnderline && (
+        <Path
+          d={`M 0 ${underlineThickness / 2} L ${underlineWidth} ${underlineThickness / 2}`}
+          x={underlineX}
+          y={underlineY - underlineThickness / 2}
+          width={underlineWidth}
+          height={underlineThickness}
+          stroke={themeColors.colorPrimary}
+          strokeWidth={underlineThickness}
+          fill="none"
+          strokeLinecap="round"
+          data-element-type="shape"
+        />
+      )}
+    </Group>
+  );
+};
+
+registerItem('lined-text', {
+  component: LinedText,
+  composites: ['label'],
+});

package/src/designs/items/PlainText.tsx

@@ -8,6 +8,7 @@ export interface LabelTextProps extends BaseItemProps {
   width?: number;
   formatter?: (text?: string) => string;
   usePaletteColor?: boolean;
+  lineNumber?: number;
 }
 
 export const LabelText: ComponentType<LabelTextProps> = (props) => {
@@ -18,19 +19,34 @@ export const LabelText: ComponentType<LabelTextProps> = (props) => {
       width = 120,
       themeColors,
       positionH = 'normal',
+      positionV = 'center',
       formatter = (text?: string) => text || '',
       usePaletteColor = false,
+      lineNumber = 1,
     },
     restProps,
-  ] = getItemProps(props, ['width', 'formatter', 'usePaletteColor']);
+  ] = getItemProps(props, [
+    'width',
+    'formatter',
+    'usePaletteColor',
+    'lineNumber',
+  ]);
+
+  const fontSize = 14;
+  const lineHeight = 1.4;
+  const height =
+    (restProps.height as number | undefined) ??
+    Math.ceil(lineNumber * lineHeight * fontSize);
 
   return (
     <ItemLabel
       {...restProps}
       indexes={indexes}
       width={width}
+      height={height}
+      lineHeight={lineHeight}
       fill={usePaletteColor ? themeColors.colorPrimary : themeColors.colorText}
-      fontSize={14}
+      fontSize={fontSize}
       fontWeight="regular"
       alignHorizontal={
         positionH === 'flipped'
@@ -39,7 +55,13 @@ export const LabelText: ComponentType<LabelTextProps> = (props) => {
             ? 'center'
             : 'left'
       }
-      alignVertical="middle"
+      alignVertical={
+        positionV === 'flipped'
+          ? 'bottom'
+          : positionV === 'center'
+            ? 'middle'
+            : 'top'
+      }
     >
       {formatter(datum.label || datum.desc)}
     </ItemLabel>

package/src/designs/items/QuarterCircular.tsx

@@ -54,7 +54,6 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
 
   // 根据 positionH 调整布局
   const isFlipped = positionH === 'flipped';
-  const isCentered = positionH === 'center';
 
   // 根据 positionV 调整布局
   const isVFlipped = positionV === 'flipped';
@@ -74,22 +73,6 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
         topLineEndX: CIRCLE_MASS,
         topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
       };
-    } else if (isCentered) {
-      // 居中对齐
-      const totalContentWidth =
-        width - circleRadius - DECORATION_HORIZONTAL_SPACING;
-      const centerOffset = (width - totalContentWidth) / 2;
-      return {
-        diagonalStartX: centerOffset + DOT_RADIUS,
-        diagonalStartY: isVFlipped
-          ? height - DECORATION_VERTICAL_SPACING
-          : DECORATION_VERTICAL_SPACING,
-        diagonalEndX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-        diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
-        topLineStartX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-        topLineEndX: centerOffset + totalContentWidth - CIRCLE_MASS,
-        topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
-      };
     } else {
       // 默认左对齐
       return {
@@ -120,19 +103,6 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
         circleY: isVFlipped ? 0 : height,
         iconX: CIRCLE_MASS - iconSize / 2,
       };
-    } else if (isCentered) {
-      // 居中对齐
-      const totalContentWidth =
-        width - circleRadius - DECORATION_HORIZONTAL_SPACING;
-      const centerOffset = (width - totalContentWidth) / 2;
-      return {
-        valueX: centerOffset,
-        contentX: centerOffset + DECORATION_HORIZONTAL_SPACING,
-        contentWidth: totalContentWidth - circleRadius - 10,
-        circleX: centerOffset + totalContentWidth,
-        circleY: isVFlipped ? 0 : height,
-        iconX: centerOffset + totalContentWidth - CIRCLE_MASS - iconSize / 2,
-      };
     } else {
       // 默认左对齐
       return {
@@ -227,7 +197,6 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
           fontSize={VALUE_SIZE}
           fontWeight="bold"
           fill={themeColors.colorPrimary}
-          width={40}
         >
           {indexStr}
         </Text>
@@ -259,6 +228,7 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
             width={contentCoords.contentWidth}
             fontWeight="bold"
             fill={themeColors.colorText}
+            alignHorizontal={isFlipped ? 'right' : 'left'}
           >
             {datum.label}
           </ItemLabel>
@@ -272,6 +242,7 @@ export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
             y={descY}
             width={contentCoords.contentWidth}
             fill={themeColors.colorTextSecondary}
+            alignHorizontal={isFlipped ? 'right' : 'left'}
           >
             {datum.desc}
           </ItemDesc>

package/src/designs/items/index.ts

@@ -11,6 +11,7 @@ export * from './IconBadge';
 export * from './IndexedCard';
 export * from './LCornerCard';
 export * from './LetterCard';
+export * from './LinedText';
 export * from './PillBadge';
 export * from './PlainText';
 export * from './ProgressCard';

package/src/designs/layouts/Align.tsx

@@ -21,83 +21,66 @@ export const AlignLayout = createLayout<AlignLayoutProps>(
     }
 
     const childBounds = children.map((child) => getElementBounds(child));
-
-    // 检查是否设置了容器的宽高
-    const hasContainerWidth = props.width !== undefined;
-    const hasContainerHeight = props.height !== undefined;
-
-    let positionedChildren = [...children];
-
-    // 如果没有设置容器尺寸，先获取子节点的整体包围盒
     const childrenBounds = getElementsBounds(children);
 
-    // 确定对齐的基础区域
-    const alignmentWidth = hasContainerWidth
-      ? props.width!
-      : childrenBounds.width;
-    const alignmentHeight = hasContainerHeight
-      ? props.height!
-      : childrenBounds.height;
-    const alignmentX = hasContainerWidth ? props.x || 0 : childrenBounds.x;
-    const alignmentY = hasContainerHeight ? props.y || 0 : childrenBounds.y;
+    // 容器尺寸和位置
+    const containerX = props.x ?? childrenBounds.x;
+    const containerY = props.y ?? childrenBounds.y;
+    const containerWidth = props.width ?? childrenBounds.width;
+    const containerHeight = props.height ?? childrenBounds.height;
 
-    // 应用对齐
-    positionedChildren = children.map((child, index) => {
+    // 对齐子元素（使用相对于容器的坐标）
+    const positionedChildren = children.map((child, index) => {
       const bounds = childBounds[index];
       const childProps = { ...child.props };
 
-      // 水平对齐
-      if (horizontal) {
+      // 水平对齐（相对于容器左边界）
+      if (horizontal !== undefined) {
         switch (horizontal) {
           case 'left':
-            childProps.x = alignmentX;
+            childProps.x = 0; // 相对容器
             break;
           case 'center':
-            childProps.x = alignmentX + (alignmentWidth - bounds.width) / 2;
+            childProps.x = (containerWidth - bounds.width) / 2;
             break;
           case 'right':
-            childProps.x = alignmentX + alignmentWidth - bounds.width;
+            childProps.x = containerWidth - bounds.width;
             break;
         }
-      } else {
-        // 如果没有设置水平对齐，保持原有的 x 坐标
-        childProps.x = child.props.x || bounds.x;
+      } else if (childProps.x === undefined) {
+        // 保持相对位置
+        childProps.x = bounds.x - containerX;
       }
 
-      // 垂直对齐
-      if (vertical) {
+      // 垂直对齐（相对于容器顶边界）
+      if (vertical !== undefined) {
         switch (vertical) {
           case 'top':
-            childProps.y = alignmentY;
+            childProps.y = 0;
             break;
           case 'middle':
-            childProps.y = alignmentY + (alignmentHeight - bounds.height) / 2;
+            childProps.y = (containerHeight - bounds.height) / 2;
             break;
           case 'bottom':
-            childProps.y = alignmentY + alignmentHeight - bounds.height;
+            childProps.y = containerHeight - bounds.height;
             break;
         }
-      } else {
-        // 如果没有设置垂直对齐，保持原有的 y 坐标
-        childProps.y = child.props.y || bounds.y;
+      } else if (childProps.y === undefined) {
+        // 保持相对位置
+        childProps.y = bounds.y - containerY;
       }
 
       return cloneElement(child, childProps);
     });
 
-    // 如果没有设置容器尺寸，更新容器的边界框
-    if (!hasContainerWidth || !hasContainerHeight) {
-      const finalBounds = getElementsBounds(positionedChildren);
-      if (!hasContainerWidth) {
-        // props.x ??= finalBounds.x;
-        props.width ??= finalBounds.width;
-      }
-      if (!hasContainerHeight) {
-        // props.y ??= finalBounds.y;
-        props.height ??= finalBounds.height;
-      }
-    }
+    const containerProps = {
+      ...props,
+      x: containerX,
+      y: containerY,
+      width: containerWidth,
+      height: containerHeight,
+    };
 
-    return <Group {...props}>{positionedChildren}</Group>;
+    return <Group {...containerProps}>{positionedChildren}</Group>;
   },
 );

package/src/designs/layouts/Flex.tsx

@@ -40,11 +40,12 @@ export const FlexLayout = createLayout<FlexLayoutProps>(
       flexDirection === 'row-reverse' || flexDirection === 'column-reverse';
 
     const childBounds = children.map((child) => getElementBounds(child));
+    const childrenBounds = getElementsBounds(children);
 
+    const containerWidth = props.width ?? childrenBounds.width;
+    const containerHeight = props.height ?? childrenBounds.height;
     const hasContainerSize =
       props.width !== undefined && props.height !== undefined;
-    const containerWidth = props.width || 0;
-    const containerHeight = props.height || 0;
 
     const lines: Array<{ children: JSXElement[]; bounds: Bounds[] }> = [];
 
@@ -237,37 +238,38 @@ export const FlexLayout = createLayout<FlexLayoutProps>(
     }
 
     if (!hasContainerSize) {
-      if (alignItems === 'center' && !isRow) {
-        // For column layout, center items horizontally
-        const maxWidth = Math.max(...childBounds.map((bounds) => bounds.width));
-        layoutChildren.forEach((child, index) => {
-          const bounds = childBounds[index];
-          const centerOffset = (maxWidth - bounds.width) / 2;
-          const newProps = { ...child.props };
-          newProps.x = (newProps.x || 0) + centerOffset;
-          layoutChildren[index] = cloneElement(child, newProps);
-        });
-      } else if (alignItems === 'center' && isRow) {
-        // For row layout, center items vertically
-        const maxHeight = Math.max(
-          ...childBounds.map((bounds) => bounds.height),
-        );
-        layoutChildren.forEach((child, index) => {
-          const bounds = childBounds[index];
-          const centerOffset = (maxHeight - bounds.height) / 2;
-          const newProps = { ...child.props };
-          newProps.y = (newProps.y || 0) + centerOffset;
-          layoutChildren[index] = cloneElement(child, newProps);
-        });
+      if (alignItems === 'center') {
+        if (isRow) {
+          const maxHeight = Math.max(...childBounds.map((b) => b.height));
+          layoutChildren.forEach((child, index) => {
+            const bounds = childBounds[index];
+            const centerOffset = (maxHeight - bounds.height) / 2;
+            const newProps = { ...child.props };
+            newProps.y = (newProps.y || 0) + centerOffset;
+            layoutChildren[index] = cloneElement(child, newProps);
+          });
+        } else {
+          const maxWidth = Math.max(...childBounds.map((b) => b.width));
+          layoutChildren.forEach((child, index) => {
+            const bounds = childBounds[index];
+            const centerOffset = (maxWidth - bounds.width) / 2;
+            const newProps = { ...child.props };
+            newProps.x = (newProps.x || 0) + centerOffset;
+            layoutChildren[index] = cloneElement(child, newProps);
+          });
+        }
       }
-
-      const finalBounds = getElementsBounds(layoutChildren);
-      // props.x ??= finalBounds.x;
-      // props.y ??= finalBounds.y;
-      props.width ??= finalBounds.width;
-      props.height ??= finalBounds.height;
     }
 
-    return <Group {...props}>{layoutChildren}</Group>;
+    const finalBounds = getElementsBounds(layoutChildren);
+    const containerProps = {
+      ...props,
+      x: props.x ?? childrenBounds.x,
+      y: props.y ?? childrenBounds.y,
+      width: props.width ?? finalBounds.width,
+      height: props.height ?? finalBounds.height,
+    };
+
+    return <Group {...containerProps}>{layoutChildren}</Group>;
   },
 );