HTML
xxxxxxxxxx1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />6
<meta name="viewport" content="width=device-width, initial-scale=1" />7
<meta name="theme-color" content="#000000" />8
<meta9
name="description"10
content="Web site created using create-react-app"11
/>12
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />13
<link14
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"15
rel="stylesheet"16
/>17
<link18
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"19
rel="stylesheet"20
/>21
22
<!--23
manifest.json provides metadata used when your web app is installed on a24
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/25
-->26
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />27
<!--28
Notice the use of %PUBLIC_URL% in the tags above.29
It will be replaced with the URL of the `public` folder during the build.30
Only files inside the `public` folder can be referenced from the HTML.31
32
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will33
work correctly both with client-side routing and a non-root public URL.34
Learn how to configure a non-root public URL by running `npm run build`.35
-->36
<title>MDBReact5 Template App</title>37
</head>38
<body>39
<noscript>You need to enable JavaScript to run this app.</noscript>40
<div id="root"></div>41
<!--42
This HTML file is a template.43
If you open it directly in the browser, you will see an empty page.44
45
You can add webfonts, meta tags, or analytics to this file.46
The build step will place the bundled scripts into the <body> tag.47
48
To begin the development, run `npm start` or `yarn start`.49
To create a production bundle, use `npm run build` or `yarn build`.50
-->51
</body>52
</html>53
SCSS
xxxxxxxxxx1
body {2
margin: 0;3
font-family: Roboto, Helvetica, Arial, sans-serif;4
-webkit-font-smoothing: antialiased;5
-moz-osx-font-smoothing: grayscale;6
}7
8
code {9
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',10
monospace;11
}12
JS (TypeScript)
xxxxxxxxxx1
import React from 'react';2
import {3
MDBContainer,4
MDBRow,5
MDBCard,6
MDBCardHeader,7
MDBCol,8
MDBDatepicker,9
MDBSelectDeprecated,10
MDBCardBody,11
MDBCardFooter,12
MDBIcon,13
MDBTable,14
MDBTableHead,15
MDBTableBody,16
MDBChart,17
MDBBtn,18
MDBBadge,19
MDBDatatable20
} from 'mdb-react-ui-kit';21
22
function App() {23
const dataSessions = {24
labels: ['Desktop', 'Mobile', 'Tablet'],25
datasets: [26
{27
label: 'Traffic',28
data: [3230, 4531, 1832],29
backgroundColor: ['rgba(63, 81, 181, 0.5)', 'rgba(77, 182, 172, 0.5)', 'rgba(66, 133, 244, 0.5)'],30
},31
],32
};33
return (34
<MDBContainer fluid>35
<MDBRow className='justify-content-center'>36
<MDBCol md='12'>37
<section className='text-center'>38
<MDBRow>39
<MDBCol xl='4' className='mb-4'>40
<MDBCard>41
<MDBCardHeader background='light' className='border-0 py-3'>42
<p className='mb-0'>43
<strong>Users & Sessions</strong>44
</p>45
</MDBCardHeader>46
<MDBCardBody>47
<div className='d-flex justify-content-around'>48
<div>49
<p className='mb-2'>Users</p>50
<h5>38.6K</h5>51
<p className='text-success small'>52
<MDBIcon icon='caret-up' className='me-1' />53
<span>72.0%</span>54
</p>55
</div>56
<div>57
<p className='mb-2'>Sessions</p>58
<h5>50.9K</h5>59
<p className='text-success small'>60
<MDBIcon icon='caret-up' className='me-1' />61
<span>82.0%</span>62
</p>63
</div>64
<div>65
<p className='mb-2'>New Users</p>66
<h5>34.0K</h5>67
<p className='text-danger small'>68
<MDBIcon icon='caret-down' className='me-1' />69
<span>12.0%</span>70
</p>71
</div>72
</div>73
<MDBChart74
type='line'75
data={{76
labels: ['20 Sep', '21 Sep', '22 Sep', '23 Sep', '24 Sep', '25 Sep', '26 Sep'],77
datasets: [78
{79
label: 'Users',80
data: [650, 590, 800, 810, 560, 550, 400],81
},82
{83
label: 'Sessions',84
data: [750, 690, 900, 910, 660, 750, 500],85
backgroundColor: 'rgba(66, 133, 244, 0.0)',86
borderColor: '#33b5e5',87
pointBorderColor: '#33b5e5',88
pointBackgroundColor: '#33b5e5',89
},90
],91
}}92
/>93
</MDBCardBody>94
</MDBCard>95
</MDBCol>96
97
<MDBCol xl='4' className='mb-4'>98
<MDBCard>99
<MDBCardHeader background='light' className='border-0 py-3'>100
<p className='mb-0'>101
<strong>Revenue & Conversion Rate</strong>102
</p>103
</MDBCardHeader>104
<MDBCardBody>105
<div className='d-flex justify-content-around'>106
<div>107
<p className='mb-2'>Product Revenue</p>108
<h5>5.35KK</h5>109
<p className='text-success small'>110
<MDBIcon icon='caret-up' className='me-1' />111
<span>21.6%</span>112
</p>113
</div>114
<div>115
<p className='mb-2'>Transactions</p>116
<h5>88</h5>117
<p className='text-danger small'>118
<MDBIcon icon='caret-down' className='me-1' />119
<span>-22.8%</span>120
</p>121
</div>122
<div>123
<p className='mb-2'>Conversion Rate</p>124
<h5>0.2%</h5>125
<p className='text-danger small'>126
<MDBIcon icon='caret-down' className='me-1' />127
<span>-1.7%</span>128
</p>129
</div>130
</div>131
<MDBChart132
type='line'133
options={{134
scales: {135
y: {136
ticks: {137
display: false,138
},139
},140
y1: {141
position: 'left',142
ticks: {143
beginAtZero: true,144
callback: function (value: any) {145
return '$' + value;146
},147
},148
},149
y2: {150
position: 'right',151
grid: {152
drawOnChartArea: false,153
},154
ticks: {155
beginAtZero: true,156
},157
},158
},159
}}160
data={{161
labels: ['20 Sep', '21 Sep', '22 Sep', '23 Sep', '24 Sep', '25 Sep', '26 Sep'],162
datasets: [163
{164
label: 'Transactions',165
yAxisID: 'y1',166
data: [21, 23, 25, 34, 23, 19, 9],167
order: 2,168
},169
{170
label: 'Conversion rate %',171
172
yAxisID: 'y2',173
data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],174
type: 'line',175
order: 1,176
backgroundColor: 'rgba(66, 133, 244, 0.0)',177
borderColor: '#94DFD7',178
borderWidth: 2,179
pointBorderColor: '#94DFD7',180
pointBackgroundColor: '#94DFD7',181
lineTension: 0.0,182
},183
],184
}}185
/>186
</MDBCardBody>187
</MDBCard>188
</MDBCol>189
190
<MDBCol xl='4' className='mb-4'>191
<MDBCard>192
<MDBCardHeader background='light' className='border-0 py-3'>193
<p className='mb-0'>194
<strong>Site Health</strong>195
</p>196
</MDBCardHeader>197
<MDBCardBody>198
<div className='d-flex justify-content-around'>199
<div>200
<p className='mb-2'>Bounce Rate</p>201
<h5>41.4%</h5>202
<p className='text-success small'>203
<MDBIcon icon='caret-down' className='me-1' />204
<span>-3.3%</span>205
</p>206
</div>207
<div>208
<p className='mb-2'>Avg. Session Duration</p>209
<h5>03:20</h5>210
<p className='text-success small'>211
<MDBIcon icon='caret-up' className='me-1' />212
<span>3.6%</span>213
</p>214
</div>215
<div>216
<p className='mb-2'>Avg. Page Load Time</p>217
<h5>3.9s</h5>218
<p className='text-danger small'>219
<MDBIcon icon='caret-up' className='me-1' />220
<span>12.0%</span>221
</p>222
</div>223
</div>224
<MDBChart225
type='line'226
options={{227
scales: {228
y: {229
ticks: {230
display: false,231
},232
},233
y1: {234
position: 'left',235
ticks: {236
beginAtZero: true,237
callback: function (value: any) {238
return value + ' ' + '%';239
},240
},241
},242
y2: {243
position: 'right',244
grid: {245
drawOnChartArea: false,246
},247
ticks: {248
beginAtZero: true,249
},250
},251
},252
}}253
data={{254
labels: ['20 Sep', '21 Sep', '22 Sep', '23 Sep', '24 Sep', '25 Sep', '26 Sep'],255
datasets: [256
{257
label: 'Bounce rate',258
yAxisID: 'y1',259
data: [51, 53, 55, 54, 53, 59, 59],260
order: 2,261
},262
{263
label: 'Avg. Page Load Time (sec)',264
265
yAxisID: 'y2',266
data: [1.5, 2, 0.5, 3, 1.2, 4, 3.4],267
type: 'line',268
order: 1,269
backgroundColor: 'rgba(66, 133, 244, 0.0)',270
borderColor: '#94DFD7',271
borderWidth: 2,272
pointBorderColor: '#94DFD7',273
pointBackgroundColor: '#94DFD7',274
lineTension: 0.0,275
},276
],277
}}278
/>279
</MDBCardBody>280
</MDBCard>281
</MDBCol>282
</MDBRow>283
284
<MDBRow>285
<MDBCol xl='4' className='mb-4 mb-xl-0'>286
<MDBCard>287
<MDBCardHeader background='light' className='border-0 py-3'>288
<p className='mb-0'>289
<strong>Device Performance</strong>290
</p>291
</MDBCardHeader>292
<MDBCardBody>293
<MDBChart294
type='bar'295
options={{296
scales: {297
y: {298
stacked: false,299
},300
ticks: {301
beginAtZero: true,302
},303
x: {304
stacked: false,305
},306
},307
}}308
data={{309
labels: ['Desktop', 'Mobile', 'Tablet'],310
311
datasets: [312
{313
label: 'Users',314
data: [510, 653, 255],315
},316
{317
label: 'Page views',318
data: [1251, 1553, 1355],319
backgroundColor: '#94DFD7',320
borderColor: '#94DFD7',321
},322
],323
}}324
/>325
</MDBCardBody>326
</MDBCard>327
</MDBCol>328
329
<MDBCol xl='4' className='mb-4 mb-xl-0'>330
<MDBCard>331
<MDBCardHeader background='light' className='border-0 py-3'>332
<p className='mb-0'>333
<strong>Transactions</strong>334
</p>335
</MDBCardHeader>336
<MDBCardBody>337
<MDBChart338
type='bar'339
options={{340
scales: {341
y: {342
ticks: {343
display: false,344
},345
},346
y1: {347
display: true,348
position: 'left',349
id: 'y1',350
},351
y2: {352
display: true,353
position: 'right',354
id: 'y2',355
gridLines: {356
drawOnChartArea: false,357
},358
ticks: {359
beginAtZero: true,360
callback: function (value: any) {361
return value + ' ' + '%';362
},363
},364
},365
x: {366
stacked: false,367
},368
},369
}}370
data={{371
labels: ['Desktop', 'Mobile', 'Tablet'],372
373
datasets: [374
{375
label: 'Transactions',376
data: [51, 65, 25],377
yAxisID: 'y1',378
},379
{380
label: 'Conversion rate %',381
data: [0.2, 0.8, 0.4],382
yAxisID: 'y2',383
backgroundColor: '#94DFD7',384
borderColor: '#94DFD7',385
},386
],387
}}388
/>389
</MDBCardBody>390
</MDBCard>391
</MDBCol>392
393
<MDBCol xl='4' className='mb-4 mb-xl-0'>394
<MDBCard>395
<MDBCardHeader background='light' className='border-0 py-3'>396
<p className='mb-0'>397
<strong>Sessions</strong>398
</p>399
</MDBCardHeader>400
<MDBCardBody>401
<MDBChart402
type='pie'403
datalabels404
options={{405
maintainAspectRatio: false,406
plugins: {407
datalabels: {408
formatter: (value: any) => {409
let sum = 0;410
const dataArr = dataSessions.datasets[0].data;411
dataArr.map((data: any) => {412
sum += data;413
});414
const percentage = ((value * 100) / sum).toFixed(2) + '%';415
return percentage;416
},417
color: 'white',418
labels: {419
title: {420
font: {421
size: '14',422
},423
},424
},425
},426
},427
}}428
data={dataSessions}429
/>430
</MDBCardBody>431
</MDBCard>432
</MDBCol>433
</MDBRow>434
</section>435
</MDBCol>436
</MDBRow>437
</MDBContainer>438
);439
}440
441
export default App;442
Console errors: 0