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

// Naming a palette is the whole feature. The class colours the map draws are the
// palette's anchor stops resampled in OkLab at render time, so a 5-class and a
// 9-class map of the same data stay perceptually consistent and midpoints never
// go muddy grey the way sRGB interpolation makes them.
const data = [
  { name: 'United States of America', value: 63 },
  { name: 'Canada', value: 41 },
  { name: 'Brazil', value: 72 },
  { name: 'Argentina', value: 38 },
  { name: 'United Kingdom', value: 84 },
  { name: 'France', value: 77 },
  { name: 'Germany', value: 69 },
  { name: 'Nigeria', value: 55 },
  { name: 'Egypt', value: 48 },
  { name: 'India', value: 66 },
  { name: 'China', value: 71 },
  { name: 'Japan', value: 80 },
  { name: 'Australia', value: 59 },
  { name: 'Russia', value: 44 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 300 },
  geo: { map: 'world/countries@110m' },
  series: [
    {
      name: 'Index',
      joinBy: 'name',
      // `palette` names any registered ramp (see ApexMaps.listPalettes()).
      // `classes` sets how many bands to resample it into, `reverse` flips it.
      data,
      scale: { type: 'quantile', classes: 5, palette: 'blues', reverse: false },
    },
  ],
})
map.render()