173 lines
5.5 KiB
JavaScript
173 lines
5.5 KiB
JavaScript
import React from 'react'
|
|
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react'
|
|
import {
|
|
CChartBar,
|
|
CChartDoughnut,
|
|
CChartLine,
|
|
CChartPie,
|
|
CChartPolarArea,
|
|
CChartRadar,
|
|
} from '@coreui/react-chartjs'
|
|
import { DocsLink } from 'src/components'
|
|
|
|
const Charts = () => {
|
|
const random = () => Math.round(Math.random() * 100)
|
|
|
|
return (
|
|
<CRow>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>
|
|
Bar Chart
|
|
<DocsLink href="http://www.chartjs.org" />
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CChartBar
|
|
data={{
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'GitHub Commits',
|
|
backgroundColor: '#f87979',
|
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40],
|
|
},
|
|
],
|
|
}}
|
|
labels="months"
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Line Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartLine
|
|
data={{
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(220, 220, 220, 0.2)',
|
|
borderColor: 'rgba(220, 220, 220, 1)',
|
|
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
|
|
pointBorderColor: '#fff',
|
|
data: [random(), random(), random(), random(), random(), random(), random()],
|
|
},
|
|
{
|
|
label: 'My Second dataset',
|
|
backgroundColor: 'rgba(151, 187, 205, 0.2)',
|
|
borderColor: 'rgba(151, 187, 205, 1)',
|
|
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
|
|
pointBorderColor: '#fff',
|
|
data: [random(), random(), random(), random(), random(), random(), random()],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Doughnut Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartDoughnut
|
|
data={{
|
|
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
|
datasets: [
|
|
{
|
|
backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
|
data: [40, 20, 80, 10],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Pie Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartPie
|
|
data={{
|
|
labels: ['Red', 'Green', 'Yellow'],
|
|
datasets: [
|
|
{
|
|
data: [300, 50, 100],
|
|
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
|
hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Polar Area Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartPolarArea
|
|
data={{
|
|
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue'],
|
|
datasets: [
|
|
{
|
|
data: [11, 16, 7, 3, 14],
|
|
backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
<CCol xs={6}>
|
|
<CCard className="mb-4">
|
|
<CCardHeader>Radar Chart</CCardHeader>
|
|
<CCardBody>
|
|
<CChartRadar
|
|
data={{
|
|
labels: [
|
|
'Eating',
|
|
'Drinking',
|
|
'Sleeping',
|
|
'Designing',
|
|
'Coding',
|
|
'Cycling',
|
|
'Running',
|
|
],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(220, 220, 220, 0.2)',
|
|
borderColor: 'rgba(220, 220, 220, 1)',
|
|
pointBackgroundColor: 'rgba(220, 220, 220, 1)',
|
|
pointBorderColor: '#fff',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(220, 220, 220, 1)',
|
|
data: [65, 59, 90, 81, 56, 55, 40],
|
|
},
|
|
{
|
|
label: 'My Second dataset',
|
|
backgroundColor: 'rgba(151, 187, 205, 0.2)',
|
|
borderColor: 'rgba(151, 187, 205, 1)',
|
|
pointBackgroundColor: 'rgba(151, 187, 205, 1)',
|
|
pointBorderColor: '#fff',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(151, 187, 205, 1)',
|
|
data: [28, 48, 40, 19, 96, 27, 100],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</CCardBody>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
)
|
|
}
|
|
|
|
export default Charts
|