Time filtering on story dashboard

[batpad]

Filter by year or year / month on story dashboard.

@meghaklp need to discuss the exact design for this? I can implement the bits of talking to the api, etc..

[meghaklp]

[meghaklp]

@gkjohn - Date filter like this, okay?

[gkjohn]

@meghaklp Not a huge fan of this model. Adds one more control and given proximity to search bar, looks cluttered. What if we tuck it under the Academic Year area? Rename that to something more generic and have just a MM/YYYY filter.

[meghaklp]

Note to self 1) Date validation needed 2) Academic year needs to be determined from the date range

[meghaklp]

So, I believe, the way this page has been designed, it can have one page load for the date selection.

The academic year display comes in two places once below the school and once below preschool, but we can give this control only in one of these 2 places. We will have to move that to the top or to one place somewhere. I don't know where that will be. And I'm concerned placing a control where it's not intuitive for the user that (s)he can use that control is a bit pointless.

yyyy-mm - can be done.

[meghaklp]

Also mm-yyyy will need either select boxes or a non-standard (outside of styleguide for KLP) date-picker... Both options are ugly from an implementation POV.

[meghaklp]

What if we had some sort of slider on the top or side that leads you to a date range selection?

[gkjohn]

@meghaklp Point taken on being able to have it in only one place vs. two and that using mm-yyyy will break our style guide. The slider could work. Or, what if we had a composite Month/Yeah graph for all SYS entries for pre and primary respectively and you could click months on the graph to filter? [IMO, does sound non obvious] Oh. And the reason I say Month/Year and not Date is because we have arbitrarily assigned dates to entries that had bad dates.

[meghaklp]

If mm-yyyy is essential, let's all agree that we are straying from the style guide and that's okay. I get that it's probably a better control than a full-fledged date selection.

So, you are saying a it's like the call volume chart but across all sys entries = {ivrs, community, web}. It'll start out being a graph for all years and when you click on a bar it pans into a bar chart for the months for that year and when you click on one of those bars, the data on the entire report changes?

Would be nice and very from the space age. I'd have to build some custom charts for that, use some html5 animation, etc.

Seems to me, from your MoM mail yesterday, that we have to solve a larger interface problem of date range and comparison selections across pages. And perhaps here's a point where we can determine how those controls should look like, plugged in on any page.

[gkjohn]

@meghaklp A mm-yyyy would be nice to have, for sure. Dunno if the current date picker can support such a use case.

Yes, that is what I had in mind. But how then, do you choose a range? Not sure I have thought it through.

What did you mean by "date range and comparison selections across pages"?

[meghaklp]

This from your e-mail:

dubdubdub Design

• front-end needs to add academic year filtering in a bunch of places, ideally including compare.
• compare to include boundaries

[meghaklp]

I asked this question on a UX stack exchange, This was one of the answers, the other one, actually says if I extended the grey area and made all of the search, date range, etc be a part of user control in one defined space, it would be better.

I actually think there's value in making that search bar a area of features like search, compare & apply date range, like what this man below is getting to.

[gkjohn]

@meghaklp On the "date range and comparison selections across pages" how does it impact the stories page because the date range there is the academic year, no? Unless we want to do academic year and the ability to compare stories too on the story page? Maybe we can include story comparisons on the compare page via the map?

On the comment from stack exchange - by all means. Take some time to think it through in the new model.

[meghaklp]

It's the positioning of all the controls. Their placement should be uniform across pages from an interface perspective. So, it's intuitive for a user to interact with various pages on the site.

Maybe just a year selector on other pages instead of a date filter. But it should be in the exact same place. Alongside a search or a compare button.

[meghaklp]

Unless this story page lives in isolation like the dise app or the SSLC page.

[gkjohn]

@meghaklp Ah. I see. The story page is in some kind of isolation and always will be but bits of it will be inherited in to the SYS page at school and boundary levels. @batpad I'm out of my depth here now.

[meghaklp]

@batpad ... If u can make sense of what I've said, fine. Else we can pick it up when u have some mind space. The date range filtering won't work on the dashboard now because the queries are taking a long time.

@gkjohn ... I'll try and mock up something next week and we can pick it up then.

[gkjohn]

Thank you!

[meghaklp]

What if we had a sticky sidebar with buttons to apply date filter/ search/ compare and we take away all the controls from the top?

When clicked, a modal would open as in the second image.

[gkjohn]

@meghaklp Very interesting thought. How'd it work on mobiles, though? @batpad ideas?

[meghaklp]

The tool tips are giving me some trouble. I have to make CSS adjustments to them and to the side bar to push it to the right top corner. But it's doable and it'll look the same. Sticky side bar in mobiles also. I didn't go all the way before I get a sense for what you guys think.

In a way the map has fixed button overlays. This is similar.

[gkjohn]

I like!

[meghaklp]

[meghaklp]

@batpad Search and reset work right away. Review maybe on branch stories-date-range