Merge

5 years ago · 91cc68ed59
--- 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/FriendsGraph.html
+++ b/public/FriendsGraph.html
@ -15,49 +15,47 @@
    <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" />

 </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" 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>
    <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" 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>
@ -75,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/js/friendsGraph.js
+++ b/public/js/friendsGraph.js
@ -260,9 +260,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 +273,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;
 }