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
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
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
} from 'mdb-react-ui-kit';20
21
function App() {22
return (23
<MDBContainer fluid>24
<MDBRow className='justify-content-center'>25
<MDBCol md='8'>26
<section className='text-center'>27
<MDBRow>28
<MDBCol md='6' className='mb-4'>29
<MDBCard>30
<MDBCardHeader className='py-3'>31
<h5 className='mb-0'>Visibility</h5>32
</MDBCardHeader>33
<MDBCardBody>34
<div className='d-flex justify-content-around'>35
<div>36
<p className='mb-2'>Impr. Top</p>37
<h5>38
90%39
<small className='text-success'>40
<MDBIcon fas icon='caret-up' className='me-1' />41
<span>3.0%</span>42
</small>43
</h5>44
</div>45
<div>46
<p className='mb-2'>Impr. Abs Top</p>47
<h5>48
86.349
<small className='text-success'>50
<MDBIcon fas icon='caret-up' className='me-1' />51
<span>4.5%</span>52
</small>53
</h5>54
</div>55
</div>56
57
<MDBChart58
type='bar'59
data={{60
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],61
datasets: [62
// First dataset (bar)63
{64
label: 'Impressions',65
data: [2112, 2343, 2545, 3423, 2365, 1985, 987],66
order: 2,67
},68
// Second dataset (line)69
{70
label: 'Impressions (absolute top) %',71
data: [211, 2543, 2745, 3123, 2765, 1485, 587],72
type: 'line',73
order: 1,74
backgroundColor: 'rgba(66, 133, 244, 0.0)',75
borderColor: '#94DFD7',76
borderWidth: 2,77
pointBorderColor: '#94DFD7',78
pointBackgroundColor: '#94DFD7',79
lineTension: 0.0,80
},81
],82
}}83
/>84
</MDBCardBody>85
</MDBCard>86
</MDBCol>87
88
<MDBCol md='6' className='mb-4'>89
<MDBCard>90
<MDBCardHeader className='py-3'>91
<h5 className='mb-0'>Acquisition</h5>92
</MDBCardHeader>93
<MDBCardBody>94
<div className='d-flex justify-content-around'>95
<div>96
<p className='mb-2'>Clicks</p>97
<h5>98
4.9K99
<small className='text-danger'>100
<MDBIcon className='fas fa-caret-down me-1' />101
<span> -71.9%</span>102
</small>103
</h5>104
</div>105
<div>106
<p className='mb-2'>CTR</p>107
<h5>108
31.13%109
<small className='text-danger'>110
<MDBIcon className='fas fa-caret-down me-1' />111
<span>-2.6%</span>112
</small>113
</h5>114
</div>115
</div>116
117
<MDBChart118
type='bar'119
data={{120
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],121
datasets: [122
{123
label: 'Clicks',124
data: [25, 49, 40, 21, 56, 75, 30],125
order: 2,126
},127
{128
label: 'CTR %',129
data: [58, 18, 30, 59, 46, 77, 90],130
type: 'line',131
order: 1,132
backgroundColor: 'rgba(66, 133, 244, 0.0)',133
borderColor: '#94DFD7',134
borderWidth: 2,135
pointBorderColor: '#94DFD7',136
pointBackgroundColor: '#94DFD7',137
lineTension: 0.0,138
},139
],140
}}141
/>142
</MDBCardBody>143
</MDBCard>144
</MDBCol>145
</MDBRow>146
147
<MDBRow>148
<MDBCol md='6' className='mb-4'>149
<MDBCard>150
<MDBCardHeader className='card-header py-3'>151
<h5 className='mb-0'>Conversion</h5>152
</MDBCardHeader>153
<MDBCardBody>154
<div className='d-flex justify-content-around'>155
<div>156
<p className='mb-2'>Conversions</p>157
<h5>158
859.5159
<small className='text-success'>160
<MDBIcon fas icon='caret-up' className='me-1' />161
<span>72.0%</span>162
</small>163
</h5>164
</div>165
<div>166
<p className='mb-2'>Conversion rate</p>167
<h5>168
17.7%169
<small className='text-success'>170
<MDBIcon fas icon='caret-up' className='me-1' />171
<span>3.0%</span>172
</small>173
</h5>174
</div>175
<div>176
<p className='mb-2'>Cost / conv.</p>177
<h5>178
$1.86179
<small className='text-danger'>180
<MDBIcon fas icon='caret-up' className='me-1' />181
<span>4.5%</span>182
</small>183
</h5>184
</div>185
</div>186
187
<MDBChart188
type='bar'189
data={{190
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],191
192
datasets: [193
{194
label: 'Conversions',195
data: [77, 305, 312, 142, 177, 223, 468],196
order: 2,197
},198
{199
label: 'Conversion rate %',200
data: [39, 43, 60, 59, 46, 77, 53],201
type: 'line',202
order: 1,203
backgroundColor: 'rgba(66, 133, 244, 0.0)',204
borderColor: '#94DFD7',205
borderWidth: 2,206
pointBorderColor: '#94DFD7',207
pointBackgroundColor: '#94DFD7',208
lineTension: 0.0,209
},210
],211
}}212
/>213
</MDBCardBody>214
</MDBCard>215
</MDBCol>216
217
<MDBCol md='6' className='mb-4'>218
<MDBCard>219
<MDBCardHeader className='py-3'>220
<h5 className='mb-0'>Cost</h5>221
</MDBCardHeader>222
<MDBCardBody>223
<div className='d-flex justify-content-around'>224
<div>225
<p className='mb-2'>Cost</p>226
<h5>227
$1.60K228
<small className='text-success'>229
<MDBIcon icon='caret-down' fas className='me-1' />230
<span> -71.9%</span>231
</small>232
</h5>233
</div>234
<div>235
<p className='mb-2'>Avg. CPC</p>236
<h5>237
$0.3238
<small className='text-success'>239
<MDBIcon icon='caret-down' fas className='me-1' />240
<span>-11.1%</span>241
</small>242
</h5>243
</div>244
<div>245
<p className='mb-2'>Avg. CPM</p>246
<h5>247
$102.55248
<small className='text-success'>249
<MDBIcon icon='caret-down' fas className='me-1' />250
<span>-13.4%</span>251
</small>252
</h5>253
</div>254
</div>255
256
<MDBChart257
type='bar'258
data={{259
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],260
261
datasets: [262
{263
label: 'Cost $',264
data: [15, 29, 30, 21, 36, 45, 30],265
order: 2,266
},267
{268
label: 'Avg. CPC $',269
data: [8, 1, 3, 5, 4, 7, 9],270
type: 'line',271
order: 1,272
backgroundColor: 'rgba(66, 133, 244, 0.0)',273
borderColor: '#94DFD7',274
borderWidth: 2,275
pointBorderColor: '#94DFD7',276
pointBackgroundColor: '#94DFD7',277
lineTension: 0.0,278
},279
],280
}}281
/>282
</MDBCardBody>283
</MDBCard>284
</MDBCol>285
</MDBRow>286
</section>287
</MDBCol>288
</MDBRow>289
</MDBContainer>290
);291
}292
293
export default App;294
Console errors: 0