src/lite/line.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/line`: {@link lineChart} without Observable Plot or a DOM, for browser bundles.
3 * The same options draw the same SVG as `lineChart` from `enarratio/plot`.
4 *
5 * @packageDocumentation
6 */
7
8import { type LineChartOptions, lineModel, type Point } from "../render/line-model.js";
9import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from "../render/size.js";
10import {
11  annotations,
12  areaPath,
13  bySeries,
14  dots,
15  linePath,
16  pathGroup,
17  seriesFrame,
18  verticalRules,
19} from "./series.js";
20import { el, svgRoot, text, translate } from "./svg.js";
21
22export type {
23  EventMarker,
24  LineBand,
25  LineChartOptions,
26  ReferenceLine,
27  SeriesChartOptions,
28} from "../render/line-model.js";
29
30/**
31 * A line chart over time or any continuous x, drawn without Observable Plot: the same options and
32 * output as `lineChart` from `enarratio/plot`, in a bundle small enough for a browser.
33 *
34 * @example
35 * lineChart({
36 *   data: weekly,
37 *   x: "week",
38 *   y: "cases",
39 *   series: "county",
40 *   references: [{ y: 50, label: "Alert threshold" }],
41 *   alt: "Weekly cases in three counties ...",
42 * });
43 */
44export function lineChart<T extends object>(options: LineChartOptions<T>): string {
45  const model = lineModel(options);
46  const { prepared, present, showPoints, forecast } = model;
47  const { points } = prepared;
48  const color = (p: Point): string => model.plan.range[p.row] ?? "";
49
50  const ys: (number | null)[] = points.map((p) => p.value);
51  if (prepared.band) for (const p of points) ys.push(p.lower, p.upper);
52  for (const r of options.references ?? []) ys.push(r.y);
53  const xs = [
54    ...points.map((p) => p.at),
55    ...model.markers.map((m) => Number(m.x)),
56    ...(forecast ? [Number(forecast.x)] : []),
57  ];
58  const layout = seriesFrame(
59    model,
60    {
61      width: options.width ?? DEFAULT_WIDTH,
62      height: options.height ?? DEFAULT_HEIGHT,
63      marginTop: 20,
64      marginRight: model.directLabels ? 96 : 24,
65      marginBottom: 44,
66      marginLeft: prepared.yLabel === null ? 48 : 64,
67    },
68    xs,
69    ys,
70    { log: model.log, zero: !model.log && (options.zero ?? true) },
71  );
72  const { x, y } = layout;
73  const at = (p: Point): [number, number] => [x(p.at), y(p.value ?? 0)];
74  const hasValue = (p: Point): boolean => p.value !== null;
75  const lines = (rows: readonly Point[]) =>
76    bySeries(rows).map((group) => ({
77      d: linePath(group, hasValue, at),
78      attrs: { stroke: color(group[0] as Point) },
79    }));
80  const lineStyles = {
81    fill: "none",
82    "stroke-width": "2",
83    "stroke-linejoin": "round",
84    "stroke-linecap": "round",
85  };
86
87  const hollow = forecast !== undefined;
88  const parts = [
89    layout.axes,
90    prepared.band
91      ? pathGroup(
92          "area",
93          { "fill-opacity": "0.18" },
94          bySeries(points).map((group) => ({
95            d: areaPath(
96              group,
97              (p) => p.lower !== null && p.upper !== null,
98              (p) => [x(p.at), y(p.upper ?? 0)],
99              (p) => [x(p.at), y(p.lower ?? 0)],
100            ),
101            attrs: { fill: color(group[0] as Point) },
102          })),
103        )
104      : "",
105    pathGroup("line", lineStyles, lines(model.solid)),
106    forecast
107      ? pathGroup("line", { ...lineStyles, "stroke-dasharray": "6,4" }, lines(model.dashed))
108      : "",
109    dots(
110      model,
111      present,
112      hollow ? { "stroke-width": "1.5" } : { "fill-opacity": showPoints ? undefined : "0" },
113      (p) => ({
114        cx: x(p.at),
115        cy: y(p.value ?? 0),
116        r: showPoints ? 3 : 4,
117        fill: color(p),
118        // After the forecast boundary points are hollow: an outline in place of the fill.
119        ...(hollow
120          ? {
121              "fill-opacity": showPoints && !p.forecast ? "1" : "0",
122              stroke: color(p),
123              "stroke-opacity": showPoints && p.forecast ? "1" : "0",
124            }
125          : {}),
126      }),
127    ),
128    annotations(options, model, layout),
129    forecast
130      ? verticalRules([{ at: x(Number(forecast.x)), label: forecast.label }], layout.frame)
131      : "",
132  ];
133  if (model.directLabels) {
134    // Each series named at its last point.
135    const last = bySeries(present).map((group) => group[group.length - 1] as Point);
136    parts.push(
137      el(
138        "g",
139        { "data-enarratio-mark": "text", "text-anchor": "start", transform: translate(6, 0) },
140        last
141          .map((p) =>
142            el(
143              "text",
144              { fill: color(p), transform: translate(x(p.at), y(p.value ?? 0)), y: "0.32em" },
145              text(p.series),
146            ),
147          )
148          .join(""),
149      ),
150    );
151  }
152
153  return model.figure(
154    svgRoot(layout.frame.width, layout.frame.height, options.alt, "img", parts.join("")),
155    layout.xScale,
156  );
157}