Updated screenshots:

Page-level

Before

After

Card

Before

After

This should be reviewable now. I put the new viz behind feature flag lemon-funnel-viz to avoid this PR getting even bigger. The remaining to-dos will be addressed in follow-up PRs.

What happens when the width of the step is larger than the width of the label? I feel like we need to base the sizing here on something consistent across steps. The chart feels broken because of the variable-width steps to me. It also would make it so steps with more verbose names could outcompete or displace adjacent steps.

@mariusandra I take it you mean "Looks like good code" or "Looks like fine code"… because technically this is "code" too:

function isEven(number) {
	if (number == 0) return true
	if (number == 1) return false
	if (number == 2) return true
	if (number == 3) return false
	if (number == 4) return true
	if (number == 5) return false
	if (number == 6) return true
	if (number == 7) return false
	if (number == 8) return true
	if (number == 9) return false
	if (number == 10) return true
}

@alexkim205 Thanks! Fixed both.

@clarkus Basically each step's column is as wide as its bars OR as wide as its label, whichever happens to be larger. I initially wanted to do equal width columns, but that's very tricky to pull off with table elements while also accommodating to longer step labels (i.e. not truncating them) and keeping the first axis labels columns well-sized, so I went for the current scheme. As a side effect, this also ensures we never use more space for a single step than necessary (which is useful in insight cards particularly). I see how it can be jarring though. I can keep tinkering with table to see what can be done, but at least it doesn't seem to be a worse situation than what we've got now anyway.

I'll merge this for now and keep sizing in mind for a follow-up. @clarkus If anything else is off, let me know.