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

5 years ago · 63884e93b3
--- a/README.md
+++ b/README.md
@ -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. 
--- a/doc/graphExample.png
+++ b/doc/graphExample.png
--- a/doc/javaScript.jpg
+++ b/doc/javaScript.jpg
--- a/public/404.html
+++ b/public/404.html
@ -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">
--- a/public/FriendsGraph.html
+++ b/public/FriendsGraph.html
@ -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>
--- a/public/TimeLineGraph.html
+++ b/public/TimeLineGraph.html
@ -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>
--- a/public/about.css
+++ b/public/about.css
@ -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;
    }
 }
--- a/public/about.html
+++ b/public/about.html
@ -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>
--- a/public/img/email.png
+++ b/public/img/email.png
--- a/public/img/github.png
+++ b/public/img/github.png
--- a/public/img/graphExample.png
+++ b/public/img/graphExample.png
--- a/public/img/linkedin.png
+++ b/public/img/linkedin.png
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/public/js/friendsGraph.js
+++ b/public/js/friendsGraph.js
@ -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");
    });
 }
--- a/public/js/githubAPI.js
+++ b/public/js/githubAPI.js
@ -38,6 +38,7 @@ function queryAPIByUser(apiPath, user, successCallBack, errorCallBack) {
        crossDomain: true,
        dataType: "json",
        success: successCallBack,
        error:errorCallBack
        error:errorCallBack,
        timeout: 1500
    });
 }
--- a/public/js/profileTimeLine.js
+++ b/public/js/profileTimeLine.js
@ -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);
    });
 }
--- a/public/js/utilities.js
+++ b/public/js/utilities.js
@ -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;
 }
--- a/public/style.css
+++ b/public/style.css
@ -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;
    }
 }
--- a/routes/api.js
+++ b/routes/api.js
@ -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);
            });
        }