Areas in React

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

import 'apexcharts/features/highlight-filter'

// 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'))
    })
  })
}

const ApexChart = () => {
  const [state, setState] = React.useState({
    series: seriesFor('search'),
    options: {
      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 },
    },
    series1: seriesFor('search'),
    options1: {
      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 },
    },
  })

  React.useEffect(() => {
    // The react-apexcharts wrapper owns the render, so reach the live instances
    // by their chart.id. (seriesFor / pickSource live in the shared head script.)
    const timer = window.setInterval(() => {
      if (
        !ApexCharts.getChartByID('visits') ||
        !ApexCharts.getChartByID('stacked-visits')
      )
        return
      window.clearInterval(timer)
      wireSources()
    }, 50)
    return () => window.clearInterval(timer)
  }, [])

  return (
    <div>
      <div className="wrap">
        <h1>Highlight a part of every area</h1>
        <p>
          Pick a traffic source. Each section's visits stay on the chart, faded
          with an outline, and the visits that source brought are drawn solid in
          front from the same baseline. In the stacked chart below, the source's
          visits form their own stack.
        </p>
        <div className="actions">
          <span>Source</span>
          <button data-source="search" className="active">
            Search
          </button>
          <button data-source="social">Social</button>
          <button data-source="">All (clear)</button>
        </div>
        <div className="chart-wrap">
          <div id="chart">
            <ReactApexChart
              options={state.options}
              series={state.series}
              type="area"
              height={320}
            />
          </div>
        </div>
        <div className="chart-wrap">
          <div id="chart2">
            <ReactApexChart
              options={state.options1}
              series={state.series1}
              type="area"
              height={320}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ApexChart