add dashboard example (#14)

* wip

* wip

* wip

* update index page

* add dashboard and remove style

* restore yarn.lock

* fix spelling

* add remport

* update theme

template/docs/components/bigNumber.js.tmpl

@@ -0,0 +1,31 @@
+import * as d3 from "npm:d3";
+import {html} from "npm:htl";
+
+export function BigNumber(
+  number,
+  {
+    href,
+    target = "_blank",
+    title,
+    format = ",.2~f",
+    trend,
+    trendFormat = "+.1~%",
+    trendColor = trend > 0 ? "green" : trend < 0 ? "red" : "orange",
+    trendArrow = trend > 0 ? "↗︎" : trend < 0 ? "↘︎" : "→",
+    plot
+  } = {}
+) {
+  if (typeof format !== "function") format = typeof number === "string" ? String : d3.format(format);
+  if (typeof trendFormat !== "function") trendFormat = d3.format(trendFormat);
+  const div = html`<div style="display: flex; flex-direction: column; font-family: var(--sans-serif);">
+    <div style="text-transform: uppercase; font-size: 12px;">${title}</div>
+    <div style="display: flex; flex-wrap: wrap; column-gap: 10px; align-items: baseline;">
+      <div style="font-size: 32px; font-weight: bold; line-height: 1;">${format(number)}</div>
+      ${trend == null
+        ? null
+        : html`<div style="font-size: 14px; color: ${trendColor};">${trendFormat(trend)} ${trendArrow}</div>`}
+    </div>
+    ${plot}
+  </div>`;
+  return href == null ? div : html`<a href=${href} target=${target} style="color: inherit;">${div}</a>`;
+}

template/docs/components/resize.js.tmpl

@@ -0,0 +1,14 @@
+export function resize(run) {
+  const div = Object.assign(document.createElement("DIV"), {style: "position: relative; height: 100%;"});
+  const observer = new ResizeObserver(([entry]) => {
+    const {width, height} = entry.contentRect;
+    while (div.lastChild) div.lastChild.remove();
+    if (width > 0) {
+      const child = run(width, height);
+      if (run.length !== 1 && child?.style) child.style.position = "absolute"; // prevent feedback loop if height is used
+      div.append(child);
+    }
+  });
+  observer.observe(div);
+  return div;
+}

template/docs/example-dashboard.md.tmpl

@@ -0,0 +1,88 @@
+---
+toc: false
+theme: [light-alt, dark-alt, wide]
+---
+
+# Example Dashboard
+
+🚀 A history of rocket launches.
+
+<!-- import components and tools -->
+
+```js
+import {BigNumber} from "./components/bigNumber.js";
+import {resize} from "./components/resize.js";
+```
+
+<!-- load and transform the data -->
+
+```js
+const launchHistory = await FileAttachment("example-data/launchHistory.json")
+  .json()
+  .then(rows => rows.map(row => ({...row, date: new Date(row.date) })));
+const countLaunchesByStateId = id => launchHistory.filter(d => d.stateId === id).length;
+```
+
+<!-- embed BigNumber into cards -->
+
+<div class="grid grid-cols-4">
+  <div class="card">
+    <h2>United States</h2>
+    ${BigNumber(countLaunchesByStateId("US"), {title: "Launches"})}
+  </div>
+  <div class="card">
+    <h2>Soviet Union</h2>
+    ${BigNumber(countLaunchesByStateId("SU"), {title: "Launches"})}
+  </div>
+  <div class="card">
+    <h2>Russia</h2>
+    ${BigNumber(countLaunchesByStateId("RU"), {title: "Launches"})}
+  </div>
+  <div class="card">
+    <h2>China</h2>
+    ${BigNumber(countLaunchesByStateId("CN"), {title: "Launches"})}
+  </div>
+</div>
+
+<!-- plot of launch history -->
+
+<div class="card grid grid-cols-8">
+  ${resize((width) => Plot.plot({
+    width,
+    title: "Launches Over the Years",
+    height: 300,
+    x: { label: null, interval: "year" },
+    y: { grid: true, label: "Lunches" },
+    color: { legend: true },
+    marks: [
+      Plot.barY(
+        launchHistory,
+        Plot.groupX({ y: "count" }, { x: d => new Date(d.date), fill: "state" })
+      ),
+      Plot.ruleY([0])
+    ]
+  }))}
+</div>
+
+<!-- plot of launch vehicles -->
+
+<div class="card grid grid-cols-8">
+  ${resize((width) => Plot.plot({
+    width,
+    title: "Popular Launch Vehicles",
+    marginLeft: 65,
+    height: 300,
+    x: { grid: true, label: "Launches" },
+    y: { label: "Launch Vehicle Family" },
+    color: { legend: true },
+    marks: [
+      Plot.barX(
+        launchHistory,
+        Plot.groupY({ x: "count" }, { y: "family",  fill: "state", sort: { y: "x", reverse: true }})
+      ),
+      Plot.ruleX([0])
+    ]
+  }))}
+</div>
+
+Data from J. McDowell: [General Catalog of Artificial Space Objects](https://planet4589.org/space/gcat).

template/docs/example-report.md.tmpl

@@ -0,0 +1,5 @@
+# Example Report
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

template/docs/index.md.tmpl

@@ -1,3 +1,10 @@
 # {{projectTitle}}
 
-This is the default generated content. 1 + 1 = ${1 + 1}
+To update these pages edit files in
+
+```
+/docs
+```
+
+See the [Command Line Interface](https://cli.observablehq.com/) documentation and [example projects](https://cli-exapmles.observablehq.com/) for guidance and inspiration.
+