@joanroucoux/cairn-ui 0.3.0 → 0.4.0

package/fesm2022/joanroucoux-cairn-ui.mjs

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, input, inject, LOCALE_ID, booleanAttribute, computed, Component, output, ElementRef, DestroyRef, effect, contentChild, afterRenderEffect, forwardRef, Directive, contentChildren, model, viewChildren } from '@angular/core';
+import { InjectionToken, signal, input, inject, LOCALE_ID, booleanAttribute, computed, Component, output, ElementRef, DestroyRef, effect, contentChild, afterRenderEffect, forwardRef, Directive, viewChild, afterNextRender, contentChildren, model, viewChildren } from '@angular/core';
+import { scaleLinear } from 'd3-scale';
+import { curveMonotoneX, line } from 'd3-shape';
 
 const MINUS = '−';
 const EM_DASH = '—';
@@ -801,6 +803,665 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 }]
         }], propDecorators: { errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }] } });
 
+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 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 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 LINE_GAP = 3;
+const COLLISION_MARGIN = 3;
+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;
+        }
+    }
+    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 prefersReducedMotion = () => typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+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 buildPolyline = (xs, ys) => xs.map((x, index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${ys[index].toFixed(2)}`).join(' ');
+const interpolateLine = (from, to, progress) => {
+    const left = to.points[0].x;
+    const right = to.points.at(-1).x;
+    const samples = Array.from({ length: TRANSITION_SAMPLES }, (_, index) => left + ((right - left) * index) / (TRANSITION_SAMPLES - 1));
+    const fromYs = sampleMonotone(from.points, samples);
+    const toYs = sampleMonotone(to.points, samples);
+    return buildPolyline(samples, fromYs.map((fromY, index) => fromY + (toYs[index] - fromY) * progress));
+};
+
+const DEFAULT_WIDTH = 640;
+const DEFAULT_HEIGHT = 240;
+const PLOT_PADDING = { x: 4, top: 10, bottom: 18 };
+const START_LABEL_HEIGHT = 17;
+const identityValue = (value) => `${value}`;
+const identityDelta = (delta) => `${delta > 0 ? '+' : ''}${delta}`;
+const identityTime = (time) => new Date(time).toISOString();
+/**
+ * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
+ *
+ * @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 */ []));
+    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 */ []));
+    #destroyRef = inject(DestroyRef);
+    #frame = null;
+    #hasRenderedOnce = false;
+    #previousGeometry = null;
+    svgRef = viewChild.required('svgRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    animatedLine = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animatedLine" }] : /* 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 */ []));
+    geometry = computed(() => buildGeometry(this.points(), this.effectiveWidth(), this.effectiveHeight(), PLOT_PADDING), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
+    displayLine = computed(() => this.animatedLine() ?? this.geometry().line, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayLine" }] : /* istanbul ignore next */ []));
+    ticks = computed(() => axisTicks(this.geometry().points), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    active = computed(() => {
+        const geometry = this.geometry();
+        const index = this.activeIndex();
+        return geometry && index !== null ? geometry.points[index] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    startLabelInfo = computed(() => {
+        const text = this.startLabel();
+        const geometry = this.geometry();
+        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.effectiveHeight() }, size);
+        return { label, placement };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startLabelInfo" }] : /* istanbul ignore next */ []));
+    #renderRef = afterNextRender(() => this.#observeSize());
+    constructor() {
+        effect(() => {
+            const geometry = this.geometry();
+            const previous = this.#previousGeometry;
+            if (previous === geometry) {
+                return;
+            }
+            this.#previousGeometry = geometry;
+            this.#cancelAnimation();
+            if (!this.#hasRenderedOnce) {
+                this.#hasRenderedOnce = true;
+                return;
+            }
+            if (!previous || !geometry) {
+                this.animatedLine.set(null);
+                return;
+            }
+            if (prefersReducedMotion()) {
+                this.animatedLine.set(null);
+                return;
+            }
+            this.#animate(previous, geometry);
+        });
+        this.#destroyRef.onDestroy(() => this.#cancelAnimation());
+    }
+    #observeSize() {
+        this.#destroyRef.onDestroy(() => this.#renderRef.destroy());
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const element = this.svgRef().nativeElement;
+        const observer = new ResizeObserver(([entry]) => {
+            if (entry) {
+                const { width, height } = entry.contentRect;
+                this.measuredSize.set({ width, height });
+            }
+        });
+        observer.observe(element);
+        this.#destroyRef.onDestroy(() => observer.disconnect());
+    }
+    #cancelAnimation() {
+        if (this.#frame !== null) {
+            cancelAnimationFrame(this.#frame);
+            this.#frame = null;
+        }
+    }
+    #animate(from, to) {
+        if (from.points.length < 2 || to.points.length < 2) {
+            this.animatedLine.set(null);
+            return;
+        }
+        const startTime = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - startTime) / TRANSITION_DURATION);
+            this.animatedLine.set(interpolateLine(from, to, easeOutQuint(t)));
+            if (t < 1) {
+                this.#frame = requestAnimationFrame(step);
+            }
+            else {
+                this.#frame = null;
+                this.animatedLine.set(null);
+            }
+        };
+        this.#frame = requestAnimationFrame(step);
+    }
+    coreTick(index, count) {
+        if (count <= 3) {
+            return true;
+        }
+        const middle = Math.floor((count - 1) / 2);
+        return index === 0 || index === count - 1 || index === middle;
+    }
+    deltaFor(point) {
+        return point.v - this.points()[0].v;
+    }
+    deltaClasses(point) {
+        const delta = this.deltaFor(point);
+        return delta > 0 ? 'text-(--positive)' : delta < 0 ? 'text-(--negative)' : 'text-(--muted-foreground)';
+    }
+    tooltipStyle(point) {
+        return `left: ${(point.x / this.effectiveWidth()) * 100}%; top: ${(point.y / this.effectiveHeight()) * 100}%`;
+    }
+    onPointerMove(event) {
+        const geometry = this.geometry();
+        if (!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 (!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 }, 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 } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="relative h-full">
+      <svg
+        #svgRef
+        class="block h-full w-full touch-pan-y"
+        role="img"
+        tabindex="0"
+        [attr.aria-label]="label()"
+        [attr.height]="effectiveHeight()"
+        [attr.viewBox]="'0 0 ' + effectiveWidth() + ' ' + effectiveHeight()"
+        [attr.width]="effectiveWidth()"
+        (keydown)="onKeydown($event)"
+        (pointerleave)="onPointerLeave()"
+        (pointermove)="onPointerMove($event)"
+      >
+        @if (geometry(); as geometry) {
+          <path
+            class="stroke-(--foreground)"
+            data-chart-line
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            [attr.d]="displayLine()"
+          />
+
+          <line
+            class="stroke-(--border)"
+            data-chart-start-line
+            stroke-dasharray="4 4"
+            stroke-width="1"
+            x1="0"
+            [attr.x2]="effectiveWidth()"
+            [attr.y1]="geometry.start.y"
+            [attr.y2]="geometry.start.y"
+          />
+
+          @if (startLabelInfo(); as info) {
+            <text
+              class="text-caption fill-(--subtle-foreground)"
+              data-chart-start-label
+              [attr.text-anchor]="info.placement.anchor"
+              [attr.x]="info.placement.x"
+              [attr.y]="info.placement.y"
+            >
+              {{ info.label }}
+            </text>
+          }
+
+          <circle
+            class="fill-(--foreground) stroke-(--card)"
+            data-chart-end
+            r="4"
+            stroke-width="2"
+            [attr.cx]="geometry.end.x"
+            [attr.cy]="geometry.end.y"
+          />
+
+          @for (
+            tick of ticks();
+            track tick.t;
+            let index = $index;
+            let count = $count;
+            let first = $first;
+            let last = $last
+          ) {
+            <text
+              class="text-caption fill-(--subtle-foreground)"
+              data-chart-axis-tick
+              [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+              [attr.x]="tick.x"
+              [attr.y]="effectiveHeight() - 4"
+              [class.max-sm:hidden]="!coreTick(index, count)"
+            >
+              {{ axisFormat()(tick.t) }}
+            </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]="effectiveHeight()"
+            />
+            <circle
+              class="fill-(--foreground) stroke-(--card)"
+              data-chart-active
+              r="4"
+              stroke-width="2"
+              [attr.cx]="point.x"
+              [attr.cy]="point.y"
+            />
+          }
+        }
+      </svg>
+
+      @if (active(); as point) {
+        <div
+          class="rounded-container text-caption pointer-events-none absolute -translate-x-1/2 -translate-y-full bg-(--card) px-2.5 py-1.5 whitespace-nowrap shadow-[0_4px_16px_rgb(0_0_0/0.12)]"
+          data-testid="chart-tooltip"
+          role="status"
+          [style]="tooltipStyle(point)"
+        >
+          <p class="font-medium text-(--foreground)">{{ valueFormat()(point.v) }}</p>
+          <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
+          <p class="text-(--subtle-foreground)">{{ timeFormat()(point.t) }}</p>
+        </div>
+      }
+
+      @if (points().length > 0) {
+        <table class="sr-only">
+          <caption>
+            {{
+              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>
+  `, 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"
+        role="img"
+        tabindex="0"
+        [attr.aria-label]="label()"
+        [attr.height]="effectiveHeight()"
+        [attr.viewBox]="'0 0 ' + effectiveWidth() + ' ' + effectiveHeight()"
+        [attr.width]="effectiveWidth()"
+        (keydown)="onKeydown($event)"
+        (pointerleave)="onPointerLeave()"
+        (pointermove)="onPointerMove($event)"
+      >
+        @if (geometry(); as geometry) {
+          <path
+            class="stroke-(--foreground)"
+            data-chart-line
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            [attr.d]="displayLine()"
+          />
+
+          <line
+            class="stroke-(--border)"
+            data-chart-start-line
+            stroke-dasharray="4 4"
+            stroke-width="1"
+            x1="0"
+            [attr.x2]="effectiveWidth()"
+            [attr.y1]="geometry.start.y"
+            [attr.y2]="geometry.start.y"
+          />
+
+          @if (startLabelInfo(); as info) {
+            <text
+              class="text-caption fill-(--subtle-foreground)"
+              data-chart-start-label
+              [attr.text-anchor]="info.placement.anchor"
+              [attr.x]="info.placement.x"
+              [attr.y]="info.placement.y"
+            >
+              {{ info.label }}
+            </text>
+          }
+
+          <circle
+            class="fill-(--foreground) stroke-(--card)"
+            data-chart-end
+            r="4"
+            stroke-width="2"
+            [attr.cx]="geometry.end.x"
+            [attr.cy]="geometry.end.y"
+          />
+
+          @for (
+            tick of ticks();
+            track tick.t;
+            let index = $index;
+            let count = $count;
+            let first = $first;
+            let last = $last
+          ) {
+            <text
+              class="text-caption fill-(--subtle-foreground)"
+              data-chart-axis-tick
+              [attr.text-anchor]="first ? 'start' : last ? 'end' : 'middle'"
+              [attr.x]="tick.x"
+              [attr.y]="effectiveHeight() - 4"
+              [class.max-sm:hidden]="!coreTick(index, count)"
+            >
+              {{ axisFormat()(tick.t) }}
+            </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]="effectiveHeight()"
+            />
+            <circle
+              class="fill-(--foreground) stroke-(--card)"
+              data-chart-active
+              r="4"
+              stroke-width="2"
+              [attr.cx]="point.x"
+              [attr.cy]="point.y"
+            />
+          }
+        }
+      </svg>
+
+      @if (active(); as point) {
+        <div
+          class="rounded-container text-caption pointer-events-none absolute -translate-x-1/2 -translate-y-full bg-(--card) px-2.5 py-1.5 whitespace-nowrap shadow-[0_4px_16px_rgb(0_0_0/0.12)]"
+          data-testid="chart-tooltip"
+          role="status"
+          [style]="tooltipStyle(point)"
+        >
+          <p class="font-medium text-(--foreground)">{{ valueFormat()(point.v) }}</p>
+          <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
+          <p class="text-(--subtle-foreground)">{{ timeFormat()(point.t) }}</p>
+        </div>
+      }
+
+      @if (points().length > 0) {
+        <table class="sr-only">
+          <caption>
+            {{
+              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>
+  `,
+                    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 }] }], 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 }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }] } });
+
 const MENU_CLASSES = 'm-0 min-w-44 p-1 rounded-container bg-(--elevated) shadow-[0_8px_24px_rgb(0_0_0/0.16)] text-(--foreground) transition-[opacity,transform,overlay,display] transition-discrete duration-(--duration-fast) ease-out starting:open:opacity-0 starting:open:scale-(--enter-scale) opacity-0 scale-(--enter-scale) open:opacity-100 open:scale-100';
 const ITEM_CLASSES = 'flex w-full items-center gap-2 min-h-(--row-min) px-3 rounded-control text-label hover:bg-(--soft) focus-visible:bg-(--soft) outline-none';
 const nextId = (() => {
@@ -1619,5 +2280,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UI_AMOUNT_MASKED, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
+export { AMOUNT_MASKINGS, AMOUNT_NUMERICS, ASYNC_STATES, AVATAR_SIZES, BADGE_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, CARD_PADDINGS, CARD_VARIANTS, CELL_BREAKPOINTS, CONTROL_SIZES, DELTA_EMPHASES, DIALOG_WIDTHS, METER_TONES, STAT_SIZES, UI_AMOUNT_MASKED, UiAmount, UiAsync, UiAvatar, UiBadge, UiButton, UiCard, UiDelta, UiDialog, UiField, UiInput, UiLineChart, UiMenu, UiMenuItem, UiMenuTrigger, UiMeter, UiNavItem, UiRow, UiSegmented, UiSelect, UiSkeleton, UiStat, UiSwitch, UiTab, UiTabBar, UiTable, UiTd, UiTextarea, UiTh, UiTr, formatAmount };
 //# sourceMappingURL=joanroucoux-cairn-ui.mjs.map