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
ffdb5939
Unverified
Commit
ffdb5939
authored
Jun 05, 2020
by
Estelle Veisemburger
Committed by
Florent Chehab
Jun 14, 2020
Browse files
feat(stats): refactor & clean code
parent
dde172b1
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/pages/PageStats.jsx
View file @
ffdb5939
import
React
,
{
useCallback
,
useState
}
from
"
react
"
;
import
React
,
{
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
}
];
import
SqlInterface
from
"
../stats/RequestSQLHandler
"
;
const
useStyles
=
makeStyles
({
root
:
{
width
:
"
100%
"
},
container
:
{
maxHeight
:
440
}
requestInterface
:
{}
});
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
>
<
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
>
</>
)
}
<
Typography
variant
=
"h3"
>
Exploration des statistiques d'utilisation du site REX-DRI
</
Typography
>
<
div
className
=
{
classes
.
requestInterface
}
>
<
SqlInterface
/>
</
div
>
</>
);
}
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
);
frontend/src/components/stats/RequestSQLHandler.jsx
0 → 100644
View file @
ffdb5939
import
alasql
from
"
alasql
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
Typography
from
"
@material-ui/core/Typography
"
;
import
TextField
from
"
@material-ui/core/TextField
"
;
import
Button
from
"
@material-ui/core/Button
"
;
import
TableFromData
from
"
./Table
"
;
import
{
makeStyles
}
from
"
@material-ui/styles
"
;
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
}
];
/* SELECT a, COUNT(*) AS c FROM ? GROUP BY a
SELECT a as x, COUNT(*) AS y FROM ? GROUP BY a */
const
useStyles
=
makeStyles
({});
function
executeRequest
(
sqlRequest
,
data
)
{
return
alasql
.
promise
(
sqlRequest
,
[
data
]);
}
function
plotResult
(
result
)
{
console
.
log
(
result
);
// {/* <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]
// }
// ]
// }}
// /> */}
}
function
SqlRequestResult
({
result
})
{
return
(
<
div
>
<
br
></
br
>
<
TableFromData
data
=
{
result
}
/>
<
br
></
br
>
<
Button
variant
=
"outlined"
color
=
{
"
secondary
"
}
onClick
=
{
()
=>
{
alasql
(
'
SELECT * INTO CSV("export_rex_dri.csv", {headers:true}) FROM ?
'
,
[
result
]
);
}
}
>
Exporter en CSV
</
Button
>
<
Button
variant
=
"outlined"
color
=
{
"
secondary
"
}
onClick
=
{
()
=>
{
plotResult
(
result
);
}
}
>
Afficher les résultats graphiquement
</
Button
>
</
div
>
);
}
function
SqlInterface
()
{
const
classes
=
useStyles
();
const
[
sqlRequest
,
setSqlRequest
]
=
useState
(
""
);
const
[
requestError
,
setRequestError
]
=
useState
(
""
);
const
[
requestResult
,
setRequestResult
]
=
useState
([]);
return
(
<
div
>
<
TextField
id
=
"standard-multiline-static"
label
=
"Requête d'exploration"
multiline
fullWidth
margin
=
"normal"
rows
=
{
5
}
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
&&
(
<
SqlRequestResult
result
=
{
requestResult
}
/>
)
}
</
div
>
);
}
export
default
SqlInterface
;
frontend/src/components/stats/Table.jsx
0 → 100644
View file @
ffdb5939
import
React
from
"
react
"
;
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
{
makeStyles
}
from
"
@material-ui/styles
"
;
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
>
);
}
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