src/enhance/index.ts

Functions

Imports

It imports src/enhance/chart.ts, src/enhance/types.ts. No module of this repo imports it.

Source

1/**
2 * The enhancement layer: optional browser code that adds hover details, keyboard navigation,
3 * click-to-filter events, a range brush, animated updates and an entrance animation to charts
4 * Enarratio rendered on the server. Charts are complete without it.
5 *
6 * Every interaction works by pointer and by keyboard, is announced to screen readers, and
7 * respects `prefers-reduced-motion`. It has no dependencies and imports nothing from the
8 * server-side package, so a page ships only this module.
9 *
10 * @packageDocumentation
11 */
12
13import { Chart, enhanced } from "./chart.js";
14import type { EnhancedChart, EnhanceOptions } from "./types.js";
15
16export type { BrushDetail, EnhancedChart, EnhanceOptions, SelectDetail } from "./types.js";
17
18/**
19 * Enhances every Enarratio figure under `root` (the whole document by default) and returns them.
20 * Calling it again is safe: a figure is enhanced once, and calling it with different options
21 * re-applies the chart with the new ones (F18).
22 *
23 * @example
24 * import { enhance } from "enarratio/enhance";
25 * enhance();
26 * document.addEventListener("enarratio:select", (e) => filterList(e.detail.field, e.detail.value));
27 */
28export function enhance(
29  root: ParentNode = document,
30  options: EnhanceOptions = {},
31): EnhancedChart[] {
32  const resolved: Required<EnhanceOptions> = {
33    tooltips: options.tooltips ?? true,
34    filter: options.filter ?? true,
35    brush: options.brush ?? true,
36    entrance: options.entrance ?? true,
37  };
38  const figures = [...root.querySelectorAll<HTMLElement>("figure.enarratio")];
39  if (root instanceof HTMLElement && root.matches("figure.enarratio")) figures.unshift(root);
40  return figures.map((figure) => {
41    const existing = enhanced.get(figure);
42    if (existing && JSON.stringify(existing.options) === JSON.stringify(resolved)) return existing;
43    existing?.destroy();
44    const chart = new Chart(figure, resolved);
45    enhanced.set(figure, chart);
46    return chart;
47  });
48}