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: [576, 168, 42, 34],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Engineering', 'Sales', 'Marketing', 'Operations'],
      colors: ['#1565C0', '#00B8A9', '#F2994A', '#7B8794'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'human',
          transition: 'flow',
          clusterLabels: {
            external: {
              show: true,
            },
          },
        },
      },
      legend: {
        show: false,
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>820 people, and the crowd is the person</h1>
        <p>
          One dot per employee, coloured by department. The figure is a custom
          unit layout: the outline is scanned row by row and each row is filled
          with as many dots as fit, so the head, arms and legs come out of the
          shape itself rather than from hand-placed coordinates.
        </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 = 1 employee</p>
      </div>
    </div>
  )
}

export default ApexChart