Funnel in JavaScript

// Shared by the vanilla-js, React and Vue builds.
//
// Visitors at each step of a signup funnel (the wholes) and how many of them
// came from one device (the parts). Each stage keeps its full width, faded,
// with the device's share solid and centred inside it.
var STEPS = [
  'Visited',
  'Viewed pricing',
  'Started trial',
  'Activated',
  'Subscribed',
]
var VISITORS = [12400, 7300, 3900, 2100, 1200]
var DEVICES = {
  mobile: [7900, 3900, 1600, 700, 330],
  desktop: [4500, 3400, 2300, 1400, 870],
}

function seriesFor(device) {
  var s = { name: 'Visitors', data: VISITORS }
  if (device) s.highlightData = DEVICES[device]
  return [s]
}

function pickDevice(chart, device) {
  document.querySelectorAll('[data-device]').forEach(function (b) {
    b.classList.toggle('active', b.getAttribute('data-device') === device)
  })
  return chart.updateSeries(seriesFor(device))
}

function wireDevices(chart) {
  document.querySelectorAll('[data-device]').forEach(function (b) {
    b.addEventListener('click', function () {
      pickDevice(chart, b.getAttribute('data-device'))
    })
  })
}

var options = {
  series: seriesFor('mobile'),
  chart: {
    id: 'signup',
    type: 'funnel',
    height: 360,
    toolbar: { show: false },
  },
  colors: ['#0284c7'],
  plotOptions: {
    bar: { barHeight: '82%', borderRadius: 0 },
  },
  dataLabels: {
    enabled: true,
    formatter: function (v, opt) {
      return (
        opt.w.globals.labels[opt.dataPointIndex] + ': ' + v.toLocaleString()
      )
    },
  },
  xaxis: { categories: STEPS },
  legend: { show: false },
}

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

wireDevices(chart)