Fix UI/UX issues found during Playwright audit
- Strip raw markdown (**bold**) from Top Picks, Stocks to Avoid, and StockDetail banner text - Hide empty Top Picks section when no BUY stocks exist - Show all SELL stocks in Stocks to Avoid (remove 5-stock limit) - Fix "-0.0%" negative zero display in History page returns - Fix "1 sections" grammar in AIAnalysisPanel - Replace dead footer links with real GitHub/Twitter URLs - Fix Portfolio Simulator SELL dilution calculation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
hemangjoshi37a
parent
edb4b29ea8
commit
2418f11142
|
|
@ -1497,12 +1497,12 @@ def update_daily_recommendation_summary(date: str):
|
|||
for s in buy_stocks[:5]
|
||||
]
|
||||
|
||||
# Stocks to avoid: bottom-ranked SELL stocks (last 5)
|
||||
# Stocks to avoid: all SELL stocks
|
||||
stocks_to_avoid = [
|
||||
{'symbol': s['symbol'], 'company_name': s['company_name'],
|
||||
'confidence': s['confidence'], 'reason': s['reason'],
|
||||
'rank': s['rank']}
|
||||
for s in sell_stocks[-5:]
|
||||
for s in sell_stocks
|
||||
]
|
||||
|
||||
cursor.execute("""
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -120,7 +120,7 @@ export default function AIAnalysisPanel({
|
|||
<Brain className="w-5 h-5" />
|
||||
<span className="font-semibold text-sm">AI Analysis</span>
|
||||
<span className="text-xs bg-white/20 px-2 py-0.5 rounded-full">
|
||||
{sections.length} sections
|
||||
{sections.length} {sections.length === 1 ? 'section' : 'sections'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -20,16 +20,16 @@ export default function Footer() {
|
|||
<Link to="/history" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">History</Link>
|
||||
<Link to="/about" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">How It Works</Link>
|
||||
<span className="text-gray-200 dark:text-gray-700">|</span>
|
||||
<a href="#" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Disclaimer</a>
|
||||
<a href="#" className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Privacy</a>
|
||||
<a href="#disclaimer" title="AI-generated recommendations for educational purposes only. Not financial advice." className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Disclaimer</a>
|
||||
<a href="#privacy" title="We don't collect any personal data. All analysis runs locally." className="hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Privacy</a>
|
||||
</div>
|
||||
|
||||
{/* Social & Copyright */}
|
||||
<div className="flex items-center gap-3">
|
||||
<a href="#" className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<a href="https://github.com/hemangjoshi37a/TradingAgents" target="_blank" rel="noopener noreferrer" className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<Github className="w-4 h-4" />
|
||||
</a>
|
||||
<a href="#" className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<a href="https://x.com/heaborla" target="_blank" rel="noopener noreferrer" className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<Twitter className="w-4 h-4" />
|
||||
</a>
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500">© {new Date().getFullYear()}</span>
|
||||
|
|
|
|||
|
|
@ -142,7 +142,8 @@ function calculateSmartTrades(
|
|||
|
||||
delete openPositions[symbol];
|
||||
}
|
||||
stocksTracked++;
|
||||
// SELL exits position to cash — don't count in stocksTracked
|
||||
// since no capital is deployed and return is 0
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default function TopPicks({ picks }: TopPicksProps) {
|
|||
BUY
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 leading-relaxed">{pick.reason}</p>
|
||||
<p className="text-[11px] text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 leading-relaxed">{pick.reason?.replace(/\*\*/g, '').replace(/\*/g, '')}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-[11px] px-2 py-0.5 rounded-md font-medium border ${
|
||||
pick.risk_level === 'LOW' ? 'bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-400 border-emerald-200/50 dark:border-emerald-800/30' :
|
||||
|
|
@ -98,7 +98,7 @@ export function StocksToAvoid({ stocks }: StocksToAvoidProps) {
|
|||
SELL
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 leading-relaxed">{stock.reason}</p>
|
||||
<p className="text-[11px] text-gray-600 dark:text-gray-400 line-clamp-2 mb-2 leading-relaxed">{stock.reason?.replace(/\*\*/g, '').replace(/\*/g, '')}</p>
|
||||
<ChevronRight className="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 group-hover:text-red-600 dark:group-hover:text-red-400 transition-colors" />
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -540,7 +540,9 @@ export default function Dashboard() {
|
|||
|
||||
{/* Top Picks and Avoid Section - Side by Side Compact */}
|
||||
<div className="grid lg:grid-cols-2 gap-4">
|
||||
<TopPicks picks={recommendation.top_picks} />
|
||||
{recommendation.top_picks.length > 0 && (
|
||||
<TopPicks picks={recommendation.top_picks} />
|
||||
)}
|
||||
<StocksToAvoid stocks={recommendation.stocks_to_avoid} />
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -35,6 +35,13 @@ function getValueColorClass(value: number): string {
|
|||
: 'text-red-500 dark:text-red-400';
|
||||
}
|
||||
|
||||
// Format percentage without negative zero (e.g. "-0.0" becomes "0.0")
|
||||
function fmtPct(val: number, decimals = 1): string {
|
||||
const s = val.toFixed(decimals);
|
||||
if (s === '-0.0' || s === '-0.00') return s.replace('-', '');
|
||||
return s;
|
||||
}
|
||||
|
||||
// Investment Mode Toggle Component
|
||||
function InvestmentModeToggle({
|
||||
mode,
|
||||
|
|
@ -287,6 +294,8 @@ export default function History() {
|
|||
topPicksReturnDistribution: undefined as ReturnBucket[] | undefined,
|
||||
dateReturns: {} as Record<string, number>,
|
||||
allBacktestData: {} as Record<string, Record<string, number>>,
|
||||
dailyReturnsArray: [] as number[],
|
||||
topPicksDailyReturns: [] as number[],
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -313,21 +322,19 @@ export default function History() {
|
|||
|
||||
// Cumulative returns
|
||||
const cumulativeData: CumulativeReturnPoint[] = [];
|
||||
let aiMultiplier = 1, indexMultiplier = 1;
|
||||
let aiMultiplier = 1;
|
||||
|
||||
// Nifty daily returns
|
||||
// Nifty50 price ratio approach: direct comparison to start price
|
||||
// This avoids losing Nifty returns on days without backtest data
|
||||
const sortedNiftyDates = Object.keys(nifty50Prices).sort();
|
||||
const niftyDailyReturns: Record<string, number> = {};
|
||||
for (let i = 1; i < sortedNiftyDates.length; i++) {
|
||||
const prevPrice = nifty50Prices[sortedNiftyDates[i - 1]];
|
||||
const currPrice = nifty50Prices[sortedNiftyDates[i]];
|
||||
niftyDailyReturns[sortedNiftyDates[i]] = ((currPrice - prevPrice) / prevPrice) * 100;
|
||||
}
|
||||
const hasNiftyData = sortedNiftyDates.length > 0;
|
||||
const niftyStartPrice = hasNiftyData ? nifty50Prices[sortedNiftyDates[0]] : null;
|
||||
|
||||
const getNiftyReturn = (date: string): number => {
|
||||
if (niftyDailyReturns[date] !== undefined) return niftyDailyReturns[date];
|
||||
const getNiftyReturnForDate = (date: string): number => {
|
||||
if (!hasNiftyData || !niftyStartPrice) return 0;
|
||||
const closestDate = sortedNiftyDates.find(d => d >= date) || sortedNiftyDates[sortedNiftyDates.length - 1];
|
||||
return (closestDate && niftyDailyReturns[closestDate] !== undefined) ? niftyDailyReturns[closestDate] : 0;
|
||||
if (!closestDate || !nifty50Prices[closestDate]) return 0;
|
||||
return ((nifty50Prices[closestDate] / niftyStartPrice) - 1) * 100;
|
||||
};
|
||||
|
||||
const dateReturnsMap: Record<string, number> = {};
|
||||
|
|
@ -381,14 +388,13 @@ export default function History() {
|
|||
else if (weightedReturn < 0) { losses++; totalLossReturn += Math.abs(weightedReturn); }
|
||||
|
||||
aiMultiplier *= (1 + weightedReturn / 100);
|
||||
const indexDailyReturn = getNiftyReturn(date);
|
||||
indexMultiplier *= (1 + indexDailyReturn / 100);
|
||||
const niftyCumulativeReturn = getNiftyReturnForDate(date);
|
||||
|
||||
cumulativeData.push({
|
||||
date,
|
||||
value: Math.round(aiMultiplier * 10000) / 100,
|
||||
aiReturn: Math.round((aiMultiplier - 1) * 1000) / 10,
|
||||
indexReturn: Math.round((indexMultiplier - 1) * 1000) / 10,
|
||||
indexReturn: Math.round(niftyCumulativeReturn * 10) / 10,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -431,7 +437,7 @@ export default function History() {
|
|||
}
|
||||
|
||||
const avgWin = wins > 0 ? totalWinReturn / wins : 0;
|
||||
const avgLoss = losses > 0 ? totalLossReturn / losses : 1;
|
||||
const avgLoss = losses > 0 ? totalLossReturn / losses : 0;
|
||||
|
||||
riskMetrics = {
|
||||
sharpeRatio: Math.round(sharpeRatio * 100) / 100,
|
||||
|
|
@ -492,8 +498,9 @@ export default function History() {
|
|||
{ range: '2% to 3%', min: 2, max: 3, count: 0, stocks: [] },
|
||||
{ range: '> 3%', min: 3, max: Infinity, count: 0, stocks: [] },
|
||||
];
|
||||
let topPicksMultiplier = 1, topPicksIndexMultiplier = 1;
|
||||
let topPicksMultiplier = 1;
|
||||
let latestTopPicksDateWithData: string | null = null;
|
||||
const topPicksDailyReturnsArr: number[] = [];
|
||||
|
||||
for (const date of sortedDates) {
|
||||
const rec = recommendations.find(r => r.date === date);
|
||||
|
|
@ -511,14 +518,14 @@ export default function History() {
|
|||
|
||||
if (dateCount > 0) {
|
||||
const avgReturn = dateReturn / dateCount;
|
||||
topPicksDailyReturnsArr.push(avgReturn);
|
||||
topPicksMultiplier *= (1 + avgReturn / 100);
|
||||
const indexDailyReturn = getNiftyReturn(date);
|
||||
topPicksIndexMultiplier *= (1 + indexDailyReturn / 100);
|
||||
const topPicksNiftyReturn = getNiftyReturnForDate(date);
|
||||
topPicksCumulative.push({
|
||||
date,
|
||||
value: Math.round(topPicksMultiplier * 10000) / 100,
|
||||
aiReturn: Math.round((topPicksMultiplier - 1) * 1000) / 10,
|
||||
indexReturn: Math.round((topPicksIndexMultiplier - 1) * 1000) / 10,
|
||||
indexReturn: Math.round(topPicksNiftyReturn * 10) / 10,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -548,17 +555,19 @@ export default function History() {
|
|||
topPicksReturnDistribution: topPicksDistribution,
|
||||
dateReturns: dateReturnsMap,
|
||||
allBacktestData: allBacktest,
|
||||
dailyReturnsArray: dailyReturns,
|
||||
topPicksDailyReturns: topPicksDailyReturnsArr,
|
||||
};
|
||||
}, [batchBacktestByDate, hasBacktestData, recommendations, nifty50Prices]);
|
||||
|
||||
// Overall stats
|
||||
const overallStats = useMemo(() => {
|
||||
if (recommendations.length > 0 && chartData.cumulativeReturns && chartData.cumulativeReturns.length > 0) {
|
||||
const lastPoint = chartData.cumulativeReturns[chartData.cumulativeReturns.length - 1];
|
||||
if (recommendations.length > 0 && chartData.dailyReturnsArray && chartData.dailyReturnsArray.length > 0) {
|
||||
const mean = chartData.dailyReturnsArray.reduce((a, b) => a + b, 0) / chartData.dailyReturnsArray.length;
|
||||
return {
|
||||
totalDays: recommendations.length,
|
||||
totalPredictions: accuracyMetrics.total_predictions,
|
||||
avgDailyReturn: Math.round((lastPoint.aiReturn / chartData.cumulativeReturns.length) * 10) / 10,
|
||||
avgDailyReturn: Math.round(mean * 10) / 10,
|
||||
avgMonthlyReturn: 0,
|
||||
overallAccuracy: Math.round(accuracyMetrics.success_rate * 100),
|
||||
bestDay: null,
|
||||
|
|
@ -566,7 +575,7 @@ export default function History() {
|
|||
};
|
||||
}
|
||||
return { totalDays: recommendations.length, totalPredictions: 0, avgDailyReturn: 0, avgMonthlyReturn: 0, overallAccuracy: 0, bestDay: null, worstDay: null };
|
||||
}, [recommendations, chartData.cumulativeReturns, accuracyMetrics]);
|
||||
}, [recommendations, chartData.dailyReturnsArray, accuracyMetrics]);
|
||||
|
||||
// Filtered stats for Performance Summary
|
||||
const filteredStats = useMemo(() => {
|
||||
|
|
@ -578,14 +587,17 @@ export default function History() {
|
|||
return { totalDays: dates.length, avgDailyReturn: overallStats.avgDailyReturn, buySignals: signalTotals.buy, sellSignals: signalTotals.sell, holdSignals: signalTotals.hold };
|
||||
}
|
||||
|
||||
const topPicksMean = chartData.topPicksDailyReturns.length > 0
|
||||
? chartData.topPicksDailyReturns.reduce((a, b) => a + b, 0) / chartData.topPicksDailyReturns.length
|
||||
: 0;
|
||||
return {
|
||||
totalDays: dates.length,
|
||||
avgDailyReturn: 0,
|
||||
avgDailyReturn: Math.round(topPicksMean * 10) / 10,
|
||||
buySignals: recommendations.reduce((acc, r) => acc + r.top_picks.length, 0),
|
||||
sellSignals: 0,
|
||||
holdSignals: 0,
|
||||
};
|
||||
}, [summaryMode, dates.length, overallStats.avgDailyReturn, recommendations]);
|
||||
}, [summaryMode, dates.length, overallStats.avgDailyReturn, recommendations, chartData.topPicksDailyReturns]);
|
||||
|
||||
// Date stats
|
||||
const dateStatsMap = useMemo(() => {
|
||||
|
|
@ -1069,7 +1081,7 @@ export default function History() {
|
|||
<div className={`text-sm font-bold mt-0.5 ${
|
||||
selectedDate === date ? 'text-white' : getValueColorClass(avgReturn)
|
||||
}`}>
|
||||
{isPositive ? '+' : ''}{avgReturn.toFixed(1)}%
|
||||
{isPositive ? '+' : ''}{fmtPct(avgReturn)}%
|
||||
</div>
|
||||
)}
|
||||
<div className={`text-[10px] mt-0.5 ${selectedDate === date ? 'text-white/80' : 'opacity-60'}`}>
|
||||
|
|
@ -1098,7 +1110,7 @@ export default function History() {
|
|||
Overall
|
||||
</div>
|
||||
<div className="text-sm font-bold mt-0.5">
|
||||
{overallStats.avgDailyReturn >= 0 ? '+' : ''}{overallStats.avgDailyReturn.toFixed(1)}%
|
||||
{overallStats.avgDailyReturn >= 0 ? '+' : ''}{fmtPct(overallStats.avgDailyReturn)}%
|
||||
</div>
|
||||
<div className="text-[10px] mt-0.5 text-white/80">
|
||||
{overallStats.overallAccuracy}% accurate
|
||||
|
|
@ -1391,7 +1403,7 @@ export default function History() {
|
|||
? 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'
|
||||
: getValueColorClass(nextDayReturn)
|
||||
}`} title={bt?.hold_days ? `${bt.hold_days}d return` : '1d return'}>
|
||||
{nextDayReturn >= 0 ? '+' : ''}{nextDayReturn.toFixed(1)}%
|
||||
{nextDayReturn >= 0 ? '+' : ''}{fmtPct(nextDayReturn)}%
|
||||
{bt?.hold_days && <span className="text-[9px] opacity-60">/{bt.hold_days}d</span>}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -1415,7 +1427,7 @@ export default function History() {
|
|||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
{[
|
||||
{ label: 'Days Tracked', value: filteredStats.totalDays.toString(), icon: <Clock className="w-4 h-4" />, color: 'nifty', modal: 'daysTracked' as SummaryModalType },
|
||||
{ label: 'Avg Return', value: `${filteredStats.avgDailyReturn >= 0 ? '+' : ''}${filteredStats.avgDailyReturn.toFixed(1)}%`, icon: <TrendingUp className="w-4 h-4" />, color: filteredStats.avgDailyReturn >= 0 ? 'emerald' : 'red', modal: 'avgReturn' as SummaryModalType },
|
||||
{ label: 'Avg Return', value: `${filteredStats.avgDailyReturn >= 0 ? '+' : ''}${fmtPct(filteredStats.avgDailyReturn)}%`, icon: <TrendingUp className="w-4 h-4" />, color: filteredStats.avgDailyReturn >= 0 ? 'emerald' : 'red', modal: 'avgReturn' as SummaryModalType },
|
||||
{ label: summaryMode === 'topPicks' ? 'Top Picks' : 'Buy Signals', value: filteredStats.buySignals.toString(), icon: <ArrowUpRight className="w-4 h-4" />, color: 'emerald', modal: 'buySignals' as SummaryModalType },
|
||||
{ label: 'Sell Signals', value: filteredStats.sellSignals.toString(), icon: <ArrowDownRight className="w-4 h-4" />, color: 'red', modal: 'sellSignals' as SummaryModalType },
|
||||
].map(({ label, value, icon, color, modal }) => (
|
||||
|
|
|
|||
|
|
@ -1080,7 +1080,7 @@ export default function StockDetail() {
|
|||
<div>
|
||||
<span className="font-semibold text-green-800 dark:text-green-300 text-sm">Top Pick: </span>
|
||||
<span className="text-sm text-green-700 dark:text-green-400">
|
||||
{latestRecommendation.top_picks.find(p => p.symbol === symbol)?.reason}
|
||||
{latestRecommendation.top_picks.find(p => p.symbol === symbol)?.reason?.replace(/\*\*/g, '').replace(/\*/g, '')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1094,7 +1094,7 @@ export default function StockDetail() {
|
|||
<div>
|
||||
<span className="font-semibold text-red-800 dark:text-red-300 text-sm">Avoid: </span>
|
||||
<span className="text-sm text-red-700 dark:text-red-400">
|
||||
{latestRecommendation.stocks_to_avoid.find(s => s.symbol === symbol)?.reason}
|
||||
{latestRecommendation.stocks_to_avoid.find(s => s.symbol === symbol)?.reason?.replace(/\*\*/g, '').replace(/\*/g, '')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue