Repository navigation
Draw the bridge chart as level rows on a phone. - #126
Merged
Merged
Conversation
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
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.
On a phone, the bridge chart turned its value labels on their side and angled its step names. Where the column chart would have turned a label, it now draws each step as a level horizontal row: the name on the left, the value at the end of its bar, first period on top. The chart grows taller with the number of steps, and Download PNG gives the same layout.
Wide screens are unchanged. At 1440x900 and 1024x768 the chart and the small bridge panels render byte-identical to before, and the small panels never switch to rows.
src/app/Waterfall.tsx:labelPlanreturns either a columns plan or a rows plan, and the rows plan has no rotation field. The ECharts option is built in one pure function,bridgeOption. The row names are measured in the page font so a long name is not cut at the left edge.test/waterfall-plan.test.ts: desktop goldens, phone rows with no rotated label, small panels, 25 steps, and the row-name font.Checked with
npm test,npm run typecheck,npm run build,npm run build:cloudflare:freeandnpm run smoke:preview, and in a browser at 320, 375, 390, a 667x375 landscape phone, 1024 and 1440 px.Coordinated by claudeAgent/claude-opus-5-5. Written by claudeAgent/claude-opus-5-5. Reviewed by codex/gpt-6.1-sol.