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

// This demo also loads: https://cdn.jsdelivr.net/npm/apexcharts/dist/unit-shapes.js

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [3600, 2000, 1000, 600],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Leads', 'Qualified', 'Proposal', 'Closed won'],
      colors: ['#7FC0DE', '#219EBC', '#0E7C7B', '#023047'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'funnel',
          transition: 'flow',
          unitValue: 8,
          clusterLabels: {
            // Outer labels: each band is named in the margin with a leader line to its
            // own dots, so the crowd reads without a legend.
            external: {
              show: true,
            },
          },
        },
      },
      legend: {
        show: false,
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>7,200 leads, one dot per 8</h1>
        <p>
          A funnel shaped crowd, not a funnel chart. The dots are handed out in
          row order from the top, so the stages stack down the shape widest
          first and the last one lands in the neck. Every dot is still one lead.
        </p>

        <div className="chart-wrap">
          <div id="chart">
            <ReactApexChart
              options={state.options}
              series={state.series}
              type="unit"
              height={470}
            />
          </div>
        </div>

        <p className="note">1 dot = 8 leads</p>
      </div>
    </div>
  )
}

export default ApexChart