86d4f5289c
- Added multiple test pages to debug chart rendering issues - Updated Next.js config to handle ES modules and transpile lightweight-charts - Attempting to resolve chart initialization problems
120 lines
4.0 KiB
TypeScript
120 lines
4.0 KiB
TypeScript
'use client'
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
|
|
export default function DebugChart() {
|
|
const chartContainerRef = useRef<HTMLDivElement>(null)
|
|
const [logs, setLogs] = useState<string[]>([])
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const addLog = (message: string) => {
|
|
console.log(message)
|
|
setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`])
|
|
}
|
|
|
|
useEffect(() => {
|
|
addLog('Component mounted')
|
|
|
|
if (!chartContainerRef.current) {
|
|
addLog('ERROR: No chart container ref')
|
|
return
|
|
}
|
|
|
|
addLog('Chart container found')
|
|
|
|
const initChart = async () => {
|
|
try {
|
|
addLog('Starting chart initialization...')
|
|
|
|
addLog('Importing lightweight-charts...')
|
|
const LightweightChartsModule = await import('lightweight-charts')
|
|
addLog('Import successful')
|
|
|
|
addLog('Available exports: ' + Object.keys(LightweightChartsModule).join(', '))
|
|
|
|
const { createChart, CandlestickSeries } = LightweightChartsModule
|
|
addLog('Extracted createChart and CandlestickSeries')
|
|
|
|
addLog('Creating chart...')
|
|
const chart = createChart(chartContainerRef.current!, {
|
|
width: 600,
|
|
height: 300,
|
|
layout: {
|
|
textColor: '#ffffff',
|
|
background: { color: '#1a1a1a' },
|
|
},
|
|
})
|
|
addLog('Chart created successfully')
|
|
|
|
addLog('Adding candlestick series...')
|
|
const candlestickSeries = chart.addSeries(CandlestickSeries, {
|
|
upColor: '#26a69a',
|
|
downColor: '#ef5350',
|
|
})
|
|
addLog('Series added successfully')
|
|
|
|
addLog('Generating test data...')
|
|
const data = [
|
|
{ time: '2025-07-10', open: 100, high: 110, low: 95, close: 105 },
|
|
{ time: '2025-07-11', open: 105, high: 115, low: 100, close: 110 },
|
|
{ time: '2025-07-12', open: 110, high: 120, low: 105, close: 115 },
|
|
{ time: '2025-07-13', open: 115, high: 125, low: 110, close: 118 },
|
|
{ time: '2025-07-14', open: 118, high: 128, low: 113, close: 122 },
|
|
{ time: '2025-07-15', open: 122, high: 132, low: 117, close: 125 },
|
|
{ time: '2025-07-16', open: 125, high: 135, low: 120, close: 130 },
|
|
]
|
|
addLog(`Generated ${data.length} data points`)
|
|
|
|
addLog('Setting data on series...')
|
|
candlestickSeries.setData(data)
|
|
addLog('Data set successfully - chart should be visible!')
|
|
|
|
addLog('Chart initialization complete')
|
|
|
|
} catch (err) {
|
|
const errorMessage = err instanceof Error ? err.message : String(err)
|
|
const errorStack = err instanceof Error ? err.stack : 'No stack trace'
|
|
addLog(`ERROR: ${errorMessage}`)
|
|
console.error('Chart initialization error:', err)
|
|
setError(`${errorMessage}\n\nStack: ${errorStack}`)
|
|
}
|
|
}
|
|
|
|
initChart()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 p-8">
|
|
<h1 className="text-white text-2xl mb-4">Debug Chart Test</h1>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<h2 className="text-white text-lg mb-2">Chart</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 h-80 overflow-y-auto">
|
|
{logs.map((log, index) => (
|
|
<div key={index} className="text-gray-300 text-sm font-mono mb-1">
|
|
{log}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-4 bg-red-900/20 border border-red-500 p-4 rounded">
|
|
<h3 className="text-red-400 font-semibold mb-2">Error Details:</h3>
|
|
<pre className="text-red-300 text-xs whitespace-pre-wrap">{error}</pre>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|