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
4932c684
Commit
4932c684
authored
Oct 05, 2021
by
amarcic
Browse files
timeline: highlights on mouseenter
parent
254c096e
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/components/Histogram/Histogram.jsx
View file @
4932c684
...
...
@@ -10,11 +10,11 @@ export const Histogram = (props) => {
const
classes
=
useStyles
();
//
console.log(props.timelineData);
console
.
log
(
props
.
timelineData
);
const
preparedData
=
prepareHistogramData
(
props
.
timelineData
)?.
filter
(
e
=>
e
&&
e
);
//console.log(preparedData);
//console.log(
"data prepared for histogram: ",
preparedData);
const
binnedData
=
binTimespanObjects
({
timespanObjects
:
preparedData
,
approxAmountBins
:
20
});
//
console.log(binnedData);
console
.
log
(
"
data binned for histogram:
"
,
binnedData
);
const
svgRef
=
useRef
();
//const [data, setData] = useState(binnedData);
...
...
@@ -36,8 +36,6 @@ export const Histogram = (props) => {
//remove previously rendered histogram bars in the case there is no current data from the current search
if
(
!
binnedData
||
preparedData
.
length
===
0
)
{
svg
.
select
(
"
.bars
"
)
//.append("text")
//.text("hier gibt es nichts zu sehen")
.
selectAll
(
"
.bar
"
).
remove
()
}
else
{
//maximum value on y axis
...
...
@@ -55,12 +53,6 @@ export const Histogram = (props) => {
.
domain
([
0
,
maxYValue
])
.
range
([
height
,
0
]);
/* unused color scale
const colorScale = scaleLinear()
.domain([0,maxYValue])
.range(["#69b3a2","red"]);
*/
//add x axis to svg and rotate labels
//todo: labels should explicitly convey the span of years the bin covers, not just the lower threshold
svg
.
select
(
"
.xAxis
"
)
...
...
@@ -74,6 +66,8 @@ export const Histogram = (props) => {
svg
.
select
(
"
.yAxis
"
)
.
call
(
axisLeft
(
y
));
//color scale;
//todo: remove; makes no sense to visualize the same thing in two ways
const
colorScale
=
scaleQuantize
()
.
domain
([
0
,
maxYValue
])
.
range
([
"
#5AE6BA
"
,
"
#4BC8A3
"
,
"
#3EAA8C
"
,
"
#318D75
"
,
"
#25725F
"
]);
...
...
@@ -99,12 +93,11 @@ export const Histogram = (props) => {
.
data
([
value
])
.
join
(
"
text
"
)
.
attr
(
"
class
"
,
"
tooltip
"
)
.
text
(
`
${
value
.
lower
}
-
${
value
.
upper
}
:
${
value
.
values
.
length
}
`
)
.
text
(
`
${
value
.
lower
}
-
${
value
.
upper
}
:
${
value
.
values
.
length
}
${
t
(
"
Item
"
,
{
count
:
value
.
values
.
length
})}
`
)
.
attr
(
"
text-anchor
"
,
"
middle
"
)
.
transition
()
.
attr
(
"
x
"
,
x
(
value
.
lower
)
+
x
.
bandwidth
())
.
attr
(
"
y
"
,
y
(
value
.
values
.
length
)
+
3
)
.
attr
(
"
y
"
,
y
(
value
.
values
.
length
)
+
3
);
})
//.on("mouseleave", () => svg.select(".tooltip").remove())
.
transition
()
...
...
src/components/Timeline/TimelineChart.jsx
View file @
4932c684
...
...
@@ -14,7 +14,7 @@ export const TimelineChart = (props) => {
console
.
log
(
"
dimensions
"
,
props
.
dimensions
)
//todo: make highlighted global state?
let
highlighted
=
{
objects
:
[],
objects
:
[
"
1080824
"
,
"
1086070
"
],
periods
:
[],
locations
:
[]
};
...
...
@@ -180,12 +180,23 @@ 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
)
.
attr
(
"
fill
"
,
value
=>
colorScale
(
value
.
items
.
length
))
.
attr
(
"
stroke
"
,
value
=>
highlighted
.
objects
.
some
(
id
=>
value
.
items
.
map
(
item
=>
item
.
id
).
indexOf
(
id
)
>
-
1
)
?
"
black
"
:
"
red
"
)
//display tooltip when mouse enters bar on chart
selectionEnteringAndUpdating
.
on
(
"
mouseenter
"
,
(
event
,
value
)
=>
{
select
(
event
.
currentTarget
)
.
attr
(
"
id
"
,
"
mouse-target
"
)
.
on
(
"
mouseleave
"
,
()
=>
{
select
(
"
#mouse-target
"
)
.
attr
(
"
id
"
,
null
)
})
highlighted
.
objects
=
value
.
items
.
map
(
item
=>
item
.
id
);
//console.log("high: ", highlighted)
svg
.
selectAll
(
"
.tooltip
"
)
.
data
([
value
])
...
...
src/index.css
View file @
4932c684
...
...
@@ -19,4 +19,7 @@
.marker-cluster-large
div
{
background-color
:
#1c9489
!important
;
color
:
#fff
!important
;
}
#mouse-target
{
stroke
:
blue
}
\ No newline at end of file
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