diff --git a/website/scripts/explorer/mempool.js b/website/scripts/explorer/mempool.js index c4df67444..f21347cab 100644 --- a/website/scripts/explorer/mempool.js +++ b/website/scripts/explorer/mempool.js @@ -1,5 +1,6 @@ import { createCube } from "./cube.js"; import { formatFeeRate } from "./render.js"; +import { createSpan } from "../utils/dom.js"; const NUM_BLOCKS = 8; @@ -73,14 +74,12 @@ function updateMempoolCube(cube, block, position) { cube.leftFace.textContent = ""; const median = document.createElement("p"); - const tilde = document.createElement("span"); + const tilde = createSpan("~"); tilde.classList.add("dim"); - tilde.textContent = "~"; median.append(tilde, formatFeeRate(block.medianFee)); const range = document.createElement("p"); - const dash = document.createElement("span"); + const dash = createSpan("-"); dash.classList.add("dim"); - dash.textContent = "-"; range.append(formatFeeRate(block.feeRange[0]), dash, formatFeeRate(block.feeRange[6])); const unit = document.createElement("p"); unit.classList.add("dim"); diff --git a/website/scripts/options/full.js b/website/scripts/options/full.js index dca102ab3..7f81ab23e 100644 --- a/website/scripts/options/full.js +++ b/website/scripts/options/full.js @@ -1,5 +1,9 @@ import { createPartialOptions } from "./partial.js"; -import { createButtonElement, createAnchorElement } from "../utils/dom.js"; +import { + createAnchorElement, + createButtonElement, + createSmall, +} from "../utils/dom.js"; import { pushHistory, resetParams } from "../utils/url.js"; import { readStored, writeToStorage } from "../utils/storage.js"; import { stringToId } from "../utils/format.js"; @@ -395,9 +399,7 @@ export function initOptions() { details.append(summary); summary.append(node.name); - const count = window.document.createElement("small"); - count.textContent = `[${node.count.toLocaleString("en-us")}]`; - summary.append(count); + summary.append(createSmall(`[${node.count.toLocaleString("en-us")}]`)); let built = false; if (autoOpen && isOnSelectedPath(node.path)) { diff --git a/website/scripts/utils/chart/legend.js b/website/scripts/utils/chart/legend.js index 701cdfd93..012280113 100644 --- a/website/scripts/utils/chart/legend.js +++ b/website/scripts/utils/chart/legend.js @@ -1,4 +1,4 @@ -import { createLabeledInput, createSpanName } from "../dom.js"; +import { createLabeledInput, createSpan, createSpanName } from "../dom.js"; import { stringToId } from "../format.js"; /** @param {HTMLElement} el */ @@ -27,8 +27,7 @@ export function createLegend() { element.append(scroller); captureScroll(scroller); - const separator = window.document.createElement("span"); - separator.textContent = "|"; + const separator = createSpan("|"); captureScroll(separator); return { diff --git a/website/scripts/utils/dom.js b/website/scripts/utils/dom.js index 617fad2bc..dd0fe6701 100644 --- a/website/scripts/utils/dom.js +++ b/website/scripts/utils/dom.js @@ -41,6 +41,15 @@ export function createSpan(text) { return span; } +/** + * @param {string} text + */ +export function createSmall(text) { + const small = window.document.createElement("small"); + small.textContent = text; + return small; +} + /** * @param {string} name */ @@ -335,9 +344,7 @@ export function createSelect({ const remaining = choices.length - 1; if (remaining > 0) { - const small = window.document.createElement("small"); - small.textContent = `+${remaining}`; - element.append(small); + element.append(createSmall(`+${remaining}`)); element.append(createSpan("↓")); } diff --git a/website/src/heatmap/grid.js b/website/src/heatmap/grid.js index 31df46e18..ef6045678 100644 --- a/website/src/heatmap/grid.js +++ b/website/src/heatmap/grid.js @@ -113,7 +113,7 @@ export function createAverageGrid({ if (col < 0 || col >= cols || dates.length === 0) { return emptyRange(); } - const start = Math.floor((col * dates.length) / cols); + const start = Math.ceil((col * dates.length) / cols); const end = Math.floor(((col + 1) * dates.length - 1) / cols); return { start, end: clamp(end, start, dates.length - 1) }; }, diff --git a/website/src/heatmap/index.js b/website/src/heatmap/index.js index f8070fbdb..a9840e208 100644 --- a/website/src/heatmap/index.js +++ b/website/src/heatmap/index.js @@ -109,7 +109,10 @@ function loadRange() { let failed = 0; updateStatus(completed, currentDates.length, failed); - if (!missing.length) return; + if (!missing.length) { + abortController = undefined; + return; + } let cursor = 0; const workers = Array.from({ @@ -264,7 +267,7 @@ function createRangeControls() { onChange(choice) { fromChoice = choice; if (fromChoice.date > toChoice.date) { - toChoice = findMatchingChoice(toChoices, fromChoice); + toChoice = findSameLabelChoice(toChoices, fromChoice, toChoices[0]); toSelect.set(toChoice); } setRange(fromChoice.date, toChoice.date); @@ -280,7 +283,7 @@ function createRangeControls() { onChange(choice) { toChoice = choice; if (fromChoice.date > toChoice.date) { - fromChoice = findMatchingChoice(fromChoices, toChoice); + fromChoice = findSameLabelChoice(fromChoices, toChoice, fromChoices[0]); fromSelect.set(fromChoice); } setRange(fromChoice.date, toChoice.date); @@ -330,10 +333,11 @@ function rangeChoiceLabel(choice) { /** * @param {readonly RangeChoice[]} choices - * @param {RangeChoice} selected + * @param {RangeChoice} choice + * @param {RangeChoice} fallback */ -function findMatchingChoice(choices, selected) { - return choices.find((choice) => choice.label === selected.label) ?? choices[0]; +function findSameLabelChoice(choices, choice, fallback) { + return choices.find((candidate) => candidate.label === choice.label) ?? fallback; } /**