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
dde172b1
Unverified
Commit
dde172b1
authored
May 31, 2020
by
Estelle Veisemburger
Committed by
Florent Chehab
Jun 14, 2020
Browse files
feat(stats): Creation of a page for stats exploration
parent
47bc796d
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/pages/PageStats.jsx
View file @
dde172b1
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
);
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