diff --git a/public/app.js b/public/app.js index 75ab9f1..0d3d1a3 100644 --- a/public/app.js +++ b/public/app.js @@ -342,8 +342,50 @@ return [results, checklist] } + function makePieChart (value) { + const $container = new DocumentFragment() + const $chart = document.createElement('span') + $chart.setAttribute('style', ` + width: 1.5em; + height: 1.5em; + border-radius: 100%; + display: inline-block; + vertical-align: bottom; + background: conic-gradient(black 0%, black 0% ${value * 100}%, #989d89 ${value * 100}% 100%); + `.trim().replace(/\s+/g, ' ')) + $container.append($chart, ` ${(value * 100).toFixed()}%`) + return $container + } + async function openCoverageDialog (result, checklist) { - const missing = checklist.filter(taxon => !DATA.gbif[taxon.name] || !DATA.gbif[taxon.name].some(id => id.startsWith(result._resource.id))) + const matching = [] + const missing = [] + + for (const taxon of checklist) { + const matched = DATA.gbif[taxon.name] && DATA.gbif[taxon.name].some(id => id.startsWith(result._resource.id)) + if (matched) { + matching.push(taxon) + } else { + missing.push(taxon) + } + } + + document.getElementById('species_count').textContent = (result.species_ratio * checklist.length).toFixed(0) + document.getElementById('species_total').textContent = checklist.length + document.getElementById('species_ratio').replaceChildren(makePieChart(result.species_ratio)) + document.getElementById('observation_ratio').replaceChildren(makePieChart(result.observation_ratio)) + + const $matching = document.getElementById('matching_taxa') + empty($matching) + + for (const taxon of matching) { + const $taxon = document.createElement('li') + const $taxonLink = document.createElement('a') + $taxonLink.setAttribute('href', `https://gbif.org/species/${taxon.name}`) + $taxonLink.textContent = taxon.displayName || taxon.name + $taxon.appendChild($taxonLink) + $matching.appendChild($taxon) + } const $missing = document.getElementById('missing_taxa') empty($missing) @@ -357,7 +399,8 @@ $missing.appendChild($taxon) } - $missing.closest('dialog').showModal() + const $dialog = $missing.closest('dialog') + $dialog.showModal() } const DATA = {} @@ -546,19 +589,8 @@ // COLUMN 3 const $coverageColumn = document.createElement('div') if (!isNaN(result.species_ratio)) { - const value = result.species_ratio const $coverage = document.createElement('div') - const span = document.createElement('span') - span.setAttribute('style', ` - width: 1.5em; - height: 1.5em; - border-radius: 100%; - display: inline-block; - vertical-align: bottom; - background: conic-gradient(black 0%, black 0% ${value * 100}%, #989d89 ${value * 100}% 100%); - `.trim().replace(/\s+/g, ' ')) - $coverage.appendChild(span) - $coverage.append(` ${(value * 100).toFixed()}%`) + $coverage.appendChild(makePieChart(result.species_ratio)) $coverage.addEventListener('click', event => { event.stopPropagation() openCoverageDialog(result, checklist) diff --git a/public/index.html b/public/index.html index 27f07fb..ef11da0 100644 --- a/public/index.html +++ b/public/index.html @@ -87,10 +87,27 @@

Find identification resources

-

Missing taxa

- -
    -
+

Taxonomic coverage

+ +

+ This resource includes of the expected species, + meaning . +

+

Scaled by observations, this covers of observations.

+ +
+ Matching taxa +
    +
+
+ +
+ Missing taxa +
    +
+
+ +
diff --git a/public/main.css b/public/main.css index 40e9495..abfbdfe 100644 --- a/public/main.css +++ b/public/main.css @@ -30,6 +30,11 @@ body > main > * { max-width: none; } +details > * { + max-height: 14em; + overflow: auto; +} + @media screen and (max-width: 1058px) { body > main { grid-template-rows: auto auto auto;