Add debug pages and Next.js config for lightweight-charts
- 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
This commit is contained in:
mindesbunister
96
app/cdn-test/page.tsx
Normal file
96
app/cdn-test/page.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
'use client'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
|
||||
export default function StandaloneTest() {
|
||||
const chartContainerRef = useRef<HTMLDivElement>(null)
|
||||
const [status, setStatus] = useState('Starting...')
|
||||
|
||||
useEffect(() => {
|
||||
const initChart = async () => {
|
||||
try {
|
||||
setStatus('Testing CDN version...')
|
||||
|
||||
// Try using the CDN version instead
|
||||
if (typeof window !== 'undefined' && !window.LightweightCharts) {
|
||||
setStatus('Loading CDN script...')
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://unpkg.com/lightweight-charts@5.0.8/dist/lightweight-charts.standalone.production.js'
|
||||
script.onload = () => {
|
||||
setStatus('CDN loaded, creating chart...')
|
||||
createChartWithCDN()
|
||||
}
|
||||
script.onerror = () => {
|
||||
setStatus('CDN load failed')
|
||||
}
|
||||
document.head.appendChild(script)
|
||||
} else if (window.LightweightCharts) {
|
||||
setStatus('CDN already loaded, creating chart...')
|
||||
createChartWithCDN()
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
setStatus(`Error: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
const createChartWithCDN = () => {
|
||||
try {
|
||||
if (!chartContainerRef.current) {
|
||||
setStatus('No container')
|
||||
return
|
||||
}
|
||||
|
||||
const { createChart, CandlestickSeries } = (window as any).LightweightCharts
|
||||
|
||||
setStatus('Creating chart with CDN...')
|
||||
const chart = createChart(chartContainerRef.current, {
|
||||
width: 800,
|
||||
height: 400,
|
||||
layout: {
|
||||
background: { color: '#1a1a1a' },
|
||||
textColor: '#ffffff',
|
||||
},
|
||||
})
|
||||
|
||||
setStatus('Adding series...')
|
||||
const series = chart.addSeries(CandlestickSeries, {
|
||||
upColor: '#26a69a',
|
||||
downColor: '#ef5350',
|
||||
})
|
||||
|
||||
setStatus('Setting data...')
|
||||
series.setData([
|
||||
{ time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
|
||||
{ time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
|
||||
{ time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
|
||||
])
|
||||
|
||||
setStatus('Chart created successfully!')
|
||||
|
||||
} catch (error) {
|
||||
console.error('CDN chart error:', error)
|
||||
setStatus(`CDN Error: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
initChart()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 p-8">
|
||||
<h1 className="text-white text-3xl mb-4">CDN Chart Test</h1>
|
||||
<div className="text-green-400 text-lg mb-4">Status: {status}</div>
|
||||
|
||||
<div
|
||||
ref={chartContainerRef}
|
||||
className="border-2 border-blue-500 bg-gray-800"
|
||||
style={{
|
||||
width: '800px',
|
||||
height: '400px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
119
app/debug-chart/page.tsx
Normal file
119
app/debug-chart/page.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
72
app/direct-chart/page.tsx
Normal file
72
app/direct-chart/page.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
'use client'
|
||||
import React, { useEffect } from 'react'
|
||||
|
||||
export default function DirectChart() {
|
||||
useEffect(() => {
|
||||
const container = document.getElementById('chart-container')
|
||||
if (!container) return
|
||||
|
||||
const initChart = async () => {
|
||||
try {
|
||||
console.log('Starting direct chart...')
|
||||
|
||||
// Import with explicit .mjs extension
|
||||
const module = await import('lightweight-charts/dist/lightweight-charts.production.mjs')
|
||||
console.log('Module loaded:', module)
|
||||
|
||||
const { createChart, CandlestickSeries } = module
|
||||
console.log('Functions extracted')
|
||||
|
||||
const chart = createChart(container, {
|
||||
width: 800,
|
||||
height: 400,
|
||||
layout: {
|
||||
background: { color: '#1a1a1a' },
|
||||
textColor: '#ffffff',
|
||||
},
|
||||
})
|
||||
console.log('Chart created')
|
||||
|
||||
const series = chart.addSeries(CandlestickSeries, {
|
||||
upColor: '#26a69a',
|
||||
downColor: '#ef5350',
|
||||
})
|
||||
console.log('Series added')
|
||||
|
||||
series.setData([
|
||||
{ time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
|
||||
{ time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
|
||||
{ time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
|
||||
])
|
||||
console.log('Data set - should be visible!')
|
||||
|
||||
} catch (error) {
|
||||
console.error('Direct chart error:', error)
|
||||
const statusDiv = document.getElementById('status')
|
||||
if (statusDiv) {
|
||||
statusDiv.textContent = `Error: ${error}`
|
||||
statusDiv.className = 'text-red-400 text-lg mb-4'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add a small delay to ensure DOM is ready
|
||||
setTimeout(initChart, 100)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 p-8">
|
||||
<h1 className="text-white text-3xl mb-4">Direct DOM Chart</h1>
|
||||
<div id="status" className="text-yellow-400 text-lg mb-4">Loading...</div>
|
||||
|
||||
<div
|
||||
id="chart-container"
|
||||
className="border-2 border-green-500 bg-gray-800"
|
||||
style={{
|
||||
width: '800px',
|
||||
height: '400px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
95
app/simple-test/page.tsx
Normal file
95
app/simple-test/page.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'use client'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
|
||||
export default function SimpleTest() {
|
||||
const chartContainerRef = useRef<HTMLDivElement>(null)
|
||||
const [status, setStatus] = useState('Initializing...')
|
||||
|
||||
useEffect(() => {
|
||||
const initChart = async () => {
|
||||
try {
|
||||
setStatus('Importing library...')
|
||||
|
||||
// Test if we can import the library
|
||||
const module = await import('lightweight-charts')
|
||||
setStatus('Library imported')
|
||||
|
||||
// Test if we can extract functions
|
||||
const { createChart, CandlestickSeries } = module
|
||||
setStatus('Functions extracted')
|
||||
|
||||
if (!chartContainerRef.current) {
|
||||
setStatus('No container element')
|
||||
return
|
||||
}
|
||||
|
||||
setStatus('Creating chart...')
|
||||
|
||||
// Create chart with explicit dimensions
|
||||
const chart = createChart(chartContainerRef.current, {
|
||||
width: 800,
|
||||
height: 400,
|
||||
layout: {
|
||||
background: { color: '#1a1a1a' },
|
||||
textColor: '#ffffff',
|
||||
},
|
||||
})
|
||||
|
||||
setStatus('Chart created')
|
||||
|
||||
// Add series
|
||||
const series = chart.addSeries(CandlestickSeries, {
|
||||
upColor: '#00ff00',
|
||||
downColor: '#ff0000',
|
||||
})
|
||||
|
||||
setStatus('Series added')
|
||||
|
||||
// Add simple data
|
||||
series.setData([
|
||||
{ time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 },
|
||||
{ time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 },
|
||||
{ time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 },
|
||||
])
|
||||
|
||||
setStatus('Data set - Chart should be visible!')
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error)
|
||||
setStatus(`Error: ${error}`)
|
||||
}
|
||||
}
|
||||
|
||||
initChart()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 p-8">
|
||||
<h1 className="text-white text-3xl mb-4">Simple Chart Test</h1>
|
||||
<div className="text-green-400 text-lg mb-4">Status: {status}</div>
|
||||
|
||||
<div className="bg-red-500 p-2 mb-4 text-white">
|
||||
This red border should help us see if the container is properly sized
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={chartContainerRef}
|
||||
className="border-4 border-yellow-500 bg-gray-800"
|
||||
style={{
|
||||
width: '800px',
|
||||
height: '400px',
|
||||
display: 'block',
|
||||
position: 'relative'
|
||||
}}
|
||||
>
|
||||
<div className="text-white p-4">
|
||||
Container content - this should be replaced by the chart
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-gray-400 mt-4">
|
||||
Container ref: {chartContainerRef.current ? 'Available' : 'Not available'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,14 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
transpilePackages: ['lightweight-charts'],
|
||||
webpack: (config) => {
|
||||
config.resolve.fallback = {
|
||||
...config.resolve.fallback,
|
||||
fs: false,
|
||||
};
|
||||
return config;
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Reference in New Issue
Block a user