import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        name: '',
        data: [200, 330, 548, 740, 880, 990, 1100, 1380],
      },
    ],
    options: {
      chart: {
        type: 'pyramid',
        height: 350,
        dropShadow: {
          enabled: true,
        },
      },
      plotOptions: {
        bar: {
          borderRadius: 0,
          distributed: true,
        },
      },
      colors: [
        '#809bce',
        '#95b8d1',
        '#b8e0d4',
        '#d6eadf',
        '#eac4d5',
        '#d1625c',
        '#e89c81',
        '#ffd6a5',
      ],
      dataLabels: {
        enabled: true,
        formatter: function (val, opt) {
          // hide labels on tiers too small to fit them; the tooltip still names these
          if (val < 400) return ''
          return opt.w.globals.labels[opt.dataPointIndex]
        },
        dropShadow: {
          enabled: true,
        },
      },
      title: {
        text: 'Food Pyramid',
        align: 'middle',
      },
      xaxis: {
        categories: [
          'Sweets',
          'Processed Foods',
          'Healthy Fats',
          'Meat',
          'Beans & Legumes',
          'Dairy',
          'Fruits & Vegetables',
          'Grains',
        ],
      },
      legend: {
        show: false,
      },
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="pyramid"
          height={350}
        />
      </div>
    </div>
  )
}

export default ApexChart