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
5f794a23
Commit
5f794a23
authored
Sep 29, 2021
by
amarcic
Browse files
timeline, tooltip: display info dependent on bandwith; remove when mouse leaves svg
parent
a936ab0c
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/components/Timeline/TimelineChart.jsx
View file @
5f794a23
...
...
@@ -49,6 +49,7 @@ export const TimelineChart = (props) => {
const
{
data
,
svgRef
,
xDomain
}
=
timelineConfig
;
const
{
width
,
height
,
margin
}
=
dimensions
;
const
svg
=
select
(
svgRef
.
current
);
const
labelRenderLimit
=
4
;
//empty canvas in case no data is found by query
if
(
!
data
||
data
.
size
===
0
)
{
...
...
@@ -139,8 +140,7 @@ export const TimelineChart = (props) => {
.
attr
(
"
y
"
,
(
value
,
index
)
=>
yScale
(
periodIds
[
index
]))
.
attr
(
"
width
"
,
value
=>
Math
.
abs
(
xScale
(
value
.
periodSpan
?.[
0
])
-
xScale
(
value
.
periodSpan
?.[
1
]))
||
0
)
//add tool tips when bar height (bandwidth) is too low for readable results
if
(
yScale
.
bandwidth
()
<=
4
)
//display tooltip when mouse enters bar on chart
selectionEnteringAndUpdating
.
on
(
"
mouseenter
"
,
(
event
,
value
)
=>
{
svg
...
...
@@ -148,32 +148,46 @@ export const TimelineChart = (props) => {
.
data
([
value
])
.
join
(
"
text
"
)
.
attr
(
"
class
"
,
"
tooltip
"
)
.
text
(
`
${
value
.
periodName
}
:
${
value
.
items
.
length
}
item/s`
)
.
text
(
value
=>
yScale
.
bandwidth
()
<=
labelRenderLimit
?
`
${
value
.
periodName
}
:
${
value
.
items
.
length
}
item/s`
:
`
${
value
.
items
.
length
}
items/s`
)
.
attr
(
"
text-anchor
"
,
"
middle
"
)
.
attr
(
"
x
"
,
value
=>
xScale
(
value
.
periodSpan
?.[
0
]))
.
attr
(
"
y
"
,
value
=>
yScale
(
value
.
periodId
)
+
yScale
.
bandwidth
()
/*+margin.top*/
)
});
//remove tooltips when mouse leaves the svg
svg
.
on
(
"
mouseleave
"
,
()
=>
{
svg
.
selectAll
(
"
.tooltip
"
)
.
remove
()
}
)
//add labels to the bars (when bandwith is heigh enough for readable labels)
//todo: check if all
if
(
yScale
.
bandwidth
()
>
4
)
selectionLabels
.
enter
()
.
append
(
"
text
"
)
.
attr
(
"
class
"
,
"
label
"
)
.
attr
(
"
x
"
,
value
=>
xScale
(
value
.
periodSpan
?.[
0
]))
.
attr
(
"
y
"
,
value
=>
yScale
(
value
.
periodId
))
.
text
(
value
=>
value
.
periodName
);
const
addLabels
=
()
=>
{
if
(
yScale
.
bandwidth
()
>
labelRenderLimit
)
{
selectionLabels
.
enter
()
.
append
(
"
text
"
)
.
attr
(
"
class
"
,
"
label
"
)
.
attr
(
"
x
"
,
value
=>
xScale
(
value
.
periodSpan
?.[
0
]))
.
attr
(
"
y
"
,
value
=>
yScale
(
value
.
periodId
))
.
text
(
value
=>
value
.
periodName
);
//position labels
selectionLabels
.
attr
(
"
x
"
,
value
=>
xScale
(
value
.
periodSpan
?.[
0
]))
.
attr
(
"
y
"
,
value
=>
yScale
(
value
.
periodId
))
//position labels
selectionLabels
.
attr
(
"
x
"
,
value
=>
xScale
(
value
.
periodSpan
?.[
0
]))
.
attr
(
"
y
"
,
value
=>
yScale
(
value
.
periodId
))
//remove labels on exit
selectionLabels
.
exit
()
.
remove
()
//remove labels on exit
selectionLabels
.
exit
()
.
remove
()
}
}
addLabels
();
//apply zoom
initZoom
();
...
...
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