45 lines
1.8 KiB
JavaScript
45 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
|
|
const METRIC_NAMES = ['freq', 'finger', 'gap', 'cooccur', 'divers'];
|
|
|
|
function diffMarker(diff) {
|
|
if (Math.abs(diff) < 0.005) return { mark: '=', cls: 'eq' };
|
|
if (diff > 0) return diff < 0.05 ? { mark: '↑', cls: 'up' } : { mark: '↑↑', cls: 'up-big' };
|
|
return diff > -0.05 ? { mark: '↓', cls: 'down' } : { mark: '↓↓', cls: 'down-big' };
|
|
}
|
|
|
|
export default function BaseDiff({ previousBase, newBase, updateReason }) {
|
|
if (!previousBase || !newBase) {
|
|
return (
|
|
<div className="evolver-card base-diff empty">
|
|
<h2>다음주 base 변경</h2>
|
|
<p className="muted">아직 base 변경 이력 없음.</p>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="evolver-card base-diff">
|
|
<h2>다음주 base 변경 {updateReason && <span className="badge">{updateReason}</span>}</h2>
|
|
<div className="diff-grid">
|
|
{METRIC_NAMES.map((name, i) => {
|
|
const prev = previousBase[i] || 0;
|
|
const next = newBase[i] || 0;
|
|
const diff = next - prev;
|
|
const { mark, cls } = diffMarker(diff);
|
|
return (
|
|
<div key={name} className={`metric-card ${cls}`}>
|
|
<div className="metric-name">{name}</div>
|
|
<div className="metric-values">
|
|
{prev.toFixed(2)} → <strong>{next.toFixed(2)}</strong>
|
|
</div>
|
|
<div className="metric-diff">
|
|
{mark} {diff >= 0 ? '+' : ''}{(diff * 100).toFixed(0)}%p
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|