Dynamic chart Y axis width #2697
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
david-crespo
approved these changes
Feb 18, 2025
Collaborator
david-crespo
left a comment
david-crespo
left a comment
There was a problem hiding this comment.
Subtle, yet exquisite
david-crespo
added a commit
that referenced
this pull request
Feb 27, 2025
* Add stub of Disk Metrics using OxQL * Refactoring; getting chart working; needs better default situation * refacotrs; remove old DiskMetrics; add writes and flushes charts * initial stub for CPU metrics * file reorg * More CPU metrics, though we mgiht need to rethink the long-term plan * working group_by * Updates to routes to handle sub-tabs * Dropdown working on CPU charts * cleanup * more work on charts; networking * Standardize wrapper components * Reorder charts a bit * getting side tabs into place * Update side tab CSS * Consolidate SideTabs into legacy tabs, using props to control layout * refactoring; getting rollups working for disks and network interfaces * Pass pre-formed query string to metric component * Move date selector up a level, using useContext * Update routes in path-builder test * Small refactor to align approach to useState and dropdowns for network and disk metrics tabs * Add static values for metrics for testing and mock service worker * Removes TS guard that was a bit onerous; relying on casting now, though, which isn't great * Updated mock data for disks * small refactor before integrating Ben's PR * Refactoring chart logic * Add tests for OxQL charts * Better handle cumulative_u64 data with initial sum value * Instance metrics design tweaks (#2676) Co-authored-by: David Crespo <david.crespo@oxidecomputer.com> Co-authored-by: Charlie Park <charlie@oxidecomputer.com> * a little code cleanup * make getOxqlQuery args more generic and structured * view/copy oxql modal * inline oxql query modal, remove comment about showing query * NonEmptyArray whaaaaaaat * highlight oxql * Add 'More about OxQL queries' button/link to modal * test for rendered oxql in modal * Better link style for OxQL docs * slightly smaller text * clean up my weird half-finished metrics props change * CopyCode footer * handle no nics case on network metrics * small aria label fix * Add restriction to only turn on query reloading once initial data have succcessfully loaded in * Simplify CPU utilization tab * Metrics more actions (#2700) * OxQL metrics more actions * take CopyCodeModal refactor further, fix motion import * move oxql schema docs thing into links file --------- Co-authored-by: David Crespo <david.crespo@oxidecomputer.com> * tweak more actions menu copy one more time * Dynamic chart Y axis width (#2697) * Dynamic Y axis width * Remove spacing and make tick size/margin explicit * Need spacing on old cards * Updates, and better logic on utilization chart; still accounting for cpus count * Updates to incorporate nCPUs in utilization calculation * small refactor * Updated test for utilization * Move OxqlMetric files to own component directory * A few more tests * update import * tests are easier to make sense of when you can see all the data at once * Default to single state on CPU utiization tab; offer 'total' option * Update metrics schema URL * Metrics error & loading states (#2698) * Move some loaders to parent component * Update dropdown to cap at 24 hours and handle minimum mean_within * Use seconds when determining durations * remove intervalPicker until OxQL is faster * Less twitchy datepicker wrap * clean up chart loading states * init MetricsContext with null instead of dummy values * Update mock numbers so CPU utilization range is normal * use lazy imports in the routes * blarg lint * Clean up CPU charts * revert CpuStateMetric component * utils file tweaks, abstract slightly less * replace getUnit with explicit unit prop * use date-fns * use delay function for sleeps --------- Co-authored-by: Benjamin Leonard <benji@oxide.computer> Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>
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.
Seems like a small change but it makes them feel much more resolved in the container.
Comments explain it pretty well, but essentially we can figure out the container width by taking the width of a character – which we know – and adding the padding and tick stroke size. Recharts does not have a way of doing this natively.
It is possible to calculate the width of a string, given the string and the text using the canvas – which is dynamic of course but probably overkill in this instance. We might need to re-evaluate for mobile layouts eventually.
Before:
After:
