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

// The catalog is also on the script-tag global, so a variant can be built here and
// handed to `positions` as a function. `.with()` never mutates the original.
var PULSE_BY_TIME = ApexUnitShapes.pulse.with({ order: 'cols' })

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [12000, 4000, 1600, 400],
    options: {
      chart: {
        type: 'unit',
        height: 470,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Under 100ms', '100 to 300ms', '300ms to 1s', 'Over 1s'],
      colors: ['#00A96E', '#7CB342', '#FFAB00', '#FF4560'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // `.with()` returns a variant: column order, so the bands run along the
          // trace rather than slicing it. Defined in the head script.
          positions: PULSE_BY_TIME,
          transition: 'flow',
          unitValue: 24,
          clusterLabels: {
            show: false,
          },
        },
      },
      legend: {
        position: 'bottom',
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>18,000 requests, one dot per 24</h1>
        <p>
          A heartbeat trace, read left to right. Every shape hands its dots out
          in row order by default, which would slice this one horizontally.
          Asking the shape for a variant ordered by column instead makes the
          bands run along the trace, so the buckets read fastest to slowest. The
          original shape is left untouched.
        </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 = 24 requests</p>
      </div>
    </div>
  )
}

export default ApexChart