// Small UI components for the stock app. Globals: I18N, t, MOCK_*
// ─── Icons ───────────────────────────────────────────────────
const Icon = {
arrowUp: (props) => ,
arrowDown: (props) => ,
refresh: (props) => ,
back: (props) => ,
shield: (props) => ,
alert: (props) => ,
calendar: (props) => ,
star: (props) => ,
bell: (props) => ,
x: (props) => ,
chevR: (props) => ,
chevD: (props) => ,
check: (props) => ,
home: (props) => ,
briefcase: (props) => ,
layers: (props) => ,
gear: (props) => ,
trend: (props) => ,
zap: (props) => ,
target: (props) => ,
};
// ─── Formatters ──────────────────────────────────────────────
const fmt = {
pct: (v, opts={}) => {
const sign = opts.signed && v > 0 ? '+' : '';
return sign + v.toFixed(opts.dp ?? 2) + '%';
},
pctFromUnit: (v, opts={}) => fmt.pct(v * 100, opts),
price: (v, currency='USD') => {
const sym = { USD: '$', CNY: '¥', USDT: '' }[currency] || '';
const suf = currency === 'USDT' ? ' USDT' : '';
const dp = v >= 1000 ? 2 : v >= 1 ? 2 : 4;
return sym + v.toLocaleString('en-US', { minimumFractionDigits: dp, maximumFractionDigits: dp }) + suf;
},
num: (v) => v.toLocaleString('en-US'),
};
// ─── Market icon ─────────────────────────────────────────────
function MarketIcon({ market }) {
const map = { us: { label: 'US', color: 'var(--src-tech)' }, cn: { label: 'A', color: 'var(--up)' }, crypto: { label: '₿', color: 'var(--accent)' }, th: { label: 'TH', color: 'var(--src-pro, #34c759)' } };
const m = map[market] || { label: market || '?', color: 'var(--text-3)' };
return {m.label}
;
}
// ─── ChangePct (color + arrow) ───────────────────────────────
function ChangePct({ value, large=false }) {
const up = value >= 0;
const cls = up ? 'up' : 'down';
const Arrow = up ? Icon.arrowUp : Icon.arrowDown;
return (
{fmt.pct(Math.abs(value), { dp: 2 })}
);
}
// ─── Risk chip ───────────────────────────────────────────────
function RiskChip({ level, lossProb }) {
const labels = { low: '●', medium: '●●', high: '●●●' };
return (
{labels[level]}
{t('risk.' + level)}
{lossProb != null && · {fmt.pctFromUnit(lossProb, { dp: 0 })}}
);
}
// ─── Win rate badge ──────────────────────────────────────────
function WinRateBadge({ winRate, sampleSize, showWarn=true }) {
const warn = sampleSize < 30;
return (
{warn && showWarn && }
{fmt.pctFromUnit(winRate, { dp: 0 })}
· n={sampleSize}
);
}
// ─── Three-source mini (for cards) ───────────────────────────
function ThreeSourceMini({ scores }) {
const items = [
{ k: 'tech', label: t('recommendation.score_technical'), v: scores.technical },
{ k: 'ai', label: t('recommendation.score_ai'), v: scores.ai },
{ k: 'expert', label: t('recommendation.score_expert'), v: scores.expert },
];
return (
);
}
// ─── Three-source big (detail page) ──────────────────────────
function ThreeSourceBig({ scores, reasoning }) {
const items = [
{ k: 'tech', label: t('recommendation.score_technical'), v: scores.technical, r: reasoning.technical },
{ k: 'ai', label: t('recommendation.score_ai'), v: scores.ai, r: reasoning.ai },
{ k: 'expert', label: t('recommendation.score_expert'), v: scores.expert, r: reasoning.expert },
];
return (
{items.map(it => (
{it.label}
{it.v} /100
{it.r}
))}
{t('dashboard.empty', { market: marketLabel })}
{t('dashboard.empty_subtitle', { minutes: 18 })}
);
}
function LoadingSkeleton() {
return (
);
}
// ─── Tabs ────────────────────────────────────────────────────
function MarketTabs({ value, onChange }) {
const opts = [
{ id: 'us', label: t('dashboard.market_us') },
{ id: 'cn', label: t('dashboard.market_cn') },
{ id: 'crypto', label: t('dashboard.market_crypto') },
{ id: 'th', label: t('dashboard.market_th') },
];
return (
{opts.map(o => (
))}
);
}
function TermTabs({ value, onChange }) {
const opts = [
{ id: 'short', label: t('dashboard.short_term'), sub: t('dashboard.short_sub') },
{ id: 'medium', label: t('dashboard.medium_term'), sub: t('dashboard.medium_sub') },
{ id: 'long', label: t('dashboard.long_term'), sub: t('dashboard.long_sub') },
];
return (
{opts.map(o => (
))}
);
}
// ─── Circuit breaker banner ──────────────────────────────────
function CircuitBreakerBanner({ show }) {
if (!show) return null;
return (
{t('strategy.cb_title')}
{t('strategy.circuit_breaker')}
);
}
// ─── Recommendation card ─────────────────────────────────────
function RecommendationCard({ rec, onClick }) {
return (
{fmt.price(rec.price.current, rec.price.currency)}
{t('recommendation.fusion_score')}
{rec.scores.fusion} /100
{t('recommendation.hold_period')}
{t('recommendation.hold_days', { days: rec.recommendation.hold_period_days })}
{t('recommendation.stop_loss')}
{fmt.price(rec.recommendation.stop_loss, rec.price.currency)}
{t('backtest.win_rate')}
);
}
Object.assign(window, {
Icon, fmt, MarketIcon, ChangePct, RiskChip, WinRateBadge,
ThreeSourceMini, ThreeSourceBig, FusionRing,
EmptyState, LoadingSkeleton,
MarketTabs, TermTabs, CircuitBreakerBanner, RecommendationCard,
});