src/lite/svg.ts

Functions

Imports

It imports src/html.ts. Imported by src/lite/area.ts, src/lite/axis.ts, src/lite/bar.ts, src/lite/line.ts, src/lite/series.ts.

Source

1/** SVG markup as strings, written the way the Plot renderer serializes its drawing. */
2
3import { escapeHtml } from "../html.js";
4
5/** Attribute values; `undefined` omits the attribute. */
6export type Attrs = Readonly<Record<string, string | number | undefined>>;
7
8/** A coordinate rounded to two decimals, as the Plot renderer rounds its output. */
9export const num = (value: number): string => String(Math.round(value * 100) / 100);
10
11/** `translate(x,y)`, rounded. */
12export const translate = (x: number, y: number): string => `translate(${num(x)},${num(y)})`;
13
14function attributes(attrs: Attrs): string {
15  let out = "";
16  for (const [name, value] of Object.entries(attrs)) {
17    if (value === undefined) continue;
18    out += ` ${name}="${escapeHtml(typeof value === "number" ? num(value) : value)}"`;
19  }
20  return out;
21}
22
23/** One element. `children` is markup; an element without children closes itself. */
24export function el(tag: string, attrs: Attrs, children = ""): string {
25  return children === ""
26    ? `<${tag}${attributes(attrs)}/>`
27    : `<${tag}${attributes(attrs)}>${children}</${tag}>`;
28}
29
30/** Escaped text content. */
31export const text = (value: string): string => escapeHtml(value);
32
33/** A facet's offset and what is drawn in it. */
34export interface FacetContent {
35  readonly dx: number;
36  readonly dy: number;
37  readonly children: string;
38}
39
40/**
41 * A mark's group. Unfaceted, one group holds everything; faceted, the outer group carries the
42 * mark's name and offset and each facet is a group of its own carrying the mark's styles, as Plot
43 * draws them.
44 */
45export function markGroup(
46  outer: Attrs,
47  styles: Attrs,
48  content: string | readonly FacetContent[],
49): string {
50  if (typeof content === "string") return el("g", { ...outer, ...styles }, content);
51  return el(
52    "g",
53    outer,
54    content
55      .map((f) => el("g", { transform: translate(f.dx, f.dy), ...styles }, f.children))
56      .join(""),
57  );
58}
59
60/**
61 * A text element with Plot's line placement: `anchor` is where the lines sit relative to the
62 * point (top, middle or bottom), and a label with several lines is split into tspans.
63 */
64export function textElement(
65  attrs: Attrs,
66  value: string,
67  anchor: "top" | "middle" | "bottom",
68): string {
69  const lines = value.split(/\r\n?|\n/);
70  const n = lines.length;
71  const y = anchor === "top" ? 0.71 : anchor === "bottom" ? 1 - n : (164 - n * 100) / 200;
72  if (n === 1) return el("text", { ...attrs, y: y ? `${y}em` : undefined }, text(value));
73  let spans = "";
74  let m = 0;
75  lines.forEach((line, i) => {
76    ++m;
77    if (!line) return;
78    spans += el(
79      "tspan",
80      i === m - 1 ? { x: 0, y: `${y + i}em` } : { x: 0, dy: `${m}em` },
81      text(line),
82    );
83    m = 0;
84  });
85  return el("text", attrs, spans);
86}
87
88/** The chart's root element, named by its text alternative. */
89export function svgRoot(
90  width: number,
91  height: number,
92  alt: string,
93  role: "img" | "group",
94  children: string,
95): string {
96  return el(
97    "svg",
98    {
99      fill: "currentColor",
100      "text-anchor": "middle",
101      width,
102      height,
103      viewBox: `0 0 ${num(width)} ${num(height)}`,
104      role,
105      // A chart whose marks are links cannot be one image: role="img" would hide the links.
106      "aria-roledescription": role === "group" ? "chart" : undefined,
107      "aria-label": alt,
108    },
109    children,
110  );
111}