Website for visualizing a persons github network.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

110 lines
3.7 KiB

5 years ago
  1. var events = [];
  2. var repositoryData;
  3. function addEvent(group, date, content)
  4. {
  5. var dateFormat = new Date(date);
  6. var dd = new Date(dateFormat.getFullYear(), dateFormat.getMonth(), dateFormat.getDay());
  7. events.push({id: events.length, group: group, start: dd, content: content});
  8. }
  9. // {id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'},
  10. function addRepositories(userName, groupID)
  11. {
  12. return new Promise(function(resolve, reject)
  13. {
  14. getUserRepositories(userName,
  15. function(data)
  16. {
  17. repositoryData = data;
  18. for(var i = 0; i < data.length; i++)
  19. {
  20. data[i].id = events.length;
  21. addEvent(groupID, data[i]['created_at'], data[i]['name'])
  22. }
  23. resolve();
  24. },
  25. function(error)
  26. {
  27. console.log(error);
  28. reject(error);
  29. })
  30. })
  31. }
  32. function timeLineClickEvent(properties)
  33. {
  34. if(properties.item !== null && typeof repositoryData[properties.item].name !== 'undefined')
  35. {
  36. var item = repositoryData[properties.item];
  37. if (item.license === null) {
  38. item.license = new Object();
  39. item.license.name = 'None';
  40. }
  41. var html = `
  42. <div class="card shadow" style="font-size: 16px">
  43. <div class="card-body">
  44. <h5 class="card-title">${item.name}</h5>
  45. <p class="card-subtitle text-muted">${item.description ? item.description : 'No description'}</p>
  46. <div class="row py-3">
  47. <div class="col-12 col-md-8">
  48. ${item.homepage ? `<p class="mb-0">Homepage: <a href="${item.license.name}">${item.license.name}</a></p>` : ''}
  49. <p class="mb-0">Repository URL: <a href="${item.html_url}">${item.html_url}</a></p>
  50. <p class="mb-0">Languages: ${item.language ? item.language : 'Not specified'}</p>
  51. <p class="mb-0">License: ${item.license.name}</p>
  52. </div>
  53. <div class="col-12 col-md-4">
  54. <p class="mb-0">Fork Count: ${item.forks}</p>
  55. <p class="mb-0">Open Issues: ${item.open_issues_count}</p>
  56. <p class="mb-0">Watchers: ${item.watchers}</p>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. `;
  62. $("#repositoryInformation").html(html);
  63. }
  64. }
  65. function createProfileTimeLine(username, containerName)
  66. {
  67. var container = document.getElementById(containerName);
  68. var prom = [addRepositories(username, 1)];
  69. var groups = new vis.DataSet([
  70. {id: 1, content: 'Repositories', value: 2}
  71. ]);
  72. Promise.all(prom).then(function()
  73. {
  74. // note that months are zero-based in the JavaScript Date object
  75. var items = new vis.DataSet(events);
  76. var options = {
  77. // option groupOrder can be a property name or a sort function
  78. // the sort function must compare two groups and return a value
  79. // > 0 when a > b
  80. // < 0 when a < b
  81. // 0 when a == b
  82. groupOrder: function (a, b) {
  83. return a.value - b.value;
  84. },
  85. margin: {
  86. item: 20,
  87. axis: 40
  88. }
  89. };
  90. var timeline = new vis.Timeline(container);
  91. timeline.setOptions(options);
  92. timeline.setGroups(groups);
  93. timeline.setItems(items);
  94. timeline.on('click', timeLineClickEvent);
  95. });
  96. }