compas altos

ui/src/components/CompasZurdos.tsx

-import { Autocomplete, Button, TextField } from "@mui/material";
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-} from "chart.js";
+import { Autocomplete, Button, Stack, TextField } from "@mui/material";
 import { useState } from "react";
-import { Line } from "react-chartjs-2";
 import { useLazyReadCypher, useReadCypher } from "use-neo4j";
 
 const CompasZurdos = () => {
-  const query = `MATCH (p:Player {gender: "Female"}) RETURN p LIMIT 100`;
-  const queryValoracionString = `MATCH (p1:Player {long_name: $playerName})-[:PLAYED_WITH]-(p2:Player {preferred_foot: 'Left'})
-  RETURN COUNT(DISTINCT p2) AS numberOfPlayers
-    MATCH (p)-[:FIFA_17]->(e2017:Statistics)
-    MATCH (p)-[:FIFA_18]->(e2018:Statistics)
-    MATCH (p)-[:FIFA_19]->(e2019:Statistics)
-    MATCH (p)-[:FIFA_20]->(e2020:Statistics)
-    MATCH (p)-[:FIFA_21]->(e2021:Statistics)
-    MATCH (p)-[:FIFA_22]->(e2022:Statistics)
-    RETURN e2017, e2018, e2019, e2020, e2021, e2022`;
-
+  const queryString = `MATCH (p:Player {gender: "Male"}) RETURN p LIMIT 100`;
+  const queryJugadoresQueJugaronConJugadorYSonMasAltosQueEl = `MATCH (p1:Player {long_name: $playerName})-[:FIFA_17 | :FIFA_18 | :FIFA_19 | :FIFA_20 | :FIFA_21 | :FIFA_22]->(e:Statistics)-[:PLAY_FOR_CLUB]->(cl:Clubs)<-[:PLAY_FOR_CLUB]-(e2:Statistics)<-[:FIFA_17 | :FIFA_18 | :FIFA_19 | :FIFA_20 | :FIFA_21 | :FIFA_22]-(p2:Player) where p2.height_cm > p1.height_cm and p1 <> p2 RETURN p2, COUNT(DISTINCT p2) AS cantidad_jugadores_distintos`;
 
   const [player, setPlayer] = useState("");
-  const [queryValoracion, queryValoracionState] = useLazyReadCypher(
-    queryValoracionString
+  const [querySearch, querySearchState] = useLazyReadCypher(
+    queryJugadoresQueJugaronConJugadorYSonMasAltosQueEl
   );
 
-  const { loading, records, result } = useReadCypher(query);
+  const { loading, records, result } = useReadCypher(queryString);
   if (loading) return <div>Loading...</div>;
   const players = records?.map((record) => record.get("p"));
-  ChartJS.register(
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    Title,
-    Tooltip,
-    Legend
-  );
 
   const handleSearch = () => {
-    queryValoracion({ playerName: player });
+    querySearch({ playerName: player });
   };
 
   return (
     <>
-      <h2>Cantidad de compañeras zurdas</h2>
+      <h2>Cantidad de compañeros mas altos que jugador</h2>
       <Autocomplete
         disablePortal
         id="combo-box-demo"
@@ -64,13 +35,20 @@ const CompasZurdos = () => {
         sx={{ marginTop: "1rem" }}
         variant="contained"
         onClick={handleSearch}
-        disabled={!player || queryValoracionState.loading}
+        disabled={!player || querySearchState.loading}
       >
         Buscar
       </Button>
-      {queryValoracionState.result && (
-        <p>Number of Left-footed Players: {queryValoracionState.result.records[0].get("numberOfPlayers")}</p>
-        )}
+      {querySearchState.result &&
+        querySearchState.result.records.map((record) => {
+          const player = record.get("p2");
+          return (
+            <Stack flexDirection="row">
+              <p>{player.properties.long_name}: </p>
+              <p>{player.properties.height_cm.toString()}</p>
+            </Stack>
+          );
+        })}
     </>
   );
 };

ui/src/index.tsx

@@ -10,15 +10,15 @@ const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
 // Este es para conectarse con aura
-const driver = createDriver(
-  "neo4j+s",
-  "28fbdf37.databases.neo4j.io",
-  "7687",
-  "neo4j",
-  "0zk61H06n1WT-zr8BW7iOyggB5cme-YQgt_ofieMXlw"
-);
+// const driver = createDriver(
+//   "neo4j+s",
+//   "28fbdf37.databases.neo4j.io",
+//   "7687",
+//   "neo4j",
+//   "0zk61H06n1WT-zr8BW7iOyggB5cme-YQgt_ofieMXlw"
+// );
 
-// const driver = createDriver("bolt", "localhost", "7687", "neo4j", "nicomarti");
+const driver = createDriver("bolt", "localhost", "7687", "neo4j", "nicomarti");
 
 root.render(
   <React.StrictMode>