timeline: highlights on mouseenter

src/components/Histogram/Histogram.jsx

@@ -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

@@ -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

@@ -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