From 9a9a40a05c0775220bd7accf1686da8f64ace3f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Fri, 19 Jan 2024 15:56:01 -0800 Subject: [PATCH 1/2] * add a Plot component * remove the bignumber component closes #534 related #248 --- .../default/docs/components/bigNumber.js.tmpl | 31 --------------- .../default/docs/components/timeline.js.tmpl | 31 +++++++++++++++ .../default/docs/example-dashboard.md.tmpl | 38 +++++++++---------- templates/default/docs/example-report.md.tmpl | 35 ++++------------- 4 files changed, 56 insertions(+), 79 deletions(-) delete mode 100644 templates/default/docs/components/bigNumber.js.tmpl create mode 100644 templates/default/docs/components/timeline.js.tmpl diff --git a/templates/default/docs/components/bigNumber.js.tmpl b/templates/default/docs/components/bigNumber.js.tmpl deleted file mode 100644 index dd5b1dfa4..000000000 --- a/templates/default/docs/components/bigNumber.js.tmpl +++ /dev/null @@ -1,31 +0,0 @@ -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`
-
${title}
-
-
${format(number)}
- ${trend == null - ? null - : html`
${trendFormat(trend)} ${trendArrow}
`} -
- ${plot} -
`; - return href == null ? div : html`${div}`; -} diff --git a/templates/default/docs/components/timeline.js.tmpl b/templates/default/docs/components/timeline.js.tmpl new file mode 100644 index 000000000..5f51809a2 --- /dev/null +++ b/templates/default/docs/components/timeline.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, + }), + ] + }); +} diff --git a/templates/default/docs/example-dashboard.md.tmpl b/templates/default/docs/example-dashboard.md.tmpl index 4b79a0170..ee60de246 100644 --- a/templates/default/docs/example-dashboard.md.tmpl +++ b/templates/default/docs/example-dashboard.md.tmpl @@ -5,38 +5,36 @@ theme: dashboard # Rocket launches 🚀 - - -```js -import {BigNumber} from "./components/bigNumber.js"; -``` - ```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); +} ``` - +

United States

- ${BigNumber(countLaunchesByStateId("US"), {title: "Launches"})} + ${launches("US")}

Soviet Union

- ${BigNumber(countLaunchesByStateId("SU"), {title: "Launches"})} + ${launches("SU")}

Russia

- ${BigNumber(countLaunchesByStateId("RU"), {title: "Launches"})} + ${launches("RU")}

China

- ${BigNumber(countLaunchesByStateId("CN"), {title: "Launches"})} + ${launches("CN")}
@@ -45,17 +43,17 @@ const countLaunchesByStateId = id => launchHistory.filter(d => d.stateId === id)
${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]) diff --git a/templates/default/docs/example-report.md.tmpl b/templates/default/docs/example-report.md.tmpl index 820d86358..f3c922fe0 100644 --- a/templates/default/docs/example-report.md.tmpl +++ b/templates/default/docs/example-report.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) From f6c356de80f6a199376b9fb6ba5d312e0a5bc980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Fri, 19 Jan 2024 16:10:46 -0800 Subject: [PATCH 2/2] fix test --- test/create-test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/create-test.ts b/test/create-test.ts index b993c519c..13e164a83 100644 --- a/test/create-test.ts +++ b/test/create-test.ts @@ -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",