49 lines
1.6 KiB
JavaScript
49 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
|
|
} from 'recharts';
|
|
|
|
const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
|
|
const COLORS = ['#34d399', '#60a5fa', '#fbbf24', '#f43f5e', '#c084fc'];
|
|
|
|
export default function BaseHistory({ history }) {
|
|
if (!history || history.length === 0) {
|
|
return (
|
|
<div className="evolver-card base-history empty">
|
|
<h2>12주 Base 변화</h2>
|
|
<p className="muted">학습 이력이 부족합니다.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const data = history
|
|
.slice()
|
|
.reverse()
|
|
.map(h => {
|
|
const w = h.weight || [0, 0, 0, 0, 0];
|
|
return {
|
|
date: (h.effective_from || '').slice(5),
|
|
freq: w[0], finger: w[1], gap: w[2], cooccur: w[3], divers: w[4],
|
|
reason: h.update_reason,
|
|
};
|
|
});
|
|
|
|
return (
|
|
<div className="evolver-card base-history">
|
|
<h2>Base 변화 (최근 {history.length}주)</h2>
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<LineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="date" />
|
|
<YAxis domain={[0, 0.5]} />
|
|
<Tooltip />
|
|
<Legend />
|
|
{METRIC_NAMES.map((name, i) => (
|
|
<Line key={name} type="monotone" dataKey={name} stroke={COLORS[i]} dot />
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
}
|