update pay function

src/views/DataBrowser/MetricDataModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   Modal,
   ModalOverlay,
@@ -30,8 +30,8 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { FaTable, FaChartLine, FaCalendar, FaDownload } from 'react-icons/fa';
-import ReactECharts from 'echarts-for-react';
 import { fetchMetricData, MetricDataResponse, TreeMetric } from '@services/categoryService';
+import TradingViewChart from './TradingViewChart';
 
 // 黑金主题配色
 const themeColors = {
@@ -98,131 +98,7 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
     }
   };
 
-  // 准备图表数据
-  const chartOption = useMemo(() => {
-    if (!metricData || !metricData.data || metricData.data.length === 0) {
-      return null;
-    }
-
-    const dates = metricData.data.map((item) => item.date);
-    const values = metricData.data.map((item) => item.value);
-
-    return {
-      backgroundColor: 'transparent',
-      title: {
-        text: metricData.metric_name,
-        left: 'center',
-        textStyle: {
-          color: themeColors.text.gold,
-          fontSize: 16,
-          fontWeight: 'bold',
-        },
-      },
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: themeColors.bg.card,
-        borderColor: themeColors.border.gold,
-        textStyle: {
-          color: themeColors.text.primary,
-        },
-        formatter: (params: any) => {
-          const param = params[0];
-          return `
-            <div style="padding: 8px;">
-              <div style="color: ${themeColors.text.gold}; font-weight: bold; margin-bottom: 4px;">
-                ${param.name}
-              </div>
-              <div style="color: ${themeColors.text.secondary};">
-                ${param.seriesName}: ${param.value !== null ? param.value.toLocaleString() : '-'} ${metricData.unit || ''}
-              </div>
-            </div>
-          `;
-        },
-      },
-      grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '10%',
-        top: '15%',
-        containLabel: true,
-      },
-      xAxis: {
-        type: 'category',
-        data: dates,
-        axisLabel: {
-          color: themeColors.text.secondary,
-          rotate: 45,
-          fontSize: 10,
-        },
-        axisLine: {
-          lineStyle: {
-            color: themeColors.border.default,
-          },
-        },
-      },
-      yAxis: {
-        type: 'value',
-        name: metricData.unit || '',
-        nameTextStyle: {
-          color: themeColors.text.gold,
-        },
-        axisLabel: {
-          color: themeColors.text.secondary,
-          formatter: (value: number) => value.toLocaleString(),
-        },
-        splitLine: {
-          lineStyle: {
-            color: themeColors.border.default,
-            type: 'dashed',
-          },
-        },
-        axisLine: {
-          lineStyle: {
-            color: themeColors.border.default,
-          },
-        },
-      },
-      series: [
-        {
-          name: metricData.metric_name,
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 6,
-          lineStyle: {
-            color: themeColors.primary.gold,
-            width: 2,
-          },
-          itemStyle: {
-            color: themeColors.primary.gold,
-            borderColor: themeColors.primary.goldLight,
-            borderWidth: 2,
-          },
-          areaStyle: {
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: 'rgba(212, 175, 55, 0.3)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(212, 175, 55, 0.05)',
-                },
-              ],
-            },
-          },
-          data: values,
-          connectNulls: true,
-        },
-      ],
-    };
-  }, [metricData]);
+  // 数据已经在 metricData 中，直接传递给 TradingViewChart
 
   // 导出CSV
   const handleExportCSV = () => {
@@ -401,24 +277,15 @@ const MetricDataModal: React.FC<MetricDataModalProps> = ({ isOpen, onClose, metr
                   </TabList>
 
                   <TabPanels>
-                    {/* 折线图 */}
+                    {/* 折线图 - 使用 TradingView Lightweight Charts */}
                     <TabPanel p={4}>
-                      {chartOption ? (
-                        <Box>
-                          <ReactECharts
-                            option={chartOption}
-                            style={{ height: '500px', width: '100%' }}
-                            opts={{ renderer: 'svg' }}
-                          />
-                          <Text
-                            textAlign="center"
-                            color={themeColors.text.muted}
-                            fontSize="sm"
-                            mt={2}
-                          >
-                            共 {metricData.data.length} 条数据点
-                          </Text>
-                        </Box>
+                      {metricData && metricData.data.length > 0 ? (
+                        <TradingViewChart
+                          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>