xxxxxxxxxx1
<!--Main Navigation-->2
<header>3
<!-- Sidebar -->4
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white">5
<div class="position-sticky">6
<div class="list-group list-group-flush mx-3 mt-4">7
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init aria-current="true">8
<i class="fas fa-tachometer-alt fa-fw me-3"></i><span>Main dashboard</span>9
</a>10
<a href="#" class="list-group-item list-group-item-action py-2 active" data-mdb-ripple-init>11
<i class="fas fa-chart-area fa-fw me-3"></i><span>Website traffic </span>12
</a>13
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i14
class="fas fa-lock fa-fw me-3"></i><span>Password</span></a>15
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i16
class="fas fa-chart-line fa-fw me-3"></i><span>Analytics</span></a>17
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init>18
<i class="fas fa-chart-pie fa-fw me-3"></i><span>SEO</span>19
</a>20
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i21
class="fas fa-chart-bar fa-fw me-3"></i><span>Orders</span></a>22
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i23
class="fas fa-globe fa-fw me-3"></i><span>International</span></a>24
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i25
class="fas fa-building fa-fw me-3"></i><span>Partners</span></a>26
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i27
class="fas fa-calendar fa-fw me-3"></i><span>Calendar</span></a>28
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i29
class="fas fa-users fa-fw me-3"></i><span>Users</span></a>30
<a href="#" class="list-group-item list-group-item-action py-2" data-mdb-ripple-init><i31
class="fas fa-money-bill fa-fw me-3"></i><span>Sales</span></a>32
</div>33
</div>34
</nav>35
<!-- Sidebar -->36
37
<!-- Navbar -->38
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-light bg-white fixed-top">39
<!-- Container wrapper -->40
<div class="container-fluid">41
<!-- Toggle button -->42
<button class="navbar-toggler" type="button" data-mdb-collapse-init data-mdb-target="#sidebarMenu"43
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">44
<i class="fas fa-bars"></i>45
</button>46
47
<!-- Brand -->48
<a class="navbar-brand" href="#">49
<img src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png" height="25" alt="" loading="lazy" />50
</a>51
<!-- Search form -->52
<form class="d-none d-md-flex input-group w-auto my-auto">53
<input autocomplete="off" type="search" class="form-control rounded"54
placeholder='Search (ctrl + "/" to focus)' style="min-width: 225px" />55
<span class="input-group-text border-0"><i class="fas fa-search"></i></span>56
</form>57
58
<!-- Right links -->59
<ul class="navbar-nav ms-auto d-flex flex-row">60
<!-- Notification dropdown -->61
<li class="nav-item dropdown">62
<a class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdownMenuLink"63
role="button" data-mdb-dropdown-init aria-expanded="false">64
<i class="fas fa-bell"></i>65
<span class="badge rounded-pill badge-notification bg-danger">1</span>66
</a>67
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">68
<li><a class="dropdown-item" href="#">Some news</a></li>69
<li><a class="dropdown-item" href="#">Another news</a></li>70
<li>71
<a class="dropdown-item" href="#">Something else</a>72
</li>73
</ul>74
</li>75
76
<!-- Icon -->77
<li class="nav-item">78
<a class="nav-link me-3 me-lg-0" href="#">79
<i class="fas fa-fill-drip"></i>80
</a>81
</li>82
<!-- Icon -->83
<li class="nav-item me-3 me-lg-0">84
<a class="nav-link" href="#">85
<i class="fab fa-github"></i>86
</a>87
</li>88
89
<!-- Icon dropdown -->90
<li class="nav-item dropdown">91
<a class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow" href="#" id="navbarDropdown" role="button"92
data-mdb-dropdown-init aria-expanded="false">93
<i class="united kingdom flag m-0"></i>94
</a>95
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">96
<li>97
<a class="dropdown-item" href="#"><i class="united kingdom flag"></i>English98
<i class="fa fa-check text-success ms-2"></i></a>99
</li>100
<li>101
<hr class="dropdown-divider" />102
</li>103
<li>104
<a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>105
</li>106
<li>107
<a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>108
</li>109
<li>110
<a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>111
</li>112
<li>113
<a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>114
</li>115
<li>116
<a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>117
</li>118
<li>119
<a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>120
</li>121
<li>122
<a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>123
</li>124
<li>125
<a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>126
</li>127
</ul>128
</li>129
130
<!-- Avatar -->131
<li class="nav-item dropdown">132
<a class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center" href="#"133
id="navbarDropdownMenuLink" role="button" data-mdb-dropdown-init aria-expanded="false">134
<img src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg" class="rounded-circle" height="22"135
alt="" loading="lazy" />136
</a>137
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuLink">138
<li><a class="dropdown-item" href="#">My profile</a></li>139
<li><a class="dropdown-item" href="#">Settings</a></li>140
<li><a class="dropdown-item" href="#">Logout</a></li>141
</ul>142
</li>143
</ul>144
</div>145
<!-- Container wrapper -->146
</nav>147
<!-- Navbar -->148
</header>149
<!--Main Navigation-->150
151
<!--Main layout-->152
<main style="margin-top: 58px">153
<div class="container pt-4">154
<!-- Section: Main chart -->155
<section class="mb-4">156
<div class="card">157
<div class="card-header py-3">158
<h5 class="mb-0 text-center"><strong>Sales</strong></h5>159
</div>160
<div class="card-body">161
<canvas class="my-4 w-100" id="myChart" height="380"></canvas>162
</div>163
</div>164
</section>165
<!-- Section: Main chart -->166
167
<!--Section: Sales Performance KPIs-->168
<section class="mb-4">169
<div class="card">170
<div class="card-header text-center py-3">171
<h5 class="mb-0 text-center">172
<strong>Sales Performance KPIs</strong>173
</h5>174
</div>175
<div class="card-body">176
<div class="table-responsive">177
<table class="table table-hover text-nowrap">178
<thead>179
<tr>180
<th scope="col"></th>181
<th scope="col">Product Detail Views</th>182
<th scope="col">Unique Purchases</th>183
<th scope="col">Quantity</th>184
<th scope="col">Product Revenue</th>185
<th scope="col">Avg. Price</th>186
</tr>187
</thead>188
<tbody>189
<tr>190
<th scope="row">Value</th>191
<td>18,492</td>192
<td>228</td>193
<td>350</td>194
<td>$4,787.64</td>195
<td>$13.68</td>196
</tr>197
<tr>198
<th scope="row">Percentage change</th>199
<td>200
<span class="text-danger">201
<i class="fas fa-caret-down me-1"></i><span>-48.8%%</span>202
</span>203
</td>204
<td>205
<span class="text-success">206
<i class="fas fa-caret-up me-1"></i><span>14.0%</span>207
</span>208
</td>209
<td>210
<span class="text-success">211
<i class="fas fa-caret-up me-1"></i><span>46.4%</span>212
</span>213
</td>214
<td>215
<span class="text-success">216
<i class="fas fa-caret-up me-1"></i><span>29.6%</span>217
</span>218
</td>219
<td>220
<span class="text-danger">221
<i class="fas fa-caret-down me-1"></i><span>-11.5%</span>222
</span>223
</td>224
</tr>225
<tr>226
<th scope="row">Absolute change</th>227
<td>228
<span class="text-danger">229
<i class="fas fa-caret-down me-1"></i><span>-17,654</span>230
</span>231
</td>232
<td>233
<span class="text-success">234
<i class="fas fa-caret-up me-1"></i><span>28</span>235
</span>236
</td>237
<td>238
<span class="text-success">239
<i class="fas fa-caret-up me-1"></i><span>111</span>240
</span>241
</td>242
<td>243
<span class="text-success">244
<i class="fas fa-caret-up me-1"></i><span>$1,092.72</span>245
</span>246
</td>247
<td>248
<span class="text-danger">249
<i class="fas fa-caret-down me-1"></i><span>$-1.78</span>250
</span>251
</td>252
</tr>253
</tbody>254
</table>255
</div>256
</div>257
</div>258
</section>259
<!--Section: Sales Performance KPIs-->260
261
<!--Section: Minimal statistics cards-->262
<section>263
<div class="row">264
<div class="col-xl-3 col-sm-6 col-12 mb-4">265
<div class="card">266
<div class="card-body">267
<div class="d-flex justify-content-between px-md-1">268
<div class="align-self-center">269
<i class="fas fa-pencil-alt text-info fa-3x"></i>270
</div>271
<div class="text-end">272
<h3>278</h3>273
<p class="mb-0">New Posts</p>274
</div>275
</div>276
</div>277
</div>278
</div>279
<div class="col-xl-3 col-sm-6 col-12 mb-4">280
<div class="card">281
<div class="card-body">282
<div class="d-flex justify-content-between px-md-1">283
<div class="align-self-center">284
<i class="far fa-comment-alt text-warning fa-3x"></i>285
</div>286
<div class="text-end">287
<h3>156</h3>288
<p class="mb-0">New Comments</p>289
</div>290
</div>291
</div>292
</div>293
</div>294
<div class="col-xl-3 col-sm-6 col-12 mb-4">295
<div class="card">296
<div class="card-body">297
<div class="d-flex justify-content-between px-md-1">298
<div class="align-self-center">299
<i class="fas fa-chart-line text-success fa-3x"></i>300
</div>301
<div class="text-end">302
<h3>64.89 %</h3>303
<p class="mb-0">Bounce Rate</p>304
</div>305
</div>306
</div>307
</div>308
</div>309
<div class="col-xl-3 col-sm-6 col-12 mb-4">310
<div class="card">311
<div class="card-body">312
<div class="d-flex justify-content-between px-md-1">313
<div class="align-self-center">314
<i class="fas fa-map-marker-alt text-danger fa-3x"></i>315
</div>316
<div class="text-end">317
<h3>423</h3>318
<p class="mb-0">Total Visits</p>319
</div>320
</div>321
</div>322
</div>323
</div>324
</div>325
<div class="row">326
<div class="col-xl-3 col-sm-6 col-12 mb-4">327
<div class="card">328
<div class="card-body">329
<div class="d-flex justify-content-between px-md-1">330
<div>331
<h3 class="text-danger">278</h3>332
<p class="mb-0">New Projects</p>333
</div>334
<div class="align-self-center">335
<i class="fas fa-rocket text-danger fa-3x"></i>336
</div>337
</div>338
</div>339
</div>340
</div>341
<div class="col-xl-3 col-sm-6 col-12 mb-4">342
<div class="card">343
<div class="card-body">344
<div class="d-flex justify-content-between px-md-1">345
<div>346
<h3 class="text-success">156</h3>347
<p class="mb-0">New Clients</p>348
</div>349
<div class="align-self-center">350
<i class="far fa-user text-success fa-3x"></i>351
</div>352
</div>353
</div>354
</div>355
</div>356
<div class="col-xl-3 col-sm-6 col-12 mb-4">357
<div class="card">358
<div class="card-body">359
<div class="d-flex justify-content-between px-md-1">360
<div>361
<h3 class="text-warning">64.89 %</h3>362
<p class="mb-0">Conversion Rate</p>363
</div>364
<div class="align-self-center">365
<i class="fas fa-chart-pie text-warning fa-3x"></i>366
</div>367
</div>368
</div>369
</div>370
</div>371
<div class="col-xl-3 col-sm-6 col-12 mb-4">372
<div class="card">373
<div class="card-body">374
<div class="d-flex justify-content-between px-md-1">375
<div>376
<h3 class="text-info">423</h3>377
<p class="mb-0">Support Tickets</p>378
</div>379
<div class="align-self-center">380
<i class="far fa-life-ring text-info fa-3x"></i>381
</div>382
</div>383
</div>384
</div>385
</div>386
</div>387
<div class="row">388
<div class="col-xl-3 col-sm-6 col-12 mb-4">389
<div class="card">390
<div class="card-body">391
<div class="d-flex justify-content-between px-md-1">392
<div>393
<h3 class="text-info">278</h3>394
<p class="mb-0">New Posts</p>395
</div>396
<div class="align-self-center">397
<i class="fas fa-book-open text-info fa-3x"></i>398
</div>399
</div>400
<div class="px-md-1">401
<div class="progress mt-3 mb-1 rounded" style="height: 7px">402
<div class="progress-bar bg-info" role="progressbar" style="width: 80%" aria-valuenow="80"403
aria-valuemin="0" aria-valuemax="100"></div>404
</div>405
</div>406
</div>407
</div>408
</div>409
<div class="col-xl-3 col-sm-6 col-12 mb-4">410
<div class="card">411
<div class="card-body">412
<div class="d-flex justify-content-between px-md-1">413
<div>414
<h3 class="text-warning">156</h3>415
<p class="mb-0">New Comments</p>416
</div>417
<div class="align-self-center">418
<i class="far fa-comments text-warning fa-3x"></i>419
</div>420
</div>421
<div class="px-md-1">422
<div class="progress mt-3 mb-1 rounded" style="height: 7px">423
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35"424
aria-valuemin="0" aria-valuemax="100"></div>425
</div>426
</div>427
</div>428
</div>429
</div>430
<div class="col-xl-3 col-sm-6 col-12 mb-4">431
<div class="card">432
<div class="card-body">433
<div class="d-flex justify-content-between px-md-1">434
<div>435
<h3 class="text-success">64.89 %</h3>436
<p class="mb-0">Bounce Rate</p>437
</div>438
<div class="align-self-center">439
<i class="fas fa-mug-hot text-success fa-3x"></i>440
</div>441
</div>442
<div class="px-md-1">443
<div class="progress mt-3 mb-1 rounded" style="height: 7px">444
<div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60"445
aria-valuemin="0" aria-valuemax="100"></div>446
</div>447
</div>448
</div>449
</div>450
</div>451
<div class="col-xl-3 col-sm-6 col-12 mb-4">452
<div class="card">453
<div class="card-body">454
<div class="d-flex justify-content-between px-md-1">455
<div>456
<h3 class="text-danger">423</h3>457
<p class="mb-0">Total Visits</p>458
</div>459
<div class="align-self-center">460
<i class="fas fa-map-signs text-danger fa-3x"></i>461
</div>462
</div>463
<div class="px-md-1">464
<div class="progress mt-3 mb-1 rounded" style="height: 7px">465
<div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40"466
aria-valuemin="0" aria-valuemax="100"></div>467
</div>468
</div>469
</div>470
</div>471
</div>472
</div>473
</section>474
<!--Section: Minimal statistics cards-->475
476
<!--Section: Statistics with subtitles-->477
<section>478
<div class="row">479
<div class="col-xl-6 col-md-12 mb-4">480
<div class="card">481
<div class="card-body">482
<div class="d-flex justify-content-between p-md-1">483
<div class="d-flex flex-row">484
<div class="align-self-center">485
<i class="fas fa-pencil-alt text-info fa-3x me-4"></i>486
</div>487
<div>488
<h4>Total Posts</h4>489
<p class="mb-0">Monthly blog posts</p>490
</div>491
</div>492
<div class="align-self-center">493
<h2 class="h1 mb-0">18,000</h2>494
</div>495
</div>496
</div>497
</div>498
</div>499
<div class="col-xl-6 col-md-12 mb-4">500
<div class="card">501
<div class="card-body">502
<div class="d-flex justify-content-between p-md-1">503
<div class="d-flex flex-row">504
<div class="align-self-center">505
<i class="far fa-comment-alt text-warning fa-3x me-4"></i>506
</div>507
<div>508
<h4>Total Comments</h4>509
<p class="mb-0">Monthly blog posts</p>510
</div>511
</div>512
<div class="align-self-center">513
<h2 class="h1 mb-0">84,695</h2>514
</div>515
</div>516
</div>517
</div>518
</div>519
</div>520
<div class="row">521
<div class="col-xl-6 col-md-12 mb-4">522
<div class="card">523
<div class="card-body">524
<div class="d-flex justify-content-between p-md-1">525
<div class="d-flex flex-row">526
<div class="align-self-center">527
<h2 class="h1 mb-0 me-4">$76,456.00</h2>528
</div>529
<div>530
<h4>Total Sales</h4>531
<p class="mb-0">Monthly Sales Amount</p>532
</div>533
</div>534
<div class="align-self-center">535
<i class="far fa-heart text-danger fa-3x"></i>536
</div>537
</div>538
</div>539
</div>540
</div>541
<div class="col-xl-6 col-md-12 mb-4">542
<div class="card">543
<div class="card-body">544
<div class="d-flex justify-content-between p-md-1">545
<div class="d-flex flex-row">546
<div class="align-self-center">547
<h2 class="h1 mb-0 me-4">$36,000.00</h2>548
</div>549
<div>550
<h4>Total Cost</h4>551
<p class="mb-0">Monthly Cost</p>552
</div>553
</div>554
<div class="align-self-center">555
<i class="fas fa-wallet text-success fa-3x"></i>556
</div>557
</div>558
</div>559
</div>560
</div>561
</div>562
</section>563
<!--Section: Statistics with subtitles-->564
</div>565
</main>566
<!--Main layout-->xxxxxxxxxx1
body {2
background-color: #fbfbfb;3
}4
@media (min-width: 991.98px) {5
main {6
padding-left: 240px;7
}8
}9
10
/* Sidebar */11
.sidebar {12
position: fixed;13
top: 0;14
bottom: 0;15
left: 0;16
padding: 58px 0 0; /* Height of navbar */17
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);18
width: 240px;19
z-index: 600;20
}21
22
@media (max-width: 991.98px) {23
.sidebar {24
width: 100%;25
}26
}27
.sidebar .active {28
border-radius: 5px;29
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);30
}31
32
.sidebar-sticky {33
position: relative;34
top: 0;35
height: calc(100vh - 48px);36
padding-top: 0.5rem;37
overflow-x: hidden;38
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */39
}xxxxxxxxxx1
// Graph2
var ctx = document.getElementById("myChart");3
4
var myChart = new Chart(ctx, {5
type: "line",6
data: {7
labels: [8
"Sunday",9
"Monday",10
"Tuesday",11
"Wednesday",12
"Thursday",13
"Friday",14
"Saturday",15
],16
datasets: [17
{18
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],19
lineTension: 0,20
backgroundColor: "transparent",21
borderColor: "#007bff",22
borderWidth: 4,23
pointBackgroundColor: "#007bff",24
},25
],26
},27
options: {28
scales: {29
yAxes: [30
{31
ticks: {32
beginAtZero: false,33
},34
},35
],36
},37
legend: {38
display: false,39
},40
},41
}); Console errors: 0