@joanroucoux/cairn-ui 0.7.1 → 0.8.0

package/fesm2022/joanroucoux-cairn-ui-line-chart.mjs

@@ -0,0 +1,844 @@
+import * as i0 from '@angular/core';
+import { signal, inject, DestroyRef, input, booleanAttribute, ElementRef, viewChild, computed, afterNextRender, effect, untracked, Component } from '@angular/core';
+import { injectReducedMotion } from '@joanroucoux/cairn-ui/motion';
+import { scaleLinear } from 'd3-scale';
+import { curveMonotoneX, line } from 'd3-shape';
+
+const axisTicks = (points, maxTicks = 5) => {
+    if (points.length <= maxTicks) {
+        return [...points];
+    }
+    const count = Math.max(3, Math.min(maxTicks, points.length));
+    const step = (points.length - 1) / (count - 1);
+    const indexes = new Set();
+    for (let tick = 0; tick < count; tick++) {
+        indexes.add(Math.round(tick * step));
+    }
+    return [...indexes].sort((a, b) => a - b).map((index) => points[index]);
+};
+const isCoreTick = (index, count) => {
+    if (count <= 3) {
+        return true;
+    }
+    const middle = Math.floor((count - 1) / 2);
+    return index === 0 || index === count - 1 || index === middle;
+};
+const firstOfEachRun = (labels, included) => {
+    let previous = null;
+    return labels.map((text, index) => {
+        if (!included(index)) {
+            return false;
+        }
+        const distinct = text !== previous;
+        previous = text;
+        return distinct;
+    });
+};
+const tickLabels = (ticks, format, mode) => {
+    const labels = ticks.map((tick) => format(tick.t));
+    const count = labels.length;
+    const core = (index) => isCoreTick(index, count);
+    const everyTick = firstOfEachRun(labels, () => true);
+    const coreTicks = firstOfEachRun(labels, core);
+    return labels.map((text, index) => {
+        const wide = mode === 3 ? coreTicks[index] : everyTick[index];
+        const narrow = coreTicks[index];
+        if (!wide && !narrow) {
+            return null;
+        }
+        const classes = mode === 'auto' ? `${narrow ? '' : 'max-sm:hidden'} ${wide ? '' : 'sm:hidden'}`.trim() : wide ? '' : 'hidden';
+        return { text, classes };
+    });
+};
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const nearestPointIndex = (points, x) => {
+    let nearest = 0;
+    let nearestDistance = Infinity;
+    points.forEach((point, index) => {
+        const distance = Math.abs(point.x - x);
+        if (distance < nearestDistance) {
+            nearestDistance = distance;
+            nearest = index;
+        }
+    });
+    return nearest;
+};
+const navigateIndex = (key, current, last) => {
+    switch (key) {
+        case 'ArrowRight':
+            return { index: clamp((current ?? -1) + 1, 0, last), preventDefault: true };
+        case 'ArrowLeft':
+            return { index: clamp((current ?? last + 1) - 1, 0, last), preventDefault: true };
+        case 'Home':
+            return { index: 0, preventDefault: true };
+        case 'End':
+            return { index: last, preventDefault: true };
+        case 'Escape':
+            return { index: null, preventDefault: false };
+        default:
+            return null;
+    }
+};
+
+const START_LABEL_HEIGHT = 16;
+const AXIS_ROW = 17;
+const TOOLTIP_SIZES = ['compact', 'large'];
+const TOOLTIP_CLASSES = {
+    compact: { box: '-top-3 px-2.5', value: 'text-label', delta: 'text-caption' },
+    large: { box: 'top-0 px-3', value: 'text-body', delta: 'text-label' },
+};
+const PLOT_PADDING_RATIO = 16 / 240;
+const SPARKLINE_PADDING = 4;
+const START_LABEL_BASELINE_OFFSET = 4;
+const TOOLTIP_OFFSET = 14;
+const TOOLTIP_FLIP_RATIO = 0.55;
+const plotHeightFor = (height, sparkline, axisGap, wide) => sparkline ? height : Math.max(height - resolveGap(axisGap, wide) - AXIS_ROW, 1);
+const plotPaddingFor = (plotHeight, sparkline) => sparkline ? SPARKLINE_PADDING : plotHeight * PLOT_PADDING_RATIO;
+const startLabelBaseline = (boxBottom) => boxBottom - START_LABEL_BASELINE_OFFSET;
+const tooltipPlacement = (ratio) => {
+    const flipped = ratio > TOOLTIP_FLIP_RATIO;
+    return `left: calc(${ratio * 100}% ${flipped ? '-' : '+'} ${TOOLTIP_OFFSET}px); transform: ${flipped ? 'translateX(-100%)' : 'none'}`;
+};
+const deltaTone = (delta) => delta > 0 ? 'text-(--positive)' : delta < 0 ? 'text-(--negative)' : 'text-(--muted-foreground)';
+const DEFAULT_WIDTH = 640;
+const DEFAULT_HEIGHT = 240;
+const identityValue = (value) => `${value}`;
+const identityDelta = (delta) => `${delta > 0 ? '+' : ''}${delta}`;
+const identityTime = (time) => new Date(time).toISOString();
+const parseAxisTicks = (value) => value === 'auto' ? 'auto' : Number(value);
+const resolveGap = (gap, wide) => (gap === 'auto' ? (wide ? 16 : 12) : gap);
+const resolveTooltip = (size, wide) => size === 'auto' ? (wide ? 'large' : 'compact') : size;
+const tooltipClassesFor = (size, wide) => TOOLTIP_CLASSES[resolveTooltip(size, wide)];
+
+const CURVE = curveMonotoneX;
+const buildGeometry = (points, width, height, padding = {}) => {
+    if (points.length === 0) {
+        return null;
+    }
+    const { x: paddingX = 4, top: paddingTop = 4, bottom: paddingBottom = 4 } = padding;
+    const plotTop = paddingTop;
+    const plotBottom = height - paddingBottom;
+    const times = points.map((point) => point.t);
+    const values = points.map((point) => point.v);
+    const minValue = Math.min(...values);
+    const maxValue = Math.max(...values);
+    const x = scaleLinear()
+        .domain([Math.min(...times), Math.max(...times)])
+        .range([paddingX, width - paddingX]);
+    const y = minValue === maxValue
+        ? () => (plotTop + plotBottom) / 2
+        : scaleLinear().domain([minValue, maxValue]).range([plotBottom, plotTop]);
+    const toX = (point) => (points.length === 1 ? paddingX : x(point.t));
+    const lineGenerator = line()
+        .x(toX)
+        .y((point) => y(point.v))
+        .curve(CURVE);
+    const first = points[0];
+    const last = points.at(-1);
+    return {
+        line: lineGenerator(points),
+        end: { x: toX(last), y: y(last.v) },
+        start: { y: y(first.v) },
+        points: points.map((point) => ({ ...point, x: toX(point), y: y(point.v) })),
+        plotBottom,
+        plotTop,
+    };
+};
+
+const observeSize = (element, destroyRef, measured) => {
+    if (typeof ResizeObserver === 'undefined') {
+        return;
+    }
+    const { clientWidth: width, clientHeight: height } = element;
+    if (width > 0 && height > 0) {
+        measured({ width, height });
+    }
+    const observer = new ResizeObserver(([entry]) => {
+        if (entry) {
+            measured({ width: entry.contentRect.width, height: entry.contentRect.height });
+        }
+    });
+    observer.observe(element);
+    destroyRef.onDestroy(() => observer.disconnect());
+};
+
+const LINE_GAP = 6;
+const COLLISION_MARGIN = 6;
+const EDGE_TOLERANCE = 3;
+const candidateSlots = (startY, box, label) => {
+    const aboveTop = startY - LINE_GAP - label.height;
+    const aboveBottom = startY - LINE_GAP;
+    const belowTop = startY + LINE_GAP;
+    const belowBottom = startY + LINE_GAP + label.height;
+    const slots = [
+        { anchor: 'end', x: box.width, y: aboveBottom, top: aboveTop, bottom: aboveBottom },
+        { anchor: 'end', x: box.width, y: belowBottom, top: belowTop, bottom: belowBottom },
+        { anchor: 'start', x: 0, y: aboveBottom, top: aboveTop, bottom: aboveBottom },
+        { anchor: 'start', x: 0, y: belowBottom, top: belowTop, bottom: belowBottom },
+        { anchor: 'end', x: box.width, y: label.height, top: 0, bottom: label.height },
+        { anchor: 'start', x: 0, y: label.height, top: 0, bottom: label.height },
+        { anchor: 'end', x: box.width, y: box.height, top: box.height - label.height, bottom: box.height },
+        { anchor: 'start', x: 0, y: box.height, top: box.height - label.height, bottom: box.height },
+    ];
+    return slots.filter((slot) => slot.top >= -EDGE_TOLERANCE && slot.bottom <= box.height + EDGE_TOLERANCE);
+};
+const hitsFor = (slot, label, points) => {
+    const left = slot.anchor === 'end' ? slot.x - label.width : slot.x;
+    const right = slot.anchor === 'end' ? slot.x : slot.x + label.width;
+    const top = slot.top - COLLISION_MARGIN;
+    const bottom = slot.bottom + COLLISION_MARGIN;
+    return points.filter((point) => point.x >= left && point.x <= right && point.y >= top && point.y <= bottom).length;
+};
+const placeStartLabel = (points, startY, box, label) => {
+    let best = null;
+    for (const slot of candidateSlots(startY, box, label)) {
+        const hits = hitsFor(slot, label, points);
+        if (!best || hits < best.hits) {
+            best = { slot, hits };
+        }
+        if (hits === 0) {
+            break;
+        }
+    }
+    if (!best) {
+        return { anchor: 'end', x: box.width, y: label.height };
+    }
+    const { anchor, x, y } = best.slot;
+    return { anchor, x, y };
+};
+
+const TRANSITION_SAMPLES = 120;
+const TRANSITION_DURATION = 260;
+const easeOutQuint = (t) => 1 - (1 - t) ** 5;
+const durationFrom = (value) => {
+    const match = /^\s*([\d.]+)(ms|s)\s*$/.exec(value);
+    const duration = match ? Number(match[1]) * (match[2] === 's' ? 1000 : 1) : Number.NaN;
+    return Number.isFinite(duration) ? duration : TRANSITION_DURATION;
+};
+const sameSeries = (a, b) => a === b ||
+    (b !== null &&
+        a.length === b.length &&
+        a.every((point, index) => point.t === b[index].t && point.v === b[index].v));
+const monotoneTangents = (xs, ys) => {
+    const n = xs.length;
+    const slopes = [];
+    for (let i = 0; i < n - 1; i++) {
+        const dx = xs[i + 1] - xs[i];
+        slopes.push(dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx);
+    }
+    const tangents = new Array(n).fill(0);
+    tangents[0] = slopes[0];
+    tangents[n - 1] = slopes[n - 2];
+    for (let i = 1; i < n - 1; i++) {
+        const a = slopes[i - 1];
+        const b = slopes[i];
+        tangents[i] = a * b <= 0 ? 0 : (a + b) / 2;
+    }
+    for (let i = 0; i < n - 1; i++) {
+        const slope = slopes[i];
+        if (slope === 0) {
+            tangents[i] = 0;
+            tangents[i + 1] = 0;
+            continue;
+        }
+        const a = tangents[i] / slope;
+        const b = tangents[i + 1] / slope;
+        const s = a * a + b * b;
+        if (s > 9) {
+            const t = 3 / Math.sqrt(s);
+            tangents[i] = t * a * slope;
+            tangents[i + 1] = t * b * slope;
+        }
+    }
+    return tangents;
+};
+const sampleMonotone = (points, sampleXs) => {
+    const xs = points.map((point) => point.x);
+    const ys = points.map((point) => point.y);
+    const tangents = monotoneTangents(xs, ys);
+    let segment = 0;
+    return sampleXs.map((x) => {
+        while (segment < xs.length - 2 && x > xs[segment + 1]) {
+            segment++;
+        }
+        const x0 = xs[segment];
+        const x1 = xs[segment + 1];
+        const dx = x1 - x0;
+        const f = dx === 0 ? 0 : (x - x0) / dx;
+        const f2 = f * f;
+        const f3 = f2 * f;
+        const y0 = ys[segment];
+        const y1 = ys[segment + 1];
+        const m0 = tangents[segment];
+        const m1 = tangents[segment + 1];
+        return (2 * f3 - 3 * f2 + 1) * y0 + (f3 - 2 * f2 + f) * m0 * dx + (-2 * f3 + 3 * f2) * y1 + (f3 - f2) * m1 * dx;
+    });
+};
+const polyline = (xs, ys) => xs.map((x, index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${ys[index].toFixed(2)}`).join(' ');
+const shapeTransition = (from, to) => {
+    const left = to[0].x;
+    const right = to.at(-1).x;
+    const xs = Array.from({ length: TRANSITION_SAMPLES }, (_, index) => left + ((right - left) * index) / (TRANSITION_SAMPLES - 1));
+    return { xs, from: sampleMonotone(from, xs), to: sampleMonotone(to, xs) };
+};
+const shapeAt = (transition, progress) => transition.from.map((fromY, index) => fromY + (transition.to[index] - fromY) * progress);
+const animateShape = (from, to, duration, draw, done) => {
+    const transition = shapeTransition(from, to);
+    const start = performance.now();
+    let frame = 0;
+    const step = (now) => {
+        const t = Math.min(1, Math.max(0, (now - start) / duration));
+        if (t === 1) {
+            done();
+            return;
+        }
+        const ys = shapeAt(transition, easeOutQuint(t));
+        draw(transition.xs.map((x, index) => ({ x, y: ys[index] })), polyline(transition.xs, ys));
+        frame = requestAnimationFrame(step);
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+};
+class ShapeMotion {
+    #view;
+    #points = null;
+    #rangeKey = null;
+    #target = null;
+    #held = null;
+    #drawn = null;
+    #stop = null;
+    constructor(view) {
+        this.#view = view;
+    }
+    follow(points, geometry, options) {
+        const newSeries = !sameSeries(points, this.#points);
+        const newRange = options.rangeKey === null || options.rangeKey !== this.#rangeKey;
+        this.#points = points;
+        if (newSeries) {
+            this.#rangeKey = options.rangeKey;
+        }
+        if (this.#stop && !newSeries && !options.reduced && geometry?.line === this.#target?.line) {
+            this.#target = geometry;
+            return;
+        }
+        const from = this.#drawn;
+        const held = this.#held ?? this.#target;
+        this.#target = geometry;
+        this.stop();
+        if (!newSeries ||
+            !newRange ||
+            !geometry ||
+            !from ||
+            from.length < 2 ||
+            geometry.points.length < 2 ||
+            options.reduced) {
+            this.#settle(geometry);
+            return;
+        }
+        const duration = options.duration();
+        if (duration <= 0) {
+            this.#settle(geometry);
+            return;
+        }
+        this.#hold(held);
+        this.#stop = animateShape(from, geometry.points, duration, (shape, line) => this.#draw(shape, line, shape.at(-1)), () => this.#settle(geometry));
+    }
+    stop() {
+        this.#stop?.();
+        this.#stop = null;
+    }
+    #hold(geometry) {
+        this.#held = geometry;
+        this.#view.hold(geometry);
+    }
+    #settle(geometry) {
+        this.#stop = null;
+        this.#hold(null);
+        this.#drawn = null;
+        if (geometry) {
+            this.#draw(geometry.points, geometry.line, geometry.end);
+        }
+    }
+    #draw(shape, line, end) {
+        this.#drawn = shape;
+        this.#view.draw(line, end);
+    }
+}
+
+const WIDE_QUERY = '(min-width: 64rem)';
+const wideViewport = () => {
+    const query = typeof matchMedia === 'function' ? matchMedia(WIDE_QUERY) : null;
+    const wide = signal(query?.matches ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wide" }] : /* istanbul ignore next */ []));
+    const onChange = (event) => wide.set(event.matches);
+    if (query) {
+        query.onchange = onChange;
+        inject(DestroyRef).onDestroy(() => (query.onchange = null));
+    }
+    return wide;
+};
+
+/**
+ * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
+ *
+ * Axis labels are never repeated: a tick whose `axisFormat` text equals the previous drawn label is
+ * not rendered. The first tick always is, so only the last edge label can drop. With `axisTicks="3"`
+ * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
+ * three core ticks below it. Tick positions are unchanged.
+ *
+ * A new series interpolates from the drawn curve, fading the start label and the dashed line. With
+ * `rangeKey` bound, only a series that comes with a new key does so: a new series under the same key
+ * (a reload after a buy) is drawn at once, with no fade. The key may change before its series arrives.
+ *
+ * @example
+ * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
+ */
+class UiLineChart {
+    points = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    valueFormat = input(identityValue, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
+    tooltipFormat = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tooltipFormat" }] : /* istanbul ignore next */ []));
+    deltaFormat = input(identityDelta, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deltaFormat" }] : /* istanbul ignore next */ []));
+    timeFormat = input(identityTime, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    axisFormat = input(identityTime, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisFormat" }] : /* istanbul ignore next */ []));
+    startLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
+    timeColumnLabel = input('Time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeColumnLabel" }] : /* istanbul ignore next */ []));
+    valueColumnLabel = input('Value', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueColumnLabel" }] : /* istanbul ignore next */ []));
+    sparkline = input(false, { ...(ngDevMode ? { debugName: "sparkline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    tooltip = input('compact', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    tooltipDelta = input(true, { ...(ngDevMode ? { debugName: "tooltipDelta" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    axisGap = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisGap" }] : /* istanbul ignore next */ []));
+    axisTicks = input('auto', { ...(ngDevMode ? { debugName: "axisTicks" } : /* istanbul ignore next */ {}), transform: parseAxisTicks });
+    rangeKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeKey" }] : /* istanbul ignore next */ []));
+    #destroyRef = inject(DestroyRef);
+    #host = inject(ElementRef);
+    #wide = wideViewport();
+    #reducedMotion = injectReducedMotion();
+    #motion = new ShapeMotion({
+        hold: (geometry) => {
+            this.held.set(geometry);
+            this.activeIndex.update((index) => (geometry ? null : index));
+        },
+        draw: (line, end) => {
+            this.lineRef()?.nativeElement.setAttribute('d', line);
+            this.endRef()?.nativeElement.setAttribute('cx', String(end.x));
+            this.endRef()?.nativeElement.setAttribute('cy', String(end.y));
+        },
+    });
+    svgRef = viewChild.required('svgRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
+    lineRef = viewChild('lineRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineRef" }] : /* istanbul ignore next */ []));
+    endRef = viewChild('endRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endRef" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    held = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
+    measuredSize = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "measuredSize" }] : /* istanbul ignore next */ []));
+    effectiveWidth = computed(() => this.measuredSize()?.width ?? DEFAULT_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
+    effectiveHeight = computed(() => this.measuredSize()?.height ?? DEFAULT_HEIGHT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : /* istanbul ignore next */ []));
+    plotHeight = computed(() => plotHeightFor(this.effectiveHeight(), this.sparkline(), this.axisGap(), this.#wide()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plotHeight" }] : /* istanbul ignore next */ []));
+    tooltipStyle = (point) => tooltipPlacement(point.x / this.effectiveWidth());
+    tooltipClasses = computed(() => tooltipClassesFor(this.tooltip(), this.#wide()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipClasses" }] : /* istanbul ignore next */ []));
+    geometry = computed(() => {
+        const plotHeight = this.plotHeight();
+        const padding = plotPaddingFor(plotHeight, this.sparkline());
+        return buildGeometry(this.points(), this.effectiveWidth(), plotHeight, { x: 0, top: padding, bottom: padding });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
+    shown = computed(() => this.held() ?? this.geometry(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    startFade = computed(() => this.held() ? 'opacity-0 duration-(--duration-exit)' : 'duration-(--duration-fast)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startFade" }] : /* istanbul ignore next */ []));
+    ticks = computed(() => axisTicks(this.geometry().points), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    tickTexts = computed(() => tickLabels(this.ticks(), this.axisFormat(), this.axisTicks()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickTexts" }] : /* istanbul ignore next */ []));
+    active = computed(() => {
+        const geometry = this.geometry();
+        const index = this.activeIndex();
+        return geometry && index !== null && !this.held() ? geometry.points[index] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    startLabelInfo = computed(() => {
+        const text = this.startLabel();
+        const geometry = this.shown();
+        if (!text || !geometry) {
+            return null;
+        }
+        const label = `${text} ${this.valueFormat()(geometry.points[0].v)}`;
+        const size = { width: label.length * 0.56 * 12 + 8, height: START_LABEL_HEIGHT };
+        const placement = placeStartLabel(geometry.points, geometry.start.y, { width: this.effectiveWidth(), height: this.plotHeight() }, size);
+        return { label, placement: { ...placement, y: startLabelBaseline(placement.y) } };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startLabelInfo" }] : /* istanbul ignore next */ []));
+    #renderRef = afterNextRender(() => {
+        this.#destroyRef.onDestroy(() => this.#renderRef.destroy());
+        observeSize(this.svgRef().nativeElement, this.#destroyRef, (size) => this.measuredSize.set(size));
+    });
+    constructor() {
+        effect(() => {
+            const points = this.points();
+            const geometry = this.geometry();
+            const reduced = this.#reducedMotion();
+            untracked(() => this.#motion.follow(points, geometry, {
+                reduced,
+                rangeKey: this.rangeKey(),
+                duration: () => durationFrom(getComputedStyle(this.#host.nativeElement).getPropertyValue('--duration-base')),
+            }));
+        });
+        this.#destroyRef.onDestroy(() => this.#motion.stop());
+    }
+    deltaFor(point) {
+        return point.v - this.points()[0].v;
+    }
+    deltaClasses(point) {
+        return `${this.tooltipClasses().delta} ${deltaTone(this.deltaFor(point))}`;
+    }
+    onPointerMove(event) {
+        const geometry = this.geometry();
+        if (this.sparkline() || !geometry || geometry.points.length === 0) {
+            return;
+        }
+        const rect = this.svgRef().nativeElement.getBoundingClientRect();
+        const ratio = rect.width === 0 ? 1 : this.effectiveWidth() / rect.width;
+        const x = (event.clientX - rect.left) * ratio;
+        this.activeIndex.set(nearestPointIndex(geometry.points, x));
+    }
+    onPointerLeave() {
+        this.activeIndex.set(null);
+    }
+    onKeydown(event) {
+        const geometry = this.geometry();
+        if (this.sparkline() || !geometry || geometry.points.length === 0) {
+            return;
+        }
+        const navigation = navigateIndex(event.key, this.activeIndex(), geometry.points.length - 1);
+        if (!navigation) {
+            return;
+        }
+        if (navigation.preventDefault) {
+            event.preventDefault();
+        }
+        this.activeIndex.set(navigation.index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiLineChart, isStandalone: true, selector: "ui-line-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormat: { classPropertyName: "tooltipFormat", publicName: "tooltipFormat", isSignal: true, isRequired: false, transformFunction: null }, deltaFormat: { classPropertyName: "deltaFormat", publicName: "deltaFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, valueColumnLabel: { classPropertyName: "valueColumnLabel", publicName: "valueColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelta: { classPropertyName: "tooltipDelta", publicName: "tooltipDelta", isSignal: true, isRequired: false, transformFunction: null }, axisGap: { classPropertyName: "axisGap", publicName: "axisGap", isSignal: true, isRequired: false, transformFunction: null }, axisTicks: { classPropertyName: "axisTicks", publicName: "axisTicks", isSignal: true, isRequired: false, transformFunction: null }, rangeKey: { classPropertyName: "rangeKey", publicName: "rangeKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }, { propertyName: "lineRef", first: true, predicate: ["lineRef"], descendants: true, isSignal: true }, { propertyName: "endRef", first: true, predicate: ["endRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="relative h-full">
+      <svg
+        #svgRef
+        class="block h-full w-full touch-pan-y overflow-visible"
+        role="img"
+        [attr.aria-label]="label()"
+        [attr.height]="effectiveHeight()"
+        [attr.tabindex]="sparkline() ? null : 0"
+        [attr.viewBox]="'0 0 ' + effectiveWidth() + ' ' + effectiveHeight()"
+        [attr.width]="effectiveWidth()"
+        (keydown)="onKeydown($event)"
+        (pointerleave)="onPointerLeave()"
+        (pointermove)="onPointerMove($event)"
+      >
+        @if (shown(); as shape) {
+          <path
+            #lineRef
+            class="stroke-(--foreground)"
+            data-chart-line
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [attr.d]="shape.line"
+            [attr.stroke-width]="sparkline() ? 1.5 : 2"
+          />
+
+          @if (!sparkline()) {
+            <line
+              class="stroke-(--border) transition-opacity ease-(--ease-out)"
+              data-chart-start-line
+              stroke-dasharray="3 4"
+              stroke-width="1"
+              x1="0"
+              [attr.x2]="effectiveWidth()"
+              [attr.y1]="shape.start.y"
+              [attr.y2]="shape.start.y"
+              [class]="startFade()"
+            />
+
+            @if (startLabelInfo(); as info) {
+              <text
+                class="text-caption fill-(--subtle-foreground) tabular-nums transition-opacity ease-(--ease-out)"
+                data-chart-start-label
+                [attr.text-anchor]="info.placement.anchor"
+                [attr.x]="info.placement.x"
+                [attr.y]="info.placement.y"
+                [class]="startFade()"
+              >
+                {{ info.label }}
+              </text>
+            }
+
+            <circle
+              #endRef
+              class="fill-(--foreground) stroke-(--card) [paint-order:stroke]"
+              data-chart-end
+              r="4"
+              stroke-width="6"
+              [attr.cx]="shape.end.x"
+              [attr.cy]="shape.end.y"
+            />
+
+            @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
+              @if (tickTexts()[index]; as label) {
+                <text
+                  class="text-caption fill-(--subtle-foreground) tabular-nums"
+                  data-chart-axis-tick
+                  [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+                  [attr.x]="tick.x"
+                  [attr.y]="effectiveHeight() - 4"
+                  [class]="label.classes"
+                >
+                  {{ label.text }}
+                </text>
+              }
+            }
+
+            @if (active(); as point) {
+              <line
+                class="stroke-(--border)"
+                data-chart-crosshair
+                stroke-width="1"
+                y1="0"
+                [attr.x1]="point.x"
+                [attr.x2]="point.x"
+                [attr.y2]="plotHeight()"
+              />
+              <circle
+                class="fill-(--foreground) stroke-(--card) [paint-order:stroke]"
+                data-chart-active
+                r="5"
+                stroke-width="6"
+                [attr.cx]="point.x"
+                [attr.cy]="point.y"
+              />
+            }
+          }
+        }
+      </svg>
+
+      @if (active(); as point) {
+        <div
+          class="rounded-container pointer-events-none absolute bg-(--elevated) py-2 whitespace-nowrap [font-variant-numeric:var(--numeric)] shadow-[0_4px_16px_rgb(0_0_0/0.12),inset_0_0_0_1px_var(--border)]"
+          data-testid="chart-tooltip"
+          role="status"
+          [class]="tooltipClasses().box"
+          [style]="tooltipStyle(point)"
+        >
+          <p class="font-medium text-(--foreground)" [class]="tooltipClasses().value">
+            {{ tooltipFormat()?.(point) ?? valueFormat()(point.v) }}
+          </p>
+          @if (tooltipDelta()) {
+            <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
+          }
+          <p class="text-caption text-(--subtle-foreground)" data-chart-date>{{ timeFormat()(point.t) }}</p>
+        </div>
+      }
+      @if (points().length > 0) {
+        <div class="sr-only">
+          <table>
+            <caption [textContent]="label()"></caption>
+            <thead>
+              <tr>
+                <th scope="col">{{ timeColumnLabel() }}</th>
+                <th scope="col">{{ valueColumnLabel() }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (point of points(); track point.t) {
+                <tr>
+                  <td>{{ timeFormat()(point.t) }}</td>
+                  <td>{{ valueFormat()(point.v) }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </div>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiLineChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-line-chart',
+                    template: `
+    <div class="relative h-full">
+      <svg
+        #svgRef
+        class="block h-full w-full touch-pan-y overflow-visible"
+        role="img"
+        [attr.aria-label]="label()"
+        [attr.height]="effectiveHeight()"
+        [attr.tabindex]="sparkline() ? null : 0"
+        [attr.viewBox]="'0 0 ' + effectiveWidth() + ' ' + effectiveHeight()"
+        [attr.width]="effectiveWidth()"
+        (keydown)="onKeydown($event)"
+        (pointerleave)="onPointerLeave()"
+        (pointermove)="onPointerMove($event)"
+      >
+        @if (shown(); as shape) {
+          <path
+            #lineRef
+            class="stroke-(--foreground)"
+            data-chart-line
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [attr.d]="shape.line"
+            [attr.stroke-width]="sparkline() ? 1.5 : 2"
+          />
+
+          @if (!sparkline()) {
+            <line
+              class="stroke-(--border) transition-opacity ease-(--ease-out)"
+              data-chart-start-line
+              stroke-dasharray="3 4"
+              stroke-width="1"
+              x1="0"
+              [attr.x2]="effectiveWidth()"
+              [attr.y1]="shape.start.y"
+              [attr.y2]="shape.start.y"
+              [class]="startFade()"
+            />
+
+            @if (startLabelInfo(); as info) {
+              <text
+                class="text-caption fill-(--subtle-foreground) tabular-nums transition-opacity ease-(--ease-out)"
+                data-chart-start-label
+                [attr.text-anchor]="info.placement.anchor"
+                [attr.x]="info.placement.x"
+                [attr.y]="info.placement.y"
+                [class]="startFade()"
+              >
+                {{ info.label }}
+              </text>
+            }
+
+            <circle
+              #endRef
+              class="fill-(--foreground) stroke-(--card) [paint-order:stroke]"
+              data-chart-end
+              r="4"
+              stroke-width="6"
+              [attr.cx]="shape.end.x"
+              [attr.cy]="shape.end.y"
+            />
+
+            @for (tick of ticks(); track tick.t; let index = $index; let first = $first; let last = $last) {
+              @if (tickTexts()[index]; as label) {
+                <text
+                  class="text-caption fill-(--subtle-foreground) tabular-nums"
+                  data-chart-axis-tick
+                  [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+                  [attr.x]="tick.x"
+                  [attr.y]="effectiveHeight() - 4"
+                  [class]="label.classes"
+                >
+                  {{ label.text }}
+                </text>
+              }
+            }
+
+            @if (active(); as point) {
+              <line
+                class="stroke-(--border)"
+                data-chart-crosshair
+                stroke-width="1"
+                y1="0"
+                [attr.x1]="point.x"
+                [attr.x2]="point.x"
+                [attr.y2]="plotHeight()"
+              />
+              <circle
+                class="fill-(--foreground) stroke-(--card) [paint-order:stroke]"
+                data-chart-active
+                r="5"
+                stroke-width="6"
+                [attr.cx]="point.x"
+                [attr.cy]="point.y"
+              />
+            }
+          }
+        }
+      </svg>
+
+      @if (active(); as point) {
+        <div
+          class="rounded-container pointer-events-none absolute bg-(--elevated) py-2 whitespace-nowrap [font-variant-numeric:var(--numeric)] shadow-[0_4px_16px_rgb(0_0_0/0.12),inset_0_0_0_1px_var(--border)]"
+          data-testid="chart-tooltip"
+          role="status"
+          [class]="tooltipClasses().box"
+          [style]="tooltipStyle(point)"
+        >
+          <p class="font-medium text-(--foreground)" [class]="tooltipClasses().value">
+            {{ tooltipFormat()?.(point) ?? valueFormat()(point.v) }}
+          </p>
+          @if (tooltipDelta()) {
+            <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
+          }
+          <p class="text-caption text-(--subtle-foreground)" data-chart-date>{{ timeFormat()(point.t) }}</p>
+        </div>
+      }
+      @if (points().length > 0) {
+        <div class="sr-only">
+          <table>
+            <caption [textContent]="label()"></caption>
+            <thead>
+              <tr>
+                <th scope="col">{{ timeColumnLabel() }}</th>
+                <th scope="col">{{ valueColumnLabel() }}</th>
+              </tr>
+            </thead>
+            <tbody>
+              @for (point of points(); track point.t) {
+                <tr>
+                  <td>{{ timeFormat()(point.t) }}</td>
+                  <td>{{ valueFormat()(point.v) }}</td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+    </div>
+  `,
+                    host: {
+                        class: 'block h-full',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], tooltipFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFormat", required: false }] }], deltaFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], timeColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeColumnLabel", required: false }] }], valueColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColumnLabel", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelta", required: false }] }], axisGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisGap", required: false }] }], axisTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTicks", required: false }] }], rangeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeKey", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }], lineRef: [{ type: i0.ViewChild, args: ['lineRef', { isSignal: true }] }], endRef: [{ type: i0.ViewChild, args: ['endRef', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiLineChart };
+//# sourceMappingURL=joanroucoux-cairn-ui-line-chart.mjs.map