Benjamin Sutter
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Box, LinearProgress, Tooltip, Typography } from '@mui/material'
|
|
|
|
function scoreColor(score: number): string {
|
|
if (score >= 0.85) return '#15803d'
|
|
if (score >= 0.65) return '#a16207'
|
|
return '#dc2626'
|
|
}
|
|
|
|
interface ReliabilityScorePanelProps {
|
|
score: number
|
|
compact?: boolean
|
|
}
|
|
|
|
export function ReliabilityScorePanel({ score, compact = false }: ReliabilityScorePanelProps) {
|
|
const pct = Math.round(score * 100)
|
|
const color = scoreColor(score)
|
|
|
|
if (compact) {
|
|
return (
|
|
<Tooltip title={`Reliabilität: ${pct}%`}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={pct}
|
|
sx={{
|
|
width: 48,
|
|
height: 4,
|
|
borderRadius: 2,
|
|
bgcolor: 'rgba(0,0,0,0.08)',
|
|
'& .MuiLinearProgress-bar': { bgcolor: color, borderRadius: 2 },
|
|
}}
|
|
/>
|
|
<Typography sx={{ fontSize: '0.7rem', color, fontWeight: 600 }}>{pct}%</Typography>
|
|
</Box>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
|
Source Reliability
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color, fontWeight: 700 }}>
|
|
{pct}%
|
|
</Typography>
|
|
</Box>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={pct}
|
|
sx={{
|
|
height: 6,
|
|
borderRadius: 3,
|
|
bgcolor: 'rgba(0,0,0,0.08)',
|
|
'& .MuiLinearProgress-bar': { bgcolor: color, borderRadius: 3 },
|
|
}}
|
|
/>
|
|
</Box>
|
|
)
|
|
}
|