compañeros zurdos

package-lock.json

+{
+  "name": "bdnr",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

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 { 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 [player, setPlayer] = useState("");
+  const [queryValoracion, queryValoracionState] = useLazyReadCypher(
+    queryValoracionString
+  );
+
+  const { loading, records, result } = useReadCypher(query);
+  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 });
+  };
+
+  return (
+    <>
+      <h2>Cantidad de compañeras zurdas</h2>
+      <Autocomplete
+        disablePortal
+        id="combo-box-demo"
+        options={players?.map((player) => player.properties.long_name) || []}
+        sx={{ width: "100%" }}
+        renderInput={(params) => <TextField {...params} label="Jugador" />}
+        onChange={(e, value) => setPlayer(value)}
+      />
+
+      <Button
+        sx={{ marginTop: "1rem" }}
+        variant="contained"
+        onClick={handleSearch}
+        disabled={!player || queryValoracionState.loading}
+      >
+        Buscar
+      </Button>
+      {queryValoracionState.result && (
+        <p>Number of Left-footed Players: {queryValoracionState.result.records[0].get("numberOfPlayers")}</p>
+        )}
+    </>
+  );
+};
+
+export { CompasZurdos };

ui/src/components/index.ts

 export { CaminoMinimo } from "./CaminoMinimo";
 export { Layout } from "./Layout";
 export { Valoracion } from "./Valoracion";
+export { CompasZurdos } from "./CompasZurdos";

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>

ui/src/pages/Home.tsx

 import { Box, Toolbar, Typography } from "@mui/material";
-import { CaminoMinimo, Layout, Valoracion } from "../components";
+import { CaminoMinimo, CompasZurdos, Layout, Valoracion } from "../components";
 
 const Home = () => {
   return (
@@ -15,6 +15,8 @@ const Home = () => {
       <Valoracion />
 
       <CaminoMinimo />
+
+      <CompasZurdos />
     </Layout>
   );
 };