feat(statsPage): dataset selection cleaned and working

parent 4cad3635
import React from "react";
import { compose } from "recompose";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/styles";
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";
import DatasetSelector from "../stats/DatasetSelector";
import {
availableDatasets,
changeDataset,
getDatasetColumns,
currentDatasetName,
} from "../stats/utils";
const useStyles = makeStyles((theme) => ({
requestInterface: {},
tabBar: {
minHeight: theme.spacing(5),
[`@media (min-width:${siteMaxWidth()}px)`]: {
top: appBarHeight(theme),
},
datasetTabBar: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
},
requestInterface: {},
}));
/**
......@@ -25,27 +25,18 @@ const useStyles = makeStyles((theme) => ({
function PageStats() {
const classes = useStyles();
// TODO faire une fonction handleChange qui change le dataset dans l'url et recharge la page
return (
<>
<Typography variant="h3">
<Typography variant="h4">
Exploration des statistiques d'utilisation du site REX-DRI
</Typography>
<AppBar position="sticky" color="default" className={classes.tabBar}>
<Tabs
// value={}
// onChange={handleChange}
variant={scroll ? "scrollable" : "standard"}
centered={!scroll}
scrollButtons="on"
indicatorColor="secondary"
textColor="secondary"
>
<Tab label="Connexions" value="daily_connections" />
<Tab label="Contributions" value="daily_exchange_contributions" />
</Tabs>
</AppBar>
<div className={classes.datasetTabBar}>
<DatasetSelector
datasets={availableDatasets}
onChange={changeDataset}
value={currentDatasetName}
/>
</div>
<div className={classes.requestInterface}>
<SqlInterface />
</div>
......@@ -55,4 +46,4 @@ function PageStats() {
PageStats.propTypes = {};
export default compose(withPaddedPaper())(PageStats);
export default withPaddedPaper()(PageStats);
import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
/**
* Component to select the dataset
*/
function DatasetSelector({ datasets, value, onChange }) {
return (
<AppBar position="sticky" color="default">
<Tabs
value={value}
onChange={(e, newDatasetName) => onChange(newDatasetName)}
variant="standard"
centered
scrollButtons="on"
indicatorColor="secondary"
textColor="secondary"
>
{datasets.map(({ label, name }) => (
<Tab label={label} value={name} key={name} />
))}
</Tabs>
</AppBar>
);
}
DatasetSelector.propTypes = {
datasets: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
})
).isRequired,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
};
export default DatasetSelector;
import { getGetParamInUrl, setGetParamInUrl } from "../../utils/url";
export const currentDatasetName = getGetParamInUrl("dataset");
/**
* Update the selected dataset
* @param newDatasetName {string}
*/
export function changeDataset(newDatasetName) {
if (newDatasetName !== currentDatasetName) {
setGetParamInUrl("dataset", newDatasetName, "reload");
}
}
export const availableDatasets = [
{
name: "daily_connections",
label: "Nombre de connexions",
columns: [{ name: "", description: "" }],
},
{
name: "daily_exchange_contributions",
label: "Nombre de contributions",
columns: [{ name: "", description: "" }],
},
];
/**
* Get the columns of a dataset
* @param datasetName {string}
* @returns {[{name: string, description: string}]}
*/
export function getDatasetColumns(datasetName) {
return availableDatasets.find((dataset) => dataset.name === datasetName)
.columns;
}
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