114 lines
3.0 KiB
React
114 lines
3.0 KiB
React
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Cell,
|
|
} from 'recharts'
|
|
import { COLOR } from '../../utils/colores'
|
|
import { useChartTheme } from '../../hooks/useChartTheme'
|
|
|
|
const getCategoria = (s) => {
|
|
const fallecidos = parseInt(s.cantidad_fallecidos ?? s.fallecidos, 10) || 0
|
|
const lesionados = parseInt(s.cantidad_lesionados ?? s.heridos, 10) || 0
|
|
|
|
if (fallecidos > 0) return 'fatales'
|
|
if (lesionados > 0) return 'conLes'
|
|
return 'sinLes'
|
|
}
|
|
|
|
export default function PorLocalidad({ siniestros, tipo = 'todas' }) {
|
|
const { tickColor, gridColor, tooltipBg, tooltipBorder, tooltipLabel } = useChartTheme()
|
|
|
|
const conteo = {}
|
|
|
|
siniestros.forEach((s) => {
|
|
const categoria = getCategoria(s)
|
|
if (tipo !== 'todas' && categoria !== tipo) return
|
|
|
|
const loc = (s.localidad || s.localidad_ocurrencia || 'Sin dato').trim() || 'Sin dato'
|
|
|
|
conteo[loc] = conteo[loc] || {
|
|
total: 0,
|
|
fatales: 0,
|
|
conLes: 0,
|
|
sinLes: 0,
|
|
}
|
|
|
|
conteo[loc].total += 1
|
|
conteo[loc][categoria] += 1
|
|
})
|
|
|
|
const data = Object.entries(conteo)
|
|
.map(([localidad, values]) => {
|
|
const mayorCategoria = ['fatales', 'conLes', 'sinLes'].sort(
|
|
(a, b) => values[b] - values[a]
|
|
)[0]
|
|
|
|
return {
|
|
localidad,
|
|
total: values.total,
|
|
categoria: mayorCategoria,
|
|
}
|
|
})
|
|
.sort((a, b) => b.total - a.total)
|
|
.slice(0, 10)
|
|
|
|
return (
|
|
<div className="rounded-[28px] border border-opsv-border bg-opsv-surface p-6 shadow-sm">
|
|
|
|
<div className="h-[360px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart
|
|
layout="vertical"
|
|
data={data}
|
|
margin={{ top: 10, right: 20, left: 0, bottom: 0 }}
|
|
>
|
|
<CartesianGrid
|
|
strokeDasharray="3 3"
|
|
stroke={gridColor}
|
|
vertical={false}
|
|
/>
|
|
|
|
<XAxis
|
|
type="number"
|
|
tick={{ fill: tickColor, fontSize: 12 }}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
/>
|
|
|
|
<YAxis
|
|
type="category"
|
|
dataKey="localidad"
|
|
tick={{ fill: tickColor, fontSize: 12 }}
|
|
axisLine={false}
|
|
tickLine={false}
|
|
width={150}
|
|
/>
|
|
|
|
<Tooltip
|
|
cursor={{ fill: 'rgba(148, 163, 184, 0.12)' }}
|
|
contentStyle={{
|
|
background: tooltipBg,
|
|
border: `1px solid ${tooltipBorder}`,
|
|
borderRadius: 16,
|
|
boxShadow: '0 10px 30px rgba(0,0,0,0.08)',
|
|
}}
|
|
labelStyle={{ color: tooltipLabel, fontWeight: 700 }}
|
|
itemStyle={{ color: tickColor }}
|
|
/>
|
|
|
|
<Bar dataKey="total" radius={[0, 10, 10, 0]}>
|
|
{data.map((entry) => (
|
|
<Cell key={entry.localidad} fill={COLOR[entry.categoria]} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)
|
|
} |