LincPayandClaude Opus 5
f430f85202
Vite/React 19 console and enterprise PWA. Officer console screens, offline ledger and sync, data feeds and trip-wire rules screens with freshness chip. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Radar } from 'react-chartjs-2'
|
|
import type { ChartOptions } from 'chart.js'
|
|
import type { Band, SubScores } from '../../lib/api'
|
|
import { DRIVER_META } from '../../lib/demo/enterprises'
|
|
import './chartSetup'
|
|
|
|
/** The five risk families as a radar — shows the *shape* of the stress, not just its size. */
|
|
export function SubScoreRadar({ sub, band, height = 230 }: { sub: SubScores; band: Band; height?: number }) {
|
|
const colour = band === 'RED' ? '#c0392b' : band === 'WATCH' ? '#e8a020' : '#1e7a46'
|
|
|
|
const data = {
|
|
labels: DRIVER_META.map((d) => d.label),
|
|
datasets: [
|
|
{
|
|
label: 'Sub-score',
|
|
data: DRIVER_META.map((d) => sub[d.key]),
|
|
borderColor: colour,
|
|
backgroundColor: `${colour}22`,
|
|
borderWidth: 2,
|
|
pointBackgroundColor: colour,
|
|
pointRadius: 3,
|
|
},
|
|
],
|
|
}
|
|
|
|
const options: ChartOptions<'radar'> = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
r: {
|
|
beginAtZero: true,
|
|
suggestedMax: 30,
|
|
angleLines: { color: '#e8eeea' },
|
|
grid: { color: '#e8eeea' },
|
|
pointLabels: { font: { size: 10 } },
|
|
ticks: { display: false },
|
|
},
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div style={{ height }}>
|
|
<Radar data={data} options={options} />
|
|
</div>
|
|
)
|
|
}
|