79 lines
3.2 KiB
JavaScript
79 lines
3.2 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import {
|
|
Box, Typography, IconButton, Modal, Paper,
|
|
FormControl, InputLabel, Select, MenuItem,
|
|
} from '@mui/material'
|
|
import { PointsHistoryChart } from './PointsHistoryChart.jsx'
|
|
import { sizeShort } from '../utils/format.js'
|
|
|
|
export function GraphModal({ row, open, onClose }) {
|
|
const [graphSize, setGraphSize] = useState(null)
|
|
|
|
useEffect(() => {
|
|
if (row) setGraphSize(row.size)
|
|
}, [row])
|
|
|
|
if (!row) return null
|
|
|
|
const sizes = row.sizes || []
|
|
const activeSize = graphSize || row.size
|
|
const activeSizeData = sizes.find(s => s.size === activeSize) || sizes[0]
|
|
const history = activeSizeData?.history || []
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: { xs: 0, sm: 2 }, width: '100%', height: '100%' }}>
|
|
<Paper sx={{
|
|
maxWidth: { xs: '100%', sm: 720 },
|
|
width: '100%',
|
|
height: { xs: '100%', sm: 'auto' },
|
|
maxHeight: { xs: '100%', sm: '90vh' },
|
|
overflow: 'auto', p: { xs: 1, sm: 3 },
|
|
borderRadius: { xs: 0, sm: 2 },
|
|
display: 'flex', flexDirection: 'column',
|
|
}}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 2 }}>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography variant="h6" fontWeight={700} sx={{ fontSize: { xs: '1rem', sm: '1.1rem' }, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{row.name}</Typography>
|
|
<Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.72rem', sm: '0.8rem' } }}>{row.faction_name}</Typography>
|
|
</Box>
|
|
<IconButton onClick={onClose} size="small" sx={{ color: 'text.secondary', flexShrink: 0 }} aria-label="✕">✕</IconButton>
|
|
</Box>
|
|
|
|
{sizes.length > 1 && (
|
|
<FormControl size="small" sx={{ mb: 2, minWidth: 140 }}>
|
|
<InputLabel>Model count</InputLabel>
|
|
<Select
|
|
value={activeSize}
|
|
label="Model count"
|
|
onChange={(e) => setGraphSize(e.target.value)}
|
|
renderValue={(v) => sizeShort(v) + ' models'}
|
|
>
|
|
{sizes.map((s) => (
|
|
<MenuItem key={s.size} value={s.size}>{sizeShort(s.size)} models</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
)}
|
|
|
|
{history.length > 0 ? (
|
|
<PointsHistoryChart history={history} />
|
|
) : (
|
|
<Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', py: 4 }}>
|
|
No historical data for this unit.
|
|
</Typography>
|
|
)}
|
|
|
|
{history.length > 1 && (
|
|
<Box sx={{ mt: 2, display: 'flex', justifyContent: 'space-between', gap: 1 }}>
|
|
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
|
{history[0].version}: {history[0].pts}pts
|
|
</Typography>
|
|
<Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.7rem' }}>
|
|
{history[history.length - 1].version}: {history[history.length - 1].pts}pts
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Paper>
|
|
</Modal>
|
|
)
|
|
} |