@expressivecss/expressive 0.11.0 → 0.13.1

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/lineChart.ts"],
+  "sourcesContent": ["import { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\nexport interface LineChartOptions extends BaseOptions {\n  /**\n   * Lowest value on the y axis. Defaults to the data minimum less 10% of\n   * the range; a stacked chart starts at zero or its lowest total, and a\n   * column chart always includes zero. Overridden by `data-min` on the chart.\n   */\n  min: number | null;\n  /**\n   * Highest value on the y axis. Defaults to the data maximum plus 10% of\n   * the range. Overridden by `data-max` on the chart.\n   */\n  max: number | null;\n}\n\nconst _defaults: LineChartOptions = {\n  min: null,\n  max: null\n};\n\nconst SVG = 'http://www.w3.org/2000/svg';\nexport const COLORS = 4;\n\n/** An SVG element with its attributes. */\nexport function svgNode(name: string, attributes: Record<string, string> = {}): SVGElement {\n  const element = document.createElementNS(SVG, name);\n  for (const key in attributes) element.setAttribute(key, attributes[key]);\n  return element;\n}\nlet _gradientId = 0;\n\nexport interface Series {\n  name: string;\n  /** Header cell classes, such as `dashed`. */\n  className: string;\n  /** Cell text, shown in the tooltip as the author formatted it. */\n  text: string[];\n  values: (number | null)[];\n  /**\n   * Where each value is drawn: the value, or in a stacked chart the running\n   * total, which is unknown (null) above a gap.\n   */\n  tops: (number | null)[];\n  /** In a stacked chart, the total of the series below, which this area fills down to. */\n  base?: (number | null)[];\n  /** The series' y scale: a value's distance down the plot, in percent. */\n  y: (value: number) => number;\n}\n\n/**\n * Reads a cell as a number. `data-value` wins over the text, which may carry\n * currency or percent signs, grouping commas and a typographic minus around\n * one number. Anything else, such as \"(1,200)\" or \"3\u20135\", is a gap rather\n * than a guess.\n */\nfunction cellValue(cell: Element | undefined): number | null {\n  if (!cell) return null;\n  const raw = (cell as HTMLElement).dataset.value ?? cell.textContent;\n  const text = raw.replace(/\\u2212/g, '-').replace(/[\\s%\\p{Sc}]/gu, '');\n  if (!/^[+-]?(\\d{1,3}(,\\d{3})+|\\d+)?(\\.\\d+)?(e[+-]?\\d+)?$/i.test(text) || !/\\d/.test(text)) return null;\n  return parseFloat(text.replace(/,/g, ''));\n}\n\n/**\n * A monotone cubic through the points (Fritsch-Butland tangents), so the\n * curve never overshoots a data point. Bezier curves keep their shape under\n * the plot's non-uniform scaling, so this can be drawn in a 0-100 box.\n */\nfunction monotonePath(points: [number, number][]): string {\n  const n = points.length;\n  if (n === 0) return '';\n  if (n === 1) return `M${points[0][0]},${points[0][1]}h0`;\n  const slopes: number[] = [];\n  for (let i = 0; i < n - 1; i++) {\n    slopes.push((points[i + 1][1] - points[i][1]) / (points[i + 1][0] - points[i][0]));\n  }\n  const tangents = points.map((_, i) => {\n    if (i === 0) return slopes[0];\n    if (i === n - 1) return slopes[n - 2];\n    const [a, b] = [slopes[i - 1], slopes[i]];\n    return a * b <= 0 ? 0 : 2 / (1 / a + 1 / b);\n  });\n  let d = `M${points[0][0]},${points[0][1]}`;\n  for (let i = 0; i < n - 1; i++) {\n    const [[x0, y0], [x1, y1]] = [points[i], points[i + 1]];\n    const h = (x1 - x0) / 3;\n    d += `C${x0 + h},${y0 + tangents[i] * h} ${x1 - h},${y1 - tangents[i + 1] * h} ${x1},${y1}`;\n  }\n  return d;\n}\n\n/**\n * Line chart. The data is the chart's <table>; this class draws it as an SVG\n * with x labels, a legend for more than one series, and a cursor and tooltip\n * that follow the pointer or the arrow keys. Styling is CSS.\n *\n * Re-run `LineChart.init(el)` after changing the table.\n */\nexport class LineChart extends Component<LineChartOptions> {\n  /** The values' x positions and series, read from the table. */\n  labels: string[] = [];\n  series: Series[] = [];\n  /** The highlighted row, or -1. */\n  activeIndex = -1;\n  private _generated: Element[] = [];\n  /** The table's header cells and body rows, as read. */\n  protected _header: HTMLTableCellElement[] = [];\n  protected _rows: HTMLTableRowElement[] = [];\n  protected _plot: HTMLElement;\n  protected _cursor: HTMLElement;\n  protected _tooltip: HTMLElement;\n  protected _y: (value: number) => number;\n  /**\n   * Whether the rows run right to left: a horizontal row axis in a\n   * right-to-left context, like the labels. Bar chart rows keep their order.\n   */\n  protected _reversed = false;\n\n  /** The class prefix of the generated parts; ColumnChart reuses this class. */\n  protected get _type() {\n    return 'line-chart';\n  }\n\n  /** Whether the y axis always includes zero, as columns grow from it. */\n  protected get _fromZero() {\n    return false;\n  }\n\n  /**\n   * Whether the rows run down the plot and the values across it, as in a\n   * bar chart. The rows then keep their order in a right-to-left context.\n   */\n  protected get _horizontal() {\n    return false;\n  }\n\n  /**\n   * Whether the rows go round a circle, as in a pie or radar chart. The\n   * arrows then step round it, wrapping from the last row to the first.\n   */\n  protected get _circular() {\n    return false;\n  }\n\n  /** Whether the cursor marks each series with a point. */\n  protected get _points() {\n    return true;\n  }\n\n  protected get _key() {\n    return 'Expressive_LineChart';\n  }\n\n  constructor(el: HTMLElement, options: Partial<LineChartOptions>) {\n    super(el, options, new.target);\n    this.el[this._key] = this;\n\n    this.options = {\n      ...new.target.defaults,\n      ...options\n    };\n\n    this._read();\n    if (!this.labels.length || !this.series.length) return;\n    this._reversed = !this._horizontal && getComputedStyle(this.el).direction === 'rtl';\n    this._render();\n    if (!this.el.classList.contains('sparkline')) {\n      this._plot.tabIndex = 0;\n      // A tap has no move before it, so the press picks the row too.\n      this._plot.addEventListener('pointerdown', this._onPointerMove);\n      this._plot.addEventListener('pointermove', this._onPointerMove);\n      this._plot.addEventListener('pointerleave', this._onLeave);\n      this._plot.addEventListener('pointercancel', this._onCancel);\n      this._plot.addEventListener('keydown', this._onKeyDown);\n      this._plot.addEventListener('focus', this._onFocus);\n      this._plot.addEventListener('blur', this._onLeave);\n    }\n  }\n\n  static get defaults(): LineChartOptions {\n    return _defaults;\n  }\n\n  static init(el: HTMLElement, options?: Partial<LineChartOptions>): LineChart;\n  static init(els: InitElements<InitElement>, options?: Partial<LineChartOptions>): LineChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<LineChartOptions> = {}\n  ): LineChart | LineChart[] {\n    return super.init(els, options, this);\n  }\n\n  static getInstance(el: HTMLElement): LineChart {\n    return el['Expressive_LineChart'];\n  }\n\n  destroy() {\n    // The listeners live on the plot, which goes with the generated nodes.\n    this._generated.forEach((node) => node.remove());\n    this._generated = [];\n    this.el[this._key] = undefined;\n  }\n\n  /**\n   * Highlights one row: moves the cursor and fills the tooltip.\n   * Pass -1 to hide them. Does nothing for a chart without data.\n   */\n  show(index: number) {\n    // Skipping a repeat also keeps the live tooltip from re-announcing.\n    if (!this._tooltip || index === this.activeIndex) return;\n    this.activeIndex = index;\n    const hidden = index < 0 || index >= this.labels.length;\n    this._cursor.hidden = this._tooltip.hidden = hidden;\n    if (hidden) return;\n\n    this._cursor.replaceChildren();\n    const title = document.createElement('strong');\n    title.textContent = this.labels[index];\n    this._tooltip.replaceChildren(title);\n\n    this.series.forEach((series, i) => {\n      const value = series.values[index];\n      if (value === null) return;\n      const color = String((i % COLORS) + 1);\n      const top = series.tops[index];\n      if (top !== null && this._points) {\n        const dot = document.createElement('span');\n        dot.className = series.className;\n        dot.dataset.series = color;\n        dot.style.top = `${series.y(top)}%`;\n        this._cursor.append(dot);\n      }\n      const name = document.createElement('span');\n      name.dataset.series = color;\n      name.textContent = series.name;\n      const text = document.createElement('span');\n      text.textContent = series.text[index];\n      this._tooltip.append(name, text);\n    });\n    this._place(index);\n  }\n\n  /**\n   * Moves the filled cursor and tooltip to a row: beside its band, with the\n   * tooltip opening back over the plot past the middle.\n   */\n  protected _place(index: number) {\n    const x = this._x(index);\n    const side = this._horizontal ? 'top' : 'left';\n    this._cursor.style[side] = this._tooltip.style[side] = `${x}%`;\n    this._tooltip.classList.toggle('end', x > 50);\n  }\n\n  private _read() {\n    const table = this.el.querySelector<HTMLTableElement>(':scope > table');\n    if (!table) return;\n    // Without a <thead> the parser puts the header row in the first <tbody>.\n    const headerRow = table.tHead?.rows[0] ?? table.rows[0];\n    const header = Array.from(headerRow?.cells ?? []);\n    const rows = Array.from(table.tBodies)\n      .flatMap((body) => Array.from(body.rows))\n      .filter((row) => row !== headerRow);\n    [this._header, this._rows] = [header, rows];\n    this.labels = rows.map((row) => row.cells[0]?.textContent.trim() ?? '');\n    this.series = header.slice(1).map((cell, i) => {\n      const values = rows.map((row) => cellValue(row.cells[i + 1]));\n      return {\n        name: cell.textContent.trim(),\n        className: cell.className,\n        text: rows.map((row) => row.cells[i + 1]?.textContent.trim() ?? ''),\n        values,\n        tops: values,\n        y: undefined\n      };\n    });\n    const stacked = this.el.classList.contains('stacked');\n    if (stacked) {\n      // A gap leaves the total unknown, so the series above break there too.\n      // ponytail: negative values overlap the band below; diverging stacks if needed.\n      const totals: (number | null)[] = this.labels.map(() => 0);\n      for (const series of this.series) {\n        series.base = [...totals];\n        series.tops = series.values.map((value, i) =>\n          (totals[i] = value === null || totals[i] === null ? null : totals[i] + value));\n      }\n    }\n\n    if (this.series.every((series) => series.tops.every((value) => value === null))) this.series = [];\n    const option = (name: 'min' | 'max') => this._number(name) ?? this.options[name];\n    this._y = this._scale(this.series, option('min'), option('max'));\n  }\n\n  /** A number from one of the chart's data attributes, or null. */\n  protected _number(name: string) {\n    const value = parseFloat(this.el.dataset[name] ?? '');\n    return Number.isFinite(value) ? value : null;\n  }\n\n  /**\n   * Fits a y scale to the series' tops, between `min` and `max` where they\n   * are set, and gives it to each series.\n   */\n  protected _scale(series: Series[], min: number | null, max: number | null, fromZero = this._fromZero) {\n    const stacked = this.el.classList.contains('stacked');\n    let [low, high] = [Infinity, -Infinity];\n    for (const { tops } of series) {\n      for (const value of tops) {\n        if (value === null) continue;\n        low = Math.min(low, value);\n        high = Math.max(high, value);\n      }\n    }\n    if (low > high) low = high = 0;\n    if (fromZero) {\n      // Zero is on the scale, with 10% of the span to spare on each side\n      // that has data.\n      const [bottom, top] = [Math.min(0, low), Math.max(0, high)];\n      const room = (top - (min ?? bottom)) * 0.1 || 1;\n      min ??= bottom < 0 ? bottom - room : 0;\n      max ??= top + room;\n    } else {\n      const pad = (high - low) * 0.1 || 1;\n      // Stacked areas are read against zero, with the headroom of that span.\n      min ??= stacked ? Math.min(0, low) : low - pad;\n      max ??= high + (stacked ? (high - min) * 0.1 || 1 : pad);\n    }\n    const y = (value: number) => 100 - ((value - min) / (max - min || 1)) * 100;\n    for (const each of series) each.y = y;\n    return y;\n  }\n\n  /** Each row sits in the middle of an equal band, beside its label. */\n  private _x(index: number) {\n    const x = ((index + 0.5) / this.labels.length) * 100;\n    return this._reversed ? 100 - x : x;\n  }\n\n  private _render() {\n    const type = this._type;\n    this._plot = document.createElement('div');\n    this._plot.className = `${type}-plot`;\n    const caption = this.el.querySelector(':scope > figcaption')?.textContent.trim();\n    this._plot.setAttribute('role', 'group');\n    this._plot.setAttribute('aria-roledescription', type.replace(/-/g, ' '));\n    if (caption) this._plot.setAttribute('aria-label', caption);\n\n    this._cursor = document.createElement('div');\n    this._cursor.className = `${type}-cursor`;\n    this._cursor.hidden = true;\n    this._tooltip = document.createElement('div');\n    this._tooltip.className = `${type}-tooltip`;\n    this._tooltip.hidden = true;\n    this._tooltip.setAttribute('aria-live', 'polite');\n    this._plot.append(this._draw(), this._cursor, this._tooltip);\n\n    this._generated = [this._plot, ...this._guides()];\n    this.el.append(...this._generated);\n  }\n\n  /**\n   * The <tfoot> row as a total to show over the plot, its value over its\n   * label, or null without one.\n   */\n  protected _total(className: string): HTMLElement | null {\n    const footer = this.el.querySelector<HTMLTableElement>(':scope > table')?.tFoot?.rows[0];\n    if (!footer) return null;\n    const total = document.createElement('div');\n    total.className = className;\n    const [label, value] = [document.createElement('span'), document.createElement('strong')];\n    label.textContent = footer.cells[0]?.textContent.trim() ?? '';\n    value.textContent = footer.cells[1]?.textContent.trim() ?? '';\n    total.append(value, label);\n    return total;\n  }\n\n  /** The parts below the plot: the row labels and the legend. */\n  protected _guides(): Element[] {\n    const labels = document.createElement('ol');\n    labels.className = `${this._type}-labels`;\n    labels.setAttribute('aria-hidden', 'true');\n    // A loop rather than a spread: a spread of every row overflows the stack.\n    for (const text of this.labels) {\n      const li = document.createElement('li');\n      li.textContent = text;\n      labels.append(li);\n    }\n    return [labels, ...this._legend()];\n  }\n\n  /** The series legend, for more than one series. */\n  protected _legend(): Element[] {\n    if (this.series.length < 2) return [];\n    const legend = document.createElement('ul');\n    legend.className = `${this._type}-legend`;\n    legend.setAttribute('aria-hidden', 'true');\n    legend.append(...this.series.map((series, i) => {\n      const li = document.createElement('li');\n      li.dataset.series = String((i % COLORS) + 1);\n      li.textContent = series.name;\n      return li;\n    }));\n    return [legend];\n  }\n\n  /** Draws the series, which fill the plot. */\n  protected _draw(drawn = this.series): Element {\n    const svg = document.createElementNS(SVG, 'svg');\n    svg.setAttribute('viewBox', '0 0 100 100');\n    svg.setAttribute('preserveAspectRatio', 'none');\n    svg.setAttribute('aria-hidden', 'true');\n    svg.setAttribute('focusable', 'false');\n\n    for (const series of drawn) {\n      const group = document.createElementNS(SVG, 'g');\n      group.setAttribute('class', `${this._type}-series ${series.className}`.trim());\n      group.dataset.series = String((this.series.indexOf(series) % COLORS) + 1);\n\n      // A gap in the data breaks the line into runs of row indexes.\n      const runs: number[][] = [[]];\n      series.tops.forEach((value, index) => {\n        if (value === null) runs.push([]);\n        else runs[runs.length - 1].push(index);\n      });\n      const filled = runs.filter((run) => run.length);\n      const points = (run: number[], values: (number | null)[]) =>\n        run.map((index): [number, number] => [this._x(index), series.y(values[index]!)]);\n      const tops = filled.map((run) => monotonePath(points(run, series.tops)));\n\n      const id = `line-chart-gradient-${++_gradientId}`;\n      const gradient = document.createElementNS(SVG, 'linearGradient');\n      gradient.id = id;\n      gradient.setAttribute('x2', '0');\n      gradient.setAttribute('y2', '1');\n      gradient.append(document.createElementNS(SVG, 'stop'), document.createElementNS(SVG, 'stop'));\n      gradient.lastElementChild.setAttribute('offset', '1');\n\n      const area = document.createElementNS(SVG, 'path');\n      area.setAttribute('class', `${this._type}-area`);\n      area.setAttribute('fill', `url(#${id})`);\n      // A stacked area runs back along the series below; the reversed curve\n      // is the same curve. Its base stops at the plot bottom when the y axis\n      // starts above zero.\n      area.setAttribute('d', filled\n        .map((run, r) => {\n          if (!series.base) return `${tops[r]}V100H${this._x(run[0])}Z`;\n          const base = points(run, series.base).map(([x, y]): [number, number] => [x, Math.min(100, y)]);\n          return `${tops[r]}L${monotonePath(base.reverse()).slice(1)}Z`;\n        })\n        .join(''));\n\n      const line = document.createElementNS(SVG, 'path');\n      line.setAttribute('class', `${this._type}-line`);\n      line.setAttribute('d', tops.join(''));\n\n      group.append(gradient, area, line);\n      svg.append(group);\n    }\n    return svg;\n  }\n\n  private _onPointerMove = (e: PointerEvent) => {\n    this.show(this._indexAt(e));\n  };\n\n  /** The row under the pointer, or -1. */\n  protected _indexAt(e: PointerEvent) {\n    const box = this._plot.getBoundingClientRect();\n    const fraction = this._horizontal\n      ? (e.clientY - box.top) / box.height\n      : (e.clientX - box.left) / box.width;\n    const index = Math.floor((this._reversed ? 1 - fraction : fraction) * this.labels.length);\n    return Math.min(this.labels.length - 1, Math.max(0, index));\n  }\n\n  /**\n   * For a circular chart, the pointer's position from the plot's middle: a\n   * fraction of a turn clockwise from the top, and its distance as a share\n   * of the plot's width.\n   */\n  protected _polarAt(e: PointerEvent): [turn: number, distance: number] {\n    const box = this._plot.getBoundingClientRect();\n    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.height / 2];\n    return [(Math.atan2(x, -y) / (2 * Math.PI) + 1) % 1, Math.hypot(x, y) / box.width];\n  }\n\n  /** The keys that move to the next row and to the one before. */\n  protected get _arrows(): [string[], string[]] {\n    // Round a circle both pairs work. The rows run clockwise in RTL too, so\n    // right still moves the way the top row turns.\n    if (this._circular) return [['ArrowRight', 'ArrowDown'], ['ArrowLeft', 'ArrowUp']];\n    // Arrows move the cursor the way they point, so they swap in RTL.\n    if (this._horizontal) return [['ArrowDown'], ['ArrowUp']];\n    return this._reversed ? [['ArrowLeft'], ['ArrowRight']] : [['ArrowRight'], ['ArrowLeft']];\n  }\n\n  private _onFocus = () => {\n    // Only keyboard focus picks the first row; a press off the marks, which\n    // focuses the plot too, leaves the tooltip hidden.\n    if (this.activeIndex < 0 && this._plot.matches(':focus-visible')) this.show(0);\n  };\n\n  private _onLeave = (e: Event) => {\n    // A touch leaves as it lifts; the tapped row stays until the plot blurs.\n    if ((e as PointerEvent).pointerType === 'touch' || this._plot.matches(':focus-visible')) return;\n    this.show(-1);\n  };\n\n  /** The browser took the touch to scroll the page. */\n  private _onCancel = () => {\n    this.show(-1);\n  };\n\n  /** The index a key moves to, or undefined for a key the chart ignores. */\n  protected _keyTarget(key: string): number | undefined {\n    const last = this.labels.length - 1;\n    const [forward, back] = this._arrows;\n    const step = (by: number) => {\n      if (!this._circular) return Math.min(last, Math.max(0, this.activeIndex + by));\n      // Round a circle the ends meet; from no row, back starts at the last.\n      if (this.activeIndex < 0) return by > 0 ? 0 : last;\n      return (this.activeIndex + by + last + 1) % (last + 1);\n    };\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    return forward.includes(key) ? step(1)\n      : back.includes(key) ? step(-1)\n      : { Home: 0, End: last }[key];\n  }\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    const next = this._keyTarget(e.key);\n    if (next === undefined) return;\n    e.preventDefault();\n    this.show(next);\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,166 @@
+import {
+  LineChart,
+  svgNode
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/pieChart.ts
+var COLORS = 6;
+var RADIUS = 46;
+var GROWN = 1.06;
+var LABEL_SHARE = 0.05;
+var _maskId = 0;
+var PieChart = class extends LineChart {
+  get _type() {
+    return "pie-chart";
+  }
+  get _key() {
+    return "Expressive_PieChart";
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_PieChart"];
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._slices.forEach((slice, i) => slice?.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    const color = this._colors[index];
+    this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+      if (color) span.dataset.series = color;
+      else delete span.dataset.series;
+    });
+    const share = this._share(index);
+    const value = this._tooltip.querySelector("span:nth-of-type(2)");
+    if (share && value) value.textContent += ` (${share})`;
+  }
+  /** CSS places the tooltip on the slice's middle from --turn. */
+  _place(index) {
+    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;
+    this._tooltip.style.setProperty("--turn", String(middle));
+    this._tooltip.classList.toggle("end", middle < 0.5);
+  }
+  /** The row's share of the whole as a percentage, or '' for none. */
+  _share(index) {
+    const [start, end] = this._turns[index];
+    if (end <= start) return "";
+    const share = end - start;
+    const options = { style: "percent", maximumFractionDigits: share < 0.1 ? 1 : 0 };
+    try {
+      return share.toLocaleString(this.el.closest("[lang]")?.lang || void 0, options);
+    } catch {
+      return share.toLocaleString(void 0, options);
+    }
+  }
+  /** The legend: every row with its color, its cell and its share. */
+  _guides() {
+    const legend = document.createElement("ul");
+    legend.className = "pie-chart-legend";
+    legend.setAttribute("aria-hidden", "true");
+    const text = this.series[0].text;
+    legend.append(...this.labels.map((label, i) => {
+      const li = document.createElement("li");
+      if (this._colors[i]) li.dataset.series = this._colors[i];
+      const [name, value, share] = [label, text[i], this._share(i)].map((content) => {
+        const span = document.createElement("span");
+        span.textContent = content;
+        return span;
+      });
+      li.append(name, value, share);
+      return li;
+    }));
+    return [legend];
+  }
+  /** The row under the pointer by its angle from the middle, or -1 off the slices. */
+  _indexAt(e) {
+    const [turn, share] = this._polarAt(e);
+    const distance = share * 100;
+    const hole = this.el.classList.contains("donut") ? parseFloat(getComputedStyle(this.el).getPropertyValue("--md-comp-pie-chart-hole")) || 0 : 0;
+    if (distance < RADIUS * hole) return -1;
+    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);
+    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;
+  }
+  /**
+   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps
+   * between them and the donut's hole, which CSS sizes. The values and the
+   * total are HTML over it.
+   */
+  _draw() {
+    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));
+    const total = values.reduce((sum, value) => sum + value, 0);
+    let turn = 0;
+    this._turns = values.map((value) => [turn, turn += total ? value / total : 0]);
+    const drawn = this._turns.filter(([start, end]) => end > start).length;
+    let slice = 0;
+    this._colors = this._turns.map(([start, end]) => {
+      if (end <= start) return void 0;
+      const index = slice++;
+      return String(index === drawn - 1 && index > 0 && index % COLORS === 0 ? 2 : index % COLORS + 1);
+    });
+    const at = (t, r = RADIUS) => {
+      const angle = t * 2 * Math.PI;
+      return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;
+    };
+    const pie = document.createElement("div");
+    pie.className = "pie-chart-pie";
+    pie.setAttribute("aria-hidden", "true");
+    const svg = svgNode("svg", { viewBox: "-50 -50 100 100", focusable: "false" });
+    const id = `pie-chart-mask-${++_maskId}`;
+    const area = { x: "-50", y: "-50", width: "100", height: "100" };
+    const mask = svgNode("mask", { id, maskUnits: "userSpaceOnUse", ...area });
+    const edges = this._turns.filter(([start, end]) => end > start);
+    mask.append(
+      svgNode("rect", { ...area, fill: "white" }),
+      svgNode("path", {
+        class: "pie-chart-gaps",
+        stroke: "black",
+        d: edges.length > 1 ? edges.map(([start]) => `M0,0L${at(start, 50)}`).join("") : ""
+      }),
+      svgNode("circle", { class: "pie-chart-hole", r: String(RADIUS), fill: "black" })
+    );
+    const slices = svgNode("g", { mask: `url(#${id})` });
+    const arc = `A${RADIUS},${RADIUS} 0`;
+    this._slices = this._turns.map(([start, end], i) => {
+      if (end <= start) return null;
+      const slice2 = svgNode("path", {
+        class: "pie-chart-slice",
+        "data-series": this._colors[i],
+        // A whole circle is two half arcs; one arc cannot end where it starts.
+        d: end - start >= 1 ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
+      });
+      slices.append(slice2);
+      return slice2;
+    });
+    svg.append(mask, slices);
+    pie.append(svg);
+    if (this.el.classList.contains("values")) {
+      const labels = document.createElement("div");
+      labels.className = "pie-chart-values";
+      this._turns.forEach(([start, end], i) => {
+        if (end - start < LABEL_SHARE) return;
+        const label = document.createElement("span");
+        label.dataset.series = this._colors[i];
+        label.style.setProperty("--turn", String((start + end) / 2));
+        label.textContent = this._share(i);
+        labels.append(label);
+      });
+      pie.append(labels);
+    }
+    const middle = this._total("pie-chart-total");
+    if (middle) pie.append(middle);
+    return pie;
+  }
+};
+
+export {
+  PieChart
+};
+//# sourceMappingURL=chunk-P3G3QHII.mjs.map