@antv/infographic 0.2.12 → 0.2.13

package/lib/templates/chart-pie.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chartPieTemplates = void 0;
+exports.chartPieTemplates = {
+    'chart-pie-plain-text': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'chart-pie',
+            },
+            items: [
+                {
+                    type: 'plain-text',
+                },
+            ],
+        },
+    },
+    'chart-pie-compact-card': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'chart-pie',
+                avoidLabelOverlap: true,
+            },
+            items: [
+                {
+                    type: 'compact-card',
+                },
+            ],
+        },
+    },
+    'chart-pie-pill-badge': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'chart-pie',
+                avoidLabelOverlap: true,
+            },
+            items: [
+                {
+                    type: 'pill-badge',
+                },
+            ],
+        },
+    },
+    'chart-pie-donut-plain-text': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'chart-pie',
+                innerRadius: 90,
+            },
+            items: [
+                {
+                    type: 'plain-text',
+                },
+            ],
+        },
+    },
+    'chart-pie-donut-compact-card': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'chart-pie',
+                innerRadius: 90,
+                avoidLabelOverlap: true,
+            },
+            items: [
+                {
+                    type: 'compact-card',
+                },
+            ],
+        },
+    },
+    'chart-pie-donut-pill-badge': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'chart-pie',
+                innerRadius: 90,
+                avoidLabelOverlap: true,
+            },
+            items: [
+                {
+                    type: 'pill-badge',
+                },
+            ],
+        },
+    },
+};

package/lib/utils/viewbox.d.ts

@@ -4,3 +4,23 @@ export declare function getViewBox(svg: SVGSVGElement): {
     width: number;
     height: number;
 };
+export declare function calculateZoomedViewBox(current: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, factor: number, pivot: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function viewBoxToString(box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}): string;

package/lib/utils/viewbox.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getViewBox = getViewBox;
+exports.calculateZoomedViewBox = calculateZoomedViewBox;
+exports.viewBoxToString = viewBoxToString;
 function getViewBox(svg) {
     const viewBox = svg.getAttribute('viewBox');
     if (viewBox) {
@@ -13,3 +15,13 @@ function getViewBox(svg) {
     const height = Number(heightStr) || 0;
     return { x: 0, y: 0, width, height };
 }
+function calculateZoomedViewBox(current, factor, pivot) {
+    const newWidth = current.width * factor;
+    const newHeight = current.height * factor;
+    const newX = pivot.x - (pivot.x - current.x) * factor;
+    const newY = pivot.y - (pivot.y - current.y) * factor;
+    return { x: newX, y: newY, width: newWidth, height: newHeight };
+}
+function viewBoxToString(box) {
+    return `${box.x} ${box.y} ${box.width} ${box.height}`;
+}

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.2.12";
+export declare const VERSION = "0.2.13";

package/lib/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '0.2.12';
+exports.VERSION = '0.2.13';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",
@@ -126,7 +126,6 @@
     "@types/node": "^24.3.1",
     "@types/tinycolor2": "^1.4.6",
     "@vitest/coverage-v8": "^3.2.4",
-    "any-skills": "^0.1.1",
     "csstype": "^3.2.2",
     "eslint": "^9.35.0",
     "globals": "^16.4.0",

package/src/designs/structures/chart-pie.tsx

@@ -5,15 +5,46 @@ import { getElementBounds, Group, Path, Text } from '../../jsx';
 import { ItemDatum } from '../../types';
 import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
 import { FlexLayout } from '../layouts';
-import { getColorPrimary, getPaletteColor, getThemeColors } from '../utils';
+import {
+  getColorPrimary,
+  getPaletteColor,
+  getThemeColors,
+  normalizePercent,
+} from '../utils';
 import { registerStructure } from './registry';
 import type { BaseStructureProps } from './types';
 
+// === 连线布局常量 ===
+/** 连线水平拉伸系数：控制拐点相对于外半径的延伸比例 */
+const EXTENSION_FACTOR = 1.35;
+/** 文本与连线终点之间的水平间距 */
+const TEXT_GAP = 8;
+/** 平滑系数：控制 Y 轴偏移对 X 轴补偿的影响幅度 */
+const SMOOTH_FACTOR = 0.3;
+/** 最大预期偏移系数：相对于外半径的比例 */
+const MAX_EXPECTED_SHIFT_FACTOR = 0.2;
+/** 文本锚点与拐点之间的固定间距 */
+const FIXED_TEXT_RADIUS_GAP = 20;
+/** 连线拐点半径系数：相对于外半径的比例 */
+const ELBOW_RADIUS_FACTOR = 1.15;
+/** 百分比文本位置系数：从内半径到外半径的比例 (0.5 = 中间) */
+const PERCENT_TEXT_POSITION = 0.5;
+/** 删除按钮半径系数：相对于外半径的比例 */
+const DELETE_BUTTON_RADIUS_FACTOR = 0.85;
+/** 添加按钮半径系数：相对于外半径的比例 */
+const ADD_BUTTON_RADIUS_FACTOR = 1.0;
+/** 连线透明度 */
+const CONNECTOR_STROKE_OPACITY = 0.45;
+/** 连线宽度 */
+const CONNECTOR_STROKE_WIDTH = 2;
+
 export interface ChartPieProps extends BaseStructureProps {
   radius?: number;
   innerRadius?: number;
   padding?: number;
   showPercentage?: boolean;
+  avoidLabelOverlap?: boolean;
+  minShowLabelPercent?: number | string;
 }
 
 export const ChartPie: ComponentType<ChartPieProps> = (props) => {
@@ -25,9 +56,14 @@ export const ChartPie: ComponentType<ChartPieProps> = (props) => {
     innerRadius = 0,
     padding = 30,
     showPercentage = true,
+    avoidLabelOverlap = false,
+    minShowLabelPercent: rawMinShowLabelPercent = 0,
     options,
   } = props;
 
+  // 规范化百分比阈值
+  const minShowLabelPercent = normalizePercent(rawMinShowLabelPercent);
+
   const { title, desc, items = [] } = data;
   const titleContent = Title ? <Title title={title} desc={desc} /> : null;
 
@@ -51,14 +87,10 @@ export const ChartPie: ComponentType<ChartPieProps> = (props) => {
   // 基础半径设置
   const outerRadius = Math.max(radius, 60);
 
-  // 连线水平拉伸的系数
-  const extensionFactor = 1.35;
-  const textGap = 8;
-
   // 计算画布中心和总尺寸
   // 水平方向：半径 * 系数 + 间距 + 标签宽度 + 边缘padding
   const maxHorizontalDistance =
-    outerRadius * extensionFactor + textGap + labelWidth;
+    outerRadius * EXTENSION_FACTOR + TEXT_GAP + labelWidth;
   const maxVerticalDistance = outerRadius;
 
   const centerX = padding + maxHorizontalDistance;
@@ -119,28 +151,29 @@ export const ChartPie: ComponentType<ChartPieProps> = (props) => {
 
   // 连线拐点
   const outerArc = arc<PieArcDatum<ItemDatum>>()
-    .innerRadius(outerRadius * 1.15)
-    .outerRadius(outerRadius * 1.15);
+    .innerRadius(outerRadius * ELBOW_RADIUS_FACTOR)
+    .outerRadius(outerRadius * ELBOW_RADIUS_FACTOR);
 
-  const percentTextRadius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const percentTextRadius =
+    innerRadius + (outerRadius - innerRadius) * PERCENT_TEXT_POSITION;
   const percentageArc = arc<PieArcDatum<ItemDatum>>()
     .innerRadius(percentTextRadius)
     .outerRadius(percentTextRadius);
 
   // 删除按钮位置
   const deleteButtonArc = arc<PieArcDatum<ItemDatum>>()
-    .innerRadius(outerRadius * 0.85)
-    .outerRadius(outerRadius * 0.85);
+    .innerRadius(outerRadius * DELETE_BUTTON_RADIUS_FACTOR)
+    .outerRadius(outerRadius * DELETE_BUTTON_RADIUS_FACTOR);
 
   const sliceElements: JSXElement[] = [];
   const percentElements: JSXElement[] = [];
   const connectorElements: JSXElement[] = [];
   const itemElements: JSXElement[] = [];
   const btnElements: JSXElement[] = [];
+  const labelItems: LabelItem[] = [];
 
   // 3. 遍历生成图形
   arcData.forEach((arcDatum) => {
-    const currentItem = arcDatum.data;
     const originalIndex = arcDatum.index;
 
     const color =
@@ -165,38 +198,126 @@ export const ChartPie: ComponentType<ChartPieProps> = (props) => {
     // --- 计算关键点 ---
     const midAngle =
       arcDatum.startAngle + (arcDatum.endAngle - arcDatum.startAngle) / 2;
-    const isRight = midAngle < Math.PI;
 
-    // 1. 起点
+    const normalizedAngle = midAngle < 0 ? midAngle + Math.PI * 2 : midAngle;
+    const isRight = normalizedAngle < Math.PI;
+
+    // 计算扇形占比，如果小于 minShowLabelPercent 则跳过生成连线和标签
+    const slicePercent =
+      totalValue > 0 ? (arcDatum.value / totalValue) * 100 : 0;
+    if (slicePercent < minShowLabelPercent) {
+      return;
+    }
+
+    const centroid = outerArc.centroid(arcDatum);
+
+    labelItems.push({
+      arcDatum,
+      originalIndex,
+      x: centroid[0],
+      y: centroid[1], // 中心点 Y 坐标
+      height: labelHeight,
+      isRight,
+      color,
+    });
+  });
+  let finalLabels: LabelItem[] = labelItems;
+
+  if (avoidLabelOverlap) {
+    // 标签中心点的上下边界（中心点不能超出此范围）
+    const labelMinY = -maxVerticalDistance * EXTENSION_FACTOR;
+    const labelMaxY = maxVerticalDistance * EXTENSION_FACTOR;
+
+    const leftItems = labelItems.filter((item) => !item.isRight);
+    const rightItems = labelItems.filter((item) => item.isRight);
+
+    const labelSpacing = labelHeight;
+
+    const adjustedRight = distributeLabels(
+      rightItems,
+      labelSpacing,
+      labelMinY,
+      labelMaxY,
+    );
+    const adjustedLeft = distributeLabels(
+      leftItems,
+      labelSpacing,
+      labelMinY,
+      labelMaxY,
+    );
+
+    finalLabels = [...adjustedLeft, ...adjustedRight];
+  }
+
+  finalLabels.forEach((item) => {
+    const { arcDatum, originalIndex, isRight, color, y: adjustedY } = item;
+
+    // 1. P0: 连线起点 (内部扇形质心)
     const p0 = innerArc.centroid(arcDatum);
 
-    // 2. 拐点
+    // 2. P1: 第一拐点 (外部扇形质心)
     const p1 = outerArc.centroid(arcDatum);
 
-    // 3. 终点 (水平拉伸)
-    const labelXOffset = outerRadius * extensionFactor * (isRight ? 1 : -1);
-    const p2 = [labelXOffset, p1[1]];
+    // 计算因避障算法导致的 Y 轴偏移量
+    // adjustedY 已经是中心点坐标
+    const labelCenterY = adjustedY;
+    const deltaY = Math.abs(labelCenterY - p1[1]);
+
+    // --- 动态补偿策略 (Dynamic Compensation) ---
+    // 根据 Y 轴的偏移量动态向外推移 X 轴，以缓解连线折角过于陡峭的问题
+    const dynamicShift = deltaY * SMOOTH_FACTOR;
+
+    // 计算基础拐点半径
+    const baseElbowRadius = outerRadius * EXTENSION_FACTOR;
+
+    // 计算实际拐点半径 (基础半径 + 动态补偿)
+    const currentElbowRadius = baseElbowRadius + dynamicShift;
+
+    // 设定文本锚点的固定半径，确保所有标签在垂直方向上对齐
+    const maxExpectedShift = outerRadius * MAX_EXPECTED_SHIFT_FACTOR;
+    const fixedTextRadius =
+      baseElbowRadius + maxExpectedShift + FIXED_TEXT_RADIUS_GAP;
+
+    // 计算 P2 X 坐标 (注意方向性)
+    // 限制 Elbow X 不超过文本锚点半径，防止连线出现回折
+    const elbowRadiusClamped = Math.min(currentElbowRadius, fixedTextRadius);
+    const elbowX = elbowRadiusClamped * (isRight ? 1 : -1);
+
+    // 计算文本锚点 X 坐标 (始终对齐)
+    const textX = fixedTextRadius * (isRight ? 1 : -1);
+
+    // 3. P2: 第二拐点 (动态调整后的 Elbow 位置)
+    // 连线终点对齐标签垂直中心
+    const p2 = [elbowX, labelCenterY];
+
+    // 4. P3: 终点 (文本锚点)
+    const p3 = [textX, labelCenterY];
 
     // --- 绘制连线 ---
     connectorElements.push(
       <Path
-        d={`M${centerX + p0[0]} ${centerY + p0[1]} L${centerX + p1[0]} ${centerY + p1[1]} L${centerX + p2[0]} ${centerY + p2[1]}`}
-        stroke={colorPrimary}
-        strokeOpacity={0.45}
-        strokeWidth={2}
+        d={`M${centerX + p0[0]} ${centerY + p0[1]} 
+        L${centerX + p1[0]} ${centerY + p1[1]} 
+        L${centerX + p2[0]} ${centerY + p2[1]}
+        L${centerX + p3[0]} ${centerY + p3[1]}
+        `}
+        stroke={color}
+        strokeOpacity={CONNECTOR_STROKE_OPACITY}
+        strokeWidth={CONNECTOR_STROKE_WIDTH}
         fill="none"
         data-element-type="shape"
       />,
     );
 
     // --- 绘制 Item ---
-    const itemX = centerX + p2[0] + (isRight ? textGap : -textGap - labelWidth);
-    const itemY = centerY + p2[1] - labelHeight / 2;
+    const itemX =
+      centerX + p3[0] + (isRight ? TEXT_GAP : -TEXT_GAP - labelWidth);
+    const itemY = centerY + adjustedY - labelHeight / 2; // 转换为顶部坐标用于渲染
 
     itemElements.push(
       <Item
         indexes={[originalIndex]}
-        datum={currentItem}
+        datum={arcDatum.data}
         data={data}
         x={itemX}
         y={itemY}
@@ -257,7 +378,7 @@ export const ChartPie: ComponentType<ChartPieProps> = (props) => {
       arcData[nextIndex].startAngle + (nextIndex === 0 ? Math.PI * 2 : 0);
     const midAngle = (currentEnd + nextStart) / 2;
 
-    const btnR = outerRadius * 1.0;
+    const btnR = outerRadius * ADD_BUTTON_RADIUS_FACTOR;
     const btnX = Math.sin(midAngle) * btnR;
     const btnY = -Math.cos(midAngle) * btnR;
 
@@ -296,3 +417,115 @@ registerStructure('chart-pie', {
   component: ChartPie,
   composites: ['title', 'item'],
 });
+
+export interface LabelItem {
+  arcDatum: PieArcDatum<ItemDatum>;
+  originalIndex: number;
+  /** 标签中心点 Y 坐标 */
+  y: number;
+  x: number;
+  height: number;
+  isRight: boolean;
+  color: string;
+}
+
+/**
+ * 核心避障逻辑：蜘蛛腿算法 (Spider Leg Layout)
+ *
+ * 注意：y 坐标表示标签的中心点坐标
+ *
+ * @param items 待处理的标签数组（y 为中心点坐标）
+ * @param spacing 垂直最小间距（标签边缘之间的间距）
+ * @param minY 标签中心点的上边界
+ * @param maxY 标签中心点的下边界
+ */
+export function distributeLabels(
+  items: LabelItem[],
+  spacing: number,
+  minY: number,
+  maxY: number,
+): LabelItem[] {
+  // 避免除零风险
+  if (items.length <= 1) return items.map((item) => ({ ...item }));
+
+  // 按照 Y 坐标排序 (从上到下)
+  const sorted = items.map((item) => ({ ...item })).sort((a, b) => a.y - b.y);
+
+  // === 预检测：是否需要退避 ===
+  // 检查是否有任何标签重叠或超出边界
+  const hasOverlap = sorted.some((item, i) => {
+    if (i === 0) return false;
+    const prev = sorted[i - 1];
+    // 中心点间距 < 两个半高度之和 → 有重叠
+    return item.y - prev.y < (prev.height + item.height) / 2;
+  });
+
+  const firstItem = sorted[0];
+  const lastItem = sorted[sorted.length - 1];
+  const isOutOfBounds =
+    firstItem.y - firstItem.height / 2 < minY ||
+    lastItem.y + lastItem.height / 2 > maxY;
+
+  // 如果没有重叠且都在边界内，直接返回原位置
+  if (!hasOverlap && !isOutOfBounds) {
+    return sorted;
+  }
+
+  // === 第一步：计算总高度需求，动态调整间距 ===
+  const totalLabelsHeight = sorted.reduce((sum, item) => sum + item.height, 0);
+  const availableSpace = maxY - minY;
+  const requiredSpaceWithIdealSpacing =
+    totalLabelsHeight + spacing * (sorted.length - 1);
+
+  // 如果理想间距放不下，动态压缩间距（最小为0）
+  let actualSpacing = spacing;
+  if (requiredSpaceWithIdealSpacing > availableSpace) {
+    const excessSpace = availableSpace - totalLabelsHeight;
+    actualSpacing = Math.max(0, excessSpace / (sorted.length - 1));
+  }
+
+  // === 第二步：向下挤压 (Downwards push) ===
+  // y 为中心点坐标
+  // 当前标签中心 必须 >= 前一标签中心 + 两个半高度之和 + 间距
+  for (let i = 1; i < sorted.length; i++) {
+    const prev = sorted[i - 1];
+    const curr = sorted[i];
+
+    const minAllowedY =
+      prev.y + (prev.height + curr.height) / 2 + actualSpacing;
+    if (curr.y < minAllowedY) {
+      curr.y = minAllowedY;
+    }
+  }
+
+  // === 第三步：边界钳制 + 向上回推 (Upwards push) ===
+  // 如果最后一个标签超出下边界，从下往上回推
+  const lastIdx = sorted.length - 1;
+  const last = sorted[lastIdx];
+  if (last.y + last.height / 2 > maxY) {
+    // 先把最后一个钳制到边界内（中心点 = 下边界 - 半高度）
+    last.y = maxY - last.height / 2;
+
+    // 然后从下往上检查，如果上一个标签被挤到了，就往上推
+    for (let i = lastIdx - 1; i >= 0; i--) {
+      const next = sorted[i + 1];
+      const curr = sorted[i];
+
+      const maxAllowedY =
+        next.y - (next.height + curr.height) / 2 - actualSpacing;
+      if (curr.y > maxAllowedY) {
+        curr.y = maxAllowedY;
+      }
+    }
+  }
+
+  // === 第四步：上边界钳制 ===
+  // 如果向上回推后，第一个标签超出上边界，整体往下移
+  const first = sorted[0];
+  if (first.y - first.height / 2 < minY) {
+    const shift = minY - (first.y - first.height / 2);
+    sorted.forEach((item) => (item.y += shift));
+  }
+
+  return sorted;
+}

package/src/designs/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './color';
 export * from './hierarchy-color';
 export * from './item';
+export * from './normalize-percent';

package/src/designs/utils/normalize-percent.ts

@@ -0,0 +1,33 @@
+/**
+ * 规范化百分比输入
+ *
+ * 支持以下格式：
+ * - "2%" 或 "2.5%" → 2 或 2.5
+ * - 2 或 2.5 (数字直接作为百分比) → 2 或 2.5
+ *
+ * @param value - 百分比值，可以是数字或带 "%" 的字符串
+ * @returns 规范化后的百分比数值
+ *
+ * @example
+ * ```typescript
+ * normalizePercent("2%");   // 返回 2
+ * normalizePercent("2.5%"); // 返回 2.5
+ * normalizePercent(2);      // 返回 2
+ * normalizePercent(2.5);    // 返回 2.5
+ * ```
+ */
+export function normalizePercent(value: number | string | undefined): number {
+  if (value === undefined || value === null) return 0;
+
+  // 处理字符串格式 (如 "2%" 或 "2.5%")
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    // 移除可能的 '%' 后缀，然后解析
+    const numStr = trimmed.endsWith('%') ? trimmed.slice(0, -1) : trimmed;
+    const num = parseFloat(numStr);
+    return isNaN(num) ? 0 : num;
+  }
+
+  // 数字直接作为百分比使用
+  return value;
+}