// CDN build: `ApexMaps` is a global (see index.html). With a bundler:
//   import ApexMaps from 'apexmaps'

// One dataset, four classifications. The scale `type` decides where the class
// breaks fall, which is the most consequential choice in a choropleth. Swap the
// type and the same numbers tell four different stories.
const data = [
  { name: 'United States of America', value: 420 },
  { name: 'China', value: 610 },
  { name: 'India', value: 180 },
  { name: 'Brazil', value: 95 },
  { name: 'Russia', value: 70 },
  { name: 'Germany', value: 44 },
  { name: 'France', value: 33 },
  { name: 'United Kingdom', value: 28 },
  { name: 'Japan', value: 22 },
  { name: 'Nigeria', value: 14 },
  { name: 'Egypt', value: 9 },
  { name: 'Australia', value: 6 },
  { name: 'Canada', value: 4 },
  { name: 'Argentina', value: 2 },
]

// The four classification methods, each into its own container. `quantile` gives
// equal counts per class, `jenks` minimises within-class variance, `equalInterval`
// splits the value range evenly, and `threshold` uses breaks you pick yourself.
const scales = {
  quantile: { type: 'quantile', classes: 5 },
  jenks: { type: 'jenks', classes: 5 },
  equal: { type: 'equalInterval', classes: 5 },
  threshold: { type: 'threshold', breaks: [5, 25, 100, 400], palette: 'reds' },
}

// Each map gets its own container, created here if the page has not already.
function slot(id) {
  let el = document.getElementById(id)
  if (!el) {
    el = document.createElement('div')
    el.id = id
    document.body.appendChild(el)
  }
  return el
}

for (const [id, scale] of Object.entries(scales)) {
  const map = new ApexMaps(slot(id), {
    chart: { height: 260 },
    geo: { map: 'world/countries@110m' },
    series: [{ name: 'Exposure', joinBy: 'name', data, scale }],
  })
  map.render()
}