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

pull/11/head
CetaceanNation 5 years ago
parent
98a22fc393 e4ce9ed9e2
commit
91cc68ed59
9 changed files with 294 additions and 40 deletions
Unified 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. +43
    -34
      public/FriendsGraph.html
  5. +144
    -0
      public/TimeLineGraph.html
  6. +3
    -3
      public/js/friendsGraph.js
  7. +2
    -1
      public/js/githubAPI.js
  8. +57
    -0
      public/js/profileTimeLine.js
  9. +11
    -0
      public/js/utilities.js

+ 34
- 2
README.md View File

@ -1,9 +1,41 @@
# github-graphs
# Github-Graphs
Website for visualizing a persons github network. 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 # Built With
- [BootStrap](https://getbootstrap.com/) CSS Framework - [BootStrap](https://getbootstrap.com/) CSS Framework
- [jQuery](https://jquery.com/) - [jQuery](https://jquery.com/)
- [Vis JS](http://visjs.org/) - [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

+ 43
- 34
public/FriendsGraph.html View File

@ -15,49 +15,47 @@
<script src="js/githubAPI.js"></script> <script src="js/githubAPI.js"></script>
<script src="js/friendsGraph.js"></script> <script src="js/friendsGraph.js"></script>
<script src="js/profileGen.js"></script> <script src="js/profileGen.js"></script>
<script src="js/utilities.js"></script>
<script type="text/javascript" src="js/vis/vis.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" /> <link href="js/vis/vis-network.min.css" rel="stylesheet" type="text/css" />
</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" src="./logo.svg" />
</a>
</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 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> </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="main container">
<div class="row" 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">
<a class="navbar-brand">Create Graph</a> <a class="navbar-brand">Create Graph</a>
<form class="form-inline"> <form class="form-inline">
<input class="form-control mr-sm-2" id='txtUsername' type="search" placeholder="GitHub Username" aria-label="Search"> <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> </form>
</nav> </nav>
</div> </div>
@ -75,15 +73,26 @@
</body> </body>
<script> <script>
function createGraphs()
function fetchUserInput()
{
const inputedName = $("#txtUsername").val();
createGraphs(inputedName);
}
function createGraphs(username)
{ {
options.width = $("#myGraph").width() + "px"; options.width = $("#myGraph").width() + "px";
options.height = "700px"; options.height = "700px";
const inputedName = $("#txtUsername").val();
createFriendsGraph(inputedName, "myGraph", "graphLabel");
profileGen(inputedName, "profileGen");
createFriendsGraph(username, "myGraph", "graphLabel");
profileGen(username, "profileGen");
$("#searchBarTop").html(""); $("#searchBarTop").html("");
} }
if(findGetParameter("name") !== null)
{
createGraphs(findGetParameter("name"))
}
</script> </script>
</html> </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>

+ 3
- 3
public/js/friendsGraph.js View File

@ -260,9 +260,9 @@ function createFriendsGraph(username, containerName, graphsTitle)
}; };
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
network.on("click", function (params) {
network.on("click", function (params)
{
params.event = "[original event]"; 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) if(Number(this.getNodeAt(params.pointer.DOM)) !== NaN)
{ {
bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM))); bringUpProfileView(Number(this.getNodeAt(params.pointer.DOM)));
@ -273,7 +273,7 @@ function createFriendsGraph(username, containerName, graphsTitle)
}) })
}).catch(function(error) }).catch(function(error)
{ {
console.log(error);
$("#" + graphsTitle).html("Error Fetching Data From API"); $("#" + 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, crossDomain: true,
dataType: "json", dataType: "json",
success: successCallBack, 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;
}

Write Preview
Loading…
Cancel
Save