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: [57600, 16800, 4200, 3400],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: [
        'Repeat donors',
        'First-time',
        'Workplace drives',
        'Emergency call-ups',
      ],
      // Four hues, not four tints of one: at this dot size a lightness ramp is very
      // hard to read back, and the palest end all but disappears on a white card.
      // Crimson still carries two thirds of the heart, so the shape keeps its colour.
      colors: ['#E8264F', '#FF8A3D', '#00A6A0', '#1D4E89'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'heart',
          transition: 'flow',
          unitValue: 100,
          clusterLabels: {
            // Outer labels: each band is named in the margin with a leader line to
            // its own dots, the way a pie names its slices. It replaces the legend,
            // so no one has to match a swatch to a band.
            external: {
              show: true,
            },
          },
        },
      },
      legend: {
        show: false,
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>82,000 blood donations, one dot per 100</h1>
        <p>
          The heart is a custom unit layout: a function that receives every dot
          and the plot rect and returns positions. Nothing is drawn under the
          dots, the dots are the shape. It packs itself from the outline at
          whatever dot count and chart size it is given.
        </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 = 100 donations</p>
      </div>
    </div>
  )
}

export default ApexChart