4fe9c1342c
- 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
112 lines
3.5 KiB
TypeScript
112 lines
3.5 KiB
TypeScript
'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>
|
|
)
|
|
}
|