Charts

import * as React from "react"

import { RevenueChart } from "./charts-01.client"
import { revenueByRange } from "./charts-01.data"

/**
 * Revenue a day, in one framed card: an area in the accent over the last 7,
 * 30 or 90 full days, picked by segmented chips on the card's strip, with the
 * span before on request as a dashed ghost and the daily average as a rule.
 *
 * A server component: it counts every range through `./charts-01.data` and
 * hands the island all three, so a chip switches rows rather than fetching
 * them. The heading is written here and handed over drawn.
 */
export function Charts01() {
  const titleId = React.useId()

  return (
    <section
      data-section="charts-01"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <RevenueChart heading={<h2 id={titleId}>Revenue</h2>} ranges={revenueByRange()} />
      </div>
    </section>
  )
}

export default Charts01

"use client"

import * as React from "react"

import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { AreaChart } from "@/components/ui/area-chart"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { type ChartAnnotation, type ChartSeries } from "@/components/ui/chart-core"
import { ChartTimeRange } from "@/components/ui/chart-time-range"
import { MetricDelta } from "@/components/ui/metric-delta"

import type { RangeKey, RevenueRange } from "./charts-01.data"

/** The ranges the chips offer. UI vocabulary, so it lives with the chips. */
const RANGES: { value: RangeKey; label: string }[] = [
  { value: "7d", label: "7D" },
  { value: "30d", label: "30D" },
  { value: "90d", label: "90D" },
]

/**
 * The one series, in the accent, with the span before it as a ghost in the
 * neutral grey — which stays grey under every preset, so the comparison never
 * reads as a second measure.
 */
const SERIES: ChartSeries[] = [
  { key: "revenue", label: "Revenue", color: "var(--brand)", compareKey: "before", compareColor: "var(--chart-neutral)" },
]

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const day = (date: string | number) => DAY.format(new Date(`${date}T00:00:00Z`))
const dollars = (value: number) => formatCurrency(value, "USD", { maximumFractionDigits: 0 })

/** "12.3% more than" or "4.0% less than": the change in words. */
function compared(delta: number): string {
  if (delta === 0) return "level with"
  return `${formatPercent(Math.abs(delta), { maximumFractionDigits: 1 })} ${delta > 0 ? "more than" : "less than"}`
}

/**
 * Revenue a day as one area in the accent, with the range picked by segmented
 * chips on the card's strip — the chosen chip on the accent's tint — and a
 * Compare toggle that lays the span before behind it, dashed. Over the plot,
 * the range's total with its change as a pill; under it, a caption that says
 * the same in a sentence, including the best day.
 */
export function RevenueChart({ heading, ranges }: { heading: React.ReactNode; ranges: Record<RangeKey, RevenueRange> }) {
  const [range, setRange] = React.useState<RangeKey>("30d")
  const [compare, setCompare] = React.useState(false)
  const view = ranges[range]
  const data = view.points.map((point) => ({
    date: point.date,
    revenue: point.cents / 100,
    before: point.previousCents / 100,
  }))
  const delta = view.previousCents === 0 ? 0 : view.cents / view.previousCents - 1
  const average = view.cents / 100 / view.days
  const annotations: ChartAnnotation[] = [{ kind: "line", value: average, label: "Daily average", tone: "neutral" }]

  return (
    <Card>
      {/* On a phone the controls take a row of their own under the title,
          rather than squeezing it into a column beside them. */}
      <CardHeader className="max-sm:has-data-[slot=card-action]:grid-cols-1">
        <CardTitle>{heading}</CardTitle>
        <CardDescription className="tabular-nums">{view.label}</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-start-3 max-sm:justify-self-start max-sm:pt-1">
          <ChartTimeRange
            size="sm"
            value={range}
            onValueChange={(next) => setRange(next as RangeKey)}
            options={RANGES}
            compare={compare}
            onCompareChange={setCompare}
            // A key that toggles every chart on a page at once is the page's
            // to bind, not one card's.
            compareHotkey={false}
          />
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <span className="type-numeral text-3xl">{dollars(view.cents / 100)}</span>
          <MetricDelta value={delta} variant="pill" size="sm" />
          <span className="text-xs text-muted-foreground tabular-nums">
            vs {dollars(view.previousCents / 100)} the {view.days} days before · {formatNumber(view.orders)} orders
          </span>
        </div>
        <figure className="flex flex-col gap-3">
          <AreaChart
            data={data}
            index="date"
            series={SERIES}
            compare={compare}
            annotations={annotations}
            valueFormatter={dollars}
            indexFormatter={day}
            showLegend={false}
            height={240}
          />
          <figcaption className="text-xs text-pretty text-muted-foreground">
            Revenue a day, {view.label}: {dollars(view.cents / 100)} from {formatNumber(view.orders)} orders,{" "}
            {compared(delta)} the {view.days} days before. The best day was {day(view.best.date)}, at{" "}
            {dollars(view.best.cents / 100)}.{compare ? ` The ${view.days} days before are dashed behind.` : ""}
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * What `charts-01` reads: the store's revenue a day at a time over the last
 * 7, 30 and 90 full days, each day beside the same day of the span before it
 * — from the paid orders in `db.orders` (paid and fulfilled; a pending cart,
 * a refund and a cancellation are not sales). A day is a UTC calendar day and
 * today, still running, is left out. "Now" is `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server. The
 * island takes every range's rows at once, so switching one fetches nothing.
 */
import { REFERENCE_DATE, db, type Order } from "@/lib/sample-data"

const DAY_MS = 86_400_000

/** The orders that count as a sale. */
const SOLD: readonly Order["status"][] = ["paid", "fulfilled"]

export type RangeKey = "7d" | "30d" | "90d"

/** The ranges the chips offer, in days. */
export const RANGE_DAYS: Record<RangeKey, number> = { "7d": 7, "30d": 30, "90d": 90 }

export type RevenueDay = {
  /** `YYYY-MM-DD`, UTC. */
  date: string
  /** The day's revenue, in cents. */
  cents: number
  /** The same day of the span before, in cents: day one of this range beside day one of that. */
  previousCents: number
}

export type RevenueRange = {
  days: number
  /** One entry a day, oldest first. */
  points: RevenueDay[]
  /** The range's revenue and orders, and the same over the span before. */
  cents: number
  orders: number
  previousCents: number
  /** The best day; the earlier one on a tie. */
  best: RevenueDay
  /** The first and last day, as a reader says them: "Aug 5 – Sep 3, 2026". */
  label: string
}

/** Midnight UTC today, where every range ends. */
function today(): number {
  return Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth(), REFERENCE_DATE.getUTCDate())
}

/** One range: `days` full days back from today, each beside the matching day before. */
function range(days: number, sales: Order[]): RevenueRange {
  const to = today()
  const from = to - days * DAY_MS
  const before = from - days * DAY_MS
  const points: RevenueDay[] = Array.from({ length: days }, (_, index) => ({
    date: new Date(from + index * DAY_MS).toISOString().slice(0, 10),
    cents: 0,
    previousCents: 0,
  }))
  let orders = 0
  for (const order of sales) {
    const at = order.placedAt.getTime()
    if (at >= from && at < to) {
      points[Math.floor((at - from) / DAY_MS)].cents += order.totalCents
      orders += 1
    } else if (at >= before && at < from) {
      points[Math.floor((at - before) / DAY_MS)].previousCents += order.totalCents
    }
  }
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return {
    days,
    points,
    cents: points.reduce((sum, point) => sum + point.cents, 0),
    orders,
    previousCents: points.reduce((sum, point) => sum + point.previousCents, 0),
    best: points.reduce((best, point) => (point.cents > best.cents ? point : best), points[0]),
    label: format.formatRange(new Date(from), new Date(to - DAY_MS)),
  }
}

/** Every range the chips offer, counted once on the server. */
export function revenueByRange(): Record<RangeKey, RevenueRange> {
  const sales = db.orders.all().filter((order) => SOLD.includes(order.status))
  return {
    "7d": range(RANGE_DAYS["7d"], sales),
    "30d": range(RANGE_DAYS["30d"], sales),
    "90d": range(RANGE_DAYS["90d"], sales),
  }
}

import * as React from "react"

import { RegionTraffic } from "./charts-02.client"
import { sessionsByRegion } from "./charts-02.data"

/**
 * Sessions an hour by region over the last 24 hours, as three lines in one
 * framed card: the region in focus in the accent, the others in grey, and a
 * legend of toggles on the card's strip that moves the focus.
 *
 * A server component: it adds the hourly readings up through
 * `./charts-02.data` and hands the island plain rows. The heading is written
 * here and handed over drawn.
 */
export function Charts02() {
  const titleId = React.useId()
  const { hours, regions } = sessionsByRegion()

  return (
    <section
      data-section="charts-02"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <RegionTraffic heading={<h2 id={titleId}>Traffic by region</h2>} hours={hours} regions={regions} />
      </div>
    </section>
  )
}

export default Charts02

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { formatNumber } from "@/lib/format"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { type ChartSeries } from "@/components/ui/chart-core"
import { LineChart } from "@/components/ui/line-chart"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

import type { RegionHour, RegionKey, RegionSummary } from "./charts-02.data"

const HOUR = new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit", hourCycle: "h23", timeZone: "UTC" })
const hour = (value: string | number) => HOUR.format(new Date(value))

/**
 * The regions as lines: the one in focus in the accent and drawn last, so it
 * sits on top where lines cross; the others in the neutral grey, as context.
 */
function seriesFor(regions: readonly RegionSummary[], focus: RegionKey): ChartSeries[] {
  const line = (region: RegionKey): ChartSeries => ({
    key: region,
    label: region,
    color: region === focus ? "var(--brand)" : "var(--chart-neutral)",
  })
  return [...regions.map((entry) => entry.region).filter((region) => region !== focus), focus].map(line)
}

/**
 * Sessions an hour by region, as three lines over the last 24 hours. The
 * legend on the card's strip is a row of toggles that puts one region in
 * focus: its line takes the accent and the figures over the plot, and the
 * other two stay drawn in grey, so the waves the time zones make can still
 * be read against each other.
 */
export function RegionTraffic({
  heading,
  hours,
  regions,
}: {
  heading: React.ReactNode
  hours: RegionHour[]
  regions: RegionSummary[]
}) {
  const busiest = regions.reduce((best, entry) => (entry.total > best.total ? entry : best), regions[0])
  const [focus, setFocus] = React.useState<RegionKey>(busiest.region)
  const current = regions.find((entry) => entry.region === focus) ?? busiest
  const first = hours[0]?.hour
  const last = hours[hours.length - 1]?.hour

  return (
    <Card>
      {/* On a phone the controls take a row of their own under the title,
          rather than squeezing it into a column beside them. */}
      <CardHeader className="max-sm:has-data-[slot=card-action]:grid-cols-1">
        <CardTitle>{heading}</CardTitle>
        <CardDescription>The last 24 hours, an hour at a time, in UTC</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-start-3 max-sm:justify-self-start max-sm:pt-1">
          <ToggleGroup
            aria-label="Region in focus"
            variant="outline"
            size="sm"
            spacing={0}
            value={[focus]}
            // Pressing the region already in focus would leave none; one always is.
            onValueChange={(next) => {
              const [chosen] = next
              if (chosen) setFocus(chosen as RegionKey)
            }}
          >
            {regions.map((entry) => (
              <ToggleGroupItem
                key={entry.region}
                value={entry.region}
                className="gap-1.5 aria-pressed:bg-brand-muted aria-pressed:text-foreground"
              >
                <span
                  aria-hidden="true"
                  className={cn("size-2 rounded-full", entry.region === focus ? "bg-primary" : "bg-chart-neutral")}
                />
                {entry.region}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <span className="type-numeral text-3xl">{formatNumber(current.total)}</span>
          <span className="text-xs text-muted-foreground tabular-nums">
            sessions from {current.region} · busiest at {hour(current.peak.hour)} with{" "}
            {formatNumber(current.peak.sessions)} · {formatNumber(current.latest)} in the last hour
          </span>
        </div>
        <figure className="flex flex-col gap-3">
          <LineChart
            data={hours}
            index="hour"
            series={seriesFor(regions, focus)}
            valueFormatter={(value) => formatNumber(value)}
            indexFormatter={hour}
            height={260}
          />
          <figcaption className="text-xs text-pretty text-muted-foreground">
            Sessions an hour by region, from {first ? hour(first) : ""} yesterday to the hour now running,{" "}
            {last ? hour(last) : ""} UTC. {current.region} is in the
            accent: {formatNumber(current.total)} sessions, busiest at {hour(current.peak.hour)}. The other regions are
            drawn in grey behind it.
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * What `charts-02` reads: the last 24 hours of traffic from `db.sessions` —
 * one reading an hour from every country — added up by region, hour by
 * hour. The hours are the ones the readings cover, the last ending at
 * `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { db, type Session } from "@/lib/sample-data"

export type RegionKey = Session["region"]

/** The regions, west to east: the order the legend reads in. */
export const REGIONS: readonly RegionKey[] = ["Americas", "EMEA", "APAC"]

/** One hour: when it started, as an ISO instant, and each region's sessions in it. */
export type RegionHour = { hour: string } & Record<RegionKey, number>

export type RegionSummary = {
  region: RegionKey
  /** Sessions over the 24 hours. */
  total: number
  /** The busiest hour; the earlier one on a tie. */
  peak: { hour: string; sessions: number }
  /** The last hour's sessions. */
  latest: number
}

/** The regions' sessions hour by hour, oldest first, and what each adds up to. */
export function sessionsByRegion(): { hours: RegionHour[]; regions: RegionSummary[] } {
  const byHour = new Map<string, RegionHour>()
  for (const reading of db.sessions.all()) {
    const hour = reading.at.toISOString()
    const row = byHour.get(hour) ?? { hour, Americas: 0, EMEA: 0, APAC: 0 }
    row[reading.region] += reading.sessions
    byHour.set(hour, row)
  }
  const hours = [...byHour.values()].sort((a, b) => a.hour.localeCompare(b.hour))
  const regions = REGIONS.map((region) => {
    const peak = hours.reduce((best, row) => (row[region] > best[region] ? row : best), hours[0])
    return {
      region,
      total: hours.reduce((sum, row) => sum + row[region], 0),
      peak: { hour: peak.hour, sessions: peak[region] },
      latest: hours[hours.length - 1][region],
    }
  })
  return { hours, regions }
}

import * as React from "react"

import { TokenColumns } from "./charts-03.client"
import { tokensByDay } from "./charts-03.data"

/**
 * The model gateway's tokens a day as stacked columns in one framed card —
 * prompt in grey, completion in the accent — with a switch on the strip
 * between the counts and each day's split as a share.
 *
 * A server component: it adds the requests up through `./charts-03.data` and
 * hands the island plain days. The heading is written here and handed over
 * drawn.
 */
export function Charts03() {
  const titleId = React.useId()

  return (
    <section
      data-section="charts-03"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <TokenColumns heading={<h2 id={titleId}>Tokens</h2>} use={tokensByDay()} />
      </div>
    </section>
  )
}

export default Charts03

"use client"

import * as React from "react"

import { formatCompact, formatPercent } from "@/lib/format"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { type ChartSeries } from "@/components/ui/chart-core"
import { StackedBarChart } from "@/components/ui/stacked-bar-chart"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

import type { TokenUse } from "./charts-03.data"

type Mode = "tokens" | "share"

const MODES: { value: Mode; label: string }[] = [
  { value: "tokens", label: "Tokens" },
  { value: "share", label: "Share" },
]

/**
 * Prompt tokens in the neutral grey, completion tokens in the accent: the
 * completion is what a model wrote back, the part a longer answer grows, so
 * it is the one the eye is sent to.
 */
const SERIES: ChartSeries[] = [
  { key: "prompt", label: "Prompt", color: "var(--chart-neutral)" },
  { key: "completion", label: "Completion", color: "var(--brand)" },
]

const DAY = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
const day = (date: string | number) => DAY.format(new Date(`${date}T00:00:00Z`))
const tokens = (value: number) => formatCompact(value)

/**
 * The gateway's tokens a day as stacked columns — prompt below, completion on
 * top — over four weeks, with segmented chips on the card's strip that switch
 * between the counts and each day's split as a share, which is where a drift
 * towards longer answers shows.
 */
export function TokenColumns({ heading, use }: { heading: React.ReactNode; use: TokenUse }) {
  const [mode, setMode] = React.useState<Mode>("tokens")
  const total = use.prompt + use.completion
  const completionShare = total === 0 ? 0 : use.completion / total

  return (
    <Card>
      {/* On a phone the controls take a row of their own under the title,
          rather than squeezing it into a column beside them. */}
      <CardHeader className="max-sm:has-data-[slot=card-action]:grid-cols-1">
        <CardTitle>{heading}</CardTitle>
        <CardDescription className="tabular-nums">{use.label}</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-start-3 max-sm:justify-self-start max-sm:pt-1">
          <ToggleGroup
            aria-label="Show as"
            variant="outline"
            size="sm"
            spacing={0}
            value={[mode]}
            // One view is always shown; pressing it again keeps it.
            onValueChange={(next) => {
              const [chosen] = next
              if (chosen) setMode(chosen as Mode)
            }}
          >
            {MODES.map((entry) => (
              <ToggleGroupItem key={entry.value} value={entry.value} className="aria-pressed:bg-brand-muted aria-pressed:text-foreground">
                {entry.label}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <span className="type-numeral text-3xl">{tokens(total)}</span>
          <span className="text-xs text-muted-foreground tabular-nums">
            tokens · {formatPercent(completionShare, { maximumFractionDigits: 1 })} completion
          </span>
        </div>
        <figure className="flex flex-col gap-3">
          <StackedBarChart
            data={use.days}
            index="date"
            series={SERIES}
            percent={mode === "share"}
            valueFormatter={tokens}
            indexFormatter={day}
            height={260}
          />
          <figcaption className="text-xs text-pretty text-muted-foreground">
            Tokens a day, {use.label}: {tokens(total)} in all,{" "}
            {formatPercent(completionShare, { maximumFractionDigits: 1 })} of them completion. The heaviest day was{" "}
            {day(use.heaviest.date)}, at {tokens(use.heaviest.prompt + use.heaviest.completion)}.
            {mode === "share" ? " Each column is drawn as a share of its day." : ""}
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * What `charts-03` reads: the tokens the model gateway handled a day over
 * the last 28 full days, split into the prompt a request sent and the
 * completion it got back — from `db.aiRequests`. A day is a UTC calendar
 * day, and today, still running, is left out. "Now" is `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db } from "@/lib/sample-data"

/** Four weeks of full days. */
export const WINDOW_DAYS = 28

const DAY_MS = 86_400_000

export type TokenDay = {
  /** `YYYY-MM-DD`, UTC. */
  date: string
  prompt: number
  completion: number
}

export type TokenUse = {
  /** One entry a day, oldest first. */
  days: TokenDay[]
  prompt: number
  completion: number
  /** The day with the most tokens; the earlier one on a tie. */
  heaviest: TokenDay
  /** "Aug 7 – Sep 3, 2026". */
  label: string
}

/** The gateway's tokens a day over the last `days` full days, prompt and completion apart. */
export function tokensByDay(days = WINDOW_DAYS): TokenUse {
  const to = Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth(), REFERENCE_DATE.getUTCDate())
  const from = to - days * DAY_MS
  const ledger: TokenDay[] = Array.from({ length: days }, (_, index) => ({
    date: new Date(from + index * DAY_MS).toISOString().slice(0, 10),
    prompt: 0,
    completion: 0,
  }))
  for (const request of db.aiRequests.all()) {
    const at = request.at.getTime()
    if (at < from || at >= to) continue
    const day = ledger[Math.floor((at - from) / DAY_MS)]
    day.prompt += request.promptTokens
    day.completion += request.completionTokens
  }
  const load = (day: TokenDay) => day.prompt + day.completion
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return {
    days: ledger,
    prompt: ledger.reduce((sum, day) => sum + day.prompt, 0),
    completion: ledger.reduce((sum, day) => sum + day.completion, 0),
    heaviest: ledger.reduce((best, day) => (load(day) > load(best) ? day : best), ledger[0]),
    label: format.formatRange(new Date(from), new Date(to - DAY_MS)),
  }
}

import * as React from "react"

import { CountryRanks } from "./charts-04.client"
import { revenueByCountry } from "./charts-04.data"

/**
 * Revenue by country as ranked bars in one framed card: the range in the
 * accent and the span before in grey, the range picked by segmented chips on
 * the strip, the countries past the eighth as one row at the foot.
 *
 * A server component: it ranks both ranges through `./charts-04.data` and
 * hands the island plain rows. The heading is written here and handed over
 * drawn.
 */
export function Charts04() {
  const titleId = React.useId()

  return (
    <section
      data-section="charts-04"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <CountryRanks heading={<h2 id={titleId}>Revenue by country</h2>} rankings={revenueByCountry()} />
      </div>
    </section>
  )
}

export default Charts04

"use client"

import * as React from "react"

import { formatCurrency, formatNumber, formatPercent } from "@/lib/format"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { type ChartSeries } from "@/components/ui/chart-core"
import { ChartTimeRange } from "@/components/ui/chart-time-range"
import { HorizontalBarChart } from "@/components/ui/horizontal-bar-chart"

import type { CountryRanking, CountryRow, RangeKey } from "./charts-04.data"

const RANGES: { value: RangeKey; label: string; days: number }[] = [
  { value: "30d", label: "30D", days: 30 },
  { value: "90d", label: "90D", days: 90 },
]

const dollars = (value: number) => formatCurrency(value, "USD", { maximumFractionDigits: 0 })
const ORDINAL = new Intl.PluralRules("en-US", { type: "ordinal" })
const SUFFIX: Record<string, string> = { one: "st", two: "nd", few: "rd", other: "th" }
const place = (rank: number) => `${rank}${SUFFIX[ORDINAL.select(rank)]}`

/** The country that climbed furthest among the ranked ones, if any did. */
function climber(rows: CountryRow[]): CountryRow | null {
  let best: CountryRow | null = null
  for (const row of rows) {
    if (row.previousRank === null || row.previousRank <= row.rank) continue
    if (!best || row.previousRank - row.rank > (best.previousRank ?? 0) - best.rank) best = row
  }
  return best
}

/**
 * Revenue by country as ranked bars, best at the top: the range in the
 * accent, the span before it in grey on the bar below, so a country's rise
 * or fall reads beside its rank. The range is picked by segmented chips on
 * the card's strip; the countries past the eighth are one row at the foot.
 */
export function CountryRanks({
  heading,
  rankings,
}: {
  heading: React.ReactNode
  rankings: Record<RangeKey, CountryRanking>
}) {
  const [range, setRange] = React.useState<RangeKey>("90d")
  const view = rankings[range]
  const days = RANGES.find((entry) => entry.value === range)?.days ?? 0
  const series: ChartSeries[] = [
    { key: "current", label: `Last ${days} days`, color: "var(--brand)" },
    { key: "previous", label: `${days} days before`, color: "var(--chart-neutral)" },
  ]
  const data = [
    ...view.rows.map((row) => ({ country: row.country, current: row.cents / 100, previous: row.previousCents / 100 })),
    ...(view.rest
      ? [{ country: `${view.rest.countries} others`, current: view.rest.cents / 100, previous: view.rest.previousCents / 100 }]
      : []),
  ]
  const [leader] = view.rows
  const leaderShare = view.totalCents === 0 || !leader ? 0 : leader.cents / view.totalCents
  const moved = climber(view.rows)

  return (
    <Card>
      {/* On a phone the controls take a row of their own under the title,
          rather than squeezing it into a column beside them. */}
      <CardHeader className="max-sm:has-data-[slot=card-action]:grid-cols-1">
        <CardTitle>{heading}</CardTitle>
        <CardDescription className="tabular-nums">{view.label}</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-start-3 max-sm:justify-self-start max-sm:pt-1">
          <ChartTimeRange
            size="sm"
            value={range}
            onValueChange={(next) => setRange(next as RangeKey)}
            options={RANGES.map(({ value, label }) => ({ value, label }))}
          />
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <span className="type-numeral text-3xl">{dollars(view.totalCents / 100)}</span>
          <span className="text-xs text-muted-foreground tabular-nums">
            from {formatNumber(view.rows.length + (view.rest?.countries ?? 0))} countries
          </span>
        </div>
        <figure className="flex flex-col gap-3">
          <HorizontalBarChart
            data={data}
            index="country"
            series={series}
            valueFormatter={dollars}
            // The value scale printed along the foot, so a bar is a measure and not only a length.
            showXAxis
            // Two bars a country, and room for the scale and the key under them.
            height={data.length * 44 + 60}
          />
          <figcaption className="text-xs text-pretty text-muted-foreground">
            Revenue by the country an order shipped to, {view.label}.{" "}
            {leader
              ? `${leader.country} leads with ${dollars(leader.cents / 100)}, ${formatPercent(leaderShare, { maximumFractionDigits: 0 })} of the total.`
              : "Nothing sold in this range."}{" "}
            {moved
              ? `${moved.country} climbed furthest, from ${place(moved.previousRank ?? 0)} to ${place(moved.rank)}.`
              : `No ranked country climbed from the ${days} days before.`}
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * What `charts-04` reads: the store's revenue by the country each paid order
 * shipped to, over the last 30 or 90 full days and the span before — from
 * `db.orders` (paid and fulfilled; a pending cart, a refund and a
 * cancellation are not sales). Today, still running, is left out. "Now" is
 * `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, db, type Order } from "@/lib/sample-data"

const DAY_MS = 86_400_000

/** The orders that count as a sale. */
const SOLD: readonly Order["status"][] = ["paid", "fulfilled"]

export type RangeKey = "30d" | "90d"

/** The ranges the chips offer, in days. */
export const RANGE_DAYS: Record<RangeKey, number> = { "30d": 30, "90d": 90 }

/** How many countries are ranked by name; the rest are one row. */
export const RANKED = 8

export type CountryRow = {
  country: string
  /** Revenue over the range and over the span before, in cents. */
  cents: number
  previousCents: number
  /** 1 for the country that sold the most. */
  rank: number
  /** Its place over the span before; null where it sold nothing then. */
  previousRank: number | null
}

export type CountryRanking = {
  /** The ranked countries, best first. */
  rows: CountryRow[]
  /** Everything past the ranked countries, as one row; null when there is nothing past them. */
  rest: { countries: number; cents: number; previousCents: number } | null
  totalCents: number
  /** "Jun 6 – Sep 3, 2026". */
  label: string
}

/** Countries by revenue over a span, best first; a tie goes to the name. */
function standings(sales: Order[], from: number, to: number): [string, number][] {
  const byCountry = new Map<string, number>()
  for (const order of sales) {
    const at = order.placedAt.getTime()
    if (at >= from && at < to) byCountry.set(order.country, (byCountry.get(order.country) ?? 0) + order.totalCents)
  }
  return [...byCountry.entries()].sort(([a, x], [b, y]) => y - x || a.localeCompare(b))
}

function ranking(days: number, sales: Order[]): CountryRanking {
  const to = Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth(), REFERENCE_DATE.getUTCDate())
  const from = to - days * DAY_MS
  const current = standings(sales, from, to)
  const previous = standings(sales, from - days * DAY_MS, from)
  const before = new Map(previous.map(([country, cents], index) => [country, { cents, rank: index + 1 }]))

  const rows = current.map(([country, cents], index) => ({
    country,
    cents,
    previousCents: before.get(country)?.cents ?? 0,
    rank: index + 1,
    previousRank: before.get(country)?.rank ?? null,
  }))
  const tail = rows.slice(RANKED)
  const format = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" })
  return {
    rows: rows.slice(0, RANKED),
    rest:
      tail.length === 0
        ? null
        : {
            countries: tail.length,
            cents: tail.reduce((sum, row) => sum + row.cents, 0),
            previousCents: tail.reduce((sum, row) => sum + row.previousCents, 0),
          },
    totalCents: rows.reduce((sum, row) => sum + row.cents, 0),
    label: format.formatRange(new Date(from), new Date(to - DAY_MS)),
  }
}

/** Every range the chips offer, ranked once on the server. */
export function revenueByCountry(): Record<RangeKey, CountryRanking> {
  const sales = db.orders.all().filter((order) => SOLD.includes(order.status))
  return { "30d": ranking(RANGE_DAYS["30d"], sales), "90d": ranking(RANGE_DAYS["90d"], sales) }
}

import * as React from "react"

import { PlanDonut } from "./charts-05.client"
import { customersByPlan } from "./charts-05.data"

/**
 * Customers by plan as a donut in one framed card: the total in the hole, and
 * a key beside it that picks which plan's slice takes the accent.
 *
 * A server component: it counts through `./charts-05.data` and hands the
 * island plain slices. The heading is written here and handed over drawn.
 */
export function Charts05() {
  const titleId = React.useId()
  const { slices, total } = customersByPlan()

  return (
    <section
      data-section="charts-05"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <PlanDonut heading={<h2 id={titleId}>Customers by plan</h2>} slices={slices} total={total} />
      </div>
    </section>
  )
}

export default Charts05

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { formatCurrency, formatNumber } from "@/lib/format"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DonutChart } from "@/components/ui/donut-chart"
import { Toggle } from "@/components/ui/toggle"

import type { PlanKey, PlanSlice } from "./charts-05.data"

/** A share to a tenth, always with its tenth, so the key's column lines up: "32.0%", never "32%". */
const share = (part: number, whole: number) => `${(whole === 0 ? 0 : (part / whole) * 100).toFixed(1)}%`
const dollars = (cents: number) => formatCurrency(cents / 100, "USD", { maximumFractionDigits: 0 })

/**
 * Customers by plan as a donut with the total in its hole, and beside it a
 * key that is also the control: pick a plan and its slice takes the accent
 * while the others stay in one grey, so the part being read is never one
 * colour among four. The largest plan is picked to begin with.
 */
export function PlanDonut({
  heading,
  slices,
  total,
}: {
  heading: React.ReactNode
  slices: PlanSlice[]
  total: number
}) {
  const largest = slices.reduce((best, slice) => (slice.count > best.count ? slice : best), slices[0])
  const [picked, setPicked] = React.useState<PlanKey>(largest.plan)
  const current = slices.find((slice) => slice.plan === picked) ?? largest
  const paint = (plan: PlanKey) => (plan === picked ? "var(--brand)" : "var(--chart-neutral)")

  return (
    <Card>
      <CardHeader>
        <CardTitle>{heading}</CardTitle>
        <CardDescription>Active and trialling accounts, by the plan each is on</CardDescription>
      </CardHeader>
      <CardContent>
        <figure className="flex flex-col gap-4">
          <div className="grid items-center gap-6 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
            <DonutChart
              data={slices.map((slice) => ({ name: slice.label, value: slice.count, color: paint(slice.plan) }))}
              valueFormatter={(value) => formatNumber(value)}
              centerValue={formatNumber(total)}
              centerLabel="customers"
              showLegend={false}
              height={240}
              innerRadius={78}
            />
            {/* The key is the control: a toggle a plan, one of them pressed at a
                time. Separate toggles rather than a roving group, so each is a
                tab stop and the list reads top to bottom. */}
            <div role="group" aria-label="Plan drawn in the accent" className="flex flex-col gap-1">
              {slices.map((slice) => (
                <Toggle
                  key={slice.plan}
                  pressed={slice.plan === picked}
                  // One plan is always picked; pressing it again keeps it.
                  onPressedChange={(pressed) => {
                    if (pressed) setPicked(slice.plan)
                  }}
                  className="h-auto w-full justify-between gap-3 py-2 text-left font-normal aria-pressed:bg-brand-muted aria-pressed:font-medium"
                >
                  <span className="flex min-w-0 items-center gap-2">
                    <span
                      aria-hidden="true"
                      className={cn("size-2.5 shrink-0 rounded-[2px]", slice.plan === picked ? "bg-primary" : "bg-chart-neutral")}
                    />
                    <span className="truncate">{slice.label}</span>
                  </span>
                  <span className="flex items-baseline gap-2 tabular-nums">
                    <span>{formatNumber(slice.count)}</span>
                    <span className="w-12 text-right text-xs text-muted-foreground">{share(slice.count, total)}</span>
                  </span>
                </Toggle>
              ))}
            </div>
          </div>
          <figcaption className="text-xs text-pretty text-muted-foreground">
            {formatNumber(total)} customers on the books. {current.label}, in the accent, has{" "}
            {formatNumber(current.count)} of them, {share(current.count, total)}, bringing in{" "}
            {dollars(current.mrrCents)} a month.
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * What `charts-05` reads: the customers on the books from `db.customers` —
 * active or on a trial; a churned or suspended account is not one — counted
 * by the plan each is on, with the monthly recurring revenue each plan brings.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { db, type Customer } from "@/lib/sample-data"

export type PlanKey = Customer["plan"]

/** The plans, cheapest first: the order the key reads in. */
const PLANS: { plan: PlanKey; label: string }[] = [
  { plan: "free", label: "Free" },
  { plan: "starter", label: "Starter" },
  { plan: "team", label: "Team" },
  { plan: "enterprise", label: "Enterprise" },
]

/** The accounts that count as customers. */
const ON_THE_BOOKS: readonly Customer["status"][] = ["active", "trial"]

export type PlanSlice = {
  plan: PlanKey
  label: string
  count: number
  /** What the plan's customers pay a month, in cents; a trial pays nothing yet. */
  mrrCents: number
}

/** The customers on the books by plan, cheapest plan first. */
export function customersByPlan(): { slices: PlanSlice[]; total: number } {
  const customers = db.customers.all().filter((customer) => ON_THE_BOOKS.includes(customer.status))
  const slices = PLANS.map(({ plan, label }) => {
    const mine = customers.filter((customer) => customer.plan === plan)
    return { plan, label, count: mine.length, mrrCents: mine.reduce((sum, customer) => sum + customer.mrrCents, 0) }
  })
  return { slices, total: customers.length }
}

import * as React from "react"

import { OccupancyRings } from "./charts-06.client"
import { occupancy } from "./charts-06.data"

/**
 * How full the hotel is, as radial progress in one framed card: the house on
 * a large ring and each room type on a small one, for tonight, tomorrow or
 * the next seven nights, picked by segmented chips on the strip.
 *
 * A server component: it counts every span through `./charts-06.data` and
 * hands the island all three. The heading is written here and handed over
 * drawn.
 */
export function Charts06() {
  const titleId = React.useId()

  return (
    <section
      data-section="charts-06"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <OccupancyRings heading={<h2 id={titleId}>Occupancy</h2>} spans={occupancy()} />
      </div>
    </section>
  )
}

export default Charts06

"use client"

import * as React from "react"

import { formatNumber, formatPercent } from "@/lib/format"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ChartTimeRange } from "@/components/ui/chart-time-range"
import { ScoreRing } from "@/components/ui/score-ring"

import type { Occupancy, SpanKey } from "./charts-06.data"

const SPANS: { value: SpanKey; label: string; spoken: string }[] = [
  { value: "tonight", label: "Tonight", spoken: "tonight" },
  { value: "tomorrow", label: "Tomorrow", spoken: "tomorrow night" },
  { value: "week", label: "7 nights", spoken: "over the next seven nights" },
]

/** Whole percent, the way a ring prints it. */
const percent = (part: number, whole: number) => (whole === 0 ? 0 : Math.round((part / whole) * 100))

/**
 * How full the hotel is, as rings: the house on one large ring in the
 * accent, and each room type on a small one beside it, so a full suite floor
 * behind a half-empty house reads at a glance. The night — tonight, tomorrow
 * or the next seven — is picked by segmented chips on the card's strip.
 */
export function OccupancyRings({ heading, spans }: { heading: React.ReactNode; spans: Record<SpanKey, Occupancy> }) {
  const [key, setKey] = React.useState<SpanKey>("tonight")
  const view = spans[key]
  const spoken = SPANS.find((entry) => entry.value === key)?.spoken ?? ""
  const unit = view.nights === 1 ? "rooms" : "room nights"
  const fullest = view.types.reduce((best, entry) =>
    percent(entry.booked, entry.available) > percent(best.booked, best.available) ? entry : best
  )

  return (
    <Card>
      {/* On a phone the controls take a row of their own under the title,
          rather than squeezing it into a column beside them. */}
      <CardHeader className="max-sm:has-data-[slot=card-action]:grid-cols-1">
        <CardTitle>{heading}</CardTitle>
        <CardDescription className="tabular-nums">{view.label}</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-start-3 max-sm:justify-self-start max-sm:pt-1">
          <ChartTimeRange
            size="sm"
            aria-label="Nights"
            value={key}
            onValueChange={(next) => setKey(next as SpanKey)}
            options={SPANS.map(({ value, label }) => ({ value, label }))}
          />
        </CardAction>
      </CardHeader>
      <CardContent>
        <figure className="flex flex-col gap-6">
          <div className="grid items-center gap-6 sm:grid-cols-[auto_minmax(0,1fr)] sm:gap-10">
            <ScoreRing
              value={percent(view.booked, view.available)}
              tone="default"
              size={176}
              strokeWidth={14}
              format={(value) => `${value}%`}
              aria-label={`Rooms booked ${spoken}`}
              label={`${formatNumber(view.booked)} of ${formatNumber(view.available)} ${unit}`}
              className="justify-self-center"
            />
            <ul className="grid gap-4 sm:grid-cols-3">
              {view.types.map((entry) => (
                <li key={entry.type} className="flex items-center gap-4">
                  <ScoreRing
                    value={percent(entry.booked, entry.available)}
                    tone="default"
                    size={72}
                    strokeWidth={7}
                    format={(value) => `${value}%`}
                    aria-label={`${entry.label} rooms booked ${spoken}`}
                  />
                  <div className="flex min-w-0 flex-col gap-0.5">
                    <span className="text-sm font-medium">{entry.label}</span>
                    <span className="text-xs text-muted-foreground tabular-nums">
                      {formatNumber(entry.booked)} of {formatNumber(entry.available)} {unit}
                    </span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
          <figcaption className="text-xs text-pretty text-muted-foreground">
            {formatNumber(view.booked)} of {formatNumber(view.available)} {unit} are booked {spoken},{" "}
            {formatPercent(view.available === 0 ? 0 : view.booked / view.available, { maximumFractionDigits: 0 })}
            {key === "tonight"
              ? `: ${formatNumber(view.inHouse)} are in house and ${formatNumber(view.due)} are due to arrive`
              : ""}
            .{" "}
            {fullest.label} rooms are the fullest, at {percent(fullest.booked, fullest.available)}%.
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}

/**
 * What `charts-06` reads: how full the hotel is tonight, tomorrow and over the
 * next seven nights, from `db.bookings` and the `ROOMS` it lets. A night is
 * the date a stay covers — a guest who arrives on the 1st and leaves on the
 * 3rd holds the room on the nights of the 1st and the 2nd — and a room is
 * booked for it when the stay is in house or confirmed; a cancellation and a
 * no-show hold nothing. "Tonight" is the night of `REFERENCE_DATE`.
 *
 * Selectors only, reading `db` inside functions and run on the server.
 */
import { REFERENCE_DATE, ROOMS, db, type Booking, type Room } from "@/lib/sample-data"

const DAY_MS = 86_400_000

export type SpanKey = "tonight" | "tomorrow" | "week"

export type RoomType = Room["type"]

/** The stays that hold a room. */
const HOLDING: readonly Booking["status"][] = ["checked_in", "confirmed"]

const TYPES: { type: RoomType; label: string }[] = [
  { type: "standard", label: "Standard" },
  { type: "deluxe", label: "Deluxe" },
  { type: "suite", label: "Suite" },
]

export type TypeLoad = { type: RoomType; label: string; booked: number; available: number }

export type Occupancy = {
  /** How many nights the span covers. */
  nights: number
  /** Room nights booked and on offer across the span. */
  booked: number
  available: number
  /** Tonight only: guests already in, and stays due to arrive. */
  inHouse: number
  due: number
  types: TypeLoad[]
  /** "Fri, Sep 4" for a night, "Sep 4 – 10" for a week. */
  label: string
}

/** Occupancy over `nights` nights from `offset` nights after tonight. */
function span(offset: number, nights: number, stays: Booking[]): Occupancy {
  const tonight = Date.UTC(REFERENCE_DATE.getUTCFullYear(), REFERENCE_DATE.getUTCMonth(), REFERENCE_DATE.getUTCDate())
  const first = tonight + offset * DAY_MS
  const typeOf = new Map(ROOMS.map((room) => [room.id, room.type]))
  const types = TYPES.map(({ type, label }) => ({
    type,
    label,
    booked: 0,
    available: ROOMS.filter((room) => room.type === type).length * nights,
  }))
  let inHouse = 0
  let due = 0
  for (let night = first; night < first + nights * DAY_MS; night += DAY_MS) {
    for (const stay of stays) {
      if (stay.checkIn.getTime() > night || stay.checkOut.getTime() <= night) continue
      const load = types.find((entry) => entry.type === typeOf.get(stay.roomId))
      if (load) load.booked += 1
      if (night === tonight) {
        if (stay.status === "checked_in") inHouse += 1
        else due += 1
      }
    }
  }
  const day = new Intl.DateTimeFormat("en-US", { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" })
  const range = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })
  return {
    nights,
    booked: types.reduce((sum, entry) => sum + entry.booked, 0),
    available: ROOMS.length * nights,
    inHouse,
    due,
    types,
    label: nights === 1 ? day.format(new Date(first)) : range.formatRange(new Date(first), new Date(first + (nights - 1) * DAY_MS)),
  }
}

/** Tonight, tomorrow night and the seven nights from tonight. */
export function occupancy(): Record<SpanKey, Occupancy> {
  const stays = db.bookings.all().filter((booking) => HOLDING.includes(booking.status))
  return { tonight: span(0, 1, stays), tomorrow: span(1, 1, stays), week: span(0, 7, stays) }
}

import * as React from "react"

import { CountryScatter } from "./charts-07.client"
import { countryTraffic } from "./charts-07.data"

/**
 * Every country's last 24 hours as a point in one framed card — sessions
 * across, p95 response time up — with the region picked on the strip drawn
 * in the accent and the rest of the world in grey.
 *
 * A server component: it adds the hourly readings up through
 * `./charts-07.data` and hands the island plain points. The heading is
 * written here and handed over drawn.
 */
export function Charts07() {
  const titleId = React.useId()

  return (
    <section
      data-section="charts-07"
      data-slot="section"
      aria-labelledby={titleId}
      className="w-full bg-background p-4 text-foreground md:p-6"
    >
      <div className="mx-auto max-w-7xl">
        <CountryScatter heading={<h2 id={titleId}>Traffic against speed</h2>} points={countryTraffic()} />
      </div>
    </section>
  )
}

export default Charts07

"use client"

import * as React from "react"

import { formatCompact, formatNumber } from "@/lib/format"
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ScatterChart, type ScatterSeries } from "@/components/ui/scatter-chart"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

import type { CountryPoint, RegionKey } from "./charts-07.data"

const REGIONS: readonly RegionKey[] = ["Americas", "EMEA", "APAC"]

const ms = (value: number) => `${formatNumber(Math.round(value))} ms`

/** The slowest and quickest of some countries, by p95. */
function extremes(points: CountryPoint[]) {
  const sorted = [...points].sort((a, b) => a.p95Ms - b.p95Ms)
  return { quickest: sorted[0], slowest: sorted[sorted.length - 1] }
}

/**
 * Every country as a point — its sessions across, its p95 response time up —
 * with one region in the accent and the rest in grey, the region picked by
 * segmented chips on the card's strip. It answers whether a slow country is
 * slow because it is busy or because of where it is.
 */
export function CountryScatter({ heading, points }: { heading: React.ReactNode; points: CountryPoint[] }) {
  const [region, setRegion] = React.useState<RegionKey>("APAC")
  const mine = points.filter((point) => point.region === region)
  const others = points.filter((point) => point.region !== region)
  const toPoint = (point: CountryPoint) => ({ x: point.sessions, y: point.p95Ms, label: point.country })
  // The picked region last, so its points sit on top where they overlap.
  const series: ScatterSeries[] = [
    { name: "Other regions", color: "var(--chart-neutral)", data: others.map(toPoint) },
    { name: region, color: "var(--brand)", data: mine.map(toPoint) },
  ]
  const own = mine.length > 0 ? extremes(mine) : null
  const rest = others.length > 0 ? extremes(others) : null
  const sessions = mine.reduce((sum, point) => sum + point.sessions, 0)

  return (
    <Card>
      {/* On a phone the controls take a row of their own under the title,
          rather than squeezing it into a column beside them. */}
      <CardHeader className="max-sm:has-data-[slot=card-action]:grid-cols-1">
        <CardTitle>{heading}</CardTitle>
        <CardDescription>Sessions and p95 response time by country, the last 24 hours</CardDescription>
        <CardAction className="max-sm:col-start-1 max-sm:row-start-3 max-sm:justify-self-start max-sm:pt-1">
          <ToggleGroup
            aria-label="Region in the accent"
            variant="outline"
            size="sm"
            spacing={0}
            value={[region]}
            // One region is always picked; pressing it again keeps it.
            onValueChange={(next) => {
              const [chosen] = next
              if (chosen) setRegion(chosen as RegionKey)
            }}
          >
            {REGIONS.map((entry) => (
              <ToggleGroupItem key={entry} value={entry} className="aria-pressed:bg-brand-muted aria-pressed:text-foreground">
                {entry}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-4">
        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
          <span className="type-numeral text-3xl">{own ? `${Math.round(own.quickest.p95Ms)}–${ms(own.slowest.p95Ms)}` : "—"}</span>
          <span className="text-xs text-muted-foreground tabular-nums">
            p95 across {region}&apos;s {formatNumber(mine.length)} countries · {formatCompact(sessions)} sessions
          </span>
        </div>
        <figure className="flex flex-col gap-3">
          <ScatterChart
            series={series}
            xLabel="Sessions, last 24 hours"
            yLabel="p95 response time"
            xFormatter={(value) => formatCompact(value)}
            yFormatter={ms}
            height={300}
          />
          <figcaption className="text-xs text-pretty text-muted-foreground">
            Each country&apos;s sessions against its p95 response time.{" "}
            {own
              ? `${region}'s ${formatNumber(mine.length)} countries, in the accent, run from ${ms(own.quickest.p95Ms)} in ${own.quickest.country} to ${ms(own.slowest.p95Ms)} in ${own.slowest.country}`
              : `${region} sent no traffic`}
            {rest ? `; the rest of the world runs from ${ms(rest.quickest.p95Ms)} to ${ms(rest.slowest.p95Ms)}.` : "."}
          </figcaption>
        </figure>
      </CardContent>
    </Card>
  )
}