@cainiaofe/cn-ui-charts/lib/components/cn-statistic-card/types.d.ts

菜鸟图表组件

import { CSSProperties, ReactNode } from 'react';
import { G2ViewTree } from '@antv/g2/lib/runtime/types/options';
export interface IconProps {
    /**
     * 	icon 类头像的图标类型，可设为 Icon 的 type 或 ReactNode
     */
    icon?: string | ReactNode;
    /**
     * 图片类资源地址
     */
    src?: string;
    /**
     * icon 图表的尺寸，默认为 48px
     */
    size?: number;
    /**
     * icon 形状
     */
    shape?: 'circle' | 'square';
}
export interface TrendItemProps {
    x: string;
    y: number;
}
export interface TrendProps {
    /**
     * 趋势图标题
     */
    title?: string;
    /**
     * 趋势图数据
     */
    items: TrendItemProps[];
    /**
     * 自定义tooltip render
     */
    tooltip?: {
        render: (event: any, options: any) => HTMLElement | string;
    };
    /**
     * 自适应数据范围
     */
    autoDataDomainFit?: boolean;
    /**
     * 趋势图G2配置项
     */
    options?: G2ViewTree;
}
export interface StatisticProps {
    /**
     * 标题
     */
    title: ReactNode;
    /**
     * 指标卡状态
     */
    status?: 'error' | 'warning' | 'success' | 'processing';
    /**
     * 更新时间
     */
    updateTime?: string;
    /**
     * 标题后方的 tip 帮助信息
     */
    tip?: ReactNode;
    /**
     * 显示指标的前缀
     */
    prefix?: ReactNode;
    /**
     * 指标的值和显示格式
     */
    value: number;
    /**
     * 指标卡值的颜色
     */
    valueColor?: string;
    /**
     * 指标值的格式化，默认为 12,345 格式
     */
    formatter?: (v: number) => string;
    /**
     * 显示指标的后缀，一般是单位
     */
    suffix?: ReactNode;
    /**
     * 容器对应的 style 样式
     */
    style?: React.CSSProperties;
}
export interface CompareItem {
    /**
     * 衍生指标名称
     */
    text: string;
    /**
     * 衍生指标值
     */
    value: number;
    /**
     * 衍生指标值显示的格式化
     */
    formatter?: (v: number) => string;
    /**
     * 箭头方向，大于零向上，小于零向下，等于零不展示
     */
    arrowDirection?: number;
}
export interface PeriodItem {
    /**
     * 衍生指标名称
     */
    text: string;
    /**
     * 衍生指标值
     */
    value: string;
}
export interface PeriodProps {
    /**
     * 周期信息
     */
    items: PeriodItem[];
}
export interface CompareProps {
    /**
     * 衍生指标信息
     */
    items: CompareItem[];
    /**
     * 同环比的颜色值，默认为红涨绿跌
     */
    color?: (item: CompareItem) => string;
}
export interface ActionProps {
    text: string;
    onClick: () => void;
}
export interface ProgressProps {
    percent: number;
    title?: string;
    color?: string;
}
export interface CnStatisticCardProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
    /**
     * 容器className
     */
    className?: string;
    /**
     * 样式属性
     */
    style?: CSSProperties;
    /**
     * 是否取消内边距
     */
    noPadding?: boolean;
    /**
     * 是否边框
     */
    noBorder?: boolean;
    /**
     * 指标卡最左边的图标区域
     */
    icon?: IconProps;
    /**
     * 主指标区域配置
     */
    statistic?: StatisticProps;
    /**
     *副指标区域（周期）
     */
    period?: PeriodProps;
    /**
     * 副指标区域（同环比）
     */
    compare?: CompareProps;
    /**
     * 行动区域
     */
    action?: ActionProps | ReactNode;
    /**
     * 背景色
     */
    bgColor?: '#ECFAF2' | '#FDF1F3' | '#FEF8E2' | '#DEF1FD' | '#F7F0FE' | '#F2F2F6';
    /**
     * 迷你趋势图配置
     */
    trend?: TrendProps;
    /**
     * 进度条配置
     */
    progress?: ProgressProps;
    /**
     *支持hover事件
     */
    hover?: boolean;
    /**
     * 点击事件
     */
    onClick?: () => void;
    /**
     * 是否选中状态
     */
    active?: boolean;
    /**
     * 使用场景
     */
    shape?: 'statistic' | 'normal' | 'multipleIndicator';
    /**
     * multipleIndicator 模式下多个副指标
     */
    subIndicators?: Array<{
        /**
         * 标题
         */
        title: ReactNode;
        /**
         * 指标的值和显示格式
         */
        value: number;
        /**
         * 指标卡值的颜色
         */
        valueColor?: string;
        /**
         * 指标值的格式化，默认为 12,345 格式
         */
        formatter?: (v: number) => string;
    }>;
    horizontalConfig?: {
        columnGap?: number;
        rowGap?: number;
        columns?: number;
        size?: 'small' | 'medium' | 'large' | 'xs';
    };
    /**
     * 渲染前的勾子方法(每次render都会调用，慎重使用)
     */
    beforeRender?: (props: CnStatisticCardProps) => CnStatisticCardProps;
}