feat(stats): Creation of a plot

frontend/src/components/stats/RequestSQLHandler.jsx

@@ -5,11 +5,16 @@ import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import TableFromData from "./Table";
 import { makeStyles } from "@material-ui/styles";
+import { Line } from "react-chartjs-2";
 
 const data = [
   { a: 1, b: 1, c: 1 },
-  { a: 1, b: 2, c: 1 },
+  { a: 4, b: 2, c: 1 },
   { a: 1, b: 3, c: 1 },
+  { a: 3, b: 4, c: 5 },
+  { a: 2, b: 3, c: 2 },
+  { a: 1, b: 3, c: 1 },
+  { a: 4, b: 3, c: 3 },
   { a: 2, b: 1, c: 1 }
 ];
 
@@ -22,33 +27,37 @@ function executeRequest(sqlRequest, data) {
   return alasql.promise(sqlRequest, [data]);
 }
 
-function plotResult(result) {
-  console.log(result);
+function PlotResult({ result }) {
+  result.sort((a, b) => Object.values(a) > Object.values(b));
 
-  // {/* <Line
-  //   data={{
-  //     labels: [
-  //       "January",
-  //       "February",
-  //       "March",
-  //       "April",
-  //       "May",
-  //       "June",
-  //       "July"
-  //     ],
-  //     datasets: [
-  //       {
-  //         label: "My First dataset",
-  //         backgroundColor: "rgb(255, 99, 132)",
-  //         borderColor: "rgb(255, 99, 132)",
-  //         data: [0, 10, 5, 2, 20, 30, 45]
-  //       }
-  //     ]
-  //   }}
-  // /> */}
+  if (
+    !Object.keys(result[0]).includes("x") ||
+    !Object.keys(result[0]).includes("y")
+  ) {
+    return <div>Erreur : Vous devez préciser x et y. </div>;
+  }
+  return (
+    <div>
+      <Line
+        data={{
+          labels: result.map(r => r.x),
+          datasets: [
+            {
+              label: "My First dataset", //séparer par cat
+              backgroundColor: "rgb(255, 99, 132)",
+              borderColor: "rgb(255, 99, 132)",
+              data: result.map(r => r.y)
+            }
+          ]
+        }}
+      />
+    </div>
+  );
 }
 
 function SqlRequestResult({ result }) {
+  const [resultToPlot, setResultToPlot] = useState([]);
+
   return (
     <div>
       <br></br>
@@ -70,11 +79,12 @@ function SqlRequestResult({ result }) {
         variant="outlined"
         color={"secondary"}
         onClick={() => {
-          plotResult(result);
+          setResultToPlot(result);
         }}
       >
         Afficher les résultats graphiquement
       </Button>
+      {resultToPlot.length !== 0 && <PlotResult result={resultToPlot} />}
     </div>
   );
 }
@@ -118,7 +128,7 @@ function SqlInterface() {
             .catch(err => {
               setRequestError(err);
             });
-          console.log(btoa(sqlRequest));
+          console.log(btoa(sqlRequest)); //pour encodage de l'url
         }}
       >
         Exécuter