feat(stats): Creation of a page for stats exploration

frontend/src/components/pages/PageStats.jsx

-import React from "react";
+import React, { useCallback, useState } from "react";
 import { compose } from "recompose";
 import Typography from "@material-ui/core/Typography";
 import { Line } from "react-chartjs-2";
 import alasql from "alasql";
+import { makeStyles } from "@material-ui/styles";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
+import Table from "@material-ui/core/Table";
+import TableBody from "@material-ui/core/TableBody";
+import TableCell from "@material-ui/core/TableCell";
+import TableContainer from "@material-ui/core/TableContainer";
+import TableHead from "@material-ui/core/TableHead";
+import TablePagination from "@material-ui/core/TablePagination";
+import TableRow from "@material-ui/core/TableRow";
 import { withPaddedPaper } from "./shared";
 
 const data = [
   { a: 1, b: 1, c: 1 },
   { a: 1, b: 2, c: 1 },
   { a: 1, b: 3, c: 1 },
-  { a: 2, b: 1, c: 1 },
+  { a: 2, b: 1, c: 1 }
 ];
-const res = alasql("SELECT a, COUNT(*) AS c FROM ? GROUP BY a", [data]);
 
-// eslint-disable-next-line no-console
-console.log(res);
+const useStyles = makeStyles({
+  root: {
+    width: "100%"
+  },
+  container: {
+    maxHeight: 440
+  }
+});
+
+function TableFromData({ data }) {
+  const classes = useStyles();
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+  if (data.length === 0) {
+    return <></>;
+  }
+
+  const columns = Object.keys(data[0]).map(id => ({ id, label: id }));
+
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = event => {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  };
+
+  return (
+    <Paper className={classes.root}>
+      <TableContainer className={classes.container}>
+        <Table stickyHeader aria-label="sticky table">
+          <TableHead>
+            <TableRow>
+              {columns.map(column => (
+                <TableCell key={column.id}>{column.label}</TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {data
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row, i) => {
+                return (
+                  <TableRow hover role="checkbox" tabIndex={-1} key={i}>
+                    {columns.map(column => {
+                      const value = row[column.id];
+                      return (
+                        <TableCell key={column.id} align={column.align}>
+                          {column.format && typeof value === "number"
+                            ? column.format(value)
+                            : value}
+                        </TableCell>
+                      );
+                    })}
+                  </TableRow>
+                );
+              })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <TablePagination
+        component="div"
+        count={data.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onChangePage={handleChangePage}
+        onChangeRowsPerPage={handleChangeRowsPerPage}
+        labelRowsPerPage="Lignes par page"
+        backIconButtonText="Page précédente"
+        nextIconButtonText="Page suivante"
+      />
+    </Paper>
+  );
+}
+
+function executeRequest(sqlRequest, data) {
+  return alasql.promise(sqlRequest, [data]);
+}
 
 /**
  * Component corresponding to the stats page of the site
  */
 function PageStats() {
+  const classes = useStyles();
+  const [sqlRequest, setSqlRequest] = useState("");
+  const [requestError, setRequestError] = useState("");
+  const [requestResult, setRequestResult] = useState([]);
+
   return (
     <>
       <Typography variant="h3">Vive les stats</Typography>
-      <br />
-      More to come...
-      <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],
-            },
-          ],
-        }}
+      <TextField
+        id="standard-multiline-static"
+        label="Requête d'exploration"
+        multiline
+        fullWidth
+        margin="normal"
+        rows={10}
+        placeholder="Entrez la requête SQL"
+        value={sqlRequest}
+        onChange={event => setSqlRequest(event.target.value)}
       />
+      {requestError !== "" && (
+        <>
+          <br></br>
+          <Typography variant="caption">{requestError.toString()}</Typography>
+          <br></br>
+        </>
+      )}
+      <Button
+        variant="contained"
+        color={"primary"}
+        className={classes.button}
+        onClick={() => {
+          setRequestError("");
+          setRequestResult([]);
+          executeRequest(sqlRequest, data)
+            .then(res => {
+              setRequestResult(res);
+            })
+            .catch(err => {
+              setRequestError(err);
+            });
+          console.log(btoa(sqlRequest));
+        }}
+      >
+        Exécuter
+      </Button>
+      {requestResult.length !== 0 && (
+        <>
+          <br></br>
+          <TableFromData data={requestResult} />
+          <br></br>
+          <Button
+            variant="outlined"
+            color={"secondary"}
+            onClick={() => {
+              alasql(
+                'SELECT * INTO CSV("export_rex_dri.csv", {headers:true}) FROM ?',
+                [requestResult]
+              );
+            }}
+          >
+            Exporter en CSV
+          </Button>
+        </>
+      )}
     </>
   );
 }
 
 PageStats.propTypes = {};
 
+/**
+ * SELECT ts as x, nb_connections as y
+ *
+ * SELECT ts as x, branche as cat, nb_connections as y
+ */
+
+// {/* <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]
+//       }
+//     ]
+//   }}
+// /> */}
+
 export default compose(withPaddedPaper())(PageStats);