Meter grid | Arcadia Design

Claude1 of 4 open

5-hourin 1h 15mWeeklySat 12:25

import { useState } from "react";
import { MeterGrid } from "@arcadia/ui";

function Pool({ accounts, windows, ends, count, point = null }: {
  accounts: Account[]; windows: Kind[]; ends: Partial<Record<Kind, string>>; count: string; point?: string | null;
}) {
  const [active, setActive] = useState(point);
  const at = accounts.find((a) => a.id === active);
  const rows: MeterGridRow[] = windows.map((w) => ({
    id: w, label: LABELS[w], end: at ? said(at.off ? undefined : at.r[w]) : ends[w],
    segments: accounts.flatMap((a) => segment(a, w) ?? []),
  }));
  return (
    <div {...sx("cmp-meter-grid-card", s.card)}>
      <div {...sx("cmp-meter-grid-head", s.head)}>
        <span {...sx("cmp-meter-grid-title", s.title)}>Claude</span>
        {at ? (
          <span {...sx("cmp-meter-grid-who", s.who, s.note)}>
            {at.lit && <span {...sx("cmp-meter-grid-dot", s.dot)} />}
            <span>{at.id}</span>{" "}<span {...sx("cmp-meter-grid-plan", s.plan)}>{at.off ? "Sign-in expired" : at.plan}</span>
          </span>
        ) : <span {...sx("cmp-meter-grid-count", s.note)}>{count}</span>}
      </div>
      <MeterGrid rows={rows} active={active} onActiveChange={setActive} label="Claude usage"
        columnLabel={(id) => `${id}, ${accounts.find((a) => a.id === id)!.say}`} />
    </div>
  );
}

Four accounts at 15:25: one open and lit, two closed by their 5-hour with their weeks still there, one closed by its week with its full 5-hour quiet. Point at a column to read that account.

TSX

import { MeterGrid } from "@arcadia/ui";

<MeterGrid label="Usage" rows={[
  { id: "5h", label: "5-hour", end: "in 1h 15m", segments: [{ id: "a", value: 86, emphasis: "strong" }, { id: "b", value: 0, tone: "danger" }] },
  { id: "week", label: "Weekly", segments: [{ id: "a", value: 64, emphasis: "strong" }, { id: "b", value: 58 }] },
]} />

Rows of MeterGroups over the same columns, in one grid of a label column, the strips and an end column, so a column reads down every row: a window per row, an account per column. A column a row lacks keeps a blank slot (state="none"), so nothing shifts. Past five columns every strip goes dense together.

One column is read at a time, in every row at once: active, and onActiveChange when the pointer comes to a column in any row. The gaps between columns and rows keep the last one, so a readout never blinks between two; leaving the grid clears it. Swap the head and the row ends for the active column's values to turn the grid into one account's readout.

Examples

Pointing at a column

The other columns dim, the head names the account and each row ends in its value there: a spent window in red, this chat's account led by its dot.

Claude[email protected] Max

5-hourin 2h 37mWeekly58% left

Claude[email protected] Max

5-hour86% leftWeekly64% left

<Pool accounts={OWNER} windows={["5h", "week"]} ends={{}} count="1 of 4 open" point="[email protected]" />
<Pool accounts={OWNER} windows={["5h", "week"]} ends={{}} count="1 of 4 open" point="[email protected]" />

Fifteen accounts

Fifteen columns of about 10px still read as a picture: the open block, then the spent, then the one to sign in again.

Claude11 of 15 open

5-hourin 3h 10mWeeklySat 21:25

<Pool accounts={FIFTEEN} windows={["5h", "week"]} ends={{ "5h": "in 3h 10m", week: "Sat 21:25" }} count="11 of 15 open" />

A blank slot

A Pro plan has no Fable window: its column stays in place with nothing drawn.

Claude3 of 5 open

5-hourWeeklyFable weeklyFri 20:25

<Pool accounts={FABLE} windows={["5h", "week", "fable"]} ends={{ fable: "Fri 20:25" }} count="3 of 5 open" />

A return

Two hours on, a spent 5-hour comes back: its red fades, its fill grows, and the strong ink moves to the account now in use.

Claude1 of 4 open

5-hourin 1h 15mWeeklySat 12:25

import { useState } from "react";
import { Button } from "@arcadia/ui";

function Return() {
  const [later, setLater] = useState(false);
  return (
    <div {...sx("cmp-meter-grid-stack", s.stack)}>
      <Pool accounts={later ? LATER : OWNER} windows={["5h", "week"]} ends={{ "5h": later ? "in 51m" : "in 1h 15m", week: "Sat 12:25" }}
        count={later ? "2 of 4 open" : "1 of 4 open"} />
      <Button size="sm" variant="secondary" onClick={() => setLater((x) => !x)}>{later ? "Back to 15:25" : "Two hours later"}</Button>
    </div>
  );
}

rootStyle takes layout and these knobs.

--meter-grid-row-h: Ref<Space>Default var(--space-6); A row's height: its segments' hit area.
--meter-grid-end-w: Ref<Space> | DerivedDefault calc(var(--space-16) * 1.25); The end column's floor, so a longer end never moves the strips.

The grid is a group named by label. Its strips are one tab stop: Left and Right move along the columns, Home and End go to the ends, and Escape lets go. Each column is spoken by columnLabel(id), so say the whole account there: its name, whether it is open, and when it comes back. The strips themselves are decorative, and the row labels and ends are plain text beside them.

MeterGrid

rowsrequired: readonly MeterGridRow[]
active: string | null; The column being read, in every row at once.
onActiveChange: (id: string | null) => void; The pointer or the arrows came to a column, or left (null).
labelrequired: string; The grid's accessible name ("Claude usage").
columnLabel: (id: string) => stringDefault (id) => id; A column's spoken name. Default: its id.
size: "sm" | "md"Default "md"
rootStyle: RootStyle<MeterGridKnobs>; Typed StyleX override: layout and the --meter-grid-* knobs.

Usage

Examples

Pointing at a column

Fifteen accounts

A blank slot

A return

Customising

Accessibility

API reference

MeterGrid