@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
67 lines (66 loc) • 1.78 kB
TypeScript
/**
* Figma环形图组件 - 基于v2真实实现
* 学习HVACDonutChart的mask和foreignObject技术，遵循shadcn/ui + Radix模式
*/
import * as React from "react";
import { type VariantProps } from "class-variance-authority";
export interface FigmaDonutChartProps extends React.ComponentPropsWithoutRef<"div">, Omit<VariantProps<typeof figmaDonutChartVariants>, 'size'> {
/**
* 进度值（0-100）
*/
value: number;
/**
* 最大值
* @default 100
*/
maxValue?: number;
/**
* 图表尺寸（宽高相等）
* @default 195
*/
size?: number;
/**
* 环形线条粗细
* @default 12
*/
strokeWidth?: number;
/**
* 是否显示中心文本
* @default true
*/
showLabel?: boolean;
/**
* 中心文本格式
* @default 'value/max'
*/
labelFormat?: 'percent' | 'value' | 'value/max' | 'custom';
/**
* 自定义中心文本
*/
customLabel?: string;
/**
* 环形颜色（支持渐变）
* @default 使用默认的蓝色渐变
*/
color?: string;
/**
* 背景环形颜色
* @default rgba(255, 255, 255, 0.1)
*/
trackColor?: string;
/**
* 是否显示外圈边框
* @default true
*/
showOuterBorder?: boolean;
/**
* 是否显示动画
* @default true
*/
animated?: boolean;
}
declare const figmaDonutChartVariants: (props?: ({
size?: "sm" | "lg" | "md" | "xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
declare const FigmaDonutChart: React.ForwardRefExoticComponent<FigmaDonutChartProps & React.RefAttributes<HTMLDivElement>>;
export { FigmaDonutChart, figmaDonutChartVariants };