Feature: Capability to have multiple time ranges in a singular query

[ghost]

In the Fixed Time Tab made one change initially, the addition of the "Add Time Range" shown here: After pressing the "Add Time Range" Button the format of the tab changes to this:

To create these changes I moved the code for the calendar into the fixed time tab file, rather than date range picker. This allows for the creation of multiple date range pickers without multiple calendars. For this I created a list of a set of start and end dates, so that the validation function still works. To ensure that all prior capabilities still worked I had to change a lot of the functions now in fixed time tab, so that they could work with a list of times. I also implemented the capability to change and delete the date ranges from the UI, because on refresh the prior filter is used to extract the date ranges and so on to create the date range pickers from the previous query.

With these changes the druid query changes slightly, due to the fact that there are multiple intervals, as shown here:

To make the OnChanges work, I included an index parameter that was passed in to indicate which date range picker changed. This allows the change to be made to the specific index which was changed, and allows for the capability to change all selections easily. Changes were made to the props of Date-Range-Picker, and Date-Range-Input to pass in the index of the date range that changed.

[adrianmroz]

Thanks for this PR! I will go today with code review and in next week we discuss this feature on team meeting. Idea looks great but I'm not sure about UX. For sure we need some testing around line/barchart because they calculate axes based on data ranges and I'm not sure if they're ready for disjointed ranges.

[adrianmroz]

You can run npm run lint locally to check for listing errors.

[ghost]

Thank you so much! So currently looking at a line chart the gap between the dates just goes down to zero. I'll look into what pivot does with this type of instance.

[ghost]

So looking at pivot and turnilo, currently they both just have no information for the split between the time ranges on line charts. The bar chart when split on time is unideal, but regarding the customers and the company I work for I dont think anyone uses that. The axes are going to be calculated the same (in my logic) with multiple time ranges, unless you're wanted to create a visual indication that there is a split in the time by skipping the empty time ranges.

This is what a line chart looks like for a split time range for 4 different measures :

[adrianmroz]

Before we will shuffle components around we should discuss how we want UI to look.

[mkuthan]

I'm not an UX expert but it's weird that secondary dialog action (add time range) changes the dialog completely. And when I click "add time range" (to add next range) the dialog is modified again differently.

We should start with a few design wireframes ...

[ghost]

Our internal and external customers use pivot, this UI is very similar and based off of how pivots multiple time range UI is. In my opinion to move the UI for multiple time ranges to a different tab makes the UI less intuitive, nothing is forcing users to add other time ranges. I believe moving the UI to another tab makes it less user friendly in the way that this is a fixed time, it just has multiple time ranges. I'm just curious what benefits you see to moving it to a separate tab from fixed time tab. I can understand moving all of the calendar capabilities into a separate component, to clean up the parent component. But I do not really see the point of moving the multiple date ranges into a different component

What UI are you looking to change? How the multiple time ranges looks? Or where the multiple time range capability is.

On Mon, Jun 17, 2019 at 5:00 AM Marcin Kuthan [email protected] wrote:

I'm not an UX expert but it's weird that secondary dialog action (add time range) changes the dialog completely. And when I click "add time range" (to add next range) the dialog is modified again differently.

We should start with a few design wireframes ...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/allegro/turnilo/pull/447?email_source=notifications&email_token=AMCJKH7JPZZMHW5WM4J2TXDP25OCJA5CNFSM4HYIKTYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODX2VRAI#issuecomment-502618241, or mute the thread https://github.com/notifications/unsubscribe-auth/AMCJKHZJQVHNJHFREK6SK23P25OCJANCNFSM4HYIKTYA .

[mkuthan]

Please give us some time to prepare a few wireframe as a baseline for further discussion. We agree that filtering by multiple time ranges could be useful but please look at first point of our manifesto "High usability for non-technical users over sophisticated but rarely used features." We have to ensure that this rarely used feature does not add accidental complexity.

During Turnilo development we were caught many times in a trap that something is implemented in Pivot. But sometimes it is much better to forget about Pivot and design new feature from scratch (also without looking at Pivot code to avoid any license issues). Turnilo is not a Pivot anymore, if Pivot fits your needs, just buy the licence and use Pivot (or rather Imply UI).

[mkuthan]

First proposal for further discussion:

On the dialog above the first time range is active (focus on any of START/END fields). If focus is moved to the second time range, the calendar is presented under second time range and hidden for the first time range. When new time range is added it automatically gets focus and calendar is presented for it. If time range is removed the focus should go to the time range above (or to the first time range - I don't know).

And the second more complex proposal with dual-calendar, when user will be able to select date range across many months and select a time from the calendar as well. The dual-calendar is activated when any of START/END fields get focus.

[ghost]

Sorry for the late reply, I'm working on this as an internship project. In response to the first proposition, would you want the calendar to appear on click, or on hover?

On Tue, Jun 18, 2019 at 4:23 AM Marcin Kuthan [email protected] wrote:

First proposal for further discussion:

[image: turnilo_time_filter] https://user-images.githubusercontent.com/1560526/59668520-f01db700-91b8-11e9-91c2-815e3c2b3b09.png

On the dialog above the first time range is active (focus on any of START/END fields). If focus is moved to the second time range, the calendar is presented under second time range and hidden for the first time range. When new time range is added it automatically gets focus and calendar is presented for it. If time range is removed the focus should go to the time range above (or to the first time range - I don't know).

And the second more complex proposal with dual-calendar, when user will be able to select date range across many months and select a time from the calendar as well. The dual-calendar is activated when any of START/END fields get focus.

[image: turnilo_time_filter_2] https://user-images.githubusercontent.com/1560526/59669916-560b3e00-91bb-11e9-98e9-8b24562fa8b7.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/allegro/turnilo/pull/447?email_source=notifications&email_token=AMCJKH6I43KJ5F42GHGKBYLP3CSSPA5CNFSM4HYIKTYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODX5YNMA#issuecomment-503023280, or mute the thread https://github.com/notifications/unsubscribe-auth/AMCJKH5ABQQFHPVOTCPLND3P3CSSPANCNFSM4HYIKTYA .