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, { useState } 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
const [datepickerValue, setDatepickerValue] = useState('');23
24
const funnelData = {25
labels: ['Product views', 'Checkout', 'Purchases'],26
datasets: [27
{28
data: [2112, 343, 45],29
barPercentage: 1.24,30
},31
],32
};33
34
const funnelOptions = {35
indexAxis: 'y',36
scales: {37
x: {38
gridLines: {39
offsetGridLines: true,40
},41
},42
},43
plugins: {44
legend: {45
display: false,46
},47
datalabels: {48
formatter: (value: any) => {49
let sum = 0;50
const dataArr = funnelData.datasets[0].data;51
dataArr.map((data) => {52
sum += data;53
});54
const percentage = ((value * 100) / sum).toFixed(2) + '%';55
return percentage;56
},57
color: '#4f4f4f',58
labels: {59
title: {60
font: {61
size: '13',62
},63
anchor: 'end',64
align: 'right',65
},66
},67
},68
},69
};70
71
return (72
<MDBContainer fluid>73
<MDBRow className='justify-content-center'>74
<MDBCol md='10'>75
<section>76
<section>77
<MDBRow>78
<MDBCol md='4' className='mb-4'>79
<MDBCard>80
<MDBCardBody>81
<MDBSelectDeprecated82
label='Product'83
data={[84
{ text: 'Product 1', value: 1, selected: true },85
{ text: 'Product 2', value: 2 },86
{ text: 'Product 3', value: 3 },87
{ text: 'Product 4', value: 4 },88
{ text: 'Product 5', value: 5 },89
]}90
/>91
</MDBCardBody>92
</MDBCard>93
</MDBCol>94
95
<MDBCol md='8' className='mb-4'>96
<MDBCard>97
<MDBCardBody>98
<MDBRow>99
<MDBCol md='6' className='mb-4 mb-md-0'>100
<MDBSelectDeprecated101
label='Date'102
data={[103
{ text: 'Today', value: 1, selected: true },104
{ text: 'Yesterday', value: 2 },105
{ text: 'Last 7 days', value: 3 },106
{ text: 'Last 28 days', value: 4 },107
{ text: 'Last 90 days', value: 5 },108
]}109
/>110
</MDBCol>111
112
<MDBCol md='6'>113
<MDBDatepicker value={datepickerValue} setValue={setDatepickerValue} labelText='Date' />114
</MDBCol>115
</MDBRow>116
</MDBCardBody>117
</MDBCard>118
</MDBCol>119
</MDBRow>120
</section>121
122
<section className='mb-4'>123
<MDBCard>124
<MDBCardHeader className='card-header text-center py-3 bg-light border-0'>125
<strong>Sales Performance KPIs</strong>126
</MDBCardHeader>127
<MDBCardBody>128
<div className='table-responsive'>129
<MDBTable hover className='text-nowrap'>130
<MDBTableHead>131
<tr>132
<th scope='col'></th>133
<th scope='col'>Product Detail Views</th>134
<th scope='col'>Unique Purchases</th>135
<th scope='col'>Quantity</th>136
<th scope='col'>Product Revenue</th>137
<th scope='col'>Avg. Price</th>138
</tr>139
</MDBTableHead>140
<MDBTableBody>141
<tr>142
<th scope='row'>Value</th>143
<td>18,492</td>144
<td>228</td>145
<td>350</td>146
<td>$4,787.64</td>147
<td>$13.68</td>148
</tr>149
<tr>150
<th scope='row'>Percentage change</th>151
<td>152
<span className='text-danger'>153
<MDBIcon fas icon='caret-down' className='me-1' />154
<span>-48.8%%</span>155
</span>156
</td>157
<td>158
<span className='text-success'>159
<MDBIcon fas icon='caret-up' className='me-1' />160
<span>14.0%</span>161
</span>162
</td>163
<td>164
<span className='text-success'>165
<MDBIcon fas icon='caret-up' className='me-1' />166
<span>46.4%</span>167
</span>168
</td>169
<td>170
<span className='text-success'>171
<MDBIcon fas icon='caret-up' className='me-1' />172
<span>29.6%</span>173
</span>174
</td>175
<td>176
<span className='text-danger'>177
<MDBIcon fas icon='caret-down' className='me-1' />178
<span>-11.5%</span>179
</span>180
</td>181
</tr>182
<tr>183
<th scope='row'>Absolute change</th>184
<td>185
<span className='text-danger'>186
<MDBIcon fas icon='caret-down' className='me-1' />187
<span>-17,654</span>188
</span>189
</td>190
<td>191
<span className='text-success'>192
<MDBIcon fas icon='caret-up' className='me-1' />193
<span>28</span>194
</span>195
</td>196
<td>197
<span className='text-success'>198
<MDBIcon fas icon='caret-up' className='me-1' />199
<span>111</span>200
</span>201
</td>202
<td>203
<span className='text-success'>204
<MDBIcon fas icon='caret-up' className='me-1' />205
<span>$1,092.72</span>206
</span>207
</td>208
<td>209
<span className='text-danger'>210
<MDBIcon fas icon='caret-down' className='me-1' />211
<span>$-1.78</span>212
</span>213
</td>214
</tr>215
</MDBTableBody>216
</MDBTable>217
</div>218
</MDBCardBody>219
</MDBCard>220
</section>221
222
<section className='mb-4'>223
<MDBRow>224
<MDBCol md='5' className='mb-4'>225
<MDBCard>226
<MDBCardHeader background='light' className='text-center border-0 py-3'>227
<strong>Shopping Funnel</strong>228
</MDBCardHeader>229
<MDBCardBody>230
<MDBChart type='bar' data={funnelData} options={funnelOptions} datalabels />231
</MDBCardBody>232
</MDBCard>233
</MDBCol>234
235
<MDBCol md='7' className=' mb-4'>236
<MDBCard>237
<MDBCardBody>238
<MDBChart239
type='bar'240
data={{241
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday '],242
datasets: [243
{244
label: 'Product revenue $',245
yAxisID: 'y1',246
data: [211, 234, 254, 342, 236, 198, 98],247
order: 1,248
display: false,249
},250
{251
label: 'Unique purchases',252
yAxisID: 'y2',253
data: [52, 42, 69, 60, 45, 23, 89],254
type: 'line',255
order: 0,256
backgroundColor: 'rgba(66, 133, 244, 0.0)',257
borderColor: '#94DFD7',258
borderWidth: 2,259
pointBorderColor: '#94DFD7',260
pointBackgroundColor: '#94DFD7',261
lineTension: 0.0,262
},263
],264
}}265
options={{266
scales: {267
y1: {268
display: true,269
position: 'left',270
grid: {271
drawOnChartArea: false,272
drawBorder: false,273
drawTicks: false,274
},275
beginAtZero: true,276
ticks: {277
callback: function (value: any) {278
return '$' + value;279
},280
},281
},282
y2: {283
stacked: false,284
position: 'right',285
grid: {286
drawOnChartArea: false,287
},288
ticks: {289
beginAtZero: true,290
},291
},292
},293
}}294
/>295
</MDBCardBody>296
</MDBCard>297
</MDBCol>298
</MDBRow>299
</section>300
</section>301
</MDBCol>302
</MDBRow>303
</MDBContainer>304
);305
}306
307
export default App;308
Console errors: 0