Skip to content
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

chore(dw): 5292 - improve chart look and feel #2762

Merged

Conversation

gitdallas
Copy link
Contributor

@gitdallas gitdallas commented Apr 30, 2024

closes: https://issues.redhat.com/browse/RHOAIENG-5292

Description

improve look and feel of charts. includes:

  • keeping them from growing huge when on ultra wide screens or getting too small on narrow screens
  • usage chart legend text will grow as width allows
  • requested usage charts will grow horizontally without also growing vertically
  • status overview chart centered as it will always be top and single, donut size larger to maintain the text within better
  • fix tooltips not to show on top of the usage donut items

Screens (you'll have to expand images to really see the difference in how the charts sizing compares to the size of the text outside of the charts)

Status Overview before:
image
image

Status Overview after:
wide2
small2

Project metrics before:
image
image

Project metrics after:
small1
wide1

Usage tooltips:
image

How Has This Been Tested?

tested locally, existing tests still pass

Test Impact

none

Request review criteria:

make sure charts look good and handle resize well

Self checklist (all need to be checked):

  • The developer has manually tested the changes and verified that the changes work
  • Commits have been squashed into descriptive, self-contained units of work (e.g. 'WIP' and 'Implements feedback' style messages have been removed)
  • Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
  • The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

  • Included any necessary screenshots or gifs if it was a UI change.
  • Included tags to the UX team if it was a UI/UX change (find relevant UX in the SMEs section).

After the PR is posted & before it merges:

  • The developer has tested their solution on a cluster by using the image produced by the PR to main

@mturley
Copy link
Contributor

mturley commented Apr 30, 2024

PTAL @xianli123 @cfullam1 @yannnz

Copy link
Contributor

@mturley mturley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may be worth returning to see if we can avoid magic numbers for width/height, but they may be unavoidable. Nice work, LGTM

@openshift-ci openshift-ci bot added the lgtm label Apr 30, 2024
@openshift-ci openshift-ci bot removed the lgtm label May 1, 2024
@gitdallas gitdallas added the lgtm label May 1, 2024
@openshift-ci openshift-ci bot removed the lgtm label May 3, 2024
@openshift-merge-robot openshift-merge-robot added the needs-rebase PR needs to be rebased label May 3, 2024
Signed-off-by: gitdallas <[email protected]>

feat(dw): requested resource charts adjust width

Signed-off-by: gitdallas <[email protected]>

feat(dw): improve top usage charts

Signed-off-by: gitdallas <[email protected]>

feat(dw): improve status overview chart

Signed-off-by: gitdallas <[email protected]>

lints

Signed-off-by: gitdallas <[email protected]>

feat(dw): usage chart tooltip better placement

Signed-off-by: gitdallas <[email protected]>
@openshift-merge-robot openshift-merge-robot removed the needs-rebase PR needs to be rebased label May 3, 2024
@Gkrumbach07
Copy link
Member

tested this on mocked data and the graphs look good. not testing on live data as this only is changing how things are rendered

/approve

Copy link
Contributor

openshift-ci bot commented May 3, 2024

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Gkrumbach07, mturley

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci openshift-ci bot added the approved label May 3, 2024
@Gkrumbach07
Copy link
Member

/lgtm

@openshift-ci openshift-ci bot added the lgtm label May 3, 2024
@openshift-merge-bot openshift-merge-bot bot merged commit 0caa9d3 into opendatahub-io:main May 3, 2024
6 checks passed
@gitdallas gitdallas deleted the chore/dw-improve-charts branch May 3, 2024 20:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants