ngwr 14.10.0 → 14.11.0

package/fesm2022/ngwr-line-chart.mjs

@@ -1,285 +1,360 @@
-import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i0 from '@angular/core';
-import { input, inject, LOCALE_ID, ElementRef, signal, computed, ViewEncapsulation, Component } from '@angular/core';
-import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
-
+import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, LOCALE_ID, ViewEncapsulation, computed, inject, input, signal } from "@angular/core";
+import { useI18nFormatter, useI18nText } from "ngwr/i18n";
 /**
- * @license
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
- */
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
 const FALLBACK_COLORS = [
-    'var(--wr-color-primary)',
-    'var(--wr-color-secondary)',
-    'var(--wr-color-success)',
-    'var(--wr-color-warning)',
-    'var(--wr-color-danger)',
+	"var(--wr-color-primary)",
+	"var(--wr-color-secondary)",
+	"var(--wr-color-success)",
+	"var(--wr-color-warning)",
+	"var(--wr-color-danger)"
 ];
-/**
- * Multi-series line chart with axes, gridlines, and a hover tooltip.
- * SVG-only — no external dependency.
- *
- * @example
- * ```html
- * <wr-line-chart
- *   [series]="[
- *     { label: 'Visits', data: [12, 18, 9, 22, 30, 27, 35] },
- *     { label: 'Signups', data: [3, 5, 4, 8, 11, 9, 14], color: 'var(--wr-color-success)' }
- *   ]"
- *   [xLabels]="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
- * />
- * ```
- *
- * @see https://ngwr.dev/reference/components/line-chart
- */
-class WrLineChart {
-    series = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
-    /**
-     * Accessible name of the chart. The legend carries the series NAMES only — the numbers
-     * are nowhere in text — so without this the plot is nothing at all to a screen reader.
-     * Falls back to `lineChart.label`.
-     */
-    ariaLabel = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    resolvedAriaLabel = useI18nText(this.ariaLabel, 'lineChart.label', 'Line chart');
-    locale = inject(LOCALE_ID);
-    thousandsText = useI18nFormatter('lineChart.thousands', '{{value}}k');
-    /** Labels for the X axis (one per data point). */
-    xLabels = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xLabels" }] : /* istanbul ignore next */ []));
-    /** Chart pixel height. @default 240 */
-    height = input(240, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(80, coerceNumberProperty(v, 240)) });
-    /** Show gridlines + axis ticks. @default true */
-    showGrid = input(true, { ...(ngDevMode ? { debugName: "showGrid" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Show the legend above the chart. @default true */
-    showLegend = input(true, { ...(ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** Show dots at each data point. @default true */
-    showDots = input(true, { ...(ngDevMode ? { debugName: "showDots" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /**
-     * Show the hover readout: the crosshair, the point markers and the tooltip. Off
-     * drops all three, since a crosshair with no values beside it points at nothing.
-     * @default true
-     */
-    tooltip = input(true, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    // Drawn in a 600×300 viewBox with reserved space for axis labels.
-    vbW = 600;
-    vbH = 300;
-    padding = { top: 16, right: 16, bottom: 28, left: 36 };
-    host = inject(ElementRef);
-    /** Hovered point index (across all series) — null when no hover. */
-    hoveredIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []));
-    /** The hovered index while the readout is on, so turning `tooltip` off mid-hover clears it. */
-    activeIndex = computed(() => (this.tooltip() ? this.hoveredIndex() : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    /**
-     * A dash pattern per series, so the lines are told apart by SHAPE and not
-     * only by hue.
-     *
-     * The default palette's colours sit within about 1.06:1 of each other in
-     * relative luminance — that is the whole nine-intent scale's constraint, and
-     * it means a reader with red-green colour blindness sees several of these
-     * strokes as one grey. A legend that pairs a coloured square with a name does
-     * not rescue it: matching the square to the line is exactly the step that
-     * needs hue. Distinguishing series by dash is the standard remedy and the
-     * only one that survives greyscale, printing and a monochrome display.
-     *
-     * The FIRST entry is solid on purpose. A single-series chart is the common
-     * case and there is nothing to tell apart in it, so it is left exactly as it
-     * was; the patterns only appear once a second series does.
-     */
-    static DASHES = ['', '7 4', '2 3', '10 4 2 4', '1 4', '6 3 2 3'];
-    resolvedSeries = computed(() => this.series().map((s, i) => ({
-        label: s.label,
-        dash: WrLineChart.DASHES[i % WrLineChart.DASHES.length],
-        // A non-finite point becomes a HOLE at its own index, not a missing element.
-        // It cannot stay a number: `Math.min`/`Math.max` over the pooled data are both
-        // NaN as soon as one datum is, so every coordinate in EVERY series came out
-        // `NaN` — invalid path geometry, and the whole chart vanished rather than the
-        // one bad point. But filtering it out closed the gap and slid every LATER point
-        // one x-slot to the left, so each of them was drawn under, and reported in the
-        // tooltip as, the wrong x label. A gap is kept as a gap and the line is broken
-        // across it: interpolating would invent a reading the data never took.
-        data: s.data.map(v => (Number.isFinite(v) ? v : null)),
-        color: s.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length],
-    })), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSeries" }] : /* istanbul ignore next */ []));
-    bounds = computed(() => {
-        const all = this.resolvedSeries().flatMap(s => s.data.filter(v => v !== null));
-        if (all.length === 0)
-            return { min: 0, max: 1 };
-        const min = Math.min(...all);
-        const max = Math.max(...all);
-        if (min === max)
-            return { min: min - 1, max: max + 1 };
-        // Pad upper bound by ~10% for breathing room.
-        return { min: Math.min(0, min), max: max + (max - min) * 0.1 };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
-    pointCount = computed(() => {
-        const maxLen = this.resolvedSeries().reduce((acc, s) => Math.max(acc, s.data.length), 0);
-        return Math.max(maxLen, this.xLabels().length);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pointCount" }] : /* istanbul ignore next */ []));
-    /** Y-axis tick marks (5 of them). */
-    yTicks = computed(() => {
-        const { min, max } = this.bounds();
-        const step = (max - min) / 4;
-        return [0, 1, 2, 3, 4].map(i => {
-            const value = max - i * step;
-            return { value, y: this.padding.top + ((max - value) / (max - min)) * this.plotHeight() };
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []));
-    plotWidth = () => this.vbW - this.padding.left - this.padding.right;
-    plotHeight = () => this.vbH - this.padding.top - this.padding.bottom;
-    /**
-     * The SVG path for a series — one subpath per unbroken run, so a hole in the data
-     * leaves a hole in the line rather than a straight segment across it.
-     */
-    pathFor(series) {
-        const { min, max } = this.bounds();
-        const count = this.pointCount();
-        if (count <= 1)
-            return '';
-        const pw = this.plotWidth();
-        const ph = this.plotHeight();
-        const commands = [];
-        let run = 0;
-        let last = '';
-        // A subpath of one `M` is not stroked at all, so a point with a gap on both sides
-        // would simply vanish when `showDots` is off. Repeating it gives the round linecap
-        // something to paint.
-        const closeRun = () => {
-            if (run === 1)
-                commands.push(`L ${last}`);
-            run = 0;
-        };
-        series.data.forEach((v, i) => {
-            if (v === null) {
-                closeRun();
-                return;
-            }
-            const x = this.padding.left + (i / (count - 1)) * pw;
-            const y = this.padding.top + ((max - v) / (max - min)) * ph;
-            last = `${x.toFixed(2)} ${y.toFixed(2)}`;
-            commands.push(`${run === 0 ? 'M' : 'L'} ${last}`);
-            run++;
-        });
-        closeRun();
-        return commands.join(' ');
-    }
-    pointX(index) {
-        const count = this.pointCount();
-        if (count <= 1)
-            return this.padding.left;
-        return this.padding.left + (index / (count - 1)) * this.plotWidth();
-    }
-    pointY(value) {
-        const { min, max } = this.bounds();
-        return this.padding.top + ((max - value) / (max - min)) * this.plotHeight();
-    }
-    /**
-     * A point's x as a percentage of the host's width. The x-label strip and the SVG share
-     * that width — the drawing stretches to it — so this is the same space the tooltip and
-     * the labels are placed in, at any size.
-     */
-    xPercent(index) {
-        return (this.pointX(index) / this.vbW) * 100;
-    }
-    /**
-     * How wide an x label may be, as a percentage of the host's width: its own slot — half
-     * the distance to a neighbour on each side — cut back to what is left between its point
-     * and the end of the strip. Centring a label on its point says nothing about its WIDTH,
-     * and with no bound at all twelve month names printed over each other and the last one
-     * hung outside the chart. Past this the stylesheet ellipsises.
-     */
-    xMaxPercent(index) {
-        const count = this.pointCount();
-        // A single label has no neighbour to collide with and the whole strip to sit in.
-        if (count <= 1)
-            return 100;
-        const slot = (this.plotWidth() / (count - 1) / this.vbW) * 100;
-        const x = this.xPercent(index);
-        return Math.min(slot, x + slot / 2, 100 - x + slot / 2);
-    }
-    hoverPoints = computed(() => {
-        const i = this.activeIndex();
-        if (i === null)
-            return [];
-        return this.resolvedSeries().flatMap(s => {
-            // Past the end of a short series, or on a hole in a longer one — either way there
-            // is no reading at this x, so the series contributes neither a marker nor a row.
-            const value = s.data[i];
-            if (value === undefined || value === null)
-                return [];
-            return [{ label: s.label, value, color: s.color, x: this.pointX(i), y: this.pointY(value) }];
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoverPoints" }] : /* istanbul ignore next */ []));
-    hoverLabel = computed(() => {
-        const i = this.activeIndex();
-        if (i === null)
-            return '';
-        return this.xLabels()[i] ?? String(i);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoverLabel" }] : /* istanbul ignore next */ []));
-    onPointerMove(event) {
-        if (!this.tooltip())
-            return;
-        const svg = event.currentTarget.getBoundingClientRect();
-        const ratio = (event.clientX - svg.left) / svg.width;
-        const vbX = ratio * this.vbW;
-        const count = this.pointCount();
-        if (count === 0)
-            return;
-        const i = Math.round(((vbX - this.padding.left) / this.plotWidth()) * (count - 1));
-        if (i >= 0 && i < count)
-            this.hoveredIndex.set(i);
-    }
-    onPointerLeave() {
-        this.hoveredIndex.set(null);
-    }
-    /**
-     * A Y-axis tick, in the reader's own language.
-     *
-     * Two halves and both were English. The `k` was a hardcoded Latin
-     * abbreviation — `тыс.` in Russian — so it goes through the catalog like every
-     * other word the library paints. The digits went through `toFixed`, which
-     * always writes a full stop, so a German axis read `1.5` where the rest of the
-     * page read `1,5`; they go through `Intl` now, the way `wrNumber`, `wrDate`
-     * and `wrPlural` already did.
-     *
-     * Grouping is OFF deliberately: a tick is a short axis label, and `5,000k`
-     * would be both wider and a change to what every existing chart draws.
-     */
-    formatTick(v) {
-        const digits = (n, fraction) => new Intl.NumberFormat(this.locale, {
-            useGrouping: false,
-            minimumFractionDigits: fraction,
-            maximumFractionDigits: fraction,
-        }).format(n);
-        if (Math.abs(v) >= 1000)
-            return this.thousandsText({ value: digits(v / 1000, v % 1000 === 0 ? 0 : 1) });
-        return digits(v, v % 1 === 0 ? 0 : 1);
-    }
-    viewBox = computed(() => `0 0 ${this.vbW} ${this.vbH}`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    // Convenience accessor so the host can be referenced from the template.
-    hostEl = this.host.nativeElement;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrLineChart, isStandalone: true, selector: "wr-line-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, xLabels: { classPropertyName: "xLabels", publicName: "xLabels", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-line-chart" }, ngImport: i0, template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" \u2014 and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n", encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrLineChart, decorators: [{
-            type: Component,
-            args: [{ selector: 'wr-line-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-line-chart' }, template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" \u2014 and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width \u2014 the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n" }]
-        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], xLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "xLabels", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var WrLineChart = class WrLineChart {
+	series = input([], ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	resolvedAriaLabel = useI18nText(this.ariaLabel, "lineChart.label", "Line chart");
+	locale = inject(LOCALE_ID);
+	thousandsText = useI18nFormatter("lineChart.thousands", "{{value}}k");
+	xLabels = input([], ...ngDevMode ? [{ debugName: "xLabels" }] : /* istanbul ignore next */ []);
+	height = input(240, {
+		...ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {},
+		transform: (v) => Math.max(80, coerceNumberProperty(v, 240))
+	});
+	showGrid = input(true, {
+		...ngDevMode ? { debugName: "showGrid" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	showLegend = input(true, {
+		...ngDevMode ? { debugName: "showLegend" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	showDots = input(true, {
+		...ngDevMode ? { debugName: "showDots" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	tooltip = input(true, {
+		...ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	vbW = 600;
+	vbH = 300;
+	padding = {
+		top: 16,
+		right: 16,
+		bottom: 28,
+		left: 36
+	};
+	host = inject(ElementRef);
+	hoveredIndex = signal(null, ...ngDevMode ? [{ debugName: "hoveredIndex" }] : /* istanbul ignore next */ []);
+	activeIndex = computed(() => this.tooltip() ? this.hoveredIndex() : null, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	static DASHES = [
+		"",
+		"7 4",
+		"2 3",
+		"10 4 2 4",
+		"1 4",
+		"6 3 2 3"
+	];
+	resolvedSeries = computed(() => this.series().map((s, i) => ({
+		label: s.label,
+		dash: WrLineChart.DASHES[i % WrLineChart.DASHES.length],
+		data: s.data.map((v) => Number.isFinite(v) ? v : null),
+		color: s.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length]
+	})), ...ngDevMode ? [{ debugName: "resolvedSeries" }] : /* istanbul ignore next */ []);
+	bounds = computed(() => {
+		const all = this.resolvedSeries().flatMap((s) => s.data.filter((v) => v !== null));
+		if (all.length === 0) return {
+			min: 0,
+			max: 1
+		};
+		const min = Math.min(...all);
+		const max = Math.max(...all);
+		if (min === max) return {
+			min: min - 1,
+			max: max + 1
+		};
+		return {
+			min: Math.min(0, min),
+			max: max + (max - min) * .1
+		};
+	}, ...ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []);
+	pointCount = computed(() => {
+		const maxLen = this.resolvedSeries().reduce((acc, s) => Math.max(acc, s.data.length), 0);
+		return Math.max(maxLen, this.xLabels().length);
+	}, ...ngDevMode ? [{ debugName: "pointCount" }] : /* istanbul ignore next */ []);
+	yTicks = computed(() => {
+		const { min, max } = this.bounds();
+		const step = (max - min) / 4;
+		return [
+			0,
+			1,
+			2,
+			3,
+			4
+		].map((i) => {
+			const value = max - i * step;
+			return {
+				value,
+				y: this.padding.top + (max - value) / (max - min) * this.plotHeight()
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []);
+	plotWidth = () => this.vbW - this.padding.left - this.padding.right;
+	plotHeight = () => this.vbH - this.padding.top - this.padding.bottom;
+	pathFor(series) {
+		const { min, max } = this.bounds();
+		const count = this.pointCount();
+		if (count <= 1) return "";
+		const pw = this.plotWidth();
+		const ph = this.plotHeight();
+		const commands = [];
+		let run = 0;
+		let last = "";
+		const closeRun = () => {
+			if (run === 1) commands.push(`L ${last}`);
+			run = 0;
+		};
+		series.data.forEach((v, i) => {
+			if (v === null) {
+				closeRun();
+				return;
+			}
+			const x = this.padding.left + i / (count - 1) * pw;
+			const y = this.padding.top + (max - v) / (max - min) * ph;
+			last = `${x.toFixed(2)} ${y.toFixed(2)}`;
+			commands.push(`${run === 0 ? "M" : "L"} ${last}`);
+			run++;
+		});
+		closeRun();
+		return commands.join(" ");
+	}
+	pointX(index) {
+		const count = this.pointCount();
+		if (count <= 1) return this.padding.left;
+		return this.padding.left + index / (count - 1) * this.plotWidth();
+	}
+	pointY(value) {
+		const { min, max } = this.bounds();
+		return this.padding.top + (max - value) / (max - min) * this.plotHeight();
+	}
+	xPercent(index) {
+		return this.pointX(index) / this.vbW * 100;
+	}
+	xMaxPercent(index) {
+		const count = this.pointCount();
+		if (count <= 1) return 100;
+		const slot = this.plotWidth() / (count - 1) / this.vbW * 100;
+		const x = this.xPercent(index);
+		return Math.min(slot, x + slot / 2, 100 - x + slot / 2);
+	}
+	hoverPoints = computed(() => {
+		const i = this.activeIndex();
+		if (i === null) return [];
+		return this.resolvedSeries().flatMap((s) => {
+			const value = s.data[i];
+			if (value === void 0 || value === null) return [];
+			return [{
+				label: s.label,
+				value,
+				color: s.color,
+				x: this.pointX(i),
+				y: this.pointY(value)
+			}];
+		});
+	}, ...ngDevMode ? [{ debugName: "hoverPoints" }] : /* istanbul ignore next */ []);
+	hoverLabel = computed(() => {
+		const i = this.activeIndex();
+		if (i === null) return "";
+		return this.xLabels()[i] ?? String(i);
+	}, ...ngDevMode ? [{ debugName: "hoverLabel" }] : /* istanbul ignore next */ []);
+	onPointerMove(event) {
+		if (!this.tooltip()) return;
+		const svg = event.currentTarget.getBoundingClientRect();
+		const vbX = (event.clientX - svg.left) / svg.width * this.vbW;
+		const count = this.pointCount();
+		if (count === 0) return;
+		const i = Math.round((vbX - this.padding.left) / this.plotWidth() * (count - 1));
+		if (i >= 0 && i < count) this.hoveredIndex.set(i);
+	}
+	onPointerLeave() {
+		this.hoveredIndex.set(null);
+	}
+	formatTick(v) {
+		const digits = (n, fraction) => new Intl.NumberFormat(this.locale, {
+			useGrouping: false,
+			minimumFractionDigits: fraction,
+			maximumFractionDigits: fraction
+		}).format(n);
+		if (Math.abs(v) >= 1e3) return this.thousandsText({ value: digits(v / 1e3, v % 1e3 === 0 ? 0 : 1) });
+		return digits(v, v % 1 === 0 ? 0 : 1);
+	}
+	viewBox = computed(() => `0 0 ${this.vbW} ${this.vbH}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	hostEl = this.host.nativeElement;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: WrLineChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: WrLineChart,
+		isStandalone: true,
+		selector: "wr-line-chart",
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			xLabels: {
+				classPropertyName: "xLabels",
+				publicName: "xLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showGrid: {
+				classPropertyName: "showGrid",
+				publicName: "showGrid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDots: {
+				classPropertyName: "showDots",
+				publicName: "showDots",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "wr-line-chart" },
+		ngImport: i0,
+		template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" — and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width — the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n",
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: WrLineChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "wr-line-chart",
+			encapsulation: ViewEncapsulation.None,
+			host: { class: "wr-line-chart" },
+			template: "@let hovered = activeIndex();\n@if (showLegend() && resolvedSeries().length > 0) {\n  <ul class=\"wr-line-chart__legend\">\n    @for (s of resolvedSeries(); track s.label) {\n      <li class=\"wr-line-chart__legend-item\">\n        <!-- The swatch draws the series' own dash, not a solid block. A legend\n             that pairs a coloured square with a name leaves the reader to match\n             the square to the LINE, and matching by colour is the step the\n             patterns exist to remove. -->\n        <svg class=\"wr-line-chart__swatch\" viewBox=\"0 0 16 2\" aria-hidden=\"true\">\n          <line\n            x1=\"0\"\n            y1=\"1\"\n            x2=\"16\"\n            y2=\"1\"\n            [attr.stroke]=\"s.color\"\n            [attr.stroke-dasharray]=\"s.dash || null\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n          />\n        </svg>\n        <span>{{ s.label }}</span>\n      </li>\n    }\n  </ul>\n}\n\n<div class=\"wr-line-chart__plot\" role=\"img\" [attr.aria-label]=\"resolvedAriaLabel()\" [style.height.px]=\"height()\">\n  <!-- Named, where it was the only unnamed element in the component. The legend\n       swatch is an `<svg>` too now, so `querySelector('svg')` no longer means\n       \"the chart\" — and a plot that nothing can address by name is one a\n       consumer's stylesheet and a spec both have to reach by position. -->\n  <svg\n    class=\"wr-line-chart__svg\"\n    [attr.viewBox]=\"viewBox()\"\n    preserveAspectRatio=\"none\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerleave)=\"onPointerLeave()\"\n  >\n    @if (showGrid()) {\n      @for (tick of yTicks(); track tick.value) {\n        <line\n          class=\"wr-line-chart__grid-line\"\n          [attr.x1]=\"padding.left\"\n          [attr.x2]=\"vbW - padding.right\"\n          [attr.y1]=\"tick.y\"\n          [attr.y2]=\"tick.y\"\n          stroke=\"rgba(var(--wr-color-light-rgb), 0.7)\"\n          stroke-width=\"1\"\n          vector-effect=\"non-scaling-stroke\"\n        />\n        <text\n          class=\"wr-line-chart__tick\"\n          [attr.x]=\"padding.left - 6\"\n          [attr.y]=\"tick.y + 4\"\n          text-anchor=\"end\"\n          fill=\"var(--wr-color-on-surface-muted)\"\n          font-size=\"10\"\n          font-family=\"var(--wr-font-family-base)\"\n        >\n          {{ formatTick(tick.value) }}\n        </text>\n      }\n    }\n\n    @for (s of resolvedSeries(); track s.label) {\n      <path\n        class=\"wr-line-chart__line\"\n        [attr.d]=\"pathFor(s)\"\n        fill=\"none\"\n        [attr.stroke]=\"s.color\"\n        [attr.stroke-dasharray]=\"s.dash || null\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @if (showDots()) {\n        @for (v of s.data; track $index; let i = $index) {\n          <!-- A hole in the data gets no dot: the index still belongs to it, so the\n               points after it stay on their own x. -->\n          @if (v !== null) {\n            <circle\n              class=\"wr-line-chart__dot\"\n              [attr.cx]=\"pointX(i)\"\n              [attr.cy]=\"pointY(v)\"\n              r=\"3\"\n              [attr.fill]=\"s.color\"\n            />\n          }\n        }\n      }\n    }\n\n    @if (hovered !== null && hoverPoints().length > 0) {\n      <line\n        class=\"wr-line-chart__crosshair\"\n        [attr.x1]=\"pointX(hovered)\"\n        [attr.x2]=\"pointX(hovered)\"\n        [attr.y1]=\"padding.top\"\n        [attr.y2]=\"vbH - padding.bottom\"\n        stroke=\"var(--wr-color-medium)\"\n        stroke-width=\"1\"\n        stroke-dasharray=\"3 3\"\n        vector-effect=\"non-scaling-stroke\"\n      />\n      @for (p of hoverPoints(); track p.label) {\n        <circle\n          [attr.cx]=\"p.x\"\n          [attr.cy]=\"p.y\"\n          r=\"5\"\n          fill=\"var(--wr-color-white)\"\n          [attr.stroke]=\"p.color\"\n          stroke-width=\"2\"\n        />\n      }\n    }\n  </svg>\n\n  @if (hovered !== null && hoverPoints().length > 0) {\n    <!-- The layer spans the plot and is what the tooltip's `cqw` measures. It is out of\n         flow, so the containment it turns on costs the plot's own sizing nothing. The\n         tooltip takes the same `--wr-line-chart-x` the x labels take, and the same clamp:\n         centred on its point, never past either end. -->\n    <div class=\"wr-line-chart__tooltip-layer\">\n      <div\n        class=\"wr-line-chart__tooltip\"\n        [style.left.%]=\"xPercent(hovered)\"\n        [style.--wr-line-chart-x]=\"xPercent(hovered)\"\n        [style.top.px]=\"padding.top\"\n      >\n        <div class=\"wr-line-chart__tooltip-label\">{{ hoverLabel() }}</div>\n        @for (p of hoverPoints(); track p.label) {\n          <div class=\"wr-line-chart__tooltip-row\">\n            <span class=\"wr-line-chart__swatch\" [style.background]=\"p.color\"></span>\n            <span class=\"wr-line-chart__tooltip-name\">{{ p.label }}</span>\n            <span class=\"wr-line-chart__tooltip-value\">{{ p.value }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n@if (xLabels().length > 0) {\n  <div class=\"wr-line-chart__x-labels\">\n    @for (label of xLabels(); track $index) {\n      <!-- Each label hands the stylesheet two numbers, both percentages of the host's\n           width — the space the stretching SVG is in, so they track the drawing at any\n           size. The x of the point it names, which the stylesheet centres it on; and the\n           widest it may be before it reaches a neighbour or the end of the strip, past\n           which the stylesheet ellipsises it. Laying the labels out as equal centred flex\n           slots instead is bar-chart geometry: only the middle label landed on its dot,\n           and the outer ones sat up to half a column away. -->\n      <span\n        class=\"wr-line-chart__x-label\"\n        [style.--wr-line-chart-x]=\"xPercent($index)\"\n        [style.--wr-line-chart-x-max]=\"xMaxPercent($index)\"\n        >{{ label }}</span\n      >\n    }\n  </div>\n}\n"
+		}]
+	}],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		xLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xLabels",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		showGrid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showGrid",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		showDots: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDots",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}]
+	}
+});
 export { WrLineChart };
-//# sourceMappingURL=ngwr-line-chart.mjs.map
+
+//# sourceMappingURL=ngwr-line-chart.mjs.map