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
9782e9f162 1d2cef6005
commit
63884e93b3
19 changed files with 482 additions and 106 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +34
    -2
      README.md
  2. BIN
      doc/graphExample.png
  3. BIN
      doc/javaScript.jpg
  4. +23
    -21
      public/404.html
  5. +19
    -8
      public/FriendsGraph.html
  6. +144
    -0
      public/TimeLineGraph.html
  7. +20
    -0
      public/about.css
  8. +75
    -21
      public/about.html
  9. BIN
      public/img/email.png
  10. BIN
      public/img/github.png
  11. BIN
      public/img/graphExample.png
  12. BIN
      public/img/linkedin.png
  13. +33
    -27
      public/index.html
  14. +6
    -4
      public/js/friendsGraph.js
  15. +2
    -1
      public/js/githubAPI.js
  16. +57
    -0
      public/js/profileTimeLine.js
  17. +11
    -0
      public/js/utilities.js
  18. +54
    -20
      public/style.css
  19. +4
    -2
      routes/api.js

+ 34
- 2
README.md View File

@ -1,9 +1,41 @@
# github-graphs
# Github-Graphs
Website for visualizing a persons github network.
![Example Graph](./doc/graphExample.png)
If you are lucky, you can find the site live
[here](https://github-graphs.com/);
# Built With
- [BootStrap](https://getbootstrap.com/) CSS Framework
- [jQuery](https://jquery.com/)
- [Vis JS](http://visjs.org/)
- [Github v3 API](https://developer.github.com/v3/)
- [Github v3 API](https://developer.github.com/v3/)
- [Node.js](https://nodejs.org/en/)
![javascript](./doc/javaScript.jpg)
# Running
Update your conf.json file to contain your preferred port and github
api credentials.
```bash
npm install
```
```bash
node server.js
```
# Contributing
If you want to contribute to this project and don't know where to start,
look at the open issues. Once you know what you want to work on,
just discuss it in the issues and file a pull request. We are very open
to new contributes.

BIN
doc/graphExample.png View File

Before After
Width: 1292  |  Height: 1418  |  Size: 765 KiB

BIN
doc/javaScript.jpg View File

Before After
Width: 700  |  Height: 525  |  Size: 122 KiB

+ 23
- 21
public/404.html View File

@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
@ -10,28 +10,30 @@
<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" />
<img id="logo" src="./logo.svg" />
</a>
</div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./GraphTest.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 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">
<div id="content" class="error container text-center">

+ 19
- 8
public/FriendsGraph.html View File

@ -15,7 +15,7 @@
<script src="js/githubAPI.js"></script>
<script src="js/friendsGraph.js"></script>
<script src="js/profileGen.js"></script>
<script src="js/utilities.js"></script>
<script type="text/javascript" src="js/vis/vis.js"></script>
<link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
@ -30,7 +30,7 @@
</div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./GraphTest.html">
<a href="./FriendsGraph.html">
Generate graphs
</a>
</li>
@ -50,12 +50,12 @@
</div>
<div class="main container">
<div class="row" id="searchBarTop">
<div class="row align-center" id="searchBarTop">
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Create Graph</a>
<form class="form-inline">
<input class="form-control mr-sm-2" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" onclick='createGraphs()' type='button'>Look Up</button>
<button class="btn btn-outline-success my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Look Up</button>
</form>
</nav>
</div>
@ -73,15 +73,26 @@
</body>
<script>
function createGraphs()
function fetchUserInput()
{
const inputedName = $("#txtUsername").val();
createGraphs(inputedName);
}
function createGraphs(username)
{
options.width = $("#myGraph").width() + "px";
options.height = "700px";
const inputedName = $("#txtUsername").val();
createFriendsGraph(inputedName, "myGraph", "graphLabel");
profileGen(inputedName, "profileGen");
createFriendsGraph(username, "myGraph", "graphLabel");
profileGen(username, "profileGen");
$("#searchBarTop").html("");
}
if(findGetParameter("name") !== null)
{
createGraphs(findGetParameter("name"))
}
</script>
</html>

+ 144
- 0
public/TimeLineGraph.html View File

@ -0,0 +1,144 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="js/githubAPI.js"></script>
<script src="js/profileTimeLine.js"></script>
<script src="js/profileGen.js"></script>
<script src="js/utilities.js"></script>
<script type="text/javascript" src="js/vis/vis.js"></script>
<link href="js/vis/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.vis-timeline {
border: 2px solid blue;
/*font-family: purisa, 'comic sans', cursive;*/
font-size: 12pt;
background: #E8E8E8;
}
.vis-item {
border-color: #0B002B;
background-color: #88BAFF;
font-size: 15pt;
color: black;
box-shadow: 5px 5px 20px rgba(47,27,0, 0.5);
}
.vis-item,
.vis-item.vis-line {
border-width: 3px;
}
.vis-item.vis-dot {
border-width: 10px;
border-radius: 10px;
}
.vis-item.vis-selected {
border-color: #2C3E50;
background-color: #498FBE;
}
.vis-time-axis .vis-text {
color: #0B002B;
padding-top: 10px;
padding-left: 10px;
}
.vis-time-axis .vis-text.vis-major {
font-weight: bold;
}
.vis-time-axis .vis-grid.vis-minor {
border-width: 2px;
border-color: #88BAFF;
}
.vis-labelset .vis-label
{
color: black;
}
.vis-time-axis .vis-grid.vis-major {
border-width: 2px;
border-color: #0B002B;
}
</style>
</head>
<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
</a>
</li>
</ul>
</div>
<div class="main container">
<div class="row align-center" id="searchBarTop">
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Create Graph</a>
<form class="form-inline">
<input class="form-control mr-sm-2" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" onclick='fetchUserInput()' type='button'>Look Up</button>
</form>
</nav>
</div>
<div class="row">
<div class="col-md-10 col-12">
<h2 id="graphLabel"></h2>
<div id="myGraph" class="w-100"></div>
<pre id="eventSpan"></pre>
</div>
<div class="col-md-2 col-12 w-100">
<div id="profileGen"></div>
</div>
</div>
</body>
<script>
function fetchUserInput()
{
const inputedName = $("#txtUsername").val();
createGraphs(inputedName);
}
function createGraphs(username)
{
createProfileTimeLine(username, "myGraph");
profileGen(username, "profileGen");
$("#searchBarTop").html("");
}
if(findGetParameter("name") !== null)
{
createGraphs(findGetParameter("name"))
}
</script>
</html>

+ 20
- 0
public/about.css View File

@ -20,6 +20,12 @@
position: relative;
padding-top: 20px;
}
.card {
background-color: rgb(208, 208, 208);
}
.card-body {
background-color: rgb(242, 242, 242);
}
.rounder {
border-radius: 20px !important;
}
@ -29,6 +35,20 @@
position: relative;
width: 70%;
}
.links {
padding: 10px;
}
.links a {
text-decoration: none;
}
.link-ico {
width: 40px;
}
.plink {
color: rgb(250, 152, 33);
}
@media (max-width: 767px) {
#content-title {
height: 40px;
}
}

+ 75
- 21
public/about.html View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GitHub Graphs</title>
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@ -13,28 +14,30 @@
<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" />
<img id="logo" src="./logo.svg" />
</a>
</div>
<ul id="navigation" class="nav justify-content-end">
<li class="nav-item">
<a href="./GraphTest.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 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>
<div id="content" class="container">
@ -51,7 +54,7 @@
</div>
<div id="content-body" class="container">
<p style="padding: 10px;">
This project was made for participation in <a class="plink" href="https://brickhack.io/">BrickHack V</a>.
This project was completed in 24 hours for participation in <a class="plink" href="https://brickhack.io/">BrickHack V</a> at the Rochester Institute of Technology.
</p>
</div>
<div id="content-title" style="border-radius: 20px;">
@ -68,6 +71,23 @@
did stuff
</p>
</div>
<div class="links row text-center">
<div class="col">
<a href="https://github.com/jrtechs">
<img class="link-ico" src="./img/github.png" />
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/jrtechs/">
<img class="link-ico" src="./img/linkedin.png" />
</a>
</div>
<div class="col">
<a href="mailto:jeffery@jrtechs.net">
<img class="link-ico" src="./img/email.png" />
</a>
</div>
</div>
</div>
<div class="card rounder">
<img class="avatar mx-auto d-block" src="https://avatars0.githubusercontent.com/u/32306409?s=400&v=4" />
@ -79,6 +99,23 @@
also did stuff
</p>
</div>
<div class="links row text-center">
<div class="col">
<a href="https://github.com/theshmurph">
<img class="link-ico" src="./img/github.png" />
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/theshmurph">
<img class="link-ico" src="./img/linkedin.png" />
</a>
</div>
<div class="col">
<a href="mailto:brshmurphy@gmail.com">
<img class="link-ico" src="./img/email.png" />
</a>
</div>
</div>
</div>
<div class="card rounder">
<img class="avatar mx-auto d-block" src="https://avatars3.githubusercontent.com/u/32624140?s=400&v=4" />
@ -90,6 +127,23 @@
kinda did stuff
</p>
</div>
<div class="links row text-center">
<div class="col">
<a href="https://github.com/CetaceanNation">
<img class="link-ico" src="./img/github.png" />
</a>
</div>
<div class="col">
<a href="https://www.linkedin.com/in/a-noel/">
<img class="link-ico" src="./img/linkedin.png" />
</a>
</div>
<div class="col">
<a href="mailto:axn5966@rit.edu">
<img class="link-ico" src="./img/email.png" />
</a>
</div>
</div>
</div>
</div>
</div>

BIN
public/img/email.png View File

Before After
Width: 512  |  Height: 512  |  Size: 6.9 KiB

BIN
public/img/github.png View File

Before After
Width: 512  |  Height: 512  |  Size: 8.4 KiB

BIN
public/img/graphExample.png View File

Before After
Width: 1292  |  Height: 1418  |  Size: 765 KiB Width: 1292  |  Height: 1418  |  Size: 1.1 MiB

BIN
public/img/linkedin.png View File

Before After
Width: 512  |  Height: 512  |  Size: 8.6 KiB

+ 33
- 27
public/index.html View File

@ -12,42 +12,48 @@
<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" />
<img id="logo" 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
</a>
</li>
</ul>
<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="row">
<div class="side-txt">
<div class="text-title text-center" style="padding-top: 15px;">
<div class="main container-fluid text-center">
<div class="home-content row align-items-center">
<div class="side-txt col">
<div class="text-title text-center" style="padding: 10px;">
<h1 class="m-title">How to get started:</h1>
</div>
<div class="text-content">
<p style="position: relative; padding-left: 10px; padding-right: 10px;">
Head over to the 'Generate graphs' page and enter the username of the user you want to generate your graph around.
<p style="position: relative; padding: 10px;">
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
connections between them.
</p>
</div>
</div>
<img class="side-img img-fluid" src="./img/graphExample.png" />
<img class="side-img img-fluid col" src="./img/graphExample.png" />
</div>
</div>
</body>

+ 6
- 4
public/js/friendsGraph.js View File

@ -193,7 +193,8 @@ function createConnections()
resolve();
}).catch(function(error)
{
reject(error);
console.log(error);
resolve();
});
});
}
@ -246,6 +247,7 @@ function createFriendsGraph(username, containerName, graphsTitle)
edges = [];
addSelfToGraph(username).then(function()
{
console.log("added self");
addFriends(username, API_FOLLOWERS).then(function()
{
addFriends(username, API_FOLLOWING).then(function()
@ -260,9 +262,9 @@ function createFriendsGraph(username, containerName, graphsTitle)
};
var network = new vis.Network(container, data, options);
network.on("click", function (params) {
network.on("click", function (params)
{
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN)
{
bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM)));
@ -273,7 +275,7 @@ function createFriendsGraph(username, containerName, graphsTitle)
})
}).catch(function(error)
{
console.log(error);
$("#" + graphsTitle).html("Error Fetching Data From API");
alert("Invalid User");
});
}

+ 2
- 1
public/js/githubAPI.js View File

@ -38,6 +38,7 @@ function queryAPIByUser(apiPath, user, successCallBack, errorCallBack) {
crossDomain: true,
dataType: "json",
success: successCallBack,
error:errorCallBack
error:errorCallBack,
timeout: 1500
});
}

+ 57
- 0
public/js/profileTimeLine.js View File

@ -0,0 +1,57 @@
var events = [];
// {id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'},
function addRepositories(userName, groupID)
{
return new Promise(function(resolve, reject)
{
})
}
function addOrgs(userName, groupID)
{
return new Promise(function(resolve, reject)
{
})
}
function createProfileTimeLine(username, containerName)
{
var container = document.getElementById(containerName);
var prom = [addRepositories(username, 1), addOrgs(username, 1)];
var groups = new vis.DataSet([
{id: 0, content: 'Organizations', value: 1},
{id: 1, content: 'Repositories', value: 2}
]);
Promise.all(prom).then(function()
{
// note that months are zero-based in the JavaScript Date object
var items = new vis.DataSet(events);
var options = {
// option groupOrder can be a property name or a sort function
// the sort function must compare two groups and return a value
// > 0 when a > b
// < 0 when a < b
// 0 when a == b
groupOrder: function (a, b) {
return a.value - b.value;
},
margin: {
item: 20,
axis: 40
}
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
});
}

+ 11
- 0
public/js/utilities.js View File

@ -0,0 +1,11 @@
function findGetParameter(parameterName)
{
var result = null,
tmp = [];
var items = location.search.substr(1).split("&");
for (var index = 0; index < items.length; index++) {
tmp = items[index].split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
}
return result;
}

+ 54
- 20
public/style.css View File

@ -19,7 +19,6 @@
background-color: rgb(208, 208, 208);
}
#header-title {
width: 30%;
font-size: 25px;
}
#logo {
@ -31,36 +30,25 @@
color: rgb(208, 208, 208);
}
#navigation {
width: 70%;
padding-right: 20px !important;
}
.error {
color: rgb(208, 208, 208);
position: absolute;
right: 20px;
}
#dcimg {
width: 300px;
}
.error {
color: rgb(208, 208, 208);
}
.big-title {
font-family: Comfortaa;
font-weight: bold;
font-size: 60px;
text-wrap: avoid;
}
.m-title {
font-family: Comfortaa;
font-weight: normal;
font-size: 150%;
}
.text-title {
height: 60px;
background-color: rgb(208, 208, 208);
border-radius: 20px 0px 0px 0px;
}
.text-content {
height: 335px;
background-color: rgb(242, 242, 242);
border-radius: 0px 0px 0px 20px;
}
.nav-sep {
position: relative;
left: 10px;
@ -81,16 +69,31 @@
color: rgb(250, 152, 33);
text-decoration: none;
}
.home-content {
padding: 20px;
max-height: 40px;
}
.side-img {
display: grid;
display: block;
position: relative;
width: 50%;
border-radius: 0px 20px 20px 0px;
height: 100%;
max-height: 500px;
max-width: 500px;
}
.side-txt {
display: grid;
display: block;
position: relative;
width: 50%;
max-width: 500px;
}
.text-title {
background-color: rgb(208, 208, 208);
border-radius: 20px 20px 0px 0px;
}
.text-content {
background-color: rgb(242, 242, 242);
border-radius: 0px 0px 20px 20px;
}
.main {
position: relative;
@ -98,4 +101,35 @@
}
body {
background-color: #232323;
}
@media (max-width: 767px) {
.big-title {
font-size: 30px;
}
.side-img {
display: none;
}
#navigation {
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, 0%);
width: 400px
}
.nav-item {
font-size: 19px;
}
#header-bar {
height: 100px;
}
#header-title {
left: 0px;
width: 20%;
}
#logo {
position: absolute;
left: 50%;
transform: translate(-50%, 0%);
height: 60px;
}
}

+ 4
- 2
routes/api.js View File

@ -33,8 +33,10 @@ function queryGitHubAPI(requestURL)
cache.put(requestURL, response.body);
}).catch(error =>
{
resolve(response.body);
cache.put(requestURL, response.body);
// resolve(response.body);
// cache.put(requestURL, response.body);
console.log(error);
reject(error);
});
}

Write Preview
Loading…
Cancel
Save