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

// Per-level colour palettes. Each breakdown is tinted with shades of its
// parent slice's hue, so drilling reads as "going deeper into this slice".
// Pie/donut drilldown needs object-form data ({ x, y, drilldown }) so each
// slice can carry its own child id; flat numeric series can't.
var deviceColors = ['#1565C0', '#2E7D32', '#EF6C00'] // Mobile / Desktop / Tablet
var mobileOsColors = ['#0D47A1', '#1976D2', '#64B5F6'] // Mobile by OS
var iosColors = ['#1565C0', '#42A5F5', '#90CAF9'] // iOS versions
var desktopOsColors = ['#1B5E20', '#388E3C', '#66BB6A'] // Desktop by OS
var tabletOsColors = ['#E65100', '#FB8C00'] // Tablet by OS

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: [
      {
        data: [
          { x: 'Mobile', y: 55, drilldown: 'mobile' },
          { x: 'Desktop', y: 33, drilldown: 'desktop' },
          { x: 'Tablet', y: 12, drilldown: 'tablet' },
        ],
      },
    ],
    options: {
      chart: {
        type: 'donut',
        height: 420,
      },
      colors: deviceColors,
      legend: {
        position: 'bottom',
      },
      dataLabels: {
        enabled: true,
      },
      plotOptions: {
        pie: {
          donut: {
            size: '60%',
          },
        },
      },
      title: {
        text: 'Website Traffic by Device',
        align: 'left',
      },
      subtitle: {
        text: 'Click a slice to drill into its breakdown. Use the breadcrumb to go back.',
        align: 'left',
      },
      drilldown: {
        enabled: true,
        breadcrumb: {
          show: true,
          position: 'top-right',
          rootLabel: 'All Devices',
          separator: ' / ',
        },
        series: [
          {
            id: 'mobile',
            name: 'Mobile by OS',
            colors: mobileOsColors,
            data: [
              { x: 'iOS', y: 30, drilldown: 'mobile-ios' },
              { x: 'Android', y: 23 },
              { x: 'Other', y: 2 },
            ],
          },
          {
            id: 'mobile-ios',
            name: 'iOS Versions',
            colors: iosColors,
            data: [
              { x: 'iOS 17', y: 18 },
              { x: 'iOS 16', y: 9 },
              { x: 'iOS 15', y: 3 },
            ],
          },
          {
            id: 'desktop',
            name: 'Desktop by OS',
            colors: desktopOsColors,
            data: [
              { x: 'Windows', y: 20 },
              { x: 'macOS', y: 10 },
              { x: 'Linux', y: 3 },
            ],
          },
          {
            id: 'tablet',
            name: 'Tablet by OS',
            colors: tabletOsColors,
            data: [
              { x: 'iPadOS', y: 8 },
              { x: 'Android', y: 4 },
            ],
          },
        ],
      },
    },
  })

  return (
    <div>
      <div id="chart">
        <ReactApexChart
          options={state.options}
          series={state.series}
          type="donut"
          height={420}
        />
      </div>
    </div>
  )
}

export default ApexChart