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 @@
	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	63	\ No newline at end of file
...	...
...	...	@@ -35,3 +35,5 @@ var change_language = {
35	35	}
36	36	}
37	37
	38	+
	39	+
...	...
...	...	@@ -28,37 +28,26 @@
28	28	<div class="carousel-inner" role="listbox">
29	29	<div class="item active">
30	30	<h2 class=" my-subjects-title"><b><i>{% trans "Most popular keywords" %}</i></b></h2>
31		- <div id="" class="col-md-12">
32		- <div class="users-cloud div-users-cloud">
33		- <ul class=" users-cloud">
34		- {% for tag in tags %}
35		- {% if tag.1 == 0 %}
36		- <li class="big"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
37		- {% elif tag.1 == 1 %}
38		- <li class="medium"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
39		- {% else %}
40		- <li class="small"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
41		- {% endif %}
	31	+ <div id="" class="col-md-12">
	32	+ <div class="users-cloud div-users-cloud">
	33	+ <ul class=" users-cloud">
	34	+ {% for tag in tags %}
	35	+ {% if tag.1 == 0 %}
	36	+ <li class="big"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
	37	+ {% elif tag.1 == 1 %}
	38	+ <li class="medium"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
	39	+ {% else %}
	40	+ <li class="small"><a href="{% url 'subjects:search' %}?search={{tag.0}}">{{tag.0}}</a></li>
	41	+ {% endif %}
42	42
43		-
44		- {% endfor %}
45		- </ul>
46		- </div>
47		- </div>
48		- </div>
49		-
50		- <div class="item">
51		-
52		- <img src="{% static "img/pt-br.png" %} " alt="Chania">
	43	+
	44	+ {% endfor %}
	45	+ </ul>
	46	+ </div>
	47	+ </div>
53	48	</div>
54	49
55		- <div class="item">
56		- <img src="{% static "img/en.png" %} " alt="Flower">
57		- </div>
58		-
59		- <div class="item">
60		- <img src="{% static "img/pt-br.png" %} " alt="Flower">
61		- </div>
	50	+
62	51	</div>
63	52
64	53	<!-- Left and right controls -->
...	...	@@ -93,6 +82,7 @@
93	82	</div>
94	83
95	84	<div id="modal_subject"></div>
	85	+ <script type="text/javascript" src="{% static "js/charts/home.js" %}"></script>
96	86	<script type="text/javascript" src="{% static "subjects/js/modal_subject.js" %}"></script>
97		- <script type="text/javascript" src="{% static 'js/category.js' %}"></script>
	87	+ <script type="text/javascript" src="{% static 'js/category.js' %}"></script>
98	88	{% endblock content %}
99	89	\ No newline at end of file
...	...
...	...	@@ -10,4 +10,5 @@ urlpatterns = [
10	10	url(r'^view_log/(?P<topic>[\w_-]+)/$', views.topic_view_log, name = 'view_log'),
11	11	url(r'^update_order/$', views.update_order, name = 'update_order'),
12	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	260
261	261	return JsonResponse({'message': 'ok'})
262	262
263		- return JsonResponse({'message': 'No data received'})
264	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)
...	...