[SIP-116] Simplifying time period filtering for users

TechAuditBI commented 8 months ago

[SIP-116] Proposal for simplifying time period filtering for users

Motivation

Current time period filter is overly complicated and counterintuitive for users to work with. Yes, it does provide a lot of functionality and flexibility but it is not commonly used anyways.

Proposed Change

Proposed change is to create an alternative time filter.

Current view of a proposed filter is something like a commonly used calendar date picker. Calendar picker Airbnb's picker for example.

The new date picker should replicate a currently existing functionality of fast navigation through months and years.

Open question is how to implement a time picker in a way that UI/UX stays simple and intuitive but functional at the same time. Current "scroll columns" design is good for touchscreens but is an absolute nightmare to use on a desktop.

A couple of examples of solutions found online: https://www.cssscript.com/date-range-picker-predefined-ranges/

New or Changed Public Interfaces

New time period native filter. Otherwise unknown yet.

New dependencies

Non known yet. Probably some UI lib.

Migration Plan and Compatibility

None expected

Rejected Alternatives

A time slider filter which would allow users to select time period for filtering simply by dragging a couple of markers across a slider.

Power BI slider for reference

Was rejected due to lack of visual information for user. But still could be achieved by improving "Number range" native filter.

TechAuditBI commented 8 months ago

Well. Actually after looking at this SIP afterwards it looks like SIP is not actually needed here.

michael-s-molina commented 8 months ago

Hi @TechAuditBI. Could you update the SIP's content with the results of our SIP Office hours discussion?

TechAuditBI commented 8 months ago

@michael-s-molina Sorry for this taking so long. Quite a busy week. I'll get to it tomorrow.

webobite commented 6 months ago

Hi @michael-s-molina and team

One of the time period widget, I was very impressed with the simple design of this widget from Toggle track app, It has all the different section for different time period as well as week nos also attached in the UI, I have come across many usecase during development of saas platform where user also wanted to know week numbers for their analysing the insights

Do let me know your view on this, if we can take some inspiration from here too :-)

TechAuditBI commented 6 months ago

@webobite Wow! This looks quite impressive tbh. I think that this kind of a widget would look very nice in superset. The only thing missing here is a time selection but we'll figure smth out.

webobite commented 6 months ago

Thanks @TechAuditBI Ya I noticed that custom date range is missing, Should I explore more on this widget ?

TechAuditBI commented 6 months ago

@webobite Sorry, missed your reply. If you can research more that would be awsome!

webobite commented 6 months ago

Ok sure, Will do some research and share the same over this thread !!

Thanks

webobite commented 6 months ago

Hi @TechAuditBI,

Are we planning to boundary our self with Ant design lib calendar or we can explore other option and then try to fit the same in the UI design framework of superset ?

webobite commented 6 months ago

Hi @TechAuditBI and team,

As per my understanding on the Time period filter :- (here is small breakdown on the understanding and concept)

idea 1

I would be preferring this UI with much more compact and very low learning curve for the users of dashboard which is self explanatory

src : Dribble Link

Note: Year selection with weekly segregation

Note: Monthly selection with help of tab switch

idea 2

Here I could not find relevant UI UX design for the same, some excalidraw sketch for the same, It will save some space and quick access to the User for the Chart UI

I am open for the feedback and new suggestion on the same.

:-) thanks & regards Subham (@webobite )

TechAuditBI commented 5 months ago

@supersetbot orglabel

TechAuditBI commented 5 months ago

@webobite Thanks a lot for a detailed analysis! I think we should definetely give users an ability to simply type in their time period. Maybe it can be done right in the box from idea 1. Also we are still missing a time picker. Sorry for slow responses...

rusackas commented 4 months ago

If anyone wants to move forward with this (and it does indeed seem worthy of a SIP based on the above discussion), then please start a [DISCUSS] thread on the dev@ mailing list.

luutomas commented 3 months ago

@TechAuditBI @rusackas would not this component from AntDesign resolve it:

source: https://ant.design/components/date-picker

This is the date picker that I feel that would really allow for the end-users to use easily and not have so much clicking fatigue. Given that it is also part of AntDesign, which is recommended to use.

yousoph commented 3 months ago

We've been doing some explorations on our end as well - here are some in progress mock ups. There are a few things that need to be adjusted, but wanted to to share to give an idea of what we were thinking:

A simplified date picker when first opening the time filters. User could select the date range and there are a few quick options as well.
All the current Superset time filter options will be kept in the other two tabs, so any users using the current filter options will still be able to use them.
Removing the "Ok" button after selecting a date on the calendar to reduce friction when selecting dates (and reduce the need to re-select dates if user clicks out without clicking "Ok")

rusackas commented 3 months ago

Overall I like where the design is going, but the "Relative" tab seems to have fewer options. Current/Previous/Last all have their nuances... maybe we can do something like a split button for those, plus split/radio buttons for Day/Week/Month/Quarter/Year?

michael-s-molina commented 3 months ago

We always talk about how customizing Ant Design components has a maintenance cost and that we should try to adhere to the library as much as possible to easily upgrade and get the new shiny things from new versions. @luutomas shared the Datepicker component which has many of the features present in these mockups. My suggestion would be to try to use the component as much as possible and augment it when necessary. Tagging @geido here as we talked many times about this and is currently working on the Ant Design upgrade.

geido commented 2 months ago

Agreed with @michael-s-molina here. Let's stick to what Ant Design provides. For reference #29268

rscarborough1996 commented 1 month ago

The number one complaint that I get on my sites, by far, is that the time filter is too complicated. I would love to see a more user friendly version!

rusackas commented 1 month ago

@yousoph if there are any new designs addressing the above comments (i.e. AntD components), or this is ready for a Discuss thread, let's move it forward :D

luutomas commented 1 week ago

@michael-s-molina @geido we are currently working on just implementing the new calendar as a part of the new option in the section. I think that a lot would be resolved if we could use antdesign 5. However the current version that is implemented in Superset is 4. Is there anyway that we could tackle that?

geido commented 1 week ago

@michael-s-molina @geido we are currently working on just implementing the new calendar as a part of the new option in the section. I think that a lot would be resolved if we could use antdesign 5. However the current version that is implemented in Superset is 4. Is there anyway that we could tackle that?

@luutomas feel free to get in touch on the Apache Superset Slack. I am Diego Pucci in there. We are currently upgrading Antd and if you want to support that process, now it is a good time!

rusackas commented 3 days ago

@kasiazjc curious your input here, and if you want to carry this SIP through the process, or open an alternative/consolidated one with what you've been designing.

apache / superset