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
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
'use client'
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
|
|
export default function MinimalChartTest() {
|
|
const chartContainerRef = useRef<HTMLDivElement>(null)
|
|
const [status, setStatus] = useState('Starting...')
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!chartContainerRef.current) {
|
|
setStatus('No container ref')
|
|
return
|
|
}
|
|
|
|
const initChart = async () => {
|
|
try {
|
|
setStatus('Loading lightweight-charts...')
|
|
console.log('Starting chart init...')
|
|
|
|
const LightweightCharts = await import('lightweight-charts')
|
|
console.log('Lightweight charts loaded:', LightweightCharts)
|
|
setStatus('Charts library loaded')
|
|
|
|
const { createChart, CandlestickSeries } = LightweightCharts
|
|
console.log('createChart:', typeof createChart)
|
|
console.log('CandlestickSeries:', CandlestickSeries)
|
|
|
|
setStatus('Creating chart...')
|
|
const chart = createChart(chartContainerRef.current!, {
|
|
width: 800,
|
|
height: 400,
|
|
})
|
|
console.log('Chart created:', chart)
|
|
setStatus('Chart created')
|
|
|
|
setStatus('Adding series...')
|
|
const series = chart.addSeries(CandlestickSeries, {})
|
|
console.log('Series created:', series)
|
|
setStatus('Series added')
|
|
|
|
setStatus('Adding data...')
|
|
const data = [
|
|
{ time: '2025-01-01', open: 100, high: 110, low: 90, close: 105 },
|
|
{ time: '2025-01-02', open: 105, high: 115, low: 95, close: 110 },
|
|
{ time: '2025-01-03', open: 110, high: 120, low: 100, close: 115 },
|
|
]
|
|
series.setData(data)
|
|
console.log('Data set')
|
|
setStatus('Chart ready!')
|
|
|
|
} catch (err) {
|
|
console.error('Chart init error:', err)
|
|
const errorMsg = err instanceof Error ? err.message : String(err)
|
|
setError(errorMsg)
|
|
setStatus(`Error: ${errorMsg}`)
|
|
}
|
|
}
|
|
|
|
initChart()
|
|
}, [])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 p-8">
|
|
<h1 className="text-white text-2xl mb-4">Minimal Chart Test</h1>
|
|
<div className="text-gray-300 mb-4">Status: {status}</div>
|
|
{error && (
|
|
<div className="text-red-400 mb-4 p-4 bg-red-900/20 rounded">
|
|
Error: {error}
|
|
</div>
|
|
)}
|
|
<div
|
|
ref={chartContainerRef}
|
|
className="bg-gray-800 border border-gray-600"
|
|
style={{ width: '800px', height: '400px' }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|