src/lite/area.ts

Functions

Imports

It imports src/lite/series.ts, src/lite/svg.ts, src/render/line-model.ts, src/render/size.ts. Imported by src/lite/index.ts.

Source

1/**
2 * `enarratio/lite/area`: {@link areaChart} without Observable Plot or a DOM, for browser bundles.
3 * The same options draw the same SVG as `areaChart` from `enarratio/plot`.
4 *
5 * @packageDocumentation
6 */
7
8import {
9  AREA_OPACITY,
10  areaModel,
11  type Point,
12  type SeriesChartOptions,
13} from "../render/line-model.js";
14import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from "../render/size.js";
15import {
16  annotations,
17  areaPath,
18  bySeries,
19  dots,
20  linePath,
21  pathGroup,
22  seriesFrame,
23} from "./series.js";
24import { el, svgRoot } from "./svg.js";
25
26export type {
27  EventMarker,
28  ReferenceLine,
29  SeriesChartOptions,
30} from "../render/line-model.js";
31
32/**
33 * An area chart over time or any continuous x, drawn without Observable Plot. Several series
34 * stack, so the top edge is their total. The same options and output as `areaChart` from
35 * `enarratio/plot`, in a bundle small enough for a browser.
36 *
37 * @example
38 * areaChart({ data: monthly, x: "month", y: "hours", series: "activity", alt: "..." });
39 */
40export function areaChart<T extends object>(options: SeriesChartOptions<T>): string {
41  const model = areaModel(options);
42  const { prepared } = model;
43  const { points, seriesNames } = prepared;
44  const color = (p: Point): string => model.plan.range[p.row] ?? "";
45
46  // Each x's values stack in series order; a missing value adds nothing.
47  const order = new Map(seriesNames.map((name, i) => [name, i]));
48  const extents = new Map<Point, [number, number]>();
49  const byX = new Map<number, Point[]>();
50  for (const p of points) {
51    const at = byX.get(p.at);
52    if (at) at.push(p);
53    else byX.set(p.at, [p]);
54  }
55  for (const stack of byX.values()) {
56    let total = 0;
57    const sorted = [...stack].sort(
58      (a, b) => (order.get(a.series) ?? 0) - (order.get(b.series) ?? 0),
59    );
60    for (const p of sorted) {
61      const v = Math.max(0, p.value ?? 0);
62      extents.set(p, [total, total + v]);
63      total += v;
64    }
65  }
66  const span = (p: Point): [number, number] => extents.get(p) as [number, number];
67
68  const ys: number[] = [0];
69  for (const [a, b] of extents.values()) ys.push(a, b);
70  for (const r of options.references ?? []) ys.push(r.y);
71  const layout = seriesFrame(
72    model,
73    {
74      width: options.width ?? DEFAULT_WIDTH,
75      height: options.height ?? DEFAULT_HEIGHT,
76      marginTop: 20,
77      marginRight: 20,
78      marginBottom: 44,
79      marginLeft: prepared.yLabel === null ? 48 : 64,
80    },
81    [...points.map((p) => p.at), ...model.markers.map((m) => Number(m.x))],
82    ys,
83    { log: false, zero: true },
84  );
85  const { x, y, frame } = layout;
86
87  const parts = [
88    layout.axes,
89    pathGroup(
90      "area",
91      { "fill-opacity": String(AREA_OPACITY) },
92      bySeries(points).map((group) => ({
93        d: areaPath(
94          group,
95          () => true,
96          (p) => [x(p.at), y(span(p)[1])],
97          (p) => [x(p.at), y(span(p)[0])],
98        ),
99        attrs: { fill: color(group[0] as Point) },
100      })),
101    ),
102    // The top edge of each band as a line, so a light fill still reads as a shape.
103    pathGroup(
104      "line",
105      { fill: "none", "stroke-width": "2", "stroke-linejoin": "round", "stroke-linecap": "round" },
106      bySeries(points).map((group) => ({
107        d: linePath(
108          group,
109          () => true,
110          (p) => [x(p.at), y(span(p)[1])],
111        ),
112        attrs: { stroke: color(group[0] as Point) },
113      })),
114    ),
115    // Gaps have no point: their hover text would otherwise claim a value.
116    dots(
117      model,
118      points.filter((p) => p.value !== null),
119      { "fill-opacity": "0" },
120      (p) => ({
121        cx: x(p.at),
122        cy: y((span(p)[0] + span(p)[1]) / 2),
123        r: 4,
124        fill: color(p),
125      }),
126    ),
127    el(
128      "g",
129      { "data-enarratio-mark": "rule", stroke: "currentColor" },
130      el("line", {
131        x1: frame.marginLeft,
132        x2: frame.width - frame.marginRight,
133        y1: y(0),
134        y2: y(0),
135      }),
136    ),
137    annotations(options, model, layout),
138  ];
139
140  return model.figure(
141    svgRoot(frame.width, frame.height, options.alt, "img", parts.join("")),
142    layout.xScale,
143  );
144}