Timeline.jsx 1.62 KB
Newer Older
1
import React, {useEffect, useRef, useState} from "react";
2
import { Grid } from "@material-ui/core";
3
4
import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
amarcic's avatar
amarcic committed
5
import { TimelineChart } from "./TimelineChart";
6
import {getDimensions} from "../../utils";
7
8
9
10
11

export const Timeline = (props) => {
    const { t, i18n } = useTranslation();

    const classes = useStyles();
12
    const [dimensions, setDimensions] = useState({width: 0, height: 0, margin: {top: 0, right: 0, left: 0, bottom: 0}});
13
14

    const { timelineObjectsData } = props;
amarcic's avatar
amarcic committed
15
16
    const filteredTimelineData = timelineObjectsData&&timelineObjectsData.filter( datapoint => datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);

17
18
19
20
21
22
23
24
    useEffect( () => {
        let currentDimensions = getDimensions("timelineContainer");
        if (currentDimensions&&currentDimensions.width!==dimensions?.width)
            setDimensions(currentDimensions);
        console.log("state dimensions", dimensions)

    }, []);

25
    return (
26
27
        <>
            <Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
28
                <Grid item>
29
                    <h3 className={classes.h3}>{t('Temporal distribution')}</h3>
30
31
                </Grid>
            </Grid>
32
            <Grid id="timelineContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
33
                <Grid item>
34
                    <TimelineChart filteredTimelineData={filteredTimelineData} dimensions={dimensions/*getDimensions("timelineContainer")*/} />
35
36
                </Grid>
            </Grid>
37
        </>
38
39
    )
};