xxxxxxxxxx1
<div class="container my-4">2
<p>3
<strong>Admin dashboard templates enable you to quickly create admin panels. Copy & paste examples straight into your code.</strong>4
</p>5
6
<p>Click the red <button href="https://mdbootstrap.com/docs/standard/templates/admin-dashboard/" class="btn btn-danger btn-sm">DOCS</button> 7
button in the upper left corner, in order to find more examples of Admin Dashboards, or go directly to:</p>8
9
<ul>10
<li><a href="https://mdbootstrap.com/docs/standard/design-blocks/admin/">Admin Design Blocks</a></li>11
<li><a href="https://mdbootstrap.com/docs/standard/templates/admin-dashboard/">Admin Templates</a></li>12
</ul>13
14
<hr/>15
16
<p class="font-weight-bold">Basic example of Admin Section</p>17
18
19
20
<div class="border p-5 mb-5">21
<!-- Copy this code to have a working example -->22
<!--Section: Design Block-->23
<section>24
<div class="row">25
<div class="col-lg-3 col-md-6 mb-4">26
<div class="card">27
<div class="card-body">28
<p class="text-uppercase small mb-2">29
<strong>USERS</strong>30
</p>31
<h5 class="mb-0">32
<strong>14 567</strong>33
<small class="text-success ms-2">34
<i class="fas fa-arrow-up fa-sm pe-1"></i>13,48%</small>35
</h5>36
37
<hr />38
39
<p class="text-uppercase text-muted small mb-2">40
Previous period41
</p>42
<h5 class="text-muted mb-0">11 467</h5>43
</div>44
</div>45
<!-- Card -->46
</div>47
48
<div class="col-lg-3 col-md-6 mb-4">49
<div class="card">50
<div class="card-body">51
<p class="text-uppercase small mb-2">52
<strong>PAGE VIEWS</strong>53
</p>54
<h5 class="mb-0">55
<strong>51 354 </strong>56
<small class="text-success ms-2">57
<i class="fas fa-arrow-up fa-sm pe-1"></i>23,58%</small>58
</h5>59
60
<hr />61
62
<p class="text-uppercase text-muted small mb-2">63
Previous period64
</p>65
<h5 class="text-muted mb-0">38 454</h5>66
</div>67
</div>68
</div>69
70
<div class="col-lg-3 col-md-6 mb-4">71
<div class="card">72
<div class="card-body">73
<p class="text-uppercase small mb-2">74
<strong>AVERAGE TIME</strong>75
</p>76
<h5 class="mb-0">77
<strong>00:04:20</strong>78
<small class="text-danger ms-2">79
<i class="fas fa-arrow-down fa-sm pe-1"></i>23,58%</small>80
</h5>81
82
<hr />83
84
<p class="text-uppercase text-muted small mb-2">85
Previous period86
</p>87
<h5 class="text-muted mb-0">00:05:20</h5>88
</div>89
</div>90
</div>91
92
<div class="col-lg-3 col-md-6 mb-4">93
<div class="card">94
<div class="card-body">95
<p class="text-uppercase small mb-2">96
<strong>BOUNCE RATE</strong>97
</p>98
<h5 class="mb-0">99
<strong>32.35%</strong>100
<small class="text-danger ms-2">101
<i class="fas fa-arrow-down fa-sm pe-1"></i>23,58%</small>102
</h5>103
104
<hr />105
106
<p class="text-uppercase text-muted small mb-2">107
Previous period108
</p>109
<h5 class="text-muted mb-0">24.35%</h5>110
</div>111
</div>112
</div>113
</div>114
</section>115
<!--Section: Design Block-->116
117
<!--Section: Content-->118
<section>119
<div class="row">120
<div class="col-md-8 mb-4">121
<div class="card">122
<div class="card-body">123
<!-- Pills navs -->124
<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist">125
<li class="nav-item" role="presentation">126
<a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="pill" href="#ex1-pills-1" role="tab"127
aria-controls="ex1-pills-1" aria-selected="true">Users</a>128
</li>129
<li class="nav-item" role="presentation">130
<a class="nav-link" id="ex1-tab-2" data-mdb-toggle="pill" href="#ex1-pills-2" role="tab"131
aria-controls="ex1-pills-2" aria-selected="false">Page views</a>132
</li>133
<li class="nav-item" role="presentation">134
<a class="nav-link" id="ex1-tab-3" data-mdb-toggle="pill" href="#ex1-pills-3" role="tab"135
aria-controls="ex1-pills-3" aria-selected="false">Average time</a>136
</li>137
<li class="nav-item" role="presentation">138
<a class="nav-link" id="ex1-tab-4" data-mdb-toggle="pill" href="#ex1-pills-4" role="tab"139
aria-controls="ex1-pills-4" aria-selected="false">Bounce rate</a>140
</li>141
</ul>142
<!-- Pills navs -->143
144
<!-- Pills content -->145
<div class="tab-content" id="ex1-content">146
<div class="tab-pane fade show active" id="ex1-pills-1" role="tabpanel" aria-labelledby="ex1-tab-1">147
<div id="chart-users"></div>148
</div>149
<div class="tab-pane fade" id="ex1-pills-2" role="tabpanel" aria-labelledby="ex1-tab-2">150
<div id="chart-page-views"></div>151
</div>152
<div class="tab-pane fade" id="ex1-pills-3" role="tabpanel" aria-labelledby="ex1-tab-3">153
<div id="chart-average-time"></div>154
</div>155
<div class="tab-pane fade" id="ex1-pills-4" role="tabpanel" aria-labelledby="ex1-tab-4">156
<div id="chart-bounce-rate"></div>157
</div>158
</div>159
<!-- Pills content -->160
</div>161
</div>162
</div>163
164
<div class="col-md-4 mb-4">165
<div class="card mb-4">166
<div class="card-body">167
<p class="text-center"><strong>Current period</strong></p>168
<div id="pie-chart-current"></div>169
</div>170
</div>171
172
<div class="card">173
<div class="card-body">174
<p class="text-center"><strong>Previous period</strong></p>175
<div id="pie-chart-previous"></div>176
</div>177
</div>178
</div>179
</div>180
</section>181
<!--Section: Content-->182
<!--/ Copy this code to have a working example -->183
</div>184
185
</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