207 lines
6.1 KiB
JavaScript
207 lines
6.1 KiB
JavaScript
import React from 'react'
|
|
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react-ts'
|
|
import {
|
|
CChartBar,
|
|
CChartLine,
|
|
CChartDoughnut,
|
|
CChartRadar,
|
|
CChartPie,
|
|
CChartPolarArea,
|
|
} from '@coreui/react-chartjs'
|
|
import { DocsLink } from 'src/reusable'
|
|
|
|
const Charts = () => {
|
|
return (
|
|
<CRow>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Bar Chart
|
|
<DocsLink href="http://www.chartjs.org" />
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CChartBar
|
|
datasets={[
|
|
{
|
|
label: 'GitHub Commits',
|
|
backgroundColor: '#f87979',
|
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
|
|
},
|
|
]}
|
|
labels="months"
|
|
options={{
|
|
tooltips: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Doughnut Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartDoughnut
|
|
datasets={[
|
|
{
|
|
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
|
data: [40, 20, 80, 10],
|
|
},
|
|
]}
|
|
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
|
|
options={{
|
|
tooltips: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Line Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartLine
|
|
datasets={[
|
|
{
|
|
label: 'Data One',
|
|
backgroundColor: 'rgb(228,102,81,0.9)',
|
|
data: [30, 39, 10, 50, 30, 70, 35],
|
|
},
|
|
{
|
|
label: 'Data Two',
|
|
backgroundColor: 'rgb(0,216,255,0.9)',
|
|
data: [39, 80, 40, 35, 40, 20, 45],
|
|
},
|
|
]}
|
|
options={{
|
|
tooltips: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
labels="months"
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Pie Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartPie
|
|
datasets={[
|
|
{
|
|
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
|
data: [40, 20, 80, 10],
|
|
},
|
|
]}
|
|
labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
|
|
options={{
|
|
tooltips: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Polar Area Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartPolarArea
|
|
datasets={[
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(179,181,198,0.2)',
|
|
pointBackgroundColor: 'rgba(179,181,198,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: 'rgba(179,181,198,1)',
|
|
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
|
data: [65, 59, 90, 81, 56, 55, 40],
|
|
},
|
|
{
|
|
label: 'My Second dataset',
|
|
backgroundColor: 'rgba(255,99,132,0.2)',
|
|
pointBackgroundColor: 'rgba(255,99,132,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: 'rgba(255,99,132,1)',
|
|
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
|
data: [28, 48, 40, 19, 96, 27, 100],
|
|
},
|
|
]}
|
|
options={{
|
|
aspectRatio: 1.5,
|
|
tooltips: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
labels={[
|
|
'Eating',
|
|
'Drinking',
|
|
'Sleeping',
|
|
'Designing',
|
|
'Coding',
|
|
'Cycling',
|
|
'Running',
|
|
]}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Radar Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartRadar
|
|
datasets={[
|
|
{
|
|
label: '2019',
|
|
backgroundColor: 'rgba(179,181,198,0.2)',
|
|
borderColor: 'rgba(179,181,198,1)',
|
|
pointBackgroundColor: 'rgba(179,181,198,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(179,181,198,1)',
|
|
tooltipLabelColor: 'rgba(179,181,198,1)',
|
|
data: [65, 59, 90, 81, 56, 55, 40],
|
|
},
|
|
{
|
|
label: '2020',
|
|
backgroundColor: 'rgba(255,99,132,0.2)',
|
|
borderColor: 'rgba(255,99,132,1)',
|
|
pointBackgroundColor: 'rgba(255,99,132,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(255,99,132,1)',
|
|
tooltipLabelColor: 'rgba(255,99,132,1)',
|
|
data: [28, 48, 40, 19, 96, 27, 100],
|
|
},
|
|
]}
|
|
options={{
|
|
aspectRatio: 1.5,
|
|
tooltips: {
|
|
enabled: true,
|
|
},
|
|
}}
|
|
labels={[
|
|
'Eating',
|
|
'Drinking',
|
|
'Sleeping',
|
|
'Designing',
|
|
'Coding',
|
|
'Cycling',
|
|
'Running',
|
|
]}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
)
|
|
}
|
|
|
|
export default Charts
|