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
c82ead0a
Unverified
Commit
c82ead0a
authored
Jun 05, 2020
by
Estelle Veisemburger
Committed by
Florent Chehab
Jun 14, 2020
Browse files
feat(stats): Creation of a plot
parent
ffdb5939
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/stats/RequestSQLHandler.jsx
View file @
c82ead0a
...
...
@@ -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
p
lotResult
(
result
)
{
console
.
log
(
result
);
function
P
lotResult
(
{
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
=
{
()
=>
{
plo
tResult
(
result
);
se
tResult
ToPlot
(
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
...
...
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