components/stat-tile/stat-tile.react.tsx

Functions

Imports

It imports components/chart-frame/chart-frame.react.tsx, components/chart-frame/chart-frame.ts. No module of this repo imports it.

Source

1import { Children, useId, type ReactNode } from "react";
2import { ChartData } from "../chart-frame/chart-frame.react.tsx";
3import type { DataTable } from "../chart-frame/chart-frame.ts";
4
5export type StatTone = "ok" | "warn" | "crit" | "nodata";
6
7export interface StatTileLinkProps {
8  href: string;
9  className: string;
10  "data-tone"?: StatTone;
11  "aria-describedby"?: string;
12  children: ReactNode;
13}
14
15interface StatTileBase {
16  label: string;
17  tone?: StatTone;
18  // Where the figure stands against its threshold: "Over limit", "Near limit", "All up".
19  // Shown with a status glyph when the tone is warn or crit.
20  word?: string;
21  detail?: ReactNode;
22  // Enarratio's sparkline() output, an SVG string, placed in the chart slot as it comes.
23  chart?: string;
24  // One sentence with the chart's numbers: "Actions minutes per day, last 7 days: 260 rising to 340."
25  chartSummary?: string;
26  // The chart's numbers (Enarratio's sparklineTable().table). With it the tile sits in a chart
27  // frame and "Show data" opens the table under the tile, outside the link. Name it in
28  // chartTableLabel ("Actions minutes by day").
29  chartTable?: DataTable;
30  chartTableLabel?: string;
31  // Opens the view behind the figure: a link with href, or a button with onClick.
32  href?: string;
33  onClick?: () => void;
34  renderLink?: (props: StatTileLinkProps) => ReactNode;
35}
36
37export type StatTileProps =
38  | (StatTileBase & { tone?: "ok" | "warn" | "crit"; figure: ReactNode; unit?: ReactNode })
39  // No data is a state with a reason, never a zero: the figure says "No data" and the
40  // reason is the detail line.
41  | (StatTileBase & { tone: "nodata"; reason: string; figure?: never; unit?: never });
42
43const GLYPH: Record<"warn" | "crit" | "nodata", ReactNode> = {
44  crit: (
45    <>
46      <path fill="currentColor" d="M5 1h6l4 4v6l-4 4H5l-4-4V5z" />
47      <path fill="var(--surface)" d="M7.2 4h1.6v5H7.2zM7.2 10.4h1.6V12H7.2z" />
48    </>
49  ),
50  warn: (
51    <>
52      <path fill="currentColor" d="M8 1.2 15.4 14H.6z" />
53      <path fill="var(--surface)" d="M7.3 6h1.4v4H7.3zM7.3 11h1.4v1.4H7.3z" />
54    </>
55  ),
56  nodata: <><circle cx="8" cy="8" r="6.2" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M5 8h6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></>,
57};
58
59function Glyph({ tone }: { tone: "warn" | "crit" | "nodata" }) {
60  return (
61    <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
62      {GLYPH[tone]}
63    </svg>
64  );
65}
66
67const plainLink = ({ children, ...props }: StatTileLinkProps) => <a {...props}>{children}</a>;
68
69export function StatTile(props: StatTileProps) {
70  const { label, tone, word, chart, chartSummary, chartTable, chartTableLabel, href, onClick, renderLink = plainLink } = props;
71  const id = useId();
72  const nodata = props.tone === "nodata";
73  const describedBy = chart && chartSummary && !nodata ? `${id}-chart` : undefined;
74
75  // The figure, its label and its word on one line, the detail beneath (the Portal's compact
76  // tile). The figure comes first in the DOM, so the name reads "6 of 6 Sites up All up".
77  const body =
78    props.tone === "nodata" ? (
79      <>
80        <span className="cap-tile-line">
81          <span className="cap-tile-figure">
82            <Glyph tone="nodata" />
83            No data
84          </span>
85          <span className="cap-tile-label">{label}</span>
86        </span>
87        <span className="cap-tile-detail">{props.reason}</span>
88      </>
89    ) : (
90      <>
91        <span className="cap-tile-line">
92          <span className="cap-tile-figure">
93            {props.figure}
94            {props.unit ? <> <small>{props.unit}</small></> : null}
95          </span>
96          <span className="cap-tile-label">{label}</span>
97          {word ? (
98            <span className="cap-tile-word">
99              {props.tone === "warn" || props.tone === "crit" ? <Glyph tone={props.tone} /> : null}
100              {word}
101            </span>
102          ) : null}
103        </span>
104        {props.detail ? <span className="cap-tile-detail">{props.detail}</span> : null}
105        {chart ? <span className="cap-tile-chart" aria-hidden="true" dangerouslySetInnerHTML={{ __html: chart }} /> : null}
106      </>
107    );
108
109  const tile =
110    href !== undefined ? (
111      renderLink({ href, className: "cap-tile", "data-tone": tone, "aria-describedby": describedBy, children: body })
112    ) : (
113      <button type="button" className="cap-tile" data-tone={tone} aria-describedby={describedBy} onClick={onClick}>
114        {body}
115      </button>
116    );
117
118  // With a table the tile joins the chart frame: the sentence is the frame's summary (hidden
119  // visually, still text), and "Show data" sits under the tile, never inside the link.
120  if (describedBy && chartTable) {
121    return (
122      <div className="cap-chart" data-variant="tile" data-summary="hidden">
123        {tile}
124        <p className="cap-chart-summary" id={describedBy}>
125          {chartSummary}
126        </p>
127        <ChartData table={chartTable} label={chartTableLabel ?? `${label}, by period`} />
128      </div>
129    );
130  }
131  return (
132    <>
133      {tile}
134      {describedBy ? (
135        <span className="cap-sr-only" id={describedBy}>
136          {chartSummary}
137        </span>
138      ) : null}
139    </>
140  );
141}
142
143export interface StatTilesProps {
144  // Names the list for a screen reader: "Overview figures".
145  label?: string;
146  children: ReactNode;
147}
148
149// The row of tiles: each as wide as its text, wrapping onto more rows instead of cutting a
150// word, so a phone gets two or one across without a breakpoint.
151export function StatTiles({ label, children }: StatTilesProps) {
152  return (
153    <div className="cap-tiles">
154      <ul className="cap-tiles-list" aria-label={label}>
155        {Children.toArray(children).map((child, i) => (
156          <li key={i}>{child}</li>
157        ))}
158      </ul>
159    </div>
160  );
161}