vf_react/src/utils/priceFormatters.js

// src/utils/priceFormatters.js
// 价格相关的工具函数 - 中国A股配色：红涨绿跌

import React from 'react';
import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';

/**
 * 获取价格变化的文字颜色
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getPriceChangeColor = (value) => {
    if (value === null || value === undefined) return 'gray.500';

    const absValue = Math.abs(value);

    if (value > 0) {
        // 上涨用红色，根据涨幅大小使用不同深浅
        if (absValue >= 3) return 'red.600';      // 深红色：3%以上
        if (absValue >= 1) return 'red.500';      // 中红色：1-3%
        return 'red.400';                         // 浅红色：0-1%
    } else if (value < 0) {
        // 下跌用绿色，根据跌幅大小使用不同深浅
        if (absValue >= 3) return 'green.600';    // 深绿色：3%以上
        if (absValue >= 1) return 'green.500';    // 中绿色：1-3%
        return 'green.400';                       // 浅绿色：0-1%
    }
    return 'gray.500';
};

/**
 * 获取价格变化的背景颜色
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getPriceChangeBg = (value) => {
    if (value === null || value === undefined) return 'gray.50';

    const absValue = Math.abs(value);

    if (value > 0) {
        // 上涨背景色
        if (absValue >= 3) return 'red.100';      // 深色背景：3%以上
        if (absValue >= 1) return 'red.50';       // 中色背景：1-3%
        return 'red.50';                          // 浅色背景：0-1%
    } else if (value < 0) {
        // 下跌背景色
        if (absValue >= 3) return 'green.100';    // 深色背景：3%以上
        if (absValue >= 1) return 'green.50';     // 中色背景：1-3%
        return 'green.50';                        // 浅色背景：0-1%
    }
    return 'gray.50';
};

/**
 * 获取价格变化的边框颜色
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @returns {string} Chakra UI 颜色值
 */
export const getPriceChangeBorderColor = (value) => {
    if (value === null || value === undefined) return 'gray.300';

    const absValue = Math.abs(value);

    if (value > 0) {
        // 上涨边框色
        if (absValue >= 3) return 'red.500';      // 深边框：3%以上
        if (absValue >= 1) return 'red.400';      // 中边框：1-3%
        return 'red.300';                         // 浅边框：0-1%
    } else if (value < 0) {
        // 下跌边框色
        if (absValue >= 3) return 'green.500';    // 深边框：3%以上
        if (absValue >= 1) return 'green.400';    // 中边框：1-3%
        return 'green.300';                       // 浅边框：0-1%
    }
    return 'gray.300';
};

/**
 * 格式化价格变化为字符串
 * @param {number|null|undefined} value - 涨跌幅百分比
 * @param {number} decimals - 小数位数，默认2位
 * @returns {string} 格式化后的字符串，例如 "+5.23%" 或 "-2.10%"
 */
export const formatPriceChange = (value, decimals = 2) => {
    if (value === null || value === undefined) return '--%';

    const sign = value > 0 ? '+' : '';
    return `${sign}${value.toFixed(decimals)}%`;
};

/**
 * 价格涨跌箭头组件
 * @param {Object} props
 * @param {number|null|undefined} props.value - 涨跌幅百分比
 * @returns {JSX.Element|null}
 */
export const PriceArrow = ({ value }) => {
    if (value === null || value === undefined) return null;

    const Icon = value > 0 ? TriangleUpIcon : TriangleDownIcon;
    const color = value > 0 ? 'red.500' : 'green.500';

    return <Icon color={color} boxSize="16px" />;
};

// ==================== 货币/数值格式化 ====================

/**
 * 格式化货币金额（自动选择单位：亿元/万元/元）
 * @param {number|null|undefined} value - 金额（单位：元）
 * @returns {string} 格式化后的金额字符串
 */
export const formatCurrency = (value) => {
    if (value === null || value === undefined) return '-';
    const absValue = Math.abs(value);
    if (absValue >= 100000000) {
        return (value / 100000000).toFixed(2) + '亿元';
    } else if (absValue >= 10000) {
        return (value / 10000).toFixed(2) + '万元';
    }
    return value.toFixed(2) + '元';
};

/**
 * 格式化业务营收（支持指定单位）
 * @param {number|null|undefined} value - 营收金额
 * @param {string} [unit] - 原始单位（元/万元/亿元）
 * @returns {string} 格式化后的营收字符串
 */
export const formatBusinessRevenue = (value, unit) => {
    if (value === null || value === undefined) return '-';
    if (unit) {
        if (unit === '元') {
            const absValue = Math.abs(value);
            if (absValue >= 100000000) {
                return (value / 100000000).toFixed(2) + '亿元';
            } else if (absValue >= 10000) {
                return (value / 10000).toFixed(2) + '万元';
            }
            return value.toFixed(0) + '元';
        } else if (unit === '万元') {
            const absValue = Math.abs(value);
            if (absValue >= 10000) {
                return (value / 10000).toFixed(2) + '亿元';
            }
            return value.toFixed(2) + '万元';
        } else if (unit === '亿元') {
            return value.toFixed(2) + '亿元';
        } else {
            return value.toFixed(2) + unit;
        }
    }
    // 无单位时，假设为元
    const absValue = Math.abs(value);
    if (absValue >= 100000000) {
        return (value / 100000000).toFixed(2) + '亿元';
    } else if (absValue >= 10000) {
        return (value / 10000).toFixed(2) + '万元';
    }
    return value.toFixed(2) + '元';
};

/**
 * 格式化百分比
 * @param {number|null|undefined} value - 百分比值
 * @param {number} [decimals=2] - 小数位数
 * @returns {string} 格式化后的百分比字符串
 */
export const formatPercentage = (value, decimals = 2) => {
    if (value === null || value === undefined) return '-';
    return value.toFixed(decimals) + '%';
};