Skip to content

Commit 1b50072

Browse files
app-generatorapp-generator
committed
Added Sample Dashboard
1 parent 4889f2e commit 1b50072

File tree

1 file changed

+367
-0
lines changed

1 file changed

+367
-0
lines changed

‎templates/charts/dashboard.html‎

Lines changed: 367 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,367 @@
1+
{% extends 'layouts/base.html' %}
2+
{% load i18n static %}
3+
4+
{% block title %} Home {% endblock title %}
5+
6+
{% block content %}
7+
8+
<div class="container-fluid py-4">
9+
<div class="row">
10+
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
11+
<div class="card">
12+
<div class="card-header p-3 pt-2">
13+
<div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
14+
<i class="material-icons opacity-10">weekend</i>
15+
</div>
16+
<div class="text-end pt-1">
17+
<p class="text-sm mb-0 text-capitalize">Today's Money</p>
18+
<h4 class="mb-0">$53k</h4>
19+
</div>
20+
</div>
21+
<hr class="dark horizontal my-0">
22+
<div class="card-footer p-3">
23+
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+55% </span>than last week</p>
24+
</div>
25+
</div>
26+
</div>
27+
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
28+
<div class="card">
29+
<div class="card-header p-3 pt-2">
30+
<div class="icon icon-lg icon-shape bg-gradient-primary shadow-primary text-center border-radius-xl mt-n4 position-absolute">
31+
<i class="material-icons opacity-10">person</i>
32+
</div>
33+
<div class="text-end pt-1">
34+
<p class="text-sm mb-0 text-capitalize">Today's Users</p>
35+
<h4 class="mb-0">2,300</h4>
36+
</div>
37+
</div>
38+
<hr class="dark horizontal my-0">
39+
<div class="card-footer p-3">
40+
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+3% </span>than last month</p>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
45+
<div class="card">
46+
<div class="card-header p-3 pt-2">
47+
<div class="icon icon-lg icon-shape bg-gradient-success shadow-success text-center border-radius-xl mt-n4 position-absolute">
48+
<i class="material-icons opacity-10">person</i>
49+
</div>
50+
<div class="text-end pt-1">
51+
<p class="text-sm mb-0 text-capitalize">New Clients</p>
52+
<h4 class="mb-0">3,462</h4>
53+
</div>
54+
</div>
55+
<hr class="dark horizontal my-0">
56+
<div class="card-footer p-3">
57+
<p class="mb-0"><span class="text-danger text-sm font-weight-bolder">-2%</span> than yesterday</p>
58+
</div>
59+
</div>
60+
</div>
61+
<div class="col-xl-3 col-sm-6">
62+
<div class="card">
63+
<div class="card-header p-3 pt-2">
64+
<div class="icon icon-lg icon-shape bg-gradient-info shadow-info text-center border-radius-xl mt-n4 position-absolute">
65+
<i class="material-icons opacity-10">weekend</i>
66+
</div>
67+
<div class="text-end pt-1">
68+
<p class="text-sm mb-0 text-capitalize">Sales</p>
69+
<h4 class="mb-0">$103,430</h4>
70+
</div>
71+
</div>
72+
<hr class="dark horizontal my-0">
73+
<div class="card-footer p-3">
74+
<p class="mb-0"><span class="text-success text-sm font-weight-bolder">+5% </span>than yesterday</p>
75+
</div>
76+
</div>
77+
</div>
78+
</div>
79+
<div class="row mt-4 mb-4">
80+
<div class="col-lg-12 col-md-12 mb-md-0 mb-4">
81+
<div class="card">
82+
<div class="card-header pb-0">
83+
<div class="row">
84+
<div class="col-lg-6 col-7">
85+
<h6>Projects</h6>
86+
<p class="text-sm mb-0">
87+
<i class="fa fa-check text-info" aria-hidden="true"></i>
88+
<span class="font-weight-bold ms-1">30 done</span> this month
89+
</p>
90+
</div>
91+
<div class="col-lg-6 col-5 my-auto text-end">
92+
<div class="dropdown float-lg-end pe-4">
93+
<a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
94+
<i class="fa fa-ellipsis-v text-secondary"></i>
95+
</a>
96+
<ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
97+
<li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
98+
<li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
99+
<li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
100+
</ul>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
<div class="card-body px-0 pb-2">
106+
107+
{% autoescape off %}
108+
{{ plot_div }}
109+
{% endautoescape %}
110+
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
{% include 'includes/footer.html' %}
116+
</div>
117+
{% endblock content %}
118+
119+
{% block scripts %}
120+
<script>
121+
var ctx = document.getElementById("chart-bars").getContext("2d");
122+
123+
new Chart(ctx, {
124+
type: "bar",
125+
data: {
126+
labels: ["M", "T", "W", "T", "F", "S", "S"],
127+
datasets: [{
128+
label: "Sales",
129+
tension: 0.4,
130+
borderWidth: 0,
131+
borderRadius: 4,
132+
borderSkipped: false,
133+
backgroundColor: "rgba(255, 255, 255, .8)",
134+
data: [50, 20, 10, 22, 50, 10, 40],
135+
maxBarThickness: 6
136+
}, ],
137+
},
138+
options: {
139+
responsive: true,
140+
maintainAspectRatio: false,
141+
plugins: {
142+
legend: {
143+
display: false,
144+
}
145+
},
146+
interaction: {
147+
intersect: false,
148+
mode: 'index',
149+
},
150+
scales: {
151+
y: {
152+
grid: {
153+
drawBorder: false,
154+
display: true,
155+
drawOnChartArea: true,
156+
drawTicks: false,
157+
borderDash: [5, 5],
158+
color: 'rgba(255, 255, 255, .2)'
159+
},
160+
ticks: {
161+
suggestedMin: 0,
162+
suggestedMax: 500,
163+
beginAtZero: true,
164+
padding: 10,
165+
font: {
166+
size: 14,
167+
weight: 300,
168+
family: "Roboto",
169+
style: 'normal',
170+
lineHeight: 2
171+
},
172+
color: "#fff"
173+
},
174+
},
175+
x: {
176+
grid: {
177+
drawBorder: false,
178+
display: true,
179+
drawOnChartArea: true,
180+
drawTicks: false,
181+
borderDash: [5, 5],
182+
color: 'rgba(255, 255, 255, .2)'
183+
},
184+
ticks: {
185+
display: true,
186+
color: '#f8f9fa',
187+
padding: 10,
188+
font: {
189+
size: 14,
190+
weight: 300,
191+
family: "Roboto",
192+
style: 'normal',
193+
lineHeight: 2
194+
},
195+
}
196+
},
197+
},
198+
},
199+
});
200+
201+
202+
var ctx2 = document.getElementById("chart-line").getContext("2d");
203+
204+
new Chart(ctx2, {
205+
type: "line",
206+
data: {
207+
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
208+
datasets: [{
209+
label: "Mobile apps",
210+
tension: 0,
211+
borderWidth: 0,
212+
pointRadius: 5,
213+
pointBackgroundColor: "rgba(255, 255, 255, .8)",
214+
pointBorderColor: "transparent",
215+
borderColor: "rgba(255, 255, 255, .8)",
216+
borderColor: "rgba(255, 255, 255, .8)",
217+
borderWidth: 4,
218+
backgroundColor: "transparent",
219+
fill: true,
220+
data: [50, 40, 300, 320, 500, 350, 200, 230, 500],
221+
maxBarThickness: 6
222+
223+
}],
224+
},
225+
options: {
226+
responsive: true,
227+
maintainAspectRatio: false,
228+
plugins: {
229+
legend: {
230+
display: false,
231+
}
232+
},
233+
interaction: {
234+
intersect: false,
235+
mode: 'index',
236+
},
237+
scales: {
238+
y: {
239+
grid: {
240+
drawBorder: false,
241+
display: true,
242+
drawOnChartArea: true,
243+
drawTicks: false,
244+
borderDash: [5, 5],
245+
color: 'rgba(255, 255, 255, .2)'
246+
},
247+
ticks: {
248+
display: true,
249+
color: '#f8f9fa',
250+
padding: 10,
251+
font: {
252+
size: 14,
253+
weight: 300,
254+
family: "Roboto",
255+
style: 'normal',
256+
lineHeight: 2
257+
},
258+
}
259+
},
260+
x: {
261+
grid: {
262+
drawBorder: false,
263+
display: false,
264+
drawOnChartArea: false,
265+
drawTicks: false,
266+
borderDash: [5, 5]
267+
},
268+
ticks: {
269+
display: true,
270+
color: '#f8f9fa',
271+
padding: 10,
272+
font: {
273+
size: 14,
274+
weight: 300,
275+
family: "Roboto",
276+
style: 'normal',
277+
lineHeight: 2
278+
},
279+
}
280+
},
281+
},
282+
},
283+
});
284+
285+
var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
286+
287+
new Chart(ctx3, {
288+
type: "line",
289+
data: {
290+
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
291+
datasets: [{
292+
label: "Mobile apps",
293+
tension: 0,
294+
borderWidth: 0,
295+
pointRadius: 5,
296+
pointBackgroundColor: "rgba(255, 255, 255, .8)",
297+
pointBorderColor: "transparent",
298+
borderColor: "rgba(255, 255, 255, .8)",
299+
borderWidth: 4,
300+
backgroundColor: "transparent",
301+
fill: true,
302+
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
303+
maxBarThickness: 6
304+
305+
}],
306+
},
307+
options: {
308+
responsive: true,
309+
maintainAspectRatio: false,
310+
plugins: {
311+
legend: {
312+
display: false,
313+
}
314+
},
315+
interaction: {
316+
intersect: false,
317+
mode: 'index',
318+
},
319+
scales: {
320+
y: {
321+
grid: {
322+
drawBorder: false,
323+
display: true,
324+
drawOnChartArea: true,
325+
drawTicks: false,
326+
borderDash: [5, 5],
327+
color: 'rgba(255, 255, 255, .2)'
328+
},
329+
ticks: {
330+
display: true,
331+
padding: 10,
332+
color: '#f8f9fa',
333+
font: {
334+
size: 14,
335+
weight: 300,
336+
family: "Roboto",
337+
style: 'normal',
338+
lineHeight: 2
339+
},
340+
}
341+
},
342+
x: {
343+
grid: {
344+
drawBorder: false,
345+
display: false,
346+
drawOnChartArea: false,
347+
drawTicks: false,
348+
borderDash: [5, 5]
349+
},
350+
ticks: {
351+
display: true,
352+
color: '#f8f9fa',
353+
padding: 10,
354+
font: {
355+
size: 14,
356+
weight: 300,
357+
family: "Roboto",
358+
style: 'normal',
359+
lineHeight: 2
360+
},
361+
}
362+
},
363+
},
364+
},
365+
});
366+
</script>
367+
{% endblock scripts %}

0 commit comments

Comments
 (0)