added abbility to choose circle mode for visualizing follower network

julidoehler · Jan 29, 2012 · 3cbdd08 · 3cbdd08
1 parent f3e86b5
commit 3cbdd08
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/lib/githubviz.rb b/lib/githubviz.rb
@@ -66,7 +66,7 @@ def process_data
 
   if @user
 
-    @api = GitHubV3API.new('c1616feca6aa3e63655dd92766a475c2227ed6a0')
+    @api = GitHubV3API.new('')
 
     @data[@user] = @api.get("/users/#{@user}")
     @data[@user]['level'] = 0
@@ -80,7 +80,7 @@ def process_data
 
 get '/repo_viz' do
   @user = params[:user]
-  @api = GitHubV3API.new('c1616feca6aa3e63655dd92766a475c2227ed6a0')
+  @api = GitHubV3API.new('')
   user_data = @api.users.get(@user)
   my_repos = @api.repos.list
   page = 1
@@ -174,4 +174,9 @@ def process_data
   erb :commit
 end
 
+get '/circle_viz' do
+  @user = params[:user]
+  erb :circle
+end
+
 end
diff --git a/lib/views/circle.erb b/lib/views/circle.erb
@@ -0,0 +1,6 @@
+<h1>Circle Mode</h1>
+<div class="gallery"><%= @user %></div>
+
+
+
+
diff --git a/lib/views/follower.erb b/lib/views/follower.erb
@@ -13,6 +13,30 @@
          		});
 
          	}); 
+         	$('#circle_mode').click(function(ev){
+          		ev.preventDefault();
+		        $.ajax({
+		            url: "/circle_viz",
+		            data: "user="+$("#viz_form input:first").val(),
+		            dataType: "html",
+		            success: function(data) {
+		              $('#chart').html(data);
+		        	}
+          		});
+        	});
+        	$('#network_mode').click(function(ev){
+	          	ev.preventDefault();
+
+			    $.ajax({
+			            url: "/follower_viz",
+			            data: $("#viz_form").serialize(),
+			            dataType: "html",
+			            success: function(data) {
+			              $('#viz').html(data);
+			        	}
+	          	});
+        	});
+
         });
     </script>
     <div id="viz">
@@ -28,8 +52,12 @@
       			<input type="submit" value="2 Level">
       			<input type="hidden" name="level" value="2">
       		</form>
+	      	<div class="mode">
+	    	<a href="#" id ="circle_mode" class="mode">Circle Mode</a>
+	    	<a href="#" id ="network_mode" class="mode">Network Mode</a>
+	    	</div>
     	</div>
-    	<div style="float:right;padding-right:23%">
+    	<div style="float:right;padding-right:20%">
     		<h3><%= @user%>'s network of followers</h3>
     		<p>This visualization shows the user's network of followers in 1 level or 2 levels.<br/> 
     		In the 1st level all gitusers which are directly following <%=@user%> are displayed. <br/> 

diff --git a/lib/views/index.erb b/lib/views/index.erb
@@ -25,10 +25,13 @@
           });
 
           //show the link to the repo_viz (don't forget: we are still in the submit event!)
-	  $('#viz_network').append($("<strong>Follower</strong>"));
-          $('#viz_repos').append($("<strong>Growth</strong>"));
-	  $('#viz_commits').append($("<strong>Commit Activity</strong>"));
-          $('#menu').show();
+        $('#viz_network').empty();
+      	$('#viz_repos').empty();
+	  	$('#viz_commits').empty();
+	  	$('#viz_network').append($("<strong>Follower</strong>"));
+      	$('#viz_repos').append($("<strong>Growth</strong>"));
+	  	$('#viz_commits').append($("<strong>Commit Activity</strong>"));
+      	$('#menu').show();
 
         });
 
@@ -49,7 +52,7 @@
 
         });
 
-	$('#viz_repos').click(function(ev){
+		$('#viz_repos').click(function(ev){
           //this happens if we click our new shiny link with the submitted username in it
 
           //do you remember?! :)
@@ -65,7 +68,7 @@
           });
 
         });
-	$('#viz_commits').click(function(ev){
+		$('#viz_commits').click(function(ev){
           //this happens if we click our new shiny link with the submitted username in it
 
           //do you remember?! :)
@@ -81,7 +84,7 @@
           });
 
         });
-
+        
       });
     </script>
     <style>
@@ -144,6 +147,12 @@
       .table_text{text-align: left;
       }
 
+	  .mode{
+	  	clear: both;
+		font-size: 10pt;
+		padding: 5px 5px 0 0;
+	  }
+
     </style>
   </head>
   <body>