coreui-free-react-admin-template

1
import React, { useEffect, useRef } from 'react'
2

3
import { CChartLine } from '@coreui/react-chartjs'
4
import { getStyle } from '@coreui/utils'
5

6
const MainChart = () => {
7
  const chartRef = useRef(null)
8

9
  useEffect(() => {
10
    document.documentElement.addEventListener('ColorSchemeChange', () => {
11
      if (chartRef.current) {
12
        setTimeout(() => {
13
          chartRef.current.options.scales.x.grid.borderColor = getStyle(
14
            '--cui-border-color-translucent',
15
          )
16
          chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
17
          chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
18
          chartRef.current.options.scales.y.grid.borderColor = getStyle(
19
            '--cui-border-color-translucent',
20
          )
21
          chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
22
          chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
23
          chartRef.current.update()
24
        })
25
      }
26
    })
27
  }, [chartRef])
28

29
  const random = () => Math.round(Math.random() * 100)
30

31
  return (
32
    <>
33
      <CChartLine
34
        ref={chartRef}
35
        style={{ height: '300px', marginTop: '40px' }}
36
        data={{
37
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
38
          datasets: [
39
            {
40
              label: 'My First dataset',
41
              backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
42
              borderColor: getStyle('--cui-info'),
43
              pointHoverBackgroundColor: getStyle('--cui-info'),
44
              borderWidth: 2,
45
              data: [
46
                random(50, 200),
47
                random(50, 200),
48
                random(50, 200),
49
                random(50, 200),
50
                random(50, 200),
51
                random(50, 200),
52
                random(50, 200),
53
              ],
54
              fill: true,
55
            },
56
            {
57
              label: 'My Second dataset',
58
              backgroundColor: 'transparent',
59
              borderColor: getStyle('--cui-success'),
60
              pointHoverBackgroundColor: getStyle('--cui-success'),
61
              borderWidth: 2,
62
              data: [
63
                random(50, 200),
64
                random(50, 200),
65
                random(50, 200),
66
                random(50, 200),
67
                random(50, 200),
68
                random(50, 200),
69
                random(50, 200),
70
              ],
71
            },
72
            {
73
              label: 'My Third dataset',
74
              backgroundColor: 'transparent',
75
              borderColor: getStyle('--cui-danger'),
76
              pointHoverBackgroundColor: getStyle('--cui-danger'),
77
              borderWidth: 1,
78
              borderDash: [8, 5],
79
              data: [65, 65, 65, 65, 65, 65, 65],
80
            },
81
          ],
82
        }}
83
        options={{
84
          maintainAspectRatio: false,
85
          plugins: {
86
            legend: {
87
              display: false,
88
            },
89
          },
90
          scales: {
91
            x: {
92
              grid: {
93
                color: getStyle('--cui-border-color-translucent'),
94
                drawOnChartArea: false,
95
              },
96
              ticks: {
97
                color: getStyle('--cui-body-color'),
98
              },
99
            },
100
            y: {
101
              beginAtZero: true,
102
              border: {
103
                color: getStyle('--cui-border-color-translucent'),
104
              },
105
              grid: {
106
                color: getStyle('--cui-border-color-translucent'),
107
              },
108
              max: 250,
109
              ticks: {
110
                color: getStyle('--cui-body-color'),
111
                maxTicksLimit: 5,
112
                stepSize: Math.ceil(250 / 5),
113
              },
114
            },
115
          },
116
          elements: {
117
            line: {
118
              tension: 0.4,
119
            },
120
            point: {
121
              radius: 0,
122
              hitRadius: 10,
123
              hoverRadius: 4,
124
              hoverBorderWidth: 3,
125
            },
126
          },
127
        }}
128
      />
129
    </>
130
  )
131
}
132

133
export default MainChart
134