96 lines
2.1 KiB
JavaScript
96 lines
2.1 KiB
JavaScript
import React from 'react'
|
|
import { CChartLine } from '@coreui/react-chartjs'
|
|
import { getStyle, hexToRgba } from '@coreui/utils'
|
|
|
|
const brandSuccess = getStyle('success') || '#4dbd74'
|
|
const brandInfo = getStyle('info') || '#20a8d8'
|
|
const brandDanger = getStyle('danger') || '#f86c6b'
|
|
|
|
const MainChartExample = (attributes) => {
|
|
const random = (min, max) => {
|
|
return Math.floor(Math.random() * (max - min + 1) + min)
|
|
}
|
|
|
|
let elements = 27
|
|
const data1 = []
|
|
const data2 = []
|
|
const data3 = []
|
|
|
|
for (let i = 0; i <= elements; i++) {
|
|
data1.push(random(50, 200))
|
|
data2.push(random(80, 100))
|
|
data3.push(65)
|
|
}
|
|
|
|
const data = {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
|
datasets: [
|
|
{
|
|
label: 'My First dataset',
|
|
backgroundColor: hexToRgba(brandInfo, 10),
|
|
borderColor: brandInfo,
|
|
pointHoverBackgroundColor: brandInfo,
|
|
borderWidth: 2,
|
|
data: data1,
|
|
fill: true,
|
|
},
|
|
{
|
|
label: 'My Second dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: brandSuccess,
|
|
pointHoverBackgroundColor: brandSuccess,
|
|
borderWidth: 2,
|
|
data: data2,
|
|
},
|
|
{
|
|
label: 'My Third dataset',
|
|
backgroundColor: 'transparent',
|
|
borderColor: brandDanger,
|
|
pointHoverBackgroundColor: brandDanger,
|
|
borderWidth: 1,
|
|
borderDash: [8, 5],
|
|
data: data3,
|
|
},
|
|
],
|
|
}
|
|
|
|
const options = {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
drawOnChartArea: false,
|
|
},
|
|
},
|
|
y: {
|
|
ticks: {
|
|
beginAtZero: true,
|
|
maxTicksLimit: 5,
|
|
stepSize: Math.ceil(250 / 5),
|
|
max: 250,
|
|
},
|
|
},
|
|
},
|
|
elements: {
|
|
line: {
|
|
tension: 0.4,
|
|
},
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4,
|
|
hoverBorderWidth: 3,
|
|
},
|
|
},
|
|
}
|
|
|
|
return <CChartLine data={data} options={options} {...attributes} />
|
|
}
|
|
|
|
export default MainChartExample
|