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

// Each geometry pack in the registry states its own recommended join field,
// so "CA" and "DE-BY" just join with no configuration. Point `geo.map` at a
// pack id, key your data the way that pack is keyed, and render.
const packs = [
  {
    el: 'us',
    map: 'us',
    joinField: 'abbr', // USPS abbreviations
    palette: 'blues',
    data: [
      { key: 'CA', value: 88 },
      { key: 'TX', value: 71 },
      { key: 'NY', value: 64 },
      { key: 'FL', value: 59 },
      { key: 'WA', value: 47 },
      { key: 'IL', value: 42 },
      { key: 'MA', value: 38 },
      { key: 'CO', value: 33 },
    ],
  },
  {
    el: 'de',
    map: 'de',
    joinField: 'iso_3166_2', // ISO 3166-2 codes
    palette: 'greens',
    data: [
      { key: 'DE-BY', value: 74 },
      { key: 'DE-BE', value: 61 },
      { key: 'DE-NW', value: 55 },
      { key: 'DE-HH', value: 48 },
      { key: 'DE-SN', value: 36 },
      { key: 'DE-HE', value: 29 },
    ],
  },
  {
    el: 'eu',
    map: 'eu/regions',
    joinField: 'nuts_id', // NUTS level-1 codes
    palette: 'oranges',
    data: [
      { key: 'FR1', value: 81 },
      { key: 'DE1', value: 67 },
      { key: 'ES3', value: 52 },
      { key: 'ITC', value: 44 },
      { key: 'PL9', value: 31 },
      { key: 'NL3', value: 22 },
    ],
  },
]

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

packs.forEach(({ el, map, joinField, palette, data }) => {
  new ApexMaps(slot(el), {
    chart: { height: 240 },
    legend: { show: false },
    geo: { map },
    series: [{ name: 'Adoption', data, joinBy: [joinField, 'key'], scale: { palette, classes: 4 } }],
  }).render()
})

// The catalogue: every pack knows its level, join field, source and licence.
console.log(
  ApexMaps.catalogue()
    .map((p) => `${p.id.padEnd(22)} ${p.levelName.padEnd(30)} ${(p.keyField ?? '-').padEnd(12)} ${p.license}`)
    .join('\n'),
)