xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong>Admin dashboard templates enable you to quickly create admin panels. Copy & paste examples straight into4
your code.</strong>5
</p>6
7
<p>Click the red <button href="https://mdbootstrap.com/docs/standard/templates/admin-dashboard/"8
class="btn btn-danger btn-sm">DOCS</button>9
button in the upper left corner, in order to find more examples of Admin Dashboards, or go directly to:</p>10
11
<ul>12
<li><a href="https://mdbootstrap.com/docs/standard/design-blocks/admin/">Premium Admin Design Blocks</a></li>13
<li><a href="https://mdbootstrap.com/docs/standard/templates/admin-dashboard/">Premium Admin Templates</a></li>14
</ul>15
16
<p><strong>You will find the link to FREE ADMIN TEMPLATE DOWNLOAD at the bottom of this snippet.</strong></p>17
18
<hr />19
20
<h5 class="font-weight-bold mt-5">Basic example of Admin Section for Bootstrap 5 </h5>21
<p>Admin Design Blocks & Templates for Bootstrap 5 are included in the <a22
href="https://mdbootstrap.com/docs/standard/pro/">MDB23
PRO UI Kit</a> - use code <code>admin</code> to get <strong>30% OFF</strong> and start using the most24
efficient Admin components for bootstrap.</p>25
<div class="border p-5 mb-5">26
<!-- Copy this code to have a working example -->27
<!--Section: Design Block-->28
<section>29
<div class="row">30
<div class="col-lg-3 col-md-6 mb-4">31
<div class="card">32
<div class="card-body">33
<p class="text-uppercase small mb-2">34
<strong>USERS</strong>35
</p>36
<h5 class="mb-0">37
<strong>14 567</strong>38
<small class="text-success ms-2">39
<i class="fas fa-arrow-up fa-sm pe-1"></i>13,48%</small>40
</h5>41
42
<hr />43
44
<p class="text-uppercase text-muted small mb-2">45
Previous period46
</p>47
<h5 class="text-muted mb-0">11 467</h5>48
</div>49
</div>50
<!-- Card -->51
</div>52
53
<div class="col-lg-3 col-md-6 mb-4">54
<div class="card">55
<div class="card-body">56
<p class="text-uppercase small mb-2">57
<strong>PAGE VIEWS</strong>58
</p>59
<h5 class="mb-0">60
<strong>51 354 </strong>61
<small class="text-success ms-2">62
<i class="fas fa-arrow-up fa-sm pe-1"></i>23,58%</small>63
</h5>64
65
<hr />66
67
<p class="text-uppercase text-muted small mb-2">68
Previous period69
</p>70
<h5 class="text-muted mb-0">38 454</h5>71
</div>72
</div>73
</div>74
75
<div class="col-lg-3 col-md-6 mb-4">76
<div class="card">77
<div class="card-body">78
<p class="text-uppercase small mb-2">79
<strong>AVERAGE TIME</strong>80
</p>81
<h5 class="mb-0">82
<strong>00:04:20</strong>83
<small class="text-danger ms-2">84
<i class="fas fa-arrow-down fa-sm pe-1"></i>23,58%</small>85
</h5>86
87
<hr />88
89
<p class="text-uppercase text-muted small mb-2">90
Previous period91
</p>92
<h5 class="text-muted mb-0">00:05:20</h5>93
</div>94
</div>95
</div>96
97
<div class="col-lg-3 col-md-6 mb-4">98
<div class="card">99
<div class="card-body">100
<p class="text-uppercase small mb-2">101
<strong>BOUNCE RATE</strong>102
</p>103
<h5 class="mb-0">104
<strong>32.35%</strong>105
<small class="text-danger ms-2">106
<i class="fas fa-arrow-down fa-sm pe-1"></i>23,58%</small>107
</h5>108
109
<hr />110
111
<p class="text-uppercase text-muted small mb-2">112
Previous period113
</p>114
<h5 class="text-muted mb-0">24.35%</h5>115
</div>116
</div>117
</div>118
</div>119
</section>120
<!--Section: Design Block-->121
122
<!--Section: Content-->123
<section>124
<div class="row">125
<div class="col-md-8 mb-4">126
<div class="card">127
<div class="card-body">128
<!-- Pills navs -->129
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">130
<li class="nav-item" role="presentation">131
<a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="pill" href="#ex1-pills-1" role="tab"132
aria-controls="ex1-pills-1" aria-selected="true">Users</a>133
</li>134
<li class="nav-item" role="presentation">135
<a class="nav-link" id="ex1-tab-2" data-mdb-toggle="pill" href="#ex1-pills-2" role="tab"136
aria-controls="ex1-pills-2" aria-selected="false">Page views</a>137
</li>138
<li class="nav-item" role="presentation">139
<a class="nav-link" id="ex1-tab-3" data-mdb-toggle="pill" href="#ex1-pills-3" role="tab"140
aria-controls="ex1-pills-3" aria-selected="false">Average time</a>141
</li>142
<li class="nav-item" role="presentation">143
<a class="nav-link" id="ex1-tab-4" data-mdb-toggle="pill" href="#ex1-pills-4" role="tab"144
aria-controls="ex1-pills-4" aria-selected="false">Bounce rate</a>145
</li>146
</ul>147
<!-- Pills navs -->148
149
<!-- Pills content -->150
<div class="tab-content" id="ex1-content">151
<div class="tab-pane fade show active" id="ex1-pills-1" role="tabpanel" aria-labelledby="ex1-tab-1">152
<div id="chart-users"></div>153
</div>154
<div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">155
<div id="chart-page-views"></div>156
</div>157
<div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">158
<div id="chart-average-time"></div>159
</div>160
<div class="tab-pane fade" id="ex1-pills-4" role="tabpanel" aria-labelledby="ex1-tab-4">161
<div id="chart-bounce-rate"></div>162
</div>163
</div>164
<!-- Pills content -->165
</div>166
</div>167
</div>168
169
<div class="col-md-4 mb-4">170
<div class="card mb-4">171
<div class="card-body">172
<p class="text-center"><strong>Current period</strong></p>173
<div id="pie-chart-current"></div>174
</div>175
</div>176
177
<div class="card">178
<div class="card-body">179
<p class="text-center"><strong>Previous period</strong></p>180
<div id="pie-chart-previous"></div>181
</div>182
</div>183
</div>184
</div>185
</section>186
<!--Section: Content-->187
<!--/ Copy this code to have a working example -->188
</div>189
190
<h5 class="font-weight-bold mt-5">Free templates</h5>191
<p>We have released the Admin Templates Pack for the previous Bootstrap 4 version for free.</p>192
<p>We also invite you to checkt out the Free Bootstrap 5 templates.</p>193
<a href="https://mdbootstrap.com/freebies/" class="btn btn-danger btn-block"><i class="fas fa-download me-2"></i>Free Bootstrap 5 templates - no registration required</a>194
<a href="https://mdbootstrap.com/freebies/jquery/admin-dashboard/" class="btn btn-info btn-block"><i class="fas fa-download me-2"></i>Free Admin Template for Bootstrap 4 - registration required</a>195
196
</div>1
1
xxxxxxxxxx1
<!-- User chart -->2
<script>3
const dataLine = {4
type: "line",5
data: {6
labels: [7
"Monday",8
"Tuesday",9
"Wednesday",10
"Thursday",11
"Friday",12
"Saturday",13
"Sunday ",14
],15
datasets: [16
{17
label: "Current period",18
data: [65, 59, 80, 81, 56, 55, 40],19
},20
{21
label: "Previous period",22
data: [28, 48, 40, 19, 86, 27, 90],23
backgroundColor: "rgba(66, 133, 244, 0.0)",24
borderColor: "#33b5e5",25
pointBorderColor: "#33b5e5",26
pointBackgroundColor: "#33b5e5",27
},28
],29
},30
};31
32
new mdb.Chart(document.getElementById("chart-users"), dataLine);33
</script>34
35
<!-- Page views chart -->36
<script>37
const dataPageViews = {38
type: "line",39
data: {40
labels: [41
"Monday",42
"Tuesday",43
"Wednesday",44
"Thursday",45
"Friday",46
"Saturday",47
"Sunday ",48
],49
datasets: [50
{51
label: "Current period",52
data: [25, 49, 40, 21, 56, 75, 30],53
},54
{55
label: "Previous period",56
data: [58, 18, 30, 59, 46, 77, 90],57
backgroundColor: "rgba(66, 133, 244, 0.0)",58
borderColor: "#33b5e5",59
pointBorderColor: "#33b5e5",60
pointBackgroundColor: "#33b5e5",61
},62
],63
},64
};65
66
new mdb.Chart(document.getElementById("chart-page-views"), dataPageViews);67
</script>68
69
<!-- Average time chart -->70
<script>71
const dataAverageTime = {72
type: "line",73
data: {74
labels: [75
"Monday",76
"Tuesday",77
"Wednesday",78
"Thursday",79
"Friday",80
"Saturday",81
"Sunday ",82
],83
datasets: [84
{85
label: "Current period",86
data: [431, 123, 435, 123, 345, 234, 124],87
},88
{89
label: "Previous period",90
data: [654, 234, 123, 432, 533, 422, 222],91
backgroundColor: "rgba(66, 133, 244, 0.0)",92
borderColor: "#33b5e5",93
pointBorderColor: "#33b5e5",94
pointBackgroundColor: "#33b5e5",95
},96
],97
},98
};99
100
new mdb.Chart(101
document.getElementById("chart-average-time"),102
dataAverageTime103
);104
</script>105
106
<!-- Bounce rage chart -->107
<script>108
const dataBounceRate = {109
type: "line",110
data: {111
labels: [112
"Monday",113
"Tuesday",114
"Wednesday",115
"Thursday",116
"Friday",117
"Saturday",118
"Sunday ",119
],120
datasets: [121
{122
label: "Current period",123
data: [41, 12, 35, 13, 45, 34, 12],124
},125
{126
label: "Previous period",127
data: [65, 24, 13, 43, 33, 42, 22],128
backgroundColor: "rgba(66, 133, 244, 0.0)",129
borderColor: "#33b5e5",130
pointBorderColor: "#33b5e5",131
pointBackgroundColor: "#33b5e5",132
},133
],134
},135
};136
137
new mdb.Chart(document.getElementById("chart-bounce-rate"), dataBounceRate);138
</script>139
140
<!-- Pie charts -->141
<script>142
const pieChartsOptions = {143
dataLabelsPlugin: true,144
options: {145
legend: {146
position: "right",147
labels: {148
boxWidth: 10,149
},150
},151
plugins: {152
datalabels: {153
formatter: (value, ctx) => {154
let sum = 0;155
let dataArr = dataPieCurrent.data.datasets[0].data;156
dataArr.map((data) => {157
sum += data;158
});159
let percentage = ((value * 100) / sum).toFixed(2) + "%";160
return percentage;161
},162
color: "white",163
labels: {164
title: {165
font: {166
size: "14",167
},168
},169
},170
},171
},172
},173
};174
175
// Pie chart current176
const dataPieCurrent = {177
type: "pie",178
data: {179
labels: ["New visitor", "Returning visitor"],180
datasets: [181
{182
label: "Traffic",183
data: [502355, 423545],184
backgroundColor: [185
"rgba(66, 133, 244, 0.6)",186
"rgba(77, 182, 172, 0.6)",187
],188
},189
],190
},191
};192
193
new mdb.Chart(194
document.getElementById("pie-chart-current"),195
dataPieCurrent,196
pieChartsOptions197
);198
199
// Pie chart previous200
const dataPiePrevious = {201
type: "pie",202
data: {203
labels: ["New visitor", "Returning visitor"],204
datasets: [205
{206
label: "Traffic",207
data: [402355, 523545],208
backgroundColor: [209
"rgba(66, 133, 244, 0.6)",210
"rgba(77, 182, 172, 0.6)",211
],212
},213
],214
},215
};216
217
new mdb.Chart(218
document.getElementById("pie-chart-previous"),219
dataPiePrevious,220
pieChartsOptions221
);222
</script> Console errors: 0