React widget components give information about the app statistics.
1<CRow>
2 <CCol sm={6}>
3 <CWidgetStatsA
4 className="mb-4"
5 color="primary"
6 value={
7 <>
8 $9.000{' '}
9 <span className="fs-6 fw-normal">
10 (40.9% <CIcon icon={cilArrowTop} />)
11 </span>
12 </>
13 }
14 title="Widget title"
15 action={
16 <CDropdown alignment="end">
17 <CDropdownToggle color="transparent" caret={false} className="p-0">
18 <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
19 </CDropdownToggle>
20 <CDropdownMenu>
21 <CDropdownItem>Action</CDropdownItem>
22 <CDropdownItem>Another action</CDropdownItem>
23 <CDropdownItem>Something else here...</CDropdownItem>
24 <CDropdownItem disabled>Disabled action</CDropdownItem>
25 </CDropdownMenu>
26 </CDropdown>
27 }
28 chart={
29 <CChartLine
30 className="mt-3 mx-3"
31 style={{ height: '70px' }}
32 data={{
33 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
34 datasets: [
35 {
36 label: 'My First dataset',
37 backgroundColor: 'transparent',
38 borderColor: 'rgba(255,255,255,.55)',
39 pointBackgroundColor: '#321fdb',
40 data: [65, 59, 84, 84, 51, 55, 40],
41 },
42 ],
43 }}
44 options={{
45 plugins: {
46 legend: {
47 display: false,
48 },
49 },
50 maintainAspectRatio: false,
51 scales: {
52 x: {
53 grid: {
54 display: false,
55 drawBorder: false,
56 },
57 ticks: {
58 display: false,
59 },
60 },
61 y: {
62 min: 30,
63 max: 89,
64 display: false,
65 grid: {
66 display: false,
67 },
68 ticks: {
69 display: false,
70 },
71 },
72 },
73 elements: {
74 line: {
75 borderWidth: 1,
76 tension: 0.4,
77 },
78 point: {
79 radius: 4,
80 hitRadius: 10,
81 hoverRadius: 4,
82 },
83 },
84 }}
85 />
86 }
87 />
88 </CCol>
89 <CCol sm={6}>
90 <CWidgetStatsA
91 className="mb-4"
92 color="info"
93 value={
94 <>
95 $9.000{' '}
96 <span className="fs-6 fw-normal">
97 (40.9% <CIcon icon={cilArrowTop} />)
98 </span>
99 </>
100 }
101 title="Widget title"
102 action={
103 <CDropdown alignment="end">
104 <CDropdownToggle color="transparent" caret={false} className="p-0">
105 <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
106 </CDropdownToggle>
107 <CDropdownMenu>
108 <CDropdownItem>Action</CDropdownItem>
109 <CDropdownItem>Another action</CDropdownItem>
110 <CDropdownItem>Something else here...</CDropdownItem>
111 <CDropdownItem disabled>Disabled action</CDropdownItem>
112 </CDropdownMenu>
113 </CDropdown>
114 }
115 chart={
116 <CChartLine
117 className="mt-3 mx-3"
118 style={{ height: '70px' }}
119 data={{
120 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
121 datasets: [
122 {
123 label: 'My First dataset',
124 backgroundColor: 'transparent',
125 borderColor: 'rgba(255,255,255,.55)',
126 pointBackgroundColor: '#39f',
127 data: [1, 18, 9, 17, 34, 22, 11],
128 },
129 ],
130 }}
131 options={{
132 plugins: {
133 legend: {
134 display: false,
135 },
136 },
137 maintainAspectRatio: false,
138 scales: {
139 x: {
140 grid: {
141 display: false,
142 drawBorder: false,
143 },
144 ticks: {
145 display: false,
146 },
147 },
148 y: {
149 min: -9,
150 max: 39,
151 display: false,
152 grid: {
153 display: false,
154 },
155 ticks: {
156 display: false,
157 },
158 },
159 },
160 elements: {
161 line: {
162 borderWidth: 1,
163 },
164 point: {
165 radius: 4,
166 hitRadius: 10,
167 hoverRadius: 4,
168 },
169 },
170 }}
171 />
172 }
173 />
174 </CCol>
175 <CCol sm={6}>
176 <CWidgetStatsA
177 className="mb-4"
178 color="warning"
179 value={
180 <>
181 $9.000{' '}
182 <span className="fs-6 fw-normal">
183 (40.9% <CIcon icon={cilArrowTop} />)
184 </span>
185 </>
186 }
187 title="Widget title"
188 action={
189 <CDropdown alignment="end">
190 <CDropdownToggle color="transparent" caret={false} className="p-0">
191 <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
192 </CDropdownToggle>
193 <CDropdownMenu>
194 <CDropdownItem>Action</CDropdownItem>
195 <CDropdownItem>Another action</CDropdownItem>
196 <CDropdownItem>Something else here...</CDropdownItem>
197 <CDropdownItem disabled>Disabled action</CDropdownItem>
198 </CDropdownMenu>
199 </CDropdown>
200 }
201 chart={
202 <CChartLine
203 className="mt-3"
204 style={{ height: '70px' }}
205 data={{
206 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
207 datasets: [
208 {
209 label: 'My First dataset',
210 backgroundColor: 'rgba(255,255,255,.2)',
211 borderColor: 'rgba(255,255,255,.55)',
212 data: [78, 81, 80, 45, 34, 12, 40],
213 fill: true,
214 },
215 ],
216 }}
217 options={{
218 plugins: {
219 legend: {
220 display: false,
221 },
222 },
223 maintainAspectRatio: false,
224 scales: {
225 x: {
226 display: false,
227 },
228 y: {
229 display: false,
230 },
231 },
232 elements: {
233 line: {
234 borderWidth: 2,
235 tension: 0.4,
236 },
237 point: {
238 radius: 0,
239 hitRadius: 10,
240 hoverRadius: 4,
241 },
242 },
243 }}
244 />
245 }
246 />
247 </CCol>
248 <CCol sm={6}>
249 <CWidgetStatsA
250 className="mb-4"
251 color="danger"
252 value={
253 <>
254 $9.000{' '}
255 <span className="fs-6 fw-normal">
256 (40.9% <CIcon icon={cilArrowTop} />)
257 </span>
258 </>
259 }
260 title="Widget title"
261 action={
262 <CDropdown alignment="end">
263 <CDropdownToggle color="transparent" caret={false} className="p-0">
264 <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
265 </CDropdownToggle>
266 <CDropdownMenu>
267 <CDropdownItem>Action</CDropdownItem>
268 <CDropdownItem>Another action</CDropdownItem>
269 <CDropdownItem>Something else here...</CDropdownItem>
270 <CDropdownItem disabled>Disabled action</CDropdownItem>
271 </CDropdownMenu>
272 </CDropdown>
273 }
274 chart={
275 <CChartBar
276 className="mt-3 mx-3"
277 style={{ height: '70px' }}
278 data={{
279 labels: [
280 'January',
281 'February',
282 'March',
283 'April',
284 'May',
285 'June',
286 'July',
287 'August',
288 'September',
289 'October',
290 'November',
291 'December',
292 'January',
293 'February',
294 'March',
295 'April',
296 ],
297 datasets: [
298 {
299 label: 'My First dataset',
300 backgroundColor: 'rgba(255,255,255,.2)',
301 borderColor: 'rgba(255,255,255,.55)',
302 data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
303 barPercentage: 0.6,
304 },
305 ],
306 }}
307 options={{
308 maintainAspectRatio: false,
309 plugins: {
310 legend: {
311 display: false,
312 },
313 },
314 scales: {
315 x: {
316 grid: {
317 display: false,
318 drawTicks: false,
319 },
320 ticks: {
321 display: false,
322 },
323 },
324 y: {
325 grid: {
326 display: false,
327 drawBorder: false,
328 drawTicks: false,
329 },
330 ticks: {
331 display: false,
332 },
333 },
334 },
335 }}
336 />
337 }
338 />
339 </CCol>
340</CRow>
1<CRow>
2 <CCol xs={6}>
3 <CWidgetStatsD
4 className="mb-3"
5 icon={<CIcon className="my-4 text-white" icon={cibFacebook} height={52} />}
6 chart={
7 <CChartLine
8 className="position-absolute w-100 h-100"
9 data={{
10 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
11 datasets: [
12 {
13 backgroundColor: 'rgba(255,255,255,.1)',
14 borderColor: 'rgba(255,255,255,.55)',
15 pointHoverBackgroundColor: '#fff',
16 borderWidth: 2,
17 data: [65, 59, 84, 84, 51, 55, 40],
18 fill: true,
19 },
20 ],
21 }}
22 options={{
23 elements: {
24 line: {
25 tension: 0.4,
26 },
27 point: {
28 radius: 0,
29 hitRadius: 10,
30 hoverRadius: 4,
31 hoverBorderWidth: 3,
32 },
33 },
34 maintainAspectRatio: false,
35 plugins: {
36 legend: {
37 display: false,
38 },
39 },
40 scales: {
41 x: {
42 display: false,
43 },
44 y: {
45 display: false,
46 },
47 },
48 }}
49 />
50 }
51 style={{ '--cui-card-cap-bg': '#3b5998' }}
52 values={[
53 { title: 'friends', value: '89K' },
54 { title: 'feeds', value: '459' },
55 ]}
56 />
57 </CCol>
58 <CCol xs={6}>
59 <CWidgetStatsD
60 className="mb-3"
61 icon={<CIcon className="my-4 text-white" icon={cibTwitter} height={52} />}
62 chart={
63 <CChartLine
64 className="position-absolute w-100 h-100"
65 data={{
66 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
67 datasets: [
68 {
69 backgroundColor: 'rgba(255,255,255,.1)',
70 borderColor: 'rgba(255,255,255,.55)',
71 pointHoverBackgroundColor: '#fff',
72 borderWidth: 2,
73 data: [1, 13, 9, 17, 34, 41, 38],
74 fill: true,
75 },
76 ],
77 }}
78 options={{
79 elements: {
80 line: {
81 tension: 0.4,
82 },
83 point: {
84 radius: 0,
85 hitRadius: 10,
86 hoverRadius: 4,
87 hoverBorderWidth: 3,
88 },
89 },
90 maintainAspectRatio: false,
91 plugins: {
92 legend: {
93 display: false,
94 },
95 },
96 scales: {
97 x: {
98 display: false,
99 },
100 y: {
101 display: false,
102 },
103 },
104 }}
105 />
106 }
107 style={{ '--cui-card-cap-bg': '#00aced' }}
108 values={[
109 { title: 'folowers', value: '973K' },
110 { title: 'tweets', value: '1.792' },
111 ]}
112 />
113 </CCol>
114</CRow>
1<CRow>
2 <CCol xs={6}>
3 <CWidgetStatsE
4 className="mb-3"
5 chart={
6 <CChartBar
7 className="mx-auto"
8 style={{ height: '40px', width: '80px' }}
9 data={{
10 labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
11 datasets: [
12 {
13 backgroundColor: '#321fdb',
14 borderColor: 'transparent',
15 borderWidth: 1,
16 data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
17 },
18 ],
19 }}
20 options={{
21 maintainAspectRatio: false,
22 plugins: {
23 legend: {
24 display: false,
25 },
26 },
27 scales: {
28 x: {
29 display: false,
30 },
31 y: {
32 display: false,
33 },
34 },
35 }}
36 />
37 }
38 title="Widget title"
39 value="89.9%"
40 />
41 </CCol>
42 <CCol xs={6}>
43 <CWidgetStatsE
44 className="mb-3"
45 chart={
46 <CChartLine
47 className="mx-auto"
48 style={{ height: '40px', width: '80px' }}
49 data={{
50 labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M'],
51 datasets: [
52 {
53 backgroundColor: 'transparent',
54 borderColor: '#321fdb',
55 borderWidth: 2,
56 data: [41, 78, 51, 66, 74, 42, 89, 97, 87, 84, 78, 88, 67, 45, 47],
57 },
58 ],
59 }}
60 options={{
61 maintainAspectRatio: false,
62 elements: {
63 line: {
64 tension: 0.4,
65 },
66 point: {
67 radius: 0,
68 },
69 },
70 plugins: {
71 legend: {
72 display: false,
73 },
74 },
75 scales: {
76 x: {
77 display: false,
78 },
79 y: {
80 display: false,
81 },
82 },
83 }}
84 />
85 }
86 title="Widget title"
87 value="89.9%"
88 />
89 </CCol>
90</CRow>