@expressivecss/expressive 0.12.0 → 0.13.1

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

@@ -0,0 +1,163 @@
+import {
+  LineChart
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/heatmapChart.ts
+var HeatmapChart = class extends LineChart {
+  get _type() {
+    return "heatmap-chart";
+  }
+  get _key() {
+    return "Expressive_HeatmapChart";
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_HeatmapChart"];
+  }
+  /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    this._cells[this.activeIndex]?.classList.remove("active");
+    this.activeIndex = index;
+    const cell = this._cells[index];
+    this._tooltip.hidden = !cell;
+    if (!cell) return;
+    cell.classList.add("active");
+    const columns = this.series.length;
+    const [row, series] = [Math.floor(index / columns), this.series[index % columns]];
+    const title = document.createElement("strong");
+    title.textContent = this.labels[row];
+    const [name, text] = [document.createElement("span"), document.createElement("span")];
+    name.textContent = series.name;
+    if (this._levels[index] === null) name.className = "gap";
+    else name.style.setProperty("--level", String(this._levels[index]));
+    text.textContent = series.text[row];
+    this._tooltip.replaceChildren(title, name, text);
+    const end = cell.offsetLeft + cell.offsetWidth / 2 > this._plot.clientWidth / 2;
+    this._tooltip.classList.toggle("end", end);
+    this._tooltip.style.left = `${cell.offsetLeft + (end ? 0 : cell.offsetWidth)}px`;
+    this._tooltip.style.top = `${cell.offsetTop}px`;
+  }
+  /** Arrows move the way they point, so left and right swap in RTL. */
+  _keyTarget(key) {
+    if (key === "Escape") return this.activeIndex < 0 ? void 0 : -1;
+    const [columns, last] = [this.series.length, this.labels.length - 1];
+    const index = Math.max(0, this.activeIndex);
+    const [row, column] = [Math.floor(index / columns), index % columns];
+    const [next, back] = this._reversed ? ["ArrowLeft", "ArrowRight"] : ["ArrowRight", "ArrowLeft"];
+    const to = {
+      [next]: [row, column + 1],
+      [back]: [row, column - 1],
+      ArrowDown: [row + 1, column],
+      ArrowUp: [row - 1, column],
+      Home: [row, 0],
+      End: [row, columns - 1]
+    }[key];
+    if (!to) return void 0;
+    if (this.activeIndex < 0) return 0;
+    const clamp = (value, max) => Math.min(max, Math.max(0, value));
+    return clamp(to[0], last) * columns + clamp(to[1], columns - 1);
+  }
+  /**
+   * The cell under the pointer by its position, or -1 off the grid. A touch
+   * keeps its first target while it drags, so the target cannot be used. The
+   * cells and gaps are even, so each band's edge falls in a gap and a gap
+   * counts as the nearer cell.
+   */
+  _indexAt(e) {
+    const [columns, rows] = [this.series.length, this.labels.length];
+    const first = this._cells[0].getBoundingClientRect();
+    const last = this._cells[this._cells.length - 1].getBoundingClientRect();
+    const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];
+    const [x, y] = [e.clientX, e.clientY];
+    if (x < left || x > right || y < first.top || y > last.bottom) return -1;
+    const band = (offset, size, count) => Math.min(count - 1, Math.floor(offset / (size || 1) * count));
+    const column = band(x - left, right - left, columns);
+    return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);
+  }
+  /**
+   * The legend: a gradient from the lowest cell's shade to the highest's,
+   * labelled with their text. A fixed scale wider than the data shows only
+   * the part the data uses.
+   */
+  _guides() {
+    const legend = document.createElement("div");
+    legend.className = "heatmap-chart-legend";
+    legend.setAttribute("aria-hidden", "true");
+    const [low, scale, high] = ["span", "span", "span"].map((tag) => document.createElement(tag));
+    [low.textContent, high.textContent] = this._ends;
+    scale.className = "heatmap-chart-scale";
+    if (this._reversed) scale.style.setProperty("--heatmap-chart-to", "left");
+    scale.style.setProperty("--low", String(this._endLevels[0]));
+    scale.style.setProperty("--high", String(this._endLevels[1]));
+    legend.append(low, scale, high);
+    return [legend];
+  }
+  /**
+   * A grid of the row headers and cells, row by row, with the column headers
+   * below. Each cell's --level shades it in CSS.
+   */
+  _draw() {
+    const columns = this.series.length;
+    let [low, high] = [Infinity, -Infinity];
+    this._ends = ["", ""];
+    this.series.forEach((series) => series.values.forEach((value, row) => {
+      if (value === null) return;
+      if (value < low) [low, this._ends[0]] = [value, series.text[row]];
+      if (value > high) [high, this._ends[1]] = [value, series.text[row]];
+    }));
+    const option = (name) => {
+      const value = parseFloat(this.el.dataset[name] ?? "");
+      return Number.isFinite(value) ? value : this.options[name];
+    };
+    const [min, max] = [option("min") ?? low, option("max") ?? high];
+    const shade = (value) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));
+    this._endLevels = [shade(low), shade(high)];
+    const grid = document.createElement("div");
+    grid.className = "heatmap-chart-grid";
+    grid.setAttribute("aria-hidden", "true");
+    grid.style.setProperty("--columns", String(columns));
+    grid.style.setProperty("--rows", String(this.labels.length));
+    const span = (className, text = "") => {
+      const element = document.createElement("span");
+      element.className = className;
+      element.textContent = text;
+      return element;
+    };
+    const label = (cell) => cell?.dataset.label ?? cell?.textContent.trim() ?? "";
+    const values = this.el.classList.contains("values");
+    this._cells = [];
+    this._levels = [];
+    this.labels.forEach((_, row) => {
+      grid.append(span("heatmap-chart-row", label(this._rows[row].cells[0])));
+      this.series.forEach((series) => {
+        const value = series.values[row];
+        const level = value === null ? null : shade(value);
+        const cell = span("heatmap-chart-cell", values ? series.text[row] : "");
+        if (level === null) cell.classList.add("gap");
+        else cell.style.setProperty("--level", String(level));
+        this._cells.push(cell);
+        this._levels.push(level);
+        grid.append(cell);
+      });
+    });
+    const labels = this._header.slice(1, columns + 1).map(label);
+    labels.forEach((text, column) => {
+      if (!text) return;
+      let end = column + 1;
+      while (end < columns && !labels[end]) end++;
+      const element = span("heatmap-chart-column", text);
+      element.classList.toggle("run", end > column + 1);
+      element.style.gridArea = `${this.labels.length + 1} / ${column + 2} / auto / ${end + 2}`;
+      grid.append(element);
+    });
+    return grid;
+  }
+};
+
+export {
+  HeatmapChart
+};
+//# sourceMappingURL=chunk-LNCCYGPC.mjs.map

package/dist/js/chunks/chunk-LNCCYGPC.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/heatmapChart.ts"],
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { LineChart, LineChartOptions } from './lineChart';\n\nexport type HeatmapChartOptions = LineChartOptions;\n\n/**\n * Heatmap chart. It reads its <table> like LineChart, but draws every cell\n * as a square of the grid, shaded from the lowest value to the highest, with\n * the row headers beside it and the column headers below. A `data-label` on\n * a header cell replaces its text on the grid; an empty one hides it. The\n * tooltip shows one cell, and the arrow keys move round the grid.\n *\n * Re-run `HeatmapChart.init(el)` after changing the table.\n */\nexport class HeatmapChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Every cell, row by row. */\n  private _cells: HTMLElement[];\n  /** Each cell's shade from 0 to 1, or null for a gap. */\n  private _levels: (number | null)[];\n  /** The text of the lowest and highest cells, for the legend. */\n  private _ends: [string, string];\n  /** The shades of the lowest and highest cells, where the legend's gradient runs. */\n  private _endLevels: [number, number];\n\n  protected get _type() {\n    return 'heatmap-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_HeatmapChart';\n  }\n\n  static init(el: HTMLElement, options?: Partial<HeatmapChartOptions>): HeatmapChart;\n  static init(els: InitElements<InitElement>, options?: Partial<HeatmapChartOptions>): HeatmapChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<HeatmapChartOptions> = {}\n  ): HeatmapChart | HeatmapChart[] {\n    return super.init(els as HTMLElement, options) as HeatmapChart | HeatmapChart[];\n  }\n\n  static getInstance(el: HTMLElement): HeatmapChart {\n    return el['Expressive_HeatmapChart'];\n  }\n\n  /** Highlights one cell, numbered row by row. Pass -1 to hide the tooltip. */\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    this._cells[this.activeIndex]?.classList.remove('active');\n    this.activeIndex = index;\n    const cell = this._cells[index];\n    this._tooltip.hidden = !cell;\n    if (!cell) return;\n    cell.classList.add('active');\n\n    const columns = this.series.length;\n    const [row, series] = [Math.floor(index / columns), this.series[index % columns]];\n    const title = document.createElement('strong');\n    title.textContent = this.labels[row];\n    const [name, text] = [document.createElement('span'), document.createElement('span')];\n    name.textContent = series.name;\n    // A gap's swatch is outlined like its cell.\n    if (this._levels[index] === null) name.className = 'gap';\n    else name.style.setProperty('--level', String(this._levels[index]));\n    text.textContent = series.text[row];\n    this._tooltip.replaceChildren(title, name, text);\n\n    // Beside the cell, on the side with more room.\n    const end = cell.offsetLeft + cell.offsetWidth / 2 > this._plot.clientWidth / 2;\n    this._tooltip.classList.toggle('end', end);\n    this._tooltip.style.left = `${cell.offsetLeft + (end ? 0 : cell.offsetWidth)}px`;\n    this._tooltip.style.top = `${cell.offsetTop}px`;\n  }\n\n  /** Arrows move the way they point, so left and right swap in RTL. */\n  protected _keyTarget(key: string): number | undefined {\n    // With nothing shown, Escape is left to a dialog or sheet around the chart.\n    if (key === 'Escape') return this.activeIndex < 0 ? undefined : -1;\n    const [columns, last] = [this.series.length, this.labels.length - 1];\n    const index = Math.max(0, this.activeIndex);\n    const [row, column] = [Math.floor(index / columns), index % columns];\n    const [next, back] = this._reversed ? ['ArrowLeft', 'ArrowRight'] : ['ArrowRight', 'ArrowLeft'];\n    const to = {\n      [next]: [row, column + 1],\n      [back]: [row, column - 1],\n      ArrowDown: [row + 1, column],\n      ArrowUp: [row - 1, column],\n      Home: [row, 0],\n      End: [row, columns - 1]\n    }[key];\n    if (!to) return undefined;\n    // The first key after focus or Escape shows the first cell.\n    if (this.activeIndex < 0) return 0;\n    const clamp = (value: number, max: number) => Math.min(max, Math.max(0, value));\n    return clamp(to[0], last) * columns + clamp(to[1], columns - 1);\n  }\n\n  /**\n   * The cell under the pointer by its position, or -1 off the grid. A touch\n   * keeps its first target while it drags, so the target cannot be used. The\n   * cells and gaps are even, so each band's edge falls in a gap and a gap\n   * counts as the nearer cell.\n   */\n  protected _indexAt(e: PointerEvent) {\n    const [columns, rows] = [this.series.length, this.labels.length];\n    const first = this._cells[0].getBoundingClientRect();\n    const last = this._cells[this._cells.length - 1].getBoundingClientRect();\n    const [left, right] = [Math.min(first.left, last.left), Math.max(first.right, last.right)];\n    const [x, y] = [e.clientX, e.clientY];\n    if (x < left || x > right || y < first.top || y > last.bottom) return -1;\n    const band = (offset: number, size: number, count: number) =>\n      Math.min(count - 1, Math.floor((offset / (size || 1)) * count));\n    const column = band(x - left, right - left, columns);\n    return band(y - first.top, last.bottom - first.top, rows) * columns + (this._reversed ? columns - 1 - column : column);\n  }\n\n  /**\n   * The legend: a gradient from the lowest cell's shade to the highest's,\n   * labelled with their text. A fixed scale wider than the data shows only\n   * the part the data uses.\n   */\n  protected _guides(): Element[] {\n    const legend = document.createElement('div');\n    legend.className = 'heatmap-chart-legend';\n    legend.setAttribute('aria-hidden', 'true');\n    const [low, scale, high] = ['span', 'span', 'span'].map((tag) => document.createElement(tag));\n    [low.textContent, high.textContent] = this._ends;\n    scale.className = 'heatmap-chart-scale';\n    if (this._reversed) scale.style.setProperty('--heatmap-chart-to', 'left');\n    scale.style.setProperty('--low', String(this._endLevels[0]));\n    scale.style.setProperty('--high', String(this._endLevels[1]));\n    legend.append(low, scale, high);\n    return [legend];\n  }\n\n  /**\n   * A grid of the row headers and cells, row by row, with the column headers\n   * below. Each cell's --level shades it in CSS.\n   */\n  protected _draw(): Element {\n    const columns = this.series.length;\n    let [low, high] = [Infinity, -Infinity];\n    this._ends = ['', ''];\n    this.series.forEach((series) => series.values.forEach((value, row) => {\n      if (value === null) return;\n      if (value < low) [low, this._ends[0]] = [value, series.text[row]];\n      if (value > high) [high, this._ends[1]] = [value, series.text[row]];\n    }));\n    const option = (name: 'min' | 'max') => {\n      const value = parseFloat(this.el.dataset[name] ?? '');\n      return Number.isFinite(value) ? value : this.options[name];\n    };\n    const [min, max] = [option('min') ?? low, option('max') ?? high];\n    const shade = (value: number) => Math.min(1, Math.max(0, (value - min) / (max - min || 1)));\n    this._endLevels = [shade(low), shade(high)];\n\n    const grid = document.createElement('div');\n    grid.className = 'heatmap-chart-grid';\n    grid.setAttribute('aria-hidden', 'true');\n    grid.style.setProperty('--columns', String(columns));\n    grid.style.setProperty('--rows', String(this.labels.length));\n    const span = (className: string, text = '') => {\n      const element = document.createElement('span');\n      element.className = className;\n      element.textContent = text;\n      return element;\n    };\n    const label = (cell: HTMLTableCellElement | undefined) =>\n      cell?.dataset.label ?? cell?.textContent.trim() ?? '';\n    const values = this.el.classList.contains('values');\n\n    this._cells = [];\n    this._levels = [];\n    this.labels.forEach((_, row) => {\n      grid.append(span('heatmap-chart-row', label(this._rows[row].cells[0])));\n      this.series.forEach((series) => {\n        const value = series.values[row];\n        const level = value === null ? null : shade(value);\n        const cell = span('heatmap-chart-cell', values ? series.text[row] : '');\n        if (level === null) cell.classList.add('gap');\n        else cell.style.setProperty('--level', String(level));\n        this._cells.push(cell);\n        this._levels.push(level);\n        grid.append(cell);\n      });\n    });\n\n    // A column label runs on over the empty labels after it.\n    const labels = this._header.slice(1, columns + 1).map(label);\n    labels.forEach((text, column) => {\n      if (!text) return;\n      let end = column + 1;\n      while (end < columns && !labels[end]) end++;\n      const element = span('heatmap-chart-column', text);\n      element.classList.toggle('run', end > column + 1);\n      element.style.gridArea = `${this.labels.length + 1} / ${column + 2} / auto / ${end + 2}`;\n      grid.append(element);\n    });\n    return grid;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-NQLC3YMW.mjs.map

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

@@ -0,0 +1,406 @@
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/lineChart.ts
+var _defaults = {
+  min: null,
+  max: null
+};
+var SVG = "http://www.w3.org/2000/svg";
+var COLORS = 4;
+function svgNode(name, attributes = {}) {
+  const element = document.createElementNS(SVG, name);
+  for (const key in attributes) element.setAttribute(key, attributes[key]);
+  return element;
+}
+var _gradientId = 0;
+function cellValue(cell) {
+  if (!cell) return null;
+  const raw = cell.dataset.value ?? cell.textContent;
+  const text = raw.replace(/\u2212/g, "-").replace(/[\s%\p{Sc}]/gu, "");
+  if (!/^[+-]?(\d{1,3}(,\d{3})+|\d+)?(\.\d+)?(e[+-]?\d+)?$/i.test(text) || !/\d/.test(text)) return null;
+  return parseFloat(text.replace(/,/g, ""));
+}
+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, new.target);
+    /** The values' x positions and series, read from the table. */
+    this.labels = [];
+    this.series = [];
+    /** The highlighted row, or -1. */
+    this.activeIndex = -1;
+    this._generated = [];
+    /** 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.el[this._key] = this;
+    this.options = {
+      ...new.target.defaults,
+      ...options
+    };
+    this._read();
+    if (!this.labels.length || !this.series.length) return;
+    this._reversed = !this._horizontal && getComputedStyle(this.el).direction === "rtl";
+    this._render();
+    if (!this.el.classList.contains("sparkline")) {
+      this._plot.tabIndex = 0;
+      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);
+    }
+  }
+  /** The class prefix of the generated parts; ColumnChart reuses this class. */
+  get _type() {
+    return "line-chart";
+  }
+  /** 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 the cursor marks each series with a point. */
+  get _points() {
+    return true;
+  }
+  get _key() {
+    return "Expressive_LineChart";
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, this);
+  }
+  static getInstance(el) {
+    return el["Expressive_LineChart"];
+  }
+  destroy() {
+    this._generated.forEach((node) => node.remove());
+    this._generated = [];
+    this.el[this._key] = void 0;
+  }
+  /**
+   * 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, i) => {
+      const value = series.values[index];
+      if (value === null) return;
+      const color = String(i % COLORS + 1);
+      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() ?? "");
+    this.series = header.slice(1).map((cell, i) => {
+      const values = rows.map((row) => cellValue(row.cells[i + 1]));
+      return {
+        name: cell.textContent.trim(),
+        className: cell.className,
+        text: rows.map((row) => row.cells[i + 1]?.textContent.trim() ?? ""),
+        values,
+        tops: values,
+        y: void 0
+      };
+    });
+    const stacked = this.el.classList.contains("stacked");
+    if (stacked) {
+      const totals = this.labels.map(() => 0);
+      for (const series of this.series) {
+        series.base = [...totals];
+        series.tops = series.values.map((value, i) => totals[i] = value === null || totals[i] === null ? null : totals[i] + value);
+      }
+    }
+    if (this.series.every((series) => series.tops.every((value) => value === null))) this.series = [];
+    const option = (name) => this._number(name) ?? this.options[name];
+    this._y = this._scale(this.series, option("min"), option("max"));
+  }
+  /** 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 stacked = this.el.classList.contains("stacked");
+    let [low, high] = [Infinity, -Infinity];
+    for (const { tops } of series) {
+      for (const value of tops) {
+        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));
+    }
+    const y = (value) => 100 - (value - min) / (max - min || 1) * 100;
+    for (const each of series) each.y = y;
+    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);
+    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._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.textContent = text;
+      labels.append(li);
+    }
+    return [labels, ...this._legend()];
+  }
+  /** The series legend, for more than one series. */
+  _legend() {
+    if (this.series.length < 2) return [];
+    const legend = document.createElement("ul");
+    legend.className = `${this._type}-legend`;
+    legend.setAttribute("aria-hidden", "true");
+    legend.append(...this.series.map((series, i) => {
+      const li = document.createElement("li");
+      li.dataset.series = String(i % COLORS + 1);
+      li.textContent = series.name;
+      return li;
+    }));
+    return [legend];
+  }
+  /** Draws the series, which fill the plot. */
+  _draw(drawn = this.series) {
+    const svg = document.createElementNS(SVG, "svg");
+    svg.setAttribute("viewBox", "0 0 100 100");
+    svg.setAttribute("preserveAspectRatio", "none");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    for (const series of drawn) {
+      const group = document.createElementNS(SVG, "g");
+      group.setAttribute("class", `${this._type}-series ${series.className}`.trim());
+      group.dataset.series = String(this.series.indexOf(series) % COLORS + 1);
+      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, values) => run.map((index) => [this._x(index), series.y(values[index])]);
+      const tops = filled.map((run) => monotonePath(points(run, series.tops)));
+      const id = `line-chart-gradient-${++_gradientId}`;
+      const gradient = document.createElementNS(SVG, "linearGradient");
+      gradient.id = id;
+      gradient.setAttribute("x2", "0");
+      gradient.setAttribute("y2", "1");
+      gradient.append(document.createElementNS(SVG, "stop"), document.createElementNS(SVG, "stop"));
+      gradient.lastElementChild.setAttribute("offset", "1");
+      const area = document.createElementNS(SVG, "path");
+      area.setAttribute("class", `${this._type}-area`);
+      area.setAttribute("fill", `url(#${id})`);
+      area.setAttribute("d", filled.map((run, r) => {
+        if (!series.base) return `${tops[r]}V100H${this._x(run[0])}Z`;
+        const base = points(run, series.base).map(([x, y]) => [x, Math.min(100, y)]);
+        return `${tops[r]}L${monotonePath(base.reverse()).slice(1)}Z`;
+      }).join(""));
+      const line = document.createElementNS(SVG, "path");
+      line.setAttribute("class", `${this._type}-line`);
+      line.setAttribute("d", tops.join(""));
+      group.append(gradient, area, line);
+      svg.append(group);
+    }
+    return svg;
+  }
+  /** 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];
+  }
+};
+
+export {
+  COLORS,
+  svgNode,
+  LineChart
+};
+//# sourceMappingURL=chunk-O5XPWXIQ.mjs.map