coreui-free-react-admin-template

1
import React from 'react'
2
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
3
import {
4
  CChartBar,
5
  CChartDoughnut,
6
  CChartLine,
7
  CChartPie,
8
  CChartPolarArea,
9
  CChartRadar,
10
} from '@coreui/react-chartjs'
11
import { DocsCallout } from 'src/components'
12

13
const Charts = () => {
14
  const random = () => Math.round(Math.random() * 100)
15

16
  return (
17
    <CRow>
18
      <CCol xs={12}>
19
        <DocsCallout
20
          name="Chart"
21
          href="components/chart"
22
          content="React wrapper component for Chart.js 3.0, the most popular charting library."
23
        />
24
      </CCol>
25
      <CCol xs={6}>
26
        <CCard className="mb-4">
27
          <CCardHeader>Bar Chart</CCardHeader>
28
          <CCardBody>
29
            <CChartBar
30
              data={{
31
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
32
                datasets: [
33
                  {
34
                    label: 'GitHub Commits',
35
                    backgroundColor: '#f87979',
36
                    data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
37
                  },
38
                ],
39
              }}
40
              labels="months"
41
            />
42
          </CCardBody>
43
        </CCard>
44
      </CCol>
45
      <CCol xs={6}>
46
        <CCard className="mb-4">
47
          <CCardHeader>Line Chart</CCardHeader>
48
          <CCardBody>
49
            <CChartLine
50
              data={{
51
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
52
                datasets: [
53
                  {
54
                    label: 'My First dataset',
55
                    backgroundColor: 'rgba(220, 220, 220, 0.2)',
56
                    borderColor: 'rgba(220, 220, 220, 1)',
57
                    pointBackgroundColor: 'rgba(220, 220, 220, 1)',
58
                    pointBorderColor: '#fff',
59
                    data: [random(), random(), random(), random(), random(), random(), random()],
60
                  },
61
                  {
62
                    label: 'My Second dataset',
63
                    backgroundColor: 'rgba(151, 187, 205, 0.2)',
64
                    borderColor: 'rgba(151, 187, 205, 1)',
65
                    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
66
                    pointBorderColor: '#fff',
67
                    data: [random(), random(), random(), random(), random(), random(), random()],
68
                  },
69
                ],
70
              }}
71
            />
72
          </CCardBody>
73
        </CCard>
74
      </CCol>
75
      <CCol xs={6}>
76
        <CCard className="mb-4">
77
          <CCardHeader>Doughnut Chart</CCardHeader>
78
          <CCardBody>
79
            <CChartDoughnut
80
              data={{
81
                labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
82
                datasets: [
83
                  {
84
                    backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
85
                    data: [40, 20, 80, 10],
86
                  },
87
                ],
88
              }}
89
            />
90
          </CCardBody>
91
        </CCard>
92
      </CCol>
93
      <CCol xs={6}>
94
        <CCard className="mb-4">
95
          <CCardHeader>Pie Chart</CCardHeader>
96
          <CCardBody>
97
            <CChartPie
98
              data={{
99
                labels: ['Red', 'Green', 'Yellow'],
100
                datasets: [
101
                  {
102
                    data: [300, 50, 100],
103
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
104
                    hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
105
                  },
106
                ],
107
              }}
108
            />
109
          </CCardBody>
110
        </CCard>
111
      </CCol>
112
      <CCol xs={6}>
113
        <CCard className="mb-4">
114
          <CCardHeader>Polar Area Chart</CCardHeader>
115
          <CCardBody>
116
            <CChartPolarArea
117
              data={{
118
                labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
119
                datasets: [
120
                  {
121
                    data: [11, 16, 7, 3, 14],
122
                    backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
123
                  },
124
                ],
125
              }}
126
            />
127
          </CCardBody>
128
        </CCard>
129
      </CCol>
130
      <CCol xs={6}>
131
        <CCard className="mb-4">
132
          <CCardHeader>Radar Chart</CCardHeader>
133
          <CCardBody>
134
            <CChartRadar
135
              data={{
136
                labels: [
137
                  'Eating',
138
                  'Drinking',
139
                  'Sleeping',
140
                  'Designing',
141
                  'Coding',
142
                  'Cycling',
143
                  'Running',
144
                ],
145
                datasets: [
146
                  {
147
                    label: 'My First dataset',
148
                    backgroundColor: 'rgba(220, 220, 220, 0.2)',
149
                    borderColor: 'rgba(220, 220, 220, 1)',
150
                    pointBackgroundColor: 'rgba(220, 220, 220, 1)',
151
                    pointBorderColor: '#fff',
152
                    pointHighlightFill: '#fff',
153
                    pointHighlightStroke: 'rgba(220, 220, 220, 1)',
154
                    data: [65, 59, 90, 81, 56, 55, 40],
155
                  },
156
                  {
157
                    label: 'My Second dataset',
158
                    backgroundColor: 'rgba(151, 187, 205, 0.2)',
159
                    borderColor: 'rgba(151, 187, 205, 1)',
160
                    pointBackgroundColor: 'rgba(151, 187, 205, 1)',
161
                    pointBorderColor: '#fff',
162
                    pointHighlightFill: '#fff',
163
                    pointHighlightStroke: 'rgba(151, 187, 205, 1)',
164
                    data: [28, 48, 40, 19, 96, 27, 100],
165
                  },
166
                ],
167
              }}
168
            />
169
          </CCardBody>
170
        </CCard>
171
      </CCol>
172
    </CRow>
173
  )
174
}
175

176
export default Charts
177