stock 지표 수정 및 자산 분석 탭 항목 추가
This commit is contained in:
@@ -564,6 +564,43 @@ ${holdingsText}
|
||||
[portfolioHoldings]
|
||||
);
|
||||
|
||||
/* ── derived: 리스크 분산 분석 ────────────────────────────────── */
|
||||
|
||||
const brokerConcentration = useMemo(() => {
|
||||
const totalEval = toNumeric(portfolioSummary.total_eval);
|
||||
if (!totalEval || totalEval === 0) return [];
|
||||
return brokerGroups
|
||||
.map(([broker, items]) => {
|
||||
const { totalEval: brokerEval } = getBrokerSummary(items);
|
||||
const ratio = Math.round((brokerEval / totalEval) * 1000) / 10;
|
||||
return { broker, eval: brokerEval, ratio };
|
||||
})
|
||||
.sort((a, b) => b.ratio - a.ratio);
|
||||
}, [brokerGroups, portfolioSummary.total_eval]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const stockConcentration = useMemo(() => {
|
||||
const totalEval = toNumeric(portfolioSummary.total_eval);
|
||||
if (!totalEval || totalEval === 0) return [];
|
||||
return portfolioHoldings
|
||||
.map((item) => {
|
||||
const evalAmt = item.eval_amount != null
|
||||
? toNumeric(item.eval_amount)
|
||||
: (item.current_price != null && item.quantity != null)
|
||||
? toNumeric(item.current_price) * toNumeric(item.quantity)
|
||||
: null;
|
||||
if (!evalAmt) return null;
|
||||
return {
|
||||
name: item.name ?? item.ticker ?? 'N/A',
|
||||
ticker: item.ticker ?? '',
|
||||
eval: evalAmt,
|
||||
ratio: Math.round((evalAmt / totalEval) * 1000) / 10,
|
||||
};
|
||||
})
|
||||
.filter(Boolean)
|
||||
.sort((a, b) => b.ratio - a.ratio)
|
||||
.slice(0, 5);
|
||||
}, [portfolioHoldings, portfolioSummary.total_eval]);
|
||||
|
||||
const sortedHoldings = useMemo(() => {
|
||||
const getVal = (item) => {
|
||||
switch (reportSortField) {
|
||||
@@ -1476,6 +1513,84 @@ ${holdingsText}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ── 리스크 분산 분석 ─────────────────────────────── */}
|
||||
{portfolioHoldings.length > 0 && portfolioSummary.total_eval != null && (
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
<div className="stock-panel__head">
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">리스크 관리</p>
|
||||
<h3>분산 분석</h3>
|
||||
<p className="stock-panel__sub">증권사·종목 집중도를 확인합니다. 단일 비중 40% 초과 시 주의.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="risk-grid">
|
||||
{/* 증권사별 집중도 */}
|
||||
<div className="risk-card">
|
||||
<p className="risk-card__title">증권사별 집중도</p>
|
||||
{brokerConcentration.length === 0 ? (
|
||||
<p className="stock-empty" style={{ fontSize: 13 }}>평가금액 데이터 없음</p>
|
||||
) : (
|
||||
<>
|
||||
{brokerConcentration.some((b) => b.ratio > 40) && (
|
||||
<div className="risk-warning">
|
||||
⚠️ 단일 증권사 집중도가 40%를 초과합니다
|
||||
</div>
|
||||
)}
|
||||
{brokerConcentration.map(({ broker, eval: evalAmt, ratio }) => {
|
||||
const level = ratio >= 60 ? 'is-danger' : ratio >= 40 ? 'is-warn' : 'is-ok';
|
||||
return (
|
||||
<div key={broker} className="risk-item">
|
||||
<div className="risk-item__head">
|
||||
<span className="risk-item__name">{broker}</span>
|
||||
<span className={`risk-item__ratio ${level}`}>{ratio.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="risk-bar">
|
||||
<div className={`risk-bar__fill ${level}`} style={{ width: `${Math.min(ratio, 100)}%` }} />
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--muted)' }}>{formatNumber(evalAmt)}원</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* 종목별 집중도 */}
|
||||
<div className="risk-card">
|
||||
<p className="risk-card__title">상위 5 종목 집중도</p>
|
||||
{stockConcentration.length === 0 ? (
|
||||
<p className="stock-empty" style={{ fontSize: 13 }}>현재가 데이터 없음</p>
|
||||
) : (
|
||||
<>
|
||||
{stockConcentration.some((s) => s.ratio > 40) && (
|
||||
<div className="risk-warning">
|
||||
⚠️ 단일 종목 집중도가 40%를 초과합니다
|
||||
</div>
|
||||
)}
|
||||
{stockConcentration.map(({ name, ticker, eval: evalAmt, ratio }) => {
|
||||
const level = ratio >= 60 ? 'is-danger' : ratio >= 40 ? 'is-warn' : 'is-ok';
|
||||
return (
|
||||
<div key={ticker || name} className="risk-item">
|
||||
<div className="risk-item__head">
|
||||
<span className="risk-item__name">{name}</span>
|
||||
<span className={`risk-item__ratio ${level}`}>{ratio.toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="risk-bar">
|
||||
<div className={`risk-bar__fill ${level}`} style={{ width: `${Math.min(ratio, 100)}%` }} />
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'var(--muted)' }}>
|
||||
{ticker && <span style={{ marginRight: 6 }}>{ticker}</span>}
|
||||
{formatNumber(evalAmt)}원
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* ── 수익률 랭킹 테이블 ─────────────────────────── */}
|
||||
{portfolioHoldings.length > 0 && (
|
||||
<section className="stock-panel stock-panel--wide">
|
||||
@@ -1483,7 +1598,7 @@ ${holdingsText}
|
||||
<div>
|
||||
<p className="stock-panel__eyebrow">수익률 랭킹</p>
|
||||
<h3>종목별 상세 현황</h3>
|
||||
<p className="stock-panel__sub">헤더 클릭으로 정렬</p>
|
||||
<p className="stock-panel__sub">헤더 클릭으로 정렬 · 비중은 총 평가금액 대비</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="report-table-wrapper">
|
||||
@@ -1506,6 +1621,7 @@ ${holdingsText}
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
<th style={{ cursor: 'default' }}>비중</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -1517,6 +1633,10 @@ ${holdingsText}
|
||||
: item.current_price != null
|
||||
? item.current_price * item.quantity
|
||||
: null;
|
||||
const totalEval = toNumeric(portfolioSummary.total_eval);
|
||||
const weight = evalAmt != null && totalEval
|
||||
? Math.round((evalAmt / totalEval) * 1000) / 10
|
||||
: null;
|
||||
return (
|
||||
<tr key={item.id}>
|
||||
<td>
|
||||
@@ -1543,6 +1663,9 @@ ${holdingsText}
|
||||
<td className="report-td-muted">
|
||||
{evalAmt != null ? formatNumber(evalAmt) : '-'}
|
||||
</td>
|
||||
<td className="report-td-muted">
|
||||
{weight != null ? `${weight.toFixed(1)}%` : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user