update pay function

src/views/DataBrowser/TradingViewChart.tsx

@@ -11,7 +11,8 @@ import {
   useColorMode,
   Tooltip,
 } from '@chakra-ui/react';
-import { createChart, IChartApi, ISeriesApi, LineData, Time } from 'lightweight-charts';
+import * as LightweightCharts from 'lightweight-charts';
+import type { IChartApi, ISeriesApi, LineData, Time } from 'lightweight-charts';
 import {
   FaExpand,
   FaCompress,
@@ -70,109 +71,141 @@ const TradingViewChart: React.FC<TradingViewChartProps> = ({
   useEffect(() => {
     if (!chartContainerRef.current || data.length === 0) return;
 
-    // 创建图表 (lightweight-charts 5.0 标准 API)
+    try {
-    const chart = createChart(chartContainerRef.current, {
+      // 调试信息
-      width: chartContainerRef.current.clientWidth,
+      console.log('🔍 TradingView Chart - 开始初始化');
-      height: 500,
+      console.log('📦 LightweightCharts 模块:', LightweightCharts);
-      layout: {
+      console.log('📊 createChart 函数类型:', typeof LightweightCharts.createChart);
-        background: { type: 'solid', color: themeColors.bg.card },
-        textColor: themeColors.text.secondary,
-      },
-      grid: {
-        vertLines: {
-          color: 'rgba(255, 255, 255, 0.05)',
-        },
-        horzLines: {
-          color: 'rgba(255, 255, 255, 0.05)',
-        },
-      },
-      crosshair: {
-        vertLine: {
-          color: themeColors.primary.gold,
-          width: 1,
-          style: 3, // 虚线
-          labelBackgroundColor: themeColors.primary.gold,
-        },
-        horzLine: {
-          color: themeColors.primary.gold,
-          width: 1,
-          style: 3,
-          labelBackgroundColor: themeColors.primary.gold,
-        },
-      },
-      rightPriceScale: {
-        borderColor: themeColors.border.default,
-      },
-      timeScale: {
-        borderColor: themeColors.border.default,
-        timeVisible: true,
-        secondsVisible: false,
-      },
-      handleScroll: {
-        mouseWheel: true,
-        pressedMouseMove: true,
-      },
-      handleScale: {
-        axisPressedMouseMove: true,
-        mouseWheel: true,
-        pinch: true,
-      },
-    });
 
-    // 创建折线系列 (lightweight-charts 5.0 标准 API)
+      // 创建图表 (lightweight-charts 5.0 标准 API)
-    const lineSeries = chart.addLineSeries({
+      const chart = LightweightCharts.createChart(chartContainerRef.current, {
-      color: themeColors.primary.gold,
+        width: chartContainerRef.current.clientWidth,
-      lineWidth: 2,
+        height: 500,
-      crosshairMarkerVisible: true,
+        layout: {
-      crosshairMarkerRadius: 6,
+          background: { type: 'solid', color: themeColors.bg.card },
-      crosshairMarkerBorderColor: themeColors.primary.goldLight,
+          textColor: themeColors.text.secondary,
-      crosshairMarkerBackgroundColor: themeColors.primary.gold,
+        },
-      lastValueVisible: true,
+        grid: {
-      priceLineVisible: true,
+          vertLines: {
-      priceLineColor: themeColors.primary.gold,
+            color: 'rgba(255, 255, 255, 0.05)',
-      priceLineWidth: 1,
+          },
-      priceLineStyle: 3, // 虚线
+          horzLines: {
-      title: metricName,
+            color: 'rgba(255, 255, 255, 0.05)',
-    });
+          },
-
+        },
-    // 转换数据格式
+        crosshair: {
-    const chartData: LineData[] = data
+          vertLine: {
-      .filter((item) => item.value !== null)
+            color: themeColors.primary.gold,
-      .map((item) => ({
+            width: 1,
-        time: item.date as Time,
+            style: 3, // 虚线
-        value: item.value as number,
+            labelBackgroundColor: themeColors.primary.gold,
-      }))
+          },
-      .sort((a, b) => {
+          horzLine: {
-        // 确保时间从左到右递增
+            color: themeColors.primary.gold,
-        const timeA = new Date(a.time as string).getTime();
+            width: 1,
-        const timeB = new Date(b.time as string).getTime();
+            style: 3,
-        return timeA - timeB;
+            labelBackgroundColor: themeColors.primary.gold,
+          },
+        },
+        rightPriceScale: {
+          borderColor: themeColors.border.default,
+        },
+        timeScale: {
+          borderColor: themeColors.border.default,
+          timeVisible: true,
+          secondsVisible: false,
+        },
+        handleScroll: {
+          mouseWheel: true,
+          pressedMouseMove: true,
+        },
+        handleScale: {
+          axisPressedMouseMove: true,
+          mouseWheel: true,
+          pinch: true,
+        },
       });
 
-    // 设置数据
+      // 调试信息
-    lineSeries.setData(chartData);
+      console.log('📈 Chart 对象:', chart);
+      console.log('📈 Chart 类型:', typeof chart);
+      console.log('📈 Chart 的方法:', Object.keys(chart));
+      console.log('📈 addLineSeries 存在?', typeof chart.addLineSeries);
 
-    // 自动缩放到合适的视图
+      // 检查 chart 对象是否有效
-    chart.timeScale().fitContent();
+      if (!chart || typeof chart.addLineSeries !== 'function') {
-
+        console.error('❌ createChart 返回的对象无效!');
-    chartRef.current = chart;
+        console.error('Chart 对象:', chart);
-    lineSeriesRef.current = lineSeries;
+        throw new Error('createChart 返回的对象没有 addLineSeries 方法');
-
-    // 响应式调整
-    const handleResize = () => {
-      if (chartContainerRef.current && chart) {
-        chart.applyOptions({
-          width: chartContainerRef.current.clientWidth,
-        });
       }
-    };
 
-    window.addEventListener('resize', handleResize);
+      // 创建折线系列 (lightweight-charts 5.0 标准 API)
+      const lineSeries = chart.addLineSeries({
+        color: themeColors.primary.gold,
+        lineWidth: 2,
+        crosshairMarkerVisible: true,
+        crosshairMarkerRadius: 6,
+        crosshairMarkerBorderColor: themeColors.primary.goldLight,
+        crosshairMarkerBackgroundColor: themeColors.primary.gold,
+        lastValueVisible: true,
+        priceLineVisible: true,
+        priceLineColor: themeColors.primary.gold,
+        priceLineWidth: 1,
+        priceLineStyle: 3, // 虚线
+        title: metricName,
+      });
 
-    return () => {
+      console.log('✅ LineSeries 创建成功');
-      window.removeEventListener('resize', handleResize);
+
-      chart.remove();
+      // 转换数据格式
-    };
+      const chartData: LineData[] = data
+        .filter((item) => item.value !== null)
+        .map((item) => ({
+          time: item.date as Time,
+          value: item.value as number,
+        }))
+        .sort((a, b) => {
+          // 确保时间从左到右递增
+          const timeA = new Date(a.time as string).getTime();
+          const timeB = new Date(b.time as string).getTime();
+          return timeA - timeB;
+        });
+
+      // 设置数据
+      lineSeries.setData(chartData);
+
+      // 自动缩放到合适的视图
+      chart.timeScale().fitContent();
+
+      chartRef.current = chart;
+      lineSeriesRef.current = lineSeries;
+
+      // 响应式调整
+      const handleResize = () => {
+        if (chartContainerRef.current && chart) {
+          chart.applyOptions({
+            width: chartContainerRef.current.clientWidth,
+          });
+        }
+      };
+
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart.remove();
+      };
+    } catch (error) {
+      console.error('❌ TradingView Chart 初始化失败:', error);
+      console.error('Error details:', {
+        message: error.message,
+        stack: error.stack,
+        LightweightChartsModule: LightweightCharts,
+        createChartType: typeof LightweightCharts.createChart,
+      });
+      // 重新抛出错误让 ErrorBoundary 捕获
+      throw error;
+    }
   }, [data, metricName]);
 
   // 时间范围筛选