138 lines
3.1 KiB
TypeScript
138 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import axios from "axios";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
Bar,
|
|
BarChart,
|
|
CartesianGrid,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
Tooltip,
|
|
XAxis,
|
|
YAxis
|
|
} from "recharts";
|
|
import Cookies from "js-cookie";
|
|
|
|
interface Props {
|
|
filtros: any
|
|
}
|
|
|
|
interface AntiguedadData {
|
|
adscripcion: string
|
|
antiguedad: string
|
|
total: number
|
|
}
|
|
|
|
const colores = [
|
|
"#818CF8",
|
|
"#34D399",
|
|
"#FBBF24",
|
|
"#F87171",
|
|
"#67E8F9",
|
|
"#C084FC"
|
|
]
|
|
|
|
const api_url = process.env.NEXT_PUBLIC_API_URL;
|
|
|
|
export default function Antiguedad({ filtros }: Props) {
|
|
|
|
const [data, setData] = useState<AntiguedadData[]>([])
|
|
|
|
useEffect(() => {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const getAntiguedad = async () => {
|
|
|
|
const response = await axios.post(
|
|
`${api_url}/equipos/grafica/antiguedad`,
|
|
filtros,
|
|
{ headers }
|
|
)
|
|
|
|
setData(response.data)
|
|
|
|
}
|
|
|
|
getAntiguedad()
|
|
|
|
}, [filtros])
|
|
|
|
const tieneAdscripciones = data.some(d => d.adscripcion)
|
|
|
|
let dataTransformada = data
|
|
let adscripciones: string[] = []
|
|
|
|
if (tieneAdscripciones) {
|
|
|
|
adscripciones = [...new Set(data.map(d => d.adscripcion))]
|
|
|
|
dataTransformada = Object.values(
|
|
data.reduce((acc: any, item: any) => {
|
|
|
|
if (!acc[item.antiguedad]) {
|
|
acc[item.antiguedad] = { antiguedad: item.antiguedad }
|
|
}
|
|
|
|
acc[item.antiguedad][item.adscripcion] = Number(item.total)
|
|
|
|
return acc
|
|
|
|
}, {})
|
|
)
|
|
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
minWidth: "570px",
|
|
background: "white",
|
|
borderRadius: "10px",
|
|
padding: "1rem",
|
|
maxWidth: "100%"
|
|
}}
|
|
>
|
|
|
|
<h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>
|
|
|
|
<ResponsiveContainer width="100%" aspect={2.5}>
|
|
|
|
<BarChart
|
|
data={dataTransformada}
|
|
margin={{ top: 20 }}
|
|
>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
|
|
<XAxis dataKey="antiguedad" fontSize={12} />
|
|
|
|
<YAxis />
|
|
<Tooltip
|
|
formatter={(value) => [`${value}`]}
|
|
/>
|
|
<Legend wrapperStyle={{ fontSize: 12 }}/>
|
|
{tieneAdscripciones ? (
|
|
|
|
adscripciones.map((ads, i) => (
|
|
<Bar
|
|
key={ads}
|
|
dataKey={ads}
|
|
fill={colores[i % colores.length]}
|
|
/>
|
|
))
|
|
|
|
) : (
|
|
|
|
<Bar
|
|
dataKey="total"
|
|
fill="#095bd6"
|
|
/>
|
|
|
|
)}
|
|
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
} |