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

feat(stats): Creation of a page for stats exploration

parent 47bc796d
import React from "react"; import React, { useCallback, useState } from "react";
import { compose } from "recompose"; import { compose } from "recompose";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import { Line } from "react-chartjs-2"; import { Line } from "react-chartjs-2";
import alasql from "alasql"; 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"; import { withPaddedPaper } from "./shared";
const data = [ const data = [
{ a: 1, b: 1, c: 1 }, { a: 1, b: 1, c: 1 },
{ a: 1, b: 2, c: 1 }, { a: 1, b: 2, c: 1 },
{ a: 1, b: 3, 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 const useStyles = makeStyles({
console.log(res); 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 * Component corresponding to the stats page of the site
*/ */
function PageStats() { function PageStats() {
const classes = useStyles();
const [sqlRequest, setSqlRequest] = useState("");
const [requestError, setRequestError] = useState("");
const [requestResult, setRequestResult] = useState([]);
return ( return (
<> <>
<Typography variant="h3">Vive les stats</Typography> <Typography variant="h3">Vive les stats</Typography>
<br /> <TextField
More to come... id="standard-multiline-static"
<Line label="Requête d'exploration"
data={{ multiline
labels: [ fullWidth
"January", margin="normal"
"February", rows={10}
"March", placeholder="Entrez la requête SQL"
"April", value={sqlRequest}
"May", onChange={event => setSqlRequest(event.target.value)}
"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],
},
],
}}
/> />
{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 = {}; 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); export default compose(withPaddedPaper())(PageStats);
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