Skip to content

GitLab

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

feat(stats): refactor & clean code

parent dde172b1
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 186 deletions
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;
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