default template component (#574)

* * add a Plot component
* remove the bignumber component

closes #534
related #248

* fix test

Author: Fil

templates/default/docs/components/bigNumber.js.tmpl

@@ -0,0 +1,31 @@
+import * as Plot from "npm:@observablehq/plot";
+import * as d3 from "npm:d3";
+
+export function timeline(events) {
+  return Plot.plot({
+    insetTop: 30,
+    insetBottom: 10,
+    insetRight: 10,
+    height: 250,
+    x: {
+      domain: d3.extent(events, (d) => d["year"]),
+      label: "Year",
+      nice: true,
+    },
+    y: { axis: null },
+    marks: [
+      Plot.axisX({tickFormat: d3.format(".0f")}),
+      Plot.ruleX(events, {x: "year", y: "y", stroke: "#eee", strokeWidth: 2}),
+      Plot.ruleY([0], {stroke: "#eee"}),
+      Plot.dot(events, {x: "year", y: "y", fill: "currentColor", r: 5}),
+      Plot.text(events, {
+        x: "year",
+        y: "y",
+        text: "name",
+        dy: -20,
+        lineWidth: 10,
+        fontSize: 12,
+      }),
+    ]
+  });
+}

templates/default/docs/components/timeline.js.tmpl

@@ -5,38 +5,36 @@ theme: dashboard
 
 # Rocket launches 🚀
 
-<!-- import components and tools -->
-
-```js
-import {BigNumber} from "./components/bigNumber.js";
-```
-
 <!-- load and transform the data -->
 
 ```js
-const launchHistory = await FileAttachment("data/launchHistory.csv") // data loader
-  .csv({typed: true})
-const countLaunchesByStateId = id => launchHistory.filter(d => d.stateId === id).length;
+const launchHistory = await FileAttachment("data/launchHistory.csv")
+  .csv({typed: true});
+
+const format = d3.format(",");
+function launches(id) {
+  return format(launchHistory.filter((d) => d.stateId === id).length);
+}
 ```
 
-<!-- embed BigNumber into cards -->
+<!-- cards with big numbers -->
 
 <div class="grid grid-cols-4">
   <div class="card">
     <h2>United States</h2>
-    ${BigNumber(countLaunchesByStateId("US"), {title: "Launches"})}
+    <span class="big">${launches("US")}</span>
   </div>
   <div class="card">
     <h2>Soviet Union</h2>
-    ${BigNumber(countLaunchesByStateId("SU"), {title: "Launches"})}
+    <span class="big">${launches("SU")}</span>
   </div>
   <div class="card">
     <h2>Russia</h2>
-    ${BigNumber(countLaunchesByStateId("RU"), {title: "Launches"})}
+    <span class="big">${launches("RU")}</span>
   </div>
   <div class="card">
     <h2>China</h2>
-    ${BigNumber(countLaunchesByStateId("CN"), {title: "Launches"})}
+    <span class="big">${launches("CN")}</span>
   </div>
 </div>
 
@@ -45,17 +43,17 @@ const countLaunchesByStateId = id => launchHistory.filter(d => d.stateId === id)
 <div class="card grid grid-cols-8">
   ${resize((width) => Plot.plot({
     width,
-    title: "Launches Over the Years",
+    title: "Launches over the years",
     height: 300,
-    x: { label: null, interval: "year" },
-    y: { grid: true, label: "Launches" },
-    color: { legend: true, label: "State" },
+    x: {label: null, interval: "year"},
+    y: {grid: true, label: "Launches"},
+    color: {legend: true, label: "State"},
     marks: [
       Plot.barY(
         launchHistory,
         Plot.groupX(
-          { y: "count" },
-          { x: d => new Date(d.date), fill: "state", tip: {format: {x: false}} }
+          {y: "count"},
+          {x: d => new Date(d.date), fill: "state", tip: {format: {x: false}}}
         )
       ),
       Plot.ruleY([0])

templates/default/docs/example-dashboard.md.tmpl

@@ -2,9 +2,9 @@
 toc: true
 ---
 
-# A brief history of rocket launches 🚀
+# A brief history of space exploration
 
-This report is a brief overview of the history and current state of rocket launches and general space exploration.
+This report is a brief overview of the history and current state of rocket launches and space exploration.
 
 ## Background
 
@@ -16,37 +16,16 @@ This led to the launch of the first artificial satellite, Sputnik 1, and the man
 
 ## The Space Shuttle era
 
-The late 20th century witnessed a significant milestone in rocket launches.
+```js
+const events = FileAttachment("./data/spaceHistory.json").json();
+```
 
 ```js
-const events = await FileAttachment("./data/spaceHistory.json").json(); // static file
+import {timeline} from "./components/timeline.js";
 ```
 
 ```js
-const timeline = Plot.plot({
-  insetTop: 30,
-  insetBottom: 10,
-  insetRight: 10,
-  height: 250,
-  x: {
-    domain: d3.extent(events, d => d["year"]),
-    label: "Year",
-    nice: true
-  },
-  y: { axis: null },
-  marks: [
-    Plot.axisX({
-      tickFormat: d3.format(".0f"),
-    }),
-    Plot.ruleX(events, { x: "year", y: "y", stroke: "#eee", strokeWidth: 2 }),
-    Plot.ruleY([0], {stroke: "#eee"}),
-    Plot.dot(events, {x: "year" , y: "y", fill: "currentColor", r: 5}),
-    Plot.text(
-      events,
-      {x: "year", y: "y", text: "name", dy: -20, lineWidth: 10, fontSize: 12}),
-  ]
-});
-display(timeline);
+display(timeline(events));
 ```
 
 ### Sputnik 1 (1957)

templates/default/docs/example-report.md.tmpl

@@ -12,7 +12,7 @@ describe("create", async () => {
       new Set(effects.outputs.keys()),
       new Set([
         "template-test/.gitignore",
-        "template-test/docs/components/bigNumber.js",
+        "template-test/docs/components/timeline.js",
         "template-test/docs/data/launchHistory.csv.js",
         "template-test/docs/data/spaceHistory.json",
         "template-test/docs/example-dashboard.md",