major update
This commit is contained in:
Dennis Thiessen
@@ -1,7 +1,10 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTrades } from '../hooks/useTrades';
|
||||
import { TradeTable, type SortColumn, type SortDirection } from '../components/scanner/TradeTable';
|
||||
import { TradeTable, type SortColumn, type SortDirection, computeTradeAnalysis } from '../components/scanner/TradeTable';
|
||||
import { SkeletonTable } from '../components/ui/Skeleton';
|
||||
import { useToast } from '../components/ui/Toast';
|
||||
import { triggerJob } from '../api/admin';
|
||||
import type { TradeSetup } from '../lib/types';
|
||||
|
||||
type DirectionFilter = 'both' | 'long' | 'short';
|
||||
@@ -18,6 +21,17 @@ function filterTrades(
|
||||
});
|
||||
}
|
||||
|
||||
function getComputedValue(trade: TradeSetup, column: SortColumn): number {
|
||||
const analysis = computeTradeAnalysis(trade);
|
||||
switch (column) {
|
||||
case 'risk_amount': return analysis.risk_amount;
|
||||
case 'reward_amount': return analysis.reward_amount;
|
||||
case 'stop_pct': return analysis.stop_pct;
|
||||
case 'target_pct': return analysis.target_pct;
|
||||
default: return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function sortTrades(
|
||||
trades: TradeSetup[],
|
||||
column: SortColumn,
|
||||
@@ -35,8 +49,19 @@ function sortTrades(
|
||||
case 'detected_at':
|
||||
cmp = new Date(a.detected_at).getTime() - new Date(b.detected_at).getTime();
|
||||
break;
|
||||
default:
|
||||
cmp = (a[column] as number) - (b[column] as number);
|
||||
case 'risk_amount':
|
||||
case 'reward_amount':
|
||||
case 'stop_pct':
|
||||
case 'target_pct':
|
||||
cmp = getComputedValue(a, column) - getComputedValue(b, column);
|
||||
break;
|
||||
case 'entry_price':
|
||||
case 'stop_loss':
|
||||
case 'target':
|
||||
case 'rr_ratio':
|
||||
case 'composite_score':
|
||||
cmp = a[column] - b[column];
|
||||
break;
|
||||
}
|
||||
return direction === 'asc' ? cmp : -cmp;
|
||||
});
|
||||
@@ -45,12 +70,25 @@ function sortTrades(
|
||||
|
||||
export default function ScannerPage() {
|
||||
const { data: trades, isLoading, isError, error } = useTrades();
|
||||
const queryClient = useQueryClient();
|
||||
const toast = useToast();
|
||||
|
||||
const [minRR, setMinRR] = useState(0);
|
||||
const [directionFilter, setDirectionFilter] = useState<DirectionFilter>('both');
|
||||
const [sortColumn, setSortColumn] = useState<SortColumn>('rr_ratio');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
|
||||
|
||||
const scanMutation = useMutation({
|
||||
mutationFn: () => triggerJob('rr_scanner'),
|
||||
onSuccess: () => {
|
||||
toast.addToast('success', 'Scanner triggered. Results will refresh shortly.');
|
||||
setTimeout(() => queryClient.invalidateQueries({ queryKey: ['trades'] }), 3000);
|
||||
},
|
||||
onError: () => {
|
||||
toast.addToast('error', 'Failed to trigger scanner');
|
||||
},
|
||||
});
|
||||
|
||||
const handleSort = (column: SortColumn) => {
|
||||
if (column === sortColumn) {
|
||||
setSortDirection((prev) => (prev === 'asc' ? 'desc' : 'asc'));
|
||||
@@ -68,23 +106,44 @@ export default function ScannerPage() {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-2xl font-bold text-gray-100">Trade Scanner</h1>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-100">Trade Scanner</h1>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => scanMutation.mutate()}
|
||||
disabled={scanMutation.isPending}
|
||||
className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-50 transition-colors duration-150"
|
||||
>
|
||||
{scanMutation.isPending ? 'Scanning...' : 'Run Scanner'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Explainer banner */}
|
||||
<div className="rounded-lg border border-blue-500/20 bg-blue-500/10 px-4 py-3 text-sm text-blue-300">
|
||||
The scanner identifies asymmetric risk-reward trade setups by analyzing S/R levels
|
||||
as price targets and using ATR-based stops to define risk.
|
||||
Click <span className="font-medium">Run Scanner</span> to scan all tickers now,
|
||||
or wait for the scheduled run.
|
||||
</div>
|
||||
|
||||
{/* Filter controls */}
|
||||
<div className="flex flex-wrap items-end gap-4">
|
||||
<div>
|
||||
<label htmlFor="min-rr" className="mb-1 block text-xs text-gray-400">
|
||||
Min R:R
|
||||
Min Risk:Reward
|
||||
</label>
|
||||
<input
|
||||
id="min-rr"
|
||||
type="number"
|
||||
min={0}
|
||||
step={0.1}
|
||||
value={minRR}
|
||||
onChange={(e) => setMinRR(Number(e.target.value) || 0)}
|
||||
className="w-24 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
|
||||
/>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm text-gray-400">1 :</span>
|
||||
<input
|
||||
id="min-rr"
|
||||
type="number"
|
||||
min={0}
|
||||
step={0.1}
|
||||
value={minRR}
|
||||
onChange={(e) => setMinRR(Number(e.target.value) || 0)}
|
||||
className="w-20 rounded border border-gray-700 bg-gray-800 px-3 py-1.5 text-sm text-gray-200 focus:border-blue-500 focus:outline-none transition-colors duration-150"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="direction" className="mb-1 block text-xs text-gray-400">
|
||||
@@ -112,7 +171,13 @@ export default function ScannerPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{trades && (
|
||||
{trades && processed.length === 0 && !isLoading && (
|
||||
<div className="rounded-lg border border-gray-700 bg-gray-800/50 px-4 py-8 text-center text-sm text-gray-400">
|
||||
No trade setups match the current filters. Try lowering the Min R:R or click Run Scanner to refresh.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{trades && processed.length > 0 && (
|
||||
<TradeTable
|
||||
trades={processed}
|
||||
sortColumn={sortColumn}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useMemo, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useTickerDetail } from '../hooks/useTickerDetail';
|
||||
@@ -11,6 +11,7 @@ import { IndicatorSelector } from '../components/ticker/IndicatorSelector';
|
||||
import { useToast } from '../components/ui/Toast';
|
||||
import { fetchData } from '../api/ingestion';
|
||||
import { formatPrice } from '../lib/format';
|
||||
import type { TradeSetup } from '../lib/types';
|
||||
|
||||
function SectionError({ message, onRetry }: { message: string; onRetry?: () => void }) {
|
||||
return (
|
||||
@@ -65,7 +66,7 @@ function DataFreshnessBar({ items }: { items: DataStatusItem[] }) {
|
||||
|
||||
export default function TickerDetailPage() {
|
||||
const { symbol = '' } = useParams<{ symbol: string }>();
|
||||
const { ohlcv, scores, srLevels, sentiment, fundamentals } = useTickerDetail(symbol);
|
||||
const { ohlcv, scores, srLevels, sentiment, fundamentals, trades } = useTickerDetail(symbol);
|
||||
const queryClient = useQueryClient();
|
||||
const { addToast } = useToast();
|
||||
|
||||
@@ -132,10 +133,29 @@ export default function TickerDetailPage() {
|
||||
},
|
||||
], [ohlcv.data, sentiment.data, fundamentals.data, srLevels.data, scores.data]);
|
||||
|
||||
// Sort S/R levels by strength for the table
|
||||
// Log trades API errors but don't disrupt the page
|
||||
useEffect(() => {
|
||||
if (trades.error) {
|
||||
console.error('Failed to fetch trade setups:', trades.error);
|
||||
}
|
||||
}, [trades.error]);
|
||||
|
||||
// Pick the latest trade setup for the current symbol
|
||||
const tradeSetup: TradeSetup | undefined = useMemo(() => {
|
||||
if (trades.error || !trades.data) return undefined;
|
||||
const matching = trades.data.filter(
|
||||
(t) => t.symbol.toUpperCase() === symbol.toUpperCase(),
|
||||
);
|
||||
if (matching.length === 0) return undefined;
|
||||
return matching.reduce((latest, t) =>
|
||||
new Date(t.detected_at) > new Date(latest.detected_at) ? t : latest,
|
||||
);
|
||||
}, [trades.data, trades.error, symbol]);
|
||||
|
||||
// Sort visible S/R levels by strength for the table (only levels within chart zones)
|
||||
const sortedLevels = useMemo(() => {
|
||||
if (!srLevels.data?.levels) return [];
|
||||
return [...srLevels.data.levels].sort((a, b) => b.strength - a.strength);
|
||||
if (!srLevels.data?.visible_levels) return [];
|
||||
return [...srLevels.data.visible_levels].sort((a, b) => b.strength - a.strength);
|
||||
}, [srLevels.data]);
|
||||
|
||||
return (
|
||||
@@ -176,7 +196,7 @@ export default function TickerDetailPage() {
|
||||
)}
|
||||
{ohlcv.data && (
|
||||
<div className="glass p-5">
|
||||
<CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} />
|
||||
<CandlestickChart data={ohlcv.data} srLevels={srLevels.data?.levels} zones={srLevels.data?.zones} tradeSetup={tradeSetup} />
|
||||
{srLevels.isError && (
|
||||
<p className="mt-2 text-xs text-yellow-500/80">S/R levels unavailable — chart shown without overlays</p>
|
||||
)}
|
||||
@@ -184,6 +204,39 @@ export default function TickerDetailPage() {
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Trade Setup Summary Card */}
|
||||
{tradeSetup && (
|
||||
<section>
|
||||
<h2 className="mb-3 text-xs font-medium uppercase tracking-widest text-gray-500">Trade Setup</h2>
|
||||
<div className="glass p-5">
|
||||
<div className="flex flex-wrap items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Direction</span>
|
||||
<span className={`text-sm font-semibold ${tradeSetup.direction === 'long' ? 'text-emerald-400' : 'text-red-400'}`}>
|
||||
{tradeSetup.direction.toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Entry</span>
|
||||
<span className="text-sm font-mono text-blue-300">{formatPrice(tradeSetup.entry_price)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Stop</span>
|
||||
<span className="text-sm font-mono text-red-400">{formatPrice(tradeSetup.stop_loss)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">Target</span>
|
||||
<span className="text-sm font-mono text-emerald-400">{formatPrice(tradeSetup.target)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">R:R</span>
|
||||
<span className="text-sm font-semibold text-gray-200">{tradeSetup.rr_ratio.toFixed(2)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Scores + Side Panels */}
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
<section>
|
||||
@@ -193,7 +246,7 @@ export default function TickerDetailPage() {
|
||||
<SectionError message={scores.error instanceof Error ? scores.error.message : 'Failed to load scores'} onRetry={() => scores.refetch()} />
|
||||
)}
|
||||
{scores.data && (
|
||||
<ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions.map((d) => ({ dimension: d.dimension, score: d.score }))} />
|
||||
<ScoreCard compositeScore={scores.data.composite_score} dimensions={scores.data.dimensions} compositeBreakdown={scores.data.composite_breakdown} />
|
||||
)}
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user