adopt the new classes for plot's big numbers

Author: Fil

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/components/bigNumber.js

@@ -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,25 @@ 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>
+  ${html`<span class=big>${versions.at(-1).version}`}
+  ${html`<a href="https://github.com/observablehq/plot/releases/tag/v${versions.at(-1).version}">
+  <span class=muted>${((days) => days === 0 ? "today" : days === 1 ? "yesterday" : `${days} days ago`)(d3.utcDay.count(versions.at(-1).date, Date.now()))}`}
+</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);">
@@ -100,10 +107,22 @@ const burndown = issues
 </div>
 
 <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 class=muted>${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;">