Add Completion Graph to Milestone Table in Campaign

[VillageHubertChen]

• [x] HC: Write → User Story → below
• [x] HC: Write → Proposal on How to Implement → below
• [x] HC: Write → Table Layout → below
• [ ] LC: Brainstorm with HC on how to implement. How to make this an easy to implement feature for you.
• [ ] Implement and test. When working trigger HC for review
• [ ] HC: Review and Close

  Proposal on How to Implement

  Development Flow

• Table data as external file in JSON
• Request the Milestone Data → https://developer.github.com/v3/issues/milestones/ It is done with GET and the result is in JSON
• Compute Percentage: Example of 2 open, 6 closed → 2 + 6 = 8 issues total. 6 closed of 8 issues total = 6/8 =0.75 = 75%
• Use ng-repeat to generate the table. If at this time you do not know how to generate the graph, then do not do it yet. We make a separate issue for next week. But there should be many simple javascripts that make a Percentage Bar Graph. Percentage is easy to calculate, see above.
• Find working examples of something similar on plunker / stackoverflow, etc ... As such do this issue after we have VPN.

  Table Layout

  Intuitive Description

Same Table Layout as now. But add under the Milestone Name the Percentage Complete Bar Graph and under it the number of Open and Closed issues. That is it.

Formal Description

• 2 Columns: Milestone Data | Milestone Description
• Milestone Data Column has 3 rows:
  • Milestone Name (that is also a link to the Milestone, just as it is now)
  • Percentage Bar Graph
  • Open: xxx, Closed: yyy
• Milestone Description Column:
  • Just one row, containing the description (just as it is now)

    User Stories

Both as a V² Reader or as V² Contributor I very much appreciate that now in the Milestone Table I get three more critical Information:

1. Progress Bar on Milestone Completion
2. Number of Open Issues
3. Number of Closed Issues

Now I can easily get an overview on how much of this campaign is complete.

Reference

• GitHub API Milestones