From 81a91941ccb85a5d3aed72d62b4a265cfe7c9b82 Mon Sep 17 00:00:00 2001
From: Gautami Gupta <35326753+gautamig54@users.noreply.github.com>
Date: Fri, 22 Mar 2019 02:11:16 +0530
Subject: [PATCH] Adding the links below the graph for Tags page (#5209)

* add_links_below_graphs

* add_links_below_graphs2

* highlighting the active link
---
 .../javascripts/async_tag_subscriptions.js    | 10 +++++++--
 app/views/tag/index.html.erb                  | 21 +++++++++++++++----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/async_tag_subscriptions.js b/app/assets/javascripts/async_tag_subscriptions.js
index 8eebb3ff0be..72aa204d895 100644
--- 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,7 +24,7 @@ $(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));
@@ -32,3 +32,9 @@ $(document).ready(function()
       });
 });
 
+$(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
index d2d6fce9e59..027c0f1197d 100644
--- 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>