search

hackforla / lucky-parking

Visualization of parking data to assist in understanding of the effects of parking policies on a neighborhood by neighborhood basis in the City of Los Angeles
https://www.hackforla.org/projects/lucky-parking.html
33 stars 60 forks source link

[Frontend] Redesign date range picker #630

Closed glenflorendo closed 5 months ago

glenflorendo commented 6 months ago

User Story

As a user, I want an intuitive interface to select date ranges, so that I can properly filter the dataset to retrieve the information I need.

Descriptions

Some people have expressed difficulty with the UX of our current date picker. This ticket attempts to create a new UI for the date range picker to propose as alternative to Design and Product.

This new design comes from various data dashboards. In the attached examples, these come from AWS CloudWatch.

You will still need to adhere to our design system, but the layout and experience itself will be different.

First, you will need to focus on the main UI for this, namely the two calendars side-by-side, the boxes for datatimes, etc. Afterwards, we can discuss on how to include presets. I have few ideas.

Acceptance Criteria

Design References

Image Image

Relative Presets:

Additional Notes

glenflorendo commented 6 months ago

@gibsonliketheguitar Updated with an image of the Relative tab and the presets we should have in the UI.