@expressivecss/expressive 0.15.0 → 0.17.0

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

@@ -0,0 +1,223 @@
+import {
+  LineChart,
+  rowLegend,
+  seriesColor,
+  tintTooltip
+} from "./chunk-IQOTGGHX.mjs";
+import {
+  svgNode
+} from "./chunk-67UNY7RH.mjs";
+
+// src/ts/components/radialChart.ts
+var RADIUS = 46;
+var FILL = 0.8;
+var RadialChart = class extends LineChart {
+  get _type() {
+    return "radial-chart";
+  }
+  /** The rings fill to data-max, so there is no value axis. */
+  get _axis() {
+    return false;
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  get _gauge() {
+    return this.el.classList.contains("gauge");
+  }
+  /** Whether .labels names the rings, which a sparkline never does. */
+  get _labeled() {
+    const list = this.el.classList;
+    return list.contains("labels") && !list.contains("sparkline");
+  }
+  /** How much of a circle a full ring spans. */
+  get _span() {
+    if (this._gauge) return 0.5;
+    return this._labeled ? 0.75 : 1;
+  }
+  /** The number of segments data-segments asks for, or 0 for whole rings. */
+  get _segments() {
+    const segments = Math.round(this._number("segments") ?? 0);
+    return segments > 1 ? segments : 0;
+  }
+  /** A share as drawn: with segments, to the nearest whole segment. */
+  _lit(fraction) {
+    const segments = this._segments;
+    return segments ? Math.round(fraction * segments) / segments : fraction;
+  }
+  /**
+   * A ring's dash pattern for a share of its span. Round caps reach half the
+   * width past each end of a dash, so a capped dash is one width shorter and
+   * its gap one width longer; one shorter than the width is a dot. With
+   * segments, each lit segment is a dash with the ring gap after it, and
+   * the last gap runs out the circle so the pattern does not repeat.
+   */
+  _dash(fraction, length, capped) {
+    const [cap, segments, span] = [capped ? this._width : 0, this._segments, this._span * length];
+    if (!segments) return `${Math.max(1e-3, fraction * span - cap).toFixed(3)} ${length.toFixed(3)}`;
+    const size = span / segments;
+    const dash = Math.max(1e-3, size - this._gap - cap);
+    const lit = Array.from({ length: Math.round(fraction * segments) }, () => `${dash.toFixed(3)} ${(size - dash).toFixed(3)}`);
+    return `${lit.join(" ").replace(/ [\d.]+$/, "") || 0} ${length.toFixed(3)}`;
+  }
+  /** The distance between rings' middles, or one ring's width. */
+  get _step() {
+    return this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._rings.forEach((ring, i) => ring.classList.toggle("active", i === index));
+    this._sweeps.forEach((sweep, i) => sweep?.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    tintTooltip(this._tooltip, seriesColor(index));
+  }
+  /** The tooltip sits where the ring's fill ends. */
+  _place(index) {
+    const turn = this._turn(this._fractions[index]);
+    const r = this._radii[index];
+    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];
+    this._tooltip.style.left = `${50 + x}%`;
+    this._tooltip.style.top = `${(50 + y) / (this._gauge ? 50 : 100) * 100}%`;
+    this._tooltip.classList.toggle("end", x > 0);
+  }
+  /** A fraction of the ring as a turn clockwise from the top. */
+  _turn(fraction) {
+    return fraction * this._span - (this._gauge ? 0.25 : 0);
+  }
+  /** For more than one row, a legend of every row with its color and cell. */
+  _guides() {
+    if (this.labels.length < 2) return [];
+    const text = this.series[0].text;
+    const colors = this.labels.map((_, i) => seriesColor(i));
+    return [rowLegend("radial-chart-legend", colors, this.labels.map((label, i) => [label, text[i]]))];
+  }
+  /** The ring under the pointer by its distance from the middle, or -1. */
+  _indexAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];
+    if (this._gauge && y > 0) return this._nameAt(e);
+    const distance = this._distance(x, y, box.width);
+    return this._radii.findIndex((r) => Math.abs(distance - r) <= this._step / 2);
+  }
+  /**
+   * How far a point is from the middle in the SVG's 100-unit box. In the
+   * top left quarter .labels leaves empty, the names run straight across,
+   * so only the height counts and a name picks its own ring.
+   */
+  _distance(x, y, width) {
+    if (this._span === 0.75 && x < 0 && y < 0) return -y / width * 100;
+    return Math.hypot(x, y) / width * 100;
+  }
+  /** Under a gauge's base line, the ring whose name is under the pointer, or -1. */
+  _nameAt(e) {
+    const name = e.target.closest(".radial-chart-names > span");
+    return name ? [...name.parentElement.children].indexOf(name) : -1;
+  }
+  /** The rings' turn, from three o'clock to the top or, for a gauge, to nine, and the SVG's box. */
+  get _frame() {
+    return this._gauge ? ["rotate(180)", "-50 -50 100 50"] : ["rotate(-90)", "-50 -50 100 100"];
+  }
+  /**
+   * With .gradient, a ring's fill drawn again in HTML: a conic gradient from
+   * a tint of its colour at the ring's start to the full colour where the
+   * fill ends, masked to the fill's own dash, so it follows the ring round.
+   * An SVG stroke takes no conic gradient.
+   */
+  _sweep(r, i, length) {
+    const fraction = this._fractions[i];
+    if (!fraction || !this.el.classList.contains("gradient")) return null;
+    const [transform, viewBox] = this._frame;
+    const width = this._width.toFixed(3);
+    const dash = this._dash(fraction, length, true);
+    const image = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}'><circle r='${r.toFixed(3)}' stroke-width='${width}' transform='${transform}' stroke-dasharray='${dash}' stroke-dashoffset='${(-this._width / 2).toFixed(3)}' stroke-linecap='round' fill='none' stroke='black'/></svg>`;
+    const sweep = document.createElement("div");
+    sweep.className = "radial-chart-sweep";
+    sweep.dataset.series = seriesColor(i);
+    sweep.style.setProperty("--radial-chart-shape", `url("data:image/svg+xml,${encodeURIComponent(image)}")`);
+    sweep.style.setProperty("--radial-chart-from", `${this._turn(0)}turn`);
+    sweep.style.setProperty("--radial-chart-to", `${fraction * this._span}turn`);
+    return sweep;
+  }
+  /**
+   * With .labels, each row's name left of its ring's start at the top,
+   * ending at the middle line. CSS shrinks the text to fit crowded rings.
+   * A gauge's names hang under its base line in a row each, innermost
+   * first, starting below their rings' starts.
+   */
+  _names() {
+    if (!this._labeled) return [];
+    const count = this._radii.length;
+    const names = document.createElement("div");
+    names.className = "radial-chart-names";
+    names.style.setProperty("--radial-chart-step", this._step.toFixed(3));
+    this._plot.style.setProperty("--radial-chart-rows", String(count));
+    names.append(...this._radii.map((r, i) => {
+      const name = document.createElement("span");
+      name.style.setProperty("--radial-chart-at", `${(50 - r).toFixed(3)}%`);
+      name.style.setProperty("--radial-chart-row", String(count - 1 - i));
+      name.textContent = this.labels[i];
+      return name;
+    }));
+    return [names];
+  }
+  /**
+   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row
+   * is a track circle and a fill circle whose dash is its share; CSS draws
+   * them from --radial-chart-dash. The total is HTML over it.
+   */
+  _draw() {
+    const style = getComputedStyle(this.el);
+    const token = (name, fallback) => {
+      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));
+      return Number.isFinite(value) ? value : fallback;
+    };
+    const count = this.labels.length;
+    let [width, gap] = [Math.max(0, token("thickness", 8)), Math.max(0, token("gap", 2))];
+    const scale = Math.min(1, RADIUS * FILL / (count * width + (count - 1) * gap || 1));
+    [width, gap] = [width * scale, gap * scale];
+    [this._width, this._gap] = [width, gap];
+    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));
+    const max = [parseFloat(this.el.dataset.max ?? ""), this.options.max ?? NaN, 100].find((value) => value > 0);
+    this._fractions = this.series[0].values.map((value) => this._lit(Math.min(1, Math.max(0, (value ?? 0) / max))));
+    const [transform, viewBox] = this._frame;
+    const svg = svgNode("svg", { viewBox, focusable: "false" });
+    const span = this._span;
+    this._sweeps = [];
+    this._rings = this._radii.map((r, i) => {
+      const length = 2 * Math.PI * r;
+      const circle = (name, fraction, capped) => {
+        const ring2 = svgNode("circle", { class: name, r: r.toFixed(3), transform, "stroke-width": width.toFixed(3) });
+        ring2.style.setProperty("--radial-chart-dash", this._dash(fraction, length, capped));
+        if (capped) {
+          ring2.style.setProperty("--radial-chart-offset", (-width / 2).toFixed(3));
+          ring2.classList.add("capped");
+        }
+        return ring2;
+      };
+      const ring = circle("radial-chart-ring", this._fractions[i], true);
+      ring.dataset.series = seriesColor(i);
+      if (!this._fractions[i]) ring.classList.add("empty");
+      svg.append(circle("radial-chart-track", 1, span < 1 || !!this._segments), ring);
+      this._sweeps.push(this._sweep(r, i, length));
+      return ring;
+    });
+    const rings = document.createElement("div");
+    rings.className = "radial-chart-rings";
+    rings.setAttribute("aria-hidden", "true");
+    rings.style.setProperty("--radial-chart-middle", `${(this._radii[count - 1] - this._width / 2) * 2}%`);
+    rings.append(svg, ...this._sweeps.filter((sweep) => sweep !== null), ...this._names());
+    const total = this._total("radial-chart-total");
+    if (total) rings.append(total);
+    return rings;
+  }
+};
+RadialChart.key = "Expressive_RadialChart";
+
+export {
+  RadialChart
+};
+//# sourceMappingURL=chunk-UKCNELUN.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/radialChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, rowLegend, seriesColor, tintTooltip } from './lineChart';\nimport { svgNode as node } from '../core/utils';\n\nexport type RadialChartOptions = LineChartOptions;\n\n/** The outer ring's outer edge in a 100-unit box. */\nconst RADIUS = 46;\n/** The rings never fill more of the radius than this, leaving a middle. */\nconst FILL = 0.8;\n\n/**\n * Radial chart. It reads its <table> like LineChart, but draws each row of\n * the first value column as a ring, outermost first, filled clockwise from\n * the top as a share of `data-max` above zero (100 by default). With `.gauge` the rings\n * are half circles over the middle. With `.labels` they are three quarters\n * of a circle, leaving the top left quarter for each row's name at the\n * ring's start; a gauge's names hang under its base line instead.\n * `data-segments` splits each ring into that many segments, filled whole,\n * and `.gradient` shades each fill along the ring, from a light tint at its\n * start to its full color at its end. A <tfoot>\n * row shows in the middle, and\n * a legend lists the rows when there is more than one. Further columns show\n * in the tooltip.\n *\n * Call `update()` after changing the ring tokens, and after changing the table\n * unless it was started with `watch` or `data-watch`.\n */\nexport class RadialChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each ring's middle radius, and their shared width. */\n  private _radii: number[];\n  private _width: number;\n  /** The gap between rings, and between segments. */\n  private _gap: number;\n  /** Each row's share of the maximum, from 0 to 1. */\n  private _fractions: number[];\n  private _rings: SVGCircleElement[];\n  /** With .gradient, each ring's fill drawn again as a conic gradient, or null for none. */\n  private _sweeps: (HTMLElement | null)[];\n\n  protected get _type() {\n    return 'radial-chart';\n  }\n\n  /** The rings fill to data-max, so there is no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  private get _gauge() {\n    return this.el.classList.contains('gauge');\n  }\n\n  /** Whether .labels names the rings, which a sparkline never does. */\n  private get _labeled() {\n    const list = this.el.classList;\n    return list.contains('labels') && !list.contains('sparkline');\n  }\n\n  /** How much of a circle a full ring spans. */\n  private get _span() {\n    if (this._gauge) return 0.5;\n    return this._labeled ? 0.75 : 1;\n  }\n\n  /** The number of segments data-segments asks for, or 0 for whole rings. */\n  private get _segments() {\n    const segments = Math.round(this._number('segments') ?? 0);\n    return segments > 1 ? segments : 0;\n  }\n\n  /** A share as drawn: with segments, to the nearest whole segment. */\n  private _lit(fraction: number) {\n    const segments = this._segments;\n    return segments ? Math.round(fraction * segments) / segments : fraction;\n  }\n\n  /**\n   * A ring's dash pattern for a share of its span. Round caps reach half the\n   * width past each end of a dash, so a capped dash is one width shorter and\n   * its gap one width longer; one shorter than the width is a dot. With\n   * segments, each lit segment is a dash with the ring gap after it, and\n   * the last gap runs out the circle so the pattern does not repeat.\n   */\n  private _dash(fraction: number, length: number, capped: boolean) {\n    const [cap, segments, span] = [capped ? this._width : 0, this._segments, this._span * length];\n    if (!segments) return `${Math.max(0.001, fraction * span - cap).toFixed(3)} ${length.toFixed(3)}`;\n    // A dash and its gap make one segment, even where a small ring leaves\n    // too little room for the gap and the caps.\n    const size = span / segments;\n    const dash = Math.max(0.001, size - this._gap - cap);\n    const lit = Array.from({ length: Math.round(fraction * segments) }, () => `${dash.toFixed(3)} ${(size - dash).toFixed(3)}`);\n    return `${lit.join(' ').replace(/ [\\d.]+$/, '') || 0} ${length.toFixed(3)}`;\n  }\n\n  /** The distance between rings' middles, or one ring's width. */\n  private get _step() {\n    return this._radii.length > 1 ? this._radii[0] - this._radii[1] : this._width;\n  }\n\n  static key = 'Expressive_RadialChart';\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._rings.forEach((ring, i) => ring.classList.toggle('active', i === index));\n    this._sweeps.forEach((sweep, i) => sweep?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n    tintTooltip(this._tooltip, seriesColor(index));\n  }\n\n  /** The tooltip sits where the ring's fill ends. */\n  protected _place(index: number) {\n    const turn = this._turn(this._fractions[index]);\n    const r = this._radii[index];\n    const [x, y] = [r * Math.sin(turn * 2 * Math.PI), -r * Math.cos(turn * 2 * Math.PI)];\n    this._tooltip.style.left = `${50 + x}%`;\n    this._tooltip.style.top = `${((50 + y) / (this._gauge ? 50 : 100)) * 100}%`;\n    // On the right half it opens leftwards, over the rings.\n    this._tooltip.classList.toggle('end', x > 0);\n  }\n\n  /** A fraction of the ring as a turn clockwise from the top. */\n  private _turn(fraction: number) {\n    // A gauge starts at nine o'clock.\n    return fraction * this._span - (this._gauge ? 0.25 : 0);\n  }\n\n  /** For more than one row, a legend of every row with its color and cell. */\n  protected _guides(): Element[] {\n    if (this.labels.length < 2) return [];\n    const text = this.series[0].text;\n    const colors = this.labels.map((_, i) => seriesColor(i));\n    return [rowLegend('radial-chart-legend', colors, this.labels.map((label, i) => [label, text[i]]))];\n  }\n\n  /** The ring under the pointer by its distance from the middle, or -1. */\n  protected _indexAt(e: PointerEvent) {\n    const box = this._plot.getBoundingClientRect();\n    // The middle is half the width down in both shapes.\n    const [x, y] = [e.clientX - box.left - box.width / 2, e.clientY - box.top - box.width / 2];\n    if (this._gauge && y > 0) return this._nameAt(e);\n    // A gap belongs to a ring beside it.\n    const distance = this._distance(x, y, box.width);\n    return this._radii.findIndex((r) => Math.abs(distance - r) <= this._step / 2);\n  }\n\n  /**\n   * How far a point is from the middle in the SVG's 100-unit box. In the\n   * top left quarter .labels leaves empty, the names run straight across,\n   * so only the height counts and a name picks its own ring.\n   */\n  private _distance(x: number, y: number, width: number) {\n    // Only three-quarter rings leave that quarter empty.\n    if (this._span === 0.75 && x < 0 && y < 0) return (-y / width) * 100;\n    return (Math.hypot(x, y) / width) * 100;\n  }\n\n  /** Under a gauge's base line, the ring whose name is under the pointer, or -1. */\n  private _nameAt(e: PointerEvent) {\n    const name = (e.target as Element).closest('.radial-chart-names > span');\n    return name ? [...name.parentElement!.children].indexOf(name) : -1;\n  }\n\n  /** The rings' turn, from three o'clock to the top or, for a gauge, to nine, and the SVG's box. */\n  private get _frame(): [transform: string, viewBox: string] {\n    return this._gauge ? ['rotate(180)', '-50 -50 100 50'] : ['rotate(-90)', '-50 -50 100 100'];\n  }\n\n  /**\n   * With .gradient, a ring's fill drawn again in HTML: a conic gradient from\n   * a tint of its colour at the ring's start to the full colour where the\n   * fill ends, masked to the fill's own dash, so it follows the ring round.\n   * An SVG stroke takes no conic gradient.\n   */\n  private _sweep(r: number, i: number, length: number) {\n    const fraction = this._fractions[i];\n    if (!fraction || !this.el.classList.contains('gradient')) return null;\n    const [transform, viewBox] = this._frame;\n    const width = this._width.toFixed(3);\n    const dash = this._dash(fraction, length, true);\n    const image = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='${viewBox}'><circle r='${r.toFixed(3)}' stroke-width='${width}' transform='${transform}' stroke-dasharray='${dash}' stroke-dashoffset='${(-this._width / 2).toFixed(3)}' stroke-linecap='round' fill='none' stroke='black'/></svg>`;\n    const sweep = document.createElement('div');\n    sweep.className = 'radial-chart-sweep';\n    sweep.dataset.series = seriesColor(i);\n    sweep.style.setProperty('--radial-chart-shape', `url(\"data:image/svg+xml,${encodeURIComponent(image)}\")`);\n    sweep.style.setProperty('--radial-chart-from', `${this._turn(0)}turn`);\n    sweep.style.setProperty('--radial-chart-to', `${fraction * this._span}turn`);\n    return sweep;\n  }\n\n  /**\n   * With .labels, each row's name left of its ring's start at the top,\n   * ending at the middle line. CSS shrinks the text to fit crowded rings.\n   * A gauge's names hang under its base line in a row each, innermost\n   * first, starting below their rings' starts.\n   */\n  private _names(): Element[] {\n    if (!this._labeled) return [];\n    const count = this._radii.length;\n    const names = document.createElement('div');\n    names.className = 'radial-chart-names';\n    names.style.setProperty('--radial-chart-step', this._step.toFixed(3));\n    // The plot leaves room under a gauge for the rows.\n    this._plot.style.setProperty('--radial-chart-rows', String(count));\n    names.append(...this._radii.map((r, i) => {\n      const name = document.createElement('span');\n      // The ring's top, or a gauge ring's start along the base line.\n      name.style.setProperty('--radial-chart-at', `${(50 - r).toFixed(3)}%`);\n      name.style.setProperty('--radial-chart-row', String(count - 1 - i));\n      name.textContent = this.labels[i];\n      return name;\n    }));\n    return [names];\n  }\n\n  /**\n   * An SVG of rings in a -50 to 50 box, the top half for a gauge. Each row\n   * is a track circle and a fill circle whose dash is its share; CSS draws\n   * them from --radial-chart-dash. The total is HTML over it.\n   */\n  protected _draw(): Element {\n    const style = getComputedStyle(this.el);\n    const token = (name: string, fallback: number) => {\n      const value = parseFloat(style.getPropertyValue(`--md-comp-radial-chart-${name}`));\n      return Number.isFinite(value) ? value : fallback;\n    };\n    const count = this.labels.length;\n    let [width, gap] = [Math.max(0, token('thickness', 8)), Math.max(0, token('gap', 2))];\n    // Too many rings to leave a middle thin, with their gaps, to fit.\n    // ponytail: past about 18 rings they are hairlines; that many values want a bar chart.\n    const scale = Math.min(1, (RADIUS * FILL) / (count * width + (count - 1) * gap || 1));\n    [width, gap] = [width * scale, gap * scale];\n    [this._width, this._gap] = [width, gap];\n    this._radii = this.labels.map((_, i) => RADIUS - width / 2 - i * (width + gap));\n    // A maximum of zero or less means nothing, so it falls back.\n    const max = [parseFloat(this.el.dataset.max ?? ''), this.options.max ?? NaN, 100].find((value) => value > 0)!;\n    this._fractions = this.series[0].values.map((value) => this._lit(Math.min(1, Math.max(0, (value ?? 0) / max))));\n\n    const [transform, viewBox] = this._frame;\n    const svg = node('svg', { viewBox, focusable: 'false' });\n    const span = this._span;\n    this._sweeps = [];\n    this._rings = this._radii.map((r, i) => {\n      const length = 2 * Math.PI * r;\n      // A capped dash starts half a width in, where its round cap ends.\n      const circle = (name: string, fraction: number, capped: boolean) => {\n        const ring = node('circle', { class: name, r: r.toFixed(3), transform, 'stroke-width': width.toFixed(3) });\n        ring.style.setProperty('--radial-chart-dash', this._dash(fraction, length, capped));\n        if (capped) {\n          ring.style.setProperty('--radial-chart-offset', (-width / 2).toFixed(3));\n          ring.classList.add('capped');\n        }\n        return ring;\n      };\n      const ring = circle('radial-chart-ring', this._fractions[i], true) as SVGCircleElement;\n      ring.dataset.series = seriesColor(i);\n      // An empty ring would still draw its round cap.\n      if (!this._fractions[i]) ring.classList.add('empty');\n      // Only a track short of a whole circle, or in segments, has ends to round.\n      svg.append(circle('radial-chart-track', 1, span < 1 || !!this._segments), ring);\n      this._sweeps.push(this._sweep(r, i, length));\n      return ring;\n    });\n\n    const rings = document.createElement('div');\n    rings.className = 'radial-chart-rings';\n    rings.setAttribute('aria-hidden', 'true');\n    rings.style.setProperty('--radial-chart-middle', `${(this._radii[count - 1] - this._width / 2) * 2}%`);\n    rings.append(svg, ...this._sweeps.filter((sweep) => sweep !== null), ...this._names());\n\n    const total = this._total('radial-chart-total');\n    if (total) rings.append(total);\n    return rings;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["ring"]
+}

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

@@ -0,0 +1,167 @@
+import {
+  LineChart,
+  ROW_COLORS,
+  percentLabel,
+  seriesColor
+} from "./chunk-IQOTGGHX.mjs";
+
+// src/ts/components/treemapChart.ts
+var NEXT = ["ArrowRight", "ArrowDown"];
+var PREVIOUS = ["ArrowLeft", "ArrowUp"];
+var sum = (areas) => areas.reduce((total, area) => total + area, 0);
+var flip = ([x, y, width, height]) => [y, x, height, width];
+function worst(areas, side) {
+  const [total, squared] = [sum(areas) ** 2, side ** 2];
+  return Math.max(...areas.map((area) => Math.max(squared * area / total, total / (squared * area))));
+}
+function strip(areas, free) {
+  if (free[2] < free[3]) {
+    const [boxes2, rest] = strip(areas, flip(free));
+    return [boxes2.map(flip), flip(rest)];
+  }
+  const [x, y, width, height] = free;
+  const across = sum(areas) / height;
+  let top = y;
+  const boxes = areas.map((area) => {
+    const box = [x, top, across, area / across];
+    top += area / across;
+    return box;
+  });
+  return [boxes, [x + across, y, width - across, height]];
+}
+function squarify(areas, free) {
+  const boxes = [];
+  let row = [];
+  for (const area of areas) {
+    const side = Math.min(free[2], free[3]);
+    if (row.length && worst([...row, area], side) > worst(row, side)) {
+      const [laid, rest] = strip(row, free);
+      boxes.push(...laid);
+      [free, row] = [rest, []];
+    }
+    row.push(area);
+  }
+  return [...boxes, ...strip(row, free)[0]];
+}
+var inside = ([x, y, width, height], at, down) => at >= x && at < x + width && down >= y && down < y + height;
+var hang = (y, height) => y + height / 2 > 0.5 ? { top: "auto", bottom: `${(1 - y - height) * 100}%` } : { top: `${y * 100}%`, bottom: "auto" };
+var TreemapChart = class extends LineChart {
+  get _type() {
+    return "treemap-chart";
+  }
+  /** Area carries the value, so there is no value axis. */
+  get _axis() {
+    return false;
+  }
+  get _points() {
+    return false;
+  }
+  /**
+   * Highlights one row: outlines its rectangle and fills the tooltip, with
+   * the row's share. A row with no rectangle passes to the next one with
+   * one, as when focus asks for the first row. Pass -1 to hide them.
+   */
+  show(index) {
+    if (!this._tooltip) return;
+    const row = this._drawnFrom(index);
+    if (row === this.activeIndex) return;
+    this._boxes[this.activeIndex]?.classList.remove("active");
+    this._boxes[row]?.classList.add("active");
+    super.show(row);
+  }
+  /** The first row from `index` on with a rectangle, or -1. */
+  _drawnFrom(index) {
+    return index < 0 ? index : this._boxes.findIndex((box, i) => i >= index && box);
+  }
+  /** The row's share of the whole, written as the pie chart writes it. */
+  _share(row) {
+    return percentLabel(this.el, this._values[row] / sum(this._values));
+  }
+  /**
+   * Opens the tooltip from the middle of the row's rectangle toward the
+   * middle of the plot.
+   */
+  _place(index) {
+    const [x, y, width, height] = this._places[index];
+    const middle = x + width / 2;
+    const left = this._reversed ? 1 - middle : middle;
+    Object.assign(this._tooltip.style, { left: `${left * 100}%`, ...hang(y, height) });
+    this._tooltip.classList.toggle("end", left > 0.5);
+  }
+  /** The row whose rectangle is under the pointer, or -1. */
+  _indexAt(e) {
+    const box = this._plot.getBoundingClientRect();
+    const across = (e.clientX - box.left) / box.width;
+    const [at, down] = [this._reversed ? 1 - across : across, (e.clientY - box.top) / box.height];
+    return this._places.findIndex((place) => place && inside(place, at, down));
+  }
+  /**
+   * The arrows step through the rows with a rectangle in table order, which
+   * runs in no one direction on screen, so they do not swap in a
+   * right-to-left page. Home and End go to the first and last of them.
+   */
+  _keyTarget(key) {
+    const drawn = this._boxes.flatMap((box, i) => box ? [i] : []);
+    const [at, last] = [drawn.indexOf(this.activeIndex), drawn.length - 1];
+    const step = NEXT.includes(key) ? Math.min(at + 1, last) : PREVIOUS.includes(key) ? Math.max(at - 1, 0) : { Home: 0, End: last }[key];
+    return step === void 0 ? super._keyTarget(key) : drawn[step];
+  }
+  destroy() {
+    this._sizes?.disconnect();
+    super.destroy();
+  }
+  /** Neither row labels nor a legend: each rectangle carries its name. */
+  _guides() {
+    return [];
+  }
+  /** One rectangle per positive row, in table order, placed by _layout(). */
+  _draw() {
+    this._values = this.series[0].values.map((value) => Math.max(0, value ?? 0));
+    const container = document.createElement("div");
+    container.className = "treemap-chart-boxes";
+    container.setAttribute("aria-hidden", "true");
+    let drawn = 0;
+    this._boxes = this._values.map((value, i) => {
+      if (!value) return null;
+      const box = document.createElement("div");
+      box.className = "treemap-chart-box";
+      box.dataset.series = seriesColor(drawn++, ROW_COLORS);
+      const [name, text] = [document.createElement("span"), document.createElement("span")];
+      [name.textContent, text.textContent] = [this.labels[i], this.series[0].text[i]];
+      box.append(name, text);
+      container.append(box);
+      return box;
+    });
+    this.el.append(this._plot);
+    this._layout();
+    this._sizes?.disconnect();
+    this._sizes = new ResizeObserver(() => this._layout());
+    this._sizes.observe(this._plot);
+    return container;
+  }
+  /** Squarifies the positive rows, largest first, equal values in table order, and places their rectangles. */
+  _layout() {
+    if (!this._plot) return this._sizes.disconnect();
+    const [width, height] = [this._plot.clientWidth || 1, this._plot.clientHeight || 1];
+    const rows = this._values.map((_, i) => i).filter((i) => this._values[i]).sort((a, b) => this._values[b] - this._values[a]);
+    const scale = width * height / sum(this._values);
+    const laid = squarify(rows.map((i) => this._values[i] * scale), [0, 0, width, height]);
+    this._places = [];
+    rows.forEach((row, k) => {
+      const [x, y, w, h] = laid[k];
+      const place = this._places[row] = [x / width, y / height, w / width, h / height];
+      Object.assign(this._boxes[row].style, {
+        insetInlineStart: `${place[0] * 100}%`,
+        top: `${place[1] * 100}%`,
+        width: `${place[2] * 100}%`,
+        height: `${place[3] * 100}%`
+      });
+    });
+  }
+};
+TreemapChart.key = "Expressive_TreemapChart";
+
+export {
+  TreemapChart
+};
+//# sourceMappingURL=chunk-UKQK5GWR.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/treemapChart.ts"],
+  "sourcesContent": ["import { LineChart, LineChartOptions, ROW_COLORS, percentLabel, seriesColor } from './lineChart';\n\nexport type TreemapChartOptions = LineChartOptions;\n\n/** A rectangle: its inline start, top, width and height. */\ntype Box = [x: number, y: number, width: number, height: number];\n\n// ponytail: rows past six repeat the colors, so neighbours can match.\n/** The keys that move to the next row and to the one before, in any direction. */\nconst NEXT = ['ArrowRight', 'ArrowDown'];\nconst PREVIOUS = ['ArrowLeft', 'ArrowUp'];\n\nconst sum = (areas: number[]) => areas.reduce((total, area) => total + area, 0);\n\n/** The box with its axes swapped, so one strip routine lays out both ways. */\nconst flip = ([x, y, width, height]: Box): Box => [y, x, height, width];\n\n/** How far the least square of `areas` is from square, in a strip along a side `side` long. */\nfunction worst(areas: number[], side: number) {\n  const [total, squared] = [sum(areas) ** 2, side ** 2];\n  return Math.max(...areas.map((area) => Math.max((squared * area) / total, total / (squared * area))));\n}\n\n/**\n * Lays `areas` out as one strip down the inline start of `free`, or across\n * its top when it is taller than wide, in order, and returns their boxes and\n * the space left beside the strip.\n */\nfunction strip(areas: number[], free: Box): [Box[], Box] {\n  if (free[2] < free[3]) {\n    const [boxes, rest] = strip(areas, flip(free));\n    return [boxes.map(flip), flip(rest)];\n  }\n  const [x, y, width, height] = free;\n  const across = sum(areas) / height;\n  let top = y;\n  const boxes = areas.map((area): Box => {\n    const box: Box = [x, top, across, area / across];\n    top += area / across;\n    return box;\n  });\n  return [boxes, [x + across, y, width - across, height]];\n}\n\n/**\n * The squarified treemap of Bruls, Huizing and van Wijk: `areas`, largest\n * first and adding up to the free box's area, each join the current strip\n * while that keeps its rectangles nearer square, and the strip is laid down\n * when it would not.\n */\nfunction squarify(areas: number[], free: Box): Box[] {\n  const boxes: Box[] = [];\n  let row: number[] = [];\n  for (const area of areas) {\n    const side = Math.min(free[2], free[3]);\n    if (row.length && worst([...row, area], side) > worst(row, side)) {\n      const [laid, rest] = strip(row, free);\n      boxes.push(...laid);\n      [free, row] = [rest, []];\n    }\n    row.push(area);\n  }\n  return [...boxes, ...strip(row, free)[0]];\n}\n\n/** Whether a point, as fractions of the plot, lies in a box. */\nconst inside = ([x, y, width, height]: Box, at: number, down: number) =>\n  at >= x && at < x + width && down >= y && down < y + height;\n\n/**\n * The tooltip's top or bottom for a box: from its top in the plot's upper\n * half, and up from its bottom in the lower half, so it stays in the plot.\n */\nconst hang = (y: number, height: number) => (y + height / 2 > 0.5\n  ? { top: 'auto', bottom: `${(1 - y - height) * 100}%` }\n  : { top: `${y * 100}%`, bottom: 'auto' });\n\n/**\n * Treemap chart. It reads its <table> like LineChart, but draws each row of\n * the first value column as a rectangle whose area is its share of the\n * whole, filling the plot, the largest at the top inline-start corner. Rows\n * with no positive value draw nothing. Further columns show in the tooltip.\n *\n * Call `update()` after changing the table, or start it with `watch` or\n * `data-watch`.\n */\nexport class TreemapChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's positive value, or 0 for a row with no rectangle. */\n  private _values: number[];\n  /** Each row's rectangle, or null. */\n  private _boxes: (HTMLElement | null)[];\n  /** Each drawn row's place as fractions of the plot. */\n  private _places: Box[];\n  /** Lays the rectangles out again when the plot changes shape. */\n  private _sizes: ResizeObserver;\n\n  protected get _type() {\n    return 'treemap-chart';\n  }\n\n  /** Area carries the value, so there is no value axis. */\n  protected get _axis() {\n    return false;\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  static key = 'Expressive_TreemapChart';\n\n  /**\n   * Highlights one row: outlines its rectangle and fills the tooltip, with\n   * the row's share. A row with no rectangle passes to the next one with\n   * one, as when focus asks for the first row. Pass -1 to hide them.\n   */\n  show(index: number) {\n    if (!this._tooltip) return;\n    const row = this._drawnFrom(index);\n    if (row === this.activeIndex) return;\n    this._boxes[this.activeIndex]?.classList.remove('active');\n    this._boxes[row]?.classList.add('active');\n    super.show(row);\n  }\n\n  /** The first row from `index` on with a rectangle, or -1. */\n  private _drawnFrom(index: number) {\n    return index < 0 ? index : this._boxes.findIndex((box, i) => i >= index && box);\n  }\n\n  /** The row's share of the whole, written as the pie chart writes it. */\n  protected _share(row: number) {\n    return percentLabel(this.el, this._values[row] / sum(this._values));\n  }\n\n  /**\n   * Opens the tooltip from the middle of the row's rectangle toward the\n   * middle of the plot.\n   */\n  protected _place(index: number) {\n    const [x, y, width, height] = this._places[index];\n    const middle = x + width / 2;\n    const left = this._reversed ? 1 - middle : middle;\n    Object.assign(this._tooltip.style, { left: `${left * 100}%`, ...hang(y, height) });\n    this._tooltip.classList.toggle('end', left > 0.5);\n  }\n\n  /** The row whose rectangle is under the pointer, or -1. */\n  protected _indexAt(e: PointerEvent) {\n    const box = this._plot.getBoundingClientRect();\n    const across = (e.clientX - box.left) / box.width;\n    const [at, down] = [this._reversed ? 1 - across : across, (e.clientY - box.top) / box.height];\n    return this._places.findIndex((place) => place && inside(place, at, down));\n  }\n\n  /**\n   * The arrows step through the rows with a rectangle in table order, which\n   * runs in no one direction on screen, so they do not swap in a\n   * right-to-left page. Home and End go to the first and last of them.\n   */\n  protected _keyTarget(key: string): number | undefined {\n    const drawn = this._boxes.flatMap((box, i) => (box ? [i] : []));\n    const [at, last] = [drawn.indexOf(this.activeIndex), drawn.length - 1];\n    const step = NEXT.includes(key) ? Math.min(at + 1, last)\n      : PREVIOUS.includes(key) ? Math.max(at - 1, 0)\n      : ({ Home: 0, End: last } as Record<string, number>)[key];\n    return step === undefined ? super._keyTarget(key) : drawn[step];\n  }\n\n  destroy() {\n    this._sizes?.disconnect();\n    super.destroy();\n  }\n\n  /** Neither row labels nor a legend: each rectangle carries its name. */\n  protected _guides(): Element[] {\n    return [];\n  }\n\n  /** One rectangle per positive row, in table order, placed by _layout(). */\n  protected _draw(): Element {\n    this._values = this.series[0].values.map((value) => Math.max(0, value ?? 0));\n    const container = document.createElement('div');\n    container.className = 'treemap-chart-boxes';\n    container.setAttribute('aria-hidden', 'true');\n    let drawn = 0;\n    this._boxes = this._values.map((value, i) => {\n      if (!value) return null;\n      const box = document.createElement('div');\n      box.className = 'treemap-chart-box';\n      box.dataset.series = seriesColor(drawn++, ROW_COLORS);\n      const [name, text] = [document.createElement('span'), document.createElement('span')];\n      [name.textContent, text.textContent] = [this.labels[i], this.series[0].text[i]];\n      box.append(name, text);\n      container.append(box);\n      return box;\n    });\n    // The squares depend on the plot's shape, so it goes in the page to be measured.\n    this.el.append(this._plot);\n    this._layout();\n    this._sizes?.disconnect();\n    this._sizes = new ResizeObserver(() => this._layout());\n    this._sizes.observe(this._plot);\n    return container;\n  }\n\n  /** Squarifies the positive rows, largest first, equal values in table order, and places their rectangles. */\n  private _layout() {\n    // update() with no rows drops the plot without drawing a new one, but\n    // the old plot's observer still fires as that plot leaves the page.\n    if (!this._plot) return this._sizes.disconnect();\n    // A hidden plot has no size; lay it out as a square until it shows.\n    const [width, height] = [this._plot.clientWidth || 1, this._plot.clientHeight || 1];\n    const rows = this._values.map((_, i) => i).filter((i) => this._values[i]).sort((a, b) => this._values[b] - this._values[a]);\n    const scale = (width * height) / sum(this._values);\n    const laid = squarify(rows.map((i) => this._values[i] * scale), [0, 0, width, height]);\n    this._places = [];\n    rows.forEach((row, k) => {\n      const [x, y, w, h] = laid[k];\n      const place = (this._places[row] = [x / width, y / height, w / width, h / height]);\n      Object.assign(this._boxes[row]!.style, {\n        insetInlineStart: `${place[0] * 100}%`,\n        top: `${place[1] * 100}%`,\n        width: `${place[2] * 100}%`,\n        height: `${place[3] * 100}%`\n      });\n    });\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["boxes"]
+}

package/dist/js/chunks/{chunk-TSZYSW7F.mjs → chunk-UTSLYQ65.mjs}

@@ -1,9 +1,10 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/cards.ts
 var _defaults = {
@@ -17,7 +18,7 @@ function hasAccessibleName(trigger) {
   if (label?.trim()) return true;
   const labelledBy = trigger.getAttribute("aria-labelledby");
   if (labelledBy) {
-    const referencedText = labelledBy.trim().split(/\s+/).map((id) => trigger.ownerDocument.getElementById(id)?.textContent ?? "").join(" ").trim();
+    const referencedText = labelledBy.trim().split(/\s+/).map((id) => Utils.getElementById(trigger, id)?.textContent ?? "").join(" ").trim();
     if (referencedText) return true;
   }
   const content = trigger.cloneNode(true);
@@ -35,24 +36,17 @@ function isCardReveal(el) {
     el.querySelectorAll('button.card-reveal-trigger[type="button"]')
   ).some((trigger) => isUsableCardTrigger(trigger, el, panels[0]));
 }
-var Cards = class _Cards extends Component {
+var _Cards = class _Cards extends Component {
   constructor(el, options = {}) {
-    super(el, options, _Cards);
+    super(el, options);
     this.isOpen = false;
     this._ownsRevealInitializedClass = false;
     this._initialAriaControls = /* @__PURE__ */ new Map();
     this._lastActivator = null;
     this._setupEventHandlers = () => {
-      this._activators.forEach((activator) => {
-        activator.addEventListener("click", this._handleClickInteraction);
-      });
-      this.el.addEventListener("keydown", this._handleKeydownEvent);
-    };
-    this._removeEventHandlers = () => {
-      this._activators.forEach((activator) => {
-        activator.removeEventListener("click", this._handleClickInteraction);
-      });
-      this.el.removeEventListener("keydown", this._handleKeydownEvent);
+      const { signal } = this._events;
+      this._activators.forEach((activator) => activator.addEventListener("click", this._handleClickInteraction, { signal }));
+      this.el.addEventListener("keydown", this._handleKeydownEvent, { signal });
     };
     this._handleClickInteraction = (event) => {
       this._lastActivator = event.currentTarget;
@@ -77,32 +71,24 @@ var Cards = class _Cards extends Component {
       this.cardReveal.classList.add("open");
       this.cardReveal.inert = false;
       this._activators.forEach((activator) => activator.ariaExpanded = "true");
-      if (typeof this.options.onOpen === "function") {
-        this.options.onOpen.call(this, this.el);
-      }
+      this._notify("open", this.options.onOpen, { current: () => this.isOpen });
     };
     /**
      * Hide card reveal.
      */
     this.close = () => {
       if (!this.isOpen || !this.cardReveal) return;
-      const focusWasInside = this.cardReveal.contains(document.activeElement);
+      const focused = this.el.getRootNode().activeElement;
+      const focusWasInside = this.cardReveal.contains(focused);
       this.isOpen = false;
       this.cardReveal.classList.remove("open");
       this.cardReveal.inert = true;
       this._activators.forEach((activator) => activator.ariaExpanded = "false");
-      if (typeof this.options.onClose === "function") {
-        this.options.onClose.call(this, this.el);
-      }
+      this._notify("close", this.options.onClose, { current: () => !this.isOpen });
       if (focusWasInside) {
         (this._lastActivator ?? this._activators[0])?.focus();
       }
     };
-    this.el["Expressive_Cards"] = this;
-    this.options = {
-      ..._Cards.defaults,
-      ...options
-    };
     const cardReveals = this.el.querySelectorAll(":scope > aside");
     const cardReveal = cardReveals.length === 1 ? cardReveals[0] : null;
     const activators = cardReveal ? Array.from(
@@ -130,22 +116,10 @@ var Cards = class _Cards extends Component {
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of Cards.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options) {
-    return super.init(els, options, _Cards);
-  }
-  static getInstance(el) {
-    return el["Expressive_Cards"];
-  }
   /**
    * {@inheritDoc}
    */
   destroy() {
-    this._removeEventHandlers();
     if (this.cardReveal) {
       this.cardReveal.classList.remove("open");
       this.cardReveal.inert = false;
@@ -154,30 +128,29 @@ var Cards = class _Cards extends Component {
     this._activators.forEach((activator) => {
       activator.removeAttribute("aria-expanded");
       const initialAriaControls = this._initialAriaControls.get(activator);
-      if (initialAriaControls === null) activator.removeAttribute("aria-controls");
-      else if (initialAriaControls !== void 0) {
-        activator.setAttribute("aria-controls", initialAriaControls);
-      }
+      if (initialAriaControls !== void 0) restoreAttribute(activator, "aria-controls", initialAriaControls);
     });
     this.isOpen = false;
     this._activators = [];
     this._initialAriaControls.clear();
     this._lastActivator = null;
-    this.el["Expressive_Cards"] = void 0;
+    super.destroy();
   }
   static Init() {
     Utils.onDocumentReady(() => {
       const cards = Array.from(document.querySelectorAll(CARDS_SELECTOR)).filter(isCardReveal);
       cards.forEach((el) => {
-        if (el["Expressive_Cards"] == void 0) this.init(el);
+        if (!_Cards.getInstance(el)) this.init(el);
       });
     });
   }
 };
+_Cards.key = "Expressive_Cards";
+var Cards = _Cards;
 
 export {
   CARDS_SELECTOR,
   isCardReveal,
   Cards
 };
-//# sourceMappingURL=chunk-TSZYSW7F.mjs.map
+//# sourceMappingURL=chunk-UTSLYQ65.mjs.map