396 lines
11 KiB
TypeScript
396 lines
11 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import {
|
||
Box,
|
||
VStack,
|
||
HStack,
|
||
Text,
|
||
Button,
|
||
ButtonGroup,
|
||
Flex,
|
||
Icon,
|
||
Tooltip,
|
||
} from '@chakra-ui/react';
|
||
import { init, dispose } from 'klinecharts';
|
||
import {
|
||
FaExpand,
|
||
FaCompress,
|
||
FaCamera,
|
||
FaRedo,
|
||
} from 'react-icons/fa';
|
||
import { MetricDataPoint } from '@services/categoryService';
|
||
|
||
// 黑金主题配色
|
||
const themeColors = {
|
||
bg: {
|
||
primary: '#0a0a0a',
|
||
secondary: '#1a1a1a',
|
||
card: '#1e1e1e',
|
||
},
|
||
text: {
|
||
primary: '#ffffff',
|
||
secondary: '#b8b8b8',
|
||
muted: '#808080',
|
||
gold: '#D4AF37',
|
||
},
|
||
border: {
|
||
default: 'rgba(255, 255, 255, 0.1)',
|
||
gold: 'rgba(212, 175, 55, 0.3)',
|
||
},
|
||
primary: {
|
||
gold: '#D4AF37',
|
||
goldLight: '#F4E3A7',
|
||
},
|
||
};
|
||
|
||
interface KLineChartViewProps {
|
||
data: MetricDataPoint[];
|
||
metricName: string;
|
||
unit: string;
|
||
frequency: string;
|
||
}
|
||
|
||
type TimeRange = '1M' | '3M' | '6M' | '1Y' | 'YTD' | 'ALL';
|
||
|
||
const KLineChartView: React.FC<KLineChartViewProps> = ({
|
||
data,
|
||
metricName,
|
||
unit,
|
||
frequency,
|
||
}) => {
|
||
const chartContainerRef = useRef<HTMLDivElement>(null);
|
||
const chartRef = useRef<any>(null);
|
||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||
const [selectedRange, setSelectedRange] = useState<TimeRange>('ALL');
|
||
|
||
// 初始化图表
|
||
useEffect(() => {
|
||
if (!chartContainerRef.current || data.length === 0) return;
|
||
|
||
// 创建图表实例
|
||
const chart = init(chartContainerRef.current, {
|
||
styles: {
|
||
grid: {
|
||
horizontal: {
|
||
color: 'rgba(255, 255, 255, 0.05)',
|
||
},
|
||
vertical: {
|
||
color: 'rgba(255, 255, 255, 0.05)',
|
||
},
|
||
},
|
||
candle: {
|
||
type: 'area' as const, // 使用面积图模式
|
||
area: {
|
||
lineColor: themeColors.primary.gold,
|
||
lineSize: 2,
|
||
backgroundColor: [`${themeColors.primary.gold}30`, `${themeColors.primary.gold}05`],
|
||
},
|
||
} as any,
|
||
crosshair: {
|
||
horizontal: {
|
||
line: {
|
||
color: themeColors.primary.gold,
|
||
style: 'dashed',
|
||
size: 1,
|
||
},
|
||
text: {
|
||
backgroundColor: themeColors.primary.gold,
|
||
color: themeColors.bg.primary,
|
||
},
|
||
},
|
||
vertical: {
|
||
line: {
|
||
color: themeColors.primary.gold,
|
||
style: 'dashed',
|
||
size: 1,
|
||
},
|
||
text: {
|
||
backgroundColor: themeColors.primary.gold,
|
||
color: themeColors.bg.primary,
|
||
},
|
||
},
|
||
},
|
||
xAxis: {
|
||
axisLine: {
|
||
color: themeColors.border.default,
|
||
},
|
||
tickLine: {
|
||
color: themeColors.border.default,
|
||
},
|
||
tickText: {
|
||
color: themeColors.text.secondary,
|
||
},
|
||
},
|
||
yAxis: {
|
||
axisLine: {
|
||
color: themeColors.border.default,
|
||
},
|
||
tickLine: {
|
||
color: themeColors.border.default,
|
||
},
|
||
tickText: {
|
||
color: themeColors.text.secondary,
|
||
},
|
||
},
|
||
},
|
||
});
|
||
|
||
// 转换数据格式
|
||
const chartData = data
|
||
.filter((item) => item.value !== null)
|
||
.map((item) => ({
|
||
timestamp: new Date(item.date).getTime(),
|
||
open: item.value,
|
||
high: item.value,
|
||
low: item.value,
|
||
close: item.value,
|
||
}))
|
||
.sort((a, b) => a.timestamp - b.timestamp);
|
||
|
||
// 设置数据
|
||
(chart as any)?.applyNewData(chartData);
|
||
|
||
chartRef.current = chart;
|
||
|
||
// 清理
|
||
return () => {
|
||
if (chartRef.current) {
|
||
dispose(chartContainerRef.current!);
|
||
chartRef.current = null;
|
||
}
|
||
};
|
||
}, [data]);
|
||
|
||
// 时间范围筛选
|
||
const handleTimeRangeChange = (range: TimeRange) => {
|
||
setSelectedRange(range);
|
||
// TODO: 实现时间范围筛选逻辑
|
||
};
|
||
|
||
// 重置缩放
|
||
const handleReset = () => {
|
||
chartRef.current?.zoomAtCoordinate({ x: 0.5 }, 1);
|
||
setSelectedRange('ALL');
|
||
};
|
||
|
||
// 截图功能
|
||
const handleScreenshot = () => {
|
||
if (!chartRef.current) return;
|
||
const imageUrl = chartRef.current.getConvertPictureUrl();
|
||
const link = document.createElement('a');
|
||
link.href = imageUrl;
|
||
link.download = `${metricName}_${new Date().toISOString().split('T')[0]}.png`;
|
||
link.click();
|
||
};
|
||
|
||
// 全屏切换
|
||
const toggleFullscreen = () => {
|
||
if (!chartContainerRef.current) return;
|
||
|
||
if (!isFullscreen) {
|
||
if (chartContainerRef.current.requestFullscreen) {
|
||
chartContainerRef.current.requestFullscreen();
|
||
}
|
||
} else {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
}
|
||
}
|
||
setIsFullscreen(!isFullscreen);
|
||
};
|
||
|
||
// 计算统计数据
|
||
const stats = React.useMemo(() => {
|
||
const values = data.filter((item) => item.value !== null).map((item) => item.value as number);
|
||
|
||
if (values.length === 0) {
|
||
return { min: 0, max: 0, avg: 0, latest: 0, change: 0, changePercent: 0 };
|
||
}
|
||
|
||
const min = Math.min(...values);
|
||
const max = Math.max(...values);
|
||
const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
|
||
const latest = values[values.length - 1];
|
||
const first = values[0];
|
||
const change = latest - first;
|
||
const changePercent = first !== 0 ? (change / first) * 100 : 0;
|
||
|
||
return { min, max, avg, latest, change, changePercent };
|
||
}, [data]);
|
||
|
||
// 格式化数字
|
||
const formatNumber = (num: number) => {
|
||
if (Math.abs(num) >= 1e9) {
|
||
return (num / 1e9).toFixed(2) + 'B';
|
||
}
|
||
if (Math.abs(num) >= 1e6) {
|
||
return (num / 1e6).toFixed(2) + 'M';
|
||
}
|
||
if (Math.abs(num) >= 1e3) {
|
||
return (num / 1e3).toFixed(2) + 'K';
|
||
}
|
||
return num.toFixed(2);
|
||
};
|
||
|
||
return (
|
||
<VStack align="stretch" spacing={4} w="100%">
|
||
{/* 工具栏 */}
|
||
<Flex justify="space-between" align="center" wrap="wrap" gap={4}>
|
||
{/* 时间范围选择 */}
|
||
<ButtonGroup size="sm" isAttached variant="outline">
|
||
{(['1M', '3M', '6M', '1Y', 'YTD', 'ALL'] as TimeRange[]).map((range) => (
|
||
<Button
|
||
key={range}
|
||
onClick={() => handleTimeRangeChange(range)}
|
||
bg={selectedRange === range ? themeColors.primary.gold : 'transparent'}
|
||
color={
|
||
selectedRange === range ? themeColors.bg.primary : themeColors.text.secondary
|
||
}
|
||
borderColor={themeColors.border.gold}
|
||
_hover={{
|
||
bg: selectedRange === range ? themeColors.primary.goldLight : themeColors.bg.card,
|
||
}}
|
||
>
|
||
{range}
|
||
</Button>
|
||
))}
|
||
</ButtonGroup>
|
||
|
||
{/* 图表操作 */}
|
||
<HStack spacing={2}>
|
||
<Tooltip label="重置视图">
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
color={themeColors.text.secondary}
|
||
_hover={{ color: themeColors.primary.gold }}
|
||
onClick={handleReset}
|
||
>
|
||
<Icon as={FaRedo} />
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip label="截图">
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
color={themeColors.text.secondary}
|
||
_hover={{ color: themeColors.primary.gold }}
|
||
onClick={handleScreenshot}
|
||
>
|
||
<Icon as={FaCamera} />
|
||
</Button>
|
||
</Tooltip>
|
||
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'}>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
color={themeColors.text.secondary}
|
||
_hover={{ color: themeColors.primary.gold }}
|
||
onClick={toggleFullscreen}
|
||
>
|
||
<Icon as={isFullscreen ? FaCompress : FaExpand} />
|
||
</Button>
|
||
</Tooltip>
|
||
</HStack>
|
||
</Flex>
|
||
|
||
{/* 统计数据 */}
|
||
<Flex
|
||
justify="space-around"
|
||
align="center"
|
||
bg={themeColors.bg.secondary}
|
||
p={3}
|
||
borderRadius="md"
|
||
borderWidth="1px"
|
||
borderColor={themeColors.border.default}
|
||
wrap="wrap"
|
||
gap={4}
|
||
>
|
||
<VStack spacing={0}>
|
||
<Text color={themeColors.text.muted} fontSize="xs">
|
||
最新值
|
||
</Text>
|
||
<Text color={themeColors.text.gold} fontSize="lg" fontWeight="bold">
|
||
{formatNumber(stats.latest)} {unit}
|
||
</Text>
|
||
<Text
|
||
color={stats.change >= 0 ? '#00ff88' : '#ff4444'}
|
||
fontSize="xs"
|
||
fontWeight="bold"
|
||
>
|
||
{stats.change >= 0 ? '+' : ''}
|
||
{formatNumber(stats.change)} ({stats.changePercent.toFixed(2)}%)
|
||
</Text>
|
||
</VStack>
|
||
|
||
<VStack spacing={0}>
|
||
<Text color={themeColors.text.muted} fontSize="xs">
|
||
平均值
|
||
</Text>
|
||
<Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
|
||
{formatNumber(stats.avg)} {unit}
|
||
</Text>
|
||
</VStack>
|
||
|
||
<VStack spacing={0}>
|
||
<Text color={themeColors.text.muted} fontSize="xs">
|
||
最高值
|
||
</Text>
|
||
<Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
|
||
{formatNumber(stats.max)} {unit}
|
||
</Text>
|
||
</VStack>
|
||
|
||
<VStack spacing={0}>
|
||
<Text color={themeColors.text.muted} fontSize="xs">
|
||
最低值
|
||
</Text>
|
||
<Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
|
||
{formatNumber(stats.min)} {unit}
|
||
</Text>
|
||
</VStack>
|
||
|
||
<VStack spacing={0}>
|
||
<Text color={themeColors.text.muted} fontSize="xs">
|
||
数据点数
|
||
</Text>
|
||
<Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
|
||
{data.filter((item) => item.value !== null).length}
|
||
</Text>
|
||
</VStack>
|
||
|
||
<VStack spacing={0}>
|
||
<Text color={themeColors.text.muted} fontSize="xs">
|
||
频率
|
||
</Text>
|
||
<Text color={themeColors.text.primary} fontSize="md" fontWeight="bold">
|
||
{frequency}
|
||
</Text>
|
||
</VStack>
|
||
</Flex>
|
||
|
||
{/* 图表容器 */}
|
||
<Box
|
||
ref={chartContainerRef}
|
||
w="100%"
|
||
h="500px"
|
||
borderRadius="md"
|
||
borderWidth="1px"
|
||
borderColor={themeColors.border.gold}
|
||
overflow="hidden"
|
||
position="relative"
|
||
bg={themeColors.bg.card}
|
||
/>
|
||
|
||
{/* 提示信息 */}
|
||
<Flex justify="space-between" align="center" fontSize="xs" color={themeColors.text.muted}>
|
||
<HStack spacing={4}>
|
||
<Text>💡 提示：滚轮缩放，拖拽移动视图</Text>
|
||
</HStack>
|
||
<Text>数据来源: {metricName}</Text>
|
||
</Flex>
|
||
</VStack>
|
||
);
|
||
};
|
||
|
||
export default KLineChartView;
|