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
116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
'use client'
|
|
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 successfully')
|
|
setStatus('Creating chart...')
|
|
|
|
const { createChart, ColorType, CandlestickSeries } = LightweightCharts
|
|
|
|
const chart = createChart(chartContainerRef.current!, {
|
|
layout: {
|
|
background: { type: ColorType.Solid, color: '#1a1a1a' },
|
|
textColor: '#ffffff',
|
|
},
|
|
width: chartContainerRef.current!.clientWidth || 800,
|
|
height: 400,
|
|
grid: {
|
|
vertLines: { color: 'rgba(42, 46, 57, 0.5)' },
|
|
horzLines: { color: 'rgba(42, 46, 57, 0.5)' },
|
|
},
|
|
})
|
|
|
|
setStatus('Adding candlestick series...')
|
|
console.log('Chart created, adding candlestick series...')
|
|
|
|
const candlestickSeries = chart.addSeries(CandlestickSeries, {
|
|
upColor: '#26a69a',
|
|
downColor: '#ef5350',
|
|
borderDownColor: '#ef5350',
|
|
borderUpColor: '#26a69a',
|
|
wickDownColor: '#ef5350',
|
|
wickUpColor: '#26a69a',
|
|
})
|
|
|
|
// 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}`)
|
|
}
|
|
}
|
|
|
|
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 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>
|
|
)
|
|
}
|