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: [288000, 84000, 21000, 17000],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Reached', 'Engaged', 'Qualified', 'Converted'],
      // A funnel is ordered and its rings are already separated by geometry, so here a
      // ramp earns its keep - the eye reads "narrowing toward the bullseye". It turns
      // hue as it darkens and takes bigger steps than a pure tint scale would, so
      // neighbouring rings still separate at this dot size.
      colors: ['#7FC0DE', '#219EBC', '#0E7C7B', '#023047'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'target',
          transition: 'flow',
          unitValue: 500,
          clusterLabels: {
            // No outer labels here: those alternate down the two margins, which suits
            // a shape whose bands stack vertically. Concentric rings would need the
            // inner labels' leader lines to cross the outer rings, so the legend does
            // a cleaner job for a target.
            show: false,
          },
        },
      },
      legend: {
        position: 'bottom',
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>410,000 reached, 17,000 converted</h1>
        <p>
          A funnel as a target. The layout lays its dots on concentric rings,
          spaced one dot apart in both directions and handed out from the
          outside in, so the stages fall into bands and the last one lands in
          the bullseye. The rings are positions only: the colours come from the
          series, as they do in every other unit layout.
        </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 = 500 people</p>
      </div>
    </div>
  )
}

export default ApexChart