Skip to content

Conversation

@robertmiddlekauff
Copy link

@robertmiddlekauff robertmiddlekauff commented Dec 28, 2023

adjust location of annotation; shrink x axis range if screen is small; format axis and tooltip

Description

This PR seeks to address issue 113: #113

This PR limits the amount of data that is shown on smaller screens because there are simply too many data points to display with the current data setup. The user can still scroll left if they know the chart well, but I am making an assumption about a mobile user that they just want to see the last 12 months and don't necessarily need to see the full dataset.

It also formats the axis to be percentage bc even though it's calculated as a ratio it's really a percentage of the total trips. This will make it slightly easier to process what the chart means.

I also adjusted the location of the annotation to account for these changes and make the data on the chart bigger and reduce whitespace.

Checklist

  • I am requesting to merge into the dev branch
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (dont think this is needed)
  • My changes generate no new warnings

Screenshots

Before After

|
Screenshot 2023-12-28 at 10 40 59 AM
|
Screenshot 2023-12-28 at 10 41 12 AM
|
|
Screenshot 2023-12-28 at 10 43 51 AM

   |  
Screenshot 2023-12-28 at 10 43 56 AM
  |

@netlify
Copy link

netlify bot commented Dec 28, 2023

Deploy Preview for creative-quokka-61f1f5 ready!

Name Link
🔨 Latest commit a02dfd5
🔍 Latest deploy log https://app.netlify.com/sites/creative-quokka-61f1f5/deploys/658da5e60ff1560009d81739
😎 Deploy Preview https://deploy-preview-121--creative-quokka-61f1f5.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify
Copy link

netlify bot commented Dec 28, 2023

Deploy Preview for sprightly-muffin-751ffc ready!

Name Link
🔨 Latest commit a02dfd5
🔍 Latest deploy log https://app.netlify.com/sites/sprightly-muffin-751ffc/deploys/658da5e6258e1e00094944fb
😎 Deploy Preview https://deploy-preview-121--sprightly-muffin-751ffc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@KyleDolezal
Copy link
Collaborator

@robertmiddlekauff Thank you for this fix! To ask a quick question: is the shift from "normal" to "compact" mode meant to happen dynamically as one resizes, or is the intended behavior that the shift occurs only with a refresh. When doing some testing, I was able to see exactly the desired behavior you screenshotted, but only when I performed a refresh.

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