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: [4700, 1480, 1030, 740, 45],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Asia', 'Africa', 'Americas', 'Europe', 'Oceania'],
      colors: ['#1565C0', '#00B8D9', '#00A96E', '#FFAB00', '#FF4560'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'globe',
          transition: 'flow',
          // Values are millions of people, so one dot stands for ten of them.
          unitValue: 10,
          clusterLabels: {
            show: false,
          },
        },
      },
      legend: {
        position: 'bottom',
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>8 billion people, one dot per 10 million</h1>
        <p>
          The globe layout puts every dot on a sphere instead of in the plane.
          Rows are latitudes, so they converge towards the pole and bow as it
          leans in, and each dot fades smaller as the surface turns away.
          Spacing is measured on screen rather than in longitude, which is what
          keeps the rim from piling up. The silhouette is still made of the
          units, one per 10 million people.
        </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 = 10 million people</p>
      </div>
    </div>
  )
}

export default ApexChart