Add hovered value label for Histogram plot

[dvdkouril]

The ValueCounts plot shows what the user is hovering before making a selection. This is a quick implementation of a similar behavior for the histogram.

There's a bunch of stuff that could be improved: (I might give it a try before closing this PR)

• Give the label a background to prevent collision with the min/max tick labels
  • AFAIK, since the labels are done through an SVG, you need to implement this through a rect that matches the text's bounding box
• label following the cursor during selection dragging
  • also bit complicated due to the events captured by mosaic interactor
• better value formatting

[manzt]

Thanks so much for the contribution! I really want to have this feature and have just been too lazy/wasn't totally sure how to do it so thanks for taking a stab.

just left a couple a minor comments as we figure out the rest.

[manzt]

Would it be useful to reuse tickFormatterForBins(type, bins) to format the hover value? We probably don't need all the sigfigs... also not sure how dates would show up with ~s formatter.

[dvdkouril]

Gotcha, I was wondering about a more robust way to format the different numbers. Exchanged d3.format for tickFormatterForBins, but I'm probably missing something, as the formatting doesn't improve much.

[manzt]

It seems like TODO 2 (mosaic capturing interactions) might be a little tricky to sort out, and I don't want to block this from merging.

I need to think about 1 some more because I'm not totally sure how I'd do that either :) Maybe we append a rect to the tick group and set the background.... we would need to resize the width depending on width of the text (DOM/div would be nice here).

For 3, you can have a look at how I formatted the ticks and we could pick something with less sigfigs but more detail than the axis bounds.

[dvdkouril]

Label background should be done.

Agree that doing the dragging effect the way we'd like might need some further investigation.

Further feedback regarding the code is more than welcome!

[manzt]

Awesome!! I think this is looking great. The formatting is perfectly fine for now and we can also explore other options later to make better defaults.

Overall I wonder about making the hoveredTick more DRY, but totally fine with copying and pasting for now because this is so clear. One idea might be two wrap all of this in a function outside the main body?

It seems like it would be easy enough to extract into some function that creates the element, appends to the svg. You could even return the signal.

function addValueHoverIndicator(svg: d3.Selection<...>, { x, ...otherOptions }): Signal<number | undefined> { ... }

[manzt]

can probably remove.

[dvdkouril]

Do you mean the commented out d3.format line? Or also the comment about hovered signal?

[manzt]

Sorry just the unused code.

[manzt]

Also, I had a look into d3.format. I think we probably want something like d3.format(".2s") (two sigfigs) for numbers and whatever tickFormatterForBins(type, bins) is for dates.

Honestly, I wonder if just refactoring tickFormatterForBins to formatterForTimeBins(bins) and then handling the number cases in this file would be more clear. E.g.,

const fmt = typeof hovering.value === "number" ? d3.format(".3s") : formatterForTimeBins(bins);