Fix chart loading issues and remove sample position data

- Fixed TradingChart data generation to use unique daily timestamps - Removed sample position data from trading page - Added better error handling and logging to chart initialization - Fixed time format issues that were preventing chart rendering - Added test pages for debugging chart functionality
2025-07-16 12:54:48 +02:00
parent 1ee8aa9fe7
commit 4fe9c1342c
8 changed files with 459 additions and 22 deletions
--- a/app/chart-debug/page.tsx
+++ b/app/chart-debug/page.tsx
@@ -0,0 +1,111 @@
+'use client'
+import React, { useEffect, useRef, useState } from 'react'
+
+export default function ChartDebug() {
+  const chartContainerRef = useRef<HTMLDivElement>(null)
+  const [logs, setLogs] = useState<string[]>([])
+  const [chartCreated, setChartCreated] = useState(false)
+
+  const addLog = (message: string) => {
+    console.log(message)
+    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
+  }
+
+  useEffect(() => {
+    if (!chartContainerRef.current) {
+      addLog('Chart container ref not available')
+      return
+    }
+
+    const initChart = async () => {
+      try {
+        addLog('Starting chart initialization...')
+        
+        // Import lightweight-charts
+        const LightweightCharts = await import('lightweight-charts')
+        addLog('Lightweight charts imported successfully')
+        
+        const { createChart, CandlestickSeries } = LightweightCharts
+        addLog('createChart and CandlestickSeries extracted')
+
+        // Create chart with minimal options
+        const chart = createChart(chartContainerRef.current!, {
+          width: 600,
+          height: 300,
+        })
+        addLog('Chart created successfully')
+        setChartCreated(true)
+
+        // Add candlestick series with the correct v5 API
+        const candlestickSeries = chart.addSeries(CandlestickSeries, {
+          upColor: '#26a69a',
+          downColor: '#ef5350',
+          borderDownColor: '#ef5350',
+          borderUpColor: '#26a69a',
+          wickDownColor: '#ef5350',
+          wickUpColor: '#26a69a',
+        })
+        addLog('Candlestick series added')
+
+        // Very simple test data
+        const testData = [
+          { time: '2023-01-01', open: 100, high: 110, low: 95, close: 105 },
+          { time: '2023-01-02', open: 105, high: 115, low: 100, close: 110 },
+          { time: '2023-01-03', open: 110, high: 120, low: 105, close: 115 },
+          { time: '2023-01-04', open: 115, high: 125, low: 110, close: 120 },
+          { time: '2023-01-05', open: 120, high: 130, low: 115, close: 125 },
+        ]
+        
+        addLog(`Setting data with ${testData.length} points`)
+        candlestickSeries.setData(testData)
+        addLog('Data set successfully - chart should be visible now')
+
+        // Cleanup function
+        return () => {
+          addLog('Cleaning up chart')
+          chart.remove()
+        }
+
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        addLog(`Error: ${errorMessage}`)
+        console.error('Chart error:', error)
+      }
+    }
+
+    initChart()
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-8">
+      <h1 className="text-white text-2xl mb-4">Chart Debug Test</h1>
+      
+      <div className="mb-4">
+        <h2 className="text-white text-lg mb-2">Status</h2>
+        <div className="text-gray-400">
+          Chart Created: {chartCreated ? '✅ Yes' : '❌ No'}
+        </div>
+      </div>
+
+      <div className="mb-4">
+        <h2 className="text-white text-lg mb-2">Chart Container</h2>
+        <div 
+          ref={chartContainerRef} 
+          className="bg-gray-800 border border-gray-600 rounded"
+          style={{ width: '600px', height: '300px' }}
+        />
+      </div>
+
+      <div>
+        <h2 className="text-white text-lg mb-2">Debug Logs</h2>
+        <div className="bg-gray-800 p-4 rounded max-h-60 overflow-y-auto">
+          {logs.map((log, index) => (
+            <div key={index} className="text-gray-300 text-sm font-mono">
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}