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

Created initial skeleton code for creating a timeline view of a user's repository.

pull/11/head
Jeffery Russell 5 years ago
parent
c59b68bd99
commit
e4ce9ed9e2
2 changed files with 201 additions and 0 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +144
    -0
      public/TimeLineGraph.html
  2. +57
    -0
      public/js/profileTimeLine.js

+ 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>

+ 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);
});
}

Write Preview
Loading…
Cancel
Save