Commit 4932c684 authored by amarcic's avatar amarcic
Browse files

timeline: highlights on mouseenter

parent 254c096e
......@@ -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()
......
......@@ -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])
......
......@@ -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
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