text: 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 brandWarning = getStyle('warning') || '#f9b115'
  
  const MainChartExample = attributes => {
    const random = (min, max) => {
      return Math.floor(Math.random() * (max - min + 1) + min)
    }
  
    const defaultDatasets = (() => {
      let elements = 31
      const data1 = []
      const data2 = []
      const data3 = []
      const data4 = []
      for (let i = 0; i <= elements; i++) {
        data1.push(random(50, 200))
        data2.push(random(80, 100))
        data3.push(random(40, 100))
        data4.push(random(20, 50))
      }
      return [
        {
          label: 'Chuyên Gia',
          //backgroundColor: hexToRgba(brandInfo, 10),
          backgroundColor: 'transparent',
          borderColor: brandInfo,
          pointHoverBackgroundColor: brandInfo,
          borderWidth: 2,
          data: data1
        },
        {
          label: 'Ứng Viên',
          backgroundColor: 'transparent',
          borderColor: brandSuccess,
          pointHoverBackgroundColor: brandSuccess,
          borderWidth: 2,
          data: data2
        },
        {
          label: 'Người Dùng',
          backgroundColor: 'transparent',
          borderColor: brandDanger,
          pointHoverBackgroundColor: brandDanger,
          borderWidth: 2,
          data: data3
        },
        {
          label: 'Quản Trị Viên',
          backgroundColor: 'transparent',
          borderColor: brandWarning,
          pointHoverBackgroundColor: brandWarning,
          borderWidth: 2,
          data: data4
        },
      ]
    })()
  
    const defaultOptions = (() => {
      return {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            gridLines: {
              drawOnChartArea: false
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              maxTicksLimit: 5,
              stepSize: Math.ceil(250 / 5),
              max: 250
            },
            gridLines: {
              display: true
            }
          }]
        },
        elements: {
          point: {
            radius: 0,
            hitRadius: 10,
            hoverRadius: 4,
            hoverBorderWidth: 3
          }
        }
      }
    }
    )()
  
    // render
    return (
      <CChartLine
        {...attributes}
        datasets={defaultDatasets}
        options={defaultOptions}
        labels={['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']}
      />
    )
  }
  
  
  export default MainChartExample
  