Adding the links below the graph for Tags page (publiclab#5209)

* add_links_below_graphs * add_links_below_graphs2 * highlighting the active link
SrinandanPai · Mar 21, 2019 · 1ed42f2 · 1ed42f2
1 parent 5c4a2f5
commit 1ed42f2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/app/assets/javascripts/async_tag_subscriptions.js b/app/assets/javascripts/async_tag_subscriptions.js
@@ -1,4 +1,4 @@
-$(document).ready(function() 
+$(document).ready(function()
 {
       $('#taginput').typeahead({
         items: 8,
@@ -24,11 +24,17 @@ $(document).ready(function()
 	    var data_recv = JSON.parse(JSON.stringify(status));
 	    notyNotification('relax', 3000, 'success', 'top', data_recv.message + 'Click <a href="../subscriptions"> here </a> to manage your subscriptions. ');
 	    var html_new = '<a rel="tooltip" title=Following class="btn btn-default btn-sm active" href="/unsubscribe/tag/'+ data_recv.tagname + '"> <i class="fa fa-user-plus" aria-hidden="true"></i>Following</a>';
-	    $('#follow-unfollow-column-'+data_recv.id).html(html_new); 
+	    $('#follow-unfollow-column-'+data_recv.id).html(html_new);
 	  });
       $('.index-follow-buttons').on('ajax:error', function(data, status, xhr){
         var data_recv = JSON.parse(JSON.stringify(status));
         notyNotification('relax', 3000, 'error', 'top', data_recv.message + 'Click <a href="../subscriptions"> here </a> to manage your subscriptions. ');
       });
 });
 
+$(document).ready(function(){
+    $('a').click(function(){
+        $('a').removeClass("active");
+        $(this).addClass("active");
+    });
+  });
diff --git a/app/views/tag/index.html.erb b/app/views/tag/index.html.erb
@@ -2,7 +2,7 @@
 <div class="col-md-6">
   <h1 style="font-family:Junction Light;"><%= t('tag.index.popular_tags') %></h1>
 
-  <% cache('feature_tags-header', skip_digest: true) do %> 
+  <% cache('feature_tags-header', skip_digest: true) do %>
     <%= feature('tags-header') %>
   <% end %>
 
@@ -15,7 +15,7 @@
       <button type="submit" rel="tooltip" title="View content with the entered title" class="btn btn-primary-outline" style="margin-left: -40px;background-color: transparent;"><i class="fa fa-search" style="color: #ccc;"></i></button>
     </span>
   </div>
-  </form> 
+  </form>
   <br/><br/>
 
   <table class="table">
@@ -56,7 +56,20 @@
 <div class="text-center"> <%= will_paginate @tags, :renderer => BootstrapPagination::Rails if @paginated %></div>
 </div>
 
+<style>
+  .active{
+    color: red;
+  }
+</style>
+
 <div class="col-md-6">
-<br><br>
-<iframe src="stats/graph.html?limit=50" height="500" width="100%" frameborder="0" ></iframe>
+  <br><br>
+  <iframe id="myImage" src="stats/graph.html?limit=50" height="500" width="100%" frameborder="0" ></iframe>
+  <h6 class="text-right" style="color:#ccc;">Tags most commonly used, linked by how often they are used together.<br>
+    View <a style="cursor: pointer; a:active: color: red;" onclick="document.getElementById('myImage').src='stats/graph.html?limit=50'"><u>50</u></a> |
+    <a style="cursor: pointer;" onclick="document.getElementById('myImage').src='stats/graph.html?limit=100'"><u>100</u></a> |
+    <a style="cursor: pointer;" onclick="document.getElementById('myImage').src='stats/graph.html?limit=250'"><u>250</u></a> |
+    <a style="cursor: pointer;" onclick="document.getElementById('myImage').src='stats/graph.html?limit=500'"><u>500</u></a>
+  </h6>
+
 </div>