eased animations, improved tooltip of user bubble chart and worked on tag bubble chart

Felipe Bormann
1 parent 17776dcf
Showing 9 changed files with 113 additions and 48 deletions Show diff stats
analytics/static/.sass-cache/01cecb7b42e56765f6ed49ed3c70281ebdc742c7/general.sassc
analytics/static/analytics/general.css
analytics/static/analytics/general.css.map
analytics/static/analytics/general.sass
analytics/static/analytics/js/behavior.js
analytics/static/analytics/js/charts.js
analytics/templates/analytics/category.html
analytics/templates/analytics/general.html
analytics/views.py
@@ -40,21 +40,19 @@
   #most-used-tags-header h4 {
     margin-left: 1%; }
  
-.data-container {
-  width: 80px;
-  height: 40px; }
-
 .tag-cloud {
   border-radius: 25px;
-  color: #ffffff;
-  width: 80px; }
+  color: #ffffff; }
  
 .tag-name {
   color: #ffffff;
   font-size: 10px; }
  
 #left-data-selector {
-  background: linear-gradient(#0e8999, #6bf0ce); }
+  background: linear-gradient(#0e8999, #6bf0ce);
+  margin-top: 5%;
+  padding-top: 3%;
+  padding-bottom: 2%; }
  
 .chart {
   width: 30%;
@@ -64,11 +62,11 @@
  
 .selector {
   width: 90%;
-  height: 20%;
+  height: 40px;
   color: white;
   padding-left: 5px;
   background-color: #009688;
-  margin-top: 10px;
+  margin-top: 5px;
   border-radius: 0px 20px 20px 0px; }
   .selector p {
     padding-top: 10px;
@@ -87,13 +85,31 @@
   background-color: #52b7bd;
   width: 80%;
   margin-left: 2%;
-  margin-top: 2%;
+  margin-top: 4%;
+  position: relative;
   padding-left: 0;
   color: white;
+  border: 2px solid #52b7bd;
   transition: width 2s, height 2s, background-color 2s, transform 2s; }
   .most-accessed-list li {
     padding-left: 1%; }
  
+.most-accessed-list:after, .most-accessed-list:before {
+  bottom: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none; }
+
+.most-accessed-list:before {
+  border-width: 12px;
+  margin-left: -50%;
+  border-color: rgba(136, 183, 213, 0);
+  border-bottom-color: #52b7bd; }
+
 .most-accessed-item:hover {
   background-color: #3aa7ad; }
  
 {
 "version": 3,
-"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAEvB,eAAe;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIf,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;;AAEnD,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;;AAInB,qBAAO;EACH,UAAU,EAAE,MAAM;;AAE1B,aAAa;EACT,UAAU,EAAE,iCAAkC;EAC9C,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAEhB,mBAAmB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,EAAE;EACf,UAAU,EAAE,EAAE;EACd,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,sDAAsD;EAElE,sBAAE;IACE,YAAY,EAAE,EAAE;;AAExB,yBAAyB;EACrB,gBAAgB,EAAE,OAAO",
+"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAGvB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAKlB,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;EAC/C,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;;AAEtB,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;;AAInB,qBAAO;EACH,UAAU,EAAE,MAAM;;AAE1B,aAAa;EACT,UAAU,EAAE,iCAAkC;EAC9C,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAEhB,mBAAmB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,EAAE;EACf,UAAU,EAAE,EAAE;EACd,QAAQ,EAAE,QAAQ;EAClB,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,sDAAsD;EAElE,sBAAE;IACE,YAAY,EAAE,EAAE;;AAExB,qDAAqD;EACjD,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,GAAG;EACT,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,IAAI;;AAGxB,0BAA0B;EACtB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,sBAAsB;EACpC,mBAAmB,EAAE,OAAO;;AAEhC,yBAAyB;EACrB,gBAAgB,EAAE,OAAO",
 "sources": ["general.sass"],
 "names": [],
 "file": "general.css"
@@ -49,14 +49,11 @@ $title-color: #009688
     h4
         margin-left: 1%
  
-.data-container
-    width: 80px 
-    height: 40px
  
 .tag-cloud
     border-radius: 25px
     color: #ffffff
-    width: 80px
+
  
  
  
@@ -67,6 +64,9 @@ $title-color: #009688
  
 #left-data-selector
     background: linear-gradient( #0e8999, #6bf0ce )
+    margin-top: 5%
+    padding-top: 3%
+    padding-bottom: 2%
  
 .chart
     width: 30%
@@ -76,11 +76,11 @@ $title-color: #009688
  
 .selector
     width: 90%
-    height: 20%
+    height: 40px
     color: white
     padding-left: 5px
     background-color: #009688
-    margin-top: 10px
+    margin-top: 5px
     border-radius: 0px 20px 20px 0px
     p
         padding-top: 10px
@@ -101,13 +101,32 @@ $title-color: #009688
     background-color: #52b7bd
     width: 80%
     margin-left: 2%
-    margin-top: 2%
+    margin-top: 4%
+    position: relative
     padding-left: 0
     color: white
+    border: 2px solid #52b7bd
     transition: width 2s, height 2s, background-color 2s, transform 2s
  
     li
         padding-left: 1%
  
+.most-accessed-list:after, .most-accessed-list:before
+    bottom: 100%
+    left: 50%
+    border: solid transparent
+    content: " "
+    height: 0
+    width: 0
+    position: absolute
+    pointer-events: none
+
+
+.most-accessed-list:before
+    border-width: 12px
+    margin-left: -50%
+    border-color: rgba(136, 183, 213, 0)
+    border-bottom-color: #52b7bd
+
 .most-accessed-item:hover 
     background-color: #3aa7ad
 \ No newline at end of file
@@ -56,20 +56,13 @@ var selectors_options = {
  
 		$(e).after(string_build);
 		var new_elem = $(e).next();
-		new_elem.slideDown();
+		new_elem.slideDown({easing: 'easeInOutSine'}, 5000);
 		$(e).attr("opened", true);
  
 	},
 	deleteChildren: function(e){
-		console.log("delete children");
 		var most_accessed_list = $(e).next();
-		$(most_accessed_list).animate(
-			{height: 0,
-			 opacity: 0.1
-			}, 1000, function(){
-			$(this).remove(); //remove list from UI
-		});
-		
+		$(most_accessed_list).slideUp({easing: 'easeInOutSine'}, 1200);		
 		$(e).removeAttr("opened"); //remove attribute so it can call API again
 	},
 };
@@ -208,17 +208,17 @@ var charts = {
  
 	       	groups.on("mouseover", function(d){
 	       		//$("#"+"user_tooltip_"+d['user_id']).show();
-	       		tooltip_div.transition().duration(200).style("opacity", .9);
+	       		tooltip_div.transition().duration(500).style("opacity", .9);
 	       		tooltip_div.html(d['user'] + '</br>' +  d['count'] + ' acessos')
 	       		.style("left", (d3.event.pageX) + "px")
 	       		.style("top", (d3.event.pageY - 28) + "px");
-	       		console.log(d3.event.pageX);
-	       		console.log(d3.event.pageY);
 	       	});
  
  
 	       	groups.on("mouseout", function(d){
 	       		//$("#"+"user_tooltip_"+d['user_id']).hide();
+	       		tooltip_div.transition().duration(500).style("opacity", 0);
+	       		
 	       	});
  
  
@@ -253,7 +253,6 @@ var charts = {
 	       	simulation.nodes(dataset)
 	       		.on('tick', ticked); //so all data points are attached to it
  
-	       	console.log("finished simulation");
 	       	function ticked(){
 	       		groups.attr("transform", function(d){
 	       			return "translate(" + d.x + "," + d.y + ")";
@@ -371,7 +370,6 @@ var charts = {
 	       		return maximum
 	       	}
  
-	       	console.log(dataset);
  
 			var container_div = d3.select("#most-used-tags-body");
 			var svg = container_div.append("svg").attr("width", "100%").attr("height", height)
@@ -394,7 +392,7 @@ var charts = {
 			  return Math.floor(Math.random() * (max - min)) + min;
 			}
  
-	        var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]);
+	        var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,80]);
 	        var tag_cloud = svg.selectAll('.tag-cloud-div')
 	        .data(dataset)
 	        .enter()
@@ -409,7 +407,7 @@ var charts = {
 	        	return xScale(d['count'])*1.2;
 	        })
 	        .attr("height", function(d){
-	        	return xScale(d["count"])*0.8;
+	        	return xScale(d["count"])*0.4;
 	        })
 	        .attr("fill", function(d, i) {
 	            return color(getRandomInt(0,3));
@@ -422,8 +420,12 @@ var charts = {
 	       	.text(function(d){
 	       		return d['name'];
 	       	})
-	       	.attr("x", 20)
-	       	.attr("y", 25)
+	       	.attr("x", function(d){
+	       		return xScale(d['count'])*0.2;
+	       	})
+	       	.attr("y", function(d){
+	       		return xScale(d["count"])*0.2;
+	       	})
 	       	.attr("class", "tag-name")
 	       	.attr("fill", "#ffffff");
  
@@ -432,7 +434,7 @@ var charts = {
 		        .force("x", d3.forceX(width/2).strength(0.05))
 		        .force("y", d3.forceY(height/2).strength(0.05))
 		        .force("collide", d3.forceCollide(function(d){
-		        	return 30;
+		        	return xScale(d['count'])*0.4;
 		        }));
  
 		    //simulation
@@ -0,0 +1,25 @@
+{% extends 'base.html' %}
+
+{% load static i18n pagination %}
+{% load django_bootstrap_breadcrumbs %}
+{% block style %}
+    <link rel="stylesheet" type="text/css" href="{% static 'analytics/general.css' %}">  
+{% endblock style %}
+
+{% block javascript %}
+    <script type="text/javascript" src="{% static "analytics/js/charts.js" %}"></script>
+    <script type="text/javascript" src=" {% static "analytics/js/behavior.js" %} "></script>
+{% endblock javascript %}
+
+{% block breadcrumbs %}
+    {{ block.super }}
+    
+    {% trans 'Analytics Category' as category %}
+
+    {% breadcrumb category 'dashboard:view_general' %}
+{% endblock %}
+
+
+{% block content %}
+	test
+{% endblock content %}
 \ No newline at end of file
@@ -24,15 +24,17 @@
     <section id="core-subjects-options-div">
         <nav>
             <ul class="core-subjects-options report-menu-choice">
-            	<li class="active">
-            		{% trans "Platform Report" %}
-            	</li>
-            	<li>
-            		{% trans "Category Report" %}
-            	</li>
-            	<li>
-            		{% trans "Subject Report" %}
-            	</li>
+              
+                    <li class="active">
+                        {% trans "Platform Report" %}
+                    </li>
+                    <li>
+                        {% trans "Category Report" %}
+                    </li>
+                    <li>
+                        {% trans "Subject Report" %}
+                    </li>
+              
             </ul>
         </nav>
     </section>
 from django.shortcuts import render
  
-# Create your views here.
 from django.views import generic
 from django.db.models import Count
+from django.core.urlresolvers import reverse_lazy
  
 from subjects.models import Tag, Subject
 from topics.models import Resource
@@ -11,11 +11,19 @@ from django.http import HttpResponse, JsonResponse
 from log.models import Log
 import operator
 from django.utils.translation import ugettext_lazy as _
+from django.shortcuts import render, get_object_or_404, redirect
  
  
 class GeneralView(generic.TemplateView):
     template_name = "analytics/general.html"
  
+    def dispatch(self, request, *args, **kwargs):
+       
+        if not request.user.is_staff:
+            self.template_name = "analytics/category.html"
+        return super(GeneralView, self).dispatch(request, *args, **kwargs)
+
+
     def get_context_data(self, **kwargs):
         context = {}
  
@@ -72,7 +80,7 @@ def most_accessed_subjects(request):
  
     #order the values of the dictionary by the count in descendent order
     subjects = sorted(subjects.values(), key = lambda x: x['count'], reverse=True )
-    subjects = subjects[:30]
+    subjects = subjects[:5]
  
     return JsonResponse(subjects, safe=False)
...	...	@@ -40,21 +40,19 @@
40	40	#most-used-tags-header h4 {
41	41	margin-left: 1%; }
42	42
43		-.data-container {
44		- width: 80px;
45		- height: 40px; }
46		-
47	43	.tag-cloud {
48	44	border-radius: 25px;
49		- color: #ffffff;
50		- width: 80px; }
	45	+ color: #ffffff; }
51	46
52	47	.tag-name {
53	48	color: #ffffff;
54	49	font-size: 10px; }
55	50
56	51	#left-data-selector {
57		- background: linear-gradient(#0e8999, #6bf0ce); }
	52	+ background: linear-gradient(#0e8999, #6bf0ce);
	53	+ margin-top: 5%;
	54	+ padding-top: 3%;
	55	+ padding-bottom: 2%; }
58	56
59	57	.chart {
60	58	width: 30%;
...	...	@@ -64,11 +62,11 @@
64	62
65	63	.selector {
66	64	width: 90%;
67		- height: 20%;
	65	+ height: 40px;
68	66	color: white;
69	67	padding-left: 5px;
70	68	background-color: #009688;
71		- margin-top: 10px;
	69	+ margin-top: 5px;
72	70	border-radius: 0px 20px 20px 0px; }
73	71	.selector p {
74	72	padding-top: 10px;
...	...	@@ -87,13 +85,31 @@
87	85	background-color: #52b7bd;
88	86	width: 80%;
89	87	margin-left: 2%;
90		- margin-top: 2%;
	88	+ margin-top: 4%;
	89	+ position: relative;
91	90	padding-left: 0;
92	91	color: white;
	92	+ border: 2px solid #52b7bd;
93	93	transition: width 2s, height 2s, background-color 2s, transform 2s; }
94	94	.most-accessed-list li {
95	95	padding-left: 1%; }
96	96
	97	+.most-accessed-list:after, .most-accessed-list:before {
	98	+ bottom: 100%;
	99	+ left: 50%;
	100	+ border: solid transparent;
	101	+ content: " ";
	102	+ height: 0;
	103	+ width: 0;
	104	+ position: absolute;
	105	+ pointer-events: none; }
	106	+
	107	+.most-accessed-list:before {
	108	+ border-width: 12px;
	109	+ margin-left: -50%;
	110	+ border-color: rgba(136, 183, 213, 0);
	111	+ border-bottom-color: #52b7bd; }
	112	+
97	113	.most-accessed-item:hover {
98	114	background-color: #3aa7ad; }
99	115
...	...
1	1	{
2	2	"version": 3,
3		-"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAEvB,eAAe;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;;AAEhB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,KAAK,EAAE,IAAI;;AAIf,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;;AAEnD,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;;AAInB,qBAAO;EACH,UAAU,EAAE,MAAM;;AAE1B,aAAa;EACT,UAAU,EAAE,iCAAkC;EAC9C,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAEhB,mBAAmB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,EAAE;EACf,UAAU,EAAE,EAAE;EACd,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,sDAAsD;EAElE,sBAAE;IACE,YAAY,EAAE,EAAE;;AAExB,yBAAyB;EACrB,gBAAgB,EAAE,OAAO",
	3	+"mappings": "AAEA,YAAY;EACR,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,IAAI;EACd,KAAK,EAAE,IAAI;;AAEf,sBAAsB;EAClB,MAAM,EAAE,GAAG;EACX,OAAO,EAAE,KAAK;EACd,yBAAE;IACE,KAAK,EAbC,OAAO;EAejB,yBAAE;IACE,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;IACpB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IAEX,4BAAE;MACE,YAAY,EAAE,EAAE;MAChB,KAAK,EAAE,GAAG;MACV,KAAK,EAAE,KAAK;MAEZ,yCAAY;QACR,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;MAEvB,gCAAG;QACC,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,IAAI;QACX,UAAU,EAAE,MAAM;QAClB,aAAa,EAAE,IAAI;;AAInC,sBAAsB;EAClB,UAAU,EAAE,2CAA2C;EACvD,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,yBAAE;IACE,WAAW,EAAE,EAAE;;AAGvB,UAAU;EACN,aAAa,EAAE,IAAI;EACnB,KAAK,EAAE,OAAO;;AAKlB,SAAS;EACL,KAAK,EAAE,OAAO;EACd,SAAS,EAAE,IAAI;;AAGnB,mBAAmB;EACf,UAAU,EAAE,iCAAmC;EAC/C,UAAU,EAAE,EAAE;EACd,WAAW,EAAE,EAAE;EACf,cAAc,EAAE,EAAE;;AAEtB,MAAM;EACF,KAAK,EAAE,GAAG;EACV,KAAK,EAAE,IAAI;EACX,SAAE;IACE,KAAK,EA1EC,OAAO;;AA4ErB,SAAS;EACL,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,KAAK;EACZ,YAAY,EAAE,GAAG;EACjB,gBAAgB,EAAE,OAAO;EACzB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,iBAAiB;EAChC,WAAC;IACG,WAAW,EAAE,IAAI;IACjB,SAAS,EAAE,IAAI;;AAInB,qBAAO;EACH,UAAU,EAAE,MAAM;;AAE1B,aAAa;EACT,UAAU,EAAE,iCAAkC;EAC9C,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,GAAG;;AAEhB,mBAAmB;EACf,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,GAAG;EACV,WAAW,EAAE,EAAE;EACf,UAAU,EAAE,EAAE;EACd,QAAQ,EAAE,QAAQ;EAClB,YAAY,EAAE,CAAC;EACf,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,iBAAiB;EACzB,UAAU,EAAE,sDAAsD;EAElE,sBAAE;IACE,YAAY,EAAE,EAAE;;AAExB,qDAAqD;EACjD,MAAM,EAAE,IAAI;EACZ,IAAI,EAAE,GAAG;EACT,MAAM,EAAE,iBAAiB;EACzB,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,QAAQ,EAAE,QAAQ;EAClB,cAAc,EAAE,IAAI;;AAGxB,0BAA0B;EACtB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,sBAAsB;EACpC,mBAAmB,EAAE,OAAO;;AAEhC,yBAAyB;EACrB,gBAAgB,EAAE,OAAO",
4	4	"sources": ["general.sass"],
5	5	"names": [],
6	6	"file": "general.css"
...	...
...	...	@@ -49,14 +49,11 @@ $title-color: #009688
49	49	h4
50	50	margin-left: 1%
51	51
52		-.data-container
53		- width: 80px
54		- height: 40px
55	52
56	53	.tag-cloud
57	54	border-radius: 25px
58	55	color: #ffffff
59		- width: 80px
	56	+
60	57
61	58
62	59
...	...	@@ -67,6 +64,9 @@ $title-color: #009688
67	64
68	65	#left-data-selector
69	66	background: linear-gradient( #0e8999, #6bf0ce )
	67	+ margin-top: 5%
	68	+ padding-top: 3%
	69	+ padding-bottom: 2%
70	70
71	71	.chart
72	72	width: 30%
...	...	@@ -76,11 +76,11 @@ $title-color: #009688
76	76
77	77	.selector
78	78	width: 90%
79		- height: 20%
	79	+ height: 40px
80	80	color: white
81	81	padding-left: 5px
82	82	background-color: #009688
83		- margin-top: 10px
	83	+ margin-top: 5px
84	84	border-radius: 0px 20px 20px 0px
85	85	p
86	86	padding-top: 10px
...	...	@@ -101,13 +101,32 @@ $title-color: #009688
101	101	background-color: #52b7bd
102	102	width: 80%
103	103	margin-left: 2%
104		- margin-top: 2%
	104	+ margin-top: 4%
	105	+ position: relative
105	106	padding-left: 0
106	107	color: white
	108	+ border: 2px solid #52b7bd
107	109	transition: width 2s, height 2s, background-color 2s, transform 2s
108	110
109	111	li
110	112	padding-left: 1%
111	113
	114	+.most-accessed-list:after, .most-accessed-list:before
	115	+ bottom: 100%
	116	+ left: 50%
	117	+ border: solid transparent
	118	+ content: " "
	119	+ height: 0
	120	+ width: 0
	121	+ position: absolute
	122	+ pointer-events: none
	123	+
	124	+
	125	+.most-accessed-list:before
	126	+ border-width: 12px
	127	+ margin-left: -50%
	128	+ border-color: rgba(136, 183, 213, 0)
	129	+ border-bottom-color: #52b7bd
	130	+
112	131	.most-accessed-item:hover
113	132	background-color: #3aa7ad
114	133	\ No newline at end of file
...	...
...	...	@@ -56,20 +56,13 @@ var selectors_options = {
56	56
57	57	$(e).after(string_build);
58	58	var new_elem = $(e).next();
59		- new_elem.slideDown();
	59	+ new_elem.slideDown({easing: 'easeInOutSine'}, 5000);
60	60	$(e).attr("opened", true);
61	61
62	62	},
63	63	deleteChildren: function(e){
64		- console.log("delete children");
65	64	var most_accessed_list = $(e).next();
66		- $(most_accessed_list).animate(
67		- {height: 0,
68		- opacity: 0.1
69		- }, 1000, function(){
70		- $(this).remove(); //remove list from UI
71		- });
72		-
	65	+ $(most_accessed_list).slideUp({easing: 'easeInOutSine'}, 1200);
73	66	$(e).removeAttr("opened"); //remove attribute so it can call API again
74	67	},
75	68	};
...	...
...	...	@@ -208,17 +208,17 @@ var charts = {
208	208
209	209	groups.on("mouseover", function(d){
210	210	//$("#"+"user_tooltip_"+d['user_id']).show();
211		- tooltip_div.transition().duration(200).style("opacity", .9);
	211	+ tooltip_div.transition().duration(500).style("opacity", .9);
212	212	tooltip_div.html(d['user'] + '</br>' + d['count'] + ' acessos')
213	213	.style("left", (d3.event.pageX) + "px")
214	214	.style("top", (d3.event.pageY - 28) + "px");
215		- console.log(d3.event.pageX);
216		- console.log(d3.event.pageY);
217	215	});
218	216
219	217
220	218	groups.on("mouseout", function(d){
221	219	//$("#"+"user_tooltip_"+d['user_id']).hide();
	220	+ tooltip_div.transition().duration(500).style("opacity", 0);
	221	+
222	222	});
223	223
224	224
...	...	@@ -253,7 +253,6 @@ var charts = {
253	253	simulation.nodes(dataset)
254	254	.on('tick', ticked); //so all data points are attached to it
255	255
256		- console.log("finished simulation");
257	256	function ticked(){
258	257	groups.attr("transform", function(d){
259	258	return "translate(" + d.x + "," + d.y + ")";
...	...	@@ -371,7 +370,6 @@ var charts = {
371	370	return maximum
372	371	}
373	372
374		- console.log(dataset);
375	373
376	374	var container_div = d3.select("#most-used-tags-body");
377	375	var svg = container_div.append("svg").attr("width", "100%").attr("height", height)
...	...	@@ -394,7 +392,7 @@ var charts = {
394	392	return Math.floor(Math.random() * (max - min)) + min;
395	393	}
396	394
397		- var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,50]);
	395	+ var xScale = d3.scaleSqrt().domain([min(), max()]).range([10,80]);
398	396	var tag_cloud = svg.selectAll('.tag-cloud-div')
399	397	.data(dataset)
400	398	.enter()
...	...	@@ -409,7 +407,7 @@ var charts = {
409	407	return xScale(d['count'])*1.2;
410	408	})
411	409	.attr("height", function(d){
412		- return xScale(d["count"])*0.8;
	410	+ return xScale(d["count"])*0.4;
413	411	})
414	412	.attr("fill", function(d, i) {
415	413	return color(getRandomInt(0,3));
...	...	@@ -422,8 +420,12 @@ var charts = {
422	420	.text(function(d){
423	421	return d['name'];
424	422	})
425		- .attr("x", 20)
426		- .attr("y", 25)
	423	+ .attr("x", function(d){
	424	+ return xScale(d['count'])*0.2;
	425	+ })
	426	+ .attr("y", function(d){
	427	+ return xScale(d["count"])*0.2;
	428	+ })
427	429	.attr("class", "tag-name")
428	430	.attr("fill", "#ffffff");
429	431
...	...	@@ -432,7 +434,7 @@ var charts = {
432	434	.force("x", d3.forceX(width/2).strength(0.05))
433	435	.force("y", d3.forceY(height/2).strength(0.05))
434	436	.force("collide", d3.forceCollide(function(d){
435		- return 30;
	437	+ return xScale(d['count'])*0.4;
436	438	}));
437	439
438	440	//simulation
...	...
...	...	@@ -0,0 +1,25 @@
	1	+{% extends 'base.html' %}
	2	+
	3	+{% load static i18n pagination %}
	4	+{% load django_bootstrap_breadcrumbs %}
	5	+{% block style %}
	6	+ <link rel="stylesheet" type="text/css" href="{% static 'analytics/general.css' %}">
	7	+{% endblock style %}
	8	+
	9	+{% block javascript %}
	10	+ <script type="text/javascript" src="{% static "analytics/js/charts.js" %}"></script>
	11	+ <script type="text/javascript" src=" {% static "analytics/js/behavior.js" %} "></script>
	12	+{% endblock javascript %}
	13	+
	14	+{% block breadcrumbs %}
	15	+ {{ block.super }}
	16	+
	17	+ {% trans 'Analytics Category' as category %}
	18	+
	19	+ {% breadcrumb category 'dashboard:view_general' %}
	20	+{% endblock %}
	21	+
	22	+
	23	+{% block content %}
	24	+ test
	25	+{% endblock content %}
0	26	\ No newline at end of file
...	...
...	...	@@ -24,15 +24,17 @@
24	24	<section id="core-subjects-options-div">
25	25	<nav>
26	26	<ul class="core-subjects-options report-menu-choice">
27		- <li class="active">
28		- {% trans "Platform Report" %}
29		- </li>
30		- <li>
31		- {% trans "Category Report" %}
32		- </li>
33		- <li>
34		- {% trans "Subject Report" %}
35		- </li>
	27	+
	28	+ <li class="active">
	29	+ {% trans "Platform Report" %}
	30	+ </li>
	31	+ <li>
	32	+ {% trans "Category Report" %}
	33	+ </li>
	34	+ <li>
	35	+ {% trans "Subject Report" %}
	36	+ </li>
	37	+
36	38	</ul>
37	39	</nav>
38	40	</section>
...	...
1	1	from django.shortcuts import render
2	2
3		-# Create your views here.
4	3	from django.views import generic
5	4	from django.db.models import Count
	5	+from django.core.urlresolvers import reverse_lazy
6	6
7	7	from subjects.models import Tag, Subject
8	8	from topics.models import Resource
...	...	@@ -11,11 +11,19 @@ from django.http import HttpResponse, JsonResponse
11	11	from log.models import Log
12	12	import operator
13	13	from django.utils.translation import ugettext_lazy as _
	14	+from django.shortcuts import render, get_object_or_404, redirect
14	15
15	16
16	17	class GeneralView(generic.TemplateView):
17	18	template_name = "analytics/general.html"
18	19
	20	+ def dispatch(self, request, args, *kwargs):
	21	+
	22	+ if not request.user.is_staff:
	23	+ self.template_name = "analytics/category.html"
	24	+ return super(GeneralView, self).dispatch(request, args, *kwargs)
	25	+
	26	+
19	27	def get_context_data(self, **kwargs):
20	28	context = {}
21	29
...	...	@@ -72,7 +80,7 @@ def most_accessed_subjects(request):
72	80
73	81	#order the values of the dictionary by the count in descendent order
74	82	subjects = sorted(subjects.values(), key = lambda x: x['count'], reverse=True )
75		- subjects = subjects[:30]
	83	+ subjects = subjects[:5]
76	84
77	85	return JsonResponse(subjects, safe=False)
78	86
...	...