coreui-free-react-admin-template

1
import React, { useEffect, useRef } from 'react'
2
import PropTypes from 'prop-types'
3

4
import {
5
  CRow,
6
  CCol,
7
  CDropdown,
8
  CDropdownMenu,
9
  CDropdownItem,
10
  CDropdownToggle,
11
  CWidgetStatsA,
12
} from '@coreui/react'
13
import { getStyle } from '@coreui/utils'
14
import { CChartBar, CChartLine } from '@coreui/react-chartjs'
15
import CIcon from '@coreui/icons-react'
16
import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
17

18
const WidgetsDropdown = (props) => {
19
  const widgetChartRef1 = useRef(null)
20
  const widgetChartRef2 = useRef(null)
21

22
  useEffect(() => {
23
    document.documentElement.addEventListener('ColorSchemeChange', () => {
24
      if (widgetChartRef1.current) {
25
        setTimeout(() => {
26
          widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
27
          widgetChartRef1.current.update()
28
        })
29
      }
30

31
      if (widgetChartRef2.current) {
32
        setTimeout(() => {
33
          widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
34
          widgetChartRef2.current.update()
35
        })
36
      }
37
    })
38
  }, [widgetChartRef1, widgetChartRef2])
39

40
  return (
41
    <CRow className={props.className} xs={{ gutter: 4 }}>
42
      <CCol sm={6} xl={4} xxl={3}>
43
        <CWidgetStatsA
44
          color="primary"
45
          value={
46
            <>
47
              26K{' '}
48
              <span className="fs-6 fw-normal">
49
                (-12.4% <CIcon icon={cilArrowBottom} />)
50
              </span>
51
            </>
52
          }
53
          title="Users"
54
          action={
55
            <CDropdown alignment="end">
56
              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
57
                <CIcon icon={cilOptions} />
58
              </CDropdownToggle>
59
              <CDropdownMenu>
60
                <CDropdownItem>Action</CDropdownItem>
61
                <CDropdownItem>Another action</CDropdownItem>
62
                <CDropdownItem>Something else here...</CDropdownItem>
63
                <CDropdownItem disabled>Disabled action</CDropdownItem>
64
              </CDropdownMenu>
65
            </CDropdown>
66
          }
67
          chart={
68
            <CChartLine
69
              ref={widgetChartRef1}
70
              className="mt-3 mx-3"
71
              style={{ height: '70px' }}
72
              data={{
73
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
74
                datasets: [
75
                  {
76
                    label: 'My First dataset',
77
                    backgroundColor: 'transparent',
78
                    borderColor: 'rgba(255,255,255,.55)',
79
                    pointBackgroundColor: getStyle('--cui-primary'),
80
                    data: [65, 59, 84, 84, 51, 55, 40],
81
                  },
82
                ],
83
              }}
84
              options={{
85
                plugins: {
86
                  legend: {
87
                    display: false,
88
                  },
89
                },
90
                maintainAspectRatio: false,
91
                scales: {
92
                  x: {
93
                    border: {
94
                      display: false,
95
                    },
96
                    grid: {
97
                      display: false,
98
                      drawBorder: false,
99
                    },
100
                    ticks: {
101
                      display: false,
102
                    },
103
                  },
104
                  y: {
105
                    min: 30,
106
                    max: 89,
107
                    display: false,
108
                    grid: {
109
                      display: false,
110
                    },
111
                    ticks: {
112
                      display: false,
113
                    },
114
                  },
115
                },
116
                elements: {
117
                  line: {
118
                    borderWidth: 1,
119
                    tension: 0.4,
120
                  },
121
                  point: {
122
                    radius: 4,
123
                    hitRadius: 10,
124
                    hoverRadius: 4,
125
                  },
126
                },
127
              }}
128
            />
129
          }
130
        />
131
      </CCol>
132
      <CCol sm={6} xl={4} xxl={3}>
133
        <CWidgetStatsA
134
          color="info"
135
          value={
136
            <>
137
              $6.200{' '}
138
              <span className="fs-6 fw-normal">
139
                (40.9% <CIcon icon={cilArrowTop} />)
140
              </span>
141
            </>
142
          }
143
          title="Income"
144
          action={
145
            <CDropdown alignment="end">
146
              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
147
                <CIcon icon={cilOptions} />
148
              </CDropdownToggle>
149
              <CDropdownMenu>
150
                <CDropdownItem>Action</CDropdownItem>
151
                <CDropdownItem>Another action</CDropdownItem>
152
                <CDropdownItem>Something else here...</CDropdownItem>
153
                <CDropdownItem disabled>Disabled action</CDropdownItem>
154
              </CDropdownMenu>
155
            </CDropdown>
156
          }
157
          chart={
158
            <CChartLine
159
              ref={widgetChartRef2}
160
              className="mt-3 mx-3"
161
              style={{ height: '70px' }}
162
              data={{
163
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
164
                datasets: [
165
                  {
166
                    label: 'My First dataset',
167
                    backgroundColor: 'transparent',
168
                    borderColor: 'rgba(255,255,255,.55)',
169
                    pointBackgroundColor: getStyle('--cui-info'),
170
                    data: [1, 18, 9, 17, 34, 22, 11],
171
                  },
172
                ],
173
              }}
174
              options={{
175
                plugins: {
176
                  legend: {
177
                    display: false,
178
                  },
179
                },
180
                maintainAspectRatio: false,
181
                scales: {
182
                  x: {
183
                    border: {
184
                      display: false,
185
                    },
186
                    grid: {
187
                      display: false,
188
                      drawBorder: false,
189
                    },
190
                    ticks: {
191
                      display: false,
192
                    },
193
                  },
194
                  y: {
195
                    min: -9,
196
                    max: 39,
197
                    display: false,
198
                    grid: {
199
                      display: false,
200
                    },
201
                    ticks: {
202
                      display: false,
203
                    },
204
                  },
205
                },
206
                elements: {
207
                  line: {
208
                    borderWidth: 1,
209
                  },
210
                  point: {
211
                    radius: 4,
212
                    hitRadius: 10,
213
                    hoverRadius: 4,
214
                  },
215
                },
216
              }}
217
            />
218
          }
219
        />
220
      </CCol>
221
      <CCol sm={6} xl={4} xxl={3}>
222
        <CWidgetStatsA
223
          color="warning"
224
          value={
225
            <>
226
              2.49%{' '}
227
              <span className="fs-6 fw-normal">
228
                (84.7% <CIcon icon={cilArrowTop} />)
229
              </span>
230
            </>
231
          }
232
          title="Conversion Rate"
233
          action={
234
            <CDropdown alignment="end">
235
              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
236
                <CIcon icon={cilOptions} />
237
              </CDropdownToggle>
238
              <CDropdownMenu>
239
                <CDropdownItem>Action</CDropdownItem>
240
                <CDropdownItem>Another action</CDropdownItem>
241
                <CDropdownItem>Something else here...</CDropdownItem>
242
                <CDropdownItem disabled>Disabled action</CDropdownItem>
243
              </CDropdownMenu>
244
            </CDropdown>
245
          }
246
          chart={
247
            <CChartLine
248
              className="mt-3"
249
              style={{ height: '70px' }}
250
              data={{
251
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
252
                datasets: [
253
                  {
254
                    label: 'My First dataset',
255
                    backgroundColor: 'rgba(255,255,255,.2)',
256
                    borderColor: 'rgba(255,255,255,.55)',
257
                    data: [78, 81, 80, 45, 34, 12, 40],
258
                    fill: true,
259
                  },
260
                ],
261
              }}
262
              options={{
263
                plugins: {
264
                  legend: {
265
                    display: false,
266
                  },
267
                },
268
                maintainAspectRatio: false,
269
                scales: {
270
                  x: {
271
                    display: false,
272
                  },
273
                  y: {
274
                    display: false,
275
                  },
276
                },
277
                elements: {
278
                  line: {
279
                    borderWidth: 2,
280
                    tension: 0.4,
281
                  },
282
                  point: {
283
                    radius: 0,
284
                    hitRadius: 10,
285
                    hoverRadius: 4,
286
                  },
287
                },
288
              }}
289
            />
290
          }
291
        />
292
      </CCol>
293
      <CCol sm={6} xl={4} xxl={3}>
294
        <CWidgetStatsA
295
          color="danger"
296
          value={
297
            <>
298
              44K{' '}
299
              <span className="fs-6 fw-normal">
300
                (-23.6% <CIcon icon={cilArrowBottom} />)
301
              </span>
302
            </>
303
          }
304
          title="Sessions"
305
          action={
306
            <CDropdown alignment="end">
307
              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
308
                <CIcon icon={cilOptions} />
309
              </CDropdownToggle>
310
              <CDropdownMenu>
311
                <CDropdownItem>Action</CDropdownItem>
312
                <CDropdownItem>Another action</CDropdownItem>
313
                <CDropdownItem>Something else here...</CDropdownItem>
314
                <CDropdownItem disabled>Disabled action</CDropdownItem>
315
              </CDropdownMenu>
316
            </CDropdown>
317
          }
318
          chart={
319
            <CChartBar
320
              className="mt-3 mx-3"
321
              style={{ height: '70px' }}
322
              data={{
323
                labels: [
324
                  'January',
325
                  'February',
326
                  'March',
327
                  'April',
328
                  'May',
329
                  'June',
330
                  'July',
331
                  'August',
332
                  'September',
333
                  'October',
334
                  'November',
335
                  'December',
336
                  'January',
337
                  'February',
338
                  'March',
339
                  'April',
340
                ],
341
                datasets: [
342
                  {
343
                    label: 'My First dataset',
344
                    backgroundColor: 'rgba(255,255,255,.2)',
345
                    borderColor: 'rgba(255,255,255,.55)',
346
                    data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
347
                    barPercentage: 0.6,
348
                  },
349
                ],
350
              }}
351
              options={{
352
                maintainAspectRatio: false,
353
                plugins: {
354
                  legend: {
355
                    display: false,
356
                  },
357
                },
358
                scales: {
359
                  x: {
360
                    grid: {
361
                      display: false,
362
                      drawTicks: false,
363
                    },
364
                    ticks: {
365
                      display: false,
366
                    },
367
                  },
368
                  y: {
369
                    border: {
370
                      display: false,
371
                    },
372
                    grid: {
373
                      display: false,
374
                      drawBorder: false,
375
                      drawTicks: false,
376
                    },
377
                    ticks: {
378
                      display: false,
379
                    },
380
                  },
381
                },
382
              }}
383
            />
384
          }
385
        />
386
      </CCol>
387
    </CRow>
388
  )
389
}
390

391
WidgetsDropdown.propTypes = {
392
  className: PropTypes.string,
393
  withCharts: PropTypes.bool,
394
}
395

396
export default WidgetsDropdown
397