jrtechs
/
jrtechs-github-graphs
mirror of https://github.com/jrtechs/github-graphs.git
1
0
Fork 0
Code Issues 0 Releases 1 Wiki Activity
Browse Source

Merge branch 'master' of github.com:jrtechs/github-graphs

pull/11/head
Bryce Murphy 5 years ago
parent
bc8ec53304 d8e0f535ba
commit
b50c4a0fba
5 changed files with 165 additions and 39 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +27
    -25
      public/FriendsGraph.html
  2. +12
    -2
      public/TimeLineGraph.html
  3. +14
    -4
      public/index.html
  4. +104
    -7
      public/js/profileTimeLine.js
  5. +8
    -1
      public/style.css

+ 27
- 25
public/FriendsGraph.html View File

@ -22,32 +22,34 @@
</head> </head>
<body> <body>
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title">
<a href="./index.html">
<img id="logo" class="text-center" src="./logo.svg" />
</a>
</div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
<div id="header-bar" class="d-flex flex-column flex-md-row shadow-sm align-items-center">
<div id="header-title">
<a href="./index.html">
<img id="logo" src="./logo.svg" />
</a> </a>
</li>
</ul>
</div>
</div>
<div id="navigation">
<ul class="nav">
<li class="nav-item">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="https://github.com/jrtechs/github-graphs">
View on GitHub
</a>
</li>
<div class="nav-sep"></div>
<li class="nav-item">
<a href="./about.html">
About
</a>
</li>
</ul>
</div>
</div>
<div class="main container"> <div class="main container">
<div class="row align-center" id="searchBarTop"> <div class="row align-center" id="searchBarTop">

+ 12
- 2
public/TimeLineGraph.html View File

@ -67,6 +67,14 @@
border-width: 2px; border-width: 2px;
border-color: #0B002B; border-color: #0B002B;
} }
.containerCustom {
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: 0px;
margin-left: 0px;
}
</style> </style>
</head> </head>
<body> <body>
@ -96,7 +104,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="main container">
<div class="containerCustom">
<div class="row align-center" id="searchBarTop"> <div class="row align-center" id="searchBarTop">
<nav class="navbar navbar-light bg-light justify-content-between"> <nav class="navbar navbar-light bg-light justify-content-between">
@ -108,11 +116,13 @@
</nav> </nav>
</div> </div>
<div class="row">
<div class="row containerCustom">
<div class="col-md-10 col-12"> <div class="col-md-10 col-12">
<h2 id="graphLabel"></h2> <h2 id="graphLabel"></h2>
<div id="myGraph" class="w-100"></div> <div id="myGraph" class="w-100"></div>
<pre id="eventSpan"></pre> <pre id="eventSpan"></pre>
<div id="repositoryInformation" class="w-100"></div>
</div> </div>
<div class="col-md-2 col-12 w-100"> <div class="col-md-2 col-12 w-100">
<div id="profileGen"></div> <div id="profileGen"></div>

+ 14
- 4
public/index.html View File

@ -37,7 +37,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="main container-fluid text-center">
<div class="main container-fluid">
<div class="home-content row align-items-center"> <div class="home-content row align-items-center">
<div class="side-txt col"> <div class="side-txt col">
<div class="text-title text-center" style="padding: 10px;"> <div class="text-title text-center" style="padding: 10px;">
@ -46,11 +46,21 @@
<div class="text-content"> <div class="text-content">
<p style="position: relative; padding: 10px;"> <p style="position: relative; padding: 10px;">
Head over to the 'Generate graphs' page and enter Head over to the 'Generate graphs' page and enter
the username of a GitHub user. The space on that
page will then populate with the requested GitHub
user and all the related user, visualizing the
the username of a GitHub user. The space on that
page will then populate with the requested GitHub
user and all the related user, visualizing the
connections between them. connections between them.
</p> </p>
<p style="position: relative; padding: 10px;">
If you'd like to see how everything works, follow
the link to GitHub, where you can view all the work
that went into making this functional.
</p>
<p style="position: relative; padding: 10px;">
If you're interested in knowing more about this
project, additional information can be found on
the About page.
</p>
</div> </div>
</div> </div>
<img class="side-img img-fluid col" src="./img/graphExample.png" /> <img class="side-img img-fluid col" src="./img/graphExample.png" />

+ 104
- 7
public/js/profileTimeLine.js View File

@ -1,36 +1,132 @@
var events = []; var events = [];
var repositoryData;
function addEvent(group, date, content)
{
var dateFormat = new Date(date);
var dd = new Date(dateFormat.getFullYear(), dateFormat.getMonth(), dateFormat.getDay());
events.push({id: events.length, group: group, start: dd, content: content});
}
// {id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'}, // {id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'},
function addRepositories(userName, groupID) function addRepositories(userName, groupID)
{ {
return new Promise(function(resolve, reject) return new Promise(function(resolve, reject)
{ {
queryAPIByUser(API_REPOSITORIES, userName,
function(data)
{
repositoryData = data;
for(var i = 0; i < data.length; i++)
{
data[i].id = events.length;
addEvent(groupID, data[i]['created_at'], data[i]['name'])
}
resolve();
},
function(error)
{
console.log(error);
reject(error);
})
}) })
} }
function addOrgs(userName, groupID)
function timeLineClickEvent(properties)
{ {
return new Promise(function(resolve, reject)
if(properties.item !== null && typeof repositoryData[properties.item].name !== 'undefined')
{ {
var item = repositoryData[properties.item];
})
}
var html = "<div class=\"card\">\n" +
" <div class=\"card-header\">\n" +
item.name +
" </div>\n" +
" <div class=\"card-body\">\n";
html += "<p>" + item.description + "</p>";
console.log(item.license);
if(item.license === null)
{
item.license = new Object();
item.license.name = 'none';
}
html += "<div class='row'><div class=\"col-6\">\n" +
" <ul class=\"list-group\">\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Fork Count</b></div>\n" +
" <div class=\"col-md-6\">" +
item.forks +
"</div>\n" +
" </li>\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Languages</b></div>\n" +
" <div class=\"col-md-6\">" +
item.language+
"</div>\n" +
" </li>\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Liscense</b></div>\n" +
" <div class=\"col-md-6\">" +
item.license.name +
"</div>\n" +
" </li>\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Home Page</b></div>\n" +
" <div class=\"col-md-6\">" +
"<a href='" + item.homepage + "'>" +item.homepage + "</a>" +
"</div>\n" +
" </li>\n" +
" </ul>\n" +
" </div>";
html += "<div class=\"col-6\">\n" +
" <ul class=\"list-group\">\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Repository URL</b></div>\n" +
" <div class=\"col-md-6\">" +
"<a href='" + item.html_url + "'>" +item.html_url + "</a>" +
"</div>\n" +
" </li>\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Open Issues</b></div>\n" +
" <div class=\"col-md-6\">" +
item.open_issues_count +
"</div>\n" +
" </li>\n" +
" <li class=\"row\">\n" +
" <div class=\"col-md-6\"><b>Watchers</b></div>\n" +
" <div class=\"col-md-6\">" +
item.watchers +
"</div>\n" +
" </li>\n" +
" </ul>\n" +
" </div></div>";
html +=" </div>\n" +
"</div>";
$("#repositoryInformation").html(html);
}
}
function createProfileTimeLine(username, containerName) function createProfileTimeLine(username, containerName)
{ {
var container = document.getElementById(containerName); var container = document.getElementById(containerName);
var prom = [addRepositories(username, 1), addOrgs(username, 1)];
var prom = [addRepositories(username, 1)];
var groups = new vis.DataSet([ var groups = new vis.DataSet([
{id: 0, content: 'Organizations', value: 1},
{id: 1, content: 'Repositories', value: 2} {id: 1, content: 'Repositories', value: 2}
]); ]);
console.log("up up duper");
Promise.all(prom).then(function() Promise.all(prom).then(function()
{ {
// note that months are zero-based in the JavaScript Date object // note that months are zero-based in the JavaScript Date object
@ -53,5 +149,6 @@ function createProfileTimeLine(username, containerName)
timeline.setOptions(options); timeline.setOptions(options);
timeline.setGroups(groups); timeline.setGroups(groups);
timeline.setItems(items); timeline.setItems(items);
timeline.on('click', timeLineClickEvent);
}); });
} }

+ 8
- 1
public/style.css View File

@ -71,6 +71,7 @@
} }
.home-content { .home-content {
padding: 20px; padding: 20px;
width: 100%;
max-height: 40px; max-height: 40px;
} }
.side-img { .side-img {
@ -85,7 +86,6 @@
display: block; display: block;
position: relative; position: relative;
width: 50%; width: 50%;
max-width: 500px;
} }
.text-title { .text-title {
background-color: rgb(208, 208, 208); background-color: rgb(208, 208, 208);
@ -109,6 +109,13 @@ body {
.side-img { .side-img {
display: none; display: none;
} }
.side-txt {
position: absolute;
top: 10px;
left: 50%;
transform: translate(-50%, 0%);
width: 100%;
}
#navigation { #navigation {
position: absolute; position: absolute;
top: 50px; top: 50px;

Write Preview
Loading…
Cancel
Save