Show the number of PREreviews per month

Refs #19

src/data/reviews.json.ts

@@ -2,8 +2,13 @@ import { HttpClient, Terminal } from '@effect/platform'
 import { NodeTerminal } from '@effect/platform-node'
 import { Schema } from '@effect/schema'
 import { Config, Effect, Redacted } from 'effect'
+import * as Temporal from '../lib/Temporal.js'
 
-const Reviews = Schema.Array(Schema.Struct({}))
+const Reviews = Schema.Array(
+  Schema.Struct({
+    createdAt: Temporal.PlainDateFromStringSchema,
+  }),
+)
 
 const program = Effect.gen(function* () {
   const terminal = yield* Terminal.Terminal

src/lib/Temporal.ts

@@ -1,12 +1,15 @@
 import { ParseResult, Schema } from '@effect/schema'
 import { Temporal } from '@js-temporal/polyfill'
 
-export const { Instant } = Temporal
+export const { Instant, PlainDate } = Temporal
 
 export type Instant = Temporal.Instant
+export type PlainDate = Temporal.PlainDate
 
 export const InstantFromSelfSchema = Schema.instanceOf(Temporal.Instant)
 
+export const PlainDateFromSelfSchema = Schema.instanceOf(PlainDate)
+
 export const InstantFromStringSchema: Schema.Schema<Instant, string> = Schema.transformOrFail(
   Schema.String,
   InstantFromSelfSchema,
@@ -19,3 +22,16 @@ export const InstantFromStringSchema: Schema.Schema<Instant, string> = Schema.tr
     encode: instant => ParseResult.succeed(instant.toString()),
   },
 )
+
+export const PlainDateFromStringSchema: Schema.Schema<PlainDate, string> = Schema.transformOrFail(
+  Schema.String,
+  PlainDateFromSelfSchema,
+  {
+    decode: (date, _, ast) =>
+      ParseResult.try({
+        try: () => PlainDate.from(date, { overflow: 'reject' }),
+        catch: () => new ParseResult.Type(ast, date),
+      }),
+    encode: plainDate => ParseResult.succeed(plainDate.toString()),
+  },
+)

src/reviews.md

@@ -7,7 +7,16 @@ toc: false
 # PREreviews ✍️
 
 ```js
-const reviews = FileAttachment('./data/reviews.json').json()
+const parseDate = d3.utcParse('%Y-%m-%d')
+
+const reviews = FileAttachment('./data/reviews.json')
+  .json()
+  .then(data => data.map(review => ({ ...review, createdAt: parseDate(review.createdAt) })))
+```
+
+```js
+const now = new Date()
+const firstReview = d3.min(reviews, review => review.createdAt)
 ```
 
 <div class="grid grid-cols-4">
@@ -16,3 +25,34 @@ const reviews = FileAttachment('./data/reviews.json').json()
     <span class="big">${reviews.length.toLocaleString("en-US")}</span>
   </div>
 </div>
+
+```js
+function reviewsTimeline({ width } = {}) {
+  return Plot.plot({
+    title: 'PREreviews per month',
+    width: Math.max(width, 600),
+    height: 400,
+    y: { grid: true, label: 'PREreviews', tickFormat: Math.floor, interval: 1 },
+    x: { label: '', domain: [d3.utcMonth.floor(firstReview), d3.utcMonth.ceil(now)] },
+    marks: [
+      Plot.rectY(
+        reviews,
+        Plot.binX(
+          { y: 'count' },
+          {
+            x: 'createdAt',
+            interval: d3.utcMonth,
+            tip: true,
+          },
+        ),
+      ),
+    ],
+  })
+}
+```
+
+<div class="grid grid-cols-1">
+  <div class="card">
+    ${resize((width) => reviewsTimeline({width}))}
+  </div>
+</div>