finished adding correspondent and dynamic updating of heatmaps inside category view

Felipe Bormann
1 parent c0a86c45
Showing 3 changed files with 50 additions and 26 deletions Show diff stats
analytics/views.py
dashboards/static/dashboards/js/behavior_categories.js
dashboards/templates/dashboards/category.html
@@ -72,12 +72,10 @@ def most_active_users_in_a_month(request):
 def activity_in_timestamp(days, **kwargs):
     data = {}
     params = kwargs.get('params')
-    print(params)
     for day in days:
         if params.get('category_id'):
             category_id = params['category_id']
             day_count = Log.objects.filter(datetime__date = day, context__contains = {"category_id" : int(category_id)}).count()
-
         else:
             day_count = Log.objects.filter(datetime__date = day).count()
         data[day] = day_count
 $(document).ready(function(){
 	charts.most_used_tags('/analytics/get_category_tags/?category_id='+$("#category-selector").val());
+	//first call to month selector
+	var month = new Array();
+	month[0] = "January";
+	month[1] = "February";
+	month[2] = "March";
+	month[3] = "April";
+	month[4] = "May";
+	month[5] = "June";
+	month[6] = "July";
+	month[7] = "August";
+	month[8] = "September";
+	month[9] = "October";
+	month[10] = "November";
+	month[11] = "December";
+
+
+	$.get('/analytics/amount_active_users_per_day', { month: month[(new Date()).getMonth()], category_id: $("#category-selector").val() }).done(function(data){
+		charts.month_heatmap(data, '#upper-right-part', 'month-chart');
+	});
+	//first call to weekly chart
+ 	var today_date = new Date();
+ 	var date = (today_date.getMonth() + 1) + '/' + today_date.getDate() + '/' + today_date.getFullYear();
+ 	$.get('/analytics/get_days_of_the_week_log', {date: date, category_id:  $("#category-selector").val()}).done(function(data){
+    		charts.month_heatmap(data, '#bottom-right-part', 'weekly-chart');
+    });
+
+
 	$("#category-selector").on("change", function(e){
 		//when it changes, the tag chart is replaced and all others are.
 		var category_id = $(e.target).val();
 		charts.most_used_tags('/analytics/get_category_tags/?category_id='+category_id);
-
-		//first call to month selector
-		var month = new Array();
-		month[0] = "January";
-		month[1] = "February";
-		month[2] = "March";
-		month[3] = "April";
-		month[4] = "May";
-		month[5] = "June";
-		month[6] = "July";
-		month[7] = "August";
-		month[8] = "September";
-		month[9] = "October";
-		month[10] = "November";
-		month[11] = "December";
- 
-
 		$.get('/analytics/amount_active_users_per_day', { month: month[(new Date()).getMonth()], category_id: category_id  }).done(function(data){
-			charts.month_heatmap(data, '#right-side-heatmaps', 'month-chart');
+			charts.month_heatmap(data, '#upper-right-part', 'month-chart');
 		});
+
+		$.get('/analytics/get_days_of_the_week_log', {date: date, category_id:  $("#category-selector").val()}).done(function(data){
+    		charts.month_heatmap(data, '#bottom-right-part', 'weekly-chart');
+    	});
+
+    
 	});
@@ -37,7 +53,7 @@ $(document).ready(function(){
 			var date = $(this).val().split("/");
 			$.get('/analytics/amount_active_users_per_day', {month: date[0], year: date[1], category_id: $("#category-selector").val() }).done(function(data){
-				charts.month_heatmap(data, '#right-side-heatmaps', 'month-chart');
+				charts.month_heatmap(data, '#upper-right-part', 'month-chart');
 			});
 	});
@@ -49,8 +65,8 @@ $(document).ready(function(){
     }).on('dp.change', function(ev){
     	new_date = new Date(ev.date);
     	var date = (new_date.getMonth() + 1) + '/' + new_date.getDate() + '/' + new_date.getFullYear();
-    	$.get('/analytics/get_days_of_the_week_log', {date: date}).done(function(data){
-    		charts.month_heatmap(data, '#bottom-right-chart-body', 'weekly-chart');
+    	$.get('/analytics/get_days_of_the_week_log', {date: date,category_id:  $("#category-selector").val()}).done(function(data){
+    		charts.month_heatmap(data, '#bottom-right-part', 'weekly-chart');
     	});
     });
@@ -76,7 +76,10 @@
                 <div id="left-chart">
                 </div>
-                  <div id="month_selector_div">
+                
+
+                <div id="right-side-heatmaps">
+                      <div id="month_selector_div">
                         <h4>{% trans "Amount of access in: " %}
                         <select id="month_selector">
                             {% for month in months  %}
@@ -86,9 +89,16 @@
                         </select>
                         </h4>
                     </div>
+                    <div id="upper-right-part"></div>
-                <div id="right-side-heatmaps">
-                    
+                      <div class='input-group date'>
+                        <label>{% trans "Select the begin of the week: " %}</label>
+                        <input type='text' class="datepicker form-control"  />
+                        <span class="input-group-addon">
+                            <span class="glyphicon glyphicon-calendar"></span>
+                        </span>
+                    </div>
+                    <div id="bottom-right-part"></div>
                 </div>
             </div>
         </article>