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: 420,
        animations: {
          enabled: true,
          speed: 900,
        },
      },
      labels: ['Available', 'Reserved', 'Charging', 'Critical'],
      colors: ['#00A96E', '#0EB8C4', '#FFAB00', '#FF4560'],
      plotOptions: {
        unit: {
          layout: 'custom',
          // One of the shapes in apexcharts/unit-shapes.
          positions: 'battery',
          transition: 'flow',
          clusterLabels: {
            show: false,
          },
        },
      },
      legend: {
        position: 'bottom',
      },
    },
  })

  return (
    <div>
      <div className="wrap">
        <h1>820 MWh of grid storage, one dot per MWh</h1>
        <p>
          A battery body with its terminal, filled left to right. The layout
          hands out its dots in column order rather than row order, which is all
          it takes for the first category to read as a charge level instead of a
          band across the top.
        </p>

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

        <p className="note">1 dot = 1 MWh of capacity</p>
      </div>
    </div>
  )
}

export default ApexChart