Unverified Commit 2ac7dcb0 authored by Florent Chehab's avatar Florent Chehab
Browse files

style(front): stats

parent 7db30bd5
Pipeline #62955 passed with stages
in 6 minutes and 8 seconds
import React, { useState } from "react";
import React from "react";
import { compose } from "recompose";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
import { withPaddedPaper } from "./shared";
import SqlInterface from "../stats/RequestSQLHandler";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { withPaddedPaper } from "./shared";
import SqlInterface from "../stats/RequestSQLHandler";
import { appBarHeight, siteMaxWidth } from "../../config/sharedStyles";
const useStyles = makeStyles(theme => ({
const useStyles = makeStyles((theme) => ({
requestInterface: {},
tabBar: {
minHeight: theme.spacing(5),
[`@media (min-width:${siteMaxWidth()}px)`]: {
top: appBarHeight(theme)
}
}
top: appBarHeight(theme),
},
},
}));
/**
......@@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({
function PageStats() {
const classes = useStyles();
//faire une fonction handleChange qui change le dataset dans l'url et recharge la page
// TODO faire une fonction handleChange qui change le dataset dans l'url et recharge la page
return (
<>
......
import alasql from "alasql";
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import alasql from "alasql";
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";
import TableFromData from "./Table";
import PlotResult from "./Plot";
const cols = Object.keys(__StatsData);
// eslint-disable-next-line no-undef
const DataFromBackend = __StatsData;
const cols = Object.keys(DataFromBackend);
const data = [];
for (let i = 0; i < __StatsData[cols[0]].length; i++) {
// eslint-disable-next-line no-plusplus
for (let i = 0; i < DataFromBackend[cols[0]].length; i++) {
const elem = {};
for (let col of cols) {
elem[col] = __StatsData[col][i];
}
cols.forEach((col) => {
elem[col] = DataFromBackend[col][i];
});
data.push(elem);
}
const useStyles = makeStyles({});
// eslint-disable-next-line no-shadow
function executeRequest(sqlRequest, data) {
return alasql.promise(sqlRequest, [data]);
}
......@@ -26,13 +31,13 @@ function executeRequest(sqlRequest, data) {
function SqlRequestResult({ result }) {
return (
<div>
<br></br>
<br />
<TableFromData data={result} />
<PlotResult result={result} />
<br></br>
<br />
<Button
variant="outlined"
color={"secondary"}
color="secondary"
onClick={() => {
alasql(
'SELECT * INTO CSV("export_rex_dri.csv", {headers:true}) FROM ?',
......@@ -42,20 +47,25 @@ function SqlRequestResult({ result }) {
>
Exporter en CSV
</Button>
<br></br>
<br></br>
<br />
<br />
Pour partager votre recherche il vous suffit de copier l'url de la page !
</div>
);
}
SqlRequestResult.propTypes = {
result: PropTypes.array.isRequired,
};
const defaultRequest = `SELECT
date AS x,
nb_connections AS y
FROM ?
ORDER BY x ASC;
`; //à changer selon le dataset
// si plusieurs requetes par défaut proposées pour un meme dataset : les proposer avec des boutons
`;
// TODO à changer selon le dataset
// TODO si plusieurs requetes par défaut proposées pour un meme dataset : les proposer avec des boutons
/*
SELECT
date AS x,
......@@ -67,14 +77,14 @@ ORDER BY x ASC;
*/
/**
SELECT
date AS x,
CASE WHEN
major = 'IM' OR major = 'GM' OR major = 'GSM' THEN 'IM'
ELSE 'AUTRES'
END AS cat,
sum(nb_contributions) AS y
FROM ?
SELECT
date AS x,
CASE WHEN
major = 'IM' OR major = 'GM' OR major = 'GSM' THEN 'IM'
ELSE 'AUTRES'
END AS cat,
sum(nb_contributions) AS y
FROM ?
GROUP BY date, major
ORDER BY date ASC;
*/
......@@ -89,6 +99,7 @@ function getRequestFromUrl() {
: "";
request = JSON.parse(atob(requestInfoString)).request;
} catch (err) {
// eslint-disable-next-line no-console
console.log(err);
}
......@@ -101,7 +112,7 @@ function getRequestFromUrl() {
function setRequestInUrl(request) {
const requestInfo = {
request,
version: 1.0
version: 1.0,
};
const requestInfoAsString = btoa(JSON.stringify(requestInfo));
......@@ -111,6 +122,7 @@ function setRequestInUrl(request) {
window.history.replaceState(null, null, `?${getParamsInUrl.toString()}`);
}
// eslint-disable-next-line no-unused-vars
function getDatasetFromUrl() {
const getParamsInUrl = new URL(document.location).searchParams;
let datasetName = "daily_connections";
......@@ -120,12 +132,14 @@ function getDatasetFromUrl() {
? getParamsInUrl.get("dataset")
: "daily_connections";
} catch (err) {
// eslint-disable-next-line no-console
console.log(err);
}
return datasetName;
}
// eslint-disable-next-line no-unused-vars
function setDatasetInUrl(datasetName) {
const getParamsInUrl = new URL(document.location).searchParams;
getParamsInUrl.set("dataset", datasetName);
......@@ -158,27 +172,27 @@ function SqlInterface() {
rows={5}
placeholder="Entrez la requête SQL"
value={sqlRequest}
onChange={event => setSqlRequest(event.target.value)}
onChange={(event) => setSqlRequest(event.target.value)}
/>
{requestError !== "" && (
<>
<br></br>
<br />
<Typography variant="caption">{requestError.toString()}</Typography>
<br></br>
<br />
</>
)}
<Button
variant="contained"
color={"primary"}
color="primary"
className={classes.button}
onClick={() => {
setRequestError("");
setRequestResult([]);
executeRequest(sqlRequest, data)
.then(res => {
.then((res) => {
setRequestResult(res);
})
.catch(err => {
.catch((err) => {
setRequestError(err);
});
}}
......
import React from "react";
import PropTypes from "prop-types";
import Paper from "@material-ui/core/Paper";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
......@@ -11,11 +12,11 @@ import { makeStyles } from "@material-ui/styles";
const useStyles = makeStyles({
root: {
width: "100%"
width: "100%",
},
container: {
maxHeight: 440
}
maxHeight: 440,
},
});
function TableFromData({ data }) {
......@@ -27,13 +28,13 @@ function TableFromData({ data }) {
return <></>;
}
const columns = Object.keys(data[0]).map(id => ({ id, label: id }));
const columns = Object.keys(data[0]).map((id) => ({ id, label: id }));
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = event => {
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
......@@ -44,7 +45,7 @@ function TableFromData({ data }) {
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map(column => (
{columns.map((column) => (
<TableCell key={column.id}>{column.label}</TableCell>
))}
</TableRow>
......@@ -54,8 +55,9 @@ function TableFromData({ data }) {
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, i) => {
return (
// eslint-disable-next-line react/no-array-index-key
<TableRow hover role="checkbox" tabIndex={-1} key={i}>
{columns.map(column => {
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
......@@ -86,6 +88,8 @@ function TableFromData({ data }) {
);
}
// TODO rajouter proptypes
TableFromData.propTypes = {
data: PropTypes.array.isRequired,
};
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