coreui-free-react-admin-template

1
import React from 'react'
2
import PropTypes from 'prop-types'
3
import { CWidgetStatsD, CRow, CCol } from '@coreui/react'
4
import CIcon from '@coreui/icons-react'
5
import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
6
import { CChart } from '@coreui/react-chartjs'
7

8
const WidgetsBrand = (props) => {
9
  const chartOptions = {
10
    elements: {
11
      line: {
12
        tension: 0.4,
13
      },
14
      point: {
15
        radius: 0,
16
        hitRadius: 10,
17
        hoverRadius: 4,
18
        hoverBorderWidth: 3,
19
      },
20
    },
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
  return (
38
    <CRow className={props.className} xs={{ gutter: 4 }}>
39
      <CCol sm={6} xl={4} xxl={3}>
40
        <CWidgetStatsD
41
          {...(props.withCharts && {
42
            chart: (
43
              <CChart
44
                className="position-absolute w-100 h-100"
45
                type="line"
46
                data={{
47
                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
48
                  datasets: [
49
                    {
50
                      backgroundColor: 'rgba(255,255,255,.1)',
51
                      borderColor: 'rgba(255,255,255,.55)',
52
                      pointHoverBackgroundColor: '#fff',
53
                      borderWidth: 2,
54
                      data: [65, 59, 84, 84, 51, 55, 40],
55
                      fill: true,
56
                    },
57
                  ],
58
                }}
59
                options={chartOptions}
60
              />
61
            ),
62
          })}
63
          icon={<CIcon icon={cibFacebook} height={52} className="my-4 text-white" />}
64
          values={[
65
            { title: 'friends', value: '89K' },
66
            { title: 'feeds', value: '459' },
67
          ]}
68
          style={{
69
            '--cui-card-cap-bg': '#3b5998',
70
          }}
71
        />
72
      </CCol>
73
      <CCol sm={6} xl={4} xxl={3}>
74
        <CWidgetStatsD
75
          {...(props.withCharts && {
76
            chart: (
77
              <CChart
78
                className="position-absolute w-100 h-100"
79
                type="line"
80
                data={{
81
                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
82
                  datasets: [
83
                    {
84
                      backgroundColor: 'rgba(255,255,255,.1)',
85
                      borderColor: 'rgba(255,255,255,.55)',
86
                      pointHoverBackgroundColor: '#fff',
87
                      borderWidth: 2,
88
                      data: [1, 13, 9, 17, 34, 41, 38],
89
                      fill: true,
90
                    },
91
                  ],
92
                }}
93
                options={chartOptions}
94
              />
95
            ),
96
          })}
97
          icon={<CIcon icon={cibTwitter} height={52} className="my-4 text-white" />}
98
          values={[
99
            { title: 'followers', value: '973k' },
100
            { title: 'tweets', value: '1.792' },
101
          ]}
102
          style={{
103
            '--cui-card-cap-bg': '#00aced',
104
          }}
105
        />
106
      </CCol>
107
      <CCol sm={6} xl={4} xxl={3}>
108
        <CWidgetStatsD
109
          {...(props.withCharts && {
110
            chart: (
111
              <CChart
112
                className="position-absolute w-100 h-100"
113
                type="line"
114
                data={{
115
                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
116
                  datasets: [
117
                    {
118
                      backgroundColor: 'rgba(255,255,255,.1)',
119
                      borderColor: 'rgba(255,255,255,.55)',
120
                      pointHoverBackgroundColor: '#fff',
121
                      borderWidth: 2,
122
                      data: [78, 81, 80, 45, 34, 12, 40],
123
                      fill: true,
124
                    },
125
                  ],
126
                }}
127
                options={chartOptions}
128
              />
129
            ),
130
          })}
131
          icon={<CIcon icon={cibLinkedin} height={52} className="my-4 text-white" />}
132
          values={[
133
            { title: 'contacts', value: '500' },
134
            { title: 'feeds', value: '1.292' },
135
          ]}
136
          style={{
137
            '--cui-card-cap-bg': '#4875b4',
138
          }}
139
        />
140
      </CCol>
141
      <CCol sm={6} xl={4} xxl={3}>
142
        <CWidgetStatsD
143
          color="warning"
144
          {...(props.withCharts && {
145
            chart: (
146
              <CChart
147
                className="position-absolute w-100 h-100"
148
                type="line"
149
                data={{
150
                  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
151
                  datasets: [
152
                    {
153
                      backgroundColor: 'rgba(255,255,255,.1)',
154
                      borderColor: 'rgba(255,255,255,.55)',
155
                      pointHoverBackgroundColor: '#fff',
156
                      borderWidth: 2,
157
                      data: [35, 23, 56, 22, 97, 23, 64],
158
                      fill: true,
159
                    },
160
                  ],
161
                }}
162
                options={chartOptions}
163
              />
164
            ),
165
          })}
166
          icon={<CIcon icon={cilCalendar} height={52} className="my-4 text-white" />}
167
          values={[
168
            { title: 'events', value: '12+' },
169
            { title: 'meetings', value: '4' },
170
          ]}
171
        />
172
      </CCol>
173
    </CRow>
174
  )
175
}
176

177
WidgetsBrand.propTypes = {
178
  className: PropTypes.string,
179
  withCharts: PropTypes.bool,
180
}
181

182
export default WidgetsBrand
183