dashboard

parent 4b26ed3c
...@@ -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
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