Commit 5d504c5f authored by amarcic's avatar amarcic
Browse files

fixed initial problems of data flow

parent 00220376
......@@ -12,13 +12,15 @@ export const Timeline = (props) => {
const classes = useStyles();
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 of container
const containerHeight = 200,//parseInt(select("#timelineContainer").style("height")),
containerWidth = 400;//parseInt(select("#timelineContainer").style("width"));
//todo: read current dimensions of container in way compatible with react
const containerHeight = document.getElementById("#timelineContainer")?.style.height!==undefined&&parseInt(select("#timelineContainer").style("height"))||180,
containerWidth = document.getElementById("#timelineContainer")?.style.width!==undefined&&parseInt(select("#timelineContainer").style("width"))||530;
const width = containerWidth - margin.left - margin.right,
height = containerHeight - margin.top - margin.bottom;
......@@ -203,7 +205,7 @@ export const Timeline = (props) => {
</Grid>
<Grid id="timelineContainer" className={classes.gridContent} item container direction="column" spacing={2}>
<Grid item>
<TimelineChart timelineObjectsData={timelineObjectsData} dimensions={dimensions} />
<TimelineChart filteredTimelineData={filteredTimelineData} dimensions={dimensions} />
{/*<svg ref={svgRef}>
<g className="bars">
<g className="xAxis"></g>
......
......@@ -10,18 +10,17 @@ export const TimelineChart = (props) => {
const classes = useStyles();
const { timelineObjectsData } = props;
const filteredTimelineData = props.filteredTimelineData;
const { width, height, margin } = props.dimensions;
const filteredTimelineData = timelineObjectsData&&timelineObjectsData.filter( datapoint => datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
//const data = newGroupByPeriods(filteredTimelineData);
const xDomain = getTimeRangeOfTimelineData(timelineObjectsData,"period");
const data = newGroupByPeriods(filteredTimelineData);
const xDomain = getTimeRangeOfTimelineData(filteredTimelineData,"period");
console.log(timelineObjectsData);
console.log(filteredTimelineData);
//console.log(timelineObjectsData);
console.log("filteredTimelineData: ", filteredTimelineData);
const svgRef = useRef();
const [data, setData] = useState();
//const [data, setData] = useState();
//svg dimensions
/*const margin = {top: 5, right: 20, left: 20, bottom: 30};
......@@ -34,15 +33,15 @@ export const TimelineChart = (props) => {
//const svg = select(svgRef.current);
useEffect( () => {
if (timelineObjectsData||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.timelineObjectsData]
)
}, [props.filteredTimelineData]
)*/
//setting up the svg after first render
useEffect(() => {
......@@ -57,14 +56,14 @@ export const TimelineChart = (props) => {
useEffect( () => {
drawTimeline()
}, [data] );
}, [props.filteredTimelineData] );
const drawTimeline = () => {
if(!data||data.size===0) return;
console.log([...data.values()]);
const svg = select(svgRef.current);
const selection = svg.select("timelineGroup").selectAll("rect").data([...data.values()], data => data.periodId);
const selection = svg.select(".timelineGroup").selectAll("rect").data([...data.values()], data => data.periodId);
console.log("initial selection", selection);
const periodIds = [...data.keys()];
//scale for the x axis
......
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