Update design of tooltips

[corywatilo]

EDIT: This issue now encompasses only the UI/implementation for tooltips only. The main chart components are encompassed in #4758.

At @paolodamico's request, I put some thought into making graphs more visually appealing. After some research, I landed on this:

[paolodamico]

I absolutely love this!! CC @samwinslow @EDsCODE, what are your thoughts on this? We could add this next.

[samwinslow]

I don't think it would be too hard to add a gradient to the graph shape, but if we're changing it anyway, this library looks super cool: https://airbnb.io/visx/gallery — it's also very declarative in its code style.

[EDsCODE]

I think this would be a great improvement! The one thing I would anticipate is slightly tricky is the tooltip styling and maybe the vertical line on hover but I could be mistaken. (Just inferring from the limitations we have using chartjs).

One extra thing we could have a better visual of is this case when there are a ton of lines. We have the legend that allows you to toggle lines on and off but when you're hovering perhaps we should hide/grey out lines that aren't in focus?

[samwinslow]

Tooltips + vertical line actually seem pretty easy:

[EDsCODE]

Ohh if we're keen on changing libraries for sure

[samwinslow]

Sub-issue: #4344

[samwinslow]

Progress update: Managed to get this going without switching chart libraries!

TODO (somewhat of a note-to-self):

• Day format on axis labels & tooltip
• Icon on "Click" CTA
• Add PropertyKeyInfo so that tooltip doesn't show things like $pageview
• Bugfix overlapping chart series for "predicted" values — shows duplicate entries in tooltip
• Revert to small inline numbers
• Add Tags (Unique Users, Total [shown only if multiple series])
• Table revamp (separate issue)
• Max-height and scrollable box

[paolodamico]

Love this, looking great @samwinslow! Wonder if we can add the subtle background too with this library.

[samwinslow]

@corywatilo Do you have any advice for how to make this look better at a very high data density?

Eric suggested having each line isolate itself by reducing the opacity of the other lines on hover; but this isn't an ideal approach IMO because it kind of defeats the purpose of the scrubber bar, which is great for comparing data.

From user feedback, it was annoying to mouse over different specific areas of the screen such as individual points; having each line have a separate hover-scrubber interaction would introduce this same problem again.

For example, pretend all these datasets have different filters.

It starts looking ugly when more verbose filters are applied... would you mind mocking up a typography treatment with this in mind?

[paolodamico]

For starters I think we can simplify the text (e.g. "Pageview ($current_url ..."), I was actually going to work on an issue today just to work out how to improve that copy in a way that makes sense for non-technical users too. If you can give me a couple of hours here, might be able to help.

[samwinslow]

@paolodamico Just pushed another commit which makes the filter property keys human-readable; that part is pretty simple.

Previously I introduced the disableIcon prop for PropertyKeyInfo, so can render <PropertyKeyInfo disableIcon value={someString} /> and it will humanize the text if such a value is known.

I wonder if there's a better way to represent the string Event Title (Aggregation) (Key = Value, ...). Maybe antd Tag instead of parentheses?

[paolodamico]

Which branch/PR? But yeah, let me explore a little bit and get back to you on this.

[samwinslow]

Which branch/PR? But yeah, let me explore a little bit and get back to you on this.

4156-improved-graphs is the branch and 4156-new-graph-ui is the feature flag to enable.

[paolodamico]

Here's my stab at tooltips following the proposal on #4492 in terms of series naming conventions. I also account for the possibility of having a ton of different series in the same graph. Figma.

Simple breakdown

Multiple series

Multiple series with breakdown

[corywatilo]

Related: Mocked up a version with multiple plotted lines in #4514, each with a fill being a gradient using the primary color of the line. (Figma mock for reference)

Note: Probably use new line styles, not specific colors from this linked conceptual mock.

[samwinslow]

Screenshot showing tooltip and legend adjustments, including Series badge. Almost all of this can be reused regardless of charting library -- Check out branch 4156-improved-graphs and feature flag 4156-new-graph-ui!

[paolodamico]

Released FF right now for users only in PostHog Cloud: PostHog Team, Beta Users & 20% of user base.