62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
'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>
|
|
)
|
|
}
|