components/chart-frame/chart-frame.ts

Functions

Imports

It imports no other module of this repo. Imported by components/chart-frame/chart-frame.react.tsx, components/stat-tile/stat-tile.react.tsx.

Source

1// Pure helpers for the frame, for pages that render on a server without React: the table as
2// escaped HTML (the same shape as Enarratio's DataTable: the first column holds the row
3// headers) and the whole frame as a string. Nothing here needs a browser, and the frame has
4// no behaviour of its own: the disclosure is a native `details`.
5
6export interface DataTable {
7  columns: string[];
8  rows: string[][];
9}
10
11const ESCAPES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
12export const escapeHtml = (value: string): string => value.replace(/[&<>"']/g, (c) => ESCAPES[c] ?? c);
13
14// Which columns read as numbers: every cell is a figure (a count, a percent, a short unit).
15export function numericColumns(table: DataTable): boolean[] {
16  return table.columns.map((_, c) => c > 0 && table.rows.length > 0 && table.rows.every((r) => /^[-+−]?[\d,.]+\s?(%|[a-zA-Z]{0,3})?$/.test((r[c] ?? "").trim())));
17}
18
19// The numbers as the table component's markup, in a labelled, focusable scroll region (a
20// keyboard can only scroll what it can focus). A column whose every cell reads as a number is
21// right-aligned and tabular (`data-num`).
22export function tableHtml(table: DataTable, label: string): string {
23  const numeric = numericColumns(table);
24  const head = table.columns.map((h, c) => `<th scope="col"${numeric[c] ? " data-num" : ""}>${escapeHtml(h)}</th>`).join("");
25  const body = table.rows
26    .map((r) => `<tr><th scope="row">${escapeHtml(r[0] ?? "")}</th>${r.slice(1).map((cell, c) => `<td${numeric[c + 1] ? " data-num" : ""}>${escapeHtml(cell)}</td>`).join("")}</tr>`)
27    .join("");
28  return `<div class="cap-table-wrap" role="region" aria-label="${escapeHtml(label)}" tabindex="0"><table class="cap-table"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>`;
29}
30
31export interface FrameOptions {
32  // The title, the sentence that says what the chart shows, and the chart (trusted markup:
33  // Enarratio's SVG string).
34  title: string;
35  summary: string;
36  chart: string;
37  table: DataTable;
38  // The table's accessible name; the title by default.
39  tableLabel?: string;
40  // Open the data when the page loads.
41  open?: boolean;
42  // A figure beside the title.
43  meta?: string;
44  // The heading level of the title (3 by default).
45  level?: 2 | 3 | 4;
46  // The id the figure and its parts hang their names from.
47  id: string;
48}
49
50// The frame as a string: a `figure` named by its title and described by its summary, with
51// the table in the HTML whether or not the disclosure is open.
52export function frameHtml(o: FrameOptions): string {
53  const id = escapeHtml(o.id);
54  return [
55    `<figure class="cap-chart" id="${id}" aria-labelledby="${id}-title" aria-describedby="${id}-summary">`,
56    `<div class="cap-chart-head"><h${o.level ?? 3} class="cap-chart-title" id="${id}-title">${escapeHtml(o.title)}</h${o.level ?? 3}>${o.meta ? `<span class="cap-chart-meta">${escapeHtml(o.meta)}</span>` : ""}</div>`,
57    `<p class="cap-chart-summary" id="${id}-summary">${escapeHtml(o.summary)}</p>`,
58    `<div class="cap-chart-body">${o.chart}</div>`,
59    `<details class="cap-disclosure cap-chart-data" data-variant="accordion"${o.open ? " open" : ""}><summary><span class="cap-chart-show">Show data</span><span class="cap-chart-hide">Hide data</span></summary>${tableHtml(o.table, o.tableLabel ?? o.title)}</details>`,
60    `</figure>`,
61  ].join("");
62}