Commit 7933f2c1 authored by amarcic's avatar amarcic
Browse files

timeline: extracted function to get container dimensions to utils

parent 665c47dc
import React, {useEffect, useRef, useState} from "react";
import { Card, Grid } from "@material-ui/core";
import { Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
import { TimelineChart } from "./TimelineChart";
//import {select, scaleBand, axisBottom, axisLeft, scaleLinear, max, min, ascending, descending} from "d3";
//import {getTimeRangeOfTimelineData, newGroupByPeriods} from "../../utils";
import {getDimensions} from "../../utils";
export const Timeline = (props) => {
const { t, i18n } = useTranslation();
......@@ -14,42 +13,6 @@ export const Timeline = (props) => {
const { timelineObjectsData } = props;
const filteredTimelineData = timelineObjectsData&&timelineObjectsData.filter( datapoint => datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
//svg dimensions
const margin = {top: 5, right: 20, left: 20, bottom: 30};
//todo: read current dimensions on window resize
//console.log("tlc", document.getElementById("timelineContainer"));
const timelineContainer = document.getElementById("timelineContainer");
const containerHeight = timelineContainer?.clientHeight,
containerWidth = timelineContainer?.clientWidth;
const width = containerWidth - margin.left - margin.right,
height = containerHeight - margin.top - margin.bottom;
const dimensions = {margin: margin, width: width, height: height};
/*useEffect( () => {
console.log("tlc", document.getElementById("timelineContainer").clientWidth);
},[] )*/
/*useEffect(() => {
//svg dimensions
const containerHeight = parseInt(select("#timelineContainer").style("height")),
containerWidth = parseInt(select("#timelineContainer").style("width"));
const width = containerWidth - margin.left - margin.right,
height = containerHeight - margin.top - margin.bottom;
svg.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
...deleted the rest, kept this for reference
*/
return (
<>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
......@@ -59,7 +22,7 @@ export const Timeline = (props) => {
</Grid>
<Grid id="timelineContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
<TimelineChart filteredTimelineData={filteredTimelineData} dimensions={dimensions} />
<TimelineChart filteredTimelineData={filteredTimelineData} dimensions={getDimensions("timelineContainer")} />
</Grid>
</Grid>
</>
......
......@@ -47,6 +47,8 @@ export const TimelineChart = (props) => {
//draw timeline everytime filteredTimelineData changes
useEffect( () => {
console.log("dims: ",props.dimensions.height)
if(props.filteredTimelineData&&props.dimensions.width)
drawTimeline(timelineData)
}, [props.filteredTimelineData] );
......
......@@ -27,6 +27,20 @@ const useDebounce = (value, delay) => {
return debouncedValue;
}
//get dimensions height and width from an element in the dom
const getDimensions = (domContainerID) => {
const timelineContainer = document.getElementById(domContainerID);
if(!timelineContainer) console.log(`DOM element with ID ${domContainerID} not found`, timelineContainer);
const margin = {top: 5, right: 20, left: 20, bottom: 30};
const containerHeight = timelineContainer?.clientHeight,
containerWidth = timelineContainer?.clientWidth;
const width = containerWidth - margin.left - margin.right,
height = containerHeight - margin.top - margin.bottom;
return {margin: margin, width: width, height: height};
}
//TIMELINE HELPER FUNCTIONS
......@@ -274,4 +288,15 @@ function binTimespanObjects( {timespanObjects, approxAmountBins} ) {
}
export { useDebounce, timelineAdapter, timelineMapper, groupByPeriods, newGroupByPeriods, transformTimelineData, getTimeRangeOfTimelineData, prepareHistogramData,binTimespanObjects };
\ No newline at end of file
export {
useDebounce,
timelineAdapter,
timelineMapper,
groupByPeriods,
newGroupByPeriods,
transformTimelineData,
getTimeRangeOfTimelineData,
prepareHistogramData,
binTimespanObjects,
getDimensions
};
\ No newline at end of file
Supports Markdown
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