Selecting analytics timeframe

[bajiat]

At the moment, Apinf users can select from hard coded months and years and interact with the overview chart, which contains the timeframe of a few days.
Apinf users viewing the dashboard page should be able to quickly see how they can select or determine the timeframe that is shown in analytics. The UI can offer two different options to determine the timeframe, but it should contain the same options.
The users should also be able to determine the granularity of the timeframe: year, month, week, day, hour. (Are minutes also needed?)

User story

As an Apinf user
I want to easily select the timeframe for which I view analytics

Design

• A single date picker when the chart can be rendered w.r.t. day, week, month, year using the view finder

• When There is option to view the chart in day, week, month or year basis by checking buttons

Definition of done

• User can immediately see what is the method for determining the timeframe
• User can select the granularity of the time shown: year, month, week, day, hour
• Optionally, either starting point or end point can be left blank: data from this point or data after this point
• Graphs are updated based on user selection
• User can reset the time selection with one action (clear the selection to return to default)

[Nazarah]

There should be both options for giving the date range as inputs (date selector) and focusing option to select particular date on charts.

[Nazarah]

Also should we consider a particular date? or date range? or both?

[Nazarah]

what about timing formats? Are we supporting this?
dd/mm/yyyy
mm/dd/yyyy
yyyy/mm/dd
24 Hr
12 Hr

[jykae]

Would be good to have findings and decision from #1066 if we are going to switch from DC. Otherwise I am able proceed to fixing filtering and selecting timeframe selection.

[jykae]

@Nazarah let me know when you have wireframes ready for review.

[Nazarah]

@jykae: Added the wireframes

[jykae]

Wireframes reviewed, and merged: https://github.com/apinf/docs/tree/master/docs/Wireframes/Dashboard

[brylie]

@frenchbread would you like to work on this task? @NNN will be working with you on similar tasks.

[frenchbread]

Self-assigned.