pie chart is insert in carrossel with real data, still has to have biggest named…

… on the middle, chart title translated and legends

pie chart is insert in carrossel with real data, still has to have biggest named…
… on the middle, chart title translated and legends
fbormann
1 parent 101f3bf2
Showing 5 changed files with 104 additions and 30 deletions Show diff stats
amadeus/static/js/charts/home.js
amadeus/static/js/main.js
subjects/templates/subjects/initial.html
topics/urls.py
topics/views.py
@@ -0,0 +1,62 @@
+/*
+	HOME CHARTS
+*/
+
+//Adding this code by @jshanley to create a filter to look for the last child
+
+d3.selection.prototype.first = function() {
+  return d3.select(this[0]);
+};
+d3.selection.prototype.last = function() {
+  var last = this.size() - 1;
+  return d3.select(this[last]);
+};
+
+var resource_donut_chart = {
+	build: function(url){
+		$.get(url, function(dataset){
+			
+
+	        var width = 360;
+	        var height = 400;
+	        var radius = Math.min(width, height) / 2;
+
+	        var color = d3.scaleOrdinal(d3.schemeCategory20c);
+	        var new_div = d3.select(".carousel-inner").append("div").attr("class","item");
+	        var svg = new_div.append("svg").attr("width", width).attr("height", height)
+	        	.style("margin","auto")
+	        	.style("display","block")
+	        	.append('g')
+	          	.attr('transform', 'translate(' + (width / 2) +
+	            ',' + (height / 2) + ')');
+	      
+
+	        var donutInner = 50;
+	        var arc = d3.arc()
+	          .innerRadius(radius - donutInner)
+	          .outerRadius(radius);
+
+	        svg.append("text")
+	        .attr("x", (width / 2))             
+        	.attr("y", 0 - (height / 2))
+        	.attr("text-anchor", "middle")  
+        	.style("font-size", "16px") 
+        	.text("Recurso mais utilizado");
+
+	        var pie = d3.pie()
+	          .value(function(d) { return d[1]; })
+	          .sort(null);
+
+	        var path = svg.selectAll('path')
+	          .data(pie(dataset))
+	          .enter()
+	          .append('path')
+	          .attr('d', arc)
+	          .attr('fill', function(d, i) {
+	            return color(i);
+	          });
+		}) // end of the get method
+	}
+}
+
+resource_donut_chart.build('/topics/count_resources/');
 \ No newline at end of file
@@ -35,3 +35,5 @@ var change_language = {
 	}
 }
+
+
@@ -28,37 +28,26 @@
   <div class="carousel-inner" role="listbox">
     <div class="item active">
      	<h2 class=" my-subjects-title"><b><i>{% trans "Most popular keywords" %}</i></b></h2>
-	<div id="" class="col-md-12">
-		<div class="users-cloud div-users-cloud">
-			<ul class=" users-cloud">
-				{% for tag in tags %}
-					{% if tag.1 == 0 %}
-						<li class="big"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
-					{% elif tag.1 == 1 %}
-						<li class="medium"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
-					{% else %}
-						<li class="small"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
-					{% endif %}
+      	<div id="" class="col-md-12">
+      		<div class="users-cloud div-users-cloud">
+      			<ul class=" users-cloud">
+      				{% for tag in tags %}
+      					{% if tag.1 == 0 %}
+      						<li class="big"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
+      					{% elif tag.1 == 1 %}
+      						<li class="medium"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
+      					{% else %}
+      						<li class="small"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
+      					{% endif %}
-					
-				{% endfor %}
-			</ul>
-		</div>
-	</div>
-    </div>
-
-    <div class="item">
-    	
-      <img src="{% static "img/pt-br.png" %} " alt="Chania">
+      					
+      				{% endfor %}
+      			</ul>
+      		</div>
+      	</div>
     </div>
-    <div class="item">
-      <img src="{% static "img/en.png" %} " alt="Flower">
-    </div>
-
-    <div class="item">
-      <img src="{% static "img/pt-br.png" %} " alt="Flower">
-    </div>
+   
   </div>
   <!-- Left and right controls -->
@@ -93,6 +82,7 @@
 	</div>
 	<div id="modal_subject"></div>
+  <script type="text/javascript" src="{% static "js/charts/home.js" %}"></script>
 	<script type="text/javascript" src="{% static "subjects/js/modal_subject.js" %}"></script>
-    <script type="text/javascript" src="{% static 'js/category.js' %}"></script>
+  <script type="text/javascript" src="{% static 'js/category.js' %}"></script>
 {% endblock content %}
 \ No newline at end of file
@@ -10,4 +10,5 @@ urlpatterns = [
 	url(r'^view_log/(?P<topic>[\w_-]+)/$', views.topic_view_log, name = 'view_log'),
 	url(r'^update_order/$', views.update_order, name = 'update_order'),
 	url(r'^update_resource_order/$', views.update_resource_order, name = 'update_resource_order'),
+	url(r'^count_resources/$', views.getResourceCount, name='resource_count'),
 ]
@@ -260,4 +260,23 @@ def update_resource_order(request):
 		return JsonResponse({'message': 'ok'})
-	return JsonResponse({'message': 'No data received'})
 \ No newline at end of file
+	return JsonResponse({'message': 'No data received'})
+
+
+def getResourceCount(request):
+	resources = Resource.objects.distinct()
+	
+	data = {}
+	for resource in resources:
+		key = resource.__dict__['_my_subclass']
+		if key in data.keys():
+			data[key] = data[key] + 1
+		else:
+			data[key] = 1
+	
+	data["test"] = 30
+	data["azul"] = 20
+	real_data = []	
+	for item in data.items():
+		real_data.append(item)
+	return JsonResponse(real_data, safe=False)
	@@ -0,0 +1,62 @@		@@ -0,0 +1,62 @@
		1	+/*
		2	+ HOME CHARTS
		3	+*/
		4	+
		5	+//Adding this code by @jshanley to create a filter to look for the last child
		6	+
		7	+d3.selection.prototype.first = function() {
		8	+ return d3.select(this[0]);
		9	+};
		10	+d3.selection.prototype.last = function() {
		11	+ var last = this.size() - 1;
		12	+ return d3.select(this[last]);
		13	+};
		14	+
		15	+var resource_donut_chart = {
		16	+ build: function(url){
		17	+ $.get(url, function(dataset){
		18	+
		19	+
		20	+ var width = 360;
		21	+ var height = 400;
		22	+ var radius = Math.min(width, height) / 2;
		23	+
		24	+ var color = d3.scaleOrdinal(d3.schemeCategory20c);
		25	+ var new_div = d3.select(".carousel-inner").append("div").attr("class","item");
		26	+ var svg = new_div.append("svg").attr("width", width).attr("height", height)
		27	+ .style("margin","auto")
		28	+ .style("display","block")
		29	+ .append('g')
		30	+ .attr('transform', 'translate(' + (width / 2) +
		31	+ ',' + (height / 2) + ')');
		32	+
		33	+
		34	+ var donutInner = 50;
		35	+ var arc = d3.arc()
		36	+ .innerRadius(radius - donutInner)
		37	+ .outerRadius(radius);
		38	+
		39	+ svg.append("text")
		40	+ .attr("x", (width / 2))
		41	+ .attr("y", 0 - (height / 2))
		42	+ .attr("text-anchor", "middle")
		43	+ .style("font-size", "16px")
		44	+ .text("Recurso mais utilizado");
		45	+
		46	+ var pie = d3.pie()
		47	+ .value(function(d) { return d[1]; })
		48	+ .sort(null);
		49	+
		50	+ var path = svg.selectAll('path')
		51	+ .data(pie(dataset))
		52	+ .enter()
		53	+ .append('path')
		54	+ .attr('d', arc)
		55	+ .attr('fill', function(d, i) {
		56	+ return color(i);
		57	+ });
		58	+ }) // end of the get method
		59	+ }
		60	+}
		61	+
		62	+resource_donut_chart.build('/topics/count_resources/');
0	\ No newline at end of file	63	\ No newline at end of file
	@@ -35,3 +35,5 @@ var change_language = {		@@ -35,3 +35,5 @@ var change_language = {
35	}	35	}
36	}	36	}
37		37
		38	+
		39	+
	@@ -10,4 +10,5 @@ urlpatterns = [		@@ -10,4 +10,5 @@ urlpatterns = [
10	url(r'^view_log/(?P<topic>[\w_-]+)/$', views.topic_view_log, name = 'view_log'),	10	url(r'^view_log/(?P<topic>[\w_-]+)/$', views.topic_view_log, name = 'view_log'),
11	url(r'^update_order/$', views.update_order, name = 'update_order'),	11	url(r'^update_order/$', views.update_order, name = 'update_order'),
12	url(r'^update_resource_order/$', views.update_resource_order, name = 'update_resource_order'),	12	url(r'^update_resource_order/$', views.update_resource_order, name = 'update_resource_order'),
		13	+ url(r'^count_resources/$', views.getResourceCount, name='resource_count'),
13	]	14	]
	@@ -260,4 +260,23 @@ def update_resource_order(request):		@@ -260,4 +260,23 @@ def update_resource_order(request):
260		260
261	return JsonResponse({'message': 'ok'})	261	return JsonResponse({'message': 'ok'})
262		262
263	- return JsonResponse({'message': 'No data received'})
264	\ No newline at end of file	263	\ No newline at end of file
		264	+ return JsonResponse({'message': 'No data received'})
		265	+
		266	+
		267	+def getResourceCount(request):
		268	+ resources = Resource.objects.distinct()
		269	+
		270	+ data = {}
		271	+ for resource in resources:
		272	+ key = resource.__dict__['_my_subclass']
		273	+ if key in data.keys():
		274	+ data[key] = data[key] + 1
		275	+ else:
		276	+ data[key] = 1
		277	+
		278	+ data["test"] = 30
		279	+ data["azul"] = 20
		280	+ real_data = []
		281	+ for item in data.items():
		282	+ real_data.append(item)
		283	+ return JsonResponse(real_data, safe=False)