@cainiaofe/cn-ui-charts/src/components/cn-statistic-card/types.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;
}