components/chart-frame/chart-frame.react.tsx

Functions

Imports

It imports components/chart-frame/chart-frame.ts. Imported by components/stat-tile/stat-tile.react.tsx.

Source

1import { useId, type ReactNode } from "react";
2import { escapeHtml, numericColumns, type DataTable } from "./chart-frame.ts";
3
4export type { DataTable };
5
6export interface ChartDataProps {
7  table: DataTable;
8  // The table's accessible name ("Requests by day, last 7 days").
9  label: string;
10  // Open when the page loads. Closed by default.
11  open?: boolean;
12}
13
14// The "Show data" disclosure on its own, for a piece that already has its title and summary
15// (a stat tile, an uptime strip). The table is in the HTML whether or not it is open.
16export function ChartData({ table, label, open = false }: ChartDataProps) {
17  const numeric = numericColumns(table);
18  return (
19    <details className="cap-disclosure cap-chart-data" data-variant="accordion" open={open || undefined}>
20      <summary>
21        <span className="cap-chart-show">Show data</span>
22        <span className="cap-chart-hide">Hide data</span>
23      </summary>
24      <div className="cap-table-wrap" role="region" aria-label={label} tabIndex={0}>
25        <table className="cap-table">
26          <thead>
27            <tr>
28              {table.columns.map((h, c) => (
29                <th key={h + c} scope="col" data-num={numeric[c] ? "" : undefined}>
30                  {h}
31                </th>
32              ))}
33            </tr>
34          </thead>
35          <tbody>
36            {table.rows.map((r, i) => (
37              <tr key={i}>
38                <th scope="row">{r[0]}</th>
39                {r.slice(1).map((cell, c) => (
40                  <td key={c} data-num={numeric[c + 1] ? "" : undefined}>
41                    {cell}
42                  </td>
43                ))}
44              </tr>
45            ))}
46          </tbody>
47        </table>
48      </div>
49    </details>
50  );
51}
52
53export interface ChartFrameProps {
54  title: string;
55  // One sentence that says what the chart shows, with its numbers.
56  summary: string;
57  // The chart: Enarratio's SVG string (placed as it comes, trusted) or a node.
58  chart: string | ReactNode;
59  table: DataTable;
60  tableLabel?: string;
61  open?: boolean;
62  // A figure beside the title (an uptime percent).
63  meta?: ReactNode;
64  // Hide the summary visually and keep it for screen readers (a piece that names itself).
65  hideSummary?: boolean;
66  // The heading level of the title (3 by default).
67  level?: 2 | 3 | 4;
68  className?: string;
69  children?: ReactNode;
70}
71
72function Heading({ level, id, children }: { level: 2 | 3 | 4; id: string; children: ReactNode }) {
73  const Tag = `h${level}` as const;
74  return (
75    <Tag className="cap-chart-title" id={id}>
76      {children}
77    </Tag>
78  );
79}
80
81export function ChartFrame({ title, summary, chart, table, tableLabel, open, meta, hideSummary = false, level = 3, className, children }: ChartFrameProps) {
82  const id = useId();
83  return (
84    <figure className={className ? `cap-chart ${className}` : "cap-chart"} aria-labelledby={`${id}-title`} aria-describedby={`${id}-summary`} data-summary={hideSummary ? "hidden" : undefined}>
85      <div className="cap-chart-head">
86        <Heading level={level} id={`${id}-title`}>
87          {title}
88        </Heading>
89        {meta != null ? <span className="cap-chart-meta">{meta}</span> : null}
90      </div>
91      <p className="cap-chart-summary" id={`${id}-summary`}>
92        {summary}
93      </p>
94      {typeof chart === "string" ? <div className="cap-chart-body" dangerouslySetInnerHTML={{ __html: chart }} /> : <div className="cap-chart-body">{chart}</div>}
95      {children}
96      <ChartData table={table} label={tableLabel ?? title} open={open} />
97    </figure>
98  );
99}
100
101// Re-exported for a server that wants to escape its own text the same way.
102export { escapeHtml };