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

// Marks (#11): a lollipop is a scalar-y series (the default dataType), so no
// range routing is needed. renderItem draws a stem from the baseline up to the
// value, capped with a circle. Each mark is tagged with its datum identity, so
// the shared tooltip, legend toggle and dataPointSelection all work for free.
ApexCharts.registerSeriesType('lollipop', {
  renderItem: function (ctx) {
    var x = ctx.x
    var y = ctx.y
    var scales = ctx.scales
    var api = ctx.api
    var color = ctx.color
    var baseline = scales.y(0)
    api.line({ x1: x, y1: baseline, x2: x, y2: y, stroke: color, width: 2 })
    api.circle({ cx: x, cy: y, r: 6, fill: color })
  },
})

var lollipopData = [
  { x: 'Jan', y: 41 },
  { x: 'Feb', y: 58 },
  { x: 'Mar', y: 45 },
  { x: 'Apr', y: 72 },
  { x: 'May', y: 68 },
  { x: 'Jun', y: 91 },
  { x: 'Jul', y: 84 },
  { x: 'Aug', y: 63 },
  { x: 'Sep', y: 49 },
  { x: 'Oct', y: 77 },
  { x: 'Nov', y: 88 },
  { x: 'Dec', y: 102 },
]

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [{ name: 'Signups', data: lollipopData }],
    options: {
      chart: {
        height: 440,
        type: 'lollipop',
        animations: { enabled: false },
        toolbar: { show: false },
      },
      colors: ['#775DD0'],
      grid: {
        padding: { left: 12, right: 12 },
      },
      title: {
        text: 'Monthly active signups',
        align: 'left',
      },
      subtitle: {
        text: 'A custom "lollipop" series type built with Marks (registerSeriesType)',
        align: 'left',
      },
      xaxis: {
        type: 'category',
        tooltip: { enabled: false },
      },
      yaxis: {
        min: 0,
        max: 120,
        tickAmount: 6,
      },
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="lollipop"
          height={440}
        />
      </div>

      <div className="panel">
        <div className="note">
          A lollipop is a scalar-y custom series: <code>renderItem</code> draws
          a stem from <code>scales.y(0)</code> up to the value and caps it with
          a circle. Marks carry their datum identity, so hover, the shared
          tooltip and legend toggle work without any extra wiring.
        </div>
      </div>
    </div>
  )
}

export default ApexChart