components/usage-meter/usage-meter.react.tsx

Functions

Imports

It imports components/meter/meter.react.tsx, components/status/status.react.tsx, components/usage-meter/usage-meter.ts. No module of this repo imports it.

Source

1import type { ReactNode } from "react";
2import { Meter } from "../meter/meter.react.tsx";
3import { Glyph } from "../status/status.react.tsx";
4import { assess, type UsageAssessment } from "./usage-meter.ts";
5
6export interface UsageItem {
7  id: string;
8  // "Worker requests"
9  name: string;
10  // The amount as a person reads it: "61,400 of 100,000 today".
11  amount: string;
12  // The same amount for a screen reader, with its unit: "61,400 of 100,000 requests today".
13  amountSpoken?: string;
14  used: number;
15  limit: number;
16  history: number[];
17  resetsAt: number | Date | null;
18  unit?: string;
19  atLimit?: string;
20}
21
22export interface UsageMeterProps {
23  items: UsageItem[];
24  // The time of the reading. Defaults to now.
25  now?: number | Date;
26  // "Read 6 minutes ago". With `stale`, the line carries a warning status word.
27  freshness?: ReactNode;
28  stale?: boolean;
29  // The text legend under the bars; on by default.
30  legend?: boolean;
31}
32
33function UsageRow({ item, a, stale }: { item: UsageItem; a: UsageAssessment; stale: boolean }) {
34  const spoken = `${item.amountSpoken ?? item.amount}, ${a.projection}${stale ? ", reading is stale" : ""}`;
35  // The row is the shared meter (components/meter): its bar, tone word and amount; the why
36  // line goes after the bar.
37  return (
38    <Meter
39      as="li"
40      className="cap-usage-item"
41      label={item.name}
42      value={item.used}
43      max={item.limit}
44      display={item.amount}
45      valueText={spoken}
46      tone={a.tone}
47      words={{ warn: a.label, crit: a.label }}
48      projected={a.projectedAtReset == null ? undefined : Math.round(a.projectedAtReset)}
49      after={
50        <p className="cap-usage-why">
51          <strong className="cap-usage-lead">{a.lead}</strong>
52          {a.text.slice(a.lead.length)}
53        </p>
54      }
55    />
56  );
57}
58
59export function UsageMeter({ items, now = Date.now(), freshness, stale = false, legend = true }: UsageMeterProps) {
60  return (
61    <div className="cap-usage" data-cap="usage-meter" data-cap-ready="">
62      {freshness != null && (
63        <p className="cap-usage-fresh" data-stale={stale ? "" : undefined}>
64          {stale && (
65            <span className="cap-status" data-tone="warn">
66              <Glyph name="warn" />
67              Stale
68            </span>
69          )}
70          <span>{freshness}</span>
71        </p>
72      )}
73      <ul className="cap-usage-list">
74        {items.map((item) => (
75          <UsageRow key={item.id} item={item} stale={stale} a={assess({ used: item.used, limit: item.limit, history: item.history, resetsAt: item.resetsAt, now, unit: item.unit, atLimit: item.atLimit })} />
76        ))}
77      </ul>
78      {legend && (
79        <ul className="cap-usage-legend" aria-label="Key">
80          <li>
81            <span className="cap-usage-key" data-key="used" aria-hidden="true" />
82            Solid: used
83          </li>
84          <li>
85            <span className="cap-usage-key" data-key="projected" aria-hidden="true" />
86            Hatched: where the day ends at the current rate
87          </li>
88        </ul>
89      )}
90    </div>
91  );
92}