update pay function
This commit is contained in:
396
src/views/DataBrowser/KLineChartView.tsx
Normal file
396
src/views/DataBrowser/KLineChartView.tsx
Normal file
@@ -0,0 +1,396 @@
|
||||
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: 'line', // 使用折线图模式
|
||||
line: {
|
||||
upColor: themeColors.primary.gold,
|
||||
downColor: themeColors.primary.gold,
|
||||
style: 'solid',
|
||||
size: 2,
|
||||
},
|
||||
},
|
||||
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?.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;
|
||||
@@ -31,7 +31,7 @@ import {
|
||||
} from '@chakra-ui/react';
|
||||
import { FaTable, FaChartLine, FaCalendar, FaDownload } from 'react-icons/fa';
|
||||
import { fetchMetricData, MetricDataResponse, TreeMetric } from '@services/categoryService';
|
||||
import TradingViewChart from './TradingViewChart';
|
||||
import KLineChartView from './KLineChartView';
|
||||
|
||||
// 黑金主题配色
|
||||
const themeColors = {
|
||||
@@ -277,10 +277,10 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
|
||||
</TabList>
|
||||
|
||||
<TabPanels>
|
||||
{/* 折线图 - 使用 TradingView Lightweight Charts */}
|
||||
{/* 折线图 - 使用 KLineChart */}
|
||||
<TabPanel p={4}>
|
||||
{metricData && metricData.data.length > 0 ? (
|
||||
<TradingViewChart
|
||||
<KLineChartView
|
||||
data={metricData.data}
|
||||
metricName={metricData.metric_name}
|
||||
unit={metricData.unit}
|
||||
|
||||
Reference in New Issue
Block a user