<template>
  <div>
    <div id="chart">
      <apexchart
        type="donut"
        height="420"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// 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

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          data: [
            { x: 'Mobile', y: 55, drilldown: 'mobile' },
            { x: 'Desktop', y: 33, drilldown: 'desktop' },
            { x: 'Tablet', y: 12, drilldown: 'tablet' },
          ],
        },
      ],
      chartOptions: {
        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 },
              ],
            },
          ],
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 480px;
  margin: 35px auto;
}
</style>