-
Notifications
You must be signed in to change notification settings - Fork 13
Convert old charts to new style #2762
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
data: ChartDatum[] | undefined | ||
title: string | ||
width: number | ||
height: number |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We were passing height and width at every callsite but it had no effect, probably because the ResponsiveContainer
was overriding it.
<div> | ||
<h2 className="flex items-center gap-1.5 px-3 text-mono-sm text-default"> | ||
{title} {unit && <span className="text-tertiary">({unit})</span>}{' '} | ||
{(inRange.isPending || beforeStart.isPending) && <Spinner />} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The loading state is handled inside the chart. The logic needs to be improved, but the loading state does show up for these charts.
92de8a2
to
fe6d11e
Compare
* Tighten spacing and more consistent with other layouts * Proper chart spacing on silo page
oxidecomputer/console@72e2f0c...f52f50c * [f52f50c7](oxidecomputer/console@f52f50c7) react 19.1 * [d0999667](oxidecomputer/console@d0999667) oxidecomputer/console#2773 * [e7bfb236](oxidecomputer/console@e7bfb236) oxidecomputer/console#2767 * [59e69764](oxidecomputer/console@59e69764) oxidecomputer/console#2768 * [44157459](oxidecomputer/console@44157459) oxidecomputer/console#2770 * [5a90b430](oxidecomputer/console@5a90b430) oxidecomputer/console#2769 * [c12696c0](oxidecomputer/console@c12696c0) make api-diff use latest generator * [5538906c](oxidecomputer/console@5538906c) oxidecomputer/console#2760 * [653ba4cb](oxidecomputer/console@653ba4cb) bump omicron for instance affinity groups list * [179f347f](oxidecomputer/console@179f347f) oxidecomputer/console#2766 * [dbaeb3d3](oxidecomputer/console@dbaeb3d3) oxidecomputer/console#2765 * [549c266e](oxidecomputer/console@549c266e) oxidecomputer/console#2762 * [d41ef17f](oxidecomputer/console@d41ef17f) oxidecomputer/console#2763 * [a5804f8f](oxidecomputer/console@a5804f8f) oxidecomputer/console#2761 * [fb2fdbec](oxidecomputer/console@fb2fdbec) oxidecomputer/console#2759 * [9de391c8](oxidecomputer/console@9de391c8) chore: playwright 1.51.1 came out like an hour later * [b49f70c0](oxidecomputer/console@b49f70c0) oxidecomputer/console#2757 * [3eb24d2d](oxidecomputer/console@3eb24d2d) chore: bump playwright to 1.51 * [f29e4ea9](oxidecomputer/console@f29e4ea9) chore: bump vite + plugins, vitest, msw * [0f3408d0](oxidecomputer/console@0f3408d0) chore: bump oxlint to 0.16 * [f9931e03](oxidecomputer/console@f9931e03) tools: probably fix ff test flake * [1015a805](oxidecomputer/console@1015a805) tools: bump client generator, turn on noUnusedParameters in tsconfig
oxidecomputer/console@72e2f0c...f52f50c * [f52f50c7](oxidecomputer/console@f52f50c7) react 19.1 * [d0999667](oxidecomputer/console@d0999667) oxidecomputer/console#2773 * [e7bfb236](oxidecomputer/console@e7bfb236) oxidecomputer/console#2767 * [59e69764](oxidecomputer/console@59e69764) oxidecomputer/console#2768 * [44157459](oxidecomputer/console@44157459) oxidecomputer/console#2770 * [5a90b430](oxidecomputer/console@5a90b430) oxidecomputer/console#2769 * [c12696c0](oxidecomputer/console@c12696c0) make api-diff use latest generator * [5538906c](oxidecomputer/console@5538906c) oxidecomputer/console#2760 * [653ba4cb](oxidecomputer/console@653ba4cb) bump omicron for instance affinity groups list * [179f347f](oxidecomputer/console@179f347f) oxidecomputer/console#2766 * [dbaeb3d3](oxidecomputer/console@dbaeb3d3) oxidecomputer/console#2765 * [549c266e](oxidecomputer/console@549c266e) oxidecomputer/console#2762 * [d41ef17f](oxidecomputer/console@d41ef17f) oxidecomputer/console#2763 * [a5804f8f](oxidecomputer/console@a5804f8f) oxidecomputer/console#2761 * [fb2fdbec](oxidecomputer/console@fb2fdbec) oxidecomputer/console#2759 * [9de391c8](oxidecomputer/console@9de391c8) chore: playwright 1.51.1 came out like an hour later * [b49f70c0](oxidecomputer/console@b49f70c0) oxidecomputer/console#2757 * [3eb24d2d](oxidecomputer/console@3eb24d2d) chore: bump playwright to 1.51 * [f29e4ea9](oxidecomputer/console@f29e4ea9) chore: bump vite + plugins, vitest, msw * [0f3408d0](oxidecomputer/console@0f3408d0) chore: bump oxlint to 0.16 * [f9931e03](oxidecomputer/console@f9931e03) tools: probably fix ff test flake * [1015a805](oxidecomputer/console@1015a805) tools: bump client generator, turn on noUnusedParameters in tsconfig
Looking at #2732, #2733, and #2737, I realized we'd benefit from simplifying the chart component, and one source of complexity was the fact that the non-OxQL system and silo utilization charts were styled differently. So here I bring them up to date with the new style and eliminate the props we were using to differentiate.
Before
After