42 lines
1.8 KiB
JavaScript
42 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
import { Box } from '@mui/material'
|
|
import { buildChartGeometry } from '../utils/history.js'
|
|
|
|
const PADL = 70, PADR = 24, PADT = 24, PADB = 48
|
|
|
|
const fmtDate = (d) => {
|
|
const dt = new Date(d)
|
|
return dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' })
|
|
}
|
|
|
|
export function PointsHistoryChart({ history, W = 640, H = 360 }) {
|
|
const { xFor, yFor, yTicks, linePath, areaPath } = buildChartGeometry(
|
|
history,
|
|
{ W, H, padL: PADL, padR: PADR, padT: PADT, padB: PADB },
|
|
)
|
|
|
|
return (
|
|
<Box sx={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
|
|
<Box sx={{ width: '100%', maxWidth: { xs: '100%', sm: 680 } }}>
|
|
<svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
|
|
{yTicks.map((t, i) => (
|
|
<g key={i}>
|
|
<line x1={PADL} y1={t.y} x2={W - PADR} y2={t.y} stroke="#d0d0d0" strokeWidth={0.5} />
|
|
<text x={PADL - 10} y={t.y + 4} textAnchor="end" fontSize={13} fontWeight={500} fill="wheat">{t.v}</text>
|
|
</g>
|
|
))}
|
|
{areaPath && <path d={areaPath} fill="rgba(59,130,246,0.10)" />}
|
|
<path d={linePath} fill="none" stroke="#3b82f6" strokeWidth={2.5} strokeLinejoin="round" strokeLinecap="round" />
|
|
{history.map((h, i) => (
|
|
<g key={i}>
|
|
<circle cx={xFor(i)} cy={yFor(h.pts)} r={5} fill="#3b82f6" stroke="#fff" strokeWidth={2} />
|
|
<text x={xFor(i)} y={yFor(h.pts) - 12} textAnchor="middle" fontSize={14} fontWeight={700} fill="wheat">{h.pts}</text>
|
|
<text x={xFor(i)} y={H - PADB + 20} textAnchor="middle" fontSize={11} fontWeight={500} fill="wheat">{fmtDate(h.date)}</text>
|
|
</g>
|
|
))}
|
|
</svg>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|