@antv/infographic 0.1.2 → 0.1.4

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

@@ -0,0 +1,298 @@
+import { arc, pie, type PieArcDatum } from 'd3';
+import { ElementTypeEnum } from '../../constants';
+import type { ComponentType, JSXElement } from '../../jsx';
+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 { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface ChartPieProps extends BaseStructureProps {
+  radius?: number;
+  innerRadius?: number;
+  padding?: number;
+  showPercentage?: boolean;
+}
+
+export const ChartPie: ComponentType<ChartPieProps> = (props) => {
+  const {
+    Title,
+    Item,
+    data,
+    radius = 140,
+    innerRadius = 0,
+    padding = 30,
+    showPercentage = true,
+    options,
+  } = props;
+
+  const { title, desc, items = [] } = data;
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+
+  // 获取 Item 的预估尺寸
+  const sampleDatum: ItemDatum = items[0] ?? { label: '', value: 0 };
+  const itemBounds = getElementBounds(
+    <Item
+      indexes={[0]}
+      datum={sampleDatum}
+      data={data}
+      positionH="center"
+      positionV="middle"
+    />,
+  );
+
+  const labelWidth = itemBounds.width || 140;
+  const labelHeight = itemBounds.height || 32;
+
+  // 基础半径设置
+  const outerRadius = Math.max(radius, 60);
+
+  // 连线水平拉伸的系数
+  const extensionFactor = 1.35;
+  const textGap = 8;
+
+  // 计算画布中心和总尺寸
+  // 水平方向：半径 * 系数 + 间距 + 标签宽度 + 边缘padding
+  const maxHorizontalDistance =
+    outerRadius * extensionFactor + textGap + labelWidth;
+  const maxVerticalDistance = outerRadius;
+
+  const centerX = padding + maxHorizontalDistance;
+  const centerY = padding + maxVerticalDistance;
+
+  const totalWidth = centerX * 2;
+  const totalHeight = centerY * 2;
+
+  // 空数据处理
+  if (items.length === 0) {
+    return (
+      <FlexLayout
+        id="infographic-container"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        {titleContent}
+        <Group width={totalWidth} height={totalHeight}>
+          <BtnsGroup>
+            <BtnAdd
+              indexes={[0]}
+              x={centerX - btnBounds.width / 2}
+              y={centerY - btnBounds.height / 2}
+            />
+          </BtnsGroup>
+        </Group>
+      </FlexLayout>
+    );
+  }
+
+  const totalValue = items.reduce(
+    (sum, item) => sum + Math.max(item.value ?? 0, 0),
+    0,
+  );
+  const colorPrimary = getColorPrimary(options);
+  const themeColors = getThemeColors(options.themeConfig);
+
+  // 1. 饼图生成器
+  const pieGenerator = pie<ItemDatum>()
+    .value((item) => Math.max(item.value ?? 0, 0))
+    .sort(null)
+    .startAngle(0)
+    .endAngle(Math.PI * 2);
+
+  const arcData = pieGenerator(items);
+
+  // 2. 弧形生成器
+  const arcGenerator = arc<PieArcDatum<ItemDatum>>()
+    .innerRadius(innerRadius)
+    .outerRadius(outerRadius)
+    .cornerRadius(2);
+
+  // 连线起点
+  const innerArc = arc<PieArcDatum<ItemDatum>>()
+    .innerRadius(outerRadius)
+    .outerRadius(outerRadius);
+
+  // 连线拐点
+  const outerArc = arc<PieArcDatum<ItemDatum>>()
+    .innerRadius(outerRadius * 1.15)
+    .outerRadius(outerRadius * 1.15);
+
+  const percentTextRadius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const percentageArc = arc<PieArcDatum<ItemDatum>>()
+    .innerRadius(percentTextRadius)
+    .outerRadius(percentTextRadius);
+
+  // 删除按钮位置
+  const deleteButtonArc = arc<PieArcDatum<ItemDatum>>()
+    .innerRadius(outerRadius * 0.85)
+    .outerRadius(outerRadius * 0.85);
+
+  const sliceElements: JSXElement[] = [];
+  const percentElements: JSXElement[] = [];
+  const connectorElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+  const btnElements: JSXElement[] = [];
+
+  // 3. 遍历生成图形
+  arcData.forEach((arcDatum) => {
+    const currentItem = arcDatum.data;
+    const originalIndex = arcDatum.index;
+
+    const color =
+      getPaletteColor(options, [originalIndex]) ||
+      themeColors.colorPrimary ||
+      colorPrimary;
+
+    // --- 绘制扇形 ---
+    const pathD = arcGenerator(arcDatum) || '';
+    sliceElements.push(
+      <Path
+        d={pathD}
+        fill={color}
+        stroke={themeColors.colorBg}
+        strokeWidth={1}
+        data-element-type="shape"
+        width={outerRadius * 2}
+        height={outerRadius * 2}
+      />,
+    );
+
+    // --- 计算关键点 ---
+    const midAngle =
+      arcDatum.startAngle + (arcDatum.endAngle - arcDatum.startAngle) / 2;
+    const isRight = midAngle < Math.PI;
+
+    // 1. 起点
+    const p0 = innerArc.centroid(arcDatum);
+
+    // 2. 拐点
+    const p1 = outerArc.centroid(arcDatum);
+
+    // 3. 终点 (水平拉伸)
+    const labelXOffset = outerRadius * extensionFactor * (isRight ? 1 : -1);
+    const p2 = [labelXOffset, p1[1]];
+
+    // --- 绘制连线 ---
+    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}
+        fill="none"
+        data-element-type="shape"
+      />,
+    );
+
+    // --- 绘制 Item ---
+    const itemX = centerX + p2[0] + (isRight ? textGap : -textGap - labelWidth);
+    const itemY = centerY + p2[1] - labelHeight / 2;
+
+    itemElements.push(
+      <Item
+        indexes={[originalIndex]}
+        datum={currentItem}
+        data={data}
+        x={itemX}
+        y={itemY}
+        width={labelWidth}
+        height={labelHeight}
+        positionH={isRight ? 'normal' : 'flipped'}
+        positionV="middle"
+        themeColors={getThemeColors({ colorPrimary: color }, options)}
+      />,
+    );
+
+    // --- 绘制百分比 ---
+    if (showPercentage && totalValue > 0) {
+      const percentPos = percentageArc.centroid(arcDatum);
+      const value = Math.max(arcDatum.value, 0);
+      const percentText = ((value * 100) / totalValue).toFixed(1);
+
+      // 定义文本框尺寸
+      const textWidth = 50;
+      const textHeight = 20;
+
+      percentElements.push(
+        <Text
+          x={centerX + percentPos[0] - textWidth / 2}
+          y={centerY + percentPos[1] - textHeight / 2}
+          width={textWidth}
+          height={textHeight}
+          alignHorizontal="center"
+          alignVertical="middle"
+          fontSize={12}
+          fontWeight="bold"
+          fill="#ffffff"
+          data-value={value}
+          data-indexes={[originalIndex]}
+          data-element-type={ElementTypeEnum.ItemValue}
+        >
+          {`${percentText}%`}
+        </Text>,
+      );
+    }
+
+    // --- 绘制删除按钮 ---
+    const deletePos = deleteButtonArc.centroid(arcDatum);
+    btnElements.push(
+      <BtnRemove
+        indexes={[originalIndex]}
+        x={centerX + deletePos[0] - btnBounds.width / 2}
+        y={centerY + deletePos[1] - btnBounds.height / 2}
+      />,
+    );
+  });
+
+  // --- 绘制添加按钮 ---
+  arcData.forEach((arcDatum, index) => {
+    const nextIndex = (index + 1) % arcData.length;
+    const currentEnd = arcDatum.endAngle;
+    const nextStart =
+      arcData[nextIndex].startAngle + (nextIndex === 0 ? Math.PI * 2 : 0);
+    const midAngle = (currentEnd + nextStart) / 2;
+
+    const btnR = outerRadius * 1.0;
+    const btnX = Math.sin(midAngle) * btnR;
+    const btnY = -Math.cos(midAngle) * btnR;
+
+    btnElements.push(
+      <BtnAdd
+        indexes={[index + 1]}
+        x={centerX + btnX - btnBounds.width / 2}
+        y={centerY + btnY - btnBounds.height / 2}
+      />,
+    );
+  });
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      gap={30}
+    >
+      {titleContent}
+      <Group width={totalWidth} height={totalHeight}>
+        <Group x={centerX} y={centerY}>
+          {sliceElements}
+        </Group>
+        <Group>{connectorElements}</Group>
+        <Group>{percentElements}</Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('chart-pie', {
+  component: ChartPie,
+  composites: ['title', 'item'],
+});

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

@@ -0,0 +1,278 @@
+import { ElementTypeEnum } from '../../constants';
+import type { ComponentType, JSXElement } from '../../jsx';
+import { getElementBounds, Group, Text } from '../../jsx';
+import { ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { getColorPrimary, getPaletteColor } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+interface WordCandidate {
+  label: string;
+  value?: number;
+  color: string;
+  fontSize: number;
+  width: number;
+  height: number;
+}
+
+interface PlacedWord extends WordCandidate {
+  angle: number;
+  centerX: number;
+  centerY: number;
+  box: { x: number; y: number; width: number; height: number };
+}
+
+const DEFAULT_ROTATE_ANGLES = [0, 30, -30, 60, -60];
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+
+function getRotatedSize(width: number, height: number, angle: number) {
+  const rad = (Math.PI / 180) * angle;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return {
+    width: Math.abs(width * cos) + Math.abs(height * sin),
+    height: Math.abs(width * sin) + Math.abs(height * cos),
+  };
+}
+
+function hasCollision(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  placed: PlacedWord[],
+  padding: number,
+) {
+  const left = x - padding;
+  const right = x + width + padding;
+  const top = y - padding;
+  const bottom = y + height + padding;
+
+  return placed.some((word) => {
+    const wLeft = word.box.x - padding;
+    const wRight = word.box.x + word.box.width + padding;
+    const wTop = word.box.y - padding;
+    const wBottom = word.box.y + word.box.height + padding;
+    return !(
+      right <= wLeft ||
+      left >= wRight ||
+      bottom <= wTop ||
+      top >= wBottom
+    );
+  });
+}
+
+function placeWords(
+  words: WordCandidate[],
+  enableRotate: boolean,
+  padding: number,
+  spiralStep: number,
+  radiusStep: number,
+): PlacedWord[] {
+  const placed: PlacedWord[] = [];
+  const rotationAngles = enableRotate ? DEFAULT_ROTATE_ANGLES : [0];
+  const maxAttempts = Math.max(1600, words.length * 28);
+
+  words.forEach((word, wordIndex) => {
+    const sizeBias = Math.max(word.width, word.height);
+    const angleOffset = wordIndex * GOLDEN_ANGLE;
+    let extraRadius = 0;
+    let placedWord: PlacedWord | null = null;
+
+    for (let attempt = 0; attempt < maxAttempts && !placedWord; attempt++) {
+      if (attempt === Math.floor(maxAttempts * 0.6)) {
+        // Gradually expand the search radius for dense layouts
+        extraRadius = sizeBias;
+      }
+
+      const theta = angleOffset + attempt * spiralStep;
+      const radius =
+        radiusStep * Math.sqrt(attempt + 1) + extraRadius + sizeBias * 0.25;
+      const centerX = radius * Math.cos(theta);
+      const centerY = radius * Math.sin(theta);
+
+      for (const angle of rotationAngles) {
+        const rotated = getRotatedSize(word.width, word.height, angle);
+        const x = centerX - rotated.width / 2;
+        const y = centerY - rotated.height / 2;
+        if (
+          !hasCollision(x, y, rotated.width, rotated.height, placed, padding)
+        ) {
+          placedWord = {
+            ...word,
+            angle,
+            centerX,
+            centerY,
+            box: { x, y, width: rotated.width, height: rotated.height },
+          };
+          break;
+        }
+      }
+    }
+
+    if (!placedWord) {
+      const fallbackAngle = rotationAngles[wordIndex % rotationAngles.length];
+      const farRadius = radiusStep * Math.sqrt(maxAttempts + 1) + sizeBias;
+      const theta = angleOffset;
+      const centerX = farRadius * Math.cos(theta);
+      const centerY = farRadius * Math.sin(theta);
+      const rotated = getRotatedSize(word.width, word.height, fallbackAngle);
+      placedWord = {
+        ...word,
+        angle: fallbackAngle,
+        centerX,
+        centerY,
+        box: {
+          x: centerX - rotated.width / 2,
+          y: centerY - rotated.height / 2,
+          width: rotated.width,
+          height: rotated.height,
+        },
+      };
+    }
+
+    placed.push(placedWord);
+  });
+
+  return placed;
+}
+
+export interface ChartWordCloudProps extends BaseStructureProps {
+  minFontSize?: number;
+  maxFontSize?: number;
+  enableRotate?: boolean;
+  padding?: number;
+  spiralStep?: number;
+  radiusStep?: number;
+}
+
+export const ChartWordCloud: ComponentType<ChartWordCloudProps> = (props) => {
+  const {
+    data,
+    options,
+    minFontSize = 16,
+    maxFontSize = 48,
+    enableRotate = true,
+    padding = 6,
+    spiralStep = 0.45,
+    radiusStep = 10,
+  } = props;
+  const { items = [] } = data;
+
+  const validItems = items
+    .map((datum, index) => ({ datum, index }))
+    .filter(({ datum }) => datum.label);
+
+  if (validItems.length === 0) {
+    return (
+      <FlexLayout
+        id="infographic-container"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Group>
+          <ItemsGroup />
+        </Group>
+      </FlexLayout>
+    );
+  }
+
+  const values = validItems
+    .map(({ datum }) => datum.value)
+    .filter((v): v is number => typeof v === 'number');
+  const hasValues = values.length > 0;
+  const minValue = hasValues ? Math.min(...values) : 0;
+  const maxValue = hasValues ? Math.max(...values) : 0;
+  const sameValue = hasValues && minValue === maxValue;
+  const uniformSize = (minFontSize + maxFontSize) / 2;
+
+  const mapFontSize = (value?: number) => {
+    if (!hasValues || sameValue) return uniformSize;
+    if (value == null) return minFontSize;
+    const ratio = (value - minValue) / (maxValue - minValue || 1);
+    return minFontSize + ratio * (maxFontSize - minFontSize);
+  };
+
+  const words: WordCandidate[] = validItems
+    .map(({ datum, index }) => {
+      const fontSize = mapFontSize(datum.value);
+      const measured = getElementBounds(
+        <Text fontSize={fontSize} fontWeight="bold">
+          {datum.label}
+        </Text>,
+      );
+      const color =
+        getPaletteColor(options, [index]) ||
+        getColorPrimary(options) ||
+        '#333333';
+      return {
+        label: datum.label as string,
+        value: datum.value,
+        color,
+        fontSize,
+        width: measured.width * 1.05,
+        height: measured.height,
+      };
+    })
+    .sort((a, b) => b.fontSize - a.fontSize);
+
+  const placedWords = placeWords(
+    words,
+    enableRotate,
+    padding,
+    spiralStep,
+    radiusStep,
+  );
+
+  const minX = Math.min(...placedWords.map((w) => w.box.x));
+  const minY = Math.min(...placedWords.map((w) => w.box.y));
+  const maxX = Math.max(...placedWords.map((w) => w.box.x + w.box.width));
+  const maxY = Math.max(...placedWords.map((w) => w.box.y + w.box.height));
+  const offsetX = -minX + padding;
+  const offsetY = -minY + padding;
+  const containerWidth = maxX - minX + padding * 2;
+  const containerHeight = maxY - minY + padding * 2;
+
+  const wordElements: JSXElement[] = placedWords.map((word, index) => {
+    const translateX = word.centerX - word.width / 2 + offsetX;
+    const translateY = word.centerY - word.height / 2 + offsetY;
+    const rotationOriginX = word.width / 2;
+    const rotationOriginY = word.height / 2;
+    const transform = `translate(${translateX}, ${translateY}) rotate(${word.angle}, ${rotationOriginX}, ${rotationOriginY})`;
+
+    return (
+      <Group transform={transform}>
+        <Text
+          width={word.width}
+          height={word.height}
+          fontSize={word.fontSize}
+          fontWeight="bold"
+          alignHorizontal="center"
+          alignVertical="middle"
+          fill={word.color}
+          data-indexes={index}
+          data-element-type={ElementTypeEnum.ItemLabel}
+        >
+          {word.label}
+        </Text>
+      </Group>
+    );
+  });
+
+  return (
+    <ItemsGroup
+      id="infographic-container"
+      width={containerWidth}
+      height={containerHeight}
+    >
+      {wordElements}
+    </ItemsGroup>
+  );
+};
+
+registerStructure('chart-wordcloud', {
+  component: ChartWordCloud,
+  composites: ['item'],
+});

package/src/designs/structures/compare-binary-horizontal/dividers/pros-cons-arrow.tsx

@@ -35,10 +35,10 @@ export const ProsConsArrow: ComponentType<DividerProps> = (props) => {
           fill={colorNegative}
         />
       </ShapesGroup>
-      <Text x={45} y={15} {...textAttrs}>
+      <Text x={40} y={15} {...textAttrs}>
         Pros
       </Text>
-      <Text x={65} y={86} {...textAttrs}>
+      <Text x={70} y={85} {...textAttrs}>
         Cons
       </Text>
     </Group>