feat(statsPage): select date range in front

parent 9fe44ebb
......@@ -12,6 +12,7 @@ import {
currentDatasetName,
getDatasetColumns,
} from "../stats/utils";
import PickDataDateRange from "../stats/PickDataDateRange";
const useStyles = makeStyles((theme) => ({
datasetTabBar: {
......@@ -46,6 +47,7 @@ function PageStats() {
value={currentDatasetName}
/>
</div>
<PickDataDateRange />
<Divider className={classes.spacer} />
<DatasetDescriptor
columns={getDatasetColumns(currentDatasetName)}
......
import React, { useState } from "react";
import PropTypes from "prop-types";
import { DatePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import frLocale from "date-fns/locale/fr";
import format from "date-fns/format";
import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
import { makeStyles } from "@material-ui/styles";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import { changeDates, getDatesFromUrl } from "./utils";
/**
* Class to customize the header of the date selection box
*/
class LocalizedUtils extends DateFnsUtils {
getDatePickerHeaderText(date) {
return format(date, "d MMM yyyy", { locale: this.locale });
}
}
const realMaxDate = new Date();
function DatePickerInternal({ value, onChange }) {
return (
<MuiPickersUtilsProvider utils={LocalizedUtils} locale={frLocale}>
<DatePicker
clearable
format="d MMM yyyy"
value={value}
onChange={onChange}
clearLabel="vider"
cancelLabel="annuler"
leftArrowIcon={<KeyboardArrowLeftIcon />}
rightArrowIcon={<KeyboardArrowRightIcon />}
maxDate={realMaxDate}
/>
</MuiPickersUtilsProvider>
);
}
DatePickerInternal.propTypes = {
value: PropTypes.instanceOf(Date).isRequired,
onChange: PropTypes.func.isRequired,
};
const useStyles = makeStyles((theme) => ({
container: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
item: {
margin: theme.spacing(1),
},
}));
const { dateMin: dateMinUrl, dateMax: dateMaxUrl } = getDatesFromUrl();
/**
* Component to display the result of a request
*/
function PickDataDateRange() {
const classes = useStyles();
const [dateMin, setDateMin] = useState(dateMinUrl);
const [dateMax, setDateMax] = useState(dateMaxUrl);
const apply = () => {
changeDates(dateMin, dateMax);
};
return (
<>
<Typography variant="h6">
Choix de la plage temporelle des données
</Typography>
<div className={classes.container}>
<div className={classes.item}>
<DatePickerInternal value={dateMin} onChange={setDateMin} />
</div>
<div className={classes.item}>
<DatePickerInternal value={dateMax} onChange={setDateMax} />
</div>
<div className={classes.item}>
<Button variant="contained" color="secondary" onClick={apply}>
Appliquer
</Button>
</div>
</div>
</>
);
}
export default PickDataDateRange;
......@@ -4,6 +4,8 @@ import {
getUpdatedMajor,
getUpdatedMinor,
} from "../../utils/majorMinorMappings";
import dateStrToDate from "../../utils/dateStrToDate";
import dateToDateStr from "../../utils/dateToDateStr";
export const currentDatasetName = getGetParamInUrl("dataset");
......@@ -285,3 +287,25 @@ export function changeDataset(newDatasetName) {
setGetParamInUrl("dataset", newDatasetName, "reload");
}
}
/**
* Get the dates from the url
* @returns {{dateMax: Date, dateMin: Date}}
*/
export function getDatesFromUrl() {
const dateMin = dateStrToDate(getGetParamInUrl("date_min"));
const dateMax = dateStrToDate(getGetParamInUrl("date_max"));
return { dateMin, dateMax };
}
/**
* Change the dates in the url and reload the page
*
* @param newDateMin {Date}
* @param newDateMax {Date}
*/
export function changeDates(newDateMin, newDateMax) {
setGetParamInUrl("date_min", dateToDateStr(newDateMin), "push");
setGetParamInUrl("date_max", dateToDateStr(newDateMax), "reload");
}
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