fix(price-chart): fit the day on a phone, and stop clipping the axis - #838
Conversation
Fredrik, on his own box: "elpriserna kan vara lite mer kompact den är väldigt lång (hög)". Measured at 375 px, the chart took 57% of the viewport before the timeline under it began. The phone viewBox is now 440 tall instead of 720 when the chart is fed rather than fetching — 247 px down to 151 px, 45% of the viewport. Keyed on the existing `fed` attribute, so the box's own dashboard is untouched; W stays at 1000, so every font size and padding is in viewBox units and paints at exactly the pixel size it did before. Nothing was shrunk to make room. The left gutter is measured now rather than guessed. At phone width the bottom y-axis label rendered as ".00 ö" with the leading zero clipped, which is a function of the padding and the axis font size alone and so did it on the dashboard too. The tick block moved above the geometry because the gutter cannot be computed without the label strings. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 72615dac18
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| // lowers the bars' ceiling and changes the size of nothing else: the | ||
| // axis figures, the NOW pill and the peak markers all come out at the | ||
| // same pixel size they do at 720. | ||
| const H = small ? (this.hasAttribute("fed") ? 440 : 720) : 240; |
There was a problem hiding this comment.
When a fed phone chart contains a narrow price spike—for example, two expensive slots in a 48-hour window—the mean is close to the minimum, and reducing plotH from 654 to 374 viewBox units moves those two tick baselines from about 25 units apart to about 14 while both retain a 27-unit font size. The mean and minimum labels therefore overlap for realistic spiky price series; add tick-collision handling or retain enough vertical plot height for these labels.
Useful? React with 👍 / 👎.
1 participant
Fredrik, testing on his own box: "elpriserna kan vara lite mer kompact den är väldigt lång (hög)".
Measured, not adjusted by eye
At a 375×812 viewport, the chart is 343 px wide on the Plan screen:
0 0 1000 7200 0 1000 440Only the phone height moves, and only when the chart is
fed— the attribute that already means "the app supplied the data". The box's own dashboard is untouched.Wstays 1000, so every font size and padding is in viewBox units and paints at exactly the pixel size it did before: nothing was shrunk to make room, and the app's font sizes still comparetoEqualthe dashboard's in the test.The clipped axis label
At phone width the bottom y-axis figure rendered as
.00 ö— the leading zero clipped by the SVG's left padding. It is a function ofpad.land the axis font size alone, so the dashboard did it too. The gutter is now measured from the longest label rather than guessed, which is why the tick block moved above the geometry: the gutter cannot be computed without the label strings, and the labels cannot be placed without the gutter.Notes for review
🤖 Generated with Claude Code