Commit 1e2bb415 authored by amarcic's avatar amarcic
Browse files

timeline, dimensions: fixed adjusting timeline to current grid dimensions

parent 7933f2c1
......@@ -9,10 +9,19 @@ export const Timeline = (props) => {
const { t, i18n } = useTranslation();
const classes = useStyles();
const [dimensions, setDimensions] = useState({width: 0, height: 0, margin: {top: 0, right: 0, left: 0, bottom: 0}});
const { timelineObjectsData } = props;
const filteredTimelineData = timelineObjectsData&&timelineObjectsData.filter( datapoint => datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
useEffect( () => {
let currentDimensions = getDimensions("timelineContainer");
if (currentDimensions&&currentDimensions.width!==dimensions?.width)
setDimensions(currentDimensions);
console.log("state dimensions", dimensions)
}, []);
return (
<>
<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
......@@ -22,7 +31,7 @@ export const Timeline = (props) => {
</Grid>
<Grid id="timelineContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
<TimelineChart filteredTimelineData={filteredTimelineData} dimensions={getDimensions("timelineContainer")} />
<TimelineChart filteredTimelineData={filteredTimelineData} dimensions={dimensions/*getDimensions("timelineContainer")*/} />
</Grid>
</Grid>
</>
......
import React, {useEffect, useRef, useState} from "react";
import { Card, Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
import { select, scaleBand, axisBottom, scaleLinear, zoom } from "d3";
//import {select, scaleBand, axisBottom, axisLeft, scaleLinear, max, min, ascending, descending} from "d3";
import {getTimeRangeOfTimelineData, newGroupByPeriods} from "../../utils";
export const TimelineChart = (props) => {
......@@ -24,16 +22,6 @@ export const TimelineChart = (props) => {
//console.log(timelineObjectsData);
console.log("filteredTimelineData: ", props.filteredTimelineData);
/*useEffect( () => {
if (filteredTimelineData) {
setData(newGroupByPeriods(filteredTimelineData));
//data&&data.size>0&&console.log([...data.values()].sort( (a,b) => a.periodSpan?.[0]-b.periodSpan?.[0] ));
}
//const byPeriodData = newGroupByPeriods(filteredTimelineData)
}, [props.filteredTimelineData]
)*/
//setting up the svg after first render
useEffect(() => {
console.log("width", width)
......@@ -47,15 +35,16 @@ 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] );
/*console.log("dims: ",props.dimensions.height)
if(props.filteredTimelineData&&props.dimensions.width)*/
drawTimeline(timelineData, props.dimensions)
}, [props.filteredTimelineData, props.dimensions] );
//todo: still depending on outer scope for height, width, margin
const drawTimeline = (timelineConfig) => {
const drawTimeline = (timelineConfig, dimensions) => {
const { data, svgRef, xDomain } = timelineConfig;
const { width, height } = dimensions;
const svg = select(svgRef.current);
if(!data||data.size===0) {
......@@ -65,9 +54,8 @@ export const TimelineChart = (props) => {
}
//console.log([...data.values()]);
const selection = svg.select(".timelineGroup").selectAll("rect").data([...data.values()], data => data.periodId);
console.log("initial selection", selection);
//console.log("initial selection", selection);
const selectionLabels = svg.select(".timelineGroup").selectAll(".label").data([...data.values()], data => data.periodId);
const periodIds = [...data.keys()];
......@@ -141,6 +129,10 @@ export const TimelineChart = (props) => {
console.log("selection - ", selection)
}
const updateTimeline = () => {
}
/*
useEffect(() => {
......
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