{% extends "base.html" %} 
{% load i18n %} 
{% load display_functions %} 
{% if user.is_authenticated %}
	{% block extra_scripts %}
	<script type='text/javascript' src='https://www.google.com/jsapi'></script>
	<script type="text/javascript">
	
		// Load the Visualization API and the piechart package.
		google.load('visualization', '1.0', {'packages':['corechart']});
	
		// Set a callback to run when the Google Visualization API is loaded.
		google.setOnLoadCallback(drawChart);
		function drawChart() {
	
			var data = new google.visualization.DataTable();
			data.addColumn('string', "{% trans 'Month/Year' %}");
			data.addColumn('number', "{% trans 'Total' %}");
			
			data.addRows( {{ user_registrations|length }} );
			
			{% for u in user_registrations %}
				data.setValue({{ forloop.counter0 }},0,'{{ u.month }}-{{ u.year }}');
				data.setValue({{ forloop.counter0 }},1,{{ u.count }});
			{% endfor %}
	
	        var chart = new google.visualization.AreaChart(document.getElementById('user_registrations_chart_div'));
	        chart.draw(data, {	width: '100%', 
	                			height: 400,
	                			vAxis: {minValue:0},
	                			pointSize:3,
	                			chartArea: {left:45,width:"90%",height:"75%"},
	                			backgroundColor: 'transparent',
	                			legend: 'none',
	                			series: [{areaOpacity:0.2}],
	                			title: '{% trans 'User Registrations (by month)' %}'
	                			});
	        
	        var data2 = new google.visualization.DataTable();
			data2.addColumn('string', "{% trans 'Month/Year' %}");
			data2.addColumn('number', "{% trans 'Total' %}");
			
			data2.addRows( {{ user_registrations|length }} );
			
			count = 0;
			{% for u in user_registrations %}
				count += {{ u.count }};
				data2.setValue({{ forloop.counter0 }},0,'{{ u.month }}-{{ u.year }}');
				data2.setValue({{ forloop.counter0 }},1,count);
			{% endfor %}
	
	        var chart2 = new google.visualization.AreaChart(document.getElementById('user_registrations_cumulative_chart_div'));
	        chart2.draw(data2, {	width: '100%', 
	                			height: 400,
	                			vAxis: {minValue:0},
	                			pointSize:3,
	                			chartArea: {left:45,width:"90%",height:"75%"},
	                			backgroundColor: 'transparent',
	                			legend: 'none',
	                			series: [{areaOpacity:0.2}],
	                			title: '{% trans 'User Registrations (cumulative)' %}'
	                			});
	        
	        var data3 = new google.visualization.DataTable();
			data3.addColumn('string', "{% trans 'Country' %}");
			data3.addColumn('number', "{% trans 'Total' %}");
			
			data3.addRows( {{ country_activity|length }} );
			
			count = 0;
			{% for ca in country_activity %}
				data3.setValue({{ forloop.counter0 }},0,'{{ ca.country_name }}');
				data3.setValue({{ forloop.counter0 }},1,{{ ca.hits_percent|floatformat:1 }});
			{% endfor %}
	
			var options3 = {
			          title: '{% trans 'Activity by Country (top 20 + others)' %}',
			          width: '50%',
			          height: 400,
			          chartArea: {left:45,top:40,width:"90%",height:"75%"},
			          backgroundColor: 'transparent',
			        };

			var chart3 = new google.visualization.PieChart(document.getElementById('activity_by_country_chart_div'));
			chart3.draw(data3, options3);

			var dataLang = new google.visualization.DataTable();
			dataLang.addColumn('string', "{% trans 'Language' %}");
			dataLang.addColumn('number', "{% trans 'Total' %}");
			
			dataLang.addRows( {{ languages|length }} );
			
			count = 0;
			{% for l in languages %}
				dataLang.setValue({{ forloop.counter0 }},0,'{{ l.lang }}');
				dataLang.setValue({{ forloop.counter0 }},1,{{ l.hits_percent|floatformat:1 }});
			{% endfor %}
	
			var optionsLang = {
			          title: '{% trans 'Activity by Language (top 10 + others)' %}',
			          width: '50%',
			          height: 400,
			          chartArea: {left:45,top:40,width:"90%",height:"75%"},
			          backgroundColor: 'transparent',
			        };

			var chartLang = new google.visualization.PieChart(document.getElementById('activity_by_language_chart_div'));
			chartLang.draw(dataLang, optionsLang);
			
			var data4 = new google.visualization.DataTable();
			data4.addColumn('string', "{% trans 'Month/Year' %}");
			data4.addColumn('number', "{% trans 'Total' %}");
			
			data4.addRows( {{ course_downloads|length }} );
			
			{% for cd in course_downloads %}
				data4.setValue({{ forloop.counter0 }},0,'{{ cd.month }}-{{ cd.year }}');
				data4.setValue({{ forloop.counter0 }},1,{{ cd.count }});
			{% endfor %}
	
	        var chart4 = new google.visualization.AreaChart(document.getElementById('course_downloads_chart_div'));
	        chart4.draw(data4, {	width: '100%', 
	                			height: 400,
	                			vAxis: {minValue:0},
	                			pointSize:3,
	                			chartArea: {left:45,width:"90%",height:"75%"},
	                			backgroundColor: 'transparent',
	                			legend: 'none',
	                			series: [{areaOpacity:0.2}],
	                			title: '{% trans 'Course Downloads (by month)' %}'
	                			});
	        
	        var data5 = new google.visualization.DataTable();
			data5.addColumn('string', "{% trans 'Month/Year' %}");
			data5.addColumn('number', "{% trans 'Total' %}");
			
			data5.addRows( {{ user_registrations|length }} );
			
			count = 0;
			{% for cd in course_downloads %}
				count += {{ cd.count }};
				data5.setValue({{ forloop.counter0 }},0,'{{ cd.month }}-{{ cd.year }}');
				data5.setValue({{ forloop.counter0 }},1,count);
			{% endfor %}
	
	        var chart5 = new google.visualization.AreaChart(document.getElementById('course_downloads_cumulative_chart_div'));
	        chart5.draw(data5, {	width: '100%', 
	                			height: 400,
	                			vAxis: {minValue:0},
	                			pointSize:3,
	                			chartArea: {left:45,width:"90%",height:"75%"},
	                			backgroundColor: 'transparent',
	                			legend: 'none',
	                			series: [{areaOpacity:0.2}],
	                			title: '{% trans 'Course Downloads (cumulative)' %}'
	                			});
			   
	        var data6 = new google.visualization.DataTable();
			data6.addColumn('string', "{% trans 'Month/Year' %}");
			data6.addColumn('number', "{% trans 'Total' %}");
			
			data6.addRows( {{ course_activity|length }} );
			
			{% for ca in course_activity %}
				data6.setValue({{ forloop.counter0 }},0,'{{ ca.month }}-{{ ca.year }}');
				data6.setValue({{ forloop.counter0 }},1,{{ ca.count }});
			{% endfor %}
	
	        var chart6 = new google.visualization.AreaChart(document.getElementById('course_activity_chart_div'));
	        chart6.draw(data6, {	width: '100%', 
	                			height: 400,
	                			vAxis: {minValue:0},
	                			pointSize:3,
	                			chartArea: {left:45,width:"90%",height:"75%"},
	                			backgroundColor: 'transparent',
	                			legend: 'none',
	                			series: [{areaOpacity:0.2}],
	                			title: '{% trans 'Course Activity (by month)' %}'
	                			});
	        
	        var data7 = new google.visualization.DataTable();
			data7.addColumn('string', "{% trans 'Month/Year' %}");
			data7.addColumn('number', "{% trans 'Total' %}");
			
			data7.addRows( {{ course_activity|length }} );
			
			count = 0;
			{% for ca in course_activity %}
				count += {{ ca.count }};
				data7.setValue({{ forloop.counter0 }},0,'{{ ca.month }}-{{ ca.year }}');
				data7.setValue({{ forloop.counter0 }},1,count);
			{% endfor %}
	
	        var chart7 = new google.visualization.AreaChart(document.getElementById('course_activity_cumulative_chart_div'));
	        chart7.draw(data7, {	width: '100%', 
	                			height: 400,
	                			vAxis: {minValue:0},
	                			pointSize:3,
	                			chartArea: {left:45,width:"90%",height:"75%"},
	                			backgroundColor: 'transparent',
	                			legend: 'none',
	                			series: [{areaOpacity:0.2}],
	                			title: '{% trans 'Course Activity (cumulative)' %}'
	                			});
	        
	        var data8 = new google.visualization.DataTable();
			data8.addColumn('string', "{% trans 'Course' %}");
			data8.addColumn('number', "{% trans 'Total' %}");
			
			data8.addRows( {{ hot_courses|length }} );
			
			count = 0;
			{% for hc in hot_courses %}
				data8.setValue({{ forloop.counter0 }},0,'{{ hc.course }}');
				data8.setValue({{ forloop.counter0 }},1,{{ hc.hits_percent|floatformat:1 }});
			{% endfor %}
	
			var options8 = {
			          title: '{% trans 'Most Active Courses (in last month)' %}',
			          width: '50%',
			          height: 400,
			          chartArea: {left:45,top:40,width:"90%",height:"75%"},
			          backgroundColor: 'transparent',
			        };

			var chart8 = new google.visualization.PieChart(document.getElementById('activity_by_course_chart_div'));
			chart8.draw(data8, options8);
	      }
	</script>
	{% endblock extra_scripts %}
{% endif %} 
{% block content %}

<h2>{% trans 'Summary Overview' %}</h2>

<h3>{% trans 'User Registrations' %}</h3>
<div id="user_registrations_chart_div" class="graph">{% trans 'graph_generating'%}</div>
<div id="user_registrations_cumulative_chart_div" class="graph">{% trans 'graph_generating'%}</div>

<h3>{% trans 'Activity by Country' %}</h3>
<p>{% trans 'Total countries:' %} {{ total_countries }}</p>
<div id="activity_by_country_chart_div" class="graph">{% trans 'graph_generating'%}</div>
<div id="activity_by_language_chart_div" class="graph">{% trans 'graph_generating'%}</div>

<h3>{% trans 'Course Downloads' %}</h3>
<div id="course_downloads_chart_div" class="graph">{% trans 'graph_generating'%}</div>
<div id="course_downloads_cumulative_chart_div" class="graph">{% trans 'graph_generating'%}</div> 

<h3>{% trans 'Course Activity' %}</h3>
<div id="course_activity_chart_div" class="graph">{% trans 'graph_generating'%}</div>
<div id="course_activity_cumulative_chart_div" class="graph">{% trans 'graph_generating'%}</div> 
<div id="activity_by_course_chart_div" class="graph">{% trans 'graph_generating'%}</div>

{% endblock %}
	