Skip to content

Commit e7482d0

Browse files
tdunn891tdunn891
committed
Dashboard page charts made responsive
1 parent 2af4c7b commit e7482d0

File tree

1 file changed

+90
-42
lines changed

1 file changed

+90
-42
lines changed

‎tickets/templates/dashboard.html‎

Lines changed: 90 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,52 +2,102 @@
22
{% load static from staticfiles %}
33
{% load bootstrap_tags %}
44
{% block head %}
5-
<!-- Datatables -->
6-
<!-- <link rel="stylesheet" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"> -->
7-
<!-- dc.css -->
5+
<!-- d3 time -->
6+
<script src="https://d3js.org/d3-time.v1.min.js"></script>
7+
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
8+
<!-- dc.min.css -->
89
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.9/dc.min.css"
910
integrity="sha256-uq/xxnkXyjSgp47vyRtSvBEwWuxTFbtxbKwOxkmWIJM=" crossorigin="anonymous" />
10-
<!-- dashboard.css -->
11-
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}" />
1211
{% endblock %}
12+
{% block container-class %}dashboard-container{% endblock %}
1313
{% block title %}TrackIt | Dashboard{% endblock %}
14-
{% block page_heading %}<i class="material-icons-outlined">assessment</i> Dashboard
15-
<button class="btn btn-primary float-right reset"><i class="material-icons align-bottom">restore</i> Reset</button>
14+
{% block page_heading %}
15+
<i class="material-icons-outlined">assessment</i> Dashboard
16+
<div id="filtered-count" class="float-right"></div>
17+
<hr>
1618
{% endblock %}
1719
{% block content %}
18-
<div class="row">
19-
<div class="col col-4">
20-
<h5>Features vs Bug</h5>
21-
<div id="ticketTypePieChart"></div>
22-
</div>
23-
<div class="col col-4">
24-
<h5>Priority</h5>
25-
<div id="priorityPieChart"></div>
26-
</div>
27-
<div class="col col-4">
28-
<h5>Status</h5>
29-
<div id="statusPieChart"></div>
30-
</div>
31-
</div>
32-
<hr>
33-
<div class="row">
34-
<div class="col col-4">
35-
<h5>Assignee (Top 5)</h5>
36-
<div id="assignedToRowChart"></div>
37-
</div>
38-
<div class="col col-4">
39-
<h5>Popular Tickets (Top 5)</h5>
40-
<div id="upvotesRowChart"></div>
20+
21+
<!-- Internal Panes Nav Items -->
22+
<nav>
23+
<div class="nav nav-tabs" id="nav-tab" role="tablist">
24+
<a class="nav-item nav-link active" id="nav-tickets-tab" data-toggle="tab" href="#nav-tickets" role="tab"
25+
aria-controls="nav-tickets" aria-selected="true">All Tickets</a>
26+
<a class="nav-item nav-link" id="nav-ph-tab" data-toggle="tab" href="#nav-ph" role="tab" aria-controls="nav-ph"
27+
aria-selected="false">Aged Tickets (>14days)</a>
4128
</div>
42-
<div class="col col-4">
43-
<h5>Status by Date</h5>
44-
<div id="statusByMonthBarChart"></div>
29+
</nav>
30+
31+
<!-- Internal Panes -->
32+
<div class="tab-content" id="nav-tabContent">
33+
<!-- Tickets Pane -->
34+
<div class="tab-pane fade show active" id="nav-tickets" role="tabpanel" aria-labelledby="nav-tickets-tab">
35+
<br>
36+
<div class="row">
37+
<div class="col col-md-8">
38+
<div class="jumbotron text-center">
39+
<h5 class="lead">Ticket Status by Date Submitted</h5>
40+
<div id="statusByMonthBarChart"></div>
41+
</div>
42+
</div>
43+
<div class="col-md-4 text-center">
44+
<div class="jumbotron">
45+
<h5 class="lead">Open Tickets Count</h5>
46+
<div id="open-closed-tickets-pie-chart"></div>
47+
</div>
48+
<div class="jumbotron">
49+
<h5 class="lead">Status</h5>
50+
<div id="statusRowChart"></div>
51+
</div>
52+
</div>
53+
</div>
54+
<div class="row">
55+
<div class="col-md-4">
56+
<div class="jumbotron text-center">
57+
<h5 class="lead">Type</h5>
58+
<div id="ticketTypeRowChart"></div>
59+
</div>
60+
</div>
61+
<div class="col-md-4">
62+
<div class="jumbotron text-center">
63+
<h5 class="lead">Priority</h5>
64+
<div id="priorityRowChart"></div>
65+
</div>
66+
</div>
67+
<div class="col-md-4">
68+
<div class="jumbotron text-center">
69+
<h5 class="lead">In-Demand Tickets</h5>
70+
<div id="upvotesRowChart"></div>
71+
</div>
72+
</div>
73+
</div>
74+
<hr>
75+
<div class="row">
76+
<div class="col-12">
77+
<div class="jumbotron text-center">
78+
<h5 class="lead">Age vs Priority Scatter</h5>
79+
<div id="age-priority-scatter-plot"></div>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="row">
84+
<div class="col-12">
85+
<div class="jumbotron text-center">
86+
<h5 class="lead">Average Days to Resolve</h5>
87+
<div id="average-days-to-resolve"></div>
88+
</div>
89+
</div>
90+
</div>
4591
</div>
46-
</div>
47-
<div class="row">
48-
<div class="col col-12">
49-
<!-- <h5>DataTable</h5>
50-
<div id="datatabletest"></div> -->
92+
<!-- placeholder Pane -->
93+
<div class="tab-pane fade show" id="nav-ph" role="tabpanel" aria-labelledby="nav-ph-tab">
94+
<br>
95+
<div class="row">
96+
<div class="col">
97+
<h5 class="lead">Aged Tickets</h5>
98+
<div id="agedRowChart"></div>
99+
</div>
100+
</div>
51101
</div>
52102
</div>
53103
{% endblock %}
@@ -62,10 +112,8 @@ <h5>Status by Date</h5>
62112
<!-- dc.js -->
63113
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.9/dc.min.js"
64114
integrity="sha256-unWojco2TOb01l2JB43J27kr4UQIkHk+PWce5A2eq8Y=" crossorigin="anonymous"></script>
65-
<!-- dataTables.js -->
66-
<!-- <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> -->
67-
<!-- dc-tableview-light.js-->
68-
<script src="{% static 'js/dc-tableview-light.min.js' %}"></script>
115+
<!-- dc-tableview-light.js NOT USED-->
116+
<!-- <script src="{% static 'js/dc-tableview-light.min.js' %}"></script> -->
69117
<!-- main.js -->
70118
<script src="{% static 'js/dashboard.js' %}"></script>
71119
{% endblock %}

0 commit comments

Comments
 (0)