@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/chunk-ZM3XBHWV.mjs

@@ -0,0 +1,746 @@
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  svgNode
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/lineChart.ts
+var _defaults = {
+  min: null,
+  max: null,
+  watch: false
+};
+var COLORS = 4;
+var LABEL_GAP = 4;
+function labelBoxes(items, rtl) {
+  const range = document.createRange();
+  return items.map((item) => {
+    range.selectNodeContents(item);
+    const width = range.getBoundingClientRect().width;
+    const { left, right } = item.getBoundingClientRect();
+    return rtl ? { width, start: -right, end: -left } : { width, start: left, end: right };
+  });
+}
+function labelStart(boxes, index) {
+  const box = boxes[index];
+  if (index === 0) return box.start;
+  if (index === boxes.length - 1) return box.end - box.width;
+  return (box.start + box.end - box.width) / 2;
+}
+function labelsFit(boxes, step) {
+  const edge = boxes[boxes.length - 1].end;
+  let previous = -Infinity;
+  for (let index = 0; index < boxes.length; index += step) {
+    const start = labelStart(boxes, index);
+    if (start < previous + LABEL_GAP || start + boxes[index].width > edge) return false;
+    previous = start + boxes[index].width;
+  }
+  return true;
+}
+function labelStep(boxes) {
+  if (boxes.every((box) => box.width + LABEL_GAP <= box.end - box.start)) return 1;
+  for (let step = 2; step <= boxes.length; step++) {
+    if (labelsFit(boxes, step)) return step;
+  }
+  return 1;
+}
+function thinLabels(container, items) {
+  const step = labelStep(labelBoxes(items, getComputedStyle(container).direction === "rtl"));
+  container.toggleAttribute("data-thinned", step > 1);
+  items.forEach((item, index) => item.toggleAttribute("data-skip", index % step > 0));
+}
+function tableChanged(records, el) {
+  const isTable = (node) => node.nodeName === "TABLE";
+  return records.some((record) => record.target !== el || [...record.addedNodes, ...record.removedNodes].some(isTable));
+}
+function rowLegend(className, colors, rows) {
+  const legend = document.createElement("ul");
+  legend.className = className;
+  legend.setAttribute("aria-hidden", "true");
+  legend.append(...rows.map((cells, i) => {
+    const li = document.createElement("li");
+    if (colors[i]) li.dataset.series = colors[i];
+    li.append(...cells.map((content) => Object.assign(document.createElement("span"), { textContent: content })));
+    return li;
+  }));
+  return legend;
+}
+function polarPoint(turn, r) {
+  const angle = turn * 2 * Math.PI;
+  return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;
+}
+var seriesColor = (i) => String(i % COLORS + 1);
+var _gradientId = 0;
+var startsFrom = (series) => matchMedia("(prefers-reduced-motion: reduce)").matches ? [] : series;
+var splines = (easing) => /cubic-bezier\(([^)]*)\)/.exec(easing)?.[1] ?? "0.2, 0, 0, 1";
+function pace(el) {
+  const style = getComputedStyle(el);
+  const dur = style.getPropertyValue("--md-sys-motion-duration-medium4").trim() || "400ms";
+  return parseFloat(dur) > 0 ? { dur, keySplines: splines(style.getPropertyValue("--md-sys-motion-easing-standard")) } : null;
+}
+function morph(path, from, timing) {
+  const to = path.getAttribute("d");
+  if (from === to) return;
+  path.append(svgNode("animate", { attributeName: "d", from, to, ...timing, calcMode: "spline", keyTimes: "0;1", fill: "remove" }));
+}
+var buttons = (nodes) => nodes.flatMap((node) => Array.from(node.querySelectorAll("button")));
+var drawable = (series) => series.values.some((value) => value !== null);
+var NICE = [1, 2, 2.5, 5, 10];
+function niceStep(span, parts = 4) {
+  const raw = span / parts || 1;
+  const power = 10 ** Math.floor(Math.log10(raw));
+  return power * NICE.find((multiple) => multiple * power >= raw * (1 - 1e-9));
+}
+function steps(low, high, step) {
+  const values = [];
+  for (let i = Math.ceil(low / step - 1e-9); i * step <= high + step * 1e-9; i++) {
+    values.push(Number((i * step).toPrecision(12)));
+  }
+  return values;
+}
+function numberFormat(el, options) {
+  return new Intl.NumberFormat(Utils.locale(el), options);
+}
+function cellValue(cell) {
+  if (!cell) return null;
+  return numberValue(cell.dataset.value ?? cell.textContent);
+}
+function numberValue(raw) {
+  const text = raw.replace(/\u2212/g, "-").replace(/[\s%\p{Sc}]/gu, "");
+  if (!/^[+-]?(\d{1,3}(,\d{3})+|\d+)?(\.\d+)?(e[+-]?\d+)?$/i.test(text)) return null;
+  const value = parseFloat(text.replace(/,/g, ""));
+  return Number.isFinite(value) ? value : null;
+}
+function tickText(format, tick, [prefix, suffix]) {
+  return format.format(tick).replace(/^[-\u2212]?/, (sign) => sign + prefix) + suffix;
+}
+function signs(text) {
+  const prefix = /^[\s\p{Sc}]*/u.exec(text)[0];
+  const end = (chars) => [...chars].reverse().join("");
+  return [prefix, end(/^[\s%\p{Sc}]*/u.exec(end(text.slice(prefix.length)))[0])];
+}
+function affix(cells) {
+  const cell = cells.find((each) => !each?.dataset.value && cellValue(each) !== null);
+  return signs(cell?.textContent.trim() ?? "");
+}
+function straightPath(points) {
+  return `M${points.join("L")}${points.length > 1 ? "" : "h0"}`;
+}
+function monotonePath(points) {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) return `M${points[0][0]},${points[0][1]}h0`;
+  const slopes = [];
+  for (let i = 0; i < n - 1; i++) {
+    slopes.push((points[i + 1][1] - points[i][1]) / (points[i + 1][0] - points[i][0]));
+  }
+  const tangents = points.map((_, i) => {
+    if (i === 0) return slopes[0];
+    if (i === n - 1) return slopes[n - 2];
+    const [a, b] = [slopes[i - 1], slopes[i]];
+    return a * b <= 0 ? 0 : 2 / (1 / a + 1 / b);
+  });
+  let d = `M${points[0][0]},${points[0][1]}`;
+  for (let i = 0; i < n - 1; i++) {
+    const [[x0, y0], [x1, y1]] = [points[i], points[i + 1]];
+    const h = (x1 - x0) / 3;
+    d += `C${x0 + h},${y0 + tangents[i] * h} ${x1 - h},${y1 - tangents[i + 1] * h} ${x1},${y1}`;
+  }
+  return d;
+}
+var LineChart = class extends Component {
+  constructor(el, options) {
+    super(el, options);
+    /** The values' x positions and series, read from the table. */
+    this.labels = [];
+    this.series = [];
+    /** The highlighted row, or -1. */
+    this.activeIndex = -1;
+    this._generated = [];
+    /** Watches the row labels' width, to thin them on a narrow chart. */
+    this._labelSizes = null;
+    /** With `watch`, redraws the chart when its table changes. */
+    this._tableWatch = null;
+    /** Every series in the table, shown or not, as the legend lists them. */
+    this._all = [];
+    /**
+     * During update(), the series drawn before it, which the new marks move
+     * from. Empty otherwise, and when the reader prefers less motion.
+     */
+    this._before = [];
+    /** The columns of the series a .toggle legend hid, kept through update(). */
+    this._hidden = /* @__PURE__ */ new Set();
+    /** The table's header cells and body rows, as read. */
+    this._header = [];
+    this._rows = [];
+    /**
+     * Whether the rows run right to left: a horizontal row axis in a
+     * right-to-left context, like the labels. Bar chart rows keep their order.
+     */
+    this._reversed = false;
+    this._onPointerMove = (e) => {
+      this.show(this._indexAt(e));
+    };
+    this._onFocus = () => {
+      if (this.activeIndex < 0 && this._plot.matches(":focus-visible")) this.show(0);
+    };
+    this._onLeave = (e) => {
+      if (e.pointerType === "touch" || this._plot.matches(":focus-visible")) return;
+      this.show(-1);
+    };
+    /** The browser took the touch to scroll the page. */
+    this._onCancel = () => {
+      this.show(-1);
+    };
+    this._onKeyDown = (e) => {
+      const next = this._keyTarget(e.key);
+      if (next === void 0) return;
+      e.preventDefault();
+      this.show(next);
+    };
+    this._build();
+    this._listen();
+    if (this.options.watch || this.el.hasAttribute("data-watch")) {
+      this._tableWatch = new MutationObserver((records) => tableChanged(records, this.el) && this.update());
+    }
+    this._watch();
+  }
+  /** The class prefix of the generated parts; ColumnChart reuses this class. */
+  get _type() {
+    return "line-chart";
+  }
+  /** The column the series start at; a scatter chart's first value column is its x axis. */
+  get _seriesFrom() {
+    return 1;
+  }
+  /** The column the series end before, as slice() takes it; a bubble chart's last column holds sizes. */
+  get _seriesTo() {
+    return void 0;
+  }
+  /** Whether the y axis always includes zero, as columns grow from it. */
+  get _fromZero() {
+    return false;
+  }
+  /**
+   * Whether the rows run down the plot and the values across it, as in a
+   * bar chart. The rows then keep their order in a right-to-left context.
+   */
+  get _horizontal() {
+    return false;
+  }
+  /**
+   * Whether the rows go round a circle, as in a pie or radar chart. The
+   * arrows then step round it, wrapping from the last row to the first.
+   */
+  get _circular() {
+    return false;
+  }
+  /** Whether .axis labels the value scale, which a sparkline never does. */
+  get _axis() {
+    return this.el.classList.contains("axis") && !this.el.classList.contains("sparkline");
+  }
+  /** Whether the cursor marks each series with a point. */
+  get _points() {
+    return true;
+  }
+  /** How many rows `show()` can highlight. */
+  get _count() {
+    return this.labels.length;
+  }
+  /**
+   * Observes the table as it is now, and the chart for a table added or
+   * replaced. Reconnecting drops the changes already queued, which the
+   * caller has just drawn.
+   */
+  _watch() {
+    if (!this._tableWatch) return;
+    this._tableWatch.disconnect();
+    this._tableWatch.observe(this.el, { childList: true });
+    const table = this.el.querySelector(":scope > table");
+    if (table) {
+      this._tableWatch.observe(table, {
+        subtree: true,
+        childList: true,
+        characterData: true,
+        attributeFilter: ["data-value", "class", "data-label"]
+      });
+    }
+  }
+  /** Reads the table and draws it, when it has data. */
+  _build() {
+    this._read();
+    if (!this.labels.length || !this.series.length) return;
+    this._reversed = !this._horizontal && getComputedStyle(this.el).direction === "rtl";
+    this._render();
+  }
+  /** Whether the pointer and keys pick rows, which a sparkline's do not. */
+  get _interactive() {
+    return !this.el.classList.contains("sparkline");
+  }
+  /** Lets the pointer and keys pick rows on the plot. */
+  _listen() {
+    if (this._plot && this._interactive) {
+      this._plot.addEventListener("pointerdown", this._onPointerMove);
+      this._plot.addEventListener("pointermove", this._onPointerMove);
+      this._plot.addEventListener("pointerleave", this._onLeave);
+      this._plot.addEventListener("pointercancel", this._onCancel);
+      this._plot.addEventListener("keydown", this._onKeyDown);
+      this._plot.addEventListener("focus", this._onFocus);
+      this._plot.addEventListener("blur", this._onLeave);
+    }
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    this._generated.forEach((node) => node.remove());
+    this._generated = [];
+    this._labelSizes?.disconnect();
+    this._tableWatch?.disconnect();
+    super.destroy();
+  }
+  /**
+   * Redraws the chart from its table as it is now. Focus stays on the chart,
+   * on the same legend button when one had it, and the highlighted row stays
+   * where the table still has it.
+   */
+  update() {
+    if (this.constructor.getInstance(this.el) !== this) return;
+    const old = this._generated;
+    const active = this.el.getRootNode().activeElement;
+    const [index, focused] = [this.activeIndex, old.some((node) => node.contains(active))];
+    const button = buttons(old).indexOf(active);
+    this._generated = [];
+    this.activeIndex = -1;
+    this._plot = this._cursor = this._tooltip = void 0;
+    this._before = startsFrom(this.series);
+    this._build();
+    this._before = [];
+    if (focused) (buttons(this._generated)[button] ?? this._plot)?.focus({ preventScroll: true });
+    old.forEach((node) => node.remove());
+    this._listen();
+    this.show(Math.min(index, this._count - 1));
+    this._watch();
+  }
+  /**
+   * Highlights one row: moves the cursor and fills the tooltip.
+   * Pass -1 to hide them. Does nothing for a chart without data.
+   */
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    this.activeIndex = index;
+    const hidden = index < 0 || index >= this.labels.length;
+    this._cursor.hidden = this._tooltip.hidden = hidden;
+    if (hidden) return;
+    this._cursor.replaceChildren();
+    const title = document.createElement("strong");
+    title.textContent = this.labels[index];
+    this._tooltip.replaceChildren(title);
+    this.series.forEach((series) => {
+      const value = series.values[index];
+      if (value === null) return;
+      const color = series.color;
+      const top = series.tops[index];
+      if (top !== null && this._points) {
+        const dot = document.createElement("span");
+        dot.className = series.className;
+        dot.dataset.series = color;
+        dot.style.top = `${series.y(top)}%`;
+        this._cursor.append(dot);
+      }
+      const name = document.createElement("span");
+      name.dataset.series = color;
+      name.textContent = series.name;
+      const text = document.createElement("span");
+      text.textContent = series.text[index];
+      this._tooltip.append(name, text);
+    });
+    this._place(index);
+  }
+  /**
+   * Moves the filled cursor and tooltip to a row: beside its band, with the
+   * tooltip opening back over the plot past the middle.
+   */
+  _place(index) {
+    const x = this._x(index);
+    const side = this._horizontal ? "top" : "left";
+    this._cursor.style[side] = this._tooltip.style[side] = `${x}%`;
+    this._tooltip.classList.toggle("end", x > 50);
+  }
+  _read() {
+    const table = this.el.querySelector(":scope > table");
+    if (!table) return;
+    const headerRow = table.tHead?.rows[0] ?? table.rows[0];
+    const header = Array.from(headerRow?.cells ?? []);
+    const rows = Array.from(table.tBodies).flatMap((body) => Array.from(body.rows)).filter((row) => row !== headerRow);
+    [this._header, this._rows] = [header, rows];
+    this.labels = rows.map((row) => row.cells[0]?.textContent.trim() ?? "");
+    const from = this._seriesFrom;
+    this.series = header.slice(from, this._seriesTo).map((cell, i) => {
+      const values = rows.map((row) => cellValue(row.cells[i + from]));
+      return {
+        name: cell.textContent.trim(),
+        className: cell.className,
+        column: i + from,
+        color: seriesColor(i),
+        text: rows.map((row) => row.cells[i + from]?.textContent.trim() ?? ""),
+        values,
+        tops: values,
+        y: void 0,
+        scale: void 0,
+        affix: affix(rows.map((row) => row.cells[i + from]))
+      };
+    });
+    this._all = this.series;
+    this.series = this._shown(this._all);
+    const option = (name) => this._number(name) ?? this.options[name];
+    this._y = this._scale(this.series, option("min"), option("max"));
+  }
+  /**
+   * The series to draw, arranged: those the legend has not hidden, or none
+   * without data. When the ones shown hold no data, as after the table
+   * changed, the hidden ones come back, so the legend never hides the only
+   * data there is.
+   */
+  _shown(all) {
+    const shown = all.filter((series) => !this._hidden.has(series.column));
+    this._arrange(shown);
+    if (shown.some(drawable)) return shown;
+    if (!this._hidden.size) return [];
+    this._hidden.clear();
+    return this._shown(all);
+  }
+  /** Turns the values read into what is drawn: with .stacked, running totals. */
+  _arrange(series) {
+    if (this.el.classList.contains("stacked")) this._stack(series);
+  }
+  /**
+   * Stacks each series on the ones before it: its tops become running
+   * totals and its base the total below. A gap leaves the total unknown, so
+   * the series above break there too.
+   */
+  _stack(series) {
+    const totals = this.labels.map(() => 0);
+    for (const each of series) {
+      each.base = [...totals];
+      each.tops = each.values.map((value, i) => totals[i] = value === null || totals[i] === null ? null : totals[i] + value);
+    }
+  }
+  /** A number from one of the chart's data attributes, or null. */
+  _number(name) {
+    const value = parseFloat(this.el.dataset[name] ?? "");
+    return Number.isFinite(value) ? value : null;
+  }
+  /**
+   * Fits a y scale to the series' tops, between `min` and `max` where they
+   * are set, and gives it to each series.
+   */
+  _scale(series, min, max, fromZero = this._fromZero) {
+    const fixed = [min !== null, max !== null];
+    const stacked = this.el.classList.contains("stacked");
+    let [low, high] = [Infinity, -Infinity];
+    for (const { tops, base = [] } of series) {
+      for (const value of [...tops, ...base]) {
+        if (value === null) continue;
+        low = Math.min(low, value);
+        high = Math.max(high, value);
+      }
+    }
+    if (low > high) low = high = 0;
+    if (fromZero) {
+      const [bottom, top] = [Math.min(0, low), Math.max(0, high)];
+      const room = (top - (min ?? bottom)) * 0.1 || 1;
+      min ?? (min = bottom < 0 ? bottom - room : 0);
+      max ?? (max = top + room);
+    } else {
+      const pad = (high - low) * 0.1 || 1;
+      min ?? (min = stacked ? Math.min(0, low) : low - pad);
+      max ?? (max = high + (stacked ? (high - min) * 0.1 || 1 : pad));
+    }
+    return this._apply(series, this._fit(min, max, fixed));
+  }
+  /**
+   * With .axis, widens each end the chart chose to a round step and lists
+   * the steps for the labels. An end set by the author stays where it is.
+   */
+  _fit(min, max, [fixedMin, fixedMax]) {
+    if (!this._axis) return { min, max, ticks: [] };
+    const step = niceStep(max - min);
+    const low = fixedMin ? min : Math.floor(min / step + 1e-9) * step;
+    const high = fixedMax ? max : Math.ceil(max / step - 1e-9) * step;
+    return { min: low, max: high, ticks: steps(low, high, step) };
+  }
+  /** Gives the series a scale and the y function it draws with. */
+  _apply(series, scale) {
+    const y = (value) => 100 - (value - scale.min) / (scale.max - scale.min || 1) * 100;
+    for (const each of series) Object.assign(each, { y, scale });
+    return y;
+  }
+  /** Each row sits in the middle of an equal band, beside its label. */
+  _x(index) {
+    const x = (index + 0.5) / this.labels.length * 100;
+    return this._reversed ? 100 - x : x;
+  }
+  _render() {
+    const type = this._type;
+    this._plot = document.createElement("div");
+    this._plot.className = `${type}-plot`;
+    const caption = this.el.querySelector(":scope > figcaption")?.textContent.trim();
+    this._plot.setAttribute("role", "group");
+    this._plot.setAttribute("aria-roledescription", type.replace(/-/g, " "));
+    if (caption) this._plot.setAttribute("aria-label", caption);
+    if (this._interactive) this._plot.tabIndex = 0;
+    this._cursor = document.createElement("div");
+    this._cursor.className = `${type}-cursor`;
+    this._cursor.hidden = true;
+    this._tooltip = document.createElement("div");
+    this._tooltip.className = `${type}-tooltip`;
+    this._tooltip.hidden = true;
+    this._tooltip.setAttribute("aria-live", "polite");
+    this._plot.append(...this._axes(), this._draw(), this._cursor, this._tooltip);
+    this._generated = [this._plot, ...this._guides()];
+    this.el.append(...this._generated);
+  }
+  /**
+   * The <tfoot> row as a total to show over the plot, its value over its
+   * label, or null without one.
+   */
+  _total(className) {
+    const footer = this.el.querySelector(":scope > table")?.tFoot?.rows[0];
+    if (!footer) return null;
+    const total = document.createElement("div");
+    total.className = className;
+    const [label, value] = [document.createElement("span"), document.createElement("strong")];
+    label.textContent = footer.cells[0]?.textContent.trim() ?? "";
+    value.textContent = footer.cells[1]?.textContent.trim() ?? "";
+    total.append(value, label);
+    return total;
+  }
+  /** The parts below the plot: the row labels and the legend. */
+  _guides() {
+    const labels = document.createElement("ol");
+    labels.className = `${this._type}-labels`;
+    labels.setAttribute("aria-hidden", "true");
+    for (const text of this.labels) {
+      const li = document.createElement("li");
+      li.append(document.createElement("span"));
+      li.firstChild.textContent = text;
+      labels.append(li);
+    }
+    this._observeLabels(labels, Array.from(labels.children));
+    return [labels, ...this._legend()];
+  }
+  /**
+   * Thins the column labels in container whenever its width changes. A bar
+   * chart's labels run down instead, and no labels leaves nothing to watch.
+   */
+  _observeLabels(container, items) {
+    this._labelSizes?.disconnect();
+    if (this._horizontal || !items.length) return;
+    this._labelSizes = new ResizeObserver(() => thinLabels(container, items));
+    this._labelSizes.observe(container);
+  }
+  /**
+   * With .axis, the value labels, behind the marks: the start scale's with
+   * a grid line at each, and a mixed chart's end scale on the far side.
+   */
+  _axes() {
+    if (!this._axis) return [];
+    const isEnd = (series) => series.className.split(/\s+/).includes("end");
+    const start = this.series.find((series) => !isEnd(series)) ?? this.series[0];
+    const end = this.series.find((series) => series.y !== start.y);
+    return [start, end].filter(Boolean).map((series, i) => this._valueAxis(series, i > 0));
+  }
+  /** One scale's labels, each placed by --at, its value's distance down the plot. */
+  _valueAxis(series, end) {
+    const axis = document.createElement("ol");
+    axis.className = `${this._type}-axis${end ? " end" : ""}`;
+    axis.setAttribute("aria-hidden", "true");
+    const number = numberFormat(this.el, { notation: "compact", maximumSignificantDigits: 3 });
+    for (const tick of series.scale.ticks) {
+      const li = document.createElement("li");
+      const label = document.createElement("span");
+      label.textContent = tickText(number, tick, series.affix);
+      li.style.setProperty("--at", `${series.y(tick)}%`);
+      li.append(label);
+      axis.append(li);
+    }
+    return axis;
+  }
+  /**
+   * The series legend, for more than one series. With .toggle each item is
+   * a button that shows or hides its series, and the scale refits.
+   */
+  _legend() {
+    if (this._all.length < 2) return [];
+    const toggle = this.el.classList.contains("toggle");
+    const legend = document.createElement("ul");
+    legend.className = `${this._type}-legend`;
+    if (!toggle) legend.setAttribute("aria-hidden", "true");
+    legend.append(...this._all.map((series) => {
+      const li = document.createElement("li");
+      li.dataset.series = series.color;
+      li.append(toggle ? this._toggle(series) : series.name);
+      return li;
+    }));
+    return [legend];
+  }
+  /** A button that shows or hides a series, though never the last one shown. */
+  _toggle(series) {
+    const button = document.createElement("button");
+    const shown = this.series.includes(series);
+    button.type = "button";
+    button.className = "chart-toggle";
+    button.textContent = series.name;
+    button.setAttribute("aria-pressed", String(shown));
+    if (shown && drawable(series) && this.series.filter(drawable).length < 2) button.setAttribute("aria-disabled", "true");
+    button.addEventListener("click", () => {
+      if (button.hasAttribute("aria-disabled")) return;
+      if (shown) this._hidden.add(series.column);
+      else this._hidden.delete(series.column);
+      this.update();
+    });
+    return button;
+  }
+  /** Draws the series, which fill the plot. */
+  _draw(drawn = this.series) {
+    const svg = svgNode("svg", {
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    });
+    const timing = this._before.length ? pace(this.el) : null;
+    const starts = timing ? this._starts(drawn) : [];
+    svg.append(...drawn.map((series, i) => this._line(series, starts[i], timing)));
+    return svg;
+  }
+  /**
+   * After update(), the shape each series moves from: where it was drawn,
+   * and for a row it had no value at, its base. That is the plot bottom,
+   * or in a stack where the series below starts, so the stack stays joined.
+   */
+  _starts(drawn) {
+    let below;
+    return drawn.map((series) => {
+      const base = !series.base ? () => 100 : below ?? this._baseY(series);
+      below = this._was(series, base);
+      return this._shape(series, below, base);
+    });
+  }
+  /** Where a series drew each row before update(), or its base for a row it had no value at. */
+  _was(series, base) {
+    const old = this._before.find((each) => each.column === series.column);
+    return (index) => {
+      const top = old?.tops[index] ?? null;
+      return top === null ? base(index) : old.y(top);
+    };
+  }
+  /** Where a stacked area's base runs: the series below, or the plot bottom when zero is off the scale. */
+  _baseY(series) {
+    return (index) => Math.min(100, series.y(series.base[index]));
+  }
+  /**
+   * A series' paths, with its rows at `top` and a stacked area's base at
+   * `base`. The line is smooth, or with .straight straight, and a gap in the
+   * data breaks it into runs.
+   */
+  _shape(series, top, base) {
+    const runs = [[]];
+    series.tops.forEach((value, index) => {
+      if (value === null) runs.push([]);
+      else runs[runs.length - 1].push(index);
+    });
+    const filled = runs.filter((run) => run.length);
+    const points = (run, y) => run.map((index) => [this._x(index), y(index)]);
+    const curve = this.el.classList.contains("straight") ? straightPath : monotonePath;
+    const tops = filled.map((run) => curve(points(run, top)));
+    return {
+      line: tops.join(""),
+      // A stacked area runs back along the series below; the reversed curve
+      // is the same curve.
+      area: filled.map((run, r) => series.base ? `${tops[r]}L${curve(points(run, base).reverse()).slice(1)}Z` : `${tops[r]}V100H${this._x(run[0])}Z`).join(""),
+      // Round caps on zero-length lines, so CSS sizes the dots in pixels.
+      dots: filled.flatMap((run) => points(run, top)).map(([x, y]) => `M${x},${y}h0`).join("")
+    };
+  }
+  /**
+   * One series' group: its line, the fill under it, and with .points a dot
+   * at each value. After update() each path moves from its `from` shape.
+   */
+  _line(series, from, timing) {
+    const group = svgNode("g", {
+      class: `${this._type}-series ${series.className}`.trim(),
+      "data-series": series.color
+    });
+    const shape = this._shape(series, (index) => series.y(series.tops[index]), this._baseY(series));
+    const id = `line-chart-gradient-${++_gradientId}`;
+    const gradient = svgNode("linearGradient", { id, x2: "0", y2: "1" });
+    gradient.append(svgNode("stop"), svgNode("stop", { offset: "1" }));
+    const path = (part, name, attributes = {}) => {
+      const node = svgNode("path", { class: `${this._type}-${name}`, d: shape[part], ...attributes });
+      if (from) morph(node, from[part], timing);
+      return node;
+    };
+    group.append(gradient, path("area", "area", { fill: `url(#${id})` }), path("line", "line"));
+    if (this.el.classList.contains("points")) group.append(path("dots", "points"));
+    return group;
+  }
+  /** The row under the pointer, or -1. */
+  _indexAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const fraction = this._horizontal ? (e.clientY - box.top) / box.height : (e.clientX - box.left) / box.width;
+    const index = Math.floor((this._reversed ? 1 - fraction : fraction) * this.labels.length);
+    return Math.min(this.labels.length - 1, Math.max(0, index));
+  }
+  /**
+   * For a circular chart, the pointer's position from the plot's middle: a
+   * fraction of a turn clockwise from the top, and its distance as a share
+   * of the plot's width.
+   */
+  _polarAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.height / 2];
+    return [(Math.atan2(x, -y) / (2 * Math.PI) + 1) % 1, Math.hypot(x, y) / box.width];
+  }
+  /** The keys that move to the next row and to the one before. */
+  get _arrows() {
+    if (this._circular) return [["ArrowRight", "ArrowDown"], ["ArrowLeft", "ArrowUp"]];
+    if (this._horizontal) return [["ArrowDown"], ["ArrowUp"]];
+    return this._reversed ? [["ArrowLeft"], ["ArrowRight"]] : [["ArrowRight"], ["ArrowLeft"]];
+  }
+  /** The index a key moves to, or undefined for a key the chart ignores. */
+  _keyTarget(key) {
+    const last = this.labels.length - 1;
+    const [forward, back] = this._arrows;
+    const step = (by) => {
+      if (!this._circular) return Math.min(last, Math.max(0, this.activeIndex + by));
+      if (this.activeIndex < 0) return by > 0 ? 0 : last;
+      return (this.activeIndex + by + last + 1) % (last + 1);
+    };
+    if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+    return forward.includes(key) ? step(1) : back.includes(key) ? step(-1) : { Home: 0, End: last }[key];
+  }
+};
+LineChart.key = "Expressive_LineChart";
+
+export {
+  COLORS,
+  rowLegend,
+  polarPoint,
+  seriesColor,
+  pace,
+  morph,
+  niceStep,
+  steps,
+  numberFormat,
+  cellValue,
+  numberValue,
+  tickText,
+  signs,
+  affix,
+  LineChart
+};
+//# sourceMappingURL=chunk-ZM3XBHWV.mjs.map