diff options
Diffstat (limited to 'statistics_app/templates')
| -rw-r--r-- | statistics_app/templates/statistics_app/workshop_public_stats.html | 353 | ||||
| -rw-r--r-- | statistics_app/templates/statistics_app/workshop_stats.html | 394 |
2 files changed, 747 insertions, 0 deletions
diff --git a/statistics_app/templates/statistics_app/workshop_public_stats.html b/statistics_app/templates/statistics_app/workshop_public_stats.html new file mode 100644 index 0000000..8894037 --- /dev/null +++ b/statistics_app/templates/statistics_app/workshop_public_stats.html @@ -0,0 +1,353 @@ +{% extends 'workshop_app/base.html' %} + +{% block header %} + <nav class="navbar navbar-default navbar-custom"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="{{ URL_ROOT }}/">Home</a> + </div> + <ul class="nav navbar-nav navbar-right"> + <li><a href="{{ URL_ROOT }}/register/"><span class="glyphicon glyphicon-user"></span>Register</a></li> + <li><a href="{{ URL_ROOT }}/login/"><span class="glyphicon glyphicon-log-in"></span>Login</a></li> + </ul> + </div> + </nav> +{% endblock %} + +{% block extra %} + <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> + <script src="https://code.jquery.com/jquery-1.12.4.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> + + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> + <!-- For Charts --> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> + + <!-- For Google GeoChart India Map --> + <script type='text/javascript' src='https://www.google.com/jsapi'></script> + +<script> + var dateToday = new Date(); + var upto = new Date(); + + dateToday.setDate(dateToday.getDate() - 1); + upto.setFullYear(dateToday.getFullYear() + 1); + + $( function() { + from = $( "#from" ) + .datepicker({ + defaultDate: "+1w", + changeMonth: true, + changeYear: true, + showButtonPanel: true, + maxDate: dateToday, + dateFormat: "yy-mm-dd" + }) + .on( "change", function() { + to.datepicker( "option", "minDate", getDate( this ) ); + }), + to = $( "#to" ).datepicker({ + defaultDate: "+1w", + changeMonth: true, + changeYear: true, + showButtonPanel: true, + minDate: dateToday, + maxDate: upto, + dateFormat: "yy-mm-dd" + }) + .on( "change", function() { + from.datepicker( "option", "maxDate", getDate( this ) ); + }); + + function getDate( element ) { + var date; + try { + date = $.datepicker.parseDate( dateFormat, element.value ); + } catch( error ) { + date = null; + } + return date; + } + } ); + + </script> + +{% endblock %} + +{% block content %} + +<div class="container"> + <div class="row"> + <div class="col-md-4" align="left" > + <fieldset data-mini="true"> + <label for="radio-2">Overall Count</label> + <input type="radio" name="radio-1" id="radio-2" value="OWC"> + <label for="radio-3">India Map</label> + <input type="radio" name="radio-1" id="radio-3" value="MOIN"> + </fieldset> + </div> + + <div class="col-md-8"> + <form method="POST" > + {% csrf_token %} + <div class="form-group"> + <label>state: </label> + <select name="states"> + <option value="all">ALL</option> + <option value="IN-AP">Andhra Pradesh</option> + <option value="IN-AR">Arunachal Pradesh</option> + <option value="IN-AS">Assam</option> + <option value="IN-BR">Bihar</option> + <option value="IN-CT">Chhattisgarh</option> + <option value="IN-GA">Goa</option> + <option value="IN-GJ">Gujarat</option> + <option value="IN-HR">Haryana</option> + <option value="IN-HP">Himachal Pradesh</option> + <option value="IN-JK">Jammu and Kashmir</option> + <option value="IN-JH">Jharkhand</option> + <option value="IN-KA">Karnataka</option> + <option value="IN-KL">Kerala</option> + <option value="IN-MP">Madhya Pradesh</option> + <option value="IN-MH">Maharashtra</option> + <option value="IN-MN">Manipur</option> + <option value="IN-ML">Meghalaya</option> + <option value="IN-MZ">Mizoram</option> + <option value="IN-NL">Nagaland</option> + <option value="IN-OR">Odisha</option> + <option value="IN-PB">Punjab</option> + <option value="IN-RJ">Rajasthan</option> + <option value="IN-SK">Sikkim</option> + <option value="IN-TN">Tamil Nadu</option> + <option value="IN-TG">Telangana</option> + <option value="IN-TR">Tripura</option> + <option value="IN-UT">Uttarakhand</option> + <option value="IN-UP">Uttar Pradesh</option> + <option value="IN-WB">West Bengal</option> + <option value="IN-AN">Andaman and Nicobar Islands</option> + <option value="IN-CH">Chandigarh</option> + <option value="IN-DN">Dadra and Nagar Haveli</option> + <option value="IN-DD">Daman and Diu</option> + <option value="IN-DL">Delhi</option> + <option value="IN-LD">Lakshadweep</option> + <option value="IN-PY">Puducherry</option> + </select> + <label>WorkshopType: </label> + <select name="workshoptype_name"> + {% for workshop in workshoptype_list %} + <option value={{ workshop.id }}> {{ workshop }} </option> + {% endfor %} + </select> + + <br> + <label for="from">From</label> + <input type="text" id="from" name="from"> + <label for="to">to</label> + <input type="text" id="to" name="to"> + <button class="btn btn-info btn-sm" type="submit" name="View" value="View">View</button> + </div> + </form> + + {% if messages %} + <ul class="messages"> + {% for message in messages %} + <div class="alert alert-{{ message.tags }}"> + <li {% if message.tags %} class="{{ message.tags }}"{% endif %}> {{ message }} + </li> + </div> + {% endfor %} + </ul> + {% endif %} + + </div> + <br> + <table class="table table-hover"> + <thead> + <tr> + <th>Coordinator Name</th> + <th>Institute Name</th> + <th>Instructor Name</th> + <th>Workshop Name</th> + <th>Workshop Date</th> + <th>Initiated By</th> + </tr> + </thead> + {% csrf_token %} + {% for workshop in workshop_list %} + {% if workshop.proposed_workshop_date %} + <tbody> + <tr> + <td>{{ workshop.proposed_workshop_coordinator.get_full_name | capfirst }}</td> + <td>{{ workshop.proposed_workshop_coordinator.profile.institute | capfirst }}</td> + <td>{{ workshop.proposed_workshop_instructor.get_full_name }}</td> + <td>{{ workshop.proposed_workshop_title.workshoptype_name }}</td> + <td>{{ workshop.proposed_workshop_date | date}}</td> + <td>Coordinator</td> + </tr> + </tbody> + {% else %} + <tbody> + <tr> + <td>{{ workshop.requested_workshop_coordinator.get_full_name | capfirst }}</td> + <td>{{ workshop.requested_workshop_coordinator.profile.institute | capfirst }}</td> + <td>{{ workshop.requested_workshop_instructor.get_full_name }}</td> + <td>{{ workshop.requested_workshop_title.workshoptype_name }}</td> + <td>{{ workshop.requested_workshop_date | date}}</td> + <td>Instructor</td> + </tr> + </tbody> + {% endif %} + {% endfor %} + </table> + + <!-- Page Navigation --> + <div class="container"> + <div class="Page-Nav" align="center"> + <nav aria-label="Page navigation"> + <ul class="pagination pagination-sm"> + <li class="page-item"> + {% if workshop_list.has_previous %} + <a class="page-link" tabindex="-1" + href="?page={{ workshop_list.previous_page_number }}">Previous</a> + {% endif %} + </li> + <li class="page-item"> + <span class="current"> + Page {{ workshop_list.number }} of {{ workshop_list.paginator.num_pages }} + </span> + </li> + <li class="page-item"> + {% if workshop_list.has_next %} + <a class="page-link" href="?page={{ workshop_list.next_page_number }}">Next + </a> + {% endif %} + </li> + </ul> + </nav> + </div> + </div> + </div> + +<div class="row"> + <br> + <div class="col-md-12 "> + <br> + <canvas id="myChartPie" ></canvas> + <script> + $( function() { + $( "fieldset" ).controlgroup(); + }); + + var ctx1 = document.getElementById("myChartPie").getContext('2d'); + var myChart; + + $('input[type=radio]').change(function() { + if (this.value == 'OWC') { //Overall Workshop Count + if(myChart){ + myChart.destroy(); + } + + var dWidth = $(window).width() * 0.9; + var dHeight = $(window).height() * 0.9; + + $( "#myChartPie" ).dialog({ + resizable: false, + draggable: true, + title: 'Pie Chart', + closeOnEscape: true, + stack: true, + zIndex: 10000, + width: dWidth, + height: dHeight, + modal: true + }); + + document.getElementById("visualization").style.visibility='hidden'; + myChart = new Chart(ctx1, { + type: 'pie', + data: { + labels : {{ workshoptype_count.0 | safe}}, + datasets: [{ + data: {{ workshoptype_count.1 }}, + //Add more color scheme if workshop number increases + backgroundColor: [ + 'rgba(153, 102, 255, 1)', + 'rgba(191, 191, 1, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)' + ] + }] + }, + options: { + responsive: true + } + }); + } + + else if (this.value == 'MOIN') { + if(myChart){ + myChart.destroy(); + } + + var dWidth = $(window).width() * 0.9; + var dHeight = $(window).height() * 0.9; + + $( "#visualization" ).dialog({ + resizable: false, + draggable: true, + title: 'Map of India', + closeOnEscape: true, + stack: true, + zIndex: 10000, + width: dWidth, + height: dHeight, + modal: true + }); + + document.getElementById("visualization").style.visibility='visible'; + function drawVisualization() { + var data = google.visualization.arrayToDataTable( + {{ india_map | safe }} + ); + + var opts = { + region: 'IN', + domain: 'IN', + displayMode: 'regions', + resolution: 'provinces', + colorAxis: {colors: ['lightyellow', 'orange']}, + legend: {position: 'top'}, + }; + + var geochart = new google.visualization.GeoChart( + document.getElementById('visualization')); + geochart.draw(data, opts); + }; + if(google) { + google.load('visualization', '1.0', { + packages: ['geochart'], + callback: function() { + // do stuff, if you wan't - it doesn't matter, because the page isn't blank! + drawVisualization(); + } + }) + } + } + }); + </script> + <style> + #visualization path { + stroke-width:1; /* control the countries borders width */ + stroke:#6699cc; /* choose a color for the border */ + } + </style> + <div id="visualization" style="width: 400px; height: 300px; display: block; margin: 0 auto;" ></div> + + </div> +</div> +</div> +<br> +{% endblock %} diff --git a/statistics_app/templates/statistics_app/workshop_stats.html b/statistics_app/templates/statistics_app/workshop_stats.html new file mode 100644 index 0000000..ba597dc --- /dev/null +++ b/statistics_app/templates/statistics_app/workshop_stats.html @@ -0,0 +1,394 @@ +{% extends 'workshop_app/base.html' %} + +{% block header %} + <nav class="navbar navbar-default navbar-custom"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="{{ URL_ROOT }}/manage/">Home</a> + </div> + <ul class="nav navbar-nav"> + <li ><a href="{{ URL_ROOT }}/create_workshop/">Create Workshop</a></li> + <li ><a href="{{ URL_ROOT }}/view_workshoptype_list/"> Workshop List</a></li> + <li ><a href="{{ URL_ROOT }}/my_workshops/">My Workshops</a></li> + <li class="active"><a href="{{ URL_ROOT }}/workshop_stats/" >Workshop Stats</a></li> + </ul> + <ul class="nav navbar-nav navbar-right"> + <li><a href="{{ URL_ROOT }}/view_profile/"><span class="glyphicon glyphicon-user"></span> Profile </a></li> + <li><a href="{{ URL_ROOT }}/logout/"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> + </ul> + </div> + </nav> +{% endblock %} + +{% block extra %} + <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> + <script src="https://code.jquery.com/jquery-1.12.4.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> + + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> + <!-- For Charts --> + + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> + + <!-- For Google GeoChart India Map --> + <script type='text/javascript' src='https://www.google.com/jsapi'></script> + +<script> + var dateToday = new Date(); + var upto = new Date(); + + dateToday.setDate(dateToday.getDate() - 1); + upto.setFullYear(dateToday.getFullYear() + 1); + + $( function() { + from = $( "#from" ) + .datepicker({ + defaultDate: "+1w", + changeMonth: true, + changeYear: true, + showButtonPanel: true, + maxDate: dateToday, + dateFormat: "yy-mm-dd" + }) + .on( "change", function() { + to.datepicker( "option", "minDate", getDate( this ) ); + }), + to = $( "#to" ).datepicker({ + defaultDate: "+1w", + changeMonth: true, + changeYear: true, + showButtonPanel: true, + minDate: dateToday, + maxDate: upto, + dateFormat: "yy-mm-dd" + }) + .on( "change", function() { + from.datepicker( "option", "maxDate", getDate( this ) ); + }); + + function getDate( element ) { + var date; + try { + date = $.datepicker.parseDate( dateFormat, element.value ); + } catch( error ) { + date = null; + } + return date; + } + } ); + + </script> + +{% endblock %} + +{% block content %} + +<div class="container"> + <div class="row"> + <div class="col-md-6" align="left" > + <fieldset data-mini="true"> + <label for="radio-1">Monthly Count </label> + <input type="radio" name="radio-1" id="radio-1" value="NWPM"> + <label for="radio-2">Overall Count</label> + <input type="radio" name="radio-1" id="radio-2" value="OWC"> + <label for="radio-3">India Map</label> + <input type="radio" name="radio-1" id="radio-3" value="MOIN"> + </fieldset> + </div> + + + {% if show_workshop_stats %} + <div align="right" class="col-md-6"> + <form method="POST" > + {% csrf_token %} + <div class="form-group"> + <label for="from">From</label> + <input type="text" id="from" name="from"> + <label for="to">to</label> + <input type="text" id="to" name="to"> + <button class="btn btn-warning btn-sm" type="submit" name="Download" value="Download">Download</button> + <button class="btn btn-info btn-sm" type="submit" name="View" value="View">View</button> + </div> + </form> + + {% if messages %} + <ul class="messages"> + {% for message in messages %} + <div class="alert alert-{{ message.tags }}"> + <li {% if message.tags %} class="{{ message.tags }}"{% endif %}> {{ message }} + </li> + </div> + {% endfor %} + </ul> + {% endif %} + + </div> + <br> + <table class="table table-hover"> + <thead> + <tr> + <th>Coordinator Name</th> + <th>Institute Name</th> + <th>Instructor Name</th> + <th>Workshop Name</th> + <th>Workshop Date</th> + <th>Requested/Proposed By</th> + </tr> + </thead> + {% csrf_token %} + {% for workshop in upcoming_workshops %} + {% if workshop.proposed_workshop_date %} + <tbody> + <tr> + <td>{{ workshop.proposed_workshop_coordinator.get_full_name | capfirst }}</td> + <td>{{ workshop.proposed_workshop_coordinator.profile.institute | capfirst }}</td> + <td>{{ workshop.proposed_workshop_instructor.get_full_name }}</td> + <td>{{ workshop.proposed_workshop_title.workshoptype_name }}</td> + <td>{{ workshop.proposed_workshop_date | date}}</td> + <td>Coordinator</td> + </tr> + </tbody> + {% else %} + <tbody> + <tr> + <td>{{ workshop.requested_workshop_coordinator.get_full_name | capfirst }}</td> + <td>{{ workshop.requested_workshop_coordinator.profile.institute | capfirst }}</td> + <td>{{ workshop.requested_workshop_instructor.get_full_name }}</td> + <td>{{ workshop.requested_workshop_title.workshoptype_name }}</td> + <td>{{ workshop.requested_workshop_date | date}}</td> + <td>Instructor</td> + </tr> + </tbody> + {% endif %} + {% endfor %} + </table> + + <!-- Page Navigation --> + <div class="container"> + <div class="Page-Nav" align="center"> + <nav aria-label="Page navigation"> + <ul class="pagination pagination-sm"> + <li class="page-item"> + {% if upcoming_workshops.has_previous %} + <a class="page-link" tabindex="-1" + href="?page={{ upcoming_workshops.previous_page_number }}">Previous</a> + {% endif %} + </li> + <li class="page-item"> + <span class="current"> + Page {{ upcoming_workshops.number }} of {{ upcoming_workshops.paginator.num_pages }} + </span> + </li> + <li class="page-item"> + {% if upcoming_workshops.has_next %} + <a class="page-link" href="?page={{ upcoming_workshops.next_page_number }}">Next + </a> + {% endif %} + </li> + </ul> + </nav> + </div> + </div> + {% else %} + <div class="jumbotron"> + <h2>Permission to View Upcoming Workshops is set to false, please set it to true in settings.py</h2> + </div> + {% endif %} + </div> + + +<div class="row"> + <br> + <div class="col-md-12 "> + <br> + <canvas id="myChartPie" ></canvas> + <script> + $( function() { + $( "fieldset" ).controlgroup(); + }); + + var ctx1 = document.getElementById("myChartPie").getContext('2d'); + var myChart; + + $('input[type=radio]').change(function() { + + if (this.value == 'NWPM') {//Number of Workshops per month + if(myChart){ + myChart.destroy(); + } + + var dWidth = $(window).width() * 0.9; + var dHeight = $(window).height() * 0.9; + + $( "#myChartPie" ).dialog({ + resizable: false, + draggable: true, + title: 'Bar Chart', + closeOnEscape: true, + stack: true, + zIndex: 10000, + width: dWidth, + height: dHeight, + modal: true + }); + + document.getElementById("visualization").style.visibility='hidden'; + myChart = new Chart(ctx1, { + type: 'bar', + data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', ' December'], + datasets: [{ + label: 'Number of workshops per Month for '+ dateToday.getFullYear(), + data: {{ workshop_count }}, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(242, 38, 19, 0.2)', + 'rgba(25, 91, 13, 0.2)', + 'rgba(54, 12, 235, 0.2)', + 'rgba(150, 40, 27, 0.2)', + 'rgba(66, 114, 155, 0.2)', + 'rgba(219, 10, 91, 0.2)', + 'rgba(191, 191, 191, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(242, 38, 19, 1)', + 'rgba(25, 91, 13, 1)', + 'rgba(54, 12, 235, 1)', + 'rgba(150, 40, 27 ,1)', + 'rgba(66, 114, 155, 1)', + 'rgba(219, 10, 91, 1)', + 'rgba(191, 191, 191, 1)' + ], + borderWidth: 1 + }] + }, + options: { + responsive: true, + scales: { + yAxes: [{ + ticks: { + beginAtZero:true + } + }] + } + } + }); + } + else if (this.value == 'OWC') { //Overall Workshop Count + if(myChart){ + myChart.destroy(); + } + + var dWidth = $(window).width() * 0.9; + var dHeight = $(window).height() * 0.9; + + $( "#myChartPie" ).dialog({ + resizable: false, + draggable: true, + title: 'Pie Chart', + closeOnEscape: true, + stack: true, + zIndex: 10000, + width: dWidth, + height: dHeight, + modal: true + }); + + document.getElementById("visualization").style.visibility='hidden'; + myChart = new Chart(ctx1, { + type: 'pie', + data: { + labels : {{ workshoptype_count.0 | safe}}, + datasets: [{ + data: {{ workshoptype_count.1 }}, + //Add more color scheme if workshop number increases + backgroundColor: [ + 'rgba(153, 102, 255, 1)', + 'rgba(191, 191, 1, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)' + ] + }] + }, + options: { + responsive: true + } + }); + } + + else if (this.value == 'MOIN') { + if(myChart){ + myChart.destroy(); + } + + var dWidth = $(window).width() * 0.9; + var dHeight = $(window).height() * 0.9; + + $( "#visualization" ).dialog({ + resizable: false, + draggable: true, + title: 'Map of India', + closeOnEscape: true, + stack: true, + zIndex: 10000, + width: dWidth, + height: dHeight, + modal: true + }); + + document.getElementById("visualization").style.visibility='visible'; + function drawVisualization() { + var data = google.visualization.arrayToDataTable( + {{ india_map | safe }} + ); + + var opts = { + region: 'IN', + domain: 'IN', + displayMode: 'regions', + resolution: 'provinces', + colorAxis: {colors: ['lightyellow', 'orange']}, + legend: {position: 'top'}, + }; + + var geochart = new google.visualization.GeoChart( + document.getElementById('visualization')); + geochart.draw(data, opts); + }; + if(google) { + google.load('visualization', '1.0', { + packages: ['geochart'], + callback: function() { + // do stuff, if you wan't - it doesn't matter, because the page isn't blank! + drawVisualization(); + } + }) + } + } + }); + </script> + <style> + #visualization path { + stroke-width:1; /* control the countries borders width */ + stroke:#6699cc; /* choose a color for the border */ + } + </style> + <div id="visualization" style="width: 400px; height: 300px; display: block; margin: 0 auto;" ></div> + + </div> +</div> +</div> +<br> +{% endblock %} |