[OQI-003] feat: Add advanced market depth and screener components
- OrderBookDepthVisualization: Canvas-based depth chart with bid/ask areas - MarketDepthPanel: Complete market depth with filters and grouping - SymbolComparisonChart: Multi-symbol comparison with normalization modes - TradingScreener: Advanced screener with filters and saved presets Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Adrian Flores Cortes
parent
5ee7f14f25
commit
c145878c24
457
src/modules/trading/components/MarketDepthPanel.tsx
Normal file
457
src/modules/trading/components/MarketDepthPanel.tsx
Normal file
@ -0,0 +1,457 @@
|
||||
/**
|
||||
* MarketDepthPanel Component
|
||||
* Comprehensive market depth display with order book table and depth chart
|
||||
* Epic: OQI-003 Trading Charts
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
Bars3BottomLeftIcon,
|
||||
ChartBarIcon,
|
||||
TableCellsIcon,
|
||||
ArrowPathIcon,
|
||||
ArrowsUpDownIcon,
|
||||
FunnelIcon,
|
||||
ArrowDownTrayIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
|
||||
// Types
|
||||
export interface OrderLevel {
|
||||
price: number;
|
||||
quantity: number;
|
||||
total: number;
|
||||
orders?: number;
|
||||
exchange?: string;
|
||||
}
|
||||
|
||||
export interface MarketDepthData {
|
||||
symbol: string;
|
||||
bids: OrderLevel[];
|
||||
asks: OrderLevel[];
|
||||
midPrice: number;
|
||||
spread: number;
|
||||
spreadPercentage: number;
|
||||
imbalance: number; // bid volume / ask volume ratio
|
||||
lastUpdate: Date;
|
||||
}
|
||||
|
||||
export type ViewMode = 'table' | 'chart' | 'split';
|
||||
export type GroupingLevel = 'none' | '0.01' | '0.1' | '1' | '10' | '100';
|
||||
|
||||
interface MarketDepthPanelProps {
|
||||
data: MarketDepthData | null;
|
||||
onPriceClick?: (price: number, side: 'bid' | 'ask') => void;
|
||||
onRefresh?: () => void;
|
||||
onExport?: (format: 'csv' | 'json') => void;
|
||||
isLoading?: boolean;
|
||||
displayRows?: number;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const MarketDepthPanel: React.FC<MarketDepthPanelProps> = ({
|
||||
data,
|
||||
onPriceClick,
|
||||
onRefresh,
|
||||
onExport,
|
||||
isLoading = false,
|
||||
displayRows = 15,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [viewMode, setViewMode] = useState<ViewMode>('table');
|
||||
const [grouping, setGrouping] = useState<GroupingLevel>('none');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [minQuantity, setMinQuantity] = useState(0);
|
||||
const [highlightLarge, setHighlightLarge] = useState(true);
|
||||
|
||||
// Group orders by price level
|
||||
const groupedData = useMemo(() => {
|
||||
if (!data || grouping === 'none') return data;
|
||||
|
||||
const groupingValue = parseFloat(grouping);
|
||||
|
||||
const groupOrders = (orders: OrderLevel[]): OrderLevel[] => {
|
||||
const grouped = new Map<number, OrderLevel>();
|
||||
|
||||
for (const order of orders) {
|
||||
const groupedPrice = Math.floor(order.price / groupingValue) * groupingValue;
|
||||
const existing = grouped.get(groupedPrice);
|
||||
|
||||
if (existing) {
|
||||
existing.quantity += order.quantity;
|
||||
existing.orders = (existing.orders || 1) + 1;
|
||||
} else {
|
||||
grouped.set(groupedPrice, {
|
||||
price: groupedPrice,
|
||||
quantity: order.quantity,
|
||||
total: 0,
|
||||
orders: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Recalculate totals
|
||||
const result = Array.from(grouped.values());
|
||||
let runningTotal = 0;
|
||||
for (const level of result) {
|
||||
runningTotal += level.quantity;
|
||||
level.total = runningTotal;
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return {
|
||||
...data,
|
||||
bids: groupOrders(data.bids),
|
||||
asks: groupOrders(data.asks),
|
||||
};
|
||||
}, [data, grouping]);
|
||||
|
||||
// Filter by minimum quantity
|
||||
const filteredData = useMemo(() => {
|
||||
if (!groupedData || minQuantity === 0) return groupedData;
|
||||
|
||||
return {
|
||||
...groupedData,
|
||||
bids: groupedData.bids.filter((b) => b.quantity >= minQuantity),
|
||||
asks: groupedData.asks.filter((a) => a.quantity >= minQuantity),
|
||||
};
|
||||
}, [groupedData, minQuantity]);
|
||||
|
||||
// Calculate max quantities for bar visualization
|
||||
const maxQuantity = useMemo(() => {
|
||||
if (!filteredData) return 1;
|
||||
const allQuantities = [
|
||||
...filteredData.bids.map((b) => b.quantity),
|
||||
...filteredData.asks.map((a) => a.quantity),
|
||||
];
|
||||
return Math.max(...allQuantities, 1);
|
||||
}, [filteredData]);
|
||||
|
||||
// Detect large orders (> 2x average)
|
||||
const largeOrderThreshold = useMemo(() => {
|
||||
if (!filteredData) return 0;
|
||||
const allQuantities = [
|
||||
...filteredData.bids.map((b) => b.quantity),
|
||||
...filteredData.asks.map((a) => a.quantity),
|
||||
];
|
||||
const avg = allQuantities.reduce((a, b) => a + b, 0) / allQuantities.length;
|
||||
return avg * 2;
|
||||
}, [filteredData]);
|
||||
|
||||
// Format helpers
|
||||
const formatPrice = (price: number): string => {
|
||||
if (price >= 1000) return price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
if (price >= 1) return price.toFixed(4);
|
||||
return price.toFixed(6);
|
||||
};
|
||||
|
||||
const formatQuantity = (qty: number): string => {
|
||||
if (qty >= 1000000) return `${(qty / 1000000).toFixed(2)}M`;
|
||||
if (qty >= 1000) return `${(qty / 1000).toFixed(2)}K`;
|
||||
return qty.toFixed(4);
|
||||
};
|
||||
|
||||
const handleExport = useCallback((format: 'csv' | 'json') => {
|
||||
onExport?.(format);
|
||||
}, [onExport]);
|
||||
|
||||
// Render order row
|
||||
const renderOrderRow = (
|
||||
level: OrderLevel,
|
||||
side: 'bid' | 'ask',
|
||||
index: number
|
||||
) => {
|
||||
const barWidth = (level.quantity / maxQuantity) * 100;
|
||||
const isLarge = highlightLarge && level.quantity > largeOrderThreshold;
|
||||
const colorClass = side === 'bid' ? 'text-green-400' : 'text-red-400';
|
||||
const bgColorClass = side === 'bid' ? 'bg-green-500' : 'bg-red-500';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${side}-${level.price}-${index}`}
|
||||
className={`relative grid grid-cols-4 text-xs py-1 hover:bg-gray-700/50 cursor-pointer group transition-colors ${
|
||||
isLarge ? 'bg-yellow-500/10' : ''
|
||||
}`}
|
||||
onClick={() => onPriceClick?.(level.price, side)}
|
||||
>
|
||||
{/* Background bar */}
|
||||
<div
|
||||
className={`absolute ${side === 'bid' ? 'right-0' : 'left-0'} top-0 bottom-0 ${bgColorClass}/10 group-hover:${bgColorClass}/20 transition-colors`}
|
||||
style={{ width: `${barWidth}%` }}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
{side === 'bid' ? (
|
||||
<>
|
||||
<span className="relative text-gray-500 font-mono text-right pr-2">{formatQuantity(level.total)}</span>
|
||||
<span className="relative text-gray-300 font-mono text-right pr-2">{formatQuantity(level.quantity)}</span>
|
||||
<span className={`relative ${colorClass} font-mono text-right pr-2`}>{formatPrice(level.price)}</span>
|
||||
<span className="relative text-gray-600 font-mono text-center">{level.orders || '-'}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span className="relative text-gray-600 font-mono text-center">{level.orders || '-'}</span>
|
||||
<span className={`relative ${colorClass} font-mono pl-2`}>{formatPrice(level.price)}</span>
|
||||
<span className="relative text-gray-300 font-mono pl-2">{formatQuantity(level.quantity)}</span>
|
||||
<span className="relative text-gray-500 font-mono pl-2">{formatQuantity(level.total)}</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Large order indicator */}
|
||||
{isLarge && (
|
||||
<div className="absolute right-1 top-1/2 -translate-y-1/2">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-lg ${compact ? 'p-2' : 'p-4'} flex flex-col h-full`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Bars3BottomLeftIcon className="w-5 h-5 text-purple-400" />
|
||||
<h3 className={`font-semibold text-white ${compact ? 'text-xs' : 'text-sm'}`}>
|
||||
Market Depth
|
||||
</h3>
|
||||
{data && (
|
||||
<span className="text-xs text-gray-400 hidden sm:inline">
|
||||
{data.symbol}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{/* View Mode Toggle */}
|
||||
<div className="flex items-center bg-gray-900/50 rounded p-0.5">
|
||||
<button
|
||||
onClick={() => setViewMode('table')}
|
||||
className={`p-1 rounded ${viewMode === 'table' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
|
||||
title="Table View"
|
||||
>
|
||||
<TableCellsIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('chart')}
|
||||
className={`p-1 rounded ${viewMode === 'chart' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
|
||||
title="Chart View"
|
||||
>
|
||||
<ChartBarIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('split')}
|
||||
className={`p-1 rounded ${viewMode === 'split' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'}`}
|
||||
title="Split View"
|
||||
>
|
||||
<ArrowsUpDownIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`p-1.5 rounded transition-colors ${showFilters ? 'bg-blue-500/20 text-blue-400' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
|
||||
title="Filters"
|
||||
>
|
||||
<FunnelIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{onExport && (
|
||||
<button
|
||||
onClick={() => handleExport('csv')}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Export"
|
||||
>
|
||||
<ArrowDownTrayIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{onRefresh && (
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters Panel */}
|
||||
{showFilters && (
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded-lg">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
|
||||
<div>
|
||||
<label className="text-gray-400 block mb-1">Price Grouping</label>
|
||||
<select
|
||||
value={grouping}
|
||||
onChange={(e) => setGrouping(e.target.value as GroupingLevel)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-xs"
|
||||
>
|
||||
<option value="none">None</option>
|
||||
<option value="0.01">0.01</option>
|
||||
<option value="0.1">0.1</option>
|
||||
<option value="1">1</option>
|
||||
<option value="10">10</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-gray-400 block mb-1">Min Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
value={minQuantity}
|
||||
onChange={(e) => setMinQuantity(parseFloat(e.target.value) || 0)}
|
||||
min="0"
|
||||
step="0.01"
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 flex items-end">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={highlightLarge}
|
||||
onChange={(e) => setHighlightLarge(e.target.checked)}
|
||||
className="rounded bg-gray-700 border-gray-600"
|
||||
/>
|
||||
<span className="text-gray-300">Highlight large orders</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats Bar */}
|
||||
{data && (
|
||||
<div className="grid grid-cols-4 gap-2 mb-3 text-xs">
|
||||
<div className="bg-gray-900/50 rounded px-2 py-1.5">
|
||||
<div className="text-gray-500">Mid Price</div>
|
||||
<div className="text-white font-mono">{formatPrice(data.midPrice)}</div>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded px-2 py-1.5">
|
||||
<div className="text-gray-500">Spread</div>
|
||||
<div className="text-white font-mono">{data.spreadPercentage.toFixed(3)}%</div>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded px-2 py-1.5">
|
||||
<div className="text-gray-500">Imbalance</div>
|
||||
<div className={`font-mono ${data.imbalance > 1 ? 'text-green-400' : data.imbalance < 1 ? 'text-red-400' : 'text-white'}`}>
|
||||
{data.imbalance.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-900/50 rounded px-2 py-1.5">
|
||||
<div className="text-gray-500">Updated</div>
|
||||
<div className="text-white font-mono">
|
||||
{data.lastUpdate.toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{viewMode === 'table' && filteredData && (
|
||||
<div className="flex gap-2 h-full">
|
||||
{/* Bids Side */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-4 text-xs text-gray-500 border-b border-gray-700 pb-1 mb-1">
|
||||
<span className="text-right pr-2">Total</span>
|
||||
<span className="text-right pr-2">Size</span>
|
||||
<span className="text-right pr-2 text-green-400">Bid</span>
|
||||
<span className="text-center">#</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto space-y-0.5">
|
||||
{filteredData.bids.slice(0, displayRows).map((level, idx) =>
|
||||
renderOrderRow(level, 'bid', idx)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Asks Side */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-4 text-xs text-gray-500 border-b border-gray-700 pb-1 mb-1">
|
||||
<span className="text-center">#</span>
|
||||
<span className="pl-2 text-red-400">Ask</span>
|
||||
<span className="pl-2">Size</span>
|
||||
<span className="pl-2">Total</span>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto space-y-0.5">
|
||||
{filteredData.asks.slice(0, displayRows).map((level, idx) =>
|
||||
renderOrderRow(level, 'ask', idx)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'chart' && (
|
||||
<div className="h-full flex items-center justify-center text-gray-500 text-sm">
|
||||
<div className="text-center">
|
||||
<ChartBarIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||
<p>Use OrderBookDepthVisualization for chart view</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewMode === 'split' && filteredData && (
|
||||
<div className="h-full flex flex-col gap-2">
|
||||
{/* Compact table */}
|
||||
<div className="flex-1 flex gap-2 overflow-hidden">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{filteredData.bids.slice(0, Math.floor(displayRows / 2)).map((level, idx) =>
|
||||
renderOrderRow(level, 'bid', idx)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{filteredData.asks.slice(0, Math.floor(displayRows / 2)).map((level, idx) =>
|
||||
renderOrderRow(level, 'ask', idx)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && !data && (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center text-gray-500">
|
||||
<Bars3BottomLeftIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||
<p className="text-sm">No market depth data available</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<ArrowPathIcon className="w-8 h-8 text-blue-400 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
{!compact && highlightLarge && (
|
||||
<div className="flex items-center gap-4 mt-2 pt-2 border-t border-gray-700 text-xs text-gray-500">
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
|
||||
<span>Large order (>2x avg)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-2 bg-green-500/20 rounded" />
|
||||
<span>Bid volume</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="w-3 h-2 bg-red-500/20 rounded" />
|
||||
<span>Ask volume</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarketDepthPanel;
|
||||
518
src/modules/trading/components/OrderBookDepthVisualization.tsx
Normal file
518
src/modules/trading/components/OrderBookDepthVisualization.tsx
Normal file
@ -0,0 +1,518 @@
|
||||
/**
|
||||
* OrderBookDepthVisualization Component
|
||||
* Visual depth chart showing cumulative bid/ask volumes
|
||||
* Epic: OQI-003 Trading Charts
|
||||
*/
|
||||
|
||||
import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
ChartBarIcon,
|
||||
ArrowPathIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
Cog6ToothIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
|
||||
// Types
|
||||
export interface DepthLevel {
|
||||
price: number;
|
||||
quantity: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export interface DepthData {
|
||||
bids: DepthLevel[];
|
||||
asks: DepthLevel[];
|
||||
midPrice: number;
|
||||
spread: number;
|
||||
spreadPercentage: number;
|
||||
lastUpdate: Date;
|
||||
}
|
||||
|
||||
export interface DepthChartConfig {
|
||||
showGrid: boolean;
|
||||
showMidLine: boolean;
|
||||
showTooltip: boolean;
|
||||
animateChanges: boolean;
|
||||
bidColor: string;
|
||||
askColor: string;
|
||||
fillOpacity: number;
|
||||
strokeWidth: number;
|
||||
priceRange: number; // percentage from mid price
|
||||
}
|
||||
|
||||
interface OrderBookDepthVisualizationProps {
|
||||
data: DepthData | null;
|
||||
config?: Partial<DepthChartConfig>;
|
||||
onPriceClick?: (price: number, side: 'bid' | 'ask') => void;
|
||||
onRefresh?: () => void;
|
||||
isLoading?: boolean;
|
||||
height?: number;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const DEFAULT_CONFIG: DepthChartConfig = {
|
||||
showGrid: true,
|
||||
showMidLine: true,
|
||||
showTooltip: true,
|
||||
animateChanges: true,
|
||||
bidColor: '#22c55e',
|
||||
askColor: '#ef4444',
|
||||
fillOpacity: 0.3,
|
||||
strokeWidth: 2,
|
||||
priceRange: 5,
|
||||
};
|
||||
|
||||
const OrderBookDepthVisualization: React.FC<OrderBookDepthVisualizationProps> = ({
|
||||
data,
|
||||
config: userConfig,
|
||||
onPriceClick,
|
||||
onRefresh,
|
||||
isLoading = false,
|
||||
height = 300,
|
||||
compact = false,
|
||||
}) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [tooltip, setTooltip] = useState<{
|
||||
visible: boolean;
|
||||
x: number;
|
||||
y: number;
|
||||
price: number;
|
||||
quantity: number;
|
||||
total: number;
|
||||
side: 'bid' | 'ask';
|
||||
} | null>(null);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [localConfig, setLocalConfig] = useState<DepthChartConfig>({
|
||||
...DEFAULT_CONFIG,
|
||||
...userConfig,
|
||||
});
|
||||
|
||||
const config = useMemo(() => ({ ...DEFAULT_CONFIG, ...userConfig, ...localConfig }), [userConfig, localConfig]);
|
||||
|
||||
// Calculate chart dimensions and scales
|
||||
const chartMetrics = useMemo(() => {
|
||||
if (!data || !canvasRef.current) return null;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
const width = canvas.width;
|
||||
const chartHeight = canvas.height;
|
||||
const padding = { top: 20, right: 60, bottom: 30, left: 60 };
|
||||
|
||||
const chartWidth = width - padding.left - padding.right;
|
||||
const drawHeight = chartHeight - padding.top - padding.bottom;
|
||||
|
||||
// Find max total for Y scale
|
||||
const maxBidTotal = data.bids.length > 0 ? Math.max(...data.bids.map((d) => d.total)) : 0;
|
||||
const maxAskTotal = data.asks.length > 0 ? Math.max(...data.asks.map((d) => d.total)) : 0;
|
||||
const maxTotal = Math.max(maxBidTotal, maxAskTotal, 1);
|
||||
|
||||
// Price range based on config percentage
|
||||
const priceRange = data.midPrice * (config.priceRange / 100);
|
||||
const minPrice = data.midPrice - priceRange;
|
||||
const maxPrice = data.midPrice + priceRange;
|
||||
|
||||
return {
|
||||
width,
|
||||
chartHeight,
|
||||
chartWidth,
|
||||
drawHeight,
|
||||
padding,
|
||||
maxTotal,
|
||||
minPrice,
|
||||
maxPrice,
|
||||
priceRange,
|
||||
xScale: (price: number) => {
|
||||
const normalized = (price - minPrice) / (maxPrice - minPrice);
|
||||
return padding.left + normalized * chartWidth;
|
||||
},
|
||||
yScale: (total: number) => {
|
||||
const normalized = total / maxTotal;
|
||||
return chartHeight - padding.bottom - normalized * drawHeight;
|
||||
},
|
||||
};
|
||||
}, [data, config.priceRange]);
|
||||
|
||||
// Draw the depth chart
|
||||
const drawChart = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext('2d');
|
||||
if (!canvas || !ctx || !data || !chartMetrics) return;
|
||||
|
||||
const { width, chartHeight, padding, xScale, yScale, minPrice, maxPrice, maxTotal } = chartMetrics;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, width, chartHeight);
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = '#1f2937';
|
||||
ctx.fillRect(0, 0, width, chartHeight);
|
||||
|
||||
// Draw grid
|
||||
if (config.showGrid) {
|
||||
ctx.strokeStyle = '#374151';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Horizontal grid lines (5 lines)
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = yScale((maxTotal / 4) * i);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding.left, y);
|
||||
ctx.lineTo(width - padding.right, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Vertical grid lines (5 lines)
|
||||
const priceStep = (maxPrice - minPrice) / 4;
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const x = xScale(minPrice + priceStep * i);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, padding.top);
|
||||
ctx.lineTo(x, chartHeight - padding.bottom);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Draw mid price line
|
||||
if (config.showMidLine) {
|
||||
const midX = xScale(data.midPrice);
|
||||
ctx.strokeStyle = '#6b7280';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([5, 5]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(midX, padding.top);
|
||||
ctx.lineTo(midX, chartHeight - padding.bottom);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
// Draw bid area (left side)
|
||||
if (data.bids.length > 0) {
|
||||
const filteredBids = data.bids.filter((b) => b.price >= minPrice && b.price <= data.midPrice);
|
||||
|
||||
if (filteredBids.length > 0) {
|
||||
// Fill
|
||||
ctx.fillStyle = config.bidColor + Math.round(config.fillOpacity * 255).toString(16).padStart(2, '0');
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xScale(filteredBids[0].price), yScale(0));
|
||||
filteredBids.forEach((level) => {
|
||||
ctx.lineTo(xScale(level.price), yScale(level.total));
|
||||
});
|
||||
ctx.lineTo(xScale(filteredBids[filteredBids.length - 1].price), yScale(0));
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
// Stroke
|
||||
ctx.strokeStyle = config.bidColor;
|
||||
ctx.lineWidth = config.strokeWidth;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xScale(filteredBids[0].price), yScale(filteredBids[0].total));
|
||||
filteredBids.forEach((level) => {
|
||||
ctx.lineTo(xScale(level.price), yScale(level.total));
|
||||
});
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Draw ask area (right side)
|
||||
if (data.asks.length > 0) {
|
||||
const filteredAsks = data.asks.filter((a) => a.price <= maxPrice && a.price >= data.midPrice);
|
||||
|
||||
if (filteredAsks.length > 0) {
|
||||
// Fill
|
||||
ctx.fillStyle = config.askColor + Math.round(config.fillOpacity * 255).toString(16).padStart(2, '0');
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xScale(filteredAsks[0].price), yScale(0));
|
||||
filteredAsks.forEach((level) => {
|
||||
ctx.lineTo(xScale(level.price), yScale(level.total));
|
||||
});
|
||||
ctx.lineTo(xScale(filteredAsks[filteredAsks.length - 1].price), yScale(0));
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
// Stroke
|
||||
ctx.strokeStyle = config.askColor;
|
||||
ctx.lineWidth = config.strokeWidth;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(xScale(filteredAsks[0].price), yScale(filteredAsks[0].total));
|
||||
filteredAsks.forEach((level) => {
|
||||
ctx.lineTo(xScale(level.price), yScale(level.total));
|
||||
});
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Draw Y axis labels (quantity)
|
||||
ctx.fillStyle = '#9ca3af';
|
||||
ctx.font = '10px monospace';
|
||||
ctx.textAlign = 'right';
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const value = (maxTotal / 4) * i;
|
||||
const y = yScale(value);
|
||||
ctx.fillText(formatQuantity(value), padding.left - 5, y + 3);
|
||||
}
|
||||
|
||||
// Draw X axis labels (price)
|
||||
ctx.textAlign = 'center';
|
||||
const priceStep = (maxPrice - minPrice) / 4;
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const price = minPrice + priceStep * i;
|
||||
const x = xScale(price);
|
||||
ctx.fillText(formatPrice(price), x, chartHeight - padding.bottom + 15);
|
||||
}
|
||||
|
||||
// Draw mid price label
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.font = '11px monospace';
|
||||
ctx.fillText(formatPrice(data.midPrice), xScale(data.midPrice), padding.top - 5);
|
||||
}, [data, chartMetrics, config]);
|
||||
|
||||
// Handle canvas resize
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const container = containerRef.current;
|
||||
if (!canvas || !container) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const { width } = entry.contentRect;
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
drawChart();
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(container);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, [height, drawChart]);
|
||||
|
||||
// Redraw on data change
|
||||
useEffect(() => {
|
||||
drawChart();
|
||||
}, [drawChart]);
|
||||
|
||||
// Handle mouse move for tooltip
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (!config.showTooltip || !data || !chartMetrics) {
|
||||
setTooltip(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const { padding, xScale, minPrice, maxPrice } = chartMetrics;
|
||||
|
||||
// Check if within chart area
|
||||
if (
|
||||
x < padding.left ||
|
||||
x > canvas.width - padding.right ||
|
||||
y < padding.top ||
|
||||
y > canvas.height - padding.bottom
|
||||
) {
|
||||
setTooltip(null);
|
||||
return;
|
||||
}
|
||||
|
||||
// Find price at mouse position
|
||||
const price = minPrice + ((x - padding.left) / (canvas.width - padding.left - padding.right)) * (maxPrice - minPrice);
|
||||
|
||||
// Determine side
|
||||
const side: 'bid' | 'ask' = price < data.midPrice ? 'bid' : 'ask';
|
||||
const levels = side === 'bid' ? data.bids : data.asks;
|
||||
|
||||
// Find closest level
|
||||
let closest = levels[0];
|
||||
let minDist = Math.abs(price - closest?.price);
|
||||
for (const level of levels) {
|
||||
const dist = Math.abs(price - level.price);
|
||||
if (dist < minDist) {
|
||||
minDist = dist;
|
||||
closest = level;
|
||||
}
|
||||
}
|
||||
|
||||
if (closest) {
|
||||
setTooltip({
|
||||
visible: true,
|
||||
x: xScale(closest.price),
|
||||
y: e.clientY - rect.top,
|
||||
price: closest.price,
|
||||
quantity: closest.quantity,
|
||||
total: closest.total,
|
||||
side,
|
||||
});
|
||||
}
|
||||
},
|
||||
[config.showTooltip, data, chartMetrics]
|
||||
);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setTooltip(null);
|
||||
}, []);
|
||||
|
||||
const handleCanvasClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (!onPriceClick || !tooltip) return;
|
||||
onPriceClick(tooltip.price, tooltip.side);
|
||||
},
|
||||
[onPriceClick, tooltip]
|
||||
);
|
||||
|
||||
// Format helpers
|
||||
const formatPrice = (price: number): string => {
|
||||
if (price >= 1000) return price.toLocaleString(undefined, { maximumFractionDigits: 2 });
|
||||
if (price >= 1) return price.toFixed(4);
|
||||
return price.toFixed(6);
|
||||
};
|
||||
|
||||
const formatQuantity = (qty: number): string => {
|
||||
if (qty >= 1000000) return `${(qty / 1000000).toFixed(1)}M`;
|
||||
if (qty >= 1000) return `${(qty / 1000).toFixed(1)}K`;
|
||||
return qty.toFixed(2);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-lg ${compact ? 'p-2' : 'p-4'} flex flex-col`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ChartBarIcon className="w-5 h-5 text-blue-400" />
|
||||
<h3 className={`font-semibold text-white ${compact ? 'text-xs' : 'text-sm'}`}>
|
||||
Market Depth
|
||||
</h3>
|
||||
{data && (
|
||||
<span className="text-xs text-gray-400">
|
||||
Spread: {formatPrice(data.spread)} ({data.spreadPercentage.toFixed(3)}%)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Settings"
|
||||
>
|
||||
<Cog6ToothIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{onRefresh && (
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings Panel */}
|
||||
{showSettings && (
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded-lg space-y-2">
|
||||
<div className="grid grid-cols-2 gap-3 text-xs">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={localConfig.showGrid}
|
||||
onChange={(e) => setLocalConfig({ ...localConfig, showGrid: e.target.checked })}
|
||||
className="rounded bg-gray-700 border-gray-600"
|
||||
/>
|
||||
<span className="text-gray-300">Show Grid</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={localConfig.showMidLine}
|
||||
onChange={(e) => setLocalConfig({ ...localConfig, showMidLine: e.target.checked })}
|
||||
className="rounded bg-gray-700 border-gray-600"
|
||||
/>
|
||||
<span className="text-gray-300">Show Mid Line</span>
|
||||
</label>
|
||||
<div className="col-span-2">
|
||||
<label className="text-gray-300 block mb-1">Price Range: {localConfig.priceRange}%</label>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="20"
|
||||
value={localConfig.priceRange}
|
||||
onChange={(e) => setLocalConfig({ ...localConfig, priceRange: Number(e.target.value) })}
|
||||
className="w-full h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart Container */}
|
||||
<div ref={containerRef} className="relative flex-1" style={{ minHeight: height }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleCanvasClick}
|
||||
className="w-full cursor-crosshair"
|
||||
style={{ height }}
|
||||
/>
|
||||
|
||||
{/* Tooltip */}
|
||||
{tooltip?.visible && (
|
||||
<div
|
||||
className="absolute pointer-events-none bg-gray-900 border border-gray-700 rounded px-2 py-1 text-xs shadow-lg z-10"
|
||||
style={{
|
||||
left: tooltip.x + 10,
|
||||
top: tooltip.y - 40,
|
||||
transform: tooltip.x > (canvasRef.current?.width || 0) / 2 ? 'translateX(-100%)' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className={`font-semibold ${tooltip.side === 'bid' ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{tooltip.side === 'bid' ? 'BID' : 'ASK'}
|
||||
</div>
|
||||
<div className="text-gray-300">Price: {formatPrice(tooltip.price)}</div>
|
||||
<div className="text-gray-300">Qty: {formatQuantity(tooltip.quantity)}</div>
|
||||
<div className="text-gray-400">Total: {formatQuantity(tooltip.total)}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 bg-gray-900/50 flex items-center justify-center">
|
||||
<ArrowPathIcon className="w-8 h-8 text-blue-400 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && !data && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center text-gray-500">
|
||||
<ChartBarIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||
<p className="text-sm">No depth data available</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
{!compact && (
|
||||
<div className="flex items-center justify-center gap-6 mt-3 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded" style={{ backgroundColor: config.bidColor }} />
|
||||
<span className="text-gray-400">Bids (Buy Orders)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded" style={{ backgroundColor: config.askColor }} />
|
||||
<span className="text-gray-400">Asks (Sell Orders)</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderBookDepthVisualization;
|
||||
619
src/modules/trading/components/SymbolComparisonChart.tsx
Normal file
619
src/modules/trading/components/SymbolComparisonChart.tsx
Normal file
@ -0,0 +1,619 @@
|
||||
/**
|
||||
* SymbolComparisonChart Component
|
||||
* Multi-symbol overlay chart for comparing price performance
|
||||
* Epic: OQI-003 Trading Charts
|
||||
*/
|
||||
|
||||
import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
ChartBarSquareIcon,
|
||||
PlusIcon,
|
||||
XMarkIcon,
|
||||
ArrowPathIcon,
|
||||
Cog6ToothIcon,
|
||||
ArrowsPointingOutIcon,
|
||||
ArrowDownTrayIcon,
|
||||
EyeIcon,
|
||||
EyeSlashIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
|
||||
// Types
|
||||
export interface PricePoint {
|
||||
timestamp: number;
|
||||
price: number;
|
||||
volume?: number;
|
||||
}
|
||||
|
||||
export interface SymbolData {
|
||||
symbol: string;
|
||||
name: string;
|
||||
data: PricePoint[];
|
||||
color: string;
|
||||
visible: boolean;
|
||||
basePrice: number; // Starting price for normalization
|
||||
currentPrice: number;
|
||||
change: number;
|
||||
changePercent: number;
|
||||
}
|
||||
|
||||
export type NormalizationMode = 'absolute' | 'percentage' | 'indexed';
|
||||
export type TimeframeOption = '1D' | '1W' | '1M' | '3M' | '6M' | '1Y' | 'YTD' | 'ALL';
|
||||
|
||||
interface SymbolComparisonChartProps {
|
||||
symbols: SymbolData[];
|
||||
onAddSymbol?: () => void;
|
||||
onRemoveSymbol?: (symbol: string) => void;
|
||||
onToggleVisibility?: (symbol: string) => void;
|
||||
onRefresh?: () => void;
|
||||
onExport?: () => void;
|
||||
onTimeframeChange?: (timeframe: TimeframeOption) => void;
|
||||
isLoading?: boolean;
|
||||
height?: number;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const PRESET_COLORS = [
|
||||
'#3B82F6', // Blue
|
||||
'#10B981', // Green
|
||||
'#F59E0B', // Amber
|
||||
'#EF4444', // Red
|
||||
'#8B5CF6', // Purple
|
||||
'#EC4899', // Pink
|
||||
'#06B6D4', // Cyan
|
||||
'#84CC16', // Lime
|
||||
];
|
||||
|
||||
const TIMEFRAMES: TimeframeOption[] = ['1D', '1W', '1M', '3M', '6M', '1Y', 'YTD', 'ALL'];
|
||||
|
||||
const SymbolComparisonChart: React.FC<SymbolComparisonChartProps> = ({
|
||||
symbols,
|
||||
onAddSymbol,
|
||||
onRemoveSymbol,
|
||||
onToggleVisibility,
|
||||
onRefresh,
|
||||
onExport,
|
||||
onTimeframeChange,
|
||||
isLoading = false,
|
||||
height = 400,
|
||||
compact = false,
|
||||
}) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [normalization, setNormalization] = useState<NormalizationMode>('percentage');
|
||||
const [timeframe, setTimeframe] = useState<TimeframeOption>('1M');
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showGrid, setShowGrid] = useState(true);
|
||||
const [showLegend, setShowLegend] = useState(true);
|
||||
const [hoveredPoint, setHoveredPoint] = useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
timestamp: number;
|
||||
values: { symbol: string; value: number; color: string }[];
|
||||
} | null>(null);
|
||||
|
||||
// Visible symbols only
|
||||
const visibleSymbols = useMemo(() => symbols.filter((s) => s.visible), [symbols]);
|
||||
|
||||
// Normalize data based on selected mode
|
||||
const normalizedData = useMemo(() => {
|
||||
return visibleSymbols.map((symbol) => {
|
||||
const normalizedPoints = symbol.data.map((point) => {
|
||||
let value: number;
|
||||
switch (normalization) {
|
||||
case 'percentage':
|
||||
value = ((point.price - symbol.basePrice) / symbol.basePrice) * 100;
|
||||
break;
|
||||
case 'indexed':
|
||||
value = (point.price / symbol.basePrice) * 100;
|
||||
break;
|
||||
case 'absolute':
|
||||
default:
|
||||
value = point.price;
|
||||
break;
|
||||
}
|
||||
return { ...point, normalizedValue: value };
|
||||
});
|
||||
return { ...symbol, normalizedData: normalizedPoints };
|
||||
});
|
||||
}, [visibleSymbols, normalization]);
|
||||
|
||||
// Calculate chart scales
|
||||
const chartMetrics = useMemo(() => {
|
||||
if (!canvasRef.current || normalizedData.length === 0) return null;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
const width = canvas.width;
|
||||
const chartHeight = canvas.height;
|
||||
const padding = { top: 20, right: 80, bottom: 40, left: 60 };
|
||||
|
||||
const chartWidth = width - padding.left - padding.right;
|
||||
const drawHeight = chartHeight - padding.top - padding.bottom;
|
||||
|
||||
// Find min/max values and timestamps
|
||||
let minValue = Infinity;
|
||||
let maxValue = -Infinity;
|
||||
let minTime = Infinity;
|
||||
let maxTime = -Infinity;
|
||||
|
||||
for (const symbol of normalizedData) {
|
||||
for (const point of symbol.normalizedData) {
|
||||
minValue = Math.min(minValue, point.normalizedValue);
|
||||
maxValue = Math.max(maxValue, point.normalizedValue);
|
||||
minTime = Math.min(minTime, point.timestamp);
|
||||
maxTime = Math.max(maxTime, point.timestamp);
|
||||
}
|
||||
}
|
||||
|
||||
// Add padding to value range
|
||||
const valueRange = maxValue - minValue;
|
||||
minValue -= valueRange * 0.1;
|
||||
maxValue += valueRange * 0.1;
|
||||
|
||||
return {
|
||||
width,
|
||||
chartHeight,
|
||||
chartWidth,
|
||||
drawHeight,
|
||||
padding,
|
||||
minValue,
|
||||
maxValue,
|
||||
minTime,
|
||||
maxTime,
|
||||
xScale: (timestamp: number) => {
|
||||
const normalized = (timestamp - minTime) / (maxTime - minTime);
|
||||
return padding.left + normalized * chartWidth;
|
||||
},
|
||||
yScale: (value: number) => {
|
||||
const normalized = (value - minValue) / (maxValue - minValue);
|
||||
return chartHeight - padding.bottom - normalized * drawHeight;
|
||||
},
|
||||
xInverse: (x: number) => {
|
||||
const normalized = (x - padding.left) / chartWidth;
|
||||
return minTime + normalized * (maxTime - minTime);
|
||||
},
|
||||
};
|
||||
}, [normalizedData]);
|
||||
|
||||
// Draw the chart
|
||||
const drawChart = useCallback(() => {
|
||||
const canvas = canvasRef.current;
|
||||
const ctx = canvas?.getContext('2d');
|
||||
if (!canvas || !ctx || !chartMetrics) return;
|
||||
|
||||
const { width, chartHeight, padding, xScale, yScale, minValue, maxValue, minTime, maxTime } = chartMetrics;
|
||||
|
||||
// Clear
|
||||
ctx.clearRect(0, 0, width, chartHeight);
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = '#1f2937';
|
||||
ctx.fillRect(0, 0, width, chartHeight);
|
||||
|
||||
// Grid
|
||||
if (showGrid) {
|
||||
ctx.strokeStyle = '#374151';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Horizontal lines
|
||||
const valueStep = (maxValue - minValue) / 5;
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const value = minValue + valueStep * i;
|
||||
const y = yScale(value);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding.left, y);
|
||||
ctx.lineTo(width - padding.right, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Vertical lines
|
||||
const timeStep = (maxTime - minTime) / 5;
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const time = minTime + timeStep * i;
|
||||
const x = xScale(time);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, padding.top);
|
||||
ctx.lineTo(x, chartHeight - padding.bottom);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Zero line for percentage mode
|
||||
if (normalization === 'percentage') {
|
||||
const zeroY = yScale(0);
|
||||
if (zeroY >= padding.top && zeroY <= chartHeight - padding.bottom) {
|
||||
ctx.strokeStyle = '#6b7280';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([5, 5]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(padding.left, zeroY);
|
||||
ctx.lineTo(width - padding.right, zeroY);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw each symbol's line
|
||||
for (const symbol of normalizedData) {
|
||||
if (symbol.normalizedData.length < 2) continue;
|
||||
|
||||
ctx.strokeStyle = symbol.color;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
|
||||
const firstPoint = symbol.normalizedData[0];
|
||||
ctx.moveTo(xScale(firstPoint.timestamp), yScale(firstPoint.normalizedValue));
|
||||
|
||||
for (let i = 1; i < symbol.normalizedData.length; i++) {
|
||||
const point = symbol.normalizedData[i];
|
||||
ctx.lineTo(xScale(point.timestamp), yScale(point.normalizedValue));
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
// Draw endpoint marker
|
||||
const lastPoint = symbol.normalizedData[symbol.normalizedData.length - 1];
|
||||
ctx.fillStyle = symbol.color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(xScale(lastPoint.timestamp), yScale(lastPoint.normalizedValue), 4, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Y-axis labels
|
||||
ctx.fillStyle = '#9ca3af';
|
||||
ctx.font = '10px monospace';
|
||||
ctx.textAlign = 'right';
|
||||
const valueStep = (maxValue - minValue) / 5;
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const value = minValue + valueStep * i;
|
||||
const y = yScale(value);
|
||||
const label = normalization === 'percentage' ? `${value.toFixed(1)}%` : value.toFixed(2);
|
||||
ctx.fillText(label, padding.left - 5, y + 3);
|
||||
}
|
||||
|
||||
// X-axis labels
|
||||
ctx.textAlign = 'center';
|
||||
const timeStep = (maxTime - minTime) / 5;
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
const time = minTime + timeStep * i;
|
||||
const x = xScale(time);
|
||||
const date = new Date(time);
|
||||
const label = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
ctx.fillText(label, x, chartHeight - padding.bottom + 15);
|
||||
}
|
||||
|
||||
// Right side labels (current values)
|
||||
normalizedData.forEach((symbol, index) => {
|
||||
const lastPoint = symbol.normalizedData[symbol.normalizedData.length - 1];
|
||||
if (!lastPoint) return;
|
||||
|
||||
const y = yScale(lastPoint.normalizedValue);
|
||||
ctx.fillStyle = symbol.color;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.font = '10px monospace';
|
||||
|
||||
const label = normalization === 'percentage'
|
||||
? `${lastPoint.normalizedValue >= 0 ? '+' : ''}${lastPoint.normalizedValue.toFixed(2)}%`
|
||||
: lastPoint.normalizedValue.toFixed(2);
|
||||
|
||||
ctx.fillText(label, width - padding.right + 5, y + 3);
|
||||
});
|
||||
|
||||
// Hover crosshair
|
||||
if (hoveredPoint) {
|
||||
ctx.strokeStyle = '#6b7280';
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([3, 3]);
|
||||
|
||||
// Vertical line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(hoveredPoint.x, padding.top);
|
||||
ctx.lineTo(hoveredPoint.x, chartHeight - padding.bottom);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
}, [chartMetrics, normalizedData, showGrid, normalization, hoveredPoint]);
|
||||
|
||||
// Handle resize
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
const canvas = canvasRef.current;
|
||||
if (!container || !canvas) return;
|
||||
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
canvas.width = entry.contentRect.width;
|
||||
canvas.height = height;
|
||||
drawChart();
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(container);
|
||||
return () => resizeObserver.disconnect();
|
||||
}, [height, drawChart]);
|
||||
|
||||
// Redraw on data change
|
||||
useEffect(() => {
|
||||
drawChart();
|
||||
}, [drawChart]);
|
||||
|
||||
// Handle mouse move
|
||||
const handleMouseMove = useCallback(
|
||||
(e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (!chartMetrics || normalizedData.length === 0) {
|
||||
setHoveredPoint(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const { padding, xInverse, xScale, yScale } = chartMetrics;
|
||||
|
||||
if (x < padding.left || x > canvas.width - padding.right) {
|
||||
setHoveredPoint(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamp = xInverse(x);
|
||||
|
||||
// Find closest points for each symbol
|
||||
const values = normalizedData.map((symbol) => {
|
||||
let closest = symbol.normalizedData[0];
|
||||
let minDist = Math.abs(timestamp - closest.timestamp);
|
||||
|
||||
for (const point of symbol.normalizedData) {
|
||||
const dist = Math.abs(timestamp - point.timestamp);
|
||||
if (dist < minDist) {
|
||||
minDist = dist;
|
||||
closest = point;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
symbol: symbol.symbol,
|
||||
value: closest.normalizedValue,
|
||||
color: symbol.color,
|
||||
};
|
||||
});
|
||||
|
||||
setHoveredPoint({ x, y, timestamp, values });
|
||||
},
|
||||
[chartMetrics, normalizedData]
|
||||
);
|
||||
|
||||
const handleMouseLeave = useCallback(() => {
|
||||
setHoveredPoint(null);
|
||||
}, []);
|
||||
|
||||
const handleTimeframeChange = (tf: TimeframeOption) => {
|
||||
setTimeframe(tf);
|
||||
onTimeframeChange?.(tf);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-lg ${compact ? 'p-2' : 'p-4'} flex flex-col`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<ChartBarSquareIcon className="w-5 h-5 text-cyan-400" />
|
||||
<h3 className={`font-semibold text-white ${compact ? 'text-xs' : 'text-sm'}`}>
|
||||
Symbol Comparison
|
||||
</h3>
|
||||
<span className="text-xs text-gray-400">
|
||||
{visibleSymbols.length} / {symbols.length} symbols
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
{onAddSymbol && (
|
||||
<button
|
||||
onClick={onAddSymbol}
|
||||
disabled={symbols.length >= 8}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors disabled:opacity-50"
|
||||
title="Add Symbol"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setShowSettings(!showSettings)}
|
||||
className={`p-1.5 rounded transition-colors ${showSettings ? 'bg-blue-500/20 text-blue-400' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
|
||||
title="Settings"
|
||||
>
|
||||
<Cog6ToothIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{onExport && (
|
||||
<button
|
||||
onClick={onExport}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Export"
|
||||
>
|
||||
<ArrowDownTrayIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{onRefresh && (
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeframe Selector */}
|
||||
<div className="flex items-center gap-1 mb-3">
|
||||
{TIMEFRAMES.map((tf) => (
|
||||
<button
|
||||
key={tf}
|
||||
onClick={() => handleTimeframeChange(tf)}
|
||||
className={`px-2 py-1 text-xs rounded transition-colors ${
|
||||
timeframe === tf
|
||||
? 'bg-blue-500 text-white'
|
||||
: 'bg-gray-700 text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
{tf}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Settings Panel */}
|
||||
{showSettings && (
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded-lg">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-xs">
|
||||
<div>
|
||||
<label className="text-gray-400 block mb-1">Normalization</label>
|
||||
<select
|
||||
value={normalization}
|
||||
onChange={(e) => setNormalization(e.target.value as NormalizationMode)}
|
||||
className="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1 text-white text-xs"
|
||||
>
|
||||
<option value="percentage">Percentage Change</option>
|
||||
<option value="indexed">Indexed (100)</option>
|
||||
<option value="absolute">Absolute Price</option>
|
||||
</select>
|
||||
</div>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showGrid}
|
||||
onChange={(e) => setShowGrid(e.target.checked)}
|
||||
className="rounded bg-gray-700 border-gray-600"
|
||||
/>
|
||||
<span className="text-gray-300">Show Grid</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showLegend}
|
||||
onChange={(e) => setShowLegend(e.target.checked)}
|
||||
className="rounded bg-gray-700 border-gray-600"
|
||||
/>
|
||||
<span className="text-gray-300">Show Legend</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Symbol Pills */}
|
||||
{showLegend && symbols.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-3">
|
||||
{symbols.map((symbol) => (
|
||||
<div
|
||||
key={symbol.symbol}
|
||||
className={`flex items-center gap-1.5 px-2 py-1 rounded text-xs transition-opacity ${
|
||||
symbol.visible ? 'opacity-100' : 'opacity-50'
|
||||
}`}
|
||||
style={{ backgroundColor: `${symbol.color}20`, borderColor: symbol.color, borderWidth: 1 }}
|
||||
>
|
||||
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: symbol.color }} />
|
||||
<span className="text-white font-medium">{symbol.symbol}</span>
|
||||
<span className={symbol.changePercent >= 0 ? 'text-green-400' : 'text-red-400'}>
|
||||
{symbol.changePercent >= 0 ? '+' : ''}{symbol.changePercent.toFixed(2)}%
|
||||
</span>
|
||||
{onToggleVisibility && (
|
||||
<button
|
||||
onClick={() => onToggleVisibility(symbol.symbol)}
|
||||
className="p-0.5 hover:bg-gray-700 rounded"
|
||||
>
|
||||
{symbol.visible ? (
|
||||
<EyeIcon className="w-3 h-3 text-gray-400" />
|
||||
) : (
|
||||
<EyeSlashIcon className="w-3 h-3 text-gray-400" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{onRemoveSymbol && (
|
||||
<button
|
||||
onClick={() => onRemoveSymbol(symbol.symbol)}
|
||||
className="p-0.5 hover:bg-red-500/20 rounded"
|
||||
>
|
||||
<XMarkIcon className="w-3 h-3 text-gray-400 hover:text-red-400" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart Container */}
|
||||
<div ref={containerRef} className="relative flex-1" style={{ minHeight: height }}>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
className="w-full cursor-crosshair"
|
||||
style={{ height }}
|
||||
/>
|
||||
|
||||
{/* Tooltip */}
|
||||
{hoveredPoint && (
|
||||
<div
|
||||
className="absolute pointer-events-none bg-gray-900 border border-gray-700 rounded px-3 py-2 text-xs shadow-lg z-10"
|
||||
style={{
|
||||
left: hoveredPoint.x + 15,
|
||||
top: 30,
|
||||
transform: hoveredPoint.x > (canvasRef.current?.width || 0) - 150 ? 'translateX(-100%)' : 'none',
|
||||
}}
|
||||
>
|
||||
<div className="text-gray-400 mb-1">
|
||||
{new Date(hoveredPoint.timestamp).toLocaleDateString(undefined, {
|
||||
weekday: 'short',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</div>
|
||||
{hoveredPoint.values.map((v) => (
|
||||
<div key={v.symbol} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: v.color }} />
|
||||
<span className="text-white">{v.symbol}:</span>
|
||||
<span style={{ color: v.color }}>
|
||||
{normalization === 'percentage'
|
||||
? `${v.value >= 0 ? '+' : ''}${v.value.toFixed(2)}%`
|
||||
: v.value.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading Overlay */}
|
||||
{isLoading && (
|
||||
<div className="absolute inset-0 bg-gray-900/50 flex items-center justify-center">
|
||||
<ArrowPathIcon className="w-8 h-8 text-cyan-400 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && symbols.length === 0 && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center text-gray-500">
|
||||
<ChartBarSquareIcon className="w-12 h-12 mx-auto mb-2 opacity-50" />
|
||||
<p className="text-sm">No symbols to compare</p>
|
||||
{onAddSymbol && (
|
||||
<button
|
||||
onClick={onAddSymbol}
|
||||
className="mt-2 px-3 py-1 bg-blue-500 text-white rounded text-xs hover:bg-blue-600"
|
||||
>
|
||||
Add Symbol
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SymbolComparisonChart;
|
||||
643
src/modules/trading/components/TradingScreener.tsx
Normal file
643
src/modules/trading/components/TradingScreener.tsx
Normal file
@ -0,0 +1,643 @@
|
||||
/**
|
||||
* TradingScreener Component
|
||||
* Advanced screener with filters for stocks/forex/crypto
|
||||
* Epic: OQI-003 Trading Charts
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import {
|
||||
FunnelIcon,
|
||||
MagnifyingGlassIcon,
|
||||
ArrowPathIcon,
|
||||
ChevronUpIcon,
|
||||
ChevronDownIcon,
|
||||
StarIcon,
|
||||
PlusIcon,
|
||||
AdjustmentsHorizontalIcon,
|
||||
ArrowDownTrayIcon,
|
||||
BookmarkIcon,
|
||||
TrashIcon,
|
||||
ChartBarIcon,
|
||||
} from '@heroicons/react/24/solid';
|
||||
import { StarIcon as StarOutlineIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
// Types
|
||||
export interface ScreenerResult {
|
||||
symbol: string;
|
||||
name: string;
|
||||
sector?: string;
|
||||
industry?: string;
|
||||
exchange: string;
|
||||
price: number;
|
||||
change: number;
|
||||
changePercent: number;
|
||||
volume: number;
|
||||
avgVolume: number;
|
||||
marketCap?: number;
|
||||
pe?: number;
|
||||
eps?: number;
|
||||
high52w: number;
|
||||
low52w: number;
|
||||
rsi?: number;
|
||||
macdSignal?: 'bullish' | 'bearish' | 'neutral';
|
||||
sma20?: number;
|
||||
sma50?: number;
|
||||
sma200?: number;
|
||||
atr?: number;
|
||||
beta?: number;
|
||||
dividendYield?: number;
|
||||
isFavorite?: boolean;
|
||||
}
|
||||
|
||||
export interface ScreenerFilter {
|
||||
id: string;
|
||||
field: keyof ScreenerResult;
|
||||
operator: 'gt' | 'lt' | 'eq' | 'gte' | 'lte' | 'between' | 'contains';
|
||||
value: number | string | [number, number];
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
export interface SavedScreener {
|
||||
id: string;
|
||||
name: string;
|
||||
filters: ScreenerFilter[];
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
type SortDirection = 'asc' | 'desc';
|
||||
type SortField = keyof ScreenerResult;
|
||||
|
||||
interface TradingScreenerProps {
|
||||
results: ScreenerResult[];
|
||||
savedScreeners?: SavedScreener[];
|
||||
onSearch?: (query: string) => void;
|
||||
onFilterChange?: (filters: ScreenerFilter[]) => void;
|
||||
onSaveScreener?: (name: string, filters: ScreenerFilter[]) => void;
|
||||
onLoadScreener?: (screener: SavedScreener) => void;
|
||||
onDeleteScreener?: (id: string) => void;
|
||||
onSymbolClick?: (symbol: string) => void;
|
||||
onAddToWatchlist?: (symbol: string) => void;
|
||||
onToggleFavorite?: (symbol: string) => void;
|
||||
onExport?: (format: 'csv' | 'json') => void;
|
||||
onRefresh?: () => void;
|
||||
isLoading?: boolean;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
const FILTER_PRESETS: { name: string; filters: Omit<ScreenerFilter, 'id'>[] }[] = [
|
||||
{
|
||||
name: 'High Volume',
|
||||
filters: [
|
||||
{ field: 'volume', operator: 'gt', value: 1000000, enabled: true },
|
||||
{ field: 'changePercent', operator: 'gt', value: 0, enabled: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Oversold (RSI < 30)',
|
||||
filters: [{ field: 'rsi', operator: 'lt', value: 30, enabled: true }],
|
||||
},
|
||||
{
|
||||
name: 'Overbought (RSI > 70)',
|
||||
filters: [{ field: 'rsi', operator: 'gt', value: 70, enabled: true }],
|
||||
},
|
||||
{
|
||||
name: 'Golden Cross',
|
||||
filters: [
|
||||
{ field: 'sma50', operator: 'gt', value: 0, enabled: true },
|
||||
{ field: 'sma200', operator: 'gt', value: 0, enabled: true },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Near 52W High',
|
||||
filters: [{ field: 'changePercent', operator: 'gt', value: 5, enabled: true }],
|
||||
},
|
||||
];
|
||||
|
||||
const FILTERABLE_FIELDS: { field: keyof ScreenerResult; label: string; type: 'number' | 'string' }[] = [
|
||||
{ field: 'price', label: 'Price', type: 'number' },
|
||||
{ field: 'changePercent', label: 'Change %', type: 'number' },
|
||||
{ field: 'volume', label: 'Volume', type: 'number' },
|
||||
{ field: 'marketCap', label: 'Market Cap', type: 'number' },
|
||||
{ field: 'pe', label: 'P/E Ratio', type: 'number' },
|
||||
{ field: 'rsi', label: 'RSI', type: 'number' },
|
||||
{ field: 'beta', label: 'Beta', type: 'number' },
|
||||
{ field: 'dividendYield', label: 'Dividend Yield', type: 'number' },
|
||||
{ field: 'sector', label: 'Sector', type: 'string' },
|
||||
{ field: 'exchange', label: 'Exchange', type: 'string' },
|
||||
];
|
||||
|
||||
const TradingScreener: React.FC<TradingScreenerProps> = ({
|
||||
results,
|
||||
savedScreeners = [],
|
||||
onSearch,
|
||||
onFilterChange,
|
||||
onSaveScreener,
|
||||
onLoadScreener,
|
||||
onDeleteScreener,
|
||||
onSymbolClick,
|
||||
onAddToWatchlist,
|
||||
onToggleFavorite,
|
||||
onExport,
|
||||
onRefresh,
|
||||
isLoading = false,
|
||||
compact = false,
|
||||
}) => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [filters, setFilters] = useState<ScreenerFilter[]>([]);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [showSavedScreeners, setShowSavedScreeners] = useState(false);
|
||||
const [sortField, setSortField] = useState<SortField>('changePercent');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
|
||||
const [newScreenerName, setNewScreenerName] = useState('');
|
||||
|
||||
// Apply filters and sorting
|
||||
const filteredResults = useMemo(() => {
|
||||
let filtered = [...results];
|
||||
|
||||
// Search filter
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(r) =>
|
||||
r.symbol.toLowerCase().includes(query) ||
|
||||
r.name.toLowerCase().includes(query) ||
|
||||
r.sector?.toLowerCase().includes(query) ||
|
||||
r.industry?.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
// Apply custom filters
|
||||
for (const filter of filters.filter((f) => f.enabled)) {
|
||||
filtered = filtered.filter((r) => {
|
||||
const value = r[filter.field];
|
||||
if (value === undefined || value === null) return false;
|
||||
|
||||
switch (filter.operator) {
|
||||
case 'gt':
|
||||
return typeof value === 'number' && value > (filter.value as number);
|
||||
case 'lt':
|
||||
return typeof value === 'number' && value < (filter.value as number);
|
||||
case 'gte':
|
||||
return typeof value === 'number' && value >= (filter.value as number);
|
||||
case 'lte':
|
||||
return typeof value === 'number' && value <= (filter.value as number);
|
||||
case 'eq':
|
||||
return value === filter.value;
|
||||
case 'between':
|
||||
const [min, max] = filter.value as [number, number];
|
||||
return typeof value === 'number' && value >= min && value <= max;
|
||||
case 'contains':
|
||||
return typeof value === 'string' && value.toLowerCase().includes((filter.value as string).toLowerCase());
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sort
|
||||
filtered.sort((a, b) => {
|
||||
const aVal = a[sortField];
|
||||
const bVal = b[sortField];
|
||||
if (aVal === undefined || aVal === null) return 1;
|
||||
if (bVal === undefined || bVal === null) return -1;
|
||||
const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
|
||||
return sortDirection === 'asc' ? comparison : -comparison;
|
||||
});
|
||||
|
||||
return filtered;
|
||||
}, [results, searchQuery, filters, sortField, sortDirection]);
|
||||
|
||||
// Handle sort
|
||||
const handleSort = useCallback((field: SortField) => {
|
||||
if (field === sortField) {
|
||||
setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection('desc');
|
||||
}
|
||||
}, [sortField]);
|
||||
|
||||
// Add new filter
|
||||
const addFilter = useCallback(() => {
|
||||
const newFilter: ScreenerFilter = {
|
||||
id: `filter-${Date.now()}`,
|
||||
field: 'price',
|
||||
operator: 'gt',
|
||||
value: 0,
|
||||
enabled: true,
|
||||
};
|
||||
const newFilters = [...filters, newFilter];
|
||||
setFilters(newFilters);
|
||||
onFilterChange?.(newFilters);
|
||||
}, [filters, onFilterChange]);
|
||||
|
||||
// Update filter
|
||||
const updateFilter = useCallback((id: string, updates: Partial<ScreenerFilter>) => {
|
||||
const newFilters = filters.map((f) => (f.id === id ? { ...f, ...updates } : f));
|
||||
setFilters(newFilters);
|
||||
onFilterChange?.(newFilters);
|
||||
}, [filters, onFilterChange]);
|
||||
|
||||
// Remove filter
|
||||
const removeFilter = useCallback((id: string) => {
|
||||
const newFilters = filters.filter((f) => f.id !== id);
|
||||
setFilters(newFilters);
|
||||
onFilterChange?.(newFilters);
|
||||
}, [filters, onFilterChange]);
|
||||
|
||||
// Load preset
|
||||
const loadPreset = useCallback((preset: typeof FILTER_PRESETS[0]) => {
|
||||
const newFilters = preset.filters.map((f, i) => ({
|
||||
...f,
|
||||
id: `preset-${Date.now()}-${i}`,
|
||||
}));
|
||||
setFilters(newFilters);
|
||||
onFilterChange?.(newFilters);
|
||||
}, [onFilterChange]);
|
||||
|
||||
// Save screener
|
||||
const handleSaveScreener = useCallback(() => {
|
||||
if (newScreenerName.trim() && filters.length > 0) {
|
||||
onSaveScreener?.(newScreenerName.trim(), filters);
|
||||
setNewScreenerName('');
|
||||
}
|
||||
}, [newScreenerName, filters, onSaveScreener]);
|
||||
|
||||
// Format helpers
|
||||
const formatNumber = (num: number | undefined, decimals = 2): string => {
|
||||
if (num === undefined || num === null) return '-';
|
||||
if (Math.abs(num) >= 1e9) return `${(num / 1e9).toFixed(1)}B`;
|
||||
if (Math.abs(num) >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
|
||||
if (Math.abs(num) >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
|
||||
return num.toFixed(decimals);
|
||||
};
|
||||
|
||||
const formatPrice = (price: number): string => {
|
||||
if (price >= 1000) return price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||||
if (price >= 1) return price.toFixed(2);
|
||||
return price.toFixed(4);
|
||||
};
|
||||
|
||||
// Render sort indicator
|
||||
const renderSortIndicator = (field: SortField) => {
|
||||
if (sortField !== field) return null;
|
||||
return sortDirection === 'asc' ? (
|
||||
<ChevronUpIcon className="w-3 h-3 inline ml-1" />
|
||||
) : (
|
||||
<ChevronDownIcon className="w-3 h-3 inline ml-1" />
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`bg-gray-800/50 rounded-lg ${compact ? 'p-2' : 'p-4'} flex flex-col h-full`}>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<FunnelIcon className="w-5 h-5 text-amber-400" />
|
||||
<h3 className={`font-semibold text-white ${compact ? 'text-xs' : 'text-sm'}`}>
|
||||
Stock Screener
|
||||
</h3>
|
||||
<span className="text-xs text-gray-400">
|
||||
{filteredResults.length} / {results.length} results
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`p-1.5 rounded transition-colors ${showFilters ? 'bg-amber-500/20 text-amber-400' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
|
||||
title="Filters"
|
||||
>
|
||||
<AdjustmentsHorizontalIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowSavedScreeners(!showSavedScreeners)}
|
||||
className={`p-1.5 rounded transition-colors ${showSavedScreeners ? 'bg-blue-500/20 text-blue-400' : 'text-gray-400 hover:text-white hover:bg-gray-700'}`}
|
||||
title="Saved Screeners"
|
||||
>
|
||||
<BookmarkIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{onExport && (
|
||||
<button
|
||||
onClick={() => onExport('csv')}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Export"
|
||||
>
|
||||
<ArrowDownTrayIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{onRefresh && (
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={isLoading}
|
||||
className="p-1.5 text-gray-400 hover:text-white hover:bg-gray-700 rounded transition-colors"
|
||||
title="Refresh"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative mb-3">
|
||||
<MagnifyingGlassIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
onSearch?.(e.target.value);
|
||||
}}
|
||||
placeholder="Search by symbol, name, sector..."
|
||||
className="w-full bg-gray-900/50 border border-gray-700 rounded-lg pl-9 pr-4 py-2 text-sm text-white placeholder-gray-500 focus:border-amber-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Presets */}
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{FILTER_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset.name}
|
||||
onClick={() => loadPreset(preset)}
|
||||
className="px-2 py-1 text-xs bg-gray-700 text-gray-300 hover:bg-gray-600 rounded transition-colors"
|
||||
>
|
||||
{preset.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Saved Screeners Panel */}
|
||||
{showSavedScreeners && (
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded-lg">
|
||||
<div className="text-xs text-gray-400 mb-2">Saved Screeners</div>
|
||||
{savedScreeners.length > 0 ? (
|
||||
<div className="space-y-1">
|
||||
{savedScreeners.map((screener) => (
|
||||
<div
|
||||
key={screener.id}
|
||||
className="flex items-center justify-between p-2 bg-gray-800 rounded hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<button
|
||||
onClick={() => onLoadScreener?.(screener)}
|
||||
className="text-sm text-white hover:text-blue-400"
|
||||
>
|
||||
{screener.name}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onDeleteScreener?.(screener.id)}
|
||||
className="p-1 text-gray-400 hover:text-red-400"
|
||||
>
|
||||
<TrashIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-gray-500">No saved screeners</div>
|
||||
)}
|
||||
|
||||
{/* Save Current */}
|
||||
{filters.length > 0 && onSaveScreener && (
|
||||
<div className="flex gap-2 mt-2">
|
||||
<input
|
||||
type="text"
|
||||
value={newScreenerName}
|
||||
onChange={(e) => setNewScreenerName(e.target.value)}
|
||||
placeholder="Screener name..."
|
||||
className="flex-1 bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSaveScreener}
|
||||
disabled={!newScreenerName.trim()}
|
||||
className="px-2 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Filters Panel */}
|
||||
{showFilters && (
|
||||
<div className="mb-3 p-3 bg-gray-900/50 rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-gray-400">Active Filters</span>
|
||||
<button
|
||||
onClick={addFilter}
|
||||
className="flex items-center gap-1 px-2 py-1 text-xs bg-gray-700 text-white rounded hover:bg-gray-600"
|
||||
>
|
||||
<PlusIcon className="w-3 h-3" />
|
||||
Add Filter
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{filters.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{filters.map((filter) => (
|
||||
<div
|
||||
key={filter.id}
|
||||
className="flex items-center gap-2 p-2 bg-gray-800 rounded"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={filter.enabled}
|
||||
onChange={(e) => updateFilter(filter.id, { enabled: e.target.checked })}
|
||||
className="rounded bg-gray-700 border-gray-600"
|
||||
/>
|
||||
<select
|
||||
value={filter.field as string}
|
||||
onChange={(e) => updateFilter(filter.id, { field: e.target.value as keyof ScreenerResult })}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs text-white"
|
||||
>
|
||||
{FILTERABLE_FIELDS.map((f) => (
|
||||
<option key={f.field as string} value={f.field as string}>
|
||||
{f.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={filter.operator}
|
||||
onChange={(e) => updateFilter(filter.id, { operator: e.target.value as ScreenerFilter['operator'] })}
|
||||
className="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs text-white"
|
||||
>
|
||||
<option value="gt">></option>
|
||||
<option value="gte">>=</option>
|
||||
<option value="lt"><</option>
|
||||
<option value="lte"><=</option>
|
||||
<option value="eq">=</option>
|
||||
<option value="contains">contains</option>
|
||||
</select>
|
||||
<input
|
||||
type={FILTERABLE_FIELDS.find((f) => f.field === filter.field)?.type === 'number' ? 'number' : 'text'}
|
||||
value={filter.value as string | number}
|
||||
onChange={(e) =>
|
||||
updateFilter(filter.id, {
|
||||
value: e.target.type === 'number' ? parseFloat(e.target.value) || 0 : e.target.value,
|
||||
})
|
||||
}
|
||||
className="w-24 bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs text-white"
|
||||
/>
|
||||
<button
|
||||
onClick={() => removeFilter(filter.id)}
|
||||
className="p-1 text-gray-400 hover:text-red-400"
|
||||
>
|
||||
<TrashIcon className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-xs text-gray-500 text-center py-2">No filters applied</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Table */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<table className="w-full text-xs">
|
||||
<thead className="sticky top-0 bg-gray-800">
|
||||
<tr className="border-b border-gray-700">
|
||||
<th className="text-left py-2 px-2 text-gray-400 font-medium">
|
||||
<button onClick={() => handleSort('symbol')} className="hover:text-white">
|
||||
Symbol{renderSortIndicator('symbol')}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 text-gray-400 font-medium">
|
||||
<button onClick={() => handleSort('price')} className="hover:text-white">
|
||||
Price{renderSortIndicator('price')}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 text-gray-400 font-medium">
|
||||
<button onClick={() => handleSort('changePercent')} className="hover:text-white">
|
||||
Change{renderSortIndicator('changePercent')}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 text-gray-400 font-medium hidden sm:table-cell">
|
||||
<button onClick={() => handleSort('volume')} className="hover:text-white">
|
||||
Volume{renderSortIndicator('volume')}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 text-gray-400 font-medium hidden md:table-cell">
|
||||
<button onClick={() => handleSort('marketCap')} className="hover:text-white">
|
||||
Mkt Cap{renderSortIndicator('marketCap')}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-right py-2 px-2 text-gray-400 font-medium hidden lg:table-cell">
|
||||
<button onClick={() => handleSort('rsi')} className="hover:text-white">
|
||||
RSI{renderSortIndicator('rsi')}
|
||||
</button>
|
||||
</th>
|
||||
<th className="text-center py-2 px-2 text-gray-400 font-medium w-20">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredResults.map((result) => (
|
||||
<tr
|
||||
key={result.symbol}
|
||||
className="border-b border-gray-700/50 hover:bg-gray-700/30 transition-colors cursor-pointer"
|
||||
onClick={() => onSymbolClick?.(result.symbol)}
|
||||
>
|
||||
<td className="py-2 px-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onToggleFavorite?.(result.symbol);
|
||||
}}
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
>
|
||||
{result.isFavorite ? (
|
||||
<StarIcon className="w-4 h-4 text-yellow-400" />
|
||||
) : (
|
||||
<StarOutlineIcon className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
<div>
|
||||
<div className="text-white font-medium">{result.symbol}</div>
|
||||
<div className="text-gray-500 text-[10px] truncate max-w-[100px]">{result.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right text-white font-mono">{formatPrice(result.price)}</td>
|
||||
<td className={`py-2 px-2 text-right font-mono ${result.changePercent >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{result.changePercent >= 0 ? '+' : ''}{result.changePercent.toFixed(2)}%
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right text-gray-300 font-mono hidden sm:table-cell">
|
||||
{formatNumber(result.volume, 0)}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right text-gray-300 font-mono hidden md:table-cell">
|
||||
{formatNumber(result.marketCap, 1)}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-right hidden lg:table-cell">
|
||||
{result.rsi !== undefined && (
|
||||
<span
|
||||
className={`font-mono ${
|
||||
result.rsi > 70 ? 'text-red-400' : result.rsi < 30 ? 'text-green-400' : 'text-gray-300'
|
||||
}`}
|
||||
>
|
||||
{result.rsi.toFixed(0)}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2 px-2">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSymbolClick?.(result.symbol);
|
||||
}}
|
||||
className="p-1 text-gray-400 hover:text-blue-400 hover:bg-blue-500/20 rounded"
|
||||
title="View Chart"
|
||||
>
|
||||
<ChartBarIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{onAddToWatchlist && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onAddToWatchlist(result.symbol);
|
||||
}}
|
||||
className="p-1 text-gray-400 hover:text-green-400 hover:bg-green-500/20 rounded"
|
||||
title="Add to Watchlist"
|
||||
>
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Empty State */}
|
||||
{!isLoading && filteredResults.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-gray-500">
|
||||
<FunnelIcon className="w-12 h-12 mb-2 opacity-50" />
|
||||
<p className="text-sm">No results match your criteria</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchQuery('');
|
||||
setFilters([]);
|
||||
}}
|
||||
className="mt-2 text-xs text-blue-400 hover:underline"
|
||||
>
|
||||
Clear all filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<ArrowPathIcon className="w-8 h-8 text-amber-400 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TradingScreener;
|
||||
@ -41,6 +41,16 @@ export { default as PaperTradingPanel } from './PaperTradingPanel';
|
||||
// Utility Components
|
||||
export { default as ExportButton } from './ExportButton';
|
||||
|
||||
// Advanced Chart Components (OQI-003)
|
||||
export { default as OrderBookDepthVisualization } from './OrderBookDepthVisualization';
|
||||
export type { DepthLevel, DepthData, DepthChartConfig } from './OrderBookDepthVisualization';
|
||||
export { default as MarketDepthPanel } from './MarketDepthPanel';
|
||||
export type { OrderLevel, MarketDepthData, ViewMode, GroupingLevel } from './MarketDepthPanel';
|
||||
export { default as SymbolComparisonChart } from './SymbolComparisonChart';
|
||||
export type { PricePoint, SymbolData, NormalizationMode, TimeframeOption } from './SymbolComparisonChart';
|
||||
export { default as TradingScreener } from './TradingScreener';
|
||||
export type { ScreenerResult, ScreenerFilter, SavedScreener } from './TradingScreener';
|
||||
|
||||
// MT4 Gateway Components (OQI-009)
|
||||
export { default as MT4ConnectionStatus } from './MT4ConnectionStatus';
|
||||
export { default as LivePositionCard } from './LivePositionCard';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user