Commit d7dc6829 authored by joaquinvalentin's avatar joaquinvalentin
Browse files

MVP

parent 2bee74fa
This diff is collapsed.
......@@ -21,7 +21,9 @@
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"recharts": "^2.1.6"
"recharts": "^2.1.6",
"request": "^2.88.2",
"stardog-js": "^0.6.2"
},
"scripts": {
"start": "react-scripts start",
......
......@@ -15,7 +15,7 @@ const ListaJugadores = ({ lista, handleClickLista }) => (
<ListItem
className={styles.listElem}
key={elem.nombre}
onClick={() => { handleClickLista(elem.fechaNac || elem.nombre); }}
onClick={() => { handleClickLista(elem.club || elem.jugador); }}
>
<ListItemAvatar>
<Avatar sx={{ width: '60px', height: '60px' }}>
......
......@@ -4,7 +4,8 @@
*/
const API_ROUTES = {
// EXAMPLE: 'https://www.fing.edu.uy/inco/grupos/csi/apps/fuseki/football/query',
EXAMPLE: 'http://localhost:3030/fobal/query',
// EXAMPLE: 'http://localhost:3030/fobal/query',
EXAMPLE: 'http://localhost:5820/FootballTSW/query',
REGISTER_USER: 'http://localhost:3000/users',
LOGIN_USER: 'http://localhost:3000/users/login',
GET_USERS: 'http://localhost:3000/users/getUsers',
......
......@@ -13,11 +13,12 @@ import { API_ROUTES } from 'networking/api-routes';
import { ApiService } from 'networking/api-service';
import levenshtein from 'js-levenshtein';
import { ListaJugadores } from 'common/lista/lista';
import Stardog from 'stardog-js';
import styles from './clubes.module.scss';
const Clubes = () => {
const [nombre, setNombre] = useState('');
const [clubFifa, setClubFifa] = useState({
const [clubInfo, setClubInfo] = useState({
nombre: '',
dt: '',
valor: '',
......@@ -27,60 +28,57 @@ const Clubes = () => {
club: '',
bandera: '',
});
const [clubTmk, setClubTmk] = useState({
nombre: '',
dt: '',
valor: '',
jugadores: [],
club: '',
});
const [datosGrafica, setDatosGrafica] = useState([{}]);
const [datosGraficaClubValoracion, setDatosGraficaClubValoracion] = useState([{}]);
const [abstract, setAbstract] = useState('');
const [listaClubes, setListaClubes] = useState([]);
const stardog = new Stardog({
endpoint: 'http://localhost:5820',
database: 'FootballTSW',
auth: {
user: 'admin',
pass: 'admin',
},
});
const handleChange = (event) => {
setNombre(event.target.value);
};
// http://localhost:3030/fobal/query
const handleSearch = async () => {
// llamada a la api
// eslint-disable-next-line operator-linebreak
const request = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix owl: <http://www.w3.org/2002/07/owl#>
prefix football: <http://football.org/football#>
prefix fifa: <http://football.org/fifa#>
prefix tmk: <http://football.org/tmk#>
SELECT ?club ?nombre ?escudo
WHERE {
?nombreProp rdfs:subPropertyOf football:nombreClub .
?club ?nombreProp ?nombre .
?tieneFoto rdfs:subPropertyOf football:escudoClub .
?club ?tieneFoto ?escudo .
filter(regex(?nombre, "${nombre}", "i"))
select ?club ?nombre ?escudo
where {
?club football:nombreClub ?nombre .
?club football:escudoClub ?escudo .
filter(regex(?nombre, "${nombre}", "i"))
}
LIMIT 10
`;
limit 10`;
// const response = await ApiService.get(API_ROUTES.EXAMPLE, {
// query: request,
// });
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
const response = await stardog.query({
query: request,
});
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
})
// eslint-disable-next-line arrow-body-style
.catch((err) => {
return Promise.reject(err);
});
const lista = [];
response.data.results.bindings.forEach((elem) => {
response.results.bindings.forEach((elem) => {
const nuevo = {
club: elem.club.value,
nombre: elem.nombre.value,
foto: elem.escudo ? elem.escudo.value : undefined,
};
// eslint-disable-next-line no-empty
if (lista.find((nu) => nu.nombre === nuevo.nombre)) {
if (lista.find((nu) => nu.club === nuevo.club)) {
} else { lista.push(nuevo); }
});
setListaClubes(lista);
......@@ -94,21 +92,19 @@ const Clubes = () => {
?s rdf:type dbo:SportsClub .
?s dbp:fullname ?name .
?s dbo:abstract ?abstract .
?s dbo:league ?liga .
?liga dbo:abstract ?pais .
?s dbo:ground ?campo .
?s dbo:manager ?o .
?o dbp:name ?dt .
filter(LANG(?abstract)='en' && (regex(?abstract, "${clubTmk.nombre}", "i") ||
regex(?abstract, "${clubFifa.nombre}", "i") || regex(?name, "${nombre}", "i")) && regex(?pais, "Spain", "i") || regex(?dt, "${clubTmk.dt}", "i"))
filter(LANG(?abstract)='en' && (regex(?name, "${clubInfo.nombre}", "i") || regex(?dt, "${clubInfo.dt}", "i")))
}
limit 3
`;
const response = await ApiService.get(API_ROUTES.DBPEDIA, {
query: request,
});
var mayor = 0;
var index = 0;
var iter = 0;
const response = await ApiService.get(API_ROUTES.DBPEDIA, {
query: request,
});
response.data.results.bindings?.forEach(async (dato) => {
const lev = levenshtein(nombre, dato.name.toString());
if (lev > mayor) {
......@@ -122,38 +118,25 @@ const Clubes = () => {
const getValoracionFifa = async (nombreClub) => {
const request = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix owl: <http://www.w3.org/2002/07/owl#>
prefix football: <http://football.org/football#>
prefix fifa: <http://football.org/fifa#>
SELECT ?temporada (SUM(?valoracion) as ?total) (COUNT(?jugadorStat) as ?cantJugadores) ((?total / ?cantJugadores) as ?promedio)
WHERE {
?typeStat rdfs:subClassOf football:Estadisticas .
?jugadorStat a ?typeStat.
?jugadorStat fifa:clubTemporada <${clubFifa.club}>.
?anio rdfs:subPropertyOf football:temporada .
?jugadorStat ?anio ?temporada .
?val rdfs:subPropertyOf football:valoracion .
?jugadorStat ?val ?valoracion .
?jugadorStat a football:Estadisticas.
?jugadorStat football:clubTemporada <${clubInfo.club}>.
?jugadorStat football:temporada ?temporada .
?jugadorStat football:valoracion ?valoracion .
}
GROUP BY ?temporada
ORDER BY DESC(?temporada)
LIMIT 10
`;
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
const response = await stardog.query({
query: request,
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
});
console.log('valoracion', response.results);
const lista = [];
response.data.results.bindings.forEach((elem) => {
response.results.bindings.forEach((elem) => {
const nuevo = {
temporada: elem.temporada.value,
cantJugadores: elem.cantJugadores.value,
......@@ -169,65 +152,39 @@ const Clubes = () => {
const getClubPartidos = async (fechaInicio, fechaFin, temporada) => {
// llamada a la api
const request = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX owl: <http://www.w3.org/2002/07/owl#>
PREFIX football: <http://football.org/football#>
PREFIX fifa: <http://football.org/fifa#>
SELECT ?golesClub ?golesRival ?fecha ?rival
WHERE {
OPTIONAL {
?localProp rdfs:subPropertyOf football:localPartido.
?partido ?localProp <${clubTmk.club}> .
?visitanteProp rdfs:subPropertyOf football:visitantePartido.
?partido ?visitanteProp ?rivalC.
?rivalProp rdfs:subPropertyOf football:nombreClub .
?rivalC ?rivalProp ?rival .
?golesLocal rdfs:subPropertyOf football:golesLocal.
?partido ?golesLocal ?golesClub.
?golesVisita rdfs:subPropertyOf football:golesVisita.
?partido ?golesVisita ?golesRival.
?partido football:localPartido <${clubInfo.club}> .
?partido football:visitantePartido ?rivalC.
?rivalC football:nombreClub ?rival .
?partido football:golesLocal ?golesClub.
?partido football:golesVisita ?golesRival.
}
OPTIONAL {
?visitanteProp rdfs:subPropertyOf football:visitantePartido.
?partido ?visitanteProp <${clubTmk.club}> .
?localProp rdfs:subPropertyOf football:visitantePartido.
?partido ?localProp ?rivalC.
?rivalProp rdfs:subPropertyOf football:nombreClub .
?rivalC ?rivalProp ?rival .
?golesLocal rdfs:subPropertyOf football:golesLocal.
?partido ?golesLocal ?golesRival.
?golesVisita rdfs:subPropertyOf football:golesVisita.
?partido ?golesVisita ?golesClub.
?partido football:visitantePartido <${clubInfo.club}> .
?partido football:visitantePartido ?rivalC.
?rivalC football:nombreClub ?rival .
?partido football:golesLocal ?golesRival.
?partido football:golesVisita ?golesClub.
}
?fechaPartido rdfs:subPropertyOf football:fecha.
?partido ?fechaPartido ?fecha.
?partido football:fecha ?fecha.
filter(?fecha < "${fechaFin}"^^xsd:date && ?fecha > "${fechaInicio}"^^xsd:date )
}
LIMIT 1000
`;
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
const response = await stardog.query({
query: request,
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
});
var cantGolesHechosV = 0;
var cantGolesRecibidosV = 0;
var cantPartidosGanadosV = 0;
var cantPartidosPerdidosV = 0;
var cantPartidosEmpatadosV = 0;
response.data.results.bindings.forEach((elem) => {
response.results.bindings.forEach((elem) => {
// eslint-disable-next-line no-empty
cantGolesHechosV += parseFloat(elem.golesClub.value);
cantGolesRecibidosV += parseFloat(elem.golesRival.value);
......@@ -247,101 +204,37 @@ const Clubes = () => {
partidosPerdidos: cantPartidosPerdidosV,
partidosEmpatados: cantPartidosEmpatadosV,
};
console.log(nuevo);
// eslint-disable-next-line vars-on-top
return nuevo;
};
const getInfo = async () => {
const getInfo = async (uriClub) => {
const request = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix owl: <http://www.w3.org/2002/07/owl#>
prefix football: <http://football.org/football#>
prefix fifa: <http://football.org/fifa#>
SELECT ?club ?nombre ?bandera ?escudo ?liga ?dt ?valor
SELECT ?nombre ?bandera ?escudo ?liga ?dt ?valor
WHERE {
?nombreProp rdfs:subPropertyOf football:nombreClub .
?club ?nombreProp ?nombre .
OPTIONAL {
?dtProp rdfs:subPropertyOf football:tecnico.
?club ?dtProp ?dt.
?valorProp rdfs:subPropertyOf football:valorPlantilla.
?club ?valorProp ?valor.
}
OPTIONAL {
?ligaProp rdfs:subPropertyOf football:liga .
?club ?ligaProp ?liga .
?escudoClub rdfs:subPropertyOf football:escudoClub .
?club ?escudoClub ?escudo .
?banderaClub rdfs:subPropertyOf football:banderaClub .
?club ?banderaClub ?bandera .
}
filter(regex(?nombre, "${nombre}", "i"))
<${uriClub}> football:nombreClub ?nombre .
<${uriClub}> football:tecnico ?dt.
<${uriClub}> football:valorPlantilla ?valor.
<${uriClub}> football:liga ?liga .
<${uriClub}> football:escudoClub ?escudo .
<${uriClub}> football:banderaClub ?bandera .
}
LIMIT 2
`;
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
const response = await stardog.query({
query: request,
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
});
if (response.data.results.bindings.length !== 0) {
setClubFifa((prev) => {
if (response.results.bindings.length !== 0) {
setClubInfo((prev) => {
const nuevo = { ...prev };
nuevo.nombre = response.data.results.bindings[0].nombre.value;
nuevo.liga = response.data.results.bindings[0].liga.value;
nuevo.escudo = response.data.results.bindings[0].escudo.value;
nuevo.bandera = response.data.results.bindings[0].bandera.value;
nuevo.club = response.data.results.bindings[0].club.value;
return nuevo;
});
}
const request2 = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#>
prefix owl: <http://www.w3.org/2002/07/owl#>
prefix football: <http://football.org/football#>
prefix fifa: <http://football.org/fifa#>
SELECT ?club ?nombre ?liga ?dt ?valor
WHERE {
?nombreProp rdfs:subPropertyOf football:nombreClub .
?club ?nombreProp ?nombre .
?dtProp rdfs:subPropertyOf football:tecnico.
?club ?dtProp ?dt.
?valorProp rdfs:subPropertyOf football:valorPlantilla.
?club ?valorProp ?valor.
filter(regex(?nombre, "${nombre}", "i"))
}
LIMIT 2
`;
const response2 = await ApiService.get(API_ROUTES.EXAMPLE, {
query: request2,
});
if (response2.data.results.bindings.length !== 0) {
setClubTmk((prev) => {
const nuevo = { ...prev };
nuevo.nombre = response2.data.results.bindings[0].nombre.value;
nuevo.club = response2.data.results.bindings[0].club.value;
nuevo.dt = response2.data.results.bindings[0].dt.value;
nuevo.valor = response2.data.results.bindings[0].valor.value;
nuevo.nombre = response.results.bindings[0].nombre.value;
nuevo.liga = response.results.bindings[0].liga.value;
nuevo.escudo = response.results.bindings[0].escudo.value;
nuevo.bandera = response.results.bindings[0].bandera.value;
nuevo.dt = response.results.bindings[0].dt.value;
nuevo.valor = response.results.bindings[0].valor.value;
nuevo.club = uriClub;
return nuevo;
});
}
......@@ -359,20 +252,16 @@ const Clubes = () => {
};
useEffect(() => {
if (clubTmk.nombre !== '') {
getInfoDbPedia();
if (clubInfo.nombre !== '') {
getDatosPartidos();
}
}, [clubTmk]);
useEffect(() => {
if (clubFifa.club !== '') {
getValoracionFifa();
getInfoDbPedia();
}
}, [clubFifa]);
}, [clubInfo]);
const handleClickLista = async (nombreClub) => {
await getInfo(nombreClub);
const handleClickLista = async (uriClub) => {
setListaClubes([]);
await getInfo(uriClub);
};
return (
......@@ -384,28 +273,28 @@ const Clubes = () => {
</h1>
<Grid container spacing={3} row wrap>
<Grid justifyContent="center" alignItems="center">
{ clubFifa.escudo && <img src={clubFifa.escudo} alt="escudo" className={styles.escudo} />}
{ clubInfo.escudo && <img src={clubInfo.escudo} alt="escudo" className={styles.escudo} />}
</Grid>
<Grid>
<h2>
{clubFifa.nombre}
{clubFifa.bandera && <img src={clubFifa.bandera} style={{ paddingLeft: '10px' }} alt="bandera" /> }
{clubInfo.nombre}
{clubInfo.bandera && <img src={clubInfo.bandera} style={{ paddingLeft: '10px' }} alt="bandera" /> }
</h2>
<h4>
{clubTmk.dt}
{clubInfo.dt}
</h4>
{clubTmk.valor
{clubInfo.valor
&& (
<h4>
Valor:
{' '}
{clubTmk.valor}
{clubInfo.valor}
{' '}
(€)
</h4>
) }
<h4>
{clubFifa.liga}
{clubInfo.liga}
</h4>
</Grid>
<Grid justifyContent="center" alignItems="center">
......
......@@ -11,6 +11,7 @@ import { Grafica } from 'pages/grafica/grafica';
import { ApiService } from 'networking/api-service';
import { API_ROUTES } from 'networking/api-routes';
import { ListaJugadores } from 'common/lista/lista';
import Stardog from 'stardog-js';
import styles from './comparacion.module.scss';
const Comparacion = () => {
......@@ -30,56 +31,48 @@ const Comparacion = () => {
pais: '',
bandera: '',
jugador: '',
foto: '',
});
const stardog = new Stardog({
endpoint: 'http://localhost:5820',
database: 'FootballTSW',
auth: {
user: 'admin',
pass: 'admin',
},
});
const handleChange = (event) => {
setNombre(event.target.value);
};
const getClubPartidos = async (fechaInicio, fechaFin, temporada) => {
// llamada a la api
const request = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
PREFIX fo: <http://purl.org/ontology/fo/>
PREFIX foo: <http://filmontology.org/ontology/1.0/>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX owl: <http://www.w3.org/2002/07/owl#>
PREFIX football: <http://football.org/football#>
PREFIX fifa: <http://football.org/fifa#>
SELECT ?goles ?asistencias ?fecha ?rojas ?amarillas
WHERE {
?participaProp rdfs:subPropertyOf football:juegaPartido.
<${datoTrans.jugador}> ?participaProp ?participacion.
?golesPartido rdfs:subPropertyOf football:goles.
?participacion ?golesPartido ?goles.
?asistenciasPartido rdfs:subPropertyOf football:asistencias.
?participacion ?asistenciasPartido ?asistencias.
?tarjetaRoja rdfs:subPropertyOf football:tarjetaRoja.
?participacion ?tarjetaRoja ?rojas.
?tarjetasAmarillas rdfs:subPropertyOf football:tarjetasAmarillas.
?participacion ?tarjetasAmarillas ?amarillas.
?partPartido rdfs:subPropertyOf football:participaPartido.
?participacion ?partPartido ?partido.
?fechaPartido rdfs:subPropertyOf football:fecha.
?partido ?fechaPartido ?fecha.
<${datoTrans.jugador}> football:juegaPartido ?participacion.
?participacion football:goles ?goles.
?participacion football:asistencias ?asistencias.
?participacion football:tarjetaRoja ?rojas.
?participacion football:tarjetasAmarillas ?amarillas.
?participacion football:participaPartido ?partido.
?partido football:fecha ?fecha.
filter(?fecha < "${fechaFin}"^^xsd:date && ?fecha > "${fechaInicio}"^^xsd:date )
}
LIMIT 1000
`;
const response = await ApiService.get(API_ROUTES.EXAMPLE, {
const response = await stardog.query({
query: request,
graph: ['http://football.org/ontologies/football', 'http://football.org/tmk', 'http://football.org/fifa', 'http://football.org/football'],
reasoning: true,
});
var goles = 0;
var asistencias = 0;
var amarillas = 0;
var rojas = 0;
response.data.results.bindings.forEach((elem) => {
response.results.bindings.forEach((elem) => {
// eslint-disable-next-line no-empty
goles += parseFloat(elem.goles.value);
asistencias += parseFloat(elem.asistencias.value);
......@@ -93,7 +86,6 @@ const Comparacion = () => {
amarillas,
rojas,
};
console.log(nuevo);
// eslint-disable-next-line vars-on-top
return nuevo;
};
......@@ -109,128 +101,76 @@ const Comparacion = () => {
await setDatosGrafica(lista.reverse());
};
const getDBpediaInfo = async (name, fechaNac) => {
const getDBpediaInfo = async () => {
var apellido = datoTrans.nombre.split(' ')[1];
const request = `
select ?name ?info
where {
?persona rdf:type dbo:SoccerPlayer.
?persona foaf:name ?name.
?persona dbo:abstract ?info.
?persona dbo:birthDate "${fechaNac}"^^xsd:date .
filter( regex(?name, "${name}","I") && lang(?info) = "en" )
?persona dbo:birthDate "${datoTrans.fechaNac}"^^xsd:date .
filter( regex(?name, "${apellido}","I") && lang(?info) = "en" )
}
LIMIT 1
`;
console.log('request', request);
const response = await ApiService.get(API_ROUTES.DBPEDIA, {
query: request,
});
setDatoTrans((prev) => {
const nuevo = { ...prev };
nuevo.fechaNac = fechaNac;
return nuevo;
});
setAbstract(response.data.results.bindings[0]?.info.value);
};
const handleClickLista = async (fechaNac) => {
const handleClickLista = async (jugador) => {
// query con nombre
setListaJugadores([]);
const request = `
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>