Implement Jupiter-style trading chart with lightweight-charts
- Add TradingView Lightweight Charts library for professional chart display - Create TradingChart component with real-time candlestick data - Implement position overlays (entry, stop loss, take profit lines) - Add chart header with symbol and price information - Create CompactTradingPanel for Jupiter-style order form - Build ChartTradingPage combining chart and trading panel - Add demo and test pages for chart functionality - Use dynamic imports to avoid SSR issues with lightweight-charts - Generate sample price data for demonstration Features: - Full-screen candlestick chart with dark theme - Position markers on chart (blue entry, red SL, green TP) - Real-time price display and P&L tracking - Responsive design with proper chart resizing - Professional trading interface similar to Jupiter Perps
This commit is contained in:
14
app/chart-test/page.tsx
Normal file
14
app/chart-test/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import TradingChart from '../../components/TradingChart.tsx'
|
||||
|
||||
export default function SimpleChartTest() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 p-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-6">Chart Test</h1>
|
||||
<TradingChart />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user