upcoming: [M3-7301] - Replace Linode Network Transfer History chart with Recharts

[hana-akamai]

Description 📝

This PR is part of a bigger effort to replace chart.js with the more modern Recharts. As a first step, replace the Linode Network Transfer History chart.

Preview 📷

Before	After
before.mov	Screen.Recording.2023-11-29.at.4.34.17.PM.mov

How to test 🧪

Prerequisites

• Have a Linode that's been running for a while

Verification steps

• Go to the Network tab of a Linode that's been running for a while
• Confirm the updated UI and that there are no regressions in the graph, units, etc

As an Author I have considered 🤔

Check all that apply

• 👀 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

[bnussman-akamai]

This is awesome. I am very eager to get Chart.js out of here 🗑️

Can we improve the dark mode experience a bit?

[jdamore-linode]

Nice work @hana-linode, this is a nice improvement over Chart.js!

Functionality wise I don't see any issues; I played around with it using Chrome and Firefox (and tested using VoiceOver on both) and didn't catch any issues.

Besides the dark theme issues Banks pointed out, the only definite accessibility issue I’m seeing is the green "Public Outbound Traffic" text on the tooltip. In Prod this is black and bold -- the green doesn't pass WebAIM's contrast checker.

The only other thing that might be worth raising attention to is the animations. They look nice but are also kind of slow and easily triggered (by clicking the prev and next buttons, and by resizing the window, etc.). I'm wondering if it would be worthwhile to disable the animations using the prefers-reduced-motion media query (I'm not aware of anywhere else where we do this in Cloud, but I think it would be a nice thing to do).

[bnussman-akamai]

Dark mode looks much better now, but would it be possible for the tooltip to have a dark gray background with white text instead of a while background? I think that would look more fitting with our theme.

Hopefully we can do this without adding a ton of extra code. If we need to, we can define a custom component to use as the tooltip (https://github.com/bnussman/managernext/blob/main/src/linodes/Stats.tsx#L121-L132)

[carrillo-erik]

Nice, I really like the refreshed look of the chart. I tested the changes in mobile view and only noticed a small visual regression, however, it appears that the dates displayed to the user are also different.

OLD	NEW

[jdamore-linode]

Looks good @hana-linode!

[hana-akamai]

@carrillo-erik Updated x-axis intervals. Getting the dates to be exact is more complicated; I don't think it matters that they are the same bc the information is still correct, just a different date is displayed

[bnussman-akamai]

This is awesome!

I'd love to see the NodeBalancer graphs done next!

[coliu-akamai]

✅ confirmed no regressions in light mode
✅ confirmed no regressions in dark mode
✅ confirmed no regressions on other browsers (chrome, safari, firefox)

great work Hana!