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: [
        'Individual contributors',
        'Team leads',
        'Directors',
        'Executives',
      ],
      // The tiers are ordered, so the palette climbs - but it turns hue as it goes
      // rather than only getting darker, because four tints of one colour are close to
      // indistinguishable at this dot size. The apex is the darkest tier.
      colors: ['#F7C948', '#F0883E', '#D64545', '#2E4A62'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'pyramid',
          transition: 'flow',
          clusterLabels: {
            // A labelled pyramid: each tier is named beside itself, so the reader
            // never has to count dots against a legend.
            external: {
              show: true,
            },
          },
        },
      },
      legend: {
        show: false,
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>820 people, 34 of them executives</h1>
        <p>
          Not an outline but a lattice: tier one holds one dot, tier two holds
          two, and so on, so the dots cut the slope themselves and every tier is
          a real count. Filled from the base, a head count turns into the
          hierarchy it describes, which no rectangular layout can show.
        </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 person</p>
      </div>
    </div>
  )
}

export default ApexChart