import React from 'react'
import ReactApexChart from 'react-apexcharts'
import './styles.css'

// A person icon, drawn inline as a data URI so the sample is self-contained.
var PERSON_ICON =
  'data:image/svg+xml,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#5B8DEF">' +
      '<circle cx="12" cy="7" r="4"/>' +
      '<path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z"/>' +
      '</svg>',
  )

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [520000, 1180000, 300000],
    options: {
      chart: {
        type: 'unit',
        height: 440,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Under 18', '18 to 64', '65 and over'],
      colors: ['#5B8DEF', '#00B8A9', '#F6A609'],
      series: [520000, 1180000, 300000],
      legend: {
        position: 'bottom',
      },
      plotOptions: {
        unit: {
          layout: 'grouped',
          shape: 'image',
          unitValue: 25000,
          spacing: 1.2,
          image: {
            src: PERSON_ICON,
            width: 16,
            height: 16,
            // Recolour each icon to its category colour so the crowd matches the
            // legend (the source icon is a single-colour silhouette).
            tint: true,
          },
          clusterLabels: {
            show: true,
          },
        },
      },
    },
  })

  // Nothing extra to wire: the chart renders the pictogram from the options
  // above. PERSON_ICON lives in the shared head script.

  return (
    <div>
      <div className="wrap">
        <h1>Pictogram (isotype) unit chart</h1>
        <p>A pictogram unit chart: each icon stands for 25,000 people.</p>

        <div className="chart-wrap">
          <div id="chart">
            <ReactApexChart
              options={state.options}
              series={state.series}
              type="unit"
              height={440}
            />
          </div>
        </div>

        <div className="note">1 icon = 25,000 people</div>
      </div>
    </div>
  )
}

export default ApexChart