Rank character frequency separately from words (#5)

Also give a message when no stats are available.

public/js/modules/coverage-graph.js

@@ -1,6 +1,8 @@
 import { map, curveLinear, range, axisBottom, axisLeft, extent, line as d3line, max, create, scaleLinear, scaleSequential } from "d3";
 import { getActiveGraph } from "./options";
 
+const characterRanks = [250,500,1000,1500,2000,Number.MAX_SAFE_INTEGER];
+
 function findCoverage(percentages, rank) {
     let min = 0;
     let max = percentages.length - 1;
@@ -66,8 +68,9 @@ function getFrequencyLevel(rank, ranks) {
 function renderExplanation(term, coverage, type, rank, container) {
     let rankContainer = document.createElement('p');
     rankContainer.classList.add('coverage-explanation');
-    // TODO: ensure ranks is actually present, and possibly remove it as a concept of the datasets
-    const ranks = getActiveGraph().ranks;
+    // TODO: ensure ranks is actually present on each graph, and remove it as a concept of the datasets
+    // TODO: constant for types, tune `characterRanks`.
+    const ranks = type === 'character' ? characterRanks : getActiveGraph().ranks;
     const frequencyClass = ranks ? `freq${getFrequencyLevel(rank, ranks)}` : '';
     // `innerHTML` should be safe since `term` is known to be in `wordSet` and is therefore allowlisted, and the other variables are similarly in our control.
     rankContainer.innerHTML = `<span class="emphasized-target">${term}</span> is the <span class="emphasized ${frequencyClass}">${rank}${getOrderingSuffix(rank)}</span> most common ${type}.`;

public/js/modules/explore.js

@@ -323,24 +323,31 @@ let renderStats = function (word, container) {
     let wordFreqHeader = document.createElement('h3');
     wordFreqHeader.classList.add('explore-stat-header');
     wordFreqHeader.innerText = 'Word Frequency Stats';
+    let renderedWordFreq = false;
     if (coverageGraph && ('words' in coverageGraph) && (word in wordSet)) {
         container.appendChild(wordFreqHeader);
         renderCoverageGraph(coverageGraph['words'], word, wordSet[word], 'word', container);
+        renderedWordFreq = true;
     }
     let charFreqHeader = document.createElement('h3');
     charFreqHeader.classList.add('explore-stat-header');
     charFreqHeader.innerText = 'Character Frequency Stats';
     container.appendChild(charFreqHeader);
-    let rendered = false;
+    let renderedCharacterFreq = false;
     for (const character of word) {
         if (charFreqs && (character in charFreqs) && coverageGraph && ('chars' in coverageGraph)) {
             renderCoverageGraph(coverageGraph['chars'], character, charFreqs[character], 'character', container);
-            rendered = true;
+            renderedCharacterFreq = true;
         }
     }
-    if (!rendered) {
+    if (!renderedCharacterFreq) {
         charFreqHeader.style.display = 'none';
     }
+    if (!renderedWordFreq && !renderedCharacterFreq) {
+        let unavailableMessage = document.createElement('p');
+        unavailableMessage.innerText = 'Sorry, no stats found.';
+        container.appendChild(unavailableMessage);
+    }
     //TODO(refactor): render the coverage stats, if available
     // if not available, still render the "word ranks X, characters rank Y"
 };