Denominate roadmap by month by default, & offer way to move between date granularity

[momack2]

Right now the roadmap uses the quarter boundary, and all dates show the quarter they are due. By default, the roadmap should use months instead of quarters, and support a toggle or similar affordance to switch up to quarters or down to weeks. Milestones should also similarly show the month they are due, not the quarter.

I consider this very high priority - because if the roadmap doesn't guide toward the right level of granularity, folks will only set quarter level delivery goals - and then slip by quarters due to poor planning / estimation (instead of just months or weeks).

Actionable action items

• [x] #125
• [x] #126
• [x] #135
• [x] #153

Unclear or large complex asks that can't be done well for MVP

• [ ] Allow switching between daily / monthly / quarterly granularity
  • [x] Allow users to switch granularity. (P4 - this is a large diversion from the path we've been on the last 2 weeks)
  • [ ] Eventually migrate all styling and functionality work to the d3 renderer so we can get daily granularity again (P5, big ask since work was done on the Grid instead of d3 as previously recommended)

Questions

• @juliaxbow @momack2 do we want to show only 5 ticks still we render the tick labels as months? Or do we want to show 2-6 quarters of monthly ticks (23 - 63 ticks). I'll play around with this but it would be great to have this nailed down and not have to undo anything

Still have this flagged as status/needs-clarification as there is a lot of work involved with this request.

[whizzzkid]

One way to simplify this could be having both quarters and month ticks in the header, the issues can then align to both months and quarters.

[SgtPooki]

Moved to issue description

[SgtPooki]

@momack2 do we need monthly level granularity for Dec 1? Due to some decisions made early in the project, getting that monthly granularity is seeming more difficult. And unfortunately, the d3 solution that was presented at labweek was not kept up to date. The d3 (accurate and adjustable granularity) is now so far behind in styling that we may not be able to get the same quality visuals as we have with the css-grid view (current default).

So my question is, we have two paths forward:

1. Stick to quarterly fidelity for now, enabling more fidelity later (most likely using d3)
   • risks
     • as you expressed in the issue description
   • benefits
     • we can fine-tune UX and aren't putting the project's usability at risk.
     • Teams' roadmaps are supported by the tool and future changes to the site won't impact this.
       • i.e. the github issues will have the same data and the way the tool renders them is separate from that.
2. Focus on the d3 view
   • risks
     • There is only one view supported with d3 at the moment, supporting both simple/detail view with d3 is at least a days worth of work
     • the styling is significantly out of date and would require at least 3-5 days of work
     • The d3 view has not been tested and confirmed and may come with additional bugs that have already been resolved with the other view
     • The timeline header view won't be as polished without additional modification, requiring a few hours to at least a day to get to the current visual representation we have
     • milestone card stacking would need to be implemented manually, rather than using css-grid to handle this automatically
     • Styling individual cards/components requires more work up front
   • benefits
     • We will have accurate milestones, and no further complexity concerning milestone card positioning
     • We could easily allow the adjustments of start/end dates, or otherwise easily support scrolling horizontally through the timeline
     • We could easily adjust fidelity, allowing a quarterly view over x quarters, monthly view over x months, etc.

@whizzzkid we could use your input here too. What are your thoughts?

[SgtPooki]

FYI that I got the accuracy nailed down a little bit better. screenshot in #135

[whizzzkid]

@SgtPooki I agree with the deductions you posted. We need a better solution to the current situation, I feel Path 1 in short-term would be more achievable and path-2 in the long term could be something that can be aimed for.

[SgtPooki]

You can now change between roadmap granularity by using the query parameter timeUnit=months or timeUnit=quarters

@juliaxbow where should we put a toggle for this prior to #166 ?

[juliaxbow]

It'll have to sit at the top of the timeline for now (may be a little crowded for now but we'll make do). Will send over a mockup shortly

[juliaxbow]

Let's do a dropdown select for the time being. The dropdown menu should be center vertically aligned with the detailed view tabs (incl the line underneath) and right aligned with the github link. Details below are also in Figma

Dropdown menu

• Stroke weight: 1pt hex:#DDE8EC Icon: Can use chakra chevrondownicon

• Corner Radius 5pt

• Neutral State hex=#FFFFFF text: regular, 16pt

• Hover State hex=#F8FBFF text: regular, 16pt

• Click State hex=#F1F4F8 text: semi-bold, 16pt

• L/R padding 12px

• Top/Bottom padding 10px

Dropdown selection:

• Drop Shadow x=0 y=4 blur=4% opacity=12% hex=#000000

• Text 16pt, Regular hex=#313239 (same as all other text per style guide) padding: 10px all sides

• Neutral State hex=#FFFFFF

• Hover State hex=#F1F4F8

See how this would look here:

https://user-images.githubusercontent.com/58958327/203431193-f80b2346-f4dc-4664-a483-777b1300d4b7.mov