Unverified Commit 277d16d8 authored by Estelle Veisemburger's avatar Estelle Veisemburger Committed by Florent Chehab
Browse files

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

parent c82ead0a
{% 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 %}
......@@ -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)))
......
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
......
......@@ -86,4 +86,6 @@ function TableFromData({ data }) {
);
}
// TODO rajouter proptypes
export default TableFromData;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment