Areas in JavaScript

// Shared by the vanilla-js, React and Vue builds.
//
// Visits per day to each section of a website (the wholes), and the visits
// one traffic source brought (the parts). Picking a source keeps every
// section on both charts: each area is drawn faded at its full size with its
// outline, and the source's visits are solid in front, from the same
// baseline. In the stacked chart the parts form their own stack.
var DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
var SECTIONS = ['Docs', 'Blog']
var VISITS = [
  [62, 70, 74, 68, 60, 34, 30],
  [28, 34, 40, 37, 42, 48, 44],
]
var SOURCES = {
  search: [
    [40, 44, 47, 42, 37, 20, 18],
    [12, 15, 18, 16, 18, 20, 19],
  ],
  social: [
    [6, 8, 9, 8, 7, 6, 5],
    [10, 12, 14, 14, 16, 21, 19],
  ],
}

function seriesFor(source) {
  return SECTIONS.map(function (name, i) {
    var s = { name: name, data: VISITS[i] }
    if (source) s.highlightData = SOURCES[source][i]
    return s
  })
}

// One call per chart and pick: the parts go in, each chart animates from what
// is on screen. Clearing is the same call without them.
function pickSource(source) {
  document.querySelectorAll('[data-source]').forEach(function (b) {
    b.classList.toggle('active', b.getAttribute('data-source') === source)
  })
  return Promise.all(
    ['visits', 'stacked-visits'].map(function (id) {
      return ApexCharts.getChartByID(id).updateSeries(seriesFor(source))
    }),
  )
}

function wireSources() {
  document.querySelectorAll('[data-source]').forEach(function (b) {
    b.addEventListener('click', function () {
      pickSource(b.getAttribute('data-source'))
    })
  })
}

var options = {
  series: seriesFor('search'),
  chart: {
    id: 'visits',
    type: 'area',
    height: 320,
    toolbar: { show: false },
  },
  colors: ['#0284c7', '#16a34a'],
  stroke: { curve: 'smooth', width: 2 },
  dataLabels: { enabled: false },
  xaxis: { categories: DAYS },
  yaxis: { title: { text: 'Visits (thousands)' } },
  legend: { position: 'bottom' },
  tooltip: { shared: true, intersect: false },
}

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

var options1 = {
  series: seriesFor('search'),
  chart: {
    id: 'stacked-visits',
    type: 'area',
    height: 320,
    stacked: true,
    toolbar: { show: false },
  },
  colors: ['#0284c7', '#16a34a'],
  stroke: { curve: 'straight', width: 2 },
  fill: { type: 'solid', opacity: 0.85 },
  dataLabels: { enabled: false },
  xaxis: { categories: DAYS },
  yaxis: { title: { text: 'Visits (thousands)' } },
  legend: { position: 'bottom' },
  tooltip: { shared: true, intersect: false },
}

var chart1 = new ApexCharts(document.querySelector('#chart2'), options1)
chart1.render()

wireSources()