feat(stats): division of the data in two separate datasets and request added to URL

backend/base_app/templates/stats.html

 {% extends "base.html" %}
+
 {% load render_bundle from webpack_loader %}
 
 {% block content %}
-
     <script>
-        var __StatsData = {{ stats_data }};
+        var __StatsData = {{ stats_data|safe }};
     </script>
+
     {% render_bundle 'stats' %}
 
 {% endblock %}

backend/base_app/views.py

@@ -50,7 +50,34 @@ def stats(request):
     """
     Render the view that displays stats
     """
-    stats_data = []
+    dataset = request.GET.get("dataset")
+
+    if dataset == "1":
+        stats_data = [
+            { 'a': 1, 'b': 1, '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 }
+        ]
+    elif dataset == "2":
+        stats_data = [
+            { 'f': 1, 'g': 1, 'h': 1 },
+            { 'f': 4, 'g': 2, 'h': 1 },
+            { 'f': 1, 'g': 3, 'h': 1 },
+            { 'f': 3, 'g': 4, 'h': 5 },
+            { 'f': 2, 'g': 3, 'h': 2 },
+            { 'f': 1, 'g': 3, 'h': 1 },
+            { 'f': 4, 'g': 3, 'h': 3 },
+            { 'f': 2, 'g': 1, 'h': 1 }
+        ]
+    else:
+        return HttpResponseRedirect("/stats/?dataset=1")
+
+
     return render(request, "stats.html", dict(stats_data=json.dumps(stats_data)))
 
 

frontend/src/components/stats/RequestSQLHandler.jsx

 import alasql from "alasql";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Typography from "@material-ui/core/Typography";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
@@ -7,16 +7,7 @@ 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: 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 }
-];
+const data = __StatsData;
 
 /* SELECT a, COUNT(*) AS c FROM ? GROUP BY a
   SELECT a as x, COUNT(*) AS y FROM ? GROUP BY a */
@@ -28,7 +19,7 @@ function executeRequest(sqlRequest, data) {
 }
 
 function PlotResult({ result }) {
-  result.sort((a, b) => Object.values(a) > Object.values(b));
+  result.sort((a, b) => Object.values(a) > Object.values(b)); //demander à l'utilisateur de faire un order by
 
   if (
     !Object.keys(result[0]).includes("x") ||
@@ -89,11 +80,54 @@ function SqlRequestResult({ result }) {
   );
 }
 
+const defaultRequest = "SELECT a as x, COUNT(*) AS y FROM ? GROUP BY a;";
+
+function getRequestFromUrl() {
+  const getParamsInUrl = new URL(document.location).searchParams;
+  let request = defaultRequest;
+
+  try {
+    const requestInfoString = getParamsInUrl.has("request_info")
+      ? getParamsInUrl.get("request_info")
+      : "";
+    request = JSON.parse(atob(requestInfoString)).request;
+  } catch (err) {
+    console.log(err);
+  }
+
+  return request;
+}
+
+/**
+ *
+ */
+function setRequestInUrl(request) {
+  const requestInfo = {
+    request,
+    version: 1.0
+  };
+
+  const requestInfoAsString = btoa(JSON.stringify(requestInfo));
+  const getParamsInUrl = new URL(document.location).searchParams;
+  getParamsInUrl.set("request_info", requestInfoAsString);
+
+  window.history.replaceState(null, null, `?${getParamsInUrl.toString()}`);
+}
+
+const requestFromUrl = getRequestFromUrl();
+
 function SqlInterface() {
   const classes = useStyles();
-  const [sqlRequest, setSqlRequest] = useState("");
+
+  const [sqlRequest, setSqlRequest] = useState(requestFromUrl);
+
+  useEffect(() => {
+    setRequestInUrl(sqlRequest);
+  }, [sqlRequest]);
+
   const [requestError, setRequestError] = useState("");
   const [requestResult, setRequestResult] = useState([]);
+
   return (
     <div>
       <TextField
@@ -128,7 +162,6 @@ function SqlInterface() {
             .catch(err => {
               setRequestError(err);
             });
-          console.log(btoa(sqlRequest)); //pour encodage de l'url
         }}
       >
         Exécuter

frontend/src/components/stats/Table.jsx

@@ -86,4 +86,6 @@ function TableFromData({ data }) {
   );
 }
 
+// TODO rajouter proptypes
+
 export default TableFromData;