@north-light/crouter 0.3.198 → 0.3.200

package/dist/pages/elements/chart.d.ts

@@ -1,23 +0,0 @@
-/**
- * `<crtr-chart>` — the line, bar and area plots the page bundle draws.
- *
- * ## Every value here is a `--crtr-chart-*` token
- *
- * The frame, the legend, the axes and the marks themselves are painted through
- * `var(--crtr-chart-<part>-<knob>, <kit default>)`, so a host restyles this element by setting
- * properties on the document root — custom properties inherit into shadow roots, which is the
- * whole mechanism. Series colour keeps coming from the bundle-wide `--crtr-chart-1..5` ramp,
- * which is the theme layer rather than a component knob.
- *
- * Mark paint that SVG would otherwise carry as a presentation attribute — the grid's stroke,
- * the line's width and caps, the area's fill opacity, the point radius, the bar's corner
- * radius — is written as CSS instead, because an attribute cannot hold a `var()` chain and so
- * cannot be overridden. The rendered plot height is styling and reads
- * `--crtr-chart-plot-height`; what stays in TypeScript is the coordinate system's layout
- * arithmetic — the drawing height, margins, tick budget and label metrics are inputs to the
- * geometry this element computes, not declarations a stylesheet could carry.
- *
- * Defaults stay inline at the rule that spends them and no `--crtr-chart-*` component token is
- * ever declared: an unset token is what carries the kit default down the chain.
- */
-export {};

package/dist/pages/elements/chart.js

@@ -1,664 +0,0 @@
-/**
- * `<crtr-chart>` — the line, bar and area plots the page bundle draws.
- *
- * ## Every value here is a `--crtr-chart-*` token
- *
- * The frame, the legend, the axes and the marks themselves are painted through
- * `var(--crtr-chart-<part>-<knob>, <kit default>)`, so a host restyles this element by setting
- * properties on the document root — custom properties inherit into shadow roots, which is the
- * whole mechanism. Series colour keeps coming from the bundle-wide `--crtr-chart-1..5` ramp,
- * which is the theme layer rather than a component knob.
- *
- * Mark paint that SVG would otherwise carry as a presentation attribute — the grid's stroke,
- * the line's width and caps, the area's fill opacity, the point radius, the bar's corner
- * radius — is written as CSS instead, because an attribute cannot hold a `var()` chain and so
- * cannot be overridden. The rendered plot height is styling and reads
- * `--crtr-chart-plot-height`; what stays in TypeScript is the coordinate system's layout
- * arithmetic — the drawing height, margins, tick budget and label metrics are inputs to the
- * geometry this element computes, not declarations a stylesheet could carry.
- *
- * Defaults stay inline at the rule that spends them and no `--crtr-chart-*` component token is
- * ever declared: an unset token is what carries the kit default down the chain.
- */
-import { registerElement } from '../register.js';
-import { readSlotConfig } from '../slot-config.js';
-/** The five chart tokens, cycled when a config declares more than five series. */
-const SERIES_COLORS = [
-    'var(--crtr-chart-1)',
-    'var(--crtr-chart-2)',
-    'var(--crtr-chart-3)',
-    'var(--crtr-chart-4)',
-    'var(--crtr-chart-5)',
-];
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const HEIGHT = 260;
-const MARGIN_TOP = 12;
-const MARGIN_RIGHT = 12;
-const MARGIN_BOTTOM = 28;
-const Y_TICK_TARGET = 5;
-/** Horizontal room one x tick label needs before labels start colliding. */
-const X_TICK_SPACING = 88;
-/** Rough advance width of one character at tick size, used to keep edge labels in the box. */
-const LABEL_CHAR_WIDTH = 5.8;
-const MAX_X_LABEL_CHARS = 14;
-const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(?:[T ]|$)/;
-const DATE_ONLY_RE = /^\d{4}-\d{2}-\d{2}$/;
-const STYLE = `
-  :host {
-    display: block;
-  }
-
-  [part="container"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--crtr-chart-container-gap, var(--crtr-space-2));
-    width: 100%;
-  }
-
-  [part="title"] {
-    color: var(--crtr-chart-title-text-color, var(--crtr-color-text));
-    font-weight: var(--crtr-chart-title-font-weight, 500);
-  }
-
-  [part="legend"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--crtr-chart-legend-gap, var(--crtr-space-1) var(--crtr-space-4));
-    color: var(--crtr-chart-legend-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-chart-legend-font-size, 0.875em);
-  }
-
-  [part="legend-item"] {
-    display: flex;
-    align-items: center;
-    gap: var(--crtr-chart-legend-item-gap, var(--crtr-space-1));
-    min-width: 0;
-  }
-
-  /* Sized against the legend's own text, not a spacing token doing a sizing job. One knob:
-     the swatch is a square, so its width and height are the same value. */
-  [part="legend-swatch"] {
-    flex: none;
-    width: var(--crtr-chart-legend-swatch-size, 0.75em);
-    height: var(--crtr-chart-legend-swatch-size, 0.75em);
-    border-radius: var(--crtr-chart-legend-swatch-radius, calc(var(--crtr-radius-small) * 0.5));
-  }
-
-  [part="legend-label"] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  [part="plot"] {
-    width: 100%;
-  }
-
-  [part="chart"] {
-    display: block;
-    height: var(--crtr-chart-plot-height, 260px);
-    overflow: visible;
-  }
-
-  /* Waiting for data and having none hold the same space, but each stays in its own scope:
-     one scope never names two different parts. */
-  [part="empty"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--crtr-chart-empty-padding, 0 var(--crtr-space-4));
-    color: var(--crtr-chart-empty-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-chart-empty-font-size, 0.875em);
-    border: var(--crtr-chart-empty-border-width, 1px)
-      var(--crtr-chart-empty-border-style, dashed)
-      var(--crtr-chart-empty-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-chart-empty-radius, var(--crtr-radius-medium));
-  }
-
-  [part="status"] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--crtr-chart-status-padding, 0 var(--crtr-space-4));
-    color: var(--crtr-chart-status-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-chart-status-font-size, 0.875em);
-    border: var(--crtr-chart-status-border-width, 1px)
-      var(--crtr-chart-status-border-style, dashed)
-      var(--crtr-chart-status-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-chart-status-radius, var(--crtr-radius-medium));
-  }
-
-  /* Flat: this sits in the flow of the page. A shadow in this bundle means floating. */
-  [part="unavailable"] {
-    padding: var(--crtr-chart-unavailable-padding, var(--crtr-space-3));
-    color: var(--crtr-chart-unavailable-text-color, var(--crtr-color-text-muted));
-    background: var(--crtr-chart-unavailable-fill, var(--crtr-color-surface));
-    border: var(--crtr-chart-unavailable-border-width, 1px)
-      var(--crtr-chart-unavailable-border-style, solid)
-      var(--crtr-chart-unavailable-border-color, var(--crtr-color-border));
-    border-radius: var(--crtr-chart-unavailable-radius, var(--crtr-radius-medium));
-  }
-
-  [part="reason"] {
-    color: var(--crtr-chart-reason-text-color, var(--crtr-color-text));
-    font-family: var(--crtr-chart-reason-font-family, var(--crtr-font-mono));
-  }
-
-  .grid {
-    stroke: var(--crtr-chart-grid-stroke-color, var(--crtr-color-border));
-    stroke-width: var(--crtr-chart-grid-stroke-width, 1);
-    opacity: var(--crtr-chart-grid-opacity, 0.45);
-  }
-
-  /* The gridline the marks are read against carries more weight than the rest. */
-  .grid.baseline {
-    opacity: var(--crtr-chart-grid-baseline-opacity, 0.9);
-  }
-
-  .tick {
-    fill: var(--crtr-chart-tick-text-color, var(--crtr-color-text-muted));
-    font-size: var(--crtr-chart-tick-font-size, 0.75em);
-  }
-
-  /* Mark paint. Series colour arrives per node from the theme's chart ramp; everything
-     these marks are drawn WITH is a knob, which is why none of it is an SVG attribute. */
-  [part="line"] {
-    stroke-width: var(--crtr-chart-line-stroke-width, 2);
-    stroke-linecap: var(--crtr-chart-line-line-cap, round);
-    stroke-linejoin: var(--crtr-chart-line-line-join, round);
-  }
-
-  [part="area"] {
-    fill-opacity: var(--crtr-chart-area-fill-opacity, 0.18);
-  }
-
-  [part="point"] {
-    r: var(--crtr-chart-point-radius, 2.5);
-  }
-
-  /* A bar never rounds away more than a third of its own width, and --bar-max-radius is
-     that width — the one number here the stylesheet cannot know, so the plot writes it onto
-     the SVG and the knob is clamped against it. */
-  [part="bar"] {
-    rx: min(var(--crtr-chart-bar-radius, 2px), var(--bar-max-radius));
-  }
-`;
-function normalizeConfig(raw) {
-    const kind = raw.kind;
-    if (kind !== 'line' && kind !== 'bar' && kind !== 'area') {
-        return { status: 'invalid', reason: 'chart kind must be line, bar or area' };
-    }
-    const x = raw.x;
-    if (typeof x !== 'string' || x === '')
-        return { status: 'invalid', reason: 'chart config has no x field' };
-    if (!Array.isArray(raw.y) || raw.y.length === 0) {
-        return { status: 'invalid', reason: 'chart config has no y series' };
-    }
-    const y = [];
-    for (const [index, entry] of raw.y.entries()) {
-        if (entry === null || typeof entry !== 'object' || Array.isArray(entry)) {
-            return { status: 'invalid', reason: `chart series #${index} is not { field, label? }` };
-        }
-        const definition = entry;
-        if (typeof definition.field !== 'string' || definition.field === '') {
-            return { status: 'invalid', reason: `chart series #${index} has no field` };
-        }
-        if (definition.label !== undefined && typeof definition.label !== 'string') {
-            return { status: 'invalid', reason: `chart series "${definition.field}" label is not a string` };
-        }
-        y.push({ field: definition.field, label: definition.label });
-    }
-    if (raw.title !== undefined && typeof raw.title !== 'string') {
-        return { status: 'invalid', reason: 'chart title is not a string' };
-    }
-    return {
-        status: 'ok',
-        config: {
-            kind,
-            x,
-            y,
-            title: raw.title,
-            data: raw.data,
-        },
-    };
-}
-function isRows(value) {
-    return Array.isArray(value) && value.every((row) => row !== null && typeof row === 'object' && !Array.isArray(row));
-}
-function getByPath(row, path) {
-    return path.split('.').reduce((current, key) => {
-        if (current === null || current === undefined || typeof current !== 'object')
-            return undefined;
-        return current[key];
-    }, row);
-}
-/** Convert a row field name into the human-readable label used by the legend and summary. */
-function titleCaseHeader(field) {
-    if (field.includes(' '))
-        return field;
-    const lastSegment = field.includes('.') ? (field.split('.').pop() ?? field) : field;
-    return lastSegment
-        .replace(/[_-]+/g, ' ')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .split(/\s+/)
-        .filter(Boolean)
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
-}
-/** Coerce a cell into a plottable number, tolerating the string numerics agents emit. */
-function toNumber(value) {
-    if (typeof value === 'number')
-        return Number.isFinite(value) ? value : null;
-    if (typeof value === 'boolean')
-        return value ? 1 : 0;
-    if (typeof value === 'bigint')
-        return Number(value);
-    if (typeof value === 'string') {
-        const cleaned = value.replace(/[\s,_]/g, '').replace(/^[$£€¥]/, '').replace(/%$/, '');
-        if (cleaned === '' || cleaned === '-')
-            return null;
-        const parsed = Number(cleaned);
-        return Number.isFinite(parsed) ? parsed : null;
-    }
-    return null;
-}
-/** Render an x value as an axis category label. */
-function formatCategory(value) {
-    if (value === null || value === undefined)
-        return '';
-    if (value instanceof Date) {
-        return Number.isNaN(value.getTime())
-            ? ''
-            : value.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-    }
-    if (typeof value === 'string') {
-        const trimmed = value.trim();
-        if (ISO_DATE_RE.test(trimmed)) {
-            const parsed = new Date(trimmed);
-            if (!Number.isNaN(parsed.getTime())) {
-                // A date-only string parses as UTC midnight, so it has to be read back in UTC
-                // or every label west of Greenwich names the previous day.
-                return parsed.toLocaleDateString(undefined, DATE_ONLY_RE.test(trimmed)
-                    ? { month: 'short', day: 'numeric', timeZone: 'UTC' }
-                    : { month: 'short', day: 'numeric' });
-            }
-        }
-        return value;
-    }
-    if (typeof value === 'object')
-        return '';
-    return String(value);
-}
-function truncateLabel(label) {
-    return label.length > MAX_X_LABEL_CHARS ? `${label.slice(0, MAX_X_LABEL_CHARS - 1)}…` : label;
-}
-/**
- * Axis tick text. `compact` is decided once for the whole axis rather than per
- * value, so one axis never reads `5,000` above `10K`.
- */
-function formatTick(value, step, compact) {
-    const decimals = step >= 1 ? 0 : Math.min(4, Math.ceil(-Math.log10(step)));
-    return new Intl.NumberFormat(undefined, {
-        maximumFractionDigits: decimals,
-        notation: compact ? 'compact' : 'standard',
-    }).format(value);
-}
-/** Tooltip text — always the full value, never rounded to the axis step. */
-function formatExact(value) {
-    return new Intl.NumberFormat(undefined, { maximumFractionDigits: 4 }).format(value);
-}
-/** A 1 / 2 / 5 × 10ⁿ tick scale covering [min, max]. */
-function niceScale(min, max, target) {
-    let low = min;
-    let high = max;
-    if (!Number.isFinite(low) || !Number.isFinite(high)) {
-        low = 0;
-        high = 1;
-    }
-    if (low === high) {
-        const pad = Math.abs(low) > 0 ? Math.abs(low) * 0.1 : 1;
-        low -= pad;
-        high += pad;
-    }
-    const rawStep = (high - low) / Math.max(1, target);
-    const magnitude = 10 ** Math.floor(Math.log10(rawStep));
-    const normalized = rawStep / magnitude;
-    const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
-    const domainMin = Math.floor(low / step) * step;
-    const domainMax = Math.ceil(high / step) * step;
-    const ticks = [];
-    for (let value = domainMin; value <= domainMax + step / 2; value += step) {
-        // Re-round each accumulated step so 0.1 increments do not print as 0.30000000000000004.
-        ticks.push(Number(value.toFixed(10)));
-    }
-    return { ticks, domainMin, domainMax, step };
-}
-/** Split a series into runs of consecutive plottable points, so gaps break the line. */
-function segmentsOf(points) {
-    const segments = [];
-    let current = [];
-    for (const point of points) {
-        const previous = current[current.length - 1];
-        if (previous === undefined || point.index === previous.index + 1) {
-            current.push(point);
-            continue;
-        }
-        segments.push(current);
-        current = [point];
-    }
-    if (current.length > 0)
-        segments.push(current);
-    return segments;
-}
-function svgNode(name, part) {
-    const node = document.createElementNS(SVG_NS, name);
-    if (part !== undefined)
-        node.setAttribute('part', part);
-    return node;
-}
-function setAttributes(node, attributes) {
-    for (const [name, value] of Object.entries(attributes))
-        node.setAttribute(name, String(value));
-}
-function tooltip(text) {
-    const node = svgNode('title');
-    node.textContent = text;
-    return node;
-}
-class CrtrChartElement extends HTMLElement {
-    #container = document.createElement('div');
-    #title = document.createElement('div');
-    #legend = document.createElement('div');
-    #plot = document.createElement('div');
-    #config = null;
-    #rows = null;
-    #observer = null;
-    #width = 0;
-    #generation = 0;
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = STYLE;
-        this.#container.part.add('container');
-        this.#title.part.add('title');
-        this.#legend.part.add('legend');
-        this.#plot.part.add('plot');
-        root.append(style, this.#container);
-    }
-    connectedCallback() {
-        ++this.#generation;
-        this.#config = null;
-        this.#rows = null;
-        const read = readSlotConfig(this);
-        if (read.status !== 'ok') {
-            this.#renderUnavailable(read.reason);
-            return;
-        }
-        const normalized = normalizeConfig(read.config);
-        if (normalized.status !== 'ok') {
-            this.#renderUnavailable(normalized.reason);
-            return;
-        }
-        this.#config = normalized.config;
-        this.#renderFrame();
-        this.#observe();
-        const { data } = normalized.config;
-        if (data !== undefined && !isRows(data)) {
-            this.#renderUnavailable('chart data is not a list of rows');
-            return;
-        }
-        this.#rows = data ?? [];
-        this.#renderPlot();
-    }
-    disconnectedCallback() {
-        this.#generation += 1;
-        this.#observer?.disconnect();
-        this.#observer = null;
-    }
-    #observe() {
-        this.#observer?.disconnect();
-        this.#width = this.#plot.getBoundingClientRect().width;
-        const observer = new ResizeObserver((entries) => {
-            const next = entries[0]?.contentRect.width ?? 0;
-            if (Math.abs(this.#width - next) < 0.5)
-                return;
-            this.#width = next;
-            this.#renderPlot();
-        });
-        observer.observe(this.#plot);
-        this.#observer = observer;
-    }
-    #renderUnavailable(reason) {
-        this.#observer?.disconnect();
-        this.#observer = null;
-        const box = document.createElement('div');
-        box.part.add('unavailable');
-        box.setAttribute('role', 'status');
-        const detail = document.createElement('span');
-        detail.part.add('reason');
-        detail.textContent = reason;
-        box.append('Chart unavailable: ', detail);
-        this.#container.replaceChildren(box);
-    }
-    /** Title and legend come from the config alone. */
-    #renderFrame() {
-        const config = this.#config;
-        if (config === null)
-            return;
-        const children = [];
-        const title = config.title?.trim();
-        if (title !== undefined && title.length > 0) {
-            this.#title.textContent = title;
-            children.push(this.#title);
-        }
-        if (config.y.length > 1) {
-            this.#legend.replaceChildren(...config.y.map((definition, index) => {
-                const item = document.createElement('div');
-                item.part.add('legend-item');
-                const swatch = document.createElement('span');
-                swatch.part.add('legend-swatch');
-                swatch.setAttribute('aria-hidden', 'true');
-                swatch.style.background = SERIES_COLORS[index % SERIES_COLORS.length] ?? SERIES_COLORS[0];
-                const label = document.createElement('span');
-                label.part.add('legend-label');
-                label.textContent = definition.label ?? titleCaseHeader(definition.field);
-                item.append(swatch, label);
-                return item;
-            }));
-            children.push(this.#legend);
-        }
-        children.push(this.#plot);
-        this.#container.replaceChildren(...children);
-    }
-    #renderPlot() {
-        const config = this.#config;
-        const rows = this.#rows;
-        if (config === null || rows === null)
-            return;
-        const categories = rows.map((row) => formatCategory(getByPath(row, config.x)));
-        const series = config.y.map((definition, seriesIndex) => {
-            const points = [];
-            rows.forEach((row, index) => {
-                const value = toNumber(getByPath(row, definition.field));
-                if (value !== null)
-                    points.push({ index, value });
-            });
-            return {
-                label: definition.label ?? titleCaseHeader(definition.field),
-                color: SERIES_COLORS[seriesIndex % SERIES_COLORS.length] ?? SERIES_COLORS[0],
-                points,
-            };
-        });
-        // Accumulated rather than spread over `Math.min(...values)`, which blows the call
-        // stack on a dataset of a few hundred thousand points.
-        let plotted = 0;
-        let low = 0;
-        let high = 0;
-        for (const entry of series) {
-            for (const point of entry.points) {
-                if (plotted === 0) {
-                    low = point.value;
-                    high = point.value;
-                }
-                else {
-                    if (point.value < low)
-                        low = point.value;
-                    if (point.value > high)
-                        high = point.value;
-                }
-                plotted += 1;
-            }
-        }
-        // Bars and areas are read against a baseline, so their domain must contain zero.
-        if (config.kind !== 'line') {
-            low = Math.min(low, 0);
-            high = Math.max(high, 0);
-        }
-        if (plotted === 0 || rows.length === 0) {
-            const empty = document.createElement('div');
-            empty.part.add('empty');
-            empty.style.height = 'var(--crtr-chart-plot-height, 260px)';
-            empty.textContent = 'No data to chart';
-            this.#plot.replaceChildren(empty);
-            return;
-        }
-        const width = this.#width;
-        if (width <= 0) {
-            // First paint, before the container has been measured: hold the height so
-            // the surrounding document does not reflow when the SVG arrives.
-            const spacer = document.createElement('div');
-            spacer.style.height = 'var(--crtr-chart-plot-height, 260px)';
-            this.#plot.replaceChildren(spacer);
-            return;
-        }
-        const { ticks, domainMin, domainMax, step } = niceScale(low, high, Y_TICK_TARGET);
-        const compactTicks = Math.max(...ticks.map((tick) => Math.abs(tick))) >= 10_000;
-        const tickLabels = ticks.map((tick) => formatTick(tick, step, compactTicks));
-        const marginLeft = Math.min(88, Math.max(36, Math.max(...tickLabels.map((label) => label.length)) * 6.4 + 12));
-        const plotWidth = Math.max(0, width - marginLeft - MARGIN_RIGHT);
-        const plotHeight = Math.max(0, HEIGHT - MARGIN_TOP - MARGIN_BOTTOM);
-        const plotBottom = MARGIN_TOP + plotHeight;
-        const band = categories.length > 0 ? plotWidth / categories.length : plotWidth;
-        const xOf = (index) => marginLeft + band * (index + 0.5);
-        const span = domainMax - domainMin || 1;
-        const yOf = (value) => plotBottom - ((value - domainMin) / span) * plotHeight;
-        const baselineValue = Math.min(Math.max(0, domainMin), domainMax);
-        const baselineY = yOf(baselineValue);
-        const svg = svgNode('svg', 'chart');
-        setAttributes(svg, { role: 'img', width, height: HEIGHT, viewBox: `0 0 ${width} ${HEIGHT}` });
-        svg.setAttribute('aria-label', `${config.kind} chart of ${series.map((entry) => entry.label).join(', ')} by ${titleCaseHeader(config.x)}`);
-        ticks.forEach((tick, tickIndex) => {
-            const line = svgNode('line');
-            line.setAttribute('class', tick === baselineValue ? 'grid baseline' : 'grid');
-            setAttributes(line, {
-                x1: marginLeft,
-                x2: marginLeft + plotWidth,
-                y1: yOf(tick),
-                y2: yOf(tick),
-            });
-            const label = svgNode('text');
-            label.setAttribute('class', 'tick');
-            setAttributes(label, {
-                x: marginLeft - 8,
-                y: yOf(tick),
-                'text-anchor': 'end',
-                'dominant-baseline': 'central',
-            });
-            label.textContent = tickLabels[tickIndex] ?? '';
-            svg.append(line, label);
-        });
-        // Label a whole-number stride of categories so the gaps stay even, then pin the
-        // last one — replacing rather than appending when it would crowd its neighbour.
-        const xTickIndices = [];
-        if (categories.length > 0) {
-            const maxTicks = Math.max(2, Math.min(categories.length, Math.floor(plotWidth / X_TICK_SPACING) || 1));
-            const stride = Math.max(1, Math.ceil((categories.length - 1) / (maxTicks - 1)));
-            for (let index = 0; index < categories.length; index += stride)
-                xTickIndices.push(index);
-            const last = xTickIndices[xTickIndices.length - 1] ?? 0;
-            if (last !== categories.length - 1) {
-                if ((categories.length - 1 - last) * band >= X_TICK_SPACING)
-                    xTickIndices.push(categories.length - 1);
-                else
-                    xTickIndices[xTickIndices.length - 1] = categories.length - 1;
-            }
-        }
-        for (const index of xTickIndices) {
-            const text = truncateLabel(categories[index] ?? '');
-            const center = xOf(index);
-            const half = (text.length * LABEL_CHAR_WIDTH) / 2;
-            const anchor = center - half < 0 ? 'start' : center + half > width ? 'end' : 'middle';
-            const label = svgNode('text');
-            label.setAttribute('class', 'tick');
-            setAttributes(label, {
-                x: anchor === 'start' ? 0 : anchor === 'end' ? width : center,
-                y: plotBottom + 16,
-                'text-anchor': anchor,
-                'dominant-baseline': 'hanging',
-            });
-            label.textContent = text;
-            svg.append(label);
-        }
-        if (config.kind === 'bar') {
-            const groupWidth = band * 0.72;
-            const slot = groupWidth / series.length;
-            const barWidth = Math.max(1, slot - (slot > 4 ? 1 : 0));
-            svg.style.setProperty('--bar-max-radius', `${barWidth / 3}px`);
-            series.forEach((entry, seriesIndex) => {
-                const group = svgNode('g');
-                for (const point of entry.points) {
-                    const y = yOf(point.value);
-                    const bar = svgNode('rect', 'bar');
-                    setAttributes(bar, {
-                        x: xOf(point.index) - groupWidth / 2 + seriesIndex * slot,
-                        y: Math.min(y, baselineY),
-                        width: barWidth,
-                        height: Math.max(1, Math.abs(baselineY - y)),
-                    });
-                    bar.style.fill = entry.color;
-                    bar.append(tooltip(`${entry.label} · ${categories[point.index] ?? point.index}: ${formatExact(point.value)}`));
-                    group.append(bar);
-                }
-                svg.append(group);
-            });
-        }
-        else {
-            const showDots = categories.length <= 40;
-            for (const entry of series) {
-                const group = svgNode('g');
-                const segments = segmentsOf(entry.points);
-                for (const segment of segments) {
-                    const trace = segment.map((point) => `${xOf(point.index)},${yOf(point.value)}`).join(' L ');
-                    const first = segment[0];
-                    const last = segment[segment.length - 1];
-                    if (config.kind === 'area' && first !== undefined && last !== undefined) {
-                        const area = svgNode('path', 'area');
-                        setAttributes(area, {
-                            d: `M ${xOf(first.index)},${baselineY} L ${trace} L ${xOf(last.index)},${baselineY} Z`,
-                        });
-                        area.style.fill = entry.color;
-                        group.append(area);
-                    }
-                    const line = svgNode('path', 'line');
-                    setAttributes(line, { d: `M ${trace}`, fill: 'none' });
-                    line.style.stroke = entry.color;
-                    group.append(line);
-                    if (!showDots && segment.length > 1)
-                        continue;
-                    for (const point of segment) {
-                        const dot = svgNode('circle', 'point');
-                        setAttributes(dot, { cx: xOf(point.index), cy: yOf(point.value) });
-                        dot.style.fill = entry.color;
-                        dot.append(tooltip(`${entry.label} · ${categories[point.index] ?? point.index}: ${formatExact(point.value)}`));
-                        group.append(dot);
-                    }
-                }
-                svg.append(group);
-            }
-        }
-        this.#plot.replaceChildren(svg);
-    }
-}
-registerElement('crtr-chart', CrtrChartElement);