xxxxxxxxxx1
<body class="fixed-sn dark-skin dark-theme">2
<!-- Main layout -->3
<main class="pt-3">4
5
<div class="container-fluid">6
7
<!-- Grid row -->8
<div class="row">9
10
<!-- Grid column -->11
<div class="col-md-12 mb-4">12
13
<div class="card">14
<div class="card-body pl-0 pr-2 pb-0">15
<div class="float-left white-text pl-4">16
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Total Shipments</p>17
<h2 class="font-weight-light">Performance</h2>18
</div>19
<div class="btn-group float-right pr-3" role="group" aria-label="Basic example">20
<button type="button" class="btn btn-sm btn-primary" id="accountsData">Accounts</button>21
<button type="button" class="btn btn-sm btn-primary" id="purchasesData">Purchases</button>22
<button type="button" class="btn btn-sm btn-primary" id="sessionsData">Sessions</button>23
</div>24
<canvas id="lineChart" height="90"></canvas>25
</div>26
</div>27
28
</div>29
<!-- Grid column -->30
31
</div>32
<!-- Grid row -->33
34
<!-- Grid row -->35
<div class="row">36
37
<!-- Grid column -->38
<div class="col-lg-4 col-md-12 mb-4">39
40
<div class="card">41
<div class="card-body px-2">42
<div class="float-left white-text pl-4">43
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Total Shipments</p>44
<p><i class="far fa-bell pr-2 align-text-top mt-n1 icon icon-blue"></i><span45
class="font-weight-light h3">354,780</span></p>46
</div>47
<canvas id="horizontalBar" height="280"></canvas>48
</div>49
</div>50
51
</div>52
<!-- Grid column -->53
54
<!-- Grid column -->55
<div class="col-lg-4 col-md-6 mb-4">56
57
<div class="card">58
<div class="card-body px-2">59
<div class="float-left white-text pl-4">60
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Completed Tasks</p>61
<p><i class="far fa-paper-plane pr-2 align-text-top mt-n1 icon icon-blue"></i><span62
class="font-weight-light h3">14,578</span></p>63
</div>64
<canvas id="lineChartSecond" height="280"></canvas>65
</div>66
</div>67
68
</div>69
<!-- Grid column -->70
71
<!-- Grid column -->72
<div class="col-lg-4 col-md-6 mb-4">73
74
<div class="card">75
<div class="card-body px-2">76
<div class="float-left white-text pl-4">77
<p class="font-weight-light mb-1 mt-n1 text-white-50 font-small">Daily Sales</p>78
<p><i class="fas fa-truck pr-2 align-text-top mt-n1 icon icon-blue"></i><span79
class="font-weight-light h3">$7,000</span></p>80
</div>81
<canvas id="barChart" height="280"></canvas>82
</div>83
</div>84
85
</div>86
<!-- Grid column -->87
88
</div>89
<!-- Grid row -->90
91
<!-- Grid row -->92
<div class="row">93
94
<!-- Grid column -->95
<div class="col-md-6 mb-4">96
97
<!-- Card -->98
<div class="card card-table">99
100
<div class="card-header d-flex justify-content-between">101
102
<div class="d-flex justify-content-start">103
<p class="my-2 text-white pr-3">Tasks(5)</p>104
<p class="my-2 text-white">Today</p>105
</div>106
<!--Dropdown primary-->107
<div class="dropdown mt-2">108
109
<!--Trigger-->110
<a class="dropdown-toggle text-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog"></i></a>111
112
<!--Menu-->113
<div class="dropdown-menu dropdown-primary">114
<a class="dropdown-item" href="#">Action</a>115
<a class="dropdown-item" href="#">Another action</a>116
<a class="dropdown-item" href="#">Something else here</a>117
<a class="dropdown-item" href="#">Something else here</a>118
</div>119
</div>120
121
</div>122
123
<!-- Card content -->124
<div class="card-body pt-0">125
126
<div class="table-responsive">127
<!-- Table -->128
<table class="table text-white mb-0">129
130
<!-- Table body -->131
<tbody>132
<tr>133
<th class="cell-small py-0 pr-0 pl-2 align-middle">134
<!-- Material unchecked -->135
<div class="form-check pb-0 pt-2 px-0 m-0">136
<input type="checkbox" class="form-check-input" id="tableMaterialCheck2">137
<label class="form-check-label" for="tableMaterialCheck2"></label>138
</div>139
</th>140
<td class="py-2">141
<p class="mb-1 font-weight-bold">Update the Documentation</p>142
<p class="mb-0">Dwuamish Head, Seattle, WA 8:47 AM</p>143
</td>144
<td class="cell-small align-middle">145
<i class="fas fa-pencil-alt"></i>146
</td>147
</tr>148
<tr>149
<th class="cell-small py-0 pr-0 pl-2 align-middle">150
<!-- Material unchecked -->151
<div class="form-check pb-0 pt-2 px-0 m-0">152
<input type="checkbox" class="form-check-input" id="tableMaterialCheck2">153
<label class="form-check-label" for="tableMaterialCheck2"></label>154
</div>155
</th>156
<td class="py-2">157
<p class="mb-1 font-weight-bold">GDPR Compliance</p>158
<p class="mb-0">The GDPR is a regulation that requires businesses to protect the personal data159
and privacy of Europe citizens for transactions that occur within EU member states.</p>160
</td>161
<td class="cell-small align-middle">162
<i class="fas fa-pencil-alt"></i>163
</td>164
</tr>165
<tr>166
<th class="cell-small py-0 pr-0 pl-2 align-middle">167
<!-- Material unchecked -->168
<div class="form-check pb-0 pt-2 px-0 m-0">169
<input type="checkbox" class="form-check-input" id="tableMaterialCheck2">170
<label class="form-check-label" for="tableMaterialCheck2"></label>171
</div>172
</th>173
<td class="py-2">174
<p class="mb-1 font-weight-bold">Solve the issues</p>175
<p class="mb-0">Fifty percent of all respondents said they would be more likely to shop at a176
company</p>177
</td>178
<td class="cell-small align-middle">179
<i class="fas fa-pencil-alt"></i>180
</td>181
</tr>182
<tr>183
<th class="cell-small py-0 pr-0 pl-2 align-middle">184
<!-- Material unchecked -->185
<div class="form-check pb-0 pt-2 px-0 m-0">186
<input type="checkbox" class="form-check-input" id="tableMaterialCheck5">187
<label class="form-check-label" for="tableMaterialCheck5"></label>188
</div>189
</th>190
<td class="py-2">191
<p class="mb-1 font-weight-bold">Release v2.0.0</p>192
<p class="mb-0">Ra Ave SW, Seattle, WA 98116, SUA 11:19 AM</p>193
</td>194
<td class="cell-small align-middle">195
<i class="fas fa-pencil-alt"></i>196
</td>197
</tr>198
<tr>199
<th class="cell-small py-0 pr-0 pl-2 align-middle">200
<!-- Material unchecked -->201
<div class="form-check pb-0 pt-2 px-0 m-0">202
<input type="checkbox" class="form-check-input" id="tableMaterialCheck6">203
<label class="form-check-label" for="tableMaterialCheck6"></label>204
</div>205
</th>206
<td class="py-2">207
<p class="mb-1 font-weight-bold">Export the processed files</p>208
<p class="mb-0">The report also shows that consumers will not easily forgive a company once a209
breach exposing their personal data occurs.</p>210
</td>211
<td class="cell-small align-middle">212
<i class="fas fa-pencil-alt"></i>213
</td>214
</tr>215
<tr>216
<th class="cell-small py-0 pr-0 pl-2 align-middle">217
<!-- Material unchecked -->218
<div class="form-check pb-0 pt-2 px-0 m-0">219
<input type="checkbox" class="form-check-input" id="tableMaterialCheck7">220
<label class="form-check-label" for="tableMaterialCheck7"></label>221
</div>222
</th>223
<td class="py-2">224
<p class="mb-1 font-weight-bold">Arival at export process</p>225
<p class="mb-0">Capitol Hill, Seattle, WA 12:34 AM</p>226
</td>227
<td class="cell-small align-middle">228
<i class="fas fa-pencil-alt"></i>229
</td>230
</tr>231
</tbody>232
<!-- Table body -->233
</table>234
<!-- Table -->235
</div>236
237
</div>238
239
</div>240
<!-- Card -->241
242
</div>243
<!-- Grid column -->244
245
<!-- Grid column -->246
<div class="col-md-6 mb-4">247
248
<!-- Card -->249
<div class="card card-table">250
251
<div class="card-header">252
<h5 class="my-2 text-white">Simple Table</h5>253
</div>254
255
<!-- Card content -->256
<div class="card-body pt-1">257
258
<div class="table-responsive">259
<table class="table text-white mb-0">260
<thead class="">261
<tr>262
<th>Name</th>263
<th>Country</th>264
<th>City</th>265
<th class="text-center">Salary</th>266
</tr>267
</thead>268
<tbody>269
<tr>270
<td>Dakota Rice</td>271
<td>Niger</td>272
<td>Oud-Turnhout</td>273
<td class="text-center">$36,738</td>274
</tr>275
<tr>276
<td>Minerva Hooper</td>277
<td>Curaçao</td>278
<td>Sinaai-Waas</td>279
<td class="text-center">$23,789</td>280
</tr>281
<tr>282
<td>Sage Rodriguez</td>283
<td>Netherlands</td>284
<td>Baileux</td>285
<td class="text-center">$56,142</td>286
</tr>287
<tr>288
<td>Philip Chaney</td>289
<td>Korea, South</td>290
<td>Overland Park</td>291
<td class="text-center">$38,735</td>292
</tr>293
<tr>294
<td>Doris Greene</td>295
<td>Malawi</td>296
<td>Feldkirchen in Kärnten</td>297
<td class="text-center">$63,542</td>298
</tr>299
<tr>300
<td>Mason Porter</td>301
<td>Chile</td>302
<td>Gloucester</td>303
<td class="text-center">$78,615</td>304
</tr>305
<tr>306
<td>Jon Porter</td>307
<td>Portugal</td>308
<td>Gloucester</td>309
<td class="text-center">$98,615</td>310
</tr>311
</tbody>312
</table>313
</div>314
315
</div>316
317
</div>318
<!-- Card -->319
320
</div>321
<!-- Grid column -->322
323
</div>324
<!-- Grid row -->325
326
</div>327
328
</main>329
<!-- Main layout -->330
331
</body>332
xxxxxxxxxx1
.dark-theme {2
background-color: #181C30; }3
.dark-theme.fixed-sn .double-nav,4
.dark-theme.fixed-sn main,5
.dark-theme.fixed-sn footer {6
padding-left: 15rem; }7
.dark-theme.fixed-sn main {8
margin-left: 1rem;9
margin-right: 1rem; }10
@media (max-width: 1289px) {11
.dark-theme.fixed-sn .double-nav,12
.dark-theme.fixed-sn main,13
.dark-theme.fixed-sn footer {14
padding-left: 0; } }15
@media (min-width: 1289px) {16
.dark-theme.fixed-sn .double-nav .button-collapse {17
display: none; } }18
@media (max-width: 1289px) {19
.dark-theme.fixed-sn .double-nav .button-collapse {20
display: block;21
position: relative;22
font-size: 1.4rem;23
margin-right: 10px;24
margin-left: 10px; } }25
.dark-theme header {26
border-top: 2px solid #1d8cf8; }27
.dark-theme header .navbar {28
box-shadow: none;29
background-color: #181C30; }30
.dark-theme .card {31
background-color: #27293d; }32
.dark-theme .card .card-header {33
background-color: #27293d; }34
.dark-theme .card.card-table .card-header {35
border-bottom: none; }36
.dark-theme .btn.btn-sm {37
padding: .4rem 1.5rem .25rem;38
font-size: .75rem;39
font-weight: 500; }40
.dark-theme i.icon {41
font-size: 1.1rem; }42
.dark-theme i.icon.icon-blue {43
color: #36A2EB; }44
.cell-small {45
width: 1rem;46
}47
.dark-skin .side-nav .sidenav-bg:after, .dark-skin .side-nav .sidenav-bg.mask-strong:after {48
background: rgba(29, 140, 248, 0.8); }49
.dark-skin .side-nav .collapsible li .collapsible-header.active {50
background-color: rgba(24, 28, 48, 0.8); }51
.dark-skin .side-nav .collapsible li .collapsible-header:hover {52
background-color: rgba(24, 28, 48, 0.8); }53
.dark-skin .side-nav .collapsible li a:not(.collapsible-header):hover, .dark-skin .side-nav .collapsible li a:not(.collapsible-header).active, .dark-skin .side-nav .collapsible li a:not(.collapsible-header):active {54
color: #67d5ff !important; }55
xxxxxxxxxx1
2
// Chart customizer3
(function (global) {4
5
var Samples = global.Samples || (global.Samples = {});6
var Color = global.Color;7
8
Samples.utils = {9
// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/10
srand: function (seed) {11
this._seed = seed;12
},13
14
rand: function (min, max) {15
var seed = this._seed;16
min = min === undefined ? 0 : min;17
max = max === undefined ? 1 : max;18
this._seed = (seed * 9301 + 49297) % 233280;19
return min + (this._seed / 233280) * (max - min);20
},21
22
numbers: function (config) {23
var cfg = config || {};24
var min = cfg.min || 0;25
var max = cfg.max || 1;26
var from = cfg.from || [];27
var count = cfg.count || 8;28
var decimals = cfg.decimals || 8;29
var continuity = cfg.continuity || 1;30
var dfactor = Math.pow(10, decimals) || 0;31
var data = [];32
var i, value;33
34
for (i = 0; i < count; ++i) {35
value = (from[i] || 0) + this.rand(min, max);36
if (this.rand() <= continuity) {37
data.push(Math.round(dfactor * value) / dfactor);38
} else {39
data.push(null);40
}41
}42
43
return data;44
},45
46
labels: function (config) {47
var cfg = config || {};48
var min = cfg.min || 0;49
var max = cfg.max || 100;50
var count = cfg.count || 8;51
var step = (max - min) / count;52
var decimals = cfg.decimals || 8;53
var dfactor = Math.pow(10, decimals) || 0;54
var prefix = cfg.prefix || '';55
var values = [];56
var i;57
58
for (i = min; i < max; i += step) {59
values.push(prefix + Math.round(dfactor * i) / dfactor);60
}61
62
return values;63
},64
65
months: function (config) {66
var cfg = config || {};67
var count = cfg.count || 12;68
var section = cfg.section;69
var values = [];70
var i, value;71
72
for (i = 0; i < count; ++i) {73
value = MONTHS[Math.ceil(i) % 12];74
values.push(value.substring(0, section));75
}76
77
return values;78
},79
80
color: function (index) {81
return COLORS[index % COLORS.length];82
},83
84
transparentize: function (color, opacity) {85
var alpha = opacity === undefined ? 0.5 : 1 - opacity;86
return Color(color).alpha(alpha).rgbString();87
}88
};89
90
// DEPRECATED91
window.randomScalingFactor = function () {92
return Math.round(Samples.utils.rand(40, 120));93
};94
95
// INITIALIZATION96
97
Samples.utils.srand(Date.now());98
99
// Google Analytics100
/* eslint-disable */101
if (document.location.hostname.match(/^(www\.)?chartjs\.org$/)) {102
(function (i, s, o, g, r, a, m) {103
i['GoogleAnalyticsObject'] = r;104
i[r] = i[r] || function () {105
(i[r].q = i[r].q || []).push(arguments)106
}, i[r].l = 1 * new Date();107
a = s.createElement(o),108
m = s.getElementsByTagName(o)[0];109
a.async = 1;110
a.src = g;111
m.parentNode.insertBefore(a, m)112
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');113
ga('create', 'UA-28909194-3', 'auto');114
ga('send', 'pageview');115
}116
/* eslint-enable */117
118
}(this));119
120
// Line chart121
var ctxL = document.getElementById("lineChart").getContext('2d');122
var gradientFill = ctxL.createLinearGradient(0, 0, 0, 250);123
gradientFill.addColorStop(0, "rgba(29, 140, 248, 1)");124
gradientFill.addColorStop(1, "rgba(29, 140, 248, 0.1)");125
126
var config = {127
type: 'line',128
data: {129
labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],130
datasets: [{131
data: [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],132
backgroundColor: gradientFill,133
borderColor: [134
'#1d8cf8',135
],136
borderWidth: 2,137
pointBackgroundColor: "#1d8cf8",138
}]139
},140
options: {141
responsive: true,142
legend: {143
display: false,144
},145
title: {146
display: true,147
},148
tooltips: {149
mode: 'index',150
intersect: false,151
},152
hover: {153
mode: 'nearest',154
intersect: true155
},156
scales: {157
xAxes: [{158
display: true,159
scaleLabel: {160
display: true,161
},162
ticks: {163
fontColor: 'rgba(255, 255, 255, .5)'164
}165
}],166
yAxes: [{167
display: true,168
scaleLabel: {169
display: true,170
},171
ticks: {172
min: 40,173
max: 120,174
padding: 0,175
fontColor: 'rgba(255, 255, 255, .5)'176
},177
gridLines: {178
display: false,179
}180
}]181
}182
}183
};184
185
window.onload = function () {186
var ctxL = document.getElementById("lineChart").getContext('2d');187
window.myLine = new Chart(ctxL, config);188
};189
190
document.getElementById('accountsData').addEventListener('click', function () {191
config.data.datasets.forEach(function (dataset) {192
dataset.data = dataset.data.map(function () {193
return randomScalingFactor();194
});195
196
});197
198
window.myLine.update();199
});200
201
document.getElementById('purchasesData').addEventListener('click', function () {202
config.data.datasets.forEach(function (dataset) {203
dataset.data = dataset.data.map(function () {204
return randomScalingFactor();205
});206
207
});208
209
window.myLine.update();210
});211
212
document.getElementById('sessionsData').addEventListener('click', function () {213
config.data.datasets.forEach(function (dataset) {214
dataset.data = dataset.data.map(function () {215
return randomScalingFactor();216
});217
218
});219
220
window.myLine.update();221
});222
223
var ctxY = document.getElementById("horizontalBar").getContext('2d');224
var myLineChart = new Chart(ctxY, {225
type: "horizontalBar",226
data: {227
labels: ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],228
datasets: [{229
data: [105, 95, 85, 100, 115, 125],230
fill: false,231
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",232
"rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"233
],234
borderWidth: 2235
}]236
},237
options: {238
legend: {239
display: false,240
},241
scales: {242
xAxes: [{243
ticks: {244
beginAtZero: false,245
min: 50,246
max: 130,247
padding: 0,248
fontColor: 'rgba(255, 255, 255, .5)'249
}250
}],251
yAxes: [{252
display: true,253
ticks: {254
fontColor: 'rgba(255, 255, 255, .5)'255
},256
}]257
}258
}259
});260
261
// Line262
var ctxY = document.getElementById("lineChartSecond").getContext('2d');263
var gradientFill = ctxY.createLinearGradient(0, 0, 0, 250);264
gradientFill.addColorStop(0, "rgba(29, 140, 248, 1)");265
gradientFill.addColorStop(1, "rgba(29, 140, 248, 0.1)");266
var myLineChart = new Chart(ctxY, {267
type: 'line',268
data: {269
labels: ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],270
datasets: [{271
label: "My Second dataset",272
data: [80, 100, 70, 80, 120, 80],273
backgroundColor: gradientFill,274
borderColor: [275
'#1d8cf8',276
],277
borderWidth: 2,278
pointBackgroundColor: "#1d8cf8",279
}]280
},281
options: {282
legend: {283
display: false,284
},285
scales: {286
xAxes: [{287
ticks: {288
fontColor: 'rgba(255, 255, 255, .5)'289
}290
}],291
yAxes: [{292
display: true,293
ticks: {294
min: 60,295
max: 130,296
padding: 0,297
fontColor: 'rgba(255, 255, 255, .5)'298
},299
gridLines: {300
display: false,301
}302
}]303
}304
}305
});306
307
// Bar308
var ctxB = document.getElementById("barChart").getContext('2d');309
var myBarChart = new Chart(ctxB, {310
type: 'bar',311
data: {312
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],313
datasets: [{314
data: [12, 19, 3, 5, 2, 3],315
borderColor: [316
'rgba(255,99,132,1)',317
'rgba(54, 162, 235, 1)',318
'rgba(255, 206, 86, 1)',319
'rgba(75, 192, 192, 1)',320
'rgba(153, 102, 255, 1)',321
'rgba(255, 159, 64, 1)'322
],323
borderWidth: 2324
}]325
},326
options: {327
legend: {328
display: false,329
},330
scales: {331
xAxes: [{332
ticks: {333
fontColor: 'rgba(255, 255, 255, .5)'334
}335
}],336
yAxes: [{337
ticks: {338
beginAtZero: true,339
fontColor: 'rgba(255, 255, 255, .5)'340
}341
}]342
}343
}344
});345
Console errors: 0