aidev
73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
import React from 'react';
|
|
import type { PriceStats } from '../utils/calculations';
|
|
|
|
interface StatsPanelProps {
|
|
stats: PriceStats | null;
|
|
symbol: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
function fmt(n: number, digits = 2): string {
|
|
if (!isFinite(n)) return '—';
|
|
return n.toLocaleString('en-US', { minimumFractionDigits: digits, maximumFractionDigits: digits });
|
|
}
|
|
|
|
function fmtVol(n: number): string {
|
|
if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
|
|
if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
|
|
if (n >= 1e3) return (n / 1e3).toFixed(2) + 'K';
|
|
return n.toFixed(0);
|
|
}
|
|
|
|
const StatRow: React.FC<{ label: string; value: string; highlight?: 'up' | 'down' | 'neutral' }> = ({ label, value, highlight }) => (
|
|
<div className="stat-row">
|
|
<span className="stat-label">{label}</span>
|
|
<span className={`stat-value ${highlight ?? ''}`}>{value}</span>
|
|
</div>
|
|
);
|
|
|
|
const StatsPanel: React.FC<StatsPanelProps> = ({ stats, symbol, onClose }) => {
|
|
if (!stats) return null;
|
|
const trendColor = stats.trend === 'up' ? 'up' : stats.trend === 'down' ? 'down' : 'neutral';
|
|
const changeColor = stats.change >= 0 ? 'up' : 'down';
|
|
|
|
return (
|
|
<div className="stats-panel">
|
|
<div className="stats-header">
|
|
<span className="stats-title">📊 {symbol} 통계</span>
|
|
<button className="stats-close" onClick={onClose}>✕</button>
|
|
</div>
|
|
<div className="stats-body">
|
|
<div className="stats-section">
|
|
<div className="stats-section-title">가격</div>
|
|
<StatRow label="현재가" value={fmt(stats.current)} />
|
|
<StatRow label="변동" value={`${stats.change >= 0 ? '+' : ''}${fmt(stats.change)} (${fmt(stats.changePct)}%)`} highlight={changeColor} />
|
|
<StatRow label="52주 고점" value={fmt(stats.high52w)} highlight="up" />
|
|
<StatRow label="52주 저점" value={fmt(stats.low52w)} highlight="down" />
|
|
<StatRow label="평균 일일 범위" value={fmt(stats.avgRange)} />
|
|
</div>
|
|
<div className="stats-section">
|
|
<div className="stats-section-title">추세 & 강도</div>
|
|
<StatRow label="추세" value={stats.trend === 'up' ? '상승 ▲' : stats.trend === 'down' ? '하락 ▼' : '횡보 ▶'} highlight={trendColor} />
|
|
<StatRow label="RSI(14)" value={fmt(stats.rrsi14, 1)} highlight={stats.rrsi14 > 70 ? 'down' : stats.rrsi14 < 30 ? 'up' : 'neutral'} />
|
|
<StatRow label="변동성(연)" value={`${fmt(stats.volatility, 1)}%`} />
|
|
</div>
|
|
<div className="stats-section">
|
|
<div className="stats-section-title">피벗 포인트</div>
|
|
<StatRow label="저항2" value={fmt(stats.resistance2)} highlight="down" />
|
|
<StatRow label="저항1" value={fmt(stats.resistance1)} highlight="down" />
|
|
<StatRow label="피벗(P)" value={fmt(stats.pivotP)} highlight="neutral" />
|
|
<StatRow label="지지1" value={fmt(stats.support1)} highlight="up" />
|
|
<StatRow label="지지2" value={fmt(stats.support2)} highlight="up" />
|
|
</div>
|
|
<div className="stats-section">
|
|
<div className="stats-section-title">거래량</div>
|
|
<StatRow label="평균 거래량" value={fmtVol(stats.avgVol)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatsPanel;
|