Skip to content

Conversation

david-crespo
Copy link
Collaborator

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

image

After

image

Copy link

vercel bot commented Mar 22, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
console ✅ Ready (Inspect) Visit Preview Mar 24, 2025 6:45pm

@david-crespo david-crespo changed the title Convert old charts use new style Convert old charts to new style Mar 22, 2025
@david-crespo david-crespo changed the base branch from main to metrics-help March 22, 2025 17:21
data: ChartDatum[] | undefined
title: string
width: number
height: number
Copy link
Collaborator Author

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 />}
Copy link
Collaborator Author

@david-crespo david-crespo Mar 22, 2025

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.

Base automatically changed from metrics-help to main March 22, 2025 22:59
* Tighten spacing and more consistent with other layouts

* Proper chart spacing on silo page
@david-crespo david-crespo enabled auto-merge (squash) March 24, 2025 18:45
@david-crespo david-crespo merged commit 549c266 into main Mar 24, 2025
7 checks passed
@david-crespo david-crespo deleted the chart-style branch March 24, 2025 18:55
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Apr 1, 2025
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
david-crespo added a commit to oxidecomputer/omicron that referenced this pull request Apr 1, 2025
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants