377 lines
13 KiB
TypeScript
377 lines
13 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Modal,
|
|
ModalOverlay,
|
|
ModalContent,
|
|
ModalHeader,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
Box,
|
|
Tabs,
|
|
TabList,
|
|
TabPanels,
|
|
Tab,
|
|
TabPanel,
|
|
Table,
|
|
Thead,
|
|
Tbody,
|
|
Tr,
|
|
Th,
|
|
Td,
|
|
Text,
|
|
HStack,
|
|
VStack,
|
|
Badge,
|
|
Spinner,
|
|
Flex,
|
|
Icon,
|
|
Button,
|
|
Input,
|
|
useToast,
|
|
} from '@chakra-ui/react';
|
|
import { FaTable, FaChartLine, FaCalendar, FaDownload } from 'react-icons/fa';
|
|
import { fetchMetricData, MetricDataResponse, TreeMetric } from '@services/categoryService';
|
|
import SimpleLineChart from './SimpleLineChart';
|
|
|
|
// 黑金主题配色
|
|
const themeColors = {
|
|
bg: {
|
|
primary: '#0a0a0a',
|
|
secondary: '#1a1a1a',
|
|
card: '#1e1e1e',
|
|
cardHover: '#252525',
|
|
},
|
|
text: {
|
|
primary: '#ffffff',
|
|
secondary: '#b8b8b8',
|
|
muted: '#808080',
|
|
gold: '#D4AF37',
|
|
},
|
|
border: {
|
|
default: 'rgba(255, 255, 255, 0.1)',
|
|
gold: 'rgba(212, 175, 55, 0.3)',
|
|
goldGlow: 'rgba(212, 175, 55, 0.5)',
|
|
},
|
|
primary: {
|
|
gold: '#D4AF37',
|
|
goldLight: '#F4E3A7',
|
|
goldDark: '#B8941F',
|
|
},
|
|
};
|
|
|
|
interface MetricDataModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
metric: TreeMetric;
|
|
}
|
|
|
|
const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metric }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [metricData, setMetricData] = useState<MetricDataResponse | null>(null);
|
|
const [startDate, setStartDate] = useState('');
|
|
const [endDate, setEndDate] = useState('');
|
|
const [limit, setLimit] = useState(100);
|
|
const toast = useToast();
|
|
|
|
// 加载数据
|
|
useEffect(() => {
|
|
if (isOpen && metric) {
|
|
loadMetricData();
|
|
}
|
|
}, [isOpen, metric]);
|
|
|
|
const loadMetricData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchMetricData(metric.metric_id, startDate, endDate, limit);
|
|
setMetricData(data);
|
|
} catch (error) {
|
|
toast({
|
|
title: '加载失败',
|
|
description: '无法加载指标数据',
|
|
status: 'error',
|
|
duration: 3000,
|
|
isClosable: true,
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 数据已经在 metricData 中，直接传递给 TradingViewChart
|
|
|
|
// 导出CSV
|
|
const handleExportCSV = () => {
|
|
if (!metricData || !metricData.data) return;
|
|
|
|
const csvContent = [
|
|
['日期', '数值', '单位'].join(','),
|
|
...metricData.data.map((item) => [item.date, item.value ?? '', metricData.unit || ''].join(',')),
|
|
].join('\n');
|
|
|
|
const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
const link = document.createElement('a');
|
|
const url = URL.createObjectURL(blob);
|
|
link.setAttribute('href', url);
|
|
link.setAttribute('download', `${metricData.metric_name}_${Date.now()}.csv`);
|
|
link.style.visibility = 'hidden';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
toast({
|
|
title: '导出成功',
|
|
description: 'CSV 文件已下载',
|
|
status: 'success',
|
|
duration: 2000,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} size="6xl" isCentered>
|
|
<ModalOverlay bg="blackAlpha.800" />
|
|
<ModalContent
|
|
bg={themeColors.bg.card}
|
|
borderWidth="1px"
|
|
borderColor={themeColors.border.gold}
|
|
maxH="90vh"
|
|
>
|
|
<ModalHeader
|
|
bg={themeColors.bg.secondary}
|
|
borderBottomWidth="1px"
|
|
borderBottomColor={themeColors.border.gold}
|
|
>
|
|
<VStack align="stretch" spacing={2}>
|
|
<HStack justify="space-between">
|
|
<Text color={themeColors.text.gold} fontSize="lg" fontWeight="bold">
|
|
{metric.metric_name}
|
|
</Text>
|
|
<HStack spacing={2}>
|
|
<Badge bg={metric.source === 'SMM' ? 'blue.500' : 'green.500'} color="white">
|
|
{metric.source}
|
|
</Badge>
|
|
<Badge bg={themeColors.border.gold} color={themeColors.primary.gold}>
|
|
{metric.frequency}
|
|
</Badge>
|
|
</HStack>
|
|
</HStack>
|
|
<HStack spacing={4} fontSize="sm" color={themeColors.text.secondary}>
|
|
<Text>ID: {metric.metric_id}</Text>
|
|
{metric.unit && <Text>单位: {metric.unit}</Text>}
|
|
</HStack>
|
|
</VStack>
|
|
</ModalHeader>
|
|
<ModalCloseButton color={themeColors.text.secondary} />
|
|
|
|
<ModalBody p={0}>
|
|
{loading ? (
|
|
<Flex justify="center" align="center" py={20}>
|
|
<VStack spacing={4}>
|
|
<Spinner size="xl" color={themeColors.primary.gold} thickness="4px" />
|
|
<Text color={themeColors.text.secondary}>加载数据中...</Text>
|
|
</VStack>
|
|
</Flex>
|
|
) : (
|
|
<>
|
|
{/* 筛选工具栏 */}
|
|
<Box
|
|
p={4}
|
|
bg={themeColors.bg.secondary}
|
|
borderBottomWidth="1px"
|
|
borderBottomColor={themeColors.border.default}
|
|
>
|
|
<HStack spacing={4} wrap="wrap">
|
|
<HStack flex="1" minW="200px">
|
|
<Icon as={FaCalendar} color={themeColors.text.muted} />
|
|
<Input
|
|
type="date"
|
|
size="sm"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
bg={themeColors.bg.card}
|
|
borderColor={themeColors.border.default}
|
|
color={themeColors.text.primary}
|
|
_focus={{ borderColor: themeColors.primary.gold }}
|
|
/>
|
|
<Text color={themeColors.text.muted}>至</Text>
|
|
<Input
|
|
type="date"
|
|
size="sm"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
bg={themeColors.bg.card}
|
|
borderColor={themeColors.border.default}
|
|
color={themeColors.text.primary}
|
|
_focus={{ borderColor: themeColors.primary.gold }}
|
|
/>
|
|
</HStack>
|
|
<HStack>
|
|
<Text color={themeColors.text.muted} fontSize="sm">
|
|
限制:
|
|
</Text>
|
|
<Input
|
|
type="number"
|
|
size="sm"
|
|
w="100px"
|
|
value={limit}
|
|
onChange={(e) => setLimit(parseInt(e.target.value) || 100)}
|
|
bg={themeColors.bg.card}
|
|
borderColor={themeColors.border.default}
|
|
color={themeColors.text.primary}
|
|
_focus={{ borderColor: themeColors.primary.gold }}
|
|
/>
|
|
</HStack>
|
|
<Button
|
|
size="sm"
|
|
bg={themeColors.primary.gold}
|
|
color={themeColors.bg.primary}
|
|
_hover={{ bg: themeColors.primary.goldLight }}
|
|
onClick={loadMetricData}
|
|
>
|
|
查询
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
borderColor={themeColors.border.gold}
|
|
color={themeColors.text.gold}
|
|
leftIcon={<FaDownload />}
|
|
onClick={handleExportCSV}
|
|
isDisabled={!metricData || !metricData.data || metricData.data.length === 0}
|
|
>
|
|
导出CSV
|
|
</Button>
|
|
</HStack>
|
|
</Box>
|
|
|
|
{/* 数据展示 */}
|
|
{metricData && (
|
|
<Tabs
|
|
colorScheme="yellow"
|
|
variant="enclosed"
|
|
bg={themeColors.bg.primary}
|
|
>
|
|
<TabList borderBottomColor={themeColors.border.default}>
|
|
<Tab
|
|
color={themeColors.text.secondary}
|
|
_selected={{
|
|
color: themeColors.text.gold,
|
|
borderColor: themeColors.border.gold,
|
|
bg: themeColors.bg.card,
|
|
}}
|
|
>
|
|
<Icon as={FaChartLine} mr={2} />
|
|
折线图
|
|
</Tab>
|
|
<Tab
|
|
color={themeColors.text.secondary}
|
|
_selected={{
|
|
color: themeColors.text.gold,
|
|
borderColor: themeColors.border.gold,
|
|
bg: themeColors.bg.card,
|
|
}}
|
|
>
|
|
<Icon as={FaTable} mr={2} />
|
|
数据表格
|
|
</Tab>
|
|
</TabList>
|
|
|
|
<TabPanels>
|
|
{/* 折线图 - 使用简单 Canvas 实现 */}
|
|
<TabPanel p={4}>
|
|
{metricData && metricData.data.length > 0 ? (
|
|
<SimpleLineChart
|
|
data={metricData.data}
|
|
metricName={metricData.metric_name}
|
|
unit={metricData.unit}
|
|
frequency={metricData.frequency}
|
|
/>
|
|
) : (
|
|
<Flex justify="center" align="center" py={20}>
|
|
<Text color={themeColors.text.muted}>暂无数据</Text>
|
|
</Flex>
|
|
)}
|
|
</TabPanel>
|
|
|
|
{/* 数据表格 */}
|
|
<TabPanel p={0}>
|
|
<Box maxH="500px" overflowY="auto">
|
|
<Table variant="simple" size="sm">
|
|
<Thead
|
|
position="sticky"
|
|
top={0}
|
|
bg={themeColors.bg.secondary}
|
|
zIndex={1}
|
|
>
|
|
<Tr>
|
|
<Th
|
|
color={themeColors.text.gold}
|
|
borderColor={themeColors.border.default}
|
|
>
|
|
序号
|
|
</Th>
|
|
<Th
|
|
color={themeColors.text.gold}
|
|
borderColor={themeColors.border.default}
|
|
>
|
|
日期
|
|
</Th>
|
|
<Th
|
|
color={themeColors.text.gold}
|
|
borderColor={themeColors.border.default}
|
|
isNumeric
|
|
>
|
|
数值 {metricData.unit && `(${metricData.unit})`}
|
|
</Th>
|
|
</Tr>
|
|
</Thead>
|
|
<Tbody>
|
|
{metricData.data.map((item, index) => (
|
|
<Tr
|
|
key={index}
|
|
_hover={{ bg: themeColors.bg.cardHover }}
|
|
>
|
|
<Td
|
|
color={themeColors.text.muted}
|
|
borderColor={themeColors.border.default}
|
|
>
|
|
{index + 1}
|
|
</Td>
|
|
<Td
|
|
color={themeColors.text.secondary}
|
|
borderColor={themeColors.border.default}
|
|
>
|
|
{item.date}
|
|
</Td>
|
|
<Td
|
|
color={themeColors.text.primary}
|
|
borderColor={themeColors.border.default}
|
|
isNumeric
|
|
fontWeight="bold"
|
|
>
|
|
{item.value !== null ? item.value.toLocaleString() : '-'}
|
|
</Td>
|
|
</Tr>
|
|
))}
|
|
</Tbody>
|
|
</Table>
|
|
</Box>
|
|
{metricData.data.length === 0 && (
|
|
<Flex justify="center" align="center" py={20}>
|
|
<Text color={themeColors.text.muted}>暂无数据</Text>
|
|
</Flex>
|
|
)}
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
)}
|
|
</>
|
|
)}
|
|
</ModalBody>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default MetricDataModal;
|