src/enhance/marks.ts

Functions

Imports

It imports no other module of this repo. Imported by src/enhance/chart.ts, src/enhance/motion.ts, src/enhance/targets.ts.

Source

1/** Reading marks and scales from Enarratio's server markup: labels, geometry and reading order. */
2
3export interface XScale {
4  readonly type: string;
5  readonly domain: readonly (number | string)[];
6  readonly range: readonly number[];
7}
8
9export const MARK = "[data-enarratio-key]";
10export const SVG_NS = "http://www.w3.org/2000/svg";
11
12export function label(mark: Element): string {
13  return mark.getAttribute("aria-label") ?? mark.querySelector("title")?.textContent ?? "";
14}
15
16/** The element holding a mark's geometry: the mark, or the shape inside a linked mark. */
17export function shape(mark: Element): Element {
18  return mark.hasAttribute("x") || mark.hasAttribute("cx") || !mark.firstElementChild
19    ? mark
20    : mark.firstElementChild;
21}
22
23export function center(mark: SVGGraphicsElement): { x: number; y: number } {
24  const box = mark.getBBox();
25  return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
26}
27
28/**
29 * A mark's place in reading order: the column (category) and row (position within it) the server
30 * wrote from the data. Geometry is the fallback for markup without them, measured on screen so
31 * facets compare correctly (F9).
32 */
33export function place(mark: Element): { column: number; row: number } {
34  const column = mark.getAttribute("data-enarratio-col");
35  const row = mark.getAttribute("data-enarratio-row");
36  if (column !== null && row !== null) return { column: Number(column), row: Number(row) };
37  const box = mark.getBoundingClientRect();
38  return {
39    column: Math.round(box.left + box.width / 2),
40    row: -Math.round(box.top + box.height / 2),
41  };
42}
43
44/** Marks in reading order: columns in order, and within a column bottom to top. */
45export function readingOrder(marks: SVGGraphicsElement[]): SVGGraphicsElement[] {
46  const places = new Map(marks.map((m) => [m, place(m)]));
47  const at = (m: SVGGraphicsElement): { column: number; row: number } =>
48    places.get(m) ?? { column: 0, row: 0 };
49  return [...marks].sort((a, b) => at(a).column - at(b).column || at(a).row - at(b).row);
50}
51
52export function parseScale(figure: HTMLElement): XScale | null {
53  const raw = figure.getAttribute("data-enarratio-x-scale");
54  if (!raw) return null;
55  const scale = JSON.parse(raw) as XScale;
56  return ["linear", "utc", "time", "log", "sqrt", "pow"].includes(scale.type) ? scale : null;
57}
58
59/** Inverts a continuous scale for a position in SVG user units. */
60export function invert(scale: XScale, px: number): number {
61  const [d0, d1] = scale.domain as [number, number];
62  const [r0, r1] = scale.range as [number, number];
63  const t = Math.min(1, Math.max(0, (px - r0) / (r1 - r0)));
64  if (scale.type === "log") return Math.exp(Math.log(d0) + t * (Math.log(d1) - Math.log(d0)));
65  return d0 + t * (d1 - d0);
66}
67
68export function svgPoint(
69  svg: SVGSVGElement,
70  event: { clientX: number; clientY: number },
71): DOMPoint {
72  const matrix = svg.getScreenCTM();
73  const point = new DOMPoint(event.clientX, event.clientY);
74  return matrix ? point.matrixTransform(matrix.inverse()) : point;
75}