Commit 434a3fe0 authored by joaquinvalentin's avatar joaquinvalentin
Browse files

Un lujo...

parent d7dc6829
......@@ -8,6 +8,7 @@ import {
} from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import { Grafica } from 'pages/grafica/grafica';
import { Valoracion } from 'pages/valoracion/valoracion';
import { ApiService } from 'networking/api-service';
import { API_ROUTES } from 'networking/api-routes';
import { ListaJugadores } from 'common/lista/lista';
......@@ -18,6 +19,7 @@ const Comparacion = () => {
const [nombre, setNombre] = useState('');
const [listaJugadores, setListaJugadores] = useState([]);
const [listaValoracion, setListaValoracion] = useState([]);
const [valoracion, setValoracion] = useState([]);
const [abstract, setAbstract] = useState('');
const [datosGrafica, setDatosGrafica] = useState([{}]);
const [datoTrans, setDatoTrans] = useState({
......@@ -32,6 +34,8 @@ const Comparacion = () => {
bandera: '',
jugador: '',
foto: '',
posicion: '',
escudoClub: '',
});
const stardog = new Stardog({
......@@ -114,18 +118,23 @@ const Comparacion = () => {
}
LIMIT 1
`;
console.log('request', request);
const response = await ApiService.get(API_ROUTES.DBPEDIA, {
query: request,
});
setAbstract(response.data.results.bindings[0]?.info.value);
try {
const response = await ApiService.get(API_ROUTES.DBPEDIA, {
query: request,
});
setAbstract(response.data.results.bindings[0]?.info.value);
} catch (e) {
console.log(e);
}
};
const handleClickLista = async (jugador) => {
// query con nombre
setListaJugadores([]);
const request = `
SELECT ?nombre ?foto ?pais ?temporada ?valoracion ?altura ?pierna ?club ?nombreClub ?bandera ?linkTransfermarkt ?fechaNac
SELECT ?nombre ?foto ?pais ?temporada ?valoracion ?altura
?pierna ?club ?nombreClub ?bandera ?linkTransfermarkt ?posicion
?fechaNac ?escudo
WHERE {
<${jugador}> football:nombre ?nombre .
<${jugador}> football:nacionalidad ?pais .
......@@ -133,9 +142,14 @@ const Comparacion = () => {
<${jugador}> football:pierna ?pierna .
<${jugador}> football:juegaPara ?club .
<${jugador}> football:transfermarktURL ?linkTransfermarkt .
<${jugador}> football:versionJuego ?stats .
<${jugador}> football:foto ?foto .
<${jugador}> football:fechaNac ?fechaNac .
<${jugador}> football:banderaPais ?bandera .
<${jugador}> football:posicion ?posicion .
<${jugador}> football:juegaPara ?club .
?club football:nombreClub ?nombreClub .
?club football:escudoClub ?escudo .
<${jugador}> football:versionJuego ?stats .
?stats football:valoracion ?valoracion .
?stats football:temporada ?temporada .
}
......@@ -147,12 +161,8 @@ const Comparacion = () => {
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
});
const lista = [];
response.results.bindings.forEach(async (elem) => {
const nuevo = {
valoracion: elem.valoracion?.value,
temporada: elem.temporada?.value,
};
setDatoTrans((prev) => {
const trans = { ...prev };
trans.pierna = elem.pierna?.value;
......@@ -164,14 +174,58 @@ const Comparacion = () => {
trans.pais = elem.pais?.value;
trans.altura = elem.altura?.value;
trans.pierna = elem.pierna?.value;
trans.posicion = elem.posicion?.value;
trans.bandera = elem.bandera?.value;
trans.jugador = jugador;
trans.foto = elem.foto?.value;
trans.fechaNac = elem.fechaNac?.value;
trans.escudoClub = elem.escudo?.value;
return trans;
});
});
const request2 = `
SELECT *
WHERE {
<${jugador}> football:versionJuego ?stats .
?stats football:valoracion ?valoracion .
?stats football:temporada ?temporada .
?stats football:tiro ?tiro .
?stats football:pase ?pase .
?stats football:ritmo ?ritmo .
?stats football:fisico ?fisico .
?stats football:regate ?regate .
}
ORDER BY DESC(?temporada)
LIMIT 10
`;
const response2 = await stardog.query({
query: request2,
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
});
const lista = [];
response2.results.bindings.forEach(async (elem) => {
const nuevo = {
valoracion: elem.valoracion?.value,
temporada: elem.temporada?.value,
};
if (elem.temporada?.value === '2022') {
/* eslint-disable */
const val = {
tiro: elem.tiro?.value,
pase: elem.pase?.value,
fisico: elem.fisico?.value,
ritmo: elem.ritmo?.value,
regate: elem.regate?.value,
};
/* eslint-enable */
setValoracion(val);
}
lista.push(nuevo);
});
setListaValoracion(lista.sort((a, b) => a - b).reverse());
};
......@@ -224,56 +278,62 @@ const Comparacion = () => {
JUGADORES
</h1>
<Paper className={styles.ficha}>
<Grid container spacing={2} row wrap>
<Grid container item xs={4}>
<Grid justifyContent="center" alignItems="center">
<Grid container spacing={2} justifyContent="flex-start">
<Grid container item xs={5} direction="column" justifyContent="flex-start">
<Grid justifyContent="center" alignItems="center" xs={2}>
{ datoTrans.foto && <img src={datoTrans.foto} alt="foto" className={styles.escudo} />}
<Grid item container direction="row" justifyContent="flex-start" alignItems="center" sx={{ width: '200px' }}>
{ datoTrans.escudoClub && <img src={datoTrans.escudoClub} style={{ paddingLeft: '10px' }} alt="escudo club" />}
{ datoTrans.bandera && <img src={datoTrans.bandera} style={{ paddingLeft: '10px' }} alt="bandera" />}
</Grid>
</Grid>
<Grid>
<Typography>
FICHA DEL JUGADOR
</Typography>
<Typography>
Nombre:
{' '}
{datoTrans.nombre}
</Typography>
<Typography>
{' '}
Nacionalidad:
{' '}
{datoTrans.pais}
{' '}
{datoTrans.bandera}
</Typography>
<Typography>
{' '}
Fecha de nacimiento:
{' '}
{datoTrans.fechaNac}
</Typography>
<Typography>
{' '}
Pierna habil:
{' '}
{datoTrans.pierna}
</Typography>
<Typography>
{' '}
Altura:
{' '}
{datoTrans.altura}
</Typography>
{/* <Typography>
{' '}
Biografía:
{' '}
{abstract}
</Typography> */}
</Grid>
{ datoTrans.nombre && (
<Grid xs={10}>
<Typography>
Nombre:
{' '}
{datoTrans.nombre}
</Typography>
<Typography>
{' '}
Nacionalidad:
{' '}
{datoTrans.pais}
</Typography>
<Typography>
{' '}
Club actual:
{' '}
{datoTrans.nombreClub}
</Typography>
<Typography>
{' '}
Fecha de nacimiento:
{' '}
{datoTrans.fechaNac}
</Typography>
<Typography>
{' '}
Pierna habil:
{' '}
{datoTrans.pierna}
</Typography>
<Typography>
{' '}
Altura:
{' '}
{datoTrans.altura}
</Typography>
<Typography>
{' '}
Posicion:
{' '}
{datoTrans.posicion}
</Typography>
</Grid>
)}
</Grid>
<Grid item xs={8}>
<Grid item xs={7}>
<p>{abstract}</p>
</Grid>
</Grid>
......@@ -296,8 +356,14 @@ const Comparacion = () => {
<ListaJugadores lista={listaJugadores} handleClickLista={handleClickLista} />
</div>
</div>
<div className={styles.chart}>
<Grafica data={listaValoracion} dataKey1="temporada" dataKey2="valoracion" />
<div className={styles.row}>
<div className={styles.chart}>
<Grafica data={listaValoracion} dataKey1="temporada" dataKey2="valoracion" />
</div>
<div className={styles.chart}>
<Valoracion data={valoracion} dataKey="Valoracion" />
</div>
</div>
<div className={styles.row}>
<div className={styles.chart}>
......
......@@ -6,6 +6,7 @@
.ficha {
display: flex;
flex-direction: column;
width: 100%;
}
.titleFile {
text-align: center;
......
/* eslint-disable */
import { array } from 'prop-types';
import React from 'react';
import {
RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Legend,
} from 'recharts';
const Valoracion = ({
data,
}) => {
console.log('data', data);
const data2 = [
{
"stat": 'Tiro',
"A": parseInt(data.tiro, 10),
"fullMark": 100
},
{
"stat": 'Pase',
"A": parseInt(data.pase, 10),
"fullMark": 100
},
{
"stat": 'Fisico',
"A": parseInt(data.fisico, 10),
"fullMark": 100
},
{
"stat": 'Ritmo',
"A": parseInt(data.ritmo, 10),
"fullMark": 100
},
{
"stat": 'Regate',
"A": parseInt(data.regate, 10),
"fullMark": 100
},
]
return (
<RadarChart outerRadius={90} width={450} height={300} data={data2}>
<PolarGrid />
<PolarAngleAxis dataKey="stat" />
<PolarRadiusAxis angle={30} domain={[0, 100]} />
<Radar name="Valoracion" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
<Legend />
</RadarChart>
);
};
Valoracion.propTypes = {
data: array,
};
Valoracion.defaultProps = {
data: [
{
stat: 'Tiro',
A: 0,
},
{
stat: 'Pase',
A: 0,
},
{
stat: 'Tiro',
A: 0,
},
{
stat: 'Fisico',
A: 0,
},
{
stat: 'Ritmo',
A: 0,
},
],
};
export { Valoracion };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment