PageStats.jsx 1.7 KB
Newer Older
1
import React, { useState } from "react";
2
3
import { compose } from "recompose";
import Typography from "@material-ui/core/Typography";
4
import { makeStyles } from "@material-ui/styles";
5
import { withPaddedPaper } from "./shared";
6
import SqlInterface from "../stats/RequestSQLHandler";
7
8
9
10
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { appBarHeight, siteMaxWidth } from "../../config/sharedStyles";
11

12
13
14
15
16
17
18
19
20
const useStyles = makeStyles(theme => ({
  requestInterface: {},
  tabBar: {
    minHeight: theme.spacing(5),
    [`@media (min-width:${siteMaxWidth()}px)`]: {
      top: appBarHeight(theme)
    }
  }
}));
21

22
23
24
25
/**
 * Component corresponding to the stats page of the site
 */
function PageStats() {
26
27
  const classes = useStyles();

28
29
  //faire une fonction handleChange qui change le dataset dans l'url et recharge la page

30
31
  return (
    <>
32
33
34
      <Typography variant="h3">
        Exploration des statistiques d'utilisation du site REX-DRI
      </Typography>
35
36
37
38
39
40
41
42
43
44
45
46
47
48
      <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>
49
50
51
      <div className={classes.requestInterface}>
        <SqlInterface />
      </div>
52
53
54
55
56
57
58
    </>
  );
}

PageStats.propTypes = {};

export default compose(withPaddedPaper())(PageStats);