Fix funnels time to convert dashboard item height

[alexkim205]

Changes

Continues work on #5253

Checklist

• All querysets/queries filter by Organization, by Team, and by User
• Django backend tests
• Jest frontend tests
• Cypress end-to-end tests
• Migrations are safe to run at scale (e.g. PostHog Cloud) – present proof if not obvious
• New/changed UI is decent on smartphones (viewport width around 360px)

[paolodamico]

Dashboard item still not rendering for me.

Insight (with vanilla demo data): http://localhost:8000/insights?insight=FUNNELS&events=%5B%7B%22id%22%3A%22%24pageview%22%2C%22math%22%3Anull%2C%22name%22%3A%22%24pageview%22%2C%22type%22%3A%22events%22%2C%22order%22%3A0%2C%22properties%22%3A%5B%5D%2C%22math_property%22%3Anull%7D%2C%7B%22id%22%3A%22%24pageview%22%2C%22math%22%3Anull%2C%22name%22%3A%22%24pageview%22%2C%22type%22%3A%22events%22%2C%22order%22%3A1%2C%22properties%22%3A%5B%5D%2C%22math_property%22%3Anull%7D%2C%7B%22id%22%3A%22rated_app%22%2C%22math%22%3Anull%2C%22name%22%3A%22rated_app%22%2C%22type%22%3A%22events%22%2C%22order%22%3A2%2C%22properties%22%3A%5B%5D%2C%22math_property%22%3Anull%7D%5D&display=FunnelViz&interval=day&funnel_viz_type=time_to_convert#fromItem=16&fromItemName=Time%20to%20convert&fromDashboard=5

[alexkim205]

Dashboard item still not rendering for me.

Found the bug - looks like it was due to a cachedResults not being passed down correctly from DashboardItem into funnelLogic for our time conversion results. Made the fix!

[paolodamico]

Rendering better but not quite there yet, bar is not appearing (even after refreshing results, hard refreshing page, ...).

[alexkim205]

Hmm strange, it seems to be working on my end. Can you chck the network request to make sure you're not getting null/empty time values?

[alexkim205]

Can't seem to reproduce it :/

Screen.Recording.2021-07-21.at.11.13.29.AM.mov

[mariusandra]

Can confirm I have the same issue @paolodamico reported. Will see what can be done.

[mariusandra]

Weird stuff is happening, probably connected to D3 that I'm not able to immediately understand.

Even though the createRoundedRectPath gets called 4 times here and with legit params (height > 0), only three <path> elements end up on the screen.

[mariusandra]

This works now. I had to:

1. only show the graph if width/height are found for its container (setting the defaults even if just once resulted in weird aspect rations)
2. completely re-render the entire component when data changes (here from [] to [actual data]), otherwise a path element is not updated.

I'll merge this now since the fix seems to work fine. @alexkim205 , for a proper fix though, try getting a funnel that has any value in the first bar and then seeing that on a dashboard.

[alexkim205]

Weird stuff is happening, probably connected to D3 that I'm not able to immediately understand.

Even though the createRoundedRectPath gets called 4 times here and with legit params (height > 0), only three <path> elements end up on the screen.

Thanks for the details, this sounds like a problem with where D3 paints things. The three paths there seem to belong to the x-axis and I have it now so that the four bars should be painted in the root element. I'll put out a more permanent fix where I bring bar path elements into a separate canvas so that D3 knows exactly where to put them without overwriting/deleting anything (which I suspect is happening).