feat(evolver): WinnerCard — Radar + 이전 base overlay + 메타 정보
This commit is contained in:
56
src/pages/lotto/evolver/WinnerCard.jsx
Normal file
56
src/pages/lotto/evolver/WinnerCard.jsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
|
||||||
|
Radar, ResponsiveContainer, Legend,
|
||||||
|
} from 'recharts';
|
||||||
|
|
||||||
|
const DAY_NAMES = ['월', '화', '수', '목', '금', '토'];
|
||||||
|
const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
|
||||||
|
|
||||||
|
export default function WinnerCard({ winner, previousBase, updateReason, drawNo }) {
|
||||||
|
if (!winner) {
|
||||||
|
return (
|
||||||
|
<div className="evolver-card winner-card empty">
|
||||||
|
<h2>🏆 Winner</h2>
|
||||||
|
<p className="muted">아직 회고 결과가 없습니다.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const dayName = DAY_NAMES[winner.day_of_week] || '?';
|
||||||
|
const W = winner.weight || [];
|
||||||
|
const prev = previousBase || [0.2, 0.2, 0.2, 0.2, 0.2];
|
||||||
|
|
||||||
|
const data = METRIC_NAMES.map((name, i) => ({
|
||||||
|
metric: name,
|
||||||
|
winner: W[i] || 0,
|
||||||
|
previous: prev[i] || 0,
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="evolver-card winner-card">
|
||||||
|
<header>
|
||||||
|
<h2>🏆 Winner: {dayName}요일</h2>
|
||||||
|
{updateReason && <span className="badge">{updateReason}</span>}
|
||||||
|
</header>
|
||||||
|
<div className="winner-meta">
|
||||||
|
<span>최고 적중 <strong>{winner.max_correct}개</strong></span>
|
||||||
|
<span>평균 점수 <strong>{(winner.avg_score || 0).toFixed(2)}</strong></span>
|
||||||
|
<span>{winner.n_picks}/5 picks</span>
|
||||||
|
{drawNo && <span>{drawNo}회차</span>}
|
||||||
|
</div>
|
||||||
|
<div className="winner-chart">
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<RadarChart data={data}>
|
||||||
|
<PolarGrid />
|
||||||
|
<PolarAngleAxis dataKey="metric" />
|
||||||
|
<PolarRadiusAxis angle={90} domain={[0, 0.5]} />
|
||||||
|
<Radar name="이번주 winner" dataKey="winner" stroke="#34d399" fill="#34d399" fillOpacity={0.4} />
|
||||||
|
<Radar name="이전 base" dataKey="previous" stroke="#999" fill="#999" fillOpacity={0.1} />
|
||||||
|
<Legend />
|
||||||
|
</RadarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user