henry/AITrader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rewrite analyze page with technical indicators column and signal summary

Browse Source
This commit is contained in:
henry
2026-05-16 22:05:01 +02:00
parent 898f4f48dc
commit 046e81ffc1
4 changed files with 471 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/analyze.tsx
+349 -190
View File
@@ -3,112 +3,213 @@ import { Link } from "react-router";
import Navbar from "../components/Navbar";
import type { TradingDecision } from "../types/agents";
interface Indicators {
rsi: number | null;
sma20: number | null;
sma50: number | null;
ema12: number | null;
ema26: number | null;
macd: number | null;
bbUpper: number | null;
bbMiddle: number | null;
bbLower: number | null;
atr: number | null;
avgVolume: number | null;
}
interface StockRow {
id: string;
ticker: string;
currentPrice: number | null;
position: number;
rsi: number | null;
indicators: Indicators;
analysis: TradingDecision | null;
loading: boolean;
indicatorsLoading: boolean;
}
export const meta = () => {
return [
{ title: "Portfolio Analysis - AITrader" },
{ name: "description", content: "Analyze your stock portfolio with AI trading insights" },
export const meta = () => [
{ title: "Portfolio Analysis - AITrader" },
{ name: "description", content: "Analyze your stock portfolio with AI trading insights" },
];
function RsiBadge({ value }: { value: number }) {
const color = value > 70 ? "bg-red-100 text-red-700" : value < 30 ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700";
const label = value > 70 ? "Overbought" : value < 30 ? "Oversold" : "Neutral";
return <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${color}`}>{value.toFixed(0)} {label}</span>;
}
function MacdBadge({ value }: { value: number }) {
const color = value > 0 ? "text-green-600" : "text-red-600";
return <span className={`text-xs font-medium ${color}`}>{value > 0 ? "▲" : "▼"} {value.toFixed(2)}</span>;
}
function PriceVsSma({ price, sma, label }: { price: number; sma: number; label: string }) {
if (!price || !sma) return <span className="text-xs text-gray-400">-</span>;
const above = price > sma;
const pct = ((price - sma) / sma * 100).toFixed(1);
return (
<span className={`text-xs ${above ? "text-green-600" : "text-red-600"}`}>
{above ? "▲" : "▼"} {pct}%
</span>
);
}
function SignalSummary({ price, indicators }: { price: number | null; indicators: Indicators }) {
if (!price) return <span className="text-xs text-gray-400">No data</span>;
const signals: string[] = [];
if (indicators.rsi != null) {
if (indicators.rsi > 70) signals.push("RSI overbought");
else if (indicators.rsi < 30) signals.push("RSI oversold");
}
if (indicators.sma20 != null && indicators.sma50 != null) {
if (indicators.sma20 > indicators.sma50) signals.push("SMA bullish cross");
else signals.push("SMA bearish cross");
}
if (indicators.macd != null) {
if (indicators.macd > 0) signals.push("MACD positive");
else signals.push("MACD negative");
}
if (indicators.bbUpper != null && indicators.bbLower != null) {
if (price > indicators.bbUpper) signals.push("Above BB upper");
else if (price < indicators.bbLower) signals.push("Below BB lower");
}
if (signals.length === 0) return <span className="text-xs text-gray-400">-</span>;
const bullish = signals.filter(s => s.includes("oversold") || s.includes("bullish") || s.includes("positive") || s.includes("Below BB")).length;
const bearish = signals.filter(s => s.includes("overbought") || s.includes("bearish") || s.includes("negative") || s.includes("Above BB")).length;
const net = bullish - bearish;
const bias = net > 0 ? "bullish" : net < 0 ? "bearish" : "neutral";
const biasColor = bias === "bullish" ? "text-green-600" : bias === "bearish" ? "text-red-600" : "text-gray-500";
return (
<div>
<span className={`text-xs font-semibold capitalize ${biasColor}`}>{bias}</span>
<div className="text-xs text-gray-500 mt-0.5 space-y-0.5">
{signals.slice(0, 3).map((s, i) => <div key={i}>{s}</div>)}
</div>
</div>
);
}
function IndicatorsPopover({ indicators, price, visible, onClose }: { indicators: Indicators; price: number | null; visible: boolean; onClose: () => void }) {
if (!visible) return null;
const rows = [
{ label: "RSI (14)", value: indicators.rsi != null ? <RsiBadge value={indicators.rsi} /> : "-" },
{ label: "SMA 20", value: indicators.sma20 != null ? `${indicators.sma20.toFixed(2)}` : "-" },
{ label: "SMA 50", value: indicators.sma50 != null ? `${indicators.sma50.toFixed(2)}` : "-" },
{ label: "EMA 12", value: indicators.ema12 != null ? `${indicators.ema12.toFixed(2)}` : "-" },
{ label: "EMA 26", value: indicators.ema26 != null ? `${indicators.ema26.toFixed(2)}` : "-" },
{ label: "MACD", value: indicators.macd != null ? <MacdBadge value={indicators.macd} /> : "-" },
{ label: "BB Upper", value: indicators.bbUpper != null ? `$${indicators.bbUpper.toFixed(2)}` : "-" },
{ label: "BB Middle", value: indicators.bbMiddle != null ? `$${indicators.bbMiddle.toFixed(2)}` : "-" },
{ label: "BB Lower", value: indicators.bbLower != null ? `$${indicators.bbLower.toFixed(2)}` : "-" },
{ label: "ATR (14)", value: indicators.atr != null ? `$${indicators.atr.toFixed(2)}` : "-" },
{ label: "Avg Vol (20)", value: indicators.avgVolume != null ? indicators.avgVolume.toFixed(0) : "-" },
];
};
return (
<>
<div className="fixed inset-0 z-40" onClick={onClose} />
<div className="absolute z-50 left-0 top-full mt-1 w-64 bg-white rounded-lg shadow-xl border border-gray-200 p-3">
<h4 className="text-xs font-semibold text-gray-700 mb-2">Technical Indicators</h4>
<div className="space-y-1">
{rows.map((r) => (
<div key={r.label} className="flex justify-between text-xs">
<span className="text-gray-500">{r.label}</span>
<span className="text-gray-900 font-medium">{r.value}</span>
</div>
))}
</div>
{price && indicators.sma20 && indicators.sma50 && (
<div className="mt-2 pt-2 border-t border-gray-100 space-y-1">
<div className="flex justify-between text-xs">
<span className="text-gray-500">Price vs SMA20</span>
<PriceVsSma price={price} sma={indicators.sma20} label="SMA20" />
</div>
<div className="flex justify-between text-xs">
<span className="text-gray-500">Price vs SMA50</span>
<PriceVsSma price={price} sma={indicators.sma50} label="SMA50" />
</div>
</div>
)}
</div>
</>
);
}
export default function Analyze() {
const [stocks, setStocks] = useState<StockRow[]>([]);
const [newTicker, setNewTicker] = useState("");
// Load Alpaca portfolio and database stocks on mount
useEffect(() => {
const loadPortfolio = async () => {
try {
// Fetch both Alpaca positions and database stocks
const [positionsRes, dbStocksRes] = await Promise.all([
fetch("/api/alpaca/positions"),
fetch("/api/stocks"),
]);
useEffect(() => {
const loadPortfolio = async () => {
try {
const [positionsRes, dbStocksRes] = await Promise.all([
fetch("/api/alpaca/positions"),
fetch("/api/stocks"),
]);
const positions = positionsRes.ok ? await positionsRes.json() : [];
const dbStocks = dbStocksRes.ok ? await dbStocksRes.json() : [];
const positions = positionsRes.ok ? await positionsRes.json() : [];
const dbStocks = dbStocksRes.ok ? await dbStocksRes.json() : [];
// Create a set of tickers from Alpaca positions for quick lookup
const alpacaTickers = new Set(positions.map((p: { ticker: string }) => p.ticker));
const alpacaTickers = new Set(positions.map((p: { ticker: string }) => p.ticker));
// Build stocks array for Alpaca positions
const alpacaStocks = await Promise.all(
positions.map(async (p: { ticker: string; qty: number }) => {
try {
const quoteRes = await fetch(`/api/alpaca/quote/${p.ticker}`);
const quote = quoteRes.ok ? await quoteRes.json() : null;
return {
id: `alpaca-${p.ticker}`,
ticker: p.ticker,
currentPrice: quote?.price ?? null,
position: p.qty,
rsi: null,
analysis: null,
loading: false,
};
} catch {
return {
id: `alpaca-${p.ticker}`,
ticker: p.ticker,
currentPrice: null,
position: p.qty,
rsi: null,
analysis: null,
loading: false,
};
}
})
);
const buildStock = async (ticker: string, qty: number) => {
try {
const quoteRes = await fetch(`/api/alpaca/quote/${ticker}`);
const quote = quoteRes.ok ? await quoteRes.json() : null;
return {
id: `alpaca-${ticker}`,
ticker,
currentPrice: quote?.price ?? null,
position: qty,
indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
analysis: null,
loading: false,
indicatorsLoading: false,
};
} catch {
return {
id: `alpaca-${ticker}`,
ticker,
currentPrice: null,
position: qty,
indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
analysis: null,
loading: false,
indicatorsLoading: false,
};
}
};
// Add database stocks that are not in Alpaca positions with position=0
const dbOnlyStocks = [];
for (const stock of dbStocks) {
if (!alpacaTickers.has(stock.ticker)) {
try {
const quoteRes = await fetch(`/api/alpaca/quote/${stock.ticker}`);
const quote = quoteRes.ok ? await quoteRes.json() : null;
dbOnlyStocks.push({
id: `db-${stock.ticker}`,
ticker: stock.ticker,
currentPrice: quote?.price ?? null,
position: 0,
rsi: null,
analysis: null,
loading: false,
});
} catch {
dbOnlyStocks.push({
id: `db-${stock.ticker}`,
ticker: stock.ticker,
currentPrice: null,
position: 0,
rsi: null,
analysis: null,
loading: false,
});
}
}
}
const alpacaStocks = await Promise.all(
positions.map((p: { ticker: string; qty: number }) => buildStock(p.ticker, p.qty))
);
setStocks([...alpacaStocks, ...dbOnlyStocks]);
} catch (err) {
console.error("[analyze] Portfolio load error:", err);
}
};
const dbOnlyStocks = [];
for (const stock of dbStocks) {
if (!alpacaTickers.has(stock.ticker)) {
dbOnlyStocks.push(await buildStock(stock.ticker, 0));
}
}
loadPortfolio();
}, []);
setStocks([...alpacaStocks, ...dbOnlyStocks]);
} catch (err) {
console.error("[analyze] Portfolio load error:", err);
}
};
loadPortfolio();
}, []);
// Refresh prices every minute
useEffect(() => {
const interval = setInterval(() => {
stocks.forEach((stock) => {
@@ -116,7 +217,7 @@ export default function Analyze() {
.then((res) => res.ok ? res.json() : null)
.then((data) => {
if (data?.price) {
setStocks((s) => s.map((st) =>
setStocks((s) => s.map((st) =>
st.ticker === stock.ticker ? { ...st, currentPrice: data.price } : st
));
}
@@ -124,32 +225,46 @@ export default function Analyze() {
.catch(() => {});
});
}, 60000);
return () => clearInterval(interval);
}, [stocks]);
const loadIndicators = async (ticker: string) => {
try {
const res = await fetch(`/api/indicators?symbol=${ticker}`);
if (!res.ok) return null;
const data = await res.json();
const ind = data.indicators || {};
return {
rsi: ind.rsi ?? null,
sma20: ind.sma ?? null,
sma50: ind.sma50 ?? null,
ema12: ind.ema12 ?? null,
ema26: ind.ema26 ?? null,
macd: ind.macd ?? null,
bbUpper: ind.bbUpper ?? null,
bbMiddle: ind.bbMiddle ?? null,
bbLower: ind.bbLower ?? null,
atr: ind.atr ?? null,
avgVolume: ind.avgVolume ?? null,
};
} catch {
return null;
}
};
const addStock = async () => {
if (!newTicker.trim()) return;
const ticker = newTicker.trim().toUpperCase();
console.log("[analyze] Adding stock:", ticker);
if (stocks.some((s) => s.ticker === ticker)) return;
// Check if ticker already exists
if (stocks.some((s) => s.ticker === ticker)) {
console.log("[analyze] Ticker already exists:", ticker);
return;
}
// Save to database first
try {
const formData = new FormData();
formData.append("ticker", ticker);
await fetch("/api/stocks", {
method: "POST",
body: formData,
});
await fetch("/api/stocks", { method: "POST", body: formData });
} catch (err) {
console.error("[analyze] Error saving stock to DB:", err);
console.error("[analyze] Error saving stock:", err);
}
const newStock: StockRow = {
@@ -157,60 +272,48 @@ export default function Analyze() {
ticker,
currentPrice: null,
position: 0,
rsi: null,
indicators: { rsi: null, sma20: null, sma50: null, ema12: null, ema26: null, macd: null, bbUpper: null, bbMiddle: null, bbLower: null, atr: null, avgVolume: null },
analysis: null,
loading: true,
indicatorsLoading: true,
};
setStocks((s) => [...s, newStock]);
setNewTicker("");
try {
console.log("[analyze] Fetching quote and positions for", ticker);
const [quoteRes, positionsRes] = await Promise.all([
fetch(`/api/alpaca/quote/${ticker}`),
fetch("/api/alpaca/positions"),
]);
console.log("[analyze] Quote response:", quoteRes.status);
console.log("[analyze] Positions response:", positionsRes.status);
const quote = quoteRes.ok ? await quoteRes.json() : null;
const positions = positionsRes.ok ? await positionsRes.json() : [];
const position = positions.find((p: { ticker: string }) => p.ticker === ticker)?.qty ?? 0;
console.log("[analyze] Quote data:", quote);
console.log("[analyze] Positions data:", positions);
const position = positions.find((p: { ticker: string; qty: number }) =>
p.ticker === ticker
)?.qty ?? 0;
console.log("[analyze] Found position:", position);
const indicators = await loadIndicators(ticker);
setStocks((s) => s.map((st) =>
st.ticker === ticker
? { ...st, loading: false, currentPrice: quote?.price ?? null, position }
? { ...st, loading: false, indicatorsLoading: false, currentPrice: quote?.price ?? null, position, indicators: indicators || st.indicators }
: st
));
} catch (err) {
console.error("[analyze] Error adding stock:", err);
setStocks((s) => s.map((st) => st.ticker === ticker ? { ...st, loading: false } : st));
setStocks((s) => s.map((st) => st.ticker === ticker ? { ...st, loading: false, indicatorsLoading: false } : st));
}
};
// Update all positions on mount and when stocks change
useEffect(() => {
if (stocks.length === 0) return;
const updatePositions = async () => {
try {
const res = await fetch("/api/alpaca/positions");
if (res.ok) {
const positions = await res.json();
setStocks((s) => s.map((st) => {
const pos = positions.find((p: { ticker: string; qty: number }) =>
p.ticker === st.ticker
);
const pos = positions.find((p: { ticker: string }) => p.ticker === st.ticker);
return pos ? { ...st, position: pos.qty } : st;
}));
}
@@ -218,7 +321,7 @@ export default function Analyze() {
console.error("[analyze] Position update error:", err);
}
};
updatePositions();
}, [stocks.length]);
@@ -226,18 +329,14 @@ export default function Analyze() {
const stock = stocks.find((s) => s.id === id);
if (!stock) return;
// Delete from database if this was a manually added stock (db- prefix)
if (id.startsWith("db-")) {
try {
const formData = new FormData();
formData.append("_method", "DELETE");
formData.append("ticker", stock.ticker);
await fetch("/api/stocks", {
method: "POST",
body: formData,
});
await fetch("/api/stocks", { method: "POST", body: formData });
} catch (err) {
console.error("[analyze] Error deleting stock from DB:", err);
console.error("[analyze] Error deleting stock:", err);
}
}
@@ -246,32 +345,40 @@ export default function Analyze() {
const runAnalysis = async (id: string, ticker: string) => {
setStocks((s) => s.map((st) => st.id === id ? { ...st, loading: true } : st));
try {
const [quoteRes, indicatorsRes] = await Promise.all([
fetch(`/api/alpaca/quote/${ticker}`),
fetch(`/api/indicators?symbol=${ticker}`),
]);
const quote = quoteRes.ok ? await quoteRes.json() : null;
const indicators = indicatorsRes.ok ? await indicatorsRes.json() : null;
const indicatorsData = indicatorsRes.ok ? await indicatorsRes.json() : null;
const analysisRes = await fetch("/api/analyze", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ticker }),
});
const analysis = analysisRes.ok ? await analysisRes.json() : null;
setStocks((s) => s.map((st) =>
st.id === id
? {
...st,
loading: false,
currentPrice: quote?.price ?? null,
rsi: indicators?.indicators?.rsi ?? null,
analysis,
}
const indicators: Indicators = {
rsi: indicatorsData?.indicators?.rsi ?? null,
sma20: indicatorsData?.indicators?.sma ?? null,
sma50: indicatorsData?.indicators?.sma50 ?? null,
ema12: indicatorsData?.indicators?.ema12 ?? null,
ema26: indicatorsData?.indicators?.ema26 ?? null,
macd: indicatorsData?.indicators?.macd ?? null,
bbUpper: indicatorsData?.indicators?.bbUpper ?? null,
bbMiddle: indicatorsData?.indicators?.bbMiddle ?? null,
bbLower: indicatorsData?.indicators?.bbLower ?? null,
atr: indicatorsData?.indicators?.atr ?? null,
avgVolume: indicatorsData?.indicators?.avgVolume ?? null,
};
setStocks((s) => s.map((st) =>
st.id === id
? { ...st, loading: false, currentPrice: quote?.price ?? null, indicators, analysis }
: st
));
} catch {
@@ -279,13 +386,33 @@ export default function Analyze() {
}
};
const loadAllIndicators = async () => {
for (const stock of stocks) {
if (stock.indicators.rsi != null) continue;
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: true } : st));
const indicators = await loadIndicators(stock.ticker);
if (indicators) {
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicators, indicatorsLoading: false } : st));
} else {
setStocks((s) => s.map((st) => st.id === stock.id ? { ...st, indicatorsLoading: false } : st));
}
}
};
const [openIndicatorId, setOpenIndicatorId] = useState<string | null>(null);
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
<Navbar />
<div className="mx-auto max-w-7xl px-6 py-8">
<h1 className="text-3xl font-bold text-gray-900 mb-6">Portfolio Analysis</h1>
<div className="bg-white rounded-xl shadow-lg p-6 mb-6">
<div className="flex items-center justify-between mb-6">
<h1 className="text-3xl font-bold text-gray-900">Portfolio Analysis</h1>
<button onClick={loadAllIndicators} className="text-sm text-blue-600 hover:underline font-medium">
Load All Indicators
</button>
</div>
<div className="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
<div className="flex gap-3 mb-4">
<input
type="text"
@@ -302,7 +429,7 @@ export default function Analyze() {
Add Stock
</button>
</div>
{stocks.length === 0 ? (
<p className="text-gray-500 text-center py-8">No stocks added. Add a ticker to get started.</p>
) : (
@@ -310,80 +437,112 @@ export default function Analyze() {
<table className="w-full">
<thead>
<tr className="border-b border-gray-200">
<th className="text-left py-3 px-4 font-medium text-gray-700">Ticker</th>
<th className="text-left py-3 px-4 font-medium text-gray-700">Price</th>
<th className="text-left py-3 px-4 font-medium text-gray-700">Position</th>
<th className="text-left py-3 px-4 font-medium text-gray-700">RSI</th>
<th className="text-left py-3 px-4 font-medium text-gray-700">Analysis</th>
<th className="text-left py-3 px-4 font-medium text-gray-700">Actions</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Ticker</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Price</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Position</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Technical Summary</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">RSI</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">MACD</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">SMA 20/50</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">AI Analysis</th>
<th className="text-left py-3 px-3 font-medium text-gray-700 text-sm">Actions</th>
</tr>
</thead>
<tbody>
{stocks.map((stock) => (
<tr key={stock.id} className="border-b border-gray-100">
<td className="py-3 px-4 font-bold text-gray-900">
<Link to={`/analyze/${stock.ticker}`} className="text-blue-600 hover:underline">
<tr key={stock.id} className="border-b border-gray-100 hover:bg-gray-50">
<td className="py-3 px-3">
<Link to={`/analyze/${stock.ticker}`} className="font-bold text-gray-900 text-blue-600 hover:underline">
{stock.ticker}
</Link>
</td>
<td className="py-3 px-4 text-gray-900">
<td className="py-3 px-3 text-gray-900 text-sm">
{stock.currentPrice ? `$${stock.currentPrice.toFixed(2)}` : "-"}
</td>
<td className="py-3 px-4 text-gray-900 font-medium">
{stock.position}
<td className="py-3 px-3 text-sm">
{stock.position > 0 ? (
<span className="font-medium text-green-600">{stock.position} shares</span>
) : (
<span className="text-gray-400">-</span>
)}
</td>
<td className="py-3 px-4">
{stock.rsi ? (
<span className={
stock.rsi > 70 ? "text-red-600" :
stock.rsi < 30 ? "text-green-600" : "text-gray-900"
}>
{stock.rsi.toFixed(2)}
</span>
<td className="py-3 px-3 relative">
<div className="flex items-center gap-2">
{stock.indicatorsLoading ? (
<span className="text-xs text-gray-400">Loading...</span>
) : (
<>
<SignalSummary price={stock.currentPrice} indicators={stock.indicators} />
<button
onClick={() => setOpenIndicatorId(openIndicatorId === stock.id ? null : stock.id)}
className="text-xs text-blue-600 hover:underline shrink-0"
>
Details
</button>
</>
)}
</div>
<IndicatorsPopover
indicators={stock.indicators}
price={stock.currentPrice}
visible={openIndicatorId === stock.id}
onClose={() => setOpenIndicatorId(null)}
/>
</td>
<td className="py-3 px-3">
{stock.indicators.rsi != null ? (
<RsiBadge value={stock.indicators.rsi} />
) : stock.indicatorsLoading ? (
<span className="text-xs text-gray-400">...</span>
) : "-"}
</td>
<td className="py-3 px-4">
<td className="py-3 px-3">
{stock.indicators.macd != null ? (
<MacdBadge value={stock.indicators.macd} />
) : "-"}
</td>
<td className="py-3 px-3">
{stock.currentPrice && stock.indicators.sma20 && stock.indicators.sma50 ? (
<div className="space-y-0.5">
<PriceVsSma price={stock.currentPrice} sma={stock.indicators.sma20} label="SMA20" />
<PriceVsSma price={stock.currentPrice} sma={stock.indicators.sma50} label="SMA50" />
</div>
) : "-"}
</td>
<td className="py-3 px-3">
{stock.analysis ? (
<div>
<span className={`font-medium ${
<span className={`font-semibold text-sm ${
stock.analysis.action === "buy" ? "text-green-600" :
stock.analysis.action === "sell" ? "text-red-600" : "text-gray-600"
stock.analysis.action === "sell" ? "text-red-600" : "text-gray-500"
}`}>
{stock.analysis.action.toUpperCase()}
</span>
<div className="text-xs text-gray-500">
{stock.analysis.confidence ? `Confidence: ${(stock.analysis.confidence * 100).toFixed(0)}%` : "Saved suggestion"}
{(stock.analysis.confidence ?? 0 * 100).toFixed(0)}%
</div>
{stock.analysis.executionPlan && (
<div className="text-xs text-gray-700 mt-1">
{stock.analysis.executionPlan.amount != null && (<div>Amount: <strong>{stock.analysis.executionPlan.amount}</strong></div>)}
{stock.analysis.executionPlan.takeProfit != null && (<div>Take profit: <strong>${stock.analysis.executionPlan.takeProfit}</strong></div>)}
</div>
)}
</div>
) : stock.loading ? (
<span className="text-blue-600">Analyzing...</span>
<span className="text-xs text-blue-600">Analyzing...</span>
) : "-"}
</td>
<td className="py-3 px-4">
<div className="flex gap-2">
<td className="py-3 px-3">
<div className="flex gap-1.5">
<button
onClick={() => runAnalysis(stock.id, stock.ticker)}
disabled={stock.loading}
className="bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 disabled:opacity-50"
className="bg-blue-600 text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-blue-700 disabled:opacity-50"
>
{stock.loading ? "Running..." : "Analyze"}
{stock.loading ? "..." : "Analyze"}
</button>
<button
onClick={async () => {
if (confirm(`Remove ${stock.ticker}?`)) await removeStock(stock.id);
}}
className="bg-red-600 text-white px-2.5 py-1 rounded text-xs font-medium hover:bg-red-700"
>
Delete
</button>
<button
onClick={async () => {
if (confirm(`Remove ${stock.ticker}?`)) {
await removeStock(stock.id);
}
}}
className="bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700"
>
Delete
</button>
</div>
</td>
</tr>
@@ -396,4 +555,4 @@ export default function Analyze() {
</div>
</div>
);
}
}
app/routes/api/indicators.ts
+71 -30
View File
@@ -1,18 +1,47 @@
import { type IndicatorData } from "../../types";
import {
calculateSMA,
calculateEMA,
calculateRSI,
calculateMACD,
} from "../../utils/indicators";
import { calculateSMA, calculateEMA, calculateRSI, calculateMACD, calculateBollingerBands, calculateATR, calculateVolumeAvg } from "../../utils/indicators";
import alpacaService from "../../lib/alpacaClient";
// Replace with actual Alpaca API call
async function fetchHistoricPrices(symbol: string): Promise<number[]> {
return [
150.0, 152.3, 151.8, 153.5, 155.0, 154.2, 156.7, 158.1, 157.5, 159.0,
160.2, 158.9, 161.5, 163.0, 162.5, 164.8, 166.3, 165.0, 167.5, 169.0,
168.2, 170.5, 172.0, 171.5, 173.2,
];
try {
const bars = await alpacaService.fetchBars(symbol, "1Day", { limit: 60 });
return bars.map((b: any) => {
const c = b.ClosePrice ?? b.c ?? 0;
return typeof c === "number" ? c : 0;
}).filter((p: number) => p > 0);
} catch (e) {
console.error(`Failed to fetch bars for ${symbol}:`, e);
return [];
}
}
async function fetchVolumes(symbol: string): Promise<number[]> {
try {
const bars = await alpacaService.fetchBars(symbol, "1Day", { limit: 60 });
return bars.map((b: any) => {
const v = b.Volume ?? b.v ?? 0;
return typeof v === "number" ? v : 0;
}).filter((v: number) => v > 0);
} catch (e) {
return [];
}
}
async function fetchHighLow(symbol: string): Promise<{ highs: number[]; lows: number[] }> {
try {
const bars = await alpacaService.fetchBars(symbol, "1Day", { limit: 60 });
const highs: number[] = [];
const lows: number[] = [];
for (const b of bars) {
const h = b.HighPrice ?? b.h ?? 0;
const l = b.LowPrice ?? b.l ?? 0;
if (typeof h === "number" && h > 0) highs.push(h);
if (typeof l === "number" && l > 0) lows.push(l);
}
return { highs, lows };
} catch (e) {
return { highs: [], lows: [] };
}
}
export async function loader({ request }: { request: Request }) {
@@ -20,35 +49,47 @@ export async function loader({ request }: { request: Request }) {
const symbol = url.searchParams.get("symbol");
if (!symbol) {
return Response.json(
{ error: "Symbol is required" },
{ status: 400 }
);
return Response.json({ error: "Symbol is required" }, { status: 400 });
}
try {
const prices = await fetchHistoricPrices(symbol.toUpperCase());
if (prices.length === 0) {
return Response.json(
{ error: "No price data found" },
{ status: 404 }
);
if (prices.length < 26) {
return Response.json({ error: "Insufficient price data" }, { status: 404 });
}
const sma = calculateSMA(prices);
const ema = calculateEMA(prices);
const rsi = calculateRSI(prices);
const volumes = await fetchVolumes(symbol.toUpperCase());
const { highs, lows } = await fetchHighLow(symbol.toUpperCase());
const sma20 = calculateSMA(prices, 20);
const sma50 = prices.length >= 50 ? calculateSMA(prices, 50) : 0;
const ema12 = calculateEMA(prices, 12);
const ema26 = calculateEMA(prices, 26);
const rsi14 = calculateRSI(prices, 14);
const macd = calculateMACD(prices);
const bb = calculateBollingerBands(prices, 20);
const atr = highs.length > 0 && lows.length > 0 ? calculateATR(highs, lows, prices, 14) : 0;
const avgVol = volumes.length > 0 ? calculateVolumeAvg(volumes, 20) : 0;
const data: IndicatorData = {
symbol: symbol.toUpperCase(),
indicators: { sma, ema, rsi, macd },
indicators: {
sma: sma20,
sma50,
ema12,
ema26,
rsi: rsi14,
macd: macd.histogram,
bbUpper: bb.upper,
bbLower: bb.lower,
bbMiddle: bb.middle,
atr,
avgVolume: avgVol,
},
};
return Response.json(data);
} catch (error) {
return Response.json(
{ error: "Failed to fetch indicators" },
{ status: 500 }
);
console.error("Indicators error:", error);
return Response.json({ error: "Failed to fetch indicators" }, { status: 500 });
}
}
}
app/types.ts
+8 -1
View File
@@ -2,9 +2,16 @@ export interface IndicatorData {
symbol: string;
indicators: {
sma: number;
ema: number;
sma50: number;
ema12: number;
ema26: number;
rsi: number;
macd: number;
bbUpper: number;
bbLower: number;
bbMiddle: number;
atr: number;
avgVolume: number;
};
}
app/utils/indicators.ts
+43 -9
View File
@@ -1,13 +1,14 @@
export function calculateSMA(prices: number[], period: number = 20): number {
if (prices.length < period) return 0;
const sum = prices.slice(0, period).reduce((a, b) => a + b, 0);
const slice = prices.slice(-period);
const sum = slice.reduce((a, b) => a + b, 0);
return sum / period;
}
export function calculateEMA(prices: number[], period: number = 20): number {
if (prices.length < period) return 0;
const multiplier = 2 / (period + 1);
let ema = prices[period - 1];
let ema = prices.slice(0, period).reduce((a, b) => a + b, 0) / period;
for (let i = period; i < prices.length; i++) {
ema = prices[i] * multiplier + ema * (1 - multiplier);
}
@@ -15,10 +16,10 @@ export function calculateEMA(prices: number[], period: number = 20): number {
}
export function calculateRSI(prices: number[], period: number = 14): number {
if (prices.length < period + 1) return 0;
if (prices.length < period + 1) return 50;
let gains = 0;
let losses = 0;
for (let i = 1; i <= period; i++) {
for (let i = prices.length - period; i < prices.length; i++) {
const diff = prices[i] - prices[i - 1];
if (diff > 0) gains += diff;
else losses -= diff;
@@ -35,11 +36,44 @@ export function calculateMACD(
fastPeriod: number = 12,
slowPeriod: number = 26,
signalPeriod: number = 9
): number {
if (prices.length < slowPeriod) return 0;
): { macdLine: number; signal: number; histogram: number } {
if (prices.length < slowPeriod + signalPeriod) return { macdLine: 0, signal: 0, histogram: 0 };
const emaFast = calculateEMA(prices, fastPeriod);
const emaSlow = calculateEMA(prices, slowPeriod);
const macdLine = emaFast - emaSlow;
const signal = calculateEMA([macdLine], signalPeriod);
return macdLine - signal;
}
// Simplified signal: use recent MACD values approximation
const signal = macdLine * 0.8; // Simplified
return { macdLine, signal, histogram: macdLine - signal };
}
export function calculateBollingerBands(prices: number[], period: number = 20, stdDevMult: number = 2): { upper: number; middle: number; lower: number } {
if (prices.length < period) return { upper: 0, middle: 0, lower: 0 };
const slice = prices.slice(-period);
const sma = slice.reduce((a, b) => a + b, 0) / period;
const variance = slice.reduce((sum, p) => sum + Math.pow(p - sma, 2), 0) / period;
const stdDev = Math.sqrt(variance);
return {
upper: sma + stdDevMult * stdDev,
middle: sma,
lower: sma - stdDevMult * stdDev,
};
}
export function calculateATR(highs: number[], lows: number[], closes: number[], period: number = 14): number {
if (highs.length < period || lows.length < period || closes.length < period) return 0;
const len = Math.min(highs.length, lows.length, closes.length);
const trueRanges: number[] = [];
for (let i = len - period; i < len; i++) {
const highLow = highs[i] - lows[i];
const highClose = i > 0 ? Math.abs(highs[i] - closes[i - 1]) : 0;
const lowClose = i > 0 ? Math.abs(lows[i] - closes[i - 1]) : 0;
trueRanges.push(Math.max(highLow, highClose, lowClose));
}
return trueRanges.reduce((a, b) => a + b, 0) / period;
}
export function calculateVolumeAvg(volumes: number[], period: number = 20): number {
if (volumes.length < period) return 0;
const slice = volumes.slice(-period);
return slice.reduce((a, b) => a + b, 0) / period;
}