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

// Six rows against Natural Earth country names. Three use the spellings real
// datasets publish ("Ivory Coast", "United States", the long-form Congo name)
// and they fail to join. Instead of drawing them grey in silence, ApexMaps
// can tell you exactly which rows missed and why.
const messyData = [
  { name: 'France', value: 62 },
  { name: 'Brazil', value: 41 },
  { name: 'Japan', value: 77 },
  { name: 'Ivory Coast', value: 33 },
  { name: 'United States', value: 88 },
  { name: 'Democratic Republic of the Congo', value: 21 },
]

const map = new ApexMaps(document.getElementById('map'), {
  chart: { height: 320 },
  geo: { map: 'world/countries@110m' },
  legend: { show: false },
  // Matching is exact by default: only three of six rows join.
  series: [{ name: 'Coverage', joinBy: 'name', data: messyData, scale: { classes: 3 } }],
})

map.render().then(() => {
  // A readable report of matched rows, unmatched rows and unmatched features.
  // The same thing prints to the console automatically in dev mode.
  console.log(map.diagnoseJoin().report())

  // `fuzzyJoin: true` applies normalisation, a curated alias table and edit
  // distance, logging every substitution it makes. Opt in when you want it.
  map.updateSeries([
    { name: 'Coverage', joinBy: 'name', fuzzyJoin: true, data: messyData, scale: { classes: 3 } },
  ])
  console.log(map.diagnoseJoin().report())
})