Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 6a550913 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

dashboard

parent 4b26ed3c
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 8 deletions
administration/templates/dashboard.html
View file @ 6a550913
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
{% block headMedia %} {% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{% static 'js/Chart.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endblock %} {% endblock %}
...@@ -114,6 +116,8 @@ ...@@ -114,6 +116,8 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="wrapper" style="background-color: #ecf0f5;"> <div class="wrapper" style="background-color: #ecf0f5;">
<!--div class="col-md-4"> <!--div class="col-md-4">
...@@ -287,11 +291,125 @@ ...@@ -287,11 +291,125 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">{{ Viewname }}</div> <div class="panel-heading">{{ Viewname }}</div>
<div class="panel-body text-center"> <div class="panel-body text-center container-fluid">
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Monthly Recap Report</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<!--div class="btn-group">
<button type="button" class="btn btn-box-tool dropdown-toggle"
data-toggle="dropdown">
<i class="fa fa-wrench"></i></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button-->
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-8">
<p class="text-center">
<strong>Today {% now "jS F Y" %}</strong>
</p>
<div class="chart">
<!-- Sales Chart Canvas -->
<canvas id="salesChart" style="height: 142px; width: 814px;" width="814"
height="142"></canvas>
</div>
<!-- /.chart-responsive -->
</div>
<!-- /.col -->
<div class="col-md-4">
<p class="text-center">
<strong>Most Searched</strong>
</p>
<table class="table no-margin">
<thead>
<tr>
<th class="text-center">Search</th>
<th class="text-center">Searches</th>
</tr>
</thead>
<tbody>
{% for search in search %}
<tr>
<td></td>
<td>{{ search.count }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- ./box-body -->
<!--div class="box-footer">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<span class="description-percentage text-green"><i
class="fa fa-caret-up"></i> 17%</span>
<h5 class="description-header">$35,210.43</h5>
<span class="description-text">TOTAL REVENUE</span>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<span class="description-percentage text-yellow"><i
class="fa fa-caret-left"></i> 0%</span>
<h5 class="description-header">$10,390.90</h5>
<span class="description-text">TOTAL COST</span>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<span class="description-percentage text-green"><i
class="fa fa-caret-up"></i> 20%</span>
<h5 class="description-header">$24,813.53</h5>
<span class="description-text">TOTAL PROFIT</span>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="description-block">
<span class="description-percentage text-red"><i
class="fa fa-caret-down"></i> 18%</span>
<h5 class="description-header">1200</h5>
<span class="description-text">GOAL COMPLETIONS</span>
</div>
</div>
</div>
</div-->
<!-- /.box-footer -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
</div> </div>
</div> </div>
</section> </section>
<!-- /.content --> <!-- /.content -->
</div> </div>
<footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute"> <footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
...@@ -347,6 +465,8 @@ ...@@ -347,6 +465,8 @@
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block templates %} {% block templates %}
...@@ -355,6 +475,54 @@ ...@@ -355,6 +475,54 @@
{% block scripts %} {% block scripts %}
<script> <script>
var ctx = document.getElementById("salesChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
{% for dates in dates %}
"{{ dates.date }}",
{% endfor %}
],
datasets: [{
label: 'Sales',
data: [
{% for dates in dates %}
{{ dates.quantity }},
{% endfor %}
],
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(255, 159, 64, 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(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
$(document).ready(function () { $(document).ready(function () {
$('#example').DataTable $('#example').DataTable
({ ({
...@@ -403,4 +571,4 @@ ...@@ -403,4 +571,4 @@
}); });
}); });
</script> </script>
{% endblock %} {% endblock %}
\ No newline at end of file \ No newline at end of file
administration/views.py
View file @ 6a550913
import calendar
from django.contrib import messages from django.contrib import messages
from django.contrib.auth.models import User from django.contrib.auth.models import User
from django.db.models import Count from django.db.models import Count
...@@ -8,7 +10,7 @@ from PIL import Image ...@@ -8,7 +10,7 @@ from PIL import Image
# Create your views here. # Create your views here.
from catalog.models import Purchase from catalog.models import Purchase, Search
def Dashboard(request): def Dashboard(request):
...@@ -17,11 +19,31 @@ def Dashboard(request): ...@@ -17,11 +19,31 @@ def Dashboard(request):
Request = User.objects.filter(is_active=False).count() Request = User.objects.filter(is_active=False).count()
in_process = Purchase.objects.filter(purchased=True).exclude(progress=100).count() in_process = Purchase.objects.filter(purchased=True).exclude(progress=100).count()
month_lst = [
{'quantity': 0, 'date': 'January'},
{'quantity': 0, 'date': 'February'},
{'quantity': 0, 'date': 'March'},
return render(request, 'dashboard.html', {"Viewname": "Dashboard","Usuarios":usuarios,"Total_compras": total,"Solicitud":Request,"Descargando": in_process}) {'quantity': 0, 'date': 'April'},
{'quantity': 0, 'date': 'May'},
{'quantity': 0, 'date': 'June'},
{'quantity': 0, 'date': 'July'},
{'quantity': 0, 'date': 'August'},
{'quantity': 0, 'date': 'September'},
{'quantity': 0, 'date': 'October'},
{'quantity': 0, 'date': 'November'},
{'quantity': 0, 'date': 'December'}]
for date in Purchase.objects.filter().extra({'month': "Extract(month from aggreg_date)"}).values_list(
'month').annotate(Count('id')):
date_name = calendar.month_name[int(date[0])]
for month in month_lst:
if month['date'] == date_name:
month['quantity'] = date[1]
Searches = Search.objects.values('area').annotate(count=Count('area')).order_by('-count')[:5]
return render(request, 'dashboard.html', {"Viewname": "Dashboard","Usuarios":usuarios,"Total_compras": total,"Solicitud":Request,"Descargando": in_process, "dates":month_lst, "search": Searches})
# ---------------------------------------------------------- # ----------------------------------------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment