45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { getReviewHistory } from '../../../api';
|
|
|
|
export default function PurchaseTrendChart() {
|
|
const [reviews, setReviews] = useState([]);
|
|
useEffect(() => {
|
|
getReviewHistory(4).then(rs => setReviews(rs.reverse())); // asc
|
|
}, []);
|
|
|
|
if (reviews.length === 0) return null;
|
|
|
|
const maxAvg = Math.max(
|
|
...reviews.flatMap(r => [r.curator_avg_match || 0, r.user_avg_match || 0]),
|
|
2.5
|
|
);
|
|
const w = 320, h = 80, pad = 16;
|
|
const xs = (i) => pad + (i / Math.max(reviews.length - 1, 1)) * (w - 2 * pad);
|
|
const ys = (v) => v == null ? null : h - pad - (v / maxAvg) * (h - 2 * pad);
|
|
|
|
const line = (key) => reviews
|
|
.map((r, i) => ({ x: xs(i), y: ys(r[key]) }))
|
|
.filter(p => p.y != null)
|
|
.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`)
|
|
.join(' ');
|
|
|
|
return (
|
|
<section className="lotto-panel">
|
|
<div className="lotto-panel__head">
|
|
<div>
|
|
<p className="lotto-panel__eyebrow">Trend (last 4 weeks)</p>
|
|
<h3>너 vs 큐레이터 평균 일치 수</h3>
|
|
</div>
|
|
</div>
|
|
<svg width={w} height={h} className="trend-chart">
|
|
<path d={line('curator_avg_match')} stroke="#b8a8ff" strokeWidth="2" fill="none" />
|
|
<path d={line('user_avg_match')} stroke="#76e09a" strokeWidth="2" fill="none" />
|
|
</svg>
|
|
<div className="trend-legend">
|
|
<span><span className="dot dot--curator" /> 큐레이터</span>
|
|
<span><span className="dot dot--user" /> 너</span>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|