Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
SPP 2143 Learning Through Connecting
ltc_website
Commits
1e2bb415
Commit
1e2bb415
authored
Aug 17, 2021
by
amarcic
Browse files
timeline, dimensions: fixed adjusting timeline to current grid dimensions
parent
7933f2c1
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/components/Timeline/Timeline.jsx
View file @
1e2bb415
...
...
@@ -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
>
</>
...
...
src/components/Timeline/TimelineChart.jsx
View file @
1e2bb415
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(() => {
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment