Add working TradingChart component with lightweight-charts

app/simple-chart/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+
+export default function SimpleChart() {
+  const chartContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!chartContainerRef.current) return
+
+    const initChart = async () => {
+      try {
+        console.log('Importing lightweight-charts...')
+        const LightweightCharts = await import('lightweight-charts')
+        console.log('Lightweight charts imported:', LightweightCharts)
+        
+        const { createChart, ColorType } = LightweightCharts
+
+        const chart = createChart(chartContainerRef.current!, {
+          layout: {
+            background: { type: ColorType.Solid, color: '#1a1a1a' },
+            textColor: '#ffffff',
+          },
+          width: 800,
+          height: 400,
+        })
+
+        const candlestickSeries = chart.addCandlestickSeries({
+          upColor: '#26a69a',
+          downColor: '#ef5350',
+          borderDownColor: '#ef5350',
+          borderUpColor: '#26a69a',
+          wickDownColor: '#ef5350',
+          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 },
+        ])
+
+        console.log('Chart created successfully!')
+
+      } catch (error) {
+        console.error('Error creating chart:', error)
+      }
+    }
+
+    initChart()
+  }, [])
+
+  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>
+  )
+}