106 lines
3.7 KiB
JavaScript
106 lines
3.7 KiB
JavaScript
// 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" />;
|
||
};
|