fix(insights): tidy funnel steps bar chart layout#61194
Merged
Conversation
Reduce the bar drop shadow, fix the chart so wide funnels scroll horizontally with the legend instead of squishing, and align each legend section under its bar. Tighten per-step width so more steps fit on screen with less empty space. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Size Change: 0 B Total Size: 81 MB ℹ️ View Unchanged
|
Contributor
Prompt To Fix All With AIFix the following 1 code review issue. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 1
products/product_analytics/frontend/insights/funnels/FunnelStepsBarChart/FunnelStepsBarChart.tsx:20-22
`STEP_BAR_WIDTH_PX` is used exclusively to size the legend section `div`, not to size a bar. In a grouped chart the actual bar pixel width is `bandwidth / numSeries`, whereas this value is the approximate group bandwidth (one column's worth of bars). A name like `STEP_LEGEND_WIDTH_PX` (or `STEP_BAND_WIDTH_PX`) would match its only use site and avoid misleading future readers who might assume it maps to an individual bar.
```suggestion
const STEP_WIDTH_PX = 240
const BAND_PADDING = 0.04
const STEP_LEGEND_WIDTH_PX = STEP_WIDTH_PX * (1 - BAND_PADDING)
```
Reviews (1): Last reviewed commit: "fix(insights): tidy funnel steps bar cha..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Comment on lines
+20
to
+22
| const STEP_WIDTH_PX = 240 | ||
| const BAND_PADDING = 0.04 | ||
| const STEP_BAR_WIDTH_PX = STEP_WIDTH_PX * (1 - BAND_PADDING) |
Contributor
There was a problem hiding this comment.
STEP_BAR_WIDTH_PX is used exclusively to size the legend section div, not to size a bar. In a grouped chart the actual bar pixel width is bandwidth / numSeries, whereas this value is the approximate group bandwidth (one column's worth of bars). A name like STEP_LEGEND_WIDTH_PX (or STEP_BAND_WIDTH_PX) would match its only use site and avoid misleading future readers who might assume it maps to an individual bar.
Suggested change
| const STEP_WIDTH_PX = 240 | |
| const BAND_PADDING = 0.04 | |
| const STEP_BAR_WIDTH_PX = STEP_WIDTH_PX * (1 - BAND_PADDING) | |
| const STEP_WIDTH_PX = 240 | |
| const BAND_PADDING = 0.04 | |
| const STEP_LEGEND_WIDTH_PX = STEP_WIDTH_PX * (1 - BAND_PADDING) |
Prompt To Fix With AI
This is a comment left during a code review.
Path: products/product_analytics/frontend/insights/funnels/FunnelStepsBarChart/FunnelStepsBarChart.tsx
Line: 20-22
Comment:
`STEP_BAR_WIDTH_PX` is used exclusively to size the legend section `div`, not to size a bar. In a grouped chart the actual bar pixel width is `bandwidth / numSeries`, whereas this value is the approximate group bandwidth (one column's worth of bars). A name like `STEP_LEGEND_WIDTH_PX` (or `STEP_BAND_WIDTH_PX`) would match its only use site and avoid misleading future readers who might assume it maps to an individual bar.
```suggestion
const STEP_WIDTH_PX = 240
const BAND_PADDING = 0.04
const STEP_LEGEND_WIDTH_PX = STEP_WIDTH_PX * (1 - BAND_PADDING)
```
How can I resolve this? If you propose a fix, please make it concise.Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Contributor
Author
There was a problem hiding this comment.
Good catch — renamed to STEP_BAND_WIDTH_PX in e31d015. It's the band/group footprint that the legend section is sized to match, so BAND reads truer than LEGEND (and definitely truer than BAR, since an individual grouped bar is bandwidth / numSeries).
- Rename STEP_BAR_WIDTH_PX to STEP_BAND_WIDTH_PX; it sizes the legend section to the band footprint, not an individual grouped bar's width
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
|
✅ Visual changes approved by @sampennington — baseline updated in 6 changed. |
4 updated Run: 758c3c02-c5e0-4fcc-97b3-323701e428de Co-authored-by: sampennington <56024559+sampennington@users.noreply.github.com>
github-actions
Bot
dismissed
their stale review
New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.
Contributor
|
🎭 Playwright report
These issues are not necessarily caused by your changes. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The new funnel steps bar chart had a few visual rough edges before going live: the bar drop shadow was heavy, wide funnels (5+ steps) squished the bars to fit the viewport while the legend below overflowed and scrolled — so the bars and their legend sections didn't line up — and each step column was wide enough that bars looked fat and legend sections had a lot of empty space, limiting how many steps fit on screen.
Changes
shrink-0) so it holds its width and scrolls with the chart.No changes outside
FunnelStepsBarChart.tsx.How did you test this code?
I'm an agent. This is a frontend layout change with no direct unit tests; the existing Storybook story (
FunnelStepsBarChart.stories.tsx) feeds visual-regression snapshots which will cover the rendered result. I have not manually verified it in a browser — the layout was iterated against screenshots shared during the session, but the final per-step width should be confirmed visually (in particular that the longest legend line doesn't wrap at 240px).👉 Stay up-to-date with PostHog coding conventions for a smoother review.
Automatic notifications
Docs update
🤖 Agent context
Authored with Claude Code (Opus 4.8). Iterated the layout against screenshots the author shared at each step.
Notable decisions:
bandAlign: 'center' | 'start'option to the sharedhog-chartsBarChartto left-align bars under a left-aligned legend. The author flagged this as avoidable API growth, so it was reverted entirely — the lib is untouched. Instead, bars use the default centered layout and each legend section is centered under its bar (robust because a centered bar's center always equals its column center, regardless of series count).flex-shrinkcollapsed it to the viewport). Fixed withshrink-0on the legend.