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.

Sign up for GitHub

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

Jump to bottom

change: [M3-7735] - Improve Linode Graph X Axis Labels when viewing historic data #10186

Merged
merged 4 commits into from
Feb 14, 2024
Merged

change: [M3-7735] - Improve Linode Graph X Axis Labels when viewing historic data #10186

merged 4 commits into from
Feb 14, 2024

Conversation

bnussman-akamai
Copy link
Member

@bnussman-akamai bnussman-akamai commented Feb 13, 2024 •
edited
Loading

Description 📝

Updates the Linode Graph's X Axis to show days instead of hours on the x-axis when the user select a longer time period 📈

Preview 📷

Before After
Screenshot 2024-02-13 at 9 45 31 AM Screenshot 2024-02-13 at 9 45 21 AM

How to test 🧪

Prerequisites

  • Make sure you have the recharts flag on

Verification steps

  • Go to the Analytics tab of on a Linode's details page
  • Try viewing the last 30 days or longer of stats
  • Verify the X Axis is showing units in days instead of hours
  • Verify the X Axis is user friendly

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

@bnussman-akamai bnussman-akamai added the Recharts Effort to replace chartjs library label Feb 13, 2024
@bnussman-akamai bnussman-akamai self-assigned this Feb 13, 2024
@bnussman-akamai bnussman-akamai requested a review from a team as a code owner February 13, 2024 14:50
@bnussman-akamai bnussman-akamai requested review from carrillo-erik and abailly-akamai and removed request for a team February 13, 2024 14:50
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 13, 2024 •
edited
Loading

Coverage Report: ✅
Base Coverage: 81.26%
Current Coverage: 81.26%

mjac0bs
mjac0bs reviewed Feb 13, 2024
View reviewed changes
Copy link
Contributor

@mjac0bs mjac0bs left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Confirmed that I am seeing days instead of hours on the x-axis now when looking at historical (Last 30 Days) data, but the title of our internal ticket does mention fixing a discrepancy with units in the tooltip.

I am still seeing that for the IPv6 Network graph with b/s and units are in kb/s.
Screenshot 2024-02-13 at 2 08 44 PM

Edit: Same with the IPv4 Network graph with Private In/Out. Maybe we had a different ticket for this that I'm thinking of?

Recharts flag:

Screenshot 2024-02-13 at 2 19 39 PM

No feature flag:

Screenshot 2024-02-13 at 2 19 27 PM

packages/manager/src/features/Linodes/LinodesDetail/LinodeSummary/LinodeSummary.tsx
@@ -115,6 +115,8 @@ const LinodeSummary: React.FC<Props> = (props) => {
debouncedRefetchLinodeStats();
}, [windowWidth, windowHeight, debouncedRefetchLinodeStats]);

const xAxisTickFormat = isLast24Hours ? 'hh a' : 'LLL dd';
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the const here. Readability would be further improved with a short comment about what the tick formats mean in English.

@bnussman-akamai
Copy link
Member Author

bnussman-akamai commented Feb 14, 2024 •
edited
Loading

A seperate ticket M3-7758 was created for the networking units issue. I fixed the title of M3-7735! @mjac0bs

abailly-akamai
abailly-akamai approved these changes Feb 14, 2024
View reviewed changes
Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

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

Thanks! change verified

should Disk I/O show b/s in the legend (every other graph there shows the unit after the value
Screenshot 2024-02-14 at 10 07 57

hana-akamai
hana-akamai approved these changes Feb 14, 2024
View reviewed changes
Copy link
Contributor

@hana-akamai hana-akamai left a comment

Choose a reason for hiding this comment

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

Verified X Axis labels show days when a time period is greater than 24 hours 📈

@hana-akamai hana-akamai added the Approved Multiple approvals and ready to merge! label Feb 14, 2024
@bnussman-akamai @mjac0bs
Update packages/manager/src/features/Linodes/LinodesDetail/LinodeSumm…
cad9f20 
…ary/LinodeSummary.tsx

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
@bnussman-akamai bnussman-akamai merged commit 464a79b into linode:develop Feb 14, 2024
18 checks passed
This was referenced Feb 20, 2024
Merged
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@abailly-akamai abailly-akamai abailly-akamai approved these changes

@hana-akamai hana-akamai hana-akamai approved these changes

@mjac0bs mjac0bs mjac0bs approved these changes

@carrillo-erik carrillo-erik Awaiting requested review from carrillo-erik carrillo-erik is a code owner automatically assigned from linode/frontend

Assignees

@bnussman-akamai bnussman-akamai

Labels
Approved Multiple approvals and ready to merge! Recharts Effort to replace chartjs library
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@bnussman-akamai @mjac0bs @hana-akamai @abailly-akamai @bnussman