// Shared by the vanilla-js, React and Vue builds.
//
// One dataset, two partitions of it. The sunburst reads the hierarchy; the
// treemap reads the leaves, which are the level the two views have in common.
//
// Colour carries the identity across the switch: a team keeps its colour, so
// the tile you were looking at is the arc you end up looking at. Each branch
// owns a hue and its teams are progressively lighter shades of it.
var TREE = [
  {
    data: [
      {
        x: 'Engineering',
        y: 88,
        color: '#008FFB',
        children: [
          { x: 'Platform', y: 34, color: '#008FFB' },
          { x: 'Product', y: 30, color: '#29A1FC' },
          { x: 'Data', y: 24, color: '#52B3FC' },
        ],
      },
      {
        x: 'Design',
        y: 34,
        color: '#00E396',
        children: [
          { x: 'Research', y: 12, color: '#00E396' },
          { x: 'Brand', y: 10, color: '#29E7A7' },
          { x: 'Systems', y: 12, color: '#52ECB8' },
        ],
      },
      {
        x: 'Go to market',
        y: 52,
        color: '#FEB019',
        children: [
          { x: 'Sales', y: 26, color: '#FEB019' },
          { x: 'Marketing', y: 15, color: '#FEBD3E' },
          { x: 'Support', y: 11, color: '#FEC963' },
        ],
      },
    ],
  },
]

// The leaves, flattened: a treemap has no hierarchy, so it draws the level the
// two charts share. That is also the level the morph pairs up, tile for arc.
var LEAVES = [
  {
    data: TREE[0].data.reduce(function (acc, parent) {
      return acc.concat(
        parent.children.map(function (c) {
          return { x: c.x, y: c.y }
        }),
      )
    }, []),
  },
]

// A sunburst colours per node, so its colours travel with the data above. A
// treemap colours from the palette instead, one entry per tile once
// `distributed` is on, so hand it the same colours in the same order.
var LEAF_COLORS = TREE[0].data.reduce(function (acc, parent) {
  return acc.concat(
    parent.children.map(function (c) {
      return c.color
    }),
  )
}, [])

function wirePartitionToggle(chart) {
  var buttons = [].slice.call(document.querySelectorAll('[data-view]'))

  function apply(view) {
    buttons.forEach(function (b) {
      b.className = b.getAttribute('data-view') === view ? 'on' : ''
    })
    chart.updateOptions({
      chart: { type: view === 'sunburst' ? 'sunburst' : 'treemap' },
      series: view === 'sunburst' ? TREE : LEAVES,
    })
  }

  buttons.forEach(function (b) {
    b.addEventListener('click', function () {
      apply(b.getAttribute('data-view'))
    })
  })
}

var options = {
  series: LEAVES,
  chart: {
    id: 'partition',
    type: 'treemap',
    width: 700,
    height: 460,
    toolbar: {
      show: false,
    },
    animations: {
      enabled: true,
      chartTypeMorph: {
        enabled: true,
        speed: 900,
      },
    },
  },
  colors: LEAF_COLORS,
  legend: {
    show: false,
  },
  dataLabels: {
    enabled: true,
    style: {
      fontSize: '12px',
    },
  },
  plotOptions: {
    treemap: {
      // One palette entry per tile, taken straight from the data above, so a
      // tile and the arc it becomes are the same colour. Shading is off because
      // it would recolour tiles by value and break that pairing.
      distributed: true,
      enableShades: false,
    },
    sunburst: {
      innerSize: '22%',
      borderRadius: 2,
      spacing: 1,
    },
  },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

// TREE, LEAVES and wirePartitionToggle live in the shared head script.
wirePartitionToggle(chart)