diff --git a/website_next/index.html b/website_next/index.html
index d7fd7b309..bdade82db 100644
--- a/website_next/index.html
+++ b/website_next/index.html
@@ -100,6 +100,9 @@
+
+
+
diff --git a/website_next/learn/charts/bar/index.js b/website_next/learn/charts/bar/index.js
index a84a7abf3..a6f60d1ec 100644
--- a/website_next/learn/charts/bar/index.js
+++ b/website_next/learn/charts/bar/index.js
@@ -1,16 +1,8 @@
import { createLinePathData, formatCoordinate } from "../path.js";
-import { createSvgElement } from "../svg.js";
import { VIEWBOX_WIDTH } from "../viewbox.js";
import { createStackedSeries } from "../stacked/series.js";
-
-/**
- * @param {number} value
- * @param {number} min
- * @param {number} max
- */
-function clamp(value, min, max) {
- return Math.min(Math.max(value, min), max);
-}
+import { clamp } from "../math.js";
+import { appendSeriesPath } from "../series-path.js";
/** @param {{ x: number, y0: number, y1: number }[]} points */
function getBarWidth(points) {
@@ -63,26 +55,26 @@ export function renderBarPlot(
for (const index of stackIndexes) {
const { color, points } = plottedSeries[index];
- const path = createSvgElement("path");
-
- path.dataset.chart = "bar";
- path.dataset.series = index.toString();
- path.style.setProperty("--color", color);
- path.setAttribute("d", createBarPathData(points, getBarWidth(points)));
- highlight.addNode(path, index);
- group.append(path);
+ appendSeriesPath({
+ group,
+ highlight,
+ index,
+ chart: "bar",
+ color,
+ d: createBarPathData(points, getBarWidth(points)),
+ });
}
for (const index of lineIndexes) {
const { color, points } = plottedSeries[index];
- const path = createSvgElement("path");
-
- path.dataset.chart = "line";
- path.dataset.series = index.toString();
- path.style.setProperty("--color", color);
- path.setAttribute("d", createLinePathData(points));
- highlight.addNode(path, index);
- group.append(path);
+ appendSeriesPath({
+ group,
+ highlight,
+ index,
+ chart: "line",
+ color,
+ d: createLinePathData(points),
+ });
}
return plottedSeries;
diff --git a/website_next/learn/charts/controls/style.css b/website_next/learn/charts/controls/style.css
new file mode 100644
index 000000000..d4f54afe4
--- /dev/null
+++ b/website_next/learn/charts/controls/style.css
@@ -0,0 +1,102 @@
+main.learn {
+ figure[data-chart="series"] {
+ > footer {
+ > div {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.125rem 0.5rem;
+ }
+
+ fieldset {
+ display: flex;
+ gap: 0.25rem;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ text-transform: uppercase;
+
+ legend {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+ }
+
+ label {
+ position: relative;
+ display: block;
+ cursor: pointer;
+ }
+
+ input {
+ position: absolute;
+ inset: 0;
+ margin: 0;
+ opacity: 0;
+ cursor: pointer;
+ }
+
+ span {
+ display: block;
+ padding: 0.25rem;
+ border-radius: 0.25rem;
+ color: var(--gray);
+ }
+
+ label:hover span {
+ color: var(--black);
+ background: var(--white);
+ }
+
+ label:has(:checked):not(:hover) span {
+ color: var(--black);
+ background: var(--gray);
+ }
+
+ label:active span {
+ color: var(--black);
+ background: var(--orange);
+ }
+
+ label:has(:focus-visible) span {
+ outline: 1px solid var(--orange);
+ outline-offset: 0.125rem;
+ }
+ }
+
+ button[data-chart="fullscreen"] {
+ padding: 0.25rem;
+ border: 0;
+ border-radius: 0.25rem;
+ color: var(--gray);
+ background: none;
+ font: inherit;
+ line-height: inherit;
+ text-transform: uppercase;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--black);
+ background: var(--white);
+ }
+
+ &[aria-pressed="true"] {
+ color: var(--black);
+ background: var(--green);
+ }
+
+ &:active {
+ color: var(--black);
+ background: var(--orange);
+ }
+
+ &:focus-visible {
+ outline: 1px solid var(--orange);
+ outline-offset: 0.125rem;
+ }
+ }
+ }
+ }
+}
diff --git a/website_next/learn/charts/dots/index.js b/website_next/learn/charts/dots/index.js
index 461966097..1ce93f633 100644
--- a/website_next/learn/charts/dots/index.js
+++ b/website_next/learn/charts/dots/index.js
@@ -1,5 +1,5 @@
import { formatCoordinate } from "../path.js";
-import { createSvgElement } from "../svg.js";
+import { appendSeriesPath } from "../series-path.js";
import { createLineSeries } from "../line/series.js";
const radius = 1;
@@ -27,14 +27,14 @@ export function renderDotsPlot(group, loadedSeries, height, highlight, scale) {
const plottedSeries = createLineSeries(loadedSeries, height, scale);
plottedSeries.forEach(({ color, points }, index) => {
- const path = createSvgElement("path");
-
- path.dataset.chart = "dots";
- path.dataset.series = index.toString();
- path.style.setProperty("--color", color);
- path.setAttribute("d", createDotsPathData(points));
- highlight.addNode(path, index);
- group.append(path);
+ appendSeriesPath({
+ group,
+ highlight,
+ index,
+ chart: "dots",
+ color,
+ d: createDotsPathData(points),
+ });
});
return plottedSeries;
diff --git a/website_next/learn/charts/index.js b/website_next/learn/charts/index.js
index b22a11f19..d165b5bbf 100644
--- a/website_next/learn/charts/index.js
+++ b/website_next/learn/charts/index.js
@@ -1,6 +1,6 @@
import { createFullscreenButton } from "./fullscreen.js";
import { onChartVisibility } from "./intersection.js";
-import { createLegend } from "./legend.js";
+import { createLegend } from "./legend/index.js";
import { createChartRenderer } from "./renderer.js";
import {
createScaleControl,
diff --git a/website_next/learn/charts/legend.js b/website_next/learn/charts/legend/index.js
similarity index 96%
rename from website_next/learn/charts/legend.js
rename to website_next/learn/charts/legend/index.js
index cc5380d85..0867acf59 100644
--- a/website_next/learn/charts/legend.js
+++ b/website_next/learn/charts/legend/index.js
@@ -47,4 +47,4 @@ export function createLegend(chart) {
* @property {{ value: HTMLOutputElement }[]} rows
*/
-/** @typedef {import("./index.js").Chart} Chart */
+/** @typedef {import("../index.js").Chart} Chart */
diff --git a/website_next/learn/charts/legend/style.css b/website_next/learn/charts/legend/style.css
new file mode 100644
index 000000000..8968cfb6d
--- /dev/null
+++ b/website_next/learn/charts/legend/style.css
@@ -0,0 +1,114 @@
+main.learn {
+ figure[data-chart="series"] {
+ figcaption {
+ text-transform: uppercase;
+
+ header {
+ display: flex;
+ align-items: start;
+ justify-content: space-between;
+ gap: 1rem;
+ }
+
+ time {
+ color: var(--off-color);
+ }
+
+ span:is([data-chart="unit"], [data-chart="separator"]) {
+ color: var(--off-color);
+ }
+
+ menu {
+ --shadow-size: 1rem;
+
+ display: flex;
+ margin-inline: calc(-1 * var(--shadow-size));
+ padding: 0 var(--shadow-size);
+ padding-bottom: 1rem;
+ padding-top: 0.25rem;
+ overflow-x: auto;
+ list-style: none;
+ mask-image: linear-gradient(
+ to right,
+ transparent,
+ black var(--shadow-size),
+ black calc(100% - var(--shadow-size)),
+ transparent
+ );
+ }
+
+ li {
+ flex: 0 0 auto;
+ }
+
+ button {
+ padding: 0.25rem 0.375rem;
+ border: 0;
+ border-radius: 0.25rem;
+ color: inherit;
+ background: none;
+ font: inherit;
+ text-align: inherit;
+ text-transform: inherit;
+ cursor: pointer;
+
+ &:is(:hover, :focus-visible, [data-active], [data-preview]) {
+ color: var(--black);
+ background: var(--color);
+
+ span,
+ output {
+ color: inherit;
+ }
+ }
+
+ &:focus-visible {
+ outline: 1px solid var(--orange);
+ outline-offset: 0.125rem;
+ }
+
+ &[data-muted] {
+ opacity: 0.35;
+ }
+
+ > span {
+ display: block;
+ color: var(--color);
+ text-align: left;
+
+ &::before {
+ content: "";
+ display: inline-block;
+ width: 0.5em;
+ height: 0.5em;
+ margin-right: 0.35em;
+ margin-bottom: 0.1rem;
+ border-radius: 50%;
+ background: currentColor;
+ }
+ }
+
+ > output {
+ display: block;
+ margin-top: 0.25rem;
+ margin-left: auto;
+ width: 7ch;
+ min-height: 1em;
+ color: var(--white);
+ font-variant-numeric: tabular-nums;
+ text-align: right;
+ }
+ }
+ }
+
+ &:fullscreen {
+ figcaption menu {
+ padding-bottom: 0.5rem;
+ }
+ }
+
+ svg [data-series][data-muted] {
+ opacity: 0.2;
+ }
+ }
+}
diff --git a/website_next/learn/charts/line/index.js b/website_next/learn/charts/line/index.js
index 2148a16bc..4b0f9b198 100644
--- a/website_next/learn/charts/line/index.js
+++ b/website_next/learn/charts/line/index.js
@@ -1,5 +1,5 @@
import { createLinePathData } from "../path.js";
-import { createSvgElement } from "../svg.js";
+import { appendSeriesPath } from "../series-path.js";
import { createLineSeries } from "./series.js";
/**
@@ -13,14 +13,14 @@ export function renderLinePlot(group, loadedSeries, height, highlight, scale) {
const plottedSeries = createLineSeries(loadedSeries, height, scale);
plottedSeries.forEach(({ color, points }, index) => {
- const path = createSvgElement("path");
-
- path.dataset.chart = "line";
- path.dataset.series = index.toString();
- path.style.setProperty("--color", color);
- path.setAttribute("d", createLinePathData(points));
- highlight.addNode(path, index);
- group.append(path);
+ appendSeriesPath({
+ group,
+ highlight,
+ index,
+ chart: "line",
+ color,
+ d: createLinePathData(points),
+ });
});
return plottedSeries;
diff --git a/website_next/learn/charts/math.js b/website_next/learn/charts/math.js
new file mode 100644
index 000000000..b91c2a278
--- /dev/null
+++ b/website_next/learn/charts/math.js
@@ -0,0 +1,8 @@
+/**
+ * @param {number} value
+ * @param {number} min
+ * @param {number} max
+ */
+export function clamp(value, min, max) {
+ return Math.min(Math.max(value, min), max);
+}
diff --git a/website_next/learn/charts/plot.js b/website_next/learn/charts/plot.js
new file mode 100644
index 000000000..9a33a2fdc
--- /dev/null
+++ b/website_next/learn/charts/plot.js
@@ -0,0 +1,45 @@
+import { renderBarPlot } from "./bar/index.js";
+import { renderDotsPlot } from "./dots/index.js";
+import { renderLinePlot } from "./line/index.js";
+import { renderStackedPlot } from "./stacked/index.js";
+
+/**
+ * @param {ChartView} view
+ * @param {SVGGElement} group
+ * @param {LoadedSeries[]} loadedSeries
+ * @param {number} height
+ * @param {SeriesHighlight} highlight
+ * @param {ChartScale} scale
+ */
+export function renderPlot(view, group, loadedSeries, height, highlight, scale) {
+ switch (view) {
+ case "line":
+ return renderLinePlot(group, loadedSeries, height, highlight, scale);
+ case "bar":
+ case "bar-reversed":
+ return renderBarPlot(
+ group,
+ loadedSeries,
+ height,
+ highlight,
+ { reversed: view === "bar-reversed" },
+ scale,
+ );
+ case "dots":
+ return renderDotsPlot(group, loadedSeries, height, highlight, scale);
+ default:
+ return renderStackedPlot(
+ group,
+ loadedSeries,
+ height,
+ highlight,
+ { reversed: view === "stacked-reversed" },
+ scale,
+ );
+ }
+}
+
+/** @typedef {import("./highlight.js").SeriesHighlight} SeriesHighlight */
+/** @typedef {import("./index.js").LoadedSeries} LoadedSeries */
+/** @typedef {import("./scale.js").ChartScale} ChartScale */
+/** @typedef {import("./views.js").ChartView} ChartView */
diff --git a/website_next/learn/charts/renderer.js b/website_next/learn/charts/renderer.js
index 9bb68f71f..bbd1437d0 100644
--- a/website_next/learn/charts/renderer.js
+++ b/website_next/learn/charts/renderer.js
@@ -1,49 +1,10 @@
-import { renderBarPlot } from "./bar/index.js";
import { createSeriesHighlight } from "./highlight.js";
import { createSeriesLoader } from "./loader.js";
-import { renderLinePlot } from "./line/index.js";
-import { createScrubber } from "./scrubber.js";
-import { renderDotsPlot } from "./dots/index.js";
+import { renderPlot } from "./plot.js";
+import { createScrubber } from "./scrubber/index.js";
import { createSvgElement } from "./svg.js";
-import { renderStackedPlot } from "./stacked/index.js";
import { getViewBoxHeight, VIEWBOX_WIDTH } from "./viewbox.js";
-/**
- * @param {ChartView} view
- * @param {SVGGElement} group
- * @param {LoadedSeries[]} loadedSeries
- * @param {number} height
- * @param {SeriesHighlight} highlight
- * @param {ChartScale} scale
- */
-function renderPlot(view, group, loadedSeries, height, highlight, scale) {
- switch (view) {
- case "line":
- return renderLinePlot(group, loadedSeries, height, highlight, scale);
- case "bar":
- case "bar-reversed":
- return renderBarPlot(
- group,
- loadedSeries,
- height,
- highlight,
- { reversed: view === "bar-reversed" },
- scale,
- );
- case "dots":
- return renderDotsPlot(group, loadedSeries, height, highlight, scale);
- default:
- return renderStackedPlot(
- group,
- loadedSeries,
- height,
- highlight,
- { reversed: view === "stacked-reversed" },
- scale,
- );
- }
-}
-
/**
* @param {Object} args
* @param {SVGSVGElement} args.svg
@@ -80,6 +41,16 @@ export function createChartRenderer({
svg.append(group);
+ function clearStatus() {
+ status.textContent = "";
+ svg.removeAttribute("aria-busy");
+ }
+
+ /** @param {string} message */
+ function setStatus(message) {
+ status.textContent = message;
+ }
+
function renderCurrent() {
if (!active || !loadedSeries.length) return;
@@ -105,9 +76,10 @@ export function createChartRenderer({
async function loadCurrent() {
const id = (loadId += 1);
const loadingTimer = setTimeout(() => {
- if (id === loadId && active) status.textContent = "Loading";
+ if (id === loadId && active) setStatus("Loading");
}, 250);
+ setStatus("");
svg.setAttribute("aria-busy", "true");
try {
@@ -117,11 +89,11 @@ export function createChartRenderer({
loadedSeries = nextSeries;
renderCurrent();
- status.textContent = "";
+ clearStatus();
} catch (error) {
if (id !== loadId) return;
console.error(error);
- status.textContent = "Chart unavailable";
+ setStatus("Chart unavailable");
} finally {
clearTimeout(loadingTimer);
if (id === loadId) svg.removeAttribute("aria-busy");
@@ -146,8 +118,7 @@ export function createChartRenderer({
group.replaceChildren();
highlight.clearNodes();
scrubber?.clear();
- status.textContent = "";
- svg.removeAttribute("aria-busy");
+ clearStatus();
}
return {
@@ -160,7 +131,7 @@ export function createChartRenderer({
/** @typedef {import("./index.js").Chart} Chart */
/** @typedef {import("./index.js").LoadedSeries} LoadedSeries */
-/** @typedef {import("./legend.js").Readout} Readout */
+/** @typedef {import("./legend/index.js").Readout} Readout */
/** @typedef {import("./scale.js").ChartScale} ChartScale */
/** @typedef {import("./timeframes.js").TimeframeValue} TimeframeValue */
/** @typedef {import("./views.js").ChartView} ChartView */
diff --git a/website_next/learn/charts/scale.js b/website_next/learn/charts/scale.js
index c44308088..5d249eaaa 100644
--- a/website_next/learn/charts/scale.js
+++ b/website_next/learn/charts/scale.js
@@ -1,21 +1,23 @@
-import { createRadioGroup } from "./radio.js";
-import { createChartStorage } from "./storage.js";
+import { createChartSetting } from "./setting.js";
-const storage = createChartStorage("scale");
-const defaultScale = "linear";
const scales = /** @type {const} */ ([
{ value: "linear", label: "Lin" },
{ value: "log", label: "Log" },
]);
+const defaultScale = "linear";
+const setting = createChartSetting({
+ storageKey: "scale",
+ legend: "Scale",
+ options: scales,
+ defaultValue: defaultScale,
+});
/**
* @param {string} chartKey
* @param {ChartScale} [fallback]
*/
export function getDefaultScale(chartKey, fallback = defaultScale) {
- const value = storage.get(chartKey);
-
- return scales.find((scale) => scale.value === value)?.value ?? fallback;
+ return setting.get(chartKey, fallback);
}
/**
@@ -23,7 +25,7 @@ export function getDefaultScale(chartKey, fallback = defaultScale) {
* @param {ChartScale} scale
*/
export function saveScale(chartKey, scale) {
- storage.set(chartKey, scale);
+ setting.save(chartKey, scale);
}
/**
@@ -31,12 +33,7 @@ export function saveScale(chartKey, scale) {
* @param {(scale: ChartScale) => void} onChange
*/
export function createScaleControl(currentScale, onChange) {
- return createRadioGroup({
- legend: "Scale",
- options: scales,
- currentValue: currentScale,
- onChange,
- });
+ return setting.create(currentScale, onChange);
}
/**
diff --git a/website_next/learn/charts/scrubber.js b/website_next/learn/charts/scrubber/index.js
similarity index 91%
rename from website_next/learn/charts/scrubber.js
rename to website_next/learn/charts/scrubber/index.js
index 501273ada..1967e08a5 100644
--- a/website_next/learn/charts/scrubber.js
+++ b/website_next/learn/charts/scrubber/index.js
@@ -1,9 +1,10 @@
-import { formatValue } from "./format.js";
-import { createSvgElement } from "./svg.js";
-import { VIEWBOX_WIDTH } from "./viewbox.js";
+import { formatValue } from "../format.js";
+import { clamp } from "../math.js";
+import { createSvgElement } from "../svg.js";
+import { VIEWBOX_WIDTH } from "../viewbox.js";
-/** @typedef {import("./highlight.js").SeriesHighlight} SeriesHighlight */
-/** @typedef {import("./legend.js").Readout} Readout */
+/** @typedef {import("../highlight.js").SeriesHighlight} SeriesHighlight */
+/** @typedef {import("../legend/index.js").Readout} Readout */
const dateFormat = new Intl.DateTimeFormat("en-US", {
day: "2-digit",
@@ -11,15 +12,6 @@ const dateFormat = new Intl.DateTimeFormat("en-US", {
year: "numeric",
});
-/**
- * @param {number} value
- * @param {number} min
- * @param {number} max
- */
-function clamp(value, min, max) {
- return Math.min(Math.max(value, min), max);
-}
-
/**
* @param {ScrubberSeries} series
* @param {number} ratio
diff --git a/website_next/learn/charts/scrubber/style.css b/website_next/learn/charts/scrubber/style.css
new file mode 100644
index 000000000..62cb6bdbb
--- /dev/null
+++ b/website_next/learn/charts/scrubber/style.css
@@ -0,0 +1,25 @@
+main.learn {
+ figure[data-chart="series"] {
+ [data-scrubber] {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ svg[data-scrubbing="true"] [data-scrubber] {
+ opacity: 1;
+ }
+
+ [data-scrubber="guide"] {
+ stroke: var(--white);
+ stroke-dasharray: 2 4;
+ vector-effect: non-scaling-stroke;
+ }
+
+ [data-scrubber="marker"] {
+ fill: var(--black);
+ stroke: var(--color, var(--orange));
+ stroke-width: 1.5;
+ vector-effect: non-scaling-stroke;
+ }
+ }
+}
diff --git a/website_next/learn/charts/series-path.js b/website_next/learn/charts/series-path.js
new file mode 100644
index 000000000..2512fc1eb
--- /dev/null
+++ b/website_next/learn/charts/series-path.js
@@ -0,0 +1,25 @@
+import { createSvgElement } from "./svg.js";
+
+/**
+ * @param {Object} args
+ * @param {SVGGElement} args.group
+ * @param {SeriesHighlight} args.highlight
+ * @param {number} args.index
+ * @param {string} args.chart
+ * @param {string} args.color
+ * @param {string} args.d
+ */
+export function appendSeriesPath(args) {
+ const path = createSvgElement("path");
+
+ path.dataset.chart = args.chart;
+ path.dataset.series = args.index.toString();
+ path.style.setProperty("--color", args.color);
+ path.setAttribute("d", args.d);
+ args.highlight.addNode(path, args.index);
+ args.group.append(path);
+
+ return path;
+}
+
+/** @typedef {import("./highlight.js").SeriesHighlight} SeriesHighlight */
diff --git a/website_next/learn/charts/setting.js b/website_next/learn/charts/setting.js
new file mode 100644
index 000000000..faae9ec9c
--- /dev/null
+++ b/website_next/learn/charts/setting.js
@@ -0,0 +1,50 @@
+import { createRadioGroup } from "./radio.js";
+import { createChartStorage } from "./storage.js";
+
+/**
+ * @template {string} T
+ * @param {Object} config
+ * @param {string} config.storageKey
+ * @param {string} config.legend
+ * @param {readonly { value: T, label: string }[]} config.options
+ * @param {T} config.defaultValue
+ */
+export function createChartSetting(config) {
+ const storage = createChartStorage(config.storageKey);
+
+ return {
+ /**
+ * @param {string} chartKey
+ * @param {T} [fallback]
+ */
+ get(chartKey, fallback = config.defaultValue) {
+ const value = storage.get(chartKey);
+
+ return (
+ config.options.find((option) => option.value === value)?.value ??
+ fallback
+ );
+ },
+
+ /**
+ * @param {string} chartKey
+ * @param {T} value
+ */
+ save(chartKey, value) {
+ storage.set(chartKey, value);
+ },
+
+ /**
+ * @param {T} currentValue
+ * @param {(value: T) => void} onChange
+ */
+ create(currentValue, onChange) {
+ return createRadioGroup({
+ legend: config.legend,
+ options: config.options,
+ currentValue,
+ onChange,
+ });
+ },
+ };
+}
diff --git a/website_next/learn/charts/stacked/index.js b/website_next/learn/charts/stacked/index.js
index a847a36ac..374b551e1 100644
--- a/website_next/learn/charts/stacked/index.js
+++ b/website_next/learn/charts/stacked/index.js
@@ -1,5 +1,5 @@
import { createAreaPathData, createLinePathData } from "../path.js";
-import { createSvgElement } from "../svg.js";
+import { appendSeriesPath } from "../series-path.js";
import { createStackedSeries } from "./series.js";
/**
@@ -27,26 +27,26 @@ export function renderStackedPlot(
for (const index of stackIndexes) {
const { color, points } = plottedSeries[index];
- const path = createSvgElement("path");
-
- path.dataset.chart = "stacked";
- path.dataset.series = index.toString();
- path.style.setProperty("--color", color);
- path.setAttribute("d", createAreaPathData(points));
- highlight.addNode(path, index);
- group.append(path);
+ appendSeriesPath({
+ group,
+ highlight,
+ index,
+ chart: "stacked",
+ color,
+ d: createAreaPathData(points),
+ });
}
for (const index of lineIndexes) {
const { color, points } = plottedSeries[index];
- const path = createSvgElement("path");
-
- path.dataset.chart = "line";
- path.dataset.series = index.toString();
- path.style.setProperty("--color", color);
- path.setAttribute("d", createLinePathData(points));
- highlight.addNode(path, index);
- group.append(path);
+ appendSeriesPath({
+ group,
+ highlight,
+ index,
+ chart: "line",
+ color,
+ d: createLinePathData(points),
+ });
}
return plottedSeries;
diff --git a/website_next/learn/charts/style.css b/website_next/learn/charts/style.css
index 2ae22578c..b76570fbc 100644
--- a/website_next/learn/charts/style.css
+++ b/website_next/learn/charts/style.css
@@ -43,103 +43,6 @@ main.learn {
justify-content: space-between;
gap: 0.5rem 1rem;
margin: 0.5rem 0 0;
-
- > div {
- display: flex;
- flex-wrap: wrap;
- gap: 0.125rem 0.5rem;
- }
-
- fieldset {
- display: flex;
- gap: 0.25rem;
- margin: 0;
- padding: 0;
- border: 0;
- text-transform: uppercase;
-
- legend {
- position: absolute;
- width: 1px;
- height: 1px;
- overflow: hidden;
- clip-path: inset(50%);
- white-space: nowrap;
- }
-
- label {
- position: relative;
- display: block;
- cursor: pointer;
- }
-
- input {
- position: absolute;
- inset: 0;
- margin: 0;
- opacity: 0;
- cursor: pointer;
- }
-
- span {
- display: block;
- padding: 0.25rem;
- border-radius: 0.25rem;
- color: var(--gray);
- }
-
- label:hover span {
- color: var(--black);
- background: var(--white);
- }
-
- label:has(:checked):not(:hover) span {
- color: var(--black);
- background: var(--gray);
- }
-
- label:active span {
- color: var(--black);
- background: var(--orange);
- }
-
- label:has(:focus-visible) span {
- outline: 1px solid var(--orange);
- outline-offset: 0.125rem;
- }
- }
-
- button[data-chart="fullscreen"] {
- padding: 0.25rem;
- border: 0;
- border-radius: 0.25rem;
- color: var(--gray);
- background: none;
- font: inherit;
- line-height: inherit;
- text-transform: uppercase;
- cursor: pointer;
-
- &:hover {
- color: var(--black);
- background: var(--white);
- }
-
- &[aria-pressed="true"] {
- color: var(--black);
- background: var(--green);
- }
-
- &:active {
- color: var(--black);
- background: var(--orange);
- }
-
- &:focus-visible {
- outline: 1px solid var(--orange);
- outline-offset: 0.125rem;
- }
- }
}
&:fullscreen {
@@ -154,137 +57,6 @@ main.learn {
height: auto;
min-height: 0;
}
-
- figcaption menu {
- padding-bottom: 0.5rem;
- }
- }
-
- figcaption {
- text-transform: uppercase;
-
- header {
- display: flex;
- align-items: start;
- justify-content: space-between;
- gap: 1rem;
- }
-
- time {
- color: var(--off-color);
- }
-
- span:is([data-chart="unit"], [data-chart="separator"]) {
- color: var(--off-color);
- }
-
- menu {
- --shadow-size: 1rem;
-
- display: flex;
- margin-inline: calc(-1 * var(--shadow-size));
- padding: 0 var(--shadow-size);
- padding-bottom: 1rem;
- padding-top: 0.25rem;
- overflow-x: auto;
- list-style: none;
- mask-image: linear-gradient(
- to right,
- transparent,
- black var(--shadow-size),
- black calc(100% - var(--shadow-size)),
- transparent
- );
- }
-
- li {
- flex: 0 0 auto;
- }
-
- button {
- padding: 0.25rem 0.375rem;
- border: 0;
- border-radius: 0.25rem;
- color: inherit;
- background: none;
- font: inherit;
- text-align: inherit;
- text-transform: inherit;
- cursor: pointer;
-
- &:is(:hover, :focus-visible, [data-active], [data-preview]) {
- color: var(--black);
- background: var(--color);
-
- span,
- output {
- color: inherit;
- }
- }
-
- &:focus-visible {
- outline: 1px solid var(--orange);
- outline-offset: 0.125rem;
- }
-
- &[data-muted] {
- opacity: 0.35;
- }
-
- > span {
- display: block;
- color: var(--color);
- text-align: left;
-
- &::before {
- content: "";
- display: inline-block;
- width: 0.5em;
- height: 0.5em;
- margin-right: 0.35em;
- margin-bottom: 0.1rem;
- border-radius: 50%;
- background: currentColor;
- }
- }
-
- > output {
- display: block;
- margin-top: 0.25rem;
- margin-left: auto;
- width: 7ch;
- min-height: 1em;
- color: var(--white);
- font-variant-numeric: tabular-nums;
- text-align: right;
- }
- }
- }
-
- svg [data-series][data-muted] {
- opacity: 0.2;
- }
-
- [data-scrubber] {
- opacity: 0;
- pointer-events: none;
- }
-
- svg[data-scrubbing="true"] [data-scrubber] {
- opacity: 1;
- }
-
- [data-scrubber="guide"] {
- stroke: var(--white);
- stroke-dasharray: 2 4;
- vector-effect: non-scaling-stroke;
- }
-
- [data-scrubber="marker"] {
- fill: var(--black);
- stroke: var(--color, var(--orange));
- stroke-width: 1.5;
- vector-effect: non-scaling-stroke;
}
}
}
diff --git a/website_next/learn/charts/timeframes.js b/website_next/learn/charts/timeframes.js
index 27ca8ac90..4d498bfce 100644
--- a/website_next/learn/charts/timeframes.js
+++ b/website_next/learn/charts/timeframes.js
@@ -1,8 +1,5 @@
-import { createRadioGroup } from "./radio.js";
-import { createChartStorage } from "./storage.js";
+import { createChartSetting } from "./setting.js";
-const storage = createChartStorage("timeframe");
-const defaultTimeframe = "all";
const timeframes = /** @type {const} */ ({
"1d": { index: "minute10", count: 144 },
"1w": { index: "hour1", count: 168 },
@@ -21,15 +18,16 @@ const options = /** @type {const} */ ([
{ value: "8y", label: "8y" },
{ value: "all", label: "all" },
]);
+const setting = createChartSetting({
+ storageKey: "timeframe",
+ legend: "Time",
+ options,
+ defaultValue: "all",
+});
/** @param {string} chartKey */
export function getDefaultTimeframe(chartKey) {
- const value = storage.get(chartKey);
-
- return (
- options.find((timeframe) => timeframe.value === value)?.value ??
- defaultTimeframe
- );
+ return setting.get(chartKey);
}
/**
@@ -37,7 +35,7 @@ export function getDefaultTimeframe(chartKey) {
* @param {TimeframeValue} timeframe
*/
export function saveTimeframe(chartKey, timeframe) {
- storage.set(chartKey, timeframe);
+ setting.save(chartKey, timeframe);
}
/**
@@ -45,12 +43,7 @@ export function saveTimeframe(chartKey, timeframe) {
* @param {(timeframe: TimeframeValue) => void} onChange
*/
export function createTimeframeControl(currentTimeframe, onChange) {
- return createRadioGroup({
- legend: "Time",
- options,
- currentValue: currentTimeframe,
- onChange,
- });
+ return setting.create(currentTimeframe, onChange);
}
/**
diff --git a/website_next/learn/charts/views.js b/website_next/learn/charts/views.js
index 9eecba064..68732f48d 100644
--- a/website_next/learn/charts/views.js
+++ b/website_next/learn/charts/views.js
@@ -1,25 +1,35 @@
-import { createRadioGroup } from "./radio.js";
-import { createChartStorage } from "./storage.js";
+import { createChartSetting } from "./setting.js";
-const storage = createChartStorage("view");
-const defaultView = "stacked";
+export const viewTypes = /** @type {const} */ ({
+ line: "line",
+ stacked: "stacked",
+ stackedReversed: "stacked-reversed",
+ bar: "bar",
+ barReversed: "bar-reversed",
+ dots: "dots",
+});
const views = /** @type {const} */ ([
- { value: "line", label: "Line" },
- { value: "stacked", label: "Stack↑" },
- { value: "stacked-reversed", label: "Stack↓" },
- { value: "bar", label: "Bars↑" },
- { value: "bar-reversed", label: "Bars↓" },
- { value: "dots", label: "Dots" },
+ { value: viewTypes.line, label: "Line" },
+ { value: viewTypes.stacked, label: "Stack↑" },
+ { value: viewTypes.stackedReversed, label: "Stack↓" },
+ { value: viewTypes.bar, label: "Bars↑" },
+ { value: viewTypes.barReversed, label: "Bars↓" },
+ { value: viewTypes.dots, label: "Dots" },
]);
+const defaultView = viewTypes.stacked;
+const setting = createChartSetting({
+ storageKey: "view",
+ legend: "View",
+ options: views,
+ defaultValue: defaultView,
+});
/**
* @param {string} chartKey
* @param {ChartView} [fallback]
*/
export function getDefaultView(chartKey, fallback = defaultView) {
- const value = storage.get(chartKey);
-
- return views.find((view) => view.value === value)?.value ?? fallback;
+ return setting.get(chartKey, fallback);
}
/**
@@ -27,7 +37,7 @@ export function getDefaultView(chartKey, fallback = defaultView) {
* @param {ChartView} view
*/
export function saveView(chartKey, view) {
- storage.set(chartKey, view);
+ setting.save(chartKey, view);
}
/**
@@ -35,12 +45,7 @@ export function saveView(chartKey, view) {
* @param {(view: ChartView) => void} onChange
*/
export function createViewControl(currentView, onChange) {
- return createRadioGroup({
- legend: "View",
- options: views,
- currentValue: currentView,
- onChange,
- });
+ return setting.create(currentView, onChange);
}
/** @typedef {(typeof views)[number]["value"]} ChartView */
diff --git a/website_next/learn/contents/style.css b/website_next/learn/contents/style.css
index d33fc669d..696c5f95b 100644
--- a/website_next/learn/contents/style.css
+++ b/website_next/learn/contents/style.css
@@ -11,6 +11,7 @@ main.learn {
font-size: var(--font-size-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
+ color: var(--gray);
padding-left: 0.5rem;
margin-left: -0.5rem;
@@ -40,7 +41,6 @@ main.learn {
ol ol {
margin-top: 0.25rem;
margin-left: 1rem;
- color: var(--gray);
}
li + li {
@@ -66,15 +66,15 @@ main.learn {
border-radius: 0.25rem;
}
+ &[aria-current="location"] {
+ color: var(--white);
+ }
+
&:hover {
color: var(--black);
background-color: var(--white);
}
- &[aria-current="location"] {
- color: var(--orange);
- }
-
&:active {
color: var(--black);
background-color: var(--orange);
diff --git a/website_next/learn/data.js b/website_next/learn/data.js
index ac1642e0d..26221b4d8 100644
--- a/website_next/learn/data.js
+++ b/website_next/learn/data.js
@@ -1,389 +1,9 @@
-import {
- capitalizationSeries,
- marketCapAddressBalanceSeries,
- marketCapAgeSeries,
- marketCapClassSeries,
- marketCapEpochSeries,
- marketCapProfitabilitySeries,
- marketCapSeries,
- marketCapTermSeries,
- marketCapTypeSeries,
- marketCapUtxoBalanceSeries,
- realizedCapAddressBalanceSeries,
- realizedCapAgeSeries,
- realizedCapClassSeries,
- realizedCapEpochSeries,
- realizedCapProfitabilitySeries,
- realizedCapSeries,
- realizedCapTermSeries,
- realizedCapTypeSeries,
- realizedCapUtxoBalanceSeries,
-} from "./capitalization.js";
-import {
- addressBalanceSeries,
- ageSeries,
- classSeries,
- epochSeries,
- exposedSupplySeries,
- exposedSupplyTypeSeries,
- termSeries,
- typeSeries,
- utxoBalanceSeries,
-} from "./cohorts.js";
-import { colors } from "../utils/colors.js";
-import { units } from "./charts/units.js";
-
-const lineType = /** @type {const} */ ("line");
-
-/** @param {typeof import("../utils/client.js").brk} client */
-function metricCirculatingSupply(client) {
- return client.series.supply.circulating.btc;
-}
-
-/** @param {typeof import("../utils/client.js").brk} client */
-function metricSupplyInProfit(client) {
- return client.series.cohorts.utxo.profitability.profit.all.supply.all.btc;
-}
-
-/** @param {typeof import("../utils/client.js").brk} client */
-function metricSupplyInLoss(client) {
- return client.series.cohorts.utxo.profitability.loss.all.supply.all.btc;
-}
+import { capitalizationSection } from "./sections/capitalization.js";
+import { introductionSection } from "./sections/introduction.js";
+import { supplySection } from "./sections/supply.js";
export const sections = [
- {
- title: "Introduction",
- numbered: false,
- description:
- "Bitcoin can be measured from many angles, but a single number rarely explains much on its own. This page introduces core Bitcoin concepts through data that changes over time. Each chart is meant to answer a simple question: what is being measured, how has it changed, and how does it compare across different groups? The goal is to make the system easier to read, from the supply itself to the way coins move, age, concentrate, and gain value.",
- },
- {
- title: "Supply",
- description:
- "Bitcoin has a fixed issuance schedule. This chart shows how many BTC are in circulation over time, so you can see supply rising toward the 21 million limit.",
- chart: {
- title: "Circulating supply",
- unit: units.btc,
- series: [
- {
- label: "Circulating",
- color: colors.orange,
- metric: metricCirculatingSupply,
- },
- ],
- },
- children: [
- {
- title: "Profitability",
- description:
- "Shows whether coins are in profit or loss based on the price when they last moved on-chain. A coin is in profit when today's price is higher than its last moved price, and in loss when today's price is lower.",
- chart: {
- title: "Profitability",
- unit: units.btc,
- series: [
- {
- label: "In profit",
- color: colors.green,
- metric: metricSupplyInProfit,
- },
- {
- label: "In loss",
- color: colors.red,
- metric: metricSupplyInLoss,
- },
- ],
- },
- },
- {
- title: "Exposed",
- description:
- "Shows BTC held by addresses whose public key is already visible on-chain. This can happen because the address type exposes the key directly, or because coins were spent from that address before.",
- chart: {
- title: "Exposed supply",
- unit: units.btc,
- defaultType: lineType,
- series: exposedSupplySeries,
- },
- children: [
- {
- title: "Type",
- description:
- "Splits exposed supply by address type. This shows which script formats account for the visible-public-key supply.",
- chart: {
- title: "Exposed supply by type",
- unit: units.btc,
- series: exposedSupplyTypeSeries,
- },
- },
- ],
- },
- {
- title: "Term",
- description:
- "Splits supply between coins that moved recently and coins that have stayed still longer. This helps separate more active supply from long-term holder supply.",
- chart: {
- title: "Supply by term",
- unit: units.btc,
- series: termSeries,
- },
- },
- {
- title: "Age",
- description:
- "Groups coins by how long they have stayed still since their last on-chain movement. Older coins are usually more dormant, while younger coins have moved more recently.",
- chart: {
- title: "Supply by age",
- unit: units.btc,
- series: ageSeries,
- },
- },
- {
- title: "UTXO Balance",
- description:
- "Groups supply by the size of each unspent output. A UTXO is a spendable piece of bitcoin created by a transaction, so this shows the size distribution of coin fragments.",
- chart: {
- title: "Supply by UTXO balance",
- unit: units.btc,
- series: utxoBalanceSeries,
- },
- },
- {
- title: "Address Balance",
- description:
- "Groups supply by the total BTC held at each address. An address is not the same as a person or entity, but this still helps show how balances are distributed on-chain.",
- chart: {
- title: "Supply by address balance",
- unit: units.btc,
- series: addressBalanceSeries,
- },
- },
- {
- title: "Type",
- description:
- "Groups supply by Bitcoin output type. The output type is the script format that defines how coins can be spent.",
- chart: {
- title: "Supply by type",
- unit: units.btc,
- series: typeSeries,
- },
- },
- {
- title: "Epoch",
- description:
- "Groups supply by the halving epoch when coins were mined. A halving epoch is a period between two subsidy halvings, when the amount of new BTC paid to miners changes.",
- chart: {
- title: "Supply by epoch",
- unit: units.btc,
- series: epochSeries,
- },
- },
- {
- title: "Class",
- description:
- "Groups supply by the calendar year when coins were mined. This shows how much of today's supply comes from each issuance year.",
- chart: {
- title: "Supply by class",
- unit: units.btc,
- series: classSeries,
- },
- },
- ],
- },
- {
- title: "Capitalization",
- description:
- "Shows ways to value Bitcoin in US dollars. Market cap uses today's price, while realized cap uses the price when coins last moved on-chain.",
- chart: {
- title: "Capitalization",
- unit: units.usd,
- defaultType: lineType,
- series: capitalizationSeries,
- },
- children: [
- {
- title: "Market Cap",
- description:
- "Market cap is circulating supply multiplied by the current bitcoin price. It answers: what is all circulating BTC worth at today's market price?",
- chart: {
- title: "Market cap",
- unit: units.usd,
- series: marketCapSeries,
- },
- children: [
- {
- title: "Profitability",
- description:
- "Splits market cap between coins that are currently in profit and coins that are currently in loss. This shows how much current market value sits above or below each coin's last moved price.",
- chart: {
- title: "Market cap by profitability",
- unit: units.usd,
- series: marketCapProfitabilitySeries,
- },
- },
- {
- title: "Term",
- description:
- "Splits market cap between coins that moved recently and coins that have stayed still longer. This shows how much current market value sits with active supply versus long-term holder supply.",
- chart: {
- title: "Market cap by term",
- unit: units.usd,
- series: marketCapTermSeries,
- },
- },
- {
- title: "Age",
- description:
- "Groups market cap by how long coins have stayed still since their last on-chain movement. It shows which age bands hold the most current market value.",
- chart: {
- title: "Market cap by age",
- unit: units.usd,
- series: marketCapAgeSeries,
- },
- },
- {
- title: "UTXO Balance",
- description:
- "Groups market cap by the size of each unspent output. This shows how current market value is distributed across small and large spendable coin fragments.",
- chart: {
- title: "Market cap by UTXO balance",
- unit: units.usd,
- series: marketCapUtxoBalanceSeries,
- },
- },
- {
- title: "Address Balance",
- description:
- "Groups market cap by the total BTC held at each address. Addresses are not people or entities, but this still helps show how current market value is distributed across address balances.",
- chart: {
- title: "Market cap by address balance",
- unit: units.usd,
- series: marketCapAddressBalanceSeries,
- },
- },
- {
- title: "Type",
- description:
- "Groups market cap by Bitcoin output type. This shows how much current market value is held in each script format.",
- chart: {
- title: "Market cap by type",
- unit: units.usd,
- series: marketCapTypeSeries,
- },
- },
- {
- title: "Epoch",
- description:
- "Groups market cap by the halving epoch when coins were mined. This shows the current value of coins created during each issuance period.",
- chart: {
- title: "Market cap by epoch",
- unit: units.usd,
- series: marketCapEpochSeries,
- },
- },
- {
- title: "Class",
- description:
- "Groups market cap by the calendar year when coins were mined. This shows the current value of supply created in each year.",
- chart: {
- title: "Market cap by class",
- unit: units.usd,
- series: marketCapClassSeries,
- },
- },
- ],
- },
- {
- title: "Realized Cap",
- description:
- "Realized cap values each coin at the price when it last moved on-chain. It is often used as a rough view of the market's aggregate cost basis.",
- chart: {
- title: "Realized cap",
- unit: units.usd,
- series: realizedCapSeries,
- },
- children: [
- {
- title: "Profitability",
- description:
- "Splits realized cap between coins that are currently in profit and coins that are currently in loss. This shows how the market's cost basis is distributed across coins above or below their last moved price.",
- chart: {
- title: "Realized cap by profitability",
- unit: units.usd,
- series: realizedCapProfitabilitySeries,
- },
- },
- {
- title: "Term",
- description:
- "Splits realized cap between coins that moved recently and coins that have stayed still longer. This shows where the market's cost basis sits across active and long-term holder supply.",
- chart: {
- title: "Realized cap by term",
- unit: units.usd,
- series: realizedCapTermSeries,
- },
- },
- {
- title: "Age",
- description:
- "Groups realized cap by how long coins have stayed still since their last on-chain movement. This shows which coin ages carry the largest share of the market's cost basis.",
- chart: {
- title: "Realized cap by age",
- unit: units.usd,
- series: realizedCapAgeSeries,
- },
- },
- {
- title: "UTXO Balance",
- description:
- "Groups realized cap by the size of each unspent output. This shows how cost basis is distributed across small and large spendable coin fragments.",
- chart: {
- title: "Realized cap by UTXO balance",
- unit: units.usd,
- series: realizedCapUtxoBalanceSeries,
- },
- },
- {
- title: "Address Balance",
- description:
- "Groups realized cap by the total BTC held at each address. Addresses are not people or entities, but this still helps show how cost basis is distributed across address balances.",
- chart: {
- title: "Realized cap by address balance",
- unit: units.usd,
- series: realizedCapAddressBalanceSeries,
- },
- },
- {
- title: "Type",
- description:
- "Groups realized cap by Bitcoin output type. This shows how much cost basis is held in each script format.",
- chart: {
- title: "Realized cap by type",
- unit: units.usd,
- series: realizedCapTypeSeries,
- },
- },
- {
- title: "Epoch",
- description:
- "Groups realized cap by the halving epoch when coins were mined. This shows the cost basis of coins created during each issuance period.",
- chart: {
- title: "Realized cap by epoch",
- unit: units.usd,
- series: realizedCapEpochSeries,
- },
- },
- {
- title: "Class",
- description:
- "Groups realized cap by the calendar year when coins were mined. This shows the cost basis of supply created in each year.",
- chart: {
- title: "Realized cap by class",
- unit: units.usd,
- series: realizedCapClassSeries,
- },
- },
- ],
- },
- ],
- },
+ introductionSection,
+ supplySection,
+ capitalizationSection,
];
diff --git a/website_next/learn/scroll-spy.js b/website_next/learn/scroll-spy.js
index 564831696..f6fea37b5 100644
--- a/website_next/learn/scroll-spy.js
+++ b/website_next/learn/scroll-spy.js
@@ -18,17 +18,18 @@ export function initScrollSpy(main) {
let scheduled = false;
function getViewportTop() {
- return Number.parseFloat(getComputedStyle(main).getPropertyValue("--offset"));
+ return Number.parseFloat(getComputedStyle(main).scrollPaddingTop);
}
/**
* @param {Element} section
* @param {Element | null} firstChild
+ * @param {number} viewportTop
*/
- function getOwnVisibleHeight(section, firstChild) {
+ function getOwnVisibleHeight(section, firstChild, viewportTop) {
const sectionRect = section.getBoundingClientRect();
const childRect = firstChild?.getBoundingClientRect();
- const top = Math.max(sectionRect.top, getViewportTop());
+ const top = Math.max(sectionRect.top, viewportTop);
const bottom = Math.min(
childRect?.top ?? sectionRect.bottom,
window.innerHeight,
@@ -80,9 +81,14 @@ export function initScrollSpy(main) {
/** @type {{ section: Element, firstChild: Element | null } | undefined} */
let currentState;
let currentHeight = 0;
+ const viewportTop = getViewportTop();
for (const state of sectionStates) {
- const height = getOwnVisibleHeight(state.section, state.firstChild);
+ const height = getOwnVisibleHeight(
+ state.section,
+ state.firstChild,
+ viewportTop,
+ );
if (height > currentHeight) {
currentState = state;
diff --git a/website_next/learn/sections/capitalization.js b/website_next/learn/sections/capitalization.js
new file mode 100644
index 000000000..5a5801c9d
--- /dev/null
+++ b/website_next/learn/sections/capitalization.js
@@ -0,0 +1,21 @@
+import { capitalizationSeries } from "../capitalization.js";
+import { units } from "../charts/units.js";
+import { viewTypes } from "../charts/views.js";
+import { marketCapSection } from "./capitalization/market.js";
+import { realizedCapSection } from "./capitalization/realized.js";
+
+export const capitalizationSection = {
+ title: "Capitalization",
+ description:
+ "Shows ways to value Bitcoin in US dollars. Market cap uses today's price, while realized cap uses the price when coins last moved on-chain.",
+ chart: {
+ title: "Capitalization",
+ unit: units.usd,
+ defaultType: viewTypes.line,
+ series: capitalizationSeries,
+ },
+ children: [
+ marketCapSection,
+ realizedCapSection,
+ ],
+};
diff --git a/website_next/learn/sections/capitalization/market.js b/website_next/learn/sections/capitalization/market.js
new file mode 100644
index 000000000..da09d3992
--- /dev/null
+++ b/website_next/learn/sections/capitalization/market.js
@@ -0,0 +1,105 @@
+import {
+ marketCapAddressBalanceSeries,
+ marketCapAgeSeries,
+ marketCapClassSeries,
+ marketCapEpochSeries,
+ marketCapProfitabilitySeries,
+ marketCapSeries,
+ marketCapTermSeries,
+ marketCapTypeSeries,
+ marketCapUtxoBalanceSeries,
+} from "../../capitalization.js";
+import { units } from "../../charts/units.js";
+
+export const marketCapSection = {
+ title: "Market Cap",
+ description:
+ "Market cap is circulating supply multiplied by the current bitcoin price. It answers: what is all circulating BTC worth at today's market price?",
+ chart: {
+ title: "Market cap",
+ unit: units.usd,
+ series: marketCapSeries,
+ },
+ children: [
+ {
+ title: "Profitability",
+ description:
+ "Splits market cap between coins that are currently in profit and coins that are currently in loss. This shows how much current market value sits above or below each coin's last moved price.",
+ chart: {
+ title: "Market cap by profitability",
+ unit: units.usd,
+ series: marketCapProfitabilitySeries,
+ },
+ },
+ {
+ title: "Term",
+ description:
+ "Splits market cap between coins that moved recently and coins that have stayed still longer. This shows how much current market value sits with active supply versus long-term holder supply.",
+ chart: {
+ title: "Market cap by term",
+ unit: units.usd,
+ series: marketCapTermSeries,
+ },
+ },
+ {
+ title: "Age",
+ description:
+ "Groups market cap by how long coins have stayed still since their last on-chain movement. It shows which age bands hold the most current market value.",
+ chart: {
+ title: "Market cap by age",
+ unit: units.usd,
+ series: marketCapAgeSeries,
+ },
+ },
+ {
+ title: "UTXO Balance",
+ description:
+ "Groups market cap by the size of each unspent output. This shows how current market value is distributed across small and large spendable coin fragments.",
+ chart: {
+ title: "Market cap by UTXO balance",
+ unit: units.usd,
+ series: marketCapUtxoBalanceSeries,
+ },
+ },
+ {
+ title: "Address Balance",
+ description:
+ "Groups market cap by the total BTC held at each address. Addresses are not people or entities, but this still helps show how current market value is distributed across address balances.",
+ chart: {
+ title: "Market cap by address balance",
+ unit: units.usd,
+ series: marketCapAddressBalanceSeries,
+ },
+ },
+ {
+ title: "Type",
+ description:
+ "Groups market cap by Bitcoin output type. This shows how much current market value is held in each script format.",
+ chart: {
+ title: "Market cap by type",
+ unit: units.usd,
+ series: marketCapTypeSeries,
+ },
+ },
+ {
+ title: "Epoch",
+ description:
+ "Groups market cap by the halving epoch when coins were mined. This shows the current value of coins created during each issuance period.",
+ chart: {
+ title: "Market cap by epoch",
+ unit: units.usd,
+ series: marketCapEpochSeries,
+ },
+ },
+ {
+ title: "Class",
+ description:
+ "Groups market cap by the calendar year when coins were mined. This shows the current value of supply created in each year.",
+ chart: {
+ title: "Market cap by class",
+ unit: units.usd,
+ series: marketCapClassSeries,
+ },
+ },
+ ],
+};
diff --git a/website_next/learn/sections/capitalization/realized.js b/website_next/learn/sections/capitalization/realized.js
new file mode 100644
index 000000000..278716cc0
--- /dev/null
+++ b/website_next/learn/sections/capitalization/realized.js
@@ -0,0 +1,105 @@
+import {
+ realizedCapAddressBalanceSeries,
+ realizedCapAgeSeries,
+ realizedCapClassSeries,
+ realizedCapEpochSeries,
+ realizedCapProfitabilitySeries,
+ realizedCapSeries,
+ realizedCapTermSeries,
+ realizedCapTypeSeries,
+ realizedCapUtxoBalanceSeries,
+} from "../../capitalization.js";
+import { units } from "../../charts/units.js";
+
+export const realizedCapSection = {
+ title: "Realized Cap",
+ description:
+ "Realized cap values each coin at the price when it last moved on-chain. It is often used as a rough view of the market's aggregate cost basis.",
+ chart: {
+ title: "Realized cap",
+ unit: units.usd,
+ series: realizedCapSeries,
+ },
+ children: [
+ {
+ title: "Profitability",
+ description:
+ "Splits realized cap between coins that are currently in profit and coins that are currently in loss. This shows how the market's cost basis is distributed across coins above or below their last moved price.",
+ chart: {
+ title: "Realized cap by profitability",
+ unit: units.usd,
+ series: realizedCapProfitabilitySeries,
+ },
+ },
+ {
+ title: "Term",
+ description:
+ "Splits realized cap between coins that moved recently and coins that have stayed still longer. This shows where the market's cost basis sits across active and long-term holder supply.",
+ chart: {
+ title: "Realized cap by term",
+ unit: units.usd,
+ series: realizedCapTermSeries,
+ },
+ },
+ {
+ title: "Age",
+ description:
+ "Groups realized cap by how long coins have stayed still since their last on-chain movement. This shows which coin ages carry the largest share of the market's cost basis.",
+ chart: {
+ title: "Realized cap by age",
+ unit: units.usd,
+ series: realizedCapAgeSeries,
+ },
+ },
+ {
+ title: "UTXO Balance",
+ description:
+ "Groups realized cap by the size of each unspent output. This shows how cost basis is distributed across small and large spendable coin fragments.",
+ chart: {
+ title: "Realized cap by UTXO balance",
+ unit: units.usd,
+ series: realizedCapUtxoBalanceSeries,
+ },
+ },
+ {
+ title: "Address Balance",
+ description:
+ "Groups realized cap by the total BTC held at each address. Addresses are not people or entities, but this still helps show how cost basis is distributed across address balances.",
+ chart: {
+ title: "Realized cap by address balance",
+ unit: units.usd,
+ series: realizedCapAddressBalanceSeries,
+ },
+ },
+ {
+ title: "Type",
+ description:
+ "Groups realized cap by Bitcoin output type. This shows how much cost basis is held in each script format.",
+ chart: {
+ title: "Realized cap by type",
+ unit: units.usd,
+ series: realizedCapTypeSeries,
+ },
+ },
+ {
+ title: "Epoch",
+ description:
+ "Groups realized cap by the halving epoch when coins were mined. This shows the cost basis of coins created during each issuance period.",
+ chart: {
+ title: "Realized cap by epoch",
+ unit: units.usd,
+ series: realizedCapEpochSeries,
+ },
+ },
+ {
+ title: "Class",
+ description:
+ "Groups realized cap by the calendar year when coins were mined. This shows the cost basis of supply created in each year.",
+ chart: {
+ title: "Realized cap by class",
+ unit: units.usd,
+ series: realizedCapClassSeries,
+ },
+ },
+ ],
+};
diff --git a/website_next/learn/sections/introduction.js b/website_next/learn/sections/introduction.js
new file mode 100644
index 000000000..8170bdd27
--- /dev/null
+++ b/website_next/learn/sections/introduction.js
@@ -0,0 +1,6 @@
+export const introductionSection = {
+ title: "Introduction",
+ numbered: false,
+ description:
+ "Bitcoin can be measured from many angles, but a single number rarely explains much on its own. This page introduces core Bitcoin concepts through data that changes over time. Each chart is meant to answer a simple question: what is being measured, how has it changed, and how does it compare across different groups? The goal is to make the system easier to read, from the supply itself to the way coins move, age, concentrate, and gain value.",
+};
diff --git a/website_next/learn/sections/supply.js b/website_next/learn/sections/supply.js
new file mode 100644
index 000000000..fa970afd7
--- /dev/null
+++ b/website_next/learn/sections/supply.js
@@ -0,0 +1,133 @@
+import {
+ addressBalanceSeries,
+ ageSeries,
+ classSeries,
+ epochSeries,
+ exposedSupplySeries,
+ exposedSupplyTypeSeries,
+ termSeries,
+ typeSeries,
+ utxoBalanceSeries,
+} from "../cohorts.js";
+import {
+ circulatingSupplySeries,
+ supplyProfitabilitySeries,
+} from "../supply.js";
+import { units } from "../charts/units.js";
+import { viewTypes } from "../charts/views.js";
+
+export const supplySection = {
+ title: "Supply",
+ description:
+ "Bitcoin has a fixed issuance schedule. This chart shows how many BTC are in circulation over time, so you can see supply rising toward the 21 million limit.",
+ chart: {
+ title: "Circulating supply",
+ unit: units.btc,
+ series: circulatingSupplySeries,
+ },
+ children: [
+ {
+ title: "Profitability",
+ description:
+ "Shows whether coins are in profit or loss based on the price when they last moved on-chain. A coin is in profit when today's price is higher than its last moved price, and in loss when today's price is lower.",
+ chart: {
+ title: "Profitability",
+ unit: units.btc,
+ series: supplyProfitabilitySeries,
+ },
+ },
+ {
+ title: "Exposed",
+ description:
+ "Shows BTC held by addresses whose public key is already visible on-chain. This can happen because the address type exposes the key directly, or because coins were spent from that address before.",
+ chart: {
+ title: "Exposed supply",
+ unit: units.btc,
+ defaultType: viewTypes.line,
+ series: exposedSupplySeries,
+ },
+ children: [
+ {
+ title: "Type",
+ description:
+ "Splits exposed supply by address type. This shows which script formats account for the visible-public-key supply.",
+ chart: {
+ title: "Exposed supply by type",
+ unit: units.btc,
+ series: exposedSupplyTypeSeries,
+ },
+ },
+ ],
+ },
+ {
+ title: "Term",
+ description:
+ "Splits supply between coins that moved recently and coins that have stayed still longer. This helps separate more active supply from long-term holder supply.",
+ chart: {
+ title: "Supply by term",
+ unit: units.btc,
+ series: termSeries,
+ },
+ },
+ {
+ title: "Age",
+ description:
+ "Groups coins by how long they have stayed still since their last on-chain movement. Older coins are usually more dormant, while younger coins have moved more recently.",
+ chart: {
+ title: "Supply by age",
+ unit: units.btc,
+ series: ageSeries,
+ },
+ },
+ {
+ title: "UTXO Balance",
+ description:
+ "Groups supply by the size of each unspent output. A UTXO is a spendable piece of bitcoin created by a transaction, so this shows the size distribution of coin fragments.",
+ chart: {
+ title: "Supply by UTXO balance",
+ unit: units.btc,
+ series: utxoBalanceSeries,
+ },
+ },
+ {
+ title: "Address Balance",
+ description:
+ "Groups supply by the total BTC held at each address. An address is not the same as a person or entity, but this still helps show how balances are distributed on-chain.",
+ chart: {
+ title: "Supply by address balance",
+ unit: units.btc,
+ series: addressBalanceSeries,
+ },
+ },
+ {
+ title: "Type",
+ description:
+ "Groups supply by Bitcoin output type. The output type is the script format that defines how coins can be spent.",
+ chart: {
+ title: "Supply by type",
+ unit: units.btc,
+ series: typeSeries,
+ },
+ },
+ {
+ title: "Epoch",
+ description:
+ "Groups supply by the halving epoch when coins were mined. A halving epoch is a period between two subsidy halvings, when the amount of new BTC paid to miners changes.",
+ chart: {
+ title: "Supply by epoch",
+ unit: units.btc,
+ series: epochSeries,
+ },
+ },
+ {
+ title: "Class",
+ description:
+ "Groups supply by the calendar year when coins were mined. This shows how much of today's supply comes from each issuance year.",
+ chart: {
+ title: "Supply by class",
+ unit: units.btc,
+ series: classSeries,
+ },
+ },
+ ],
+};
diff --git a/website_next/learn/style.css b/website_next/learn/style.css
index aea9b016f..e802dbdc5 100644
--- a/website_next/learn/style.css
+++ b/website_next/learn/style.css
@@ -16,6 +16,7 @@ main.learn {
grid-template-columns: 14rem minmax(0, 1fr);
gap: 4rem;
padding: 0 var(--page-x);
+ scroll-padding-top: var(--offset);
article {
counter-reset: theme;
diff --git a/website_next/learn/supply.js b/website_next/learn/supply.js
new file mode 100644
index 000000000..df0d61aed
--- /dev/null
+++ b/website_next/learn/supply.js
@@ -0,0 +1,25 @@
+import { createCohortSeries } from "./cohort-series.js";
+import { colors } from "../utils/colors.js";
+
+export const circulatingSupplySeries = createCohortSeries([
+ {
+ label: "Circulating",
+ color: colors.orange,
+ metric: (client) => client.series.supply.circulating.btc,
+ },
+]);
+
+export const supplyProfitabilitySeries = createCohortSeries([
+ {
+ label: "In profit",
+ color: colors.green,
+ metric: (client) =>
+ client.series.cohorts.utxo.profitability.profit.all.supply.all.btc,
+ },
+ {
+ label: "In loss",
+ color: colors.red,
+ metric: (client) =>
+ client.series.cohorts.utxo.profitability.loss.all.supply.all.btc,
+ },
+]);
diff --git a/website_next/styles/variables.css b/website_next/styles/variables.css
index 2716e3c95..43f2b6b19 100644
--- a/website_next/styles/variables.css
+++ b/website_next/styles/variables.css
@@ -4,7 +4,6 @@
--white: oklch(95% 0 0);
--dark-white: oklch(92.5% 0 0);
--gray: oklch(55% 0 0);
- --light-black: oklch(17.5% 0 0);
--black: oklch(15% 0 0);
--red: oklch(0.607 0.241 26.328);
--orange: oklch(67.64% 0.191 44.41);
@@ -24,7 +23,6 @@
--fuchsia: oklch(0.629 0.294 322.523);
--pink: oklch(0.624 0.245 357.444);
--rose: oklch(0.6155 0.2495 17.012);
- --color: light-dark(var(--black), var(--white));
--off-color: var(--gray);
--font-size-xs: 0.75rem;
diff --git a/website_next/utils/event.js b/website_next/utils/event.js
index 660edcd31..467de69d4 100644
--- a/website_next/utils/event.js
+++ b/website_next/utils/event.js
@@ -3,9 +3,9 @@
* @param {string} selector
*/
export function getEventTarget(event, selector) {
- return /** @type {HTMLElement | null} */ (
- /** @type {HTMLElement} */ (event.target).closest(selector)
- );
+ const target = event.target;
+
+ return target instanceof Element ? target.closest(selector) : null;
}
/** @param {Event} event */