Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Rex Dri
Rex Dri
Commits
277d16d8
Unverified
Commit
277d16d8
authored
Jun 06, 2020
by
Estelle Veisemburger
Committed by
Florent Chehab
Jun 14, 2020
Browse files
feat(stats): division of the data in two separate datasets and request added to URL
parent
c82ead0a
Changes
4
Hide whitespace changes
Inline
Side-by-side
backend/base_app/templates/stats.html
View file @
277d16d8
{% 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
View file @
277d16d8
...
...
@@ -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
View file @
277d16d8
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
View file @
277d16d8
...
...
@@ -86,4 +86,6 @@ function TableFromData({ data }) {
);
}
// TODO rajouter proptypes
export
default
TableFromData
;
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment