diff --git a/app/cdn-test/page.tsx b/app/cdn-test/page.tsx new file mode 100644 index 0000000..bf10c0d --- /dev/null +++ b/app/cdn-test/page.tsx @@ -0,0 +1,96 @@ +'use client' +import React, { useEffect, useRef, useState } from 'react' + +export default function StandaloneTest() { + const chartContainerRef = useRef(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 ( +
+

CDN Chart Test

+
Status: {status}
+ +
+
+ ) +} diff --git a/app/debug-chart/page.tsx b/app/debug-chart/page.tsx new file mode 100644 index 0000000..40ab46b --- /dev/null +++ b/app/debug-chart/page.tsx @@ -0,0 +1,119 @@ +'use client' +import React, { useEffect, useRef, useState } from 'react' + +export default function DebugChart() { + const chartContainerRef = useRef(null) + const [logs, setLogs] = useState([]) + const [error, setError] = useState(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 ( +
+

Debug Chart Test

+ +
+
+

Chart

+
+
+ +
+

Debug Logs

+
+ {logs.map((log, index) => ( +
+ {log} +
+ ))} +
+ + {error && ( +
+

Error Details:

+ 
{error}
+
+ )} +
+
+
+ ) +} diff --git a/app/direct-chart/page.tsx b/app/direct-chart/page.tsx new file mode 100644 index 0000000..c3a6d82 --- /dev/null +++ b/app/direct-chart/page.tsx @@ -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 ( +
+

Direct DOM Chart

+
Loading...
+ +
+
+ ) +} diff --git a/app/simple-test/page.tsx b/app/simple-test/page.tsx new file mode 100644 index 0000000..063e91a --- /dev/null +++ b/app/simple-test/page.tsx @@ -0,0 +1,95 @@ +'use client' +import React, { useEffect, useRef, useState } from 'react' + +export default function SimpleTest() { + const chartContainerRef = useRef(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 ( +
+

Simple Chart Test

+
Status: {status}
+ +
+ This red border should help us see if the container is properly sized +
+ +
+
+ Container content - this should be replaced by the chart +
+
+ +
+ Container ref: {chartContainerRef.current ? 'Available' : 'Not available'} +
+
+ ) +} diff --git a/next.config.ts b/next.config.ts index e9ffa30..0cec214 100644 --- a/next.config.ts +++ b/next.config.ts @@ -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;