fix: [M3-8872] - Table and Chart Legend Improvements

jaalah-akamai commented 1 week ago

Description 📝

We needed to reduce the spacing for our table headers to match our CDS as well as within our legend table.

Changes 🔄

Added a space between legend tooltip value and unit
Reduced the height of the table header across the board from 46 to 40 to match guidance from CDS
Removed additional padding for legends
Added ability to use built-in y-axis formatter

Target release date 🗓️

12/10

Preview 📷

Before	After

How to test 🧪

Reproduction steps

Observe style changes via prod and this branch
Linodes landing table
Linodes detail page has the network charts

Verification steps

Verify header changes look good across the board

As an Author, I have considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

[x] I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

[x] All unit tests are passing
[x] TypeScript compilation succeeded without errors
[x] Code passes all linting rules

jaalah-akamai commented 1 week ago

Will update branch soon...

github-actions[bot] commented 1 week ago

Coverage Report: ✅
Base Coverage: 86.83%
Current Coverage: 86.83%

linode-gh-bot commented 1 week ago

Cloud Manager UI test results

:small_red_triangle: 3 failing tests on test run #6 ↗︎

:x: Failing	:white_check_mark: Passing	:arrow_right_hook: Skipped	:clock1: Duration
`3 Failing`	`451 Passing`	`2 Skipped`	`111m 14s`

Details

Failing Tests
	Spec	Test
:x:	`linode-storage.spec.ts`	linode storage tab » delete disk
:x:	`linode-storage.spec.ts`	linode storage tab » add a disk
:x:	`linode-storage.spec.ts`	linode storage tab » resize disk

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/linode-storage.spec.ts,cypress/e2e/core/linodes/linode-storage.spec.ts,cypress/e2e/core/linodes/linode-storage.spec.ts"

nikhagra-akamai commented 6 days ago

@jaalah-akamai one thing seen in y-axis that for a very low max value when recharts generating all the y-axis ticks, some tick points are going to 4 decimal places. As you can see, values like 0.0075 or 0.0225 are not properly visible as y-axis tick. Can we add some kind of padding or formatter for the value? Screenshot 2024-11-26 at 3 01 17 PM

jaalah-akamai commented 6 days ago

I added the ability to use the built-in formatter, so you can apply whatever you need in that case.

cypress[bot] commented 6 days ago

Cloud Manager E2E Run #6886

Run Properties: Failed #6886 • afa6da9f35: fix: [M3-8872] - Table and Chart Legend Improvements (#11294)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Failed #6886`
Run duration	`30m 30s`
Commit	`afa6da9f35: fix: [M3-8872] - Table and Chart Legend Improvements (#11294)`
Committer	`Jaalah Ramos`
View all properties for this run ↗︎

Test results
Failures	`1`
Flaky	`2`
Pending	`2`
Skipped	`0`
Passing	`454`
View all changes introduced in this branch ↗︎

Tests for review

cypress/e2e/core/linodes/rebuild-linode.spec.ts • 1 failed test

View Output Video

Test		Artifacts
rebuild linode > rebuilds a linode from Account StackScript		`Screenshots` `Video`

linodes/switch-linode-state.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
switch linode state > powers off a linode from landing page		`Screenshots` `Video`

firewalls/migrate-linode-with-firewall.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
Migrate Linode With Firewall > migrates linode with firewall - real data		`Screenshots` `Video`

linode / manager