@antv/infographic 0.0.1-beta.1

package/src/designs/items/ProgressCard.tsx

@@ -0,0 +1,198 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import {
+  ComponentType,
+  Defs,
+  getElementBounds,
+  Group,
+  Rect,
+} from '@antv/infographic-jsx';
+import { scaleLinear } from 'd3';
+import tinycolor from 'tinycolor2';
+import { ItemDesc, ItemIcon, ItemLabel, ItemValue } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+import type { BaseItemProps } from './types';
+
+export interface ProgressCardProps extends BaseItemProps {
+  width?: number;
+  height?: number;
+  iconSize?: number;
+  gap?: number;
+  progressHeight?: number;
+  borderRadius?: number;
+}
+
+export const ProgressCard: ComponentType<ProgressCardProps> = (props) => {
+  const [
+    {
+      datum,
+      data,
+      indexes,
+      width = 280,
+      height = 120,
+      iconSize = 32,
+      gap = 12,
+      progressHeight = 8,
+      borderRadius = 12,
+      positionH = 'normal',
+      themeColors,
+      valueFormatter = (v: any) => `${v}%`,
+    },
+    restProps,
+  ] = getItemProps(props, [
+    'width',
+    'height',
+    'iconSize',
+    'gap',
+    'progressHeight',
+    'borderRadius',
+  ]);
+
+  const value = datum.value;
+  const displayValue = value ?? 0;
+  const maxValue = Math.max(...data.items.map((item) => item.value ?? 0), 100);
+  const progressWidth = width - 2 * gap;
+
+  // 计算进度条的填充宽度
+  const progressScale = scaleLinear()
+    .domain([0, maxValue])
+    .range([0, progressWidth]);
+  const progressFillWidth = progressScale(displayValue);
+
+  // 生成唯一的渐变ID
+  const gradientId = `${themeColors.colorPrimary}-progress`;
+  const progressBgId = `${themeColors.colorPrimaryBg}-progress-bg`;
+
+  // 获取元素边界用于布局计算
+  const labelBounds = getElementBounds(<ItemLabel indexes={indexes} />);
+
+  // 计算布局位置
+  const contentY = gap;
+  const iconX = positionH === 'flipped' ? width - gap - iconSize : gap;
+  const iconY = contentY;
+
+  const textStartX = positionH === 'flipped' ? gap : iconSize + 2 * gap;
+  const textWidth = width - iconSize - 3 * gap;
+  const textY = iconY;
+  const progressY = height - gap - progressHeight;
+  const hasValue = value !== undefined;
+
+  return (
+    <Group {...restProps}>
+      {/* 定义渐变 */}
+      <Defs>
+        <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor={themeColors.colorPrimary} />
+          <stop
+            offset="100%"
+            stopColor={tinycolor
+              .mix(themeColors.colorPrimary, '#fff', 20)
+              .toHexString()}
+          />
+        </linearGradient>
+        <linearGradient id={progressBgId} x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor={themeColors.colorPrimaryBg} />
+          <stop offset="100%" stopColor={themeColors.colorBg} />
+        </linearGradient>
+      </Defs>
+
+      {/* 卡片背景 */}
+      <Rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={themeColors.colorBgElevated}
+        stroke={themeColors.colorPrimaryBg}
+        strokeWidth={1}
+        rx={borderRadius}
+        ry={borderRadius}
+      />
+
+      {/* 图标 */}
+      <ItemIcon
+        indexes={indexes}
+        x={iconX}
+        y={iconY}
+        size={iconSize}
+        fill={themeColors.colorPrimary}
+      />
+
+      {/* 标签 */}
+      <ItemLabel
+        indexes={indexes}
+        x={textStartX}
+        y={textY}
+        width={textWidth}
+        alignHorizontal={positionH === 'flipped' ? 'right' : 'left'}
+        alignVertical="top"
+        fontSize={16}
+        fontWeight="medium"
+        fill={themeColors.colorText}
+      >
+        {datum.label}
+      </ItemLabel>
+
+      {/* 数值 */}
+      {hasValue && (
+        <ItemValue
+          indexes={indexes}
+          x={textStartX}
+          y={textY + labelBounds.height}
+          width={textWidth}
+          alignHorizontal={positionH === 'flipped' ? 'right' : 'left'}
+          alignVertical="top"
+          lineHeight={1}
+          fontSize={24}
+          fontWeight="bold"
+          fill={themeColors.colorPrimary}
+          value={displayValue}
+          formatter={valueFormatter}
+        />
+      )}
+
+      {/* 描述 */}
+      <ItemDesc
+        indexes={indexes}
+        x={textStartX}
+        y={textY + labelBounds.height + (hasValue ? 27 : 4)}
+        width={textWidth}
+        alignHorizontal={positionH === 'flipped' ? 'right' : 'left'}
+        alignVertical="top"
+        fontSize={11}
+        fill={themeColors.colorTextSecondary}
+        lineNumber={hasValue ? 2 : 3}
+        wordWrap={true}
+      >
+        {datum.desc}
+      </ItemDesc>
+
+      {/* 进度条背景 */}
+      <Rect
+        x={gap}
+        y={progressY}
+        width={progressWidth}
+        height={progressHeight}
+        fill={`url(#${progressBgId})`}
+        rx={progressHeight / 2}
+        ry={progressHeight / 2}
+      />
+
+      {/* 进度条填充 */}
+      <Rect
+        x={gap}
+        y={progressY}
+        width={progressFillWidth}
+        height={progressHeight}
+        fill={`url(#${gradientId})`}
+        rx={progressHeight / 2}
+        ry={progressHeight / 2}
+      />
+    </Group>
+  );
+};
+
+registerItem('progress-card', {
+  component: ProgressCard,
+  composites: ['icon', 'label', 'value', 'desc'],
+});

package/src/designs/items/QuarterCircular.tsx

@@ -0,0 +1,284 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import {
+  ComponentType,
+  Ellipse,
+  getElementBounds,
+  Group,
+  Path,
+  Text,
+} from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+import type { BaseItemProps } from './types';
+
+export interface QuarterCircularProps extends BaseItemProps {
+  width?: number;
+  height?: number;
+  iconSize?: number;
+  circleRadius?: number;
+}
+
+export const QuarterCircular: ComponentType<QuarterCircularProps> = (props) => {
+  const [
+    {
+      datum,
+      indexes,
+      width = 280,
+      height = 120,
+      iconSize = 30,
+      circleRadius = 80,
+      positionH = 'normal',
+      positionV = 'normal',
+      themeColors,
+    },
+    restProps,
+  ] = getItemProps(props, ['width', 'height', 'iconSize', 'circleRadius']);
+
+  // 圆的质心
+  const CIRCLE_MASS = (4 * circleRadius) / (3 * Math.PI);
+
+  // 配置参数
+  const LINE_WIDTH = 2;
+  const DOT_RADIUS = 4;
+  const VALUE_SIZE = 28;
+  const CARD_Y = 20;
+  const CARD_CONTENT_Y = CARD_Y + 20;
+  const LABEL_Y = CARD_Y;
+  const DESC_Y_OFFSET = 8;
+  const DECORATION_VERTICAL_SPACING = 35;
+  const DECORATION_HORIZONTAL_SPACING = 40;
+  const DECORATION_END_SPACING = 30;
+
+  // 序号（使用 indexes 的第一个值 + 1）
+  const indexStr = String(indexes[0] + 1).padStart(2, '0');
+
+  // 根据 positionH 调整布局
+  const isFlipped = positionH === 'flipped';
+  const isCentered = positionH === 'center';
+
+  // 根据 positionV 调整布局
+  const isVFlipped = positionV === 'flipped';
+
+  // 计算装饰线的坐标
+  const getDecorationCoords = () => {
+    if (isFlipped) {
+      // 右对齐（镜像布局）
+      return {
+        diagonalStartX: width - DOT_RADIUS,
+        diagonalStartY: isVFlipped
+          ? height - DECORATION_VERTICAL_SPACING
+          : DECORATION_VERTICAL_SPACING,
+        diagonalEndX: width - DECORATION_HORIZONTAL_SPACING,
+        diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
+        topLineStartX: width - DECORATION_HORIZONTAL_SPACING,
+        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 {
+        diagonalStartX: DOT_RADIUS,
+        diagonalStartY: isVFlipped
+          ? height - DECORATION_VERTICAL_SPACING
+          : DECORATION_VERTICAL_SPACING,
+        diagonalEndX: DECORATION_HORIZONTAL_SPACING,
+        diagonalEndY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
+        topLineStartX: DECORATION_HORIZONTAL_SPACING,
+        topLineEndX: width - CIRCLE_MASS,
+        topLineY: isVFlipped ? height - DOT_RADIUS : DOT_RADIUS,
+      };
+    }
+  };
+
+  // 计算内容区域的坐标
+  const getContentCoords = () => {
+    if (isFlipped) {
+      // 右对齐（镜像布局）
+      const contentX = circleRadius + 10;
+      const contentWidth = width - contentX - DECORATION_HORIZONTAL_SPACING;
+      return {
+        valueX: width - DECORATION_END_SPACING,
+        contentX,
+        contentWidth,
+        circleX: 0,
+        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 {
+        valueX: 0,
+        contentX: DECORATION_HORIZONTAL_SPACING,
+        contentWidth: width - DECORATION_HORIZONTAL_SPACING - circleRadius - 10,
+        circleX: width,
+        circleY: isVFlipped ? 0 : height,
+        iconX: width - CIRCLE_MASS - iconSize / 2,
+      };
+    }
+  };
+
+  // 获取坐标值
+  const decorationCoords = getDecorationCoords();
+  const contentCoords = getContentCoords();
+
+  // 计算图标Y坐标
+  const iconY = isVFlipped
+    ? CIRCLE_MASS - iconSize / 2
+    : height - CIRCLE_MASS - iconSize / 2;
+
+  // 获取文本尺寸
+  const labelBounds = getElementBounds(
+    <ItemLabel indexes={indexes} width={contentCoords.contentWidth}>
+      {datum.label}
+    </ItemLabel>,
+  );
+
+  const descY = LABEL_Y + labelBounds.height + DESC_Y_OFFSET;
+
+  // 生成1/4圆路径
+  const getQuarterCirclePath = () => {
+    const { circleX, circleY } = contentCoords;
+
+    if (isFlipped) {
+      return isVFlipped
+        ? `M ${circleX} ${circleY} L ${circleX} ${circleY + circleRadius} A ${circleRadius} ${circleRadius} 0 0 0 ${circleX + circleRadius} ${circleY} Z`
+        : `M ${circleX} ${circleY} L ${circleX} ${circleY - circleRadius} A ${circleRadius} ${circleRadius} 0 0 1 ${circleX + circleRadius} ${circleY} Z`;
+    } else {
+      return isVFlipped
+        ? `M ${circleX} ${circleY} L ${circleX} ${circleY + circleRadius} A ${circleRadius} ${circleRadius} 0 0 1 ${circleX - circleRadius} ${circleY} Z`
+        : `M ${circleX} ${circleY} L ${circleX} ${circleY - circleRadius} A ${circleRadius} ${circleRadius} 0 0 0 ${circleX - circleRadius} ${circleY} Z`;
+    }
+  };
+
+  return (
+    <Group {...restProps} width={width} height={height}>
+      {/* 装饰线条组 */}
+      <Group>
+        {/* 左侧对角线 */}
+        <Path
+          d={`M ${decorationCoords.diagonalStartX} ${decorationCoords.diagonalStartY} L ${decorationCoords.diagonalEndX} ${decorationCoords.diagonalEndY}`}
+          stroke={themeColors.colorPrimary}
+          strokeWidth={LINE_WIDTH}
+          fill="none"
+        />
+
+        {/* 顶部横线 */}
+        <Path
+          d={`M ${decorationCoords.topLineStartX} ${decorationCoords.topLineY} L ${decorationCoords.topLineEndX} ${decorationCoords.topLineY}`}
+          stroke={themeColors.colorPrimary}
+          strokeWidth={LINE_WIDTH}
+          fill="none"
+        />
+
+        {/* 左侧圆点 */}
+        <Ellipse
+          x={decorationCoords.diagonalStartX - DOT_RADIUS}
+          y={decorationCoords.diagonalStartY - DOT_RADIUS}
+          width={DOT_RADIUS * 2}
+          height={DOT_RADIUS * 2}
+          fill={themeColors.colorPrimary}
+        />
+
+        {/* 顶部终点圆点 */}
+        <Ellipse
+          x={decorationCoords.topLineEndX - DOT_RADIUS}
+          y={decorationCoords.topLineY - DOT_RADIUS}
+          width={DOT_RADIUS * 2}
+          height={DOT_RADIUS * 2}
+          fill={themeColors.colorPrimary}
+        />
+      </Group>
+
+      {/* 内容组 */}
+      <Group>
+        {/* 序号 */}
+        <Text
+          x={contentCoords.valueX}
+          y={CARD_CONTENT_Y}
+          fontSize={VALUE_SIZE}
+          fontWeight="bold"
+          fill={themeColors.colorPrimary}
+          width={40}
+        >
+          {indexStr}
+        </Text>
+
+        {/* 1/4 圆背景 */}
+        <Path d={getQuarterCirclePath()} fill={themeColors.colorPrimary} />
+
+        {/* 图标 */}
+        {datum.icon && (
+          <ItemIcon
+            indexes={indexes}
+            x={contentCoords.iconX}
+            y={iconY}
+            size={iconSize}
+            fill={themeColors.colorWhite}
+          />
+        )}
+
+        {/* 标题 */}
+        {datum.label && (
+          <ItemLabel
+            indexes={indexes}
+            x={contentCoords.contentX}
+            y={LABEL_Y}
+            width={contentCoords.contentWidth}
+            fontWeight="bold"
+            fill={themeColors.colorText}
+          >
+            {datum.label}
+          </ItemLabel>
+        )}
+
+        {/* 描述 */}
+        {datum.desc && (
+          <ItemDesc
+            indexes={indexes}
+            x={contentCoords.contentX}
+            y={descY}
+            width={contentCoords.contentWidth}
+            fill={themeColors.colorTextSecondary}
+          >
+            {datum.desc}
+          </ItemDesc>
+        )}
+      </Group>
+    </Group>
+  );
+};
+
+registerItem('quarter-circular', {
+  component: QuarterCircular,
+  composites: ['icon', 'label', 'desc'],
+});

package/src/designs/items/QuarterSimpleCard.tsx

@@ -0,0 +1,210 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import {
+  ComponentType,
+  Group,
+  Path,
+  getElementBounds,
+} from '@antv/infographic-jsx';
+import { ItemDesc, ItemIcon, ItemLabel } from '../components';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+import type { BaseItemProps } from './types';
+
+export interface QuarterSimpleCardProps extends BaseItemProps {
+  width?: number;
+  height?: number;
+  iconSize?: number;
+  padding?: number;
+  borderRadius?: number;
+}
+
+export const QuarterSimpleCard: ComponentType<QuarterSimpleCardProps> = (
+  props,
+) => {
+  const [
+    {
+      datum,
+      indexes,
+      width = 150,
+      height = 150,
+      iconSize = 30,
+      padding = 20,
+      borderRadius = 16,
+      positionH = 'center',
+      positionV = 'center',
+      themeColors,
+    },
+    restProps,
+  ] = getItemProps(props, [
+    'width',
+    'height',
+    'iconSize',
+    'padding',
+    'borderRadius',
+  ]);
+
+  // 计算内容区域
+  const contentWidth = width - padding * 2;
+  const contentX = padding;
+  const contentY = padding;
+
+  // 图标位置
+  const iconX =
+    positionH === 'flipped'
+      ? width - padding - iconSize
+      : positionH === 'center'
+        ? (width - iconSize) / 2
+        : contentX;
+
+  const iconY = contentY;
+
+  // 标签位置（图标下方）
+  const labelY = iconY + iconSize + 8;
+  const labelBounds = getElementBounds(
+    <ItemLabel indexes={indexes} width={contentWidth}>
+      {datum.label}
+    </ItemLabel>,
+  );
+
+  const labelX =
+    positionH === 'flipped'
+      ? width - padding - contentWidth
+      : positionH === 'center'
+        ? padding
+        : contentX;
+
+  // 描述位置（标签下方）
+  const descY = labelY + labelBounds.height + 4;
+  const descX = labelX;
+
+  // 根据 positionH 和 positionV 决定直角位置
+  const r = borderRadius;
+  let cardPath = '';
+
+  if (positionH === 'center' && positionV === 'center') {
+    // 四个角都为圆角
+    cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+  } else if (positionH === 'flipped' && positionV === 'flipped') {
+    // 直角在左下角
+    cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 0
+  L ${r} 0
+  Z
+`;
+  } else if (positionH === 'normal' && positionV === 'flipped') {
+    // 右上角为直角，其它角为圆角
+    cardPath = `
+  M 0 0
+  L ${width} 0
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+  } else if (positionH === 'flipped') {
+    // 直角在左上角
+    cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height - r}
+  Q ${width} ${height} ${width - r} ${height}
+  L 0 ${height}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+  } else {
+    // 默认逻辑：直角在右下角
+    cardPath = `
+  M ${r} 0
+  L ${width - r} 0
+  Q ${width} 0 ${width} ${r}
+  L ${width} ${height}
+  L ${r} ${height}
+  Q 0 ${height} 0 ${height - r}
+  L 0 ${r}
+  Q 0 0 ${r} 0
+  Z
+`;
+  }
+
+  return (
+    <Group {...restProps}>
+      {/* 背景卡片 - 三个圆角 */}
+      <Path
+        d={cardPath}
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={themeColors.colorPrimary}
+      />
+
+      {/* 图标 */}
+      <ItemIcon
+        indexes={indexes}
+        x={iconX}
+        y={iconY}
+        size={iconSize}
+        fill={themeColors.colorBg}
+      />
+
+      {/* 标签 */}
+      <ItemLabel
+        indexes={indexes}
+        x={labelX}
+        y={labelY}
+        width={contentWidth}
+        fontSize={14}
+        fontWeight="bold"
+        fill={themeColors.colorBg}
+        alignHorizontal={positionH === 'flipped' ? 'right' : 'left'}
+      >
+        {datum.label}
+      </ItemLabel>
+
+      {/* 描述 */}
+      {datum.desc && (
+        <ItemDesc
+          indexes={indexes}
+          x={descX}
+          y={descY}
+          width={contentWidth}
+          fontSize={11}
+          wordWrap={true}
+          fill={themeColors.colorBg}
+          alignHorizontal={positionH === 'flipped' ? 'right' : 'left'}
+        >
+          {datum.desc}
+        </ItemDesc>
+      )}
+    </Group>
+  );
+};
+
+registerItem('quarter-simple-card', {
+  component: QuarterSimpleCard,
+  composites: ['icon', 'label', 'desc'],
+});