fix(frontend): keep usage chart date labels in bounds - #730
Merged
Conversation
The usage chart centered the final x-axis date on the plot's right edge while reserving only 8px after the plot. Month-day labels such as "Jun 18" extend farther than that, so the SVG viewBox clipped the rightmost label in the usage view. Reserve a named right gutter for x-axis labels and subtract it from the plot width so the SVG remains the same overall size while the final tick lands inside the drawable area. Add a Vitest regression that drives the chart to the reported wide layout and checks the label bounds. The design workflow also now has product context and live-mode config for this Vite frontend.
roborev: Combined Review (
|
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
2 participants
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.
Summary
Fixes the usage page cost-over-time chart so the final date label stays inside the SVG bounds instead of being clipped at the right edge.
The chart previously centered the last x-axis date on the plot boundary while reserving only an 8px right gutter, which was not enough for month-day labels such as
Jun 18. The chart now has a named right-side x-label gutter and subtracts that gutter from the plot width, preserving the overall SVG size while moving the last tick inward.The regression coverage mounts the usage chart at the wide layout that exposed the clipping and checks that the rightmost label fits inside the viewBox. Reviewers should look at
CostTimeSeriesChart.sveltefor the layout change andCostTimeSeriesChart.test.tsfor the focused coverage.This also adds the product context and live-mode config files required by the frontend design workflow used for the fix.