coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CCard,
4
  CCardBody,
5
  CCardGroup,
6
  CCardHeader,
7
  CCol,
8
  CLink,
9
  CRow,
10
  CWidgetStatsB,
11
  CWidgetStatsC,
12
  CWidgetStatsE,
13
  CWidgetStatsF,
14
} from '@coreui/react'
15
import { getStyle } from '@coreui/utils'
16
import CIcon from '@coreui/icons-react'
17
import {
18
  cilArrowRight,
19
  cilBasket,
20
  cilBell,
21
  cilChartPie,
22
  cilMoon,
23
  cilLaptop,
24
  cilPeople,
25
  cilSettings,
26
  cilSpeech,
27
  cilSpeedometer,
28
  cilUser,
29
  cilUserFollow,
30
} from '@coreui/icons'
31
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
32
import { DocsExample } from 'src/components'
33

34
import WidgetsBrand from './WidgetsBrand'
35
import WidgetsDropdown from './WidgetsDropdown'
36

37
const Widgets = () => {
38
  const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
39

40
  return (
41
    <CCard className="mb-4">
42
      <CCardHeader>Widgets</CCardHeader>
43
      <CCardBody>
44
        <DocsExample href="components/widgets/#cwidgetstatsa">
45
          <WidgetsDropdown />
46
        </DocsExample>
47
        <DocsExample href="components/widgets/#cwidgetstatsb">
48
          <CRow xs={{ gutter: 4 }}>
49
            <CCol xs={12} sm={6} xl={4} xxl={3}>
50
              <CWidgetStatsB
51
                progress={{ color: 'success', value: 89.9 }}
52
                text="Lorem ipsum dolor sit amet enim."
53
                title="Widget title"
54
                value="89.9%"
55
              />
56
            </CCol>
57
            <CCol xs={12} sm={6} xl={4} xxl={3}>
58
              <CWidgetStatsB
59
                value="12.124"
60
                title="Widget title"
61
                progress={{ color: 'info', value: 89.9 }}
62
                text="Lorem ipsum dolor sit amet enim."
63
              />
64
            </CCol>
65
            <CCol xs={12} sm={6} xl={4} xxl={3}>
66
              <CWidgetStatsB
67
                value="$98.111,00"
68
                title="Widget title"
69
                progress={{ color: 'warning', value: 89.9 }}
70
                text="Lorem ipsum dolor sit amet enim."
71
              />
72
            </CCol>
73
            <CCol xs={12} sm={6} xl={4} xxl={3}>
74
              <CWidgetStatsB
75
                value="2 TB"
76
                title="Widget title"
77
                progress={{ color: 'primary', value: 89.9 }}
78
                text="Lorem ipsum dolor sit amet enim."
79
              />
80
            </CCol>
81
          </CRow>
82
        </DocsExample>
83
        <DocsExample href="components/widgets/#cwidgetstatsb">
84
          <CRow xs={{ gutter: 4 }}>
85
            <CCol xs={12} sm={6} xl={4} xxl={3}>
86
              <CWidgetStatsB
87
                color="success"
88
                inverse
89
                value="89.9%"
90
                title="Widget title"
91
                progress={{ value: 89.9 }}
92
                text="Lorem ipsum dolor sit amet enim."
93
              />
94
            </CCol>
95
            <CCol xs={12} sm={6} xl={4} xxl={3}>
96
              <CWidgetStatsB
97
                color="info"
98
                inverse
99
                value="12.124"
100
                title="Widget title"
101
                progress={{ value: 89.9 }}
102
                text="Lorem ipsum dolor sit amet enim."
103
              />
104
            </CCol>
105
            <CCol xs={12} sm={6} xl={4} xxl={3}>
106
              <CWidgetStatsB
107
                color="warning"
108
                inverse
109
                value="$98.111,00"
110
                title="Widget title"
111
                progress={{ value: 89.9 }}
112
                text="Lorem ipsum dolor sit amet enim."
113
              />
114
            </CCol>
115
            <CCol xs={12} sm={6} xl={4} xxl={3}>
116
              <CWidgetStatsB
117
                color="primary"
118
                inverse
119
                value="2 TB"
120
                title="Widget title"
121
                progress={{ value: 89.9 }}
122
                text="Lorem ipsum dolor sit amet enim."
123
              />
124
            </CCol>
125
          </CRow>
126
        </DocsExample>
127
        <DocsExample href="components/widgets/#cwidgetstatse">
128
          <CRow xs={{ gutter: 4 }}>
129
            <CCol sm={4} md={3} xl={2}>
130
              <CWidgetStatsE
131
                chart={
132
                  <CChartBar
133
                    className="mx-auto"
134
                    style={{ height: '40px', width: '80px' }}
135
                    data={{
136
                      labels: [
137
                        'M',
138
                        'T',
139
                        'W',
140
                        'T',
141
                        'F',
142
                        'S',
143
                        'S',
144
                        'M',
145
                        'T',
146
                        'W',
147
                        'T',
148
                        'F',
149
                        'S',
150
                        'S',
151
                        'M',
152
                      ],
153
                      datasets: [
154
                        {
155
                          backgroundColor: getStyle('--cui-danger'),
156
                          borderColor: 'transparent',
157
                          borderWidth: 1,
158
                          data: [
159
                            random(40, 100),
160
                            random(40, 100),
161
                            random(40, 100),
162
                            random(40, 100),
163
                            random(40, 100),
164
                            random(40, 100),
165
                            random(40, 100),
166
                            random(40, 100),
167
                            random(40, 100),
168
                            random(40, 100),
169
                            random(40, 100),
170
                            random(40, 100),
171
                            random(40, 100),
172
                            random(40, 100),
173
                            random(40, 100),
174
                          ],
175
                        },
176
                      ],
177
                    }}
178
                    options={{
179
                      maintainAspectRatio: false,
180
                      plugins: {
181
                        legend: {
182
                          display: false,
183
                        },
184
                      },
185
                      scales: {
186
                        x: {
187
                          display: false,
188
                        },
189
                        y: {
190
                          display: false,
191
                        },
192
                      },
193
                    }}
194
                  />
195
                }
196
                title="title"
197
                value="1,123"
198
              />
199
            </CCol>
200
            <CCol sm={4} md={3} xl={2}>
201
              <CWidgetStatsE
202
                chart={
203
                  <CChartBar
204
                    className="mx-auto"
205
                    style={{ height: '40px', width: '80px' }}
206
                    data={{
207
                      labels: [
208
                        'M',
209
                        'T',
210
                        'W',
211
                        'T',
212
                        'F',
213
                        'S',
214
                        'S',
215
                        'M',
216
                        'T',
217
                        'W',
218
                        'T',
219
                        'F',
220
                        'S',
221
                        'S',
222
                        'M',
223
                      ],
224
                      datasets: [
225
                        {
226
                          backgroundColor: getStyle('--cui-primary'),
227
                          borderColor: 'transparent',
228
                          borderWidth: 1,
229
                          data: [
230
                            random(40, 100),
231
                            random(40, 100),
232
                            random(40, 100),
233
                            random(40, 100),
234
                            random(40, 100),
235
                            random(40, 100),
236
                            random(40, 100),
237
                            random(40, 100),
238
                            random(40, 100),
239
                            random(40, 100),
240
                            random(40, 100),
241
                            random(40, 100),
242
                            random(40, 100),
243
                            random(40, 100),
244
                            random(40, 100),
245
                          ],
246
                        },
247
                      ],
248
                    }}
249
                    options={{
250
                      maintainAspectRatio: false,
251
                      plugins: {
252
                        legend: {
253
                          display: false,
254
                        },
255
                      },
256
                      scales: {
257
                        x: {
258
                          display: false,
259
                        },
260
                        y: {
261
                          display: false,
262
                        },
263
                      },
264
                    }}
265
                  />
266
                }
267
                title="title"
268
                value="1,123"
269
              />
270
            </CCol>
271
            <CCol sm={4} md={3} xl={2}>
272
              <CWidgetStatsE
273
                chart={
274
                  <CChartBar
275
                    className="mx-auto"
276
                    style={{ height: '40px', width: '80px' }}
277
                    data={{
278
                      labels: [
279
                        'M',
280
                        'T',
281
                        'W',
282
                        'T',
283
                        'F',
284
                        'S',
285
                        'S',
286
                        'M',
287
                        'T',
288
                        'W',
289
                        'T',
290
                        'F',
291
                        'S',
292
                        'S',
293
                        'M',
294
                      ],
295
                      datasets: [
296
                        {
297
                          backgroundColor: getStyle('--cui-success'),
298
                          borderColor: 'transparent',
299
                          borderWidth: 1,
300
                          data: [
301
                            random(40, 100),
302
                            random(40, 100),
303
                            random(40, 100),
304
                            random(40, 100),
305
                            random(40, 100),
306
                            random(40, 100),
307
                            random(40, 100),
308
                            random(40, 100),
309
                            random(40, 100),
310
                            random(40, 100),
311
                            random(40, 100),
312
                            random(40, 100),
313
                            random(40, 100),
314
                            random(40, 100),
315
                            random(40, 100),
316
                          ],
317
                        },
318
                      ],
319
                    }}
320
                    options={{
321
                      maintainAspectRatio: false,
322
                      plugins: {
323
                        legend: {
324
                          display: false,
325
                        },
326
                      },
327
                      scales: {
328
                        x: {
329
                          display: false,
330
                        },
331
                        y: {
332
                          display: false,
333
                        },
334
                      },
335
                    }}
336
                  />
337
                }
338
                title="title"
339
                value="1,123"
340
              />
341
            </CCol>
342
            <CCol sm={4} md={3} xl={2}>
343
              <CWidgetStatsE
344
                chart={
345
                  <CChartLine
346
                    className="mx-auto"
347
                    style={{ height: '40px', width: '80px' }}
348
                    data={{
349
                      labels: [
350
                        'M',
351
                        'T',
352
                        'W',
353
                        'T',
354
                        'F',
355
                        'S',
356
                        'S',
357
                        'M',
358
                        'T',
359
                        'W',
360
                        'T',
361
                        'F',
362
                        'S',
363
                        'S',
364
                        'M',
365
                      ],
366
                      datasets: [
367
                        {
368
                          backgroundColor: 'transparent',
369
                          borderColor: getStyle('--cui-danger'),
370
                          borderWidth: 2,
371
                          data: [
372
                            random(40, 100),
373
                            random(40, 100),
374
                            random(40, 100),
375
                            random(40, 100),
376
                            random(40, 100),
377
                            random(40, 100),
378
                            random(40, 100),
379
                            random(40, 100),
380
                            random(40, 100),
381
                            random(40, 100),
382
                            random(40, 100),
383
                            random(40, 100),
384
                            random(40, 100),
385
                            random(40, 100),
386
                            random(40, 100),
387
                          ],
388
                        },
389
                      ],
390
                    }}
391
                    options={{
392
                      maintainAspectRatio: false,
393
                      elements: {
394
                        line: {
395
                          tension: 0.4,
396
                        },
397
                        point: {
398
                          radius: 0,
399
                        },
400
                      },
401
                      plugins: {
402
                        legend: {
403
                          display: false,
404
                        },
405
                      },
406
                      scales: {
407
                        x: {
408
                          display: false,
409
                        },
410
                        y: {
411
                          display: false,
412
                        },
413
                      },
414
                    }}
415
                  />
416
                }
417
                title="title"
418
                value="1,123"
419
              />
420
            </CCol>
421
            <CCol sm={4} md={3} xl={2}>
422
              <CWidgetStatsE
423
                chart={
424
                  <CChartLine
425
                    className="mx-auto"
426
                    style={{ height: '40px', width: '80px' }}
427
                    data={{
428
                      labels: [
429
                        'M',
430
                        'T',
431
                        'W',
432
                        'T',
433
                        'F',
434
                        'S',
435
                        'S',
436
                        'M',
437
                        'T',
438
                        'W',
439
                        'T',
440
                        'F',
441
                        'S',
442
                        'S',
443
                        'M',
444
                      ],
445
                      datasets: [
446
                        {
447
                          backgroundColor: 'transparent',
448
                          borderColor: getStyle('--cui-success'),
449
                          borderWidth: 2,
450
                          data: [
451
                            random(40, 100),
452
                            random(40, 100),
453
                            random(40, 100),
454
                            random(40, 100),
455
                            random(40, 100),
456
                            random(40, 100),
457
                            random(40, 100),
458
                            random(40, 100),
459
                            random(40, 100),
460
                            random(40, 100),
461
                            random(40, 100),
462
                            random(40, 100),
463
                            random(40, 100),
464
                            random(40, 100),
465
                            random(40, 100),
466
                          ],
467
                        },
468
                      ],
469
                    }}
470
                    options={{
471
                      maintainAspectRatio: false,
472
                      elements: {
473
                        line: {
474
                          tension: 0.4,
475
                        },
476
                        point: {
477
                          radius: 0,
478
                        },
479
                      },
480
                      plugins: {
481
                        legend: {
482
                          display: false,
483
                        },
484
                      },
485
                      scales: {
486
                        x: {
487
                          display: false,
488
                        },
489
                        y: {
490
                          display: false,
491
                        },
492
                      },
493
                    }}
494
                  />
495
                }
496
                title="title"
497
                value="1,123"
498
              />
499
            </CCol>
500
            <CCol sm={4} md={3} xl={2}>
501
              <CWidgetStatsE
502
                chart={
503
                  <CChartLine
504
                    className="mx-auto"
505
                    style={{ height: '40px', width: '80px' }}
506
                    data={{
507
                      labels: [
508
                        'M',
509
                        'T',
510
                        'W',
511
                        'T',
512
                        'F',
513
                        'S',
514
                        'S',
515
                        'M',
516
                        'T',
517
                        'W',
518
                        'T',
519
                        'F',
520
                        'S',
521
                        'S',
522
                        'M',
523
                      ],
524
                      datasets: [
525
                        {
526
                          backgroundColor: 'transparent',
527
                          borderColor: getStyle('--cui-info'),
528
                          borderWidth: 2,
529
                          data: [
530
                            random(40, 100),
531
                            random(40, 100),
532
                            random(40, 100),
533
                            random(40, 100),
534
                            random(40, 100),
535
                            random(40, 100),
536
                            random(40, 100),
537
                            random(40, 100),
538
                            random(40, 100),
539
                            random(40, 100),
540
                            random(40, 100),
541
                            random(40, 100),
542
                            random(40, 100),
543
                            random(40, 100),
544
                            random(40, 100),
545
                          ],
546
                        },
547
                      ],
548
                    }}
549
                    options={{
550
                      maintainAspectRatio: false,
551
                      elements: {
552
                        line: {
553
                          tension: 0.4,
554
                        },
555
                        point: {
556
                          radius: 0,
557
                        },
558
                      },
559
                      plugins: {
560
                        legend: {
561
                          display: false,
562
                        },
563
                      },
564
                      scales: {
565
                        x: {
566
                          display: false,
567
                        },
568
                        y: {
569
                          display: false,
570
                        },
571
                      },
572
                    }}
573
                  />
574
                }
575
                title="title"
576
                value="1,123"
577
              />
578
            </CCol>
579
          </CRow>
580
        </DocsExample>
581
        <DocsExample href="components/widgets/#cwidgetstatsf">
582
          <CRow xs={{ gutter: 4 }}>
583
            <CCol xs={12} sm={6} xl={4} xxl={3}>
584
              <CWidgetStatsF
585
                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
586
                title="income"
587
                value="$1.999,50"
588
                color="primary"
589
              />
590
            </CCol>
591
            <CCol xs={12} sm={6} xl={4} xxl={3}>
592
              <CWidgetStatsF
593
                icon={<CIcon width={24} icon={cilUser} size="xl" />}
594
                title="income"
595
                value="$1.999,50"
596
                color="info"
597
              />
598
            </CCol>
599
            <CCol xs={12} sm={6} xl={4} xxl={3}>
600
              <CWidgetStatsF
601
                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
602
                title="income"
603
                value="$1.999,50"
604
                color="warning"
605
              />
606
            </CCol>
607
            <CCol xs={12} sm={6} xl={4} xxl={3}>
608
              <CWidgetStatsF
609
                icon={<CIcon width={24} icon={cilBell} size="xl" />}
610
                title="income"
611
                value="$1.999,50"
612
                color="danger"
613
              />
614
            </CCol>
615
          </CRow>
616
        </DocsExample>
617
        <DocsExample href="components/widgets/#cwidgetstatsf">
618
          <CRow xs={{ gutter: 4 }}>
619
            <CCol xs={12} sm={6} xl={4} xxl={3}>
620
              <CWidgetStatsF
621
                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
622
                title="income"
623
                value="$1.999,50"
624
                color="primary"
625
                footer={
626
                  <CLink
627
                    className="font-weight-bold font-xs text-body-secondary"
628
                    href="https://coreui.io/"
629
                    rel="noopener norefferer"
630
                    target="_blank"
631
                  >
632
                    View more
633
                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
634
                  </CLink>
635
                }
636
              />
637
            </CCol>
638
            <CCol xs={12} sm={6} xl={4} xxl={3}>
639
              <CWidgetStatsF
640
                icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
641
                title="income"
642
                value="$1.999,50"
643
                color="info"
644
                footer={
645
                  <CLink
646
                    className="font-weight-bold font-xs text-body-secondary"
647
                    href="https://coreui.io/"
648
                    rel="noopener norefferer"
649
                    target="_blank"
650
                  >
651
                    View more
652
                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
653
                  </CLink>
654
                }
655
              />
656
            </CCol>
657
            <CCol xs={12} sm={6} xl={4} xxl={3}>
658
              <CWidgetStatsF
659
                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
660
                title="income"
661
                value="$1.999,50"
662
                color="warning"
663
                footer={
664
                  <CLink
665
                    className="font-weight-bold font-xs text-body-secondary"
666
                    href="https://coreui.io/"
667
                    rel="noopener norefferer"
668
                    target="_blank"
669
                  >
670
                    View more
671
                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
672
                  </CLink>
673
                }
674
              />
675
            </CCol>
676
            <CCol xs={12} sm={6} xl={4} xxl={3}>
677
              <CWidgetStatsF
678
                icon={<CIcon width={24} icon={cilBell} size="xl" />}
679
                title="income"
680
                value="$1.999,50"
681
                color="danger"
682
                footer={
683
                  <CLink
684
                    className="font-weight-bold font-xs text-body-secondary"
685
                    href="https://coreui.io/"
686
                    rel="noopener norefferer"
687
                    target="_blank"
688
                  >
689
                    View more
690
                    <CIcon icon={cilArrowRight} className="float-end" width={16} />
691
                  </CLink>
692
                }
693
              />
694
            </CCol>
695
          </CRow>
696
        </DocsExample>
697
        <DocsExample href="components/widgets/#cwidgetstatsf">
698
          <CRow xs={{ gutter: 4 }}>
699
            <CCol xs={12} sm={6} xl={4} xxl={3}>
700
              <CWidgetStatsF
701
                icon={<CIcon width={24} icon={cilSettings} size="xl" />}
702
                padding={false}
703
                title="income"
704
                value="$1.999,50"
705
                color="primary"
706
              />
707
            </CCol>
708
            <CCol xs={12} sm={6} xl={4} xxl={3}>
709
              <CWidgetStatsF
710
                icon={<CIcon width={24} icon={cilUser} size="xl" />}
711
                padding={false}
712
                title="income"
713
                value="$1.999,50"
714
                color="info"
715
              />
716
            </CCol>
717
            <CCol xs={12} sm={6} xl={4} xxl={3}>
718
              <CWidgetStatsF
719
                icon={<CIcon width={24} icon={cilMoon} size="xl" />}
720
                padding={false}
721
                title="income"
722
                value="$1.999,50"
723
                color="warning"
724
              />
725
            </CCol>
726
            <CCol xs={12} sm={6} xl={4} xxl={3}>
727
              <CWidgetStatsF
728
                icon={<CIcon width={24} icon={cilBell} size="xl" />}
729
                padding={false}
730
                title="income"
731
                value="$1.999,50"
732
                color="danger"
733
              />
734
            </CCol>
735
          </CRow>
736
        </DocsExample>
737
        <DocsExample href="components/widgets/#cwidgetstatsd">
738
          <WidgetsBrand />
739
        </DocsExample>
740
        <DocsExample href="components/widgets/#cwidgetstatsd">
741
          <WidgetsBrand withCharts />
742
        </DocsExample>
743
        <DocsExample href="components/widgets/#cwidgetstatsc">
744
          <CCardGroup className="mb-4">
745
            <CWidgetStatsC
746
              icon={<CIcon icon={cilPeople} height={36} />}
747
              value="87.500"
748
              title="Visitors"
749
              progress={{ color: 'info', value: 75 }}
750
            />
751
            <CWidgetStatsC
752
              icon={<CIcon icon={cilUserFollow} height={36} />}
753
              value="385"
754
              title="New Clients"
755
              progress={{ color: 'success', value: 75 }}
756
            />
757
            <CWidgetStatsC
758
              icon={<CIcon icon={cilBasket} height={36} />}
759
              value="1238"
760
              title="Products sold"
761
              progress={{ color: 'warning', value: 75 }}
762
            />
763
            <CWidgetStatsC
764
              icon={<CIcon icon={cilChartPie} height={36} />}
765
              value="28%"
766
              title="Returning Visitors"
767
              progress={{ color: 'primary', value: 75 }}
768
            />
769
            <CWidgetStatsC
770
              icon={<CIcon icon={cilSpeedometer} height={36} />}
771
              value="5:34:11"
772
              title="Avg. Time"
773
              progress={{ color: 'danger', value: 75 }}
774
            />
775
          </CCardGroup>
776
        </DocsExample>
777
        <DocsExample href="components/widgets/#cwidgetstatsc">
778
          <CRow xs={{ gutter: 4 }}>
779
            <CCol xs={6} lg={4} xxl={2}>
780
              <CWidgetStatsC
781
                icon={<CIcon icon={cilPeople} height={36} />}
782
                value="87.500"
783
                title="Visitors"
784
                progress={{ color: 'info', value: 75 }}
785
              />
786
            </CCol>
787
            <CCol xs={6} lg={4} xxl={2}>
788
              <CWidgetStatsC
789
                icon={<CIcon icon={cilUserFollow} height={36} />}
790
                value="385"
791
                title="New Clients"
792
                progress={{ color: 'success', value: 75 }}
793
              />
794
            </CCol>
795
            <CCol xs={6} lg={4} xxl={2}>
796
              <CWidgetStatsC
797
                icon={<CIcon icon={cilBasket} height={36} />}
798
                value="1238"
799
                title="Products sold"
800
                progress={{ color: 'warning', value: 75 }}
801
              />
802
            </CCol>
803
            <CCol xs={6} lg={4} xxl={2}>
804
              <CWidgetStatsC
805
                icon={<CIcon icon={cilChartPie} height={36} />}
806
                value="28%"
807
                title="Returning Visitors"
808
                progress={{ color: 'primary', value: 75 }}
809
              />
810
            </CCol>
811
            <CCol xs={6} lg={4} xxl={2}>
812
              <CWidgetStatsC
813
                icon={<CIcon icon={cilSpeedometer} height={36} />}
814
                value="5:34:11"
815
                title="Avg. Time"
816
                progress={{ color: 'danger', value: 75 }}
817
              />
818
            </CCol>
819
            <CCol xs={6} lg={4} xxl={2}>
820
              <CWidgetStatsC
821
                icon={<CIcon icon={cilSpeech} height={36} />}
822
                value="972"
823
                title="Comments"
824
                progress={{ color: 'info', value: 75 }}
825
              />
826
            </CCol>
827
          </CRow>
828
        </DocsExample>
829
        <DocsExample href="components/widgets/#cwidgetstatsc">
830
          <CRow xs={{ gutter: 4 }}>
831
            <CCol xs={6} lg={4} xxl={2}>
832
              <CWidgetStatsC
833
                color="info"
834
                icon={<CIcon icon={cilPeople} height={36} />}
835
                value="87.500"
836
                title="Visitors"
837
                inverse
838
                progress={{ value: 75 }}
839
              />
840
            </CCol>
841
            <CCol xs={6} lg={4} xxl={2}>
842
              <CWidgetStatsC
843
                color="success"
844
                icon={<CIcon icon={cilUserFollow} height={36} />}
845
                value="385"
846
                title="New Clients"
847
                inverse
848
                progress={{ value: 75 }}
849
              />
850
            </CCol>
851
            <CCol xs={6} lg={4} xxl={2}>
852
              <CWidgetStatsC
853
                color="warning"
854
                icon={<CIcon icon={cilBasket} height={36} />}
855
                value="1238"
856
                title="Products sold"
857
                inverse
858
                progress={{ value: 75 }}
859
              />
860
            </CCol>
861
            <CCol xs={6} lg={4} xxl={2}>
862
              <CWidgetStatsC
863
                color="primary"
864
                icon={<CIcon icon={cilChartPie} height={36} />}
865
                value="28%"
866
                title="Returning Visitors"
867
                inverse
868
                progress={{ value: 75 }}
869
              />
870
            </CCol>
871
            <CCol xs={6} lg={4} xxl={2}>
872
              <CWidgetStatsC
873
                color="danger"
874
                icon={<CIcon icon={cilSpeedometer} height={36} />}
875
                value="5:34:11"
876
                title="Avg. Time"
877
                inverse
878
                progress={{ value: 75 }}
879
              />
880
            </CCol>
881
            <CCol xs={6} lg={4} xxl={2}>
882
              <CWidgetStatsC
883
                color="info"
884
                icon={<CIcon icon={cilSpeech} height={36} />}
885
                value="972"
886
                title="Comments"
887
                inverse
888
                progress={{ value: 75 }}
889
              />
890
            </CCol>
891
          </CRow>
892
        </DocsExample>
893
      </CCardBody>
894
    </CCard>
895
  )
896
}
897

898
export default Widgets
899