Show the number of review requests per week

package.json

@@ -5,6 +5,7 @@
     "@effect/platform": "^0.57.4",
     "@effect/platform-node": "^0.51.13",
     "@effect/schema": "^0.68.1",
+    "@js-temporal/polyfill": "^0.4.4",
     "@observablehq/framework": "^1.9.0",
     "d3-dsv": "^3.0.1",
     "d3-time-format": "^4.1.0",

src/data/requests.json.ts

@@ -2,8 +2,9 @@ import { HttpClient, Terminal } from '@effect/platform'
 import { NodeTerminal } from '@effect/platform-node'
 import { Schema } from '@effect/schema'
 import { Effect } from 'effect'
+import * as Temporal from '../lib/Temporal.js'
 
-const Requests = Schema.Array(Schema.Struct({}))
+const Requests = Schema.Array(Schema.Struct({ timestamp: Temporal.InstantFromStringSchema }))
 
 const program = Effect.gen(function* () {
   const terminal = yield* Terminal.Terminal

src/lib/Temporal.ts

@@ -0,0 +1,21 @@
+import { ParseResult, Schema } from '@effect/schema'
+import { Temporal } from '@js-temporal/polyfill'
+
+export const { Instant } = Temporal
+
+export type Instant = Temporal.Instant
+
+export const InstantFromSelfSchema = Schema.instanceOf(Temporal.Instant)
+
+export const InstantFromStringSchema: Schema.Schema<Instant, string> = Schema.transformOrFail(
+  Schema.String,
+  InstantFromSelfSchema,
+  {
+    decode: (date, _, ast) =>
+      ParseResult.try({
+        try: () => Instant.from(date),
+        catch: () => new ParseResult.Type(ast, date),
+      }),
+    encode: instant => ParseResult.succeed(instant.toString()),
+  },
+)

src/requests.md

@@ -7,7 +7,11 @@ toc: false
 # Review requests 🤞
 
 ```js
-const requests = FileAttachment('./data/requests.json').json()
+const parseTimestamp = d3.utcParse('%Y-%m-%dT%H:%M:%S.%LZ')
+
+const requests = FileAttachment('./data/requests.json')
+  .json()
+  .then(data => data.map(request => ({ ...request, timestamp: parseTimestamp(request.timestamp) })))
 ```
 
 <div class="grid grid-cols-4">
@@ -16,3 +20,29 @@ const requests = FileAttachment('./data/requests.json').json()
     <span class="big">${requests.length.toLocaleString("en-US")}</span>
   </div>
 </div>
+
+```js
+function requestsTimeline({ width } = {}) {
+  return Plot.plot({
+    title: 'Requests per week',
+    width: Math.max(width, 600),
+    height: 400,
+    color: {},
+    y: { grid: true, label: 'Requests' },
+    x: { label: '' },
+    marks: [
+      Plot.rectY(
+        requests,
+        Plot.binX({ y: 'count' }, { x: 'timestamp', interval: d3.utcWeek, fill: 'var(--theme-foreground-focus)' }),
+      ),
+      Plot.ruleY([0]),
+    ],
+  })
+}
+```
+
+<div class="grid grid-cols-1">
+  <div class="card">
+    ${resize((width) => requestsTimeline({width}))}
+  </div>
+</div>