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: [3400000, 480000, 260000, 60000],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Economy', 'Premium economy', 'Business', 'First'],
      colors: ['#008FFB', '#00B8A9', '#FFAB00', '#FF4560'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'plane',
          transition: 'flow',
          unitValue: 5000,
          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>4.2 million passengers, one dot per 5,000</h1>
        <p>
          The wings and tailplane are the thinnest parts of any shape in the
          collection, so this is the layout that needs the most dots before it
          reads. Below roughly 160 the wings thin to a single dot each and the
          plane becomes a cross.
        </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 = 5,000 passengers</p>
      </div>
    </div>
  )
}

export default ApexChart