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

app/simple-chart/page.tsx

@@ -1,30 +1,41 @@
 'use client'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 export default function SimpleChart() {
   const chartContainerRef = useRef<HTMLDivElement>(null)
+  const [status, setStatus] = useState('Initializing...')
 
   useEffect(() => {
     if (!chartContainerRef.current) return
 
     const initChart = async () => {
       try {
+        setStatus('Loading lightweight-charts...')
         console.log('Importing lightweight-charts...')
-        const LightweightCharts = await import('lightweight-charts')
-        console.log('Lightweight charts imported:', LightweightCharts)
         
-        const { createChart, ColorType } = LightweightCharts
+        const LightweightCharts = await import('lightweight-charts')
+        console.log('Lightweight charts imported successfully')
+        setStatus('Creating chart...')
+        
+        const { createChart, ColorType, CandlestickSeries } = LightweightCharts
 
         const chart = createChart(chartContainerRef.current!, {
           layout: {
             background: { type: ColorType.Solid, color: '#1a1a1a' },
             textColor: '#ffffff',
           },
-          width: 800,
+          width: chartContainerRef.current!.clientWidth || 800,
           height: 400,
+          grid: {
+            vertLines: { color: 'rgba(42, 46, 57, 0.5)' },
+            horzLines: { color: 'rgba(42, 46, 57, 0.5)' },
+          },
         })
 
-        const candlestickSeries = chart.addCandlestickSeries({
+        setStatus('Adding candlestick series...')
+        console.log('Chart created, adding candlestick series...')
+
+        const candlestickSeries = chart.addSeries(CandlestickSeries, {
           upColor: '#26a69a',
           downColor: '#ef5350',
           borderDownColor: '#ef5350',
@@ -33,19 +44,57 @@ export default function SimpleChart() {
           wickUpColor: '#26a69a',
         })
 
-        // Simple test data
-        candlestickSeries.setData([
-          { time: '2023-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
-          { time: '2023-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
-          { time: '2023-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
-          { time: '2023-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
-          { time: '2023-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
-        ])
+        // Generate sample data
+        const data = []
+        const baseTime = new Date(Date.now() - 100 * 60 * 1000) // 100 minutes ago
+        let price = 166.5
 
+        for (let i = 0; i < 100; i++) {
+          const currentTime = new Date(baseTime.getTime() + i * 60 * 1000) // 1 minute intervals
+          const timeString = currentTime.toISOString().split('T')[0] // YYYY-MM-DD format
+          const change = (Math.random() - 0.5) * 2 // Random price change
+          const open = price
+          const close = price + change
+          const high = Math.max(open, close) + Math.random() * 1
+          const low = Math.min(open, close) - Math.random() * 1
+
+          data.push({
+            time: timeString,
+            open: Number(open.toFixed(2)),
+            high: Number(high.toFixed(2)),
+            low: Number(low.toFixed(2)),
+            close: Number(close.toFixed(2)),
+          })
+
+          price = close
+        }
+
+        console.log('Setting chart data...', data.length, 'points')
+        candlestickSeries.setData(data)
+
+        setStatus('Chart loaded successfully!')
         console.log('Chart created successfully!')
 
+        // Handle resize
+        const handleResize = () => {
+          if (chartContainerRef.current) {
+            chart.applyOptions({
+              width: chartContainerRef.current.clientWidth,
+            })
+          }
+        }
+
+        window.addEventListener('resize', handleResize)
+
+        return () => {
+          window.removeEventListener('resize', handleResize)
+          chart.remove()
+        }
+
       } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error)
         console.error('Error creating chart:', error)
+        setStatus(`Error: ${errorMessage}`)
       }
     }
 
@@ -55,7 +104,12 @@ export default function SimpleChart() {
   return (
     <div className="min-h-screen bg-gray-900 p-8">
       <h1 className="text-white text-2xl mb-4">Lightweight Charts Test</h1>
-      <div ref={chartContainerRef} className="bg-gray-800 rounded" />
+      <div className="text-gray-400 mb-4">Status: {status}</div>
+      <div 
+        ref={chartContainerRef} 
+        className="bg-gray-800 rounded w-full h-96" 
+        style={{ minHeight: '400px' }}
+      />
     </div>
   )
 }