Crosshair: Compatibility with Timeline

[mattp-]

the crosshair component as it stands today only operates on the x axis; this doesn't really make sense for a timeline; or at least it usually wont if you have multiple parallel items. having it be rotatable for the y axis would be useful.

[rokotyan]

Hi @mattp-

We have the horizontal version of Crosshair in our pipeline, it's not our highest priority though.

Can you please explain how would you like to use it with Timeline? We usually integrate them like this:

[mattp-]

hi there, yep that looks like what i was looking for. mainly I was actually just looking for a workaround for #103 to get my tooltip to appear. I thought I had it with crosshair until I realized it was not the right axis :)

[rokotyan]

@mattp- In that case, you'll need to set snapToData to false in Crosshair's config, and provide your own getCircles function for getting the position for the Crosshair circles. It's a bit tricky, but here is an example:

function findDataEntriesAt (x: number): SampleTimelineDatum[] {
  return data.filter(d => (d.time <= x) && ((d.time + d.duration) >= x))
}

function getCircles (x: number, data: SampleTimelineDatum[]): CrosshairCircle[] {
  return findDataEntriesAt(x).map((d, i) => ({
    y: 11 + i * 22 - scrollTop, // If your Timeline is scrollable you'll also need to store its current scrollTop position
    color: d.color,
  }))
}

// Optional: saving the scrollTop position and re-rendering the Crosshair
// Set this function via the `onScroll` config property of Timeline
function onScroll (top: number): void {
  setScrollTop(top)
  crosshairRef.component.render(0)
}