adopt the new classes for plot's big numbers

examples/plot/README.md

@@ -26,7 +26,7 @@ The [`npm-downloads.csv.ts`](./docs/data/npm-downloads.csv.ts) loader retrieves
 
 ## Big numbers
 
-Key performance indicators are displayed as “big numbers” with, in some cases, a trend indicating growth over one week. See the components/bigNumber.js file.
+Key performance indicators are displayed as “big numbers” with, in some cases, a trend indicating growth over one week. Their layout is using the convenience CSS classes _big_, _red_ etc.
 
 ## Charts
 

examples/plot/docs/index.md

@@ -6,7 +6,6 @@ theme: dashboard
 # Plot
 
 ```js
-import {BigNumber} from "./components/bigNumber.js";
 import {DailyPlot, today, start} from "./components/dailyPlot.js";
 ```
 
@@ -43,17 +42,26 @@ const burndown = issues
 ```
 
 <div class="grid grid-cols-4" style="grid-auto-rows: 86px;">
-  <div class=card>${BigNumber(versions.at(-1).version, {
-    title: "Current release",
-    href: `https://github.com/observablehq/plot/releases/tag/v${versions.at(-1).version}`,
-    trend: d3.utcDay.count(versions.at(-1).date, Date.now()),
-    trendFormat: d => `${d === 0 ? "today" : d===1 ? "yesterday" : `${d} days ago`}`,
-    trendColor: "#888",
-    trendArrow: null
-  })}</div>
-  <div class=card>${BigNumber(stars.length, {title: "GitHub stars", trend: stars.filter((d) => d.starred_at >= lastWeek).length, trendFormat: "+", trendTitle: "Since last week"})}</div>
-  <div class=card>${BigNumber(downloads[0].value, {title: "Daily npm downloads", trend: downloads[7].value ? (downloads[0].value - downloads[7].value) / downloads[7].value : undefined, trendTitle: "Compared to last week"})}</div>
-  <div class=card>${BigNumber(d3.sum(downloads, (d) => d.value), {title: "Total npm downloads"})}</div>
+  <div class="card">
+  <h2>Current release</h2>
+  <span class="big">${versions.at(-1).version}</span>
+  <a href="https://github.com/observablehq/plot/releases" class="muted">
+    ${((days) => days === 0 ? "today" : days === 1 ? "yesterday" : `${days} days ago`)(d3.utcDay.count(versions.at(-1).date, Date.now()))}`}
+  </a>
+</div>
+<div class="card">
+  <h2>GitHub stars</h2>
+  ${html`<span class="big">${d3.format(",")(stars.length)}`}
+  ${html`<span class="green">${d3.format("+")(d3.sum(stars, (d) => d.starred_at >= lastWeek))} ↗︎`}
+</div>
+<div class="card">
+  <h2>Daily npm downloads</h2>
+  ${html`<span class="big">${d3.format(",")(downloads[0].value)}`}
+  ${((trend) => html`<span class=${trend > 0 ? "green" : trend < 0 ? "red" : "muted"}>${d3.format("+.1%")(trend)} ${trend > 0 ? "↗︎" : trend < 0 ? "↘︎" :""}`)(downloads[7].value ? (downloads[0].value - downloads[7].value) / downloads[7].value : undefined)}
+</div>
+<div class="card">
+  <h2>Total npm downloads</h2>
+  ${html`<span class="big">${d3.format(",")(d3.sum(downloads, (d) => d.value))}`}
 </div>
 
 <div class="card grid grid-cols-1" style="grid-auto-rows: calc(260px + 2rem);">
@@ -99,11 +107,27 @@ const burndown = issues
 )}
 </div>
 
+<style>
+  .big {margin-right: 0.5rem;}
+</style>
+
 <div class="grid grid-cols-4" style="grid-auto-rows: 86px;">
-  <div class=card>${BigNumber(issues.filter((d) => !d.pull_request && d.state === "open").length, {title: "Open issues", href: "https://github.com/observablehq/plot/issues"})}</div>
-  <div class=card>${BigNumber(issues.filter((d) => !d.pull_request && d.open >= lastMonth).length, {title: "Opened issues, 28d"})}</div>
-  <div class=card>${BigNumber(issues.filter((d) => !d.pull_request && d.close >= lastMonth).length, {title: "Closed issues, 28d"})}</div>
-  <div class=card>${BigNumber(issues.filter((d) => d.pull_request && d.state === "open" && !d.draft).length, {title: "Open PRs", href: "https://github.com/observablehq/plot/pulls?q=is%3Apr+is%3Aopen+draft%3Afalse"})}</div>
+  <div class="card">
+    <h2>Open issues</h2>
+    <span class="big">${d3.format(",")(d3.sum(issues, (d) => !d.pull_request && d.state === "open"))}</span>
+  </div>
+  <div class="card">
+    <h2>Opened issues, 28d</h2>
+    <span class="big">${d3.format(",")(d3.sum(issues, (d) => !d.pull_request && d.open >= lastMonth))}</span>
+  </div>
+  <div class="card">
+    <h2>Closed issues, 28d</h2>
+    <span class="big">${d3.format(",")(d3.sum(issues, (d) => !d.pull_request && d.close >= lastMonth))}</span>
+  </div>
+  <div class="card">
+    <h2>Open PRs</h2>
+    <a class="big" href="https://github.com/observablehq/plot/pulls?q=is%3Apr+is%3Aopen+draft%3Afalse"><span style="color: var(--theme-foreground)">${d3.format(",")(d3.sum(issues, (d) => d.pull_request && d.state === "open" && !d.draft))}</span></a>
+  </div>
 </div>
 
 <div class="grid grid-cols-2" style="grid-auto-rows: 276px;">