Improved graphs on contributors/tags pages

app/models/tag.rb

@@ -182,6 +182,46 @@ def weekly_tallies(type = 'note', span = 52)
     weeks
   end
 
+def contribution_graph_making(type = 'note', span = 52, time = Time.now)   
+    weeks = {}
+    week = span
+    count = 0;
+    tids = Tag.where('name IN (?)', [name])
+          .collect(&:tid)
+    nids = NodeTag.where('tid IN (?)', tids)
+                             .collect(&:nid)
+    while week >= 1
+        #initialising month variable with the month of the starting day 
+        #of the week
+        month = (time - (week*7 - 1).days).strftime('%m')
+        #loop for finding the maximum occurence of a month name in that week
+        #For eg. If this week has 3 days falling in March and 4 days falling
+        #in April, then we would give this week name as April and vice-versa
+        for i in 1..7 do
+            currMonth = (time - (week*7 - i).days).strftime('%m')
+            if month != currMonth
+                if i <= 4
+                    month = currMonth
+                end
+            end
+        end
+        #Now fetching the weekly data of notes or wikis
+        month = month.to_i
+
+        currWeek = Tag.nodes_for_period(
+          type, 
+          nids, 
+          (time.to_i - week.weeks.to_i).to_s,
+          (time.to_i - (week - 1).weeks.to_i).to_s
+        ).count(:all)
+
+        weeks[count] = [month, currWeek]
+        count += 1
+        week -= 1
+	end
+	weeks
+end 
+
   def self.nodes_for_period(type, nids, start, finish)
     Node.select(%i(created status type nid))
         .where(

app/views/tag/contributors.html.erb

@@ -3,37 +3,58 @@
   <% if @tag %>
     <div id="note-graph" style="height:100px;"></div>
 
+    <script src="https://cdn.jsdelivr.net/npm/frappe-charts@0.0.8/dist/frappe-charts.min.iife.js"></script>
     <script type="text/javascript">
-    (function () {
-
-      flotoptions_minimal = {
-        yaxis: { show: false },
-        xaxis: { show: true },
-        grid: {
-          borderWidth: 0,
-          //color: "#444",
-          markers: []
-        },
-        colors: [ "#08f", "#80f" ]
-      }
-
-      var notes = <%= @tag.weekly_tallies.to_a.sort.to_json %>
-
-      $.plot($("#note-graph"), [
-        {
-          data: notes,
-          hoverable: true,
- //       label: "Research Notes",
-          bars: {
-            show: true,
-            lineWidth: 0,
-            fillColor: "#08f",
-            barWidth: 0.5
-          }
+        var notes = <%= @tag.contribution_graph_making.to_a.sort.to_json %>
+        let months = ["J", "F", "M", "A", "M", "J", "J", "A","S", "O", "N", "D"];
+        let i;
+        let labels = new Array();
+        for(i = 0; i < notes.length; i++)
+            labels[i] = "";
+        let count = 0;
+        let prev = 0;
+        for(i = 0; i < notes.length; i++){
+            if(notes[i][1][0] != prev){
+                if(count == 4){
+                    let j;
+                    labels[i - 2] = months[prev - 1];
+                }
+                else{
+                    labels[i - 3] = months[prev - 1];
+                }
+                prev = notes[i][1][0];
+                count = 0;
+            }
+            count++;
         }
-      ],flotoptions_minimal)
-
-    })()
+        if(count >= 3){
+            labels[notes.length - 3] = months[prev - 1];
+        }
+        let title = "note";
+        let values = new Array();
+        for (j = 0; j < notes.length; j++){
+            values[j] = notes[j][1][1];
+        }
+        let data = new Object();
+        data.labels = labels;
+        let datasets = new Array();
+        let obj = new Object();
+        obj.title = title;
+        obj.values = new Array();
+        obj.values = values;
+        datasets[0] = new Object();
+        datasets[0] = obj;
+        data.datasets = datasets;
+        let chart = new Chart({
+            parent: "#note-graph",
+            data: data,
+            type: "bar",
+            height: 115,
+            x_axis_mode: "tick",
+            y_axis_mode: "span",
+            is_series: 1,
+            colors: ['purple']
+        });
     </script>
 
   <br />