@mesgflow/ui-kit 0.6.0

package/fesm2022/mesgflow-ui-kit-chart.mjs

@@ -0,0 +1,538 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, booleanAttribute, inject, ElementRef, signal, DestroyRef, afterNextRender } from '@angular/core';
+import { MF_CHART_LABELS, focusRecipe, overlaySurface } from '@mesgflow/ui-kit/core';
+
+/**
+ * Kategorik grafik renkleri — `color.css`'in `--mf-chart-1..8` rol token'larına SABİT sıralı
+ * referans (dataviz doktrini: "Assign categorical hues in fixed order, never cycled"). Sekiz
+ * slotun sırası CVD güvenlik mekanizmasıdır (bkz. color.css yorumu — `validate_palette.js` ile
+ * iki modda doğrulandı); 9. ve sonraki seriler ASLA döngüye girip 1. seriyle aynı rengi almaz,
+ * nötr "Diğer" (`chart-other`) rengine düşer — tüketici o serileri tek bir "Diğer"de toplamalı
+ * veya küçük çoklulara bölmeli.
+ *
+ * Renk VARLIĞI izler, sırasını DEĞİL: bir filtre seri sayısını değiştirdiğinde kalan seriler
+ * yeniden boyanmasın diye tüketici `slot`'u varlığa bağlı SABİT bir değerden türetmeli (ör. seri
+ * tanımındaki `colorIndex`), o anki dizideki pozisyondan değil.
+ *
+ * Class isimleri TAM/LİTERAL string — Tailwind'in JIT tarayıcısı çalışma zamanında birleştirilen
+ * (`` `fill-chart-${n}` ``) isimleri göremez. Tema utility'leri (`fill-chart-1`) değeri
+ * `var(--mf-chart-1)` olarak GÖMER — `--color-chart-*` takma adının `:root`'tan budanmasından
+ * etkilenmez (bkz. color.css / `docs/tr/mimari.md` "@theme inline" notu).
+ */
+const MF_CHART_SLOT_COUNT = 8;
+const FILL = [
+    'fill-chart-1',
+    'fill-chart-2',
+    'fill-chart-3',
+    'fill-chart-4',
+    'fill-chart-5',
+    'fill-chart-6',
+    'fill-chart-7',
+    'fill-chart-8',
+];
+const STROKE = [
+    'stroke-chart-1',
+    'stroke-chart-2',
+    'stroke-chart-3',
+    'stroke-chart-4',
+    'stroke-chart-5',
+    'stroke-chart-6',
+    'stroke-chart-7',
+    'stroke-chart-8',
+];
+const BG = [
+    'bg-chart-1',
+    'bg-chart-2',
+    'bg-chart-3',
+    'bg-chart-4',
+    'bg-chart-5',
+    'bg-chart-6',
+    'bg-chart-7',
+    'bg-chart-8',
+];
+function slotClass(classes, other, slot) {
+    return Number.isInteger(slot) && slot >= 0 && slot < classes.length ? classes[slot] : other;
+}
+/** SVG dolgu (bar/alan/nokta). `slot` 0 tabanlı; 0-7 dışı → "Diğer". */
+function chartFillClass(slot) {
+    return slotClass(FILL, 'fill-chart-other', slot);
+}
+/** SVG çizgi (line/sparkline). `slot` 0 tabanlı; 0-7 dışı → "Diğer". */
+function chartStrokeClass(slot) {
+    return slotClass(STROKE, 'stroke-chart-other', slot);
+}
+/** HTML zemin (lejant/tooltip anahtarı, BarList çubuğu). `slot` 0 tabanlı; 0-7 dışı → "Diğer". */
+function chartBgClass(slot) {
+    return slotClass(BG, 'bg-chart-other', slot);
+}
+
+/**
+ * "Temiz" eksen işaretleri — dataviz: y ekseni işaretleri yuvarlak sayılara oturur (0 / 250 /
+ * 500, asla 0 / 237 / 474). Heckbert'in "nice numbers" algoritması: aralığı 1/2/5 × 10^n
+ * adımlarına yuvarlar, dönen ilk/son işaret ölçeğin alt/üst sınırı olur (veri onların İÇİNDE).
+ * Tüm değerler aynıysa (ör. hepsi 0) ölçek çökmesin diye aralık 1 birim açılır.
+ */
+function niceTicks(min, max, count = 4) {
+    if (!Number.isFinite(min) || !Number.isFinite(max))
+        return [0, 1];
+    if (min === max) {
+        if (min === 0)
+            return [0, 1];
+        min = Math.min(0, min);
+        max = Math.max(0, max);
+    }
+    const span = niceNumber(max - min, false);
+    const step = niceNumber(span / Math.max(1, count), true);
+    const start = Math.floor(min / step) * step;
+    const end = Math.ceil(max / step) * step;
+    const ticks = [];
+    for (let value = start; value <= end + step / 2; value += step) {
+        // Kayan nokta birikimini temizle (0.30000000000000004 → 0.3).
+        ticks.push(Number(value.toPrecision(12)));
+    }
+    return ticks;
+}
+function niceNumber(range, round) {
+    const exponent = Math.floor(Math.log10(range));
+    const fraction = range / 10 ** exponent;
+    let nice;
+    if (round) {
+        nice = fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10;
+    }
+    else {
+        nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+    }
+    return nice * 10 ** exponent;
+}
+
+const PLOT_WIDTH = 300;
+const PLOT_HEIGHT = 80;
+const BASELINE_Y = 96;
+const VIEW_HEIGHT = 132;
+const MAX_BAR_WIDTH = 24;
+/** dataviz "4px rounded data-end, square at the baseline" — üstü yuvarlak tam boy dikdörtgen + tabana yapışık düz bir dikdörtgen üst üste, alt köşeleri KARELER. */
+const SQUARE_FOOT = 4;
+/**
+ * `<mf-bar-chart [points]="monthly" [ariaLabel]="'Son 6 ayda katılan üyeler'" />`
+ *
+ * Tek seri, elle yazılmış inline SVG — grafik kütüphanesi eklenmedi (bu kitin
+ * "npm paketi olmayan, kaynağı elinde" doktrini). Tek seri olduğu için LEJANT yok (dataviz doktrini: "a single
+ * series needs no legend box"), değerler her çubuğun tepesinde DOĞRUDAN etiketlenir (6 nokta —
+ * "her noktayı etiketleme" uyarısının kapsamı yoğun serilere yönelik, 6 noktada tamamı okunabilir).
+ */
+class BarChart {
+    points = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    valueFormatter = input((value) => `${value}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    viewBox = `0 0 ${PLOT_WIDTH} ${VIEW_HEIGHT}`;
+    baselineY = BASELINE_Y;
+    fillClass = chartFillClass(0);
+    bars = computed(() => {
+        const points = this.points();
+        if (points.length === 0)
+            return [];
+        const max = Math.max(1, ...points.map((point) => point.value));
+        const slotWidth = PLOT_WIDTH / points.length;
+        const width = Math.min(MAX_BAR_WIDTH, slotWidth * 0.5);
+        return points.map((point, index) => {
+            const height = (point.value / max) * PLOT_HEIGHT;
+            const squareFootHeight = Math.min(height, SQUARE_FOOT);
+            return {
+                ...point,
+                width,
+                x: index * slotWidth + (slotWidth - width) / 2,
+                y: BASELINE_Y - height,
+                height,
+                squareFootY: BASELINE_Y - squareFootHeight,
+                squareFootHeight,
+                labelY: BASELINE_Y - height - 6,
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: BarChart, isStandalone: true, selector: "mf-bar-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: "@if (bars().length > 0) {\r\n  <svg\r\n    [attr.viewBox]=\"viewBox\"\r\n    class=\"h-auto w-full\"\r\n    role=\"img\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    preserveAspectRatio=\"xMidYMid meet\"\r\n  >\r\n    <title>{{ ariaLabel() }}</title>\r\n\r\n    <line\r\n      x1=\"0\"\r\n      [attr.y1]=\"baselineY\"\r\n      [attr.x2]=\"300\"\r\n      [attr.y2]=\"baselineY\"\r\n      class=\"stroke-border\"\r\n      stroke-width=\"1\"\r\n    />\r\n\r\n    @for (bar of bars(); track bar.label) {\r\n      <g>\r\n        <title>{{ bar.label }}: {{ valueFormatter()(bar.value) }}</title>\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.y\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.height\"\r\n          rx=\"4\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.squareFootY\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.squareFootHeight\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          [attr.y]=\"bar.labelY\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px] font-mono tabular-nums\"\r\n        >\r\n          {{ valueFormatter()(bar.value) }}\r\n        </text>\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          y=\"118\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px]\"\r\n        >\r\n          {{ bar.label }}\r\n        </text>\r\n      </g>\r\n    }\r\n  </svg>\r\n} @else {\r\n  <p class=\"text-sm text-fg-subtle\">\u2014</p>\r\n}\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-bar-chart', host: { class: 'block' }, template: "@if (bars().length > 0) {\r\n  <svg\r\n    [attr.viewBox]=\"viewBox\"\r\n    class=\"h-auto w-full\"\r\n    role=\"img\"\r\n    [attr.aria-label]=\"ariaLabel()\"\r\n    preserveAspectRatio=\"xMidYMid meet\"\r\n  >\r\n    <title>{{ ariaLabel() }}</title>\r\n\r\n    <line\r\n      x1=\"0\"\r\n      [attr.y1]=\"baselineY\"\r\n      [attr.x2]=\"300\"\r\n      [attr.y2]=\"baselineY\"\r\n      class=\"stroke-border\"\r\n      stroke-width=\"1\"\r\n    />\r\n\r\n    @for (bar of bars(); track bar.label) {\r\n      <g>\r\n        <title>{{ bar.label }}: {{ valueFormatter()(bar.value) }}</title>\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.y\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.height\"\r\n          rx=\"4\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <rect\r\n          [attr.x]=\"bar.x\"\r\n          [attr.y]=\"bar.squareFootY\"\r\n          [attr.width]=\"bar.width\"\r\n          [attr.height]=\"bar.squareFootHeight\"\r\n          [class]=\"fillClass\"\r\n        />\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          [attr.y]=\"bar.labelY\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px] font-mono tabular-nums\"\r\n        >\r\n          {{ valueFormatter()(bar.value) }}\r\n        </text>\r\n        <text\r\n          [attr.x]=\"bar.x + bar.width / 2\"\r\n          y=\"118\"\r\n          text-anchor=\"middle\"\r\n          class=\"fill-fg-subtle text-[9px]\"\r\n        >\r\n          {{ bar.label }}\r\n        </text>\r\n      </g>\r\n    }\r\n  </svg>\r\n} @else {\r\n  <p class=\"text-sm text-fg-subtle\">\u2014</p>\r\n}\r\n" }]
+        }], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }] } });
+
+/**
+ * `<mf-bar-list [items]="roleDistribution" />`
+ *
+ * Yatay oranlı liste — TEK bir ölçünün nominal kategorileri: kimliği METİN etiketi, büyüklüğü bar
+ * uzunluğu + sayı taşır. Bu yüzden bütün çubuklar TEK serinin rengini (slot 0) alır — dataviz
+ * doktrini: nominal çubukları sıraya/değere göre renklendirmek, uzunluğun zaten gösterdiğini
+ * renkle tekrar kodlar ve "renk varlığı izler, sırasını değil" kuralını çiğner (eskiden
+ * pozisyona göre boyanıyordu — veri sırası değişince aynı rol başka renge bürünüyordu).
+ * Varlığa kalıcı bir renk bağlamak için öğe başına `colorIndex`.
+ */
+class BarList {
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    valueFormatter = input((value) => `${value}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const items = this.items();
+        const max = Math.max(1, ...items.map((item) => item.value));
+        return items.map((item) => ({
+            ...item,
+            percent: Math.round((item.value / max) * 100),
+            colorClass: chartBgClass(item.colorIndex ?? 0),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: BarList, isStandalone: true, selector: "mf-bar-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <ul class="m-0 flex list-none flex-col gap-3 p-0">
+      @for (row of rows(); track row.label) {
+        <li class="flex items-center gap-3">
+          <span class="min-w-0 flex-1 truncate text-sm text-fg-muted">{{ row.label }}</span>
+          <div class="h-1.5 w-20 shrink-0 overflow-hidden rounded-full bg-surface-alt">
+            <div
+              class="h-full rounded-full"
+              [class]="row.colorClass"
+              [style.width.%]="row.percent"
+            ></div>
+          </div>
+          <span class="w-8 shrink-0 text-end font-mono text-xs tabular-nums text-fg-subtle">{{
+            valueFormatter()(row.value)
+          }}</span>
+        </li>
+      } @empty {
+        <li class="text-sm text-fg-subtle">—</li>
+      }
+    </ul>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BarList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mf-bar-list',
+                    host: { class: 'block' },
+                    template: `
+    <ul class="m-0 flex list-none flex-col gap-3 p-0">
+      @for (row of rows(); track row.label) {
+        <li class="flex items-center gap-3">
+          <span class="min-w-0 flex-1 truncate text-sm text-fg-muted">{{ row.label }}</span>
+          <div class="h-1.5 w-20 shrink-0 overflow-hidden rounded-full bg-surface-alt">
+            <div
+              class="h-full rounded-full"
+              [class]="row.colorClass"
+              [style.width.%]="row.percent"
+            ></div>
+          </div>
+          <span class="w-8 shrink-0 text-end font-mono text-xs tabular-nums text-fg-subtle">{{
+            valueFormatter()(row.value)
+          }}</span>
+        </li>
+      } @empty {
+        <li class="text-sm text-fg-subtle">—</li>
+      }
+    </ul>
+  `,
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }] } });
+
+const PAD_TOP = 12;
+const PAD_BOTTOM = 28;
+const PAD_LEFT = 44;
+const PAD_RIGHT = 16;
+/** Tek seride uç değer etiketi çizginin SAĞINA yazıldığı için ek boşluk. */
+const PAD_RIGHT_END_LABEL = 52;
+/** `ResizeObserver` gelene kadar (SSR/jsdom/ilk kare) kullanılan genişlik. */
+const FALLBACK_WIDTH = 600;
+/** X ekseni etiketleri arasındaki en küçük boşluk — sığmıyorsa etiketler seyreltilir. */
+const X_LABEL_MIN_GAP = 56;
+const defaultFormatter = (value) => new Intl.NumberFormat().format(value);
+/**
+ * `<mf-line-chart [labels]="months" [series]="series" ariaLabel="Aylık aktif kullanıcı" area />`
+ *
+ * Çok serili çizgi / alan grafiği — elle yazılmış SVG, grafik kütüphanesi YOK (kitin bağımlılık
+ * politikası). Dataviz metoduna göre:
+ * - 2px çizgi, yuvarlak birleşim; uç noktada ≥8px işaret + 2px yüzey halkası; alan dolgusu
+ *   serinin %10'u (doygun blok değil, "yıkama").
+ * - Y ekseni temiz sayılara (`niceTicks`), ızgara 1px düz hairline; TEK eksen (çift y ekseni yok).
+ * - ≥2 seride lejant HER ZAMAN var; tek seride lejant yok (başlık seriyi adlandırır), uç değer
+ *   çizginin ucunda doğrudan etiketlenir. Metin ASLA seri rengini taşımaz.
+ * - Hover katmanı varsayılan: crosshair en yakın X'e oturur, TEK tooltip o X'teki TÜM serileri
+ *   listeler (değer önde/güçlü, seri adı ikincil, çizgi anahtarı). Klavyede aynı bilgi: odakta
+ *   ←/→/Home/End, `aria-live` ile okunur.
+ * - Tooltip hiçbir değeri KAPILAMAZ: "Tablo olarak göster" ile aynı veri HTML tablosu olarak.
+ *
+ * Genişlik kapsayıcıdan (`ResizeObserver`) okunur ve çizim gerçek piksellerle yapılır — sabit
+ * `viewBox` ölçeklemesinin aksine etiketler dar kartta küçülmez, çizgiler kalınlaşmaz.
+ */
+class LineChart {
+    labels = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    series = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    ariaLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    area = input(false, { ...(ngDevMode ? { debugName: "area" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    height = input(220, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    valueFormatter = input(defaultFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueFormatter" }] : /* istanbul ignore next */ []));
+    i18n = inject(MF_CHART_LABELS);
+    focusRecipe = focusRecipe;
+    tooltipSurface = overlaySurface;
+    elementRef = inject(ElementRef);
+    width = signal(FALLBACK_WIDTH, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    tableView = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableView" }] : /* istanbul ignore next */ []));
+    single = computed(() => this.series().length === 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "single" }] : /* istanbul ignore next */ []));
+    padRight = computed(() => (this.single() ? PAD_RIGHT_END_LABEL : PAD_RIGHT), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padRight" }] : /* istanbul ignore next */ []));
+    plotBottom = computed(() => this.height() - PAD_BOTTOM, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plotBottom" }] : /* istanbul ignore next */ []));
+    plotLeft = PAD_LEFT;
+    plotRight = computed(() => this.width() - this.padRight(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plotRight" }] : /* istanbul ignore next */ []));
+    domain = computed(() => {
+        const all = this.series().flatMap((s) => s.values);
+        if (all.length === 0)
+            return [0, 1];
+        return niceTicks(Math.min(0, ...all), Math.max(...all));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "domain" }] : /* istanbul ignore next */ []));
+    scaleY = computed(() => {
+        const ticks = this.domain();
+        const min = ticks[0];
+        const max = ticks[ticks.length - 1];
+        const top = PAD_TOP;
+        const bottom = this.plotBottom();
+        return (value) => bottom - ((value - min) / (max - min)) * (bottom - top);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleY" }] : /* istanbul ignore next */ []));
+    scaleX = computed(() => {
+        const count = this.labels().length;
+        const left = PAD_LEFT;
+        const plotWidth = Math.max(0, this.plotRight() - left);
+        if (count <= 1)
+            return () => left + plotWidth / 2;
+        return (index) => left + (index * plotWidth) / (count - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scaleX" }] : /* istanbul ignore next */ []));
+    yTicks = computed(() => {
+        const y = this.scaleY();
+        const format = this.valueFormatter();
+        return this.domain().map((value) => ({ value, y: y(value), label: format(value) }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yTicks" }] : /* istanbul ignore next */ []));
+    xLabels = computed(() => {
+        const labels = this.labels();
+        const x = this.scaleX();
+        const count = labels.length;
+        const plotWidth = this.plotRight() - PAD_LEFT;
+        const fit = Math.max(1, Math.floor(plotWidth / X_LABEL_MIN_GAP));
+        const step = Math.max(1, Math.ceil(count / fit));
+        return labels.flatMap((text, index) => {
+            if (index % step !== 0)
+                return [];
+            const anchor = count > 1 && index === 0 ? 'start' : count > 1 && index === count - 1 ? 'end' : 'middle';
+            return [{ x: x(index), text, anchor }];
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xLabels" }] : /* istanbul ignore next */ []));
+    /** Alan dolgusunun ve eksen çizgisinin oturduğu taban — 0 ölçekteyse 0, değilse alt sınır. */
+    baselineY = computed(() => {
+        const ticks = this.domain();
+        const zero = ticks[0] <= 0 && ticks[ticks.length - 1] >= 0 ? 0 : ticks[0];
+        return this.scaleY()(zero);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "baselineY" }] : /* istanbul ignore next */ []));
+    plotSeries = computed(() => {
+        const x = this.scaleX();
+        const y = this.scaleY();
+        const base = this.baselineY();
+        return this.series().map((s, index) => {
+            const slot = s.colorIndex ?? index;
+            const points = s.values.map((value, i) => ({ x: x(i), y: y(value) }));
+            const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`).join(' ');
+            const first = points[0];
+            const last = points[points.length - 1];
+            const areaPath = points.length > 1 ? `${path} L${last.x} ${base} L${first.x} ${base} Z` : '';
+            return {
+                name: s.name,
+                values: s.values,
+                points,
+                path,
+                areaPath,
+                strokeClass: chartStrokeClass(slot),
+                fillClass: chartFillClass(slot),
+                keyClass: chartBgClass(slot),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plotSeries" }] : /* istanbul ignore next */ []));
+    activeX = computed(() => {
+        const index = this.activeIndex();
+        return index === null ? null : this.scaleX()(index);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeX" }] : /* istanbul ignore next */ []));
+    /** Tooltip crosshair'in sağında; grafiğin sağ yarısındaysa taşmasın diye solunda. */
+    tooltipStyle = computed(() => {
+        const x = this.activeX();
+        if (x === null)
+            return null;
+        return x > this.width() / 2 ? { right: `${this.width() - x + 12}px` } : { left: `${x + 12}px` };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipStyle" }] : /* istanbul ignore next */ []));
+    readout = computed(() => {
+        const index = this.activeIndex();
+        if (index === null)
+            return null;
+        const format = this.valueFormatter();
+        return {
+            label: this.labels()[index] ?? '',
+            rows: this.plotSeries().map((s) => ({
+                name: s.name,
+                keyClass: s.keyClass,
+                value: s.values[index] === undefined ? '—' : format(s.values[index]),
+            })),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readout" }] : /* istanbul ignore next */ []));
+    liveText = computed(() => {
+        const readout = this.readout();
+        if (!readout)
+            return '';
+        return `${readout.label}: ${readout.rows.map((r) => `${r.name} ${r.value}`).join(', ')}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "liveText" }] : /* istanbul ignore next */ []));
+    tableRows = computed(() => {
+        const format = this.valueFormatter();
+        return this.labels().map((label, index) => ({
+            label,
+            values: this.series().map((s) => s.values[index] === undefined ? '—' : format(s.values[index])),
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const host = this.elementRef.nativeElement;
+            if (host.clientWidth > 0)
+                this.width.set(host.clientWidth);
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(([entry]) => {
+                const next = Math.round(entry.contentRect.width);
+                if (next > 0)
+                    this.width.set(next);
+            });
+            observer.observe(host);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+    }
+    toggleTable() {
+        this.activeIndex.set(null);
+        this.tableView.update((value) => !value);
+    }
+    onPointerMove(event) {
+        const count = this.labels().length;
+        if (count === 0)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const plotWidth = this.plotRight() - PAD_LEFT;
+        const ratio = count <= 1 ? 0 : (event.clientX - rect.left - PAD_LEFT) / plotWidth;
+        this.activeIndex.set(clamp(Math.round(ratio * (count - 1)), 0, count - 1));
+    }
+    onFocus() {
+        if (this.activeIndex() === null && this.labels().length > 0) {
+            this.activeIndex.set(this.labels().length - 1);
+        }
+    }
+    onKeydown(event) {
+        const count = this.labels().length;
+        if (count === 0)
+            return;
+        const current = this.activeIndex() ?? count - 1;
+        const next = {
+            ArrowLeft: clamp(current - 1, 0, count - 1),
+            ArrowRight: clamp(current + 1, 0, count - 1),
+            Home: 0,
+            End: count - 1,
+            Escape: null,
+        };
+        if (!(event.key in next))
+            return;
+        event.preventDefault();
+        this.activeIndex.set(next[event.key]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: LineChart, isStandalone: true, selector: "mf-line-chart", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: true, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["mfLineChart"], ngImport: i0, template: "<figure class=\"m-0 flex flex-col gap-3\">\r\n  <div class=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\">\r\n    @if (plotSeries().length > 1) {\r\n      <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0\">\r\n        @for (s of plotSeries(); track s.name) {\r\n          <li class=\"flex items-center gap-1.5 text-xs text-fg-muted\">\r\n            <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"s.keyClass\"></span>\r\n            {{ s.name }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <span></span>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"\r\n        'rounded-sm text-xs text-fg-muted underline-offset-2 transition-colors duration-fast ease-emphasis hover:text-fg hover:underline ' +\r\n        focusRecipe\r\n      \"\r\n      (click)=\"toggleTable()\"\r\n    >\r\n      {{ tableView() ? i18n().showChart : i18n().showTable }}\r\n    </button>\r\n  </div>\r\n\r\n  @if (tableView()) {\r\n    <div class=\"overflow-x-auto\">\r\n      <table class=\"w-full border-collapse text-sm\">\r\n        <caption class=\"sr-only\">\r\n          {{\r\n            ariaLabel()\r\n          }}\r\n        </caption>\r\n        <thead>\r\n          <tr class=\"border-b border-border\">\r\n            <th scope=\"col\" class=\"py-2 pe-4 text-start text-eyebrow text-fg-subtle\">\r\n              {{ i18n().category }}\r\n            </th>\r\n            @for (s of series(); track s.name) {\r\n              <th scope=\"col\" class=\"py-2 ps-4 text-end text-eyebrow text-fg-subtle\">\r\n                {{ s.name }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of tableRows(); track $index) {\r\n            <tr class=\"border-b border-border-subtle last:border-b-0\">\r\n              <th scope=\"row\" class=\"py-2 pe-4 text-start font-normal text-fg-muted\">\r\n                {{ row.label }}\r\n              </th>\r\n              @for (value of row.values; track $index) {\r\n                <td class=\"py-2 ps-4 text-end tabular-nums text-fg\">{{ value }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [class]=\"'relative touch-pan-y rounded-sm ' + focusRecipe\"\r\n      [style.height.px]=\"height()\"\r\n      (pointermove)=\"onPointerMove($event)\"\r\n      (pointerleave)=\"activeIndex.set(null)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"activeIndex.set(null)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      <svg\r\n        [attr.width]=\"width()\"\r\n        [attr.height]=\"height()\"\r\n        class=\"block overflow-visible\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (tick of yTicks(); track tick.value) {\r\n          <line\r\n            [attr.x1]=\"plotLeft\"\r\n            [attr.x2]=\"plotRight()\"\r\n            [attr.y1]=\"tick.y\"\r\n            [attr.y2]=\"tick.y\"\r\n            class=\"stroke-border\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n          <text\r\n            [attr.x]=\"plotLeft - 8\"\r\n            [attr.y]=\"tick.y\"\r\n            text-anchor=\"end\"\r\n            dominant-baseline=\"middle\"\r\n            class=\"fill-fg-subtle text-caption tabular-nums\"\r\n          >\r\n            {{ tick.label }}\r\n          </text>\r\n        }\r\n\r\n        <line\r\n          [attr.x1]=\"plotLeft\"\r\n          [attr.x2]=\"plotRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"stroke-border-strong\"\r\n          stroke-width=\"1\"\r\n          shape-rendering=\"crispEdges\"\r\n        />\r\n\r\n        @for (label of xLabels(); track $index) {\r\n          <text\r\n            [attr.x]=\"label.x\"\r\n            [attr.y]=\"plotBottom() + 18\"\r\n            [attr.text-anchor]=\"label.anchor\"\r\n            class=\"fill-fg-subtle text-caption\"\r\n          >\r\n            {{ label.text }}\r\n          </text>\r\n        }\r\n\r\n        @if (area()) {\r\n          @for (s of plotSeries(); track s.name) {\r\n            <path [attr.d]=\"s.areaPath\" [class]=\"s.fillClass\" fill-opacity=\"0.1\" />\r\n          }\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          <path\r\n            [attr.d]=\"s.path\"\r\n            fill=\"none\"\r\n            [class]=\"s.strokeClass\"\r\n            stroke-width=\"2\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-linecap=\"round\"\r\n          />\r\n        }\r\n\r\n        @if (activeX() !== null) {\r\n          <line\r\n            [attr.x1]=\"activeX()\"\r\n            [attr.x2]=\"activeX()\"\r\n            [attr.y1]=\"12\"\r\n            [attr.y2]=\"plotBottom()\"\r\n            class=\"stroke-border-strong\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          @let point = activeIndex() !== null ? s.points[activeIndex()!] : s.points.at(-1);\r\n          @if (point) {\r\n            <circle\r\n              [attr.cx]=\"point.x\"\r\n              [attr.cy]=\"point.y\"\r\n              r=\"4\"\r\n              [class]=\"s.fillClass + ' stroke-surface'\"\r\n              stroke-width=\"2\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (single() && activeIndex() === null) {\r\n          @let last = plotSeries()[0].points.at(-1);\r\n          @if (last) {\r\n            <text\r\n              [attr.x]=\"last.x + 10\"\r\n              [attr.y]=\"last.y\"\r\n              dominant-baseline=\"middle\"\r\n              class=\"fill-fg text-caption font-medium tabular-nums\"\r\n            >\r\n              {{ valueFormatter()(plotSeries()[0].values.at(-1)!) }}\r\n            </text>\r\n          }\r\n        }\r\n      </svg>\r\n\r\n      @if (readout(); as r) {\r\n        <div\r\n          aria-hidden=\"true\"\r\n          [class]=\"tooltipSurface + ' pointer-events-none absolute top-0 z-10 min-w-32 px-3 py-2'\"\r\n          [style.left]=\"tooltipStyle()?.left\"\r\n          [style.right]=\"tooltipStyle()?.right\"\r\n        >\r\n          <p class=\"mb-1.5 text-caption text-fg-subtle\">{{ r.label }}</p>\r\n          <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n            @for (row of r.rows; track row.name) {\r\n              <li class=\"flex items-center gap-2 text-xs\">\r\n                <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"row.keyClass\"></span>\r\n                <span class=\"font-medium tabular-nums text-fg\">{{ row.value }}</span>\r\n                <span class=\"text-fg-muted\">{{ row.name }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"sr-only\" aria-live=\"polite\">{{ liveText() }}</div>\r\n    </div>\r\n  }\r\n</figure>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: LineChart, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-line-chart', exportAs: 'mfLineChart', host: { class: 'block' }, template: "<figure class=\"m-0 flex flex-col gap-3\">\r\n  <div class=\"flex flex-wrap items-center justify-between gap-x-4 gap-y-2\">\r\n    @if (plotSeries().length > 1) {\r\n      <ul class=\"m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0\">\r\n        @for (s of plotSeries(); track s.name) {\r\n          <li class=\"flex items-center gap-1.5 text-xs text-fg-muted\">\r\n            <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"s.keyClass\"></span>\r\n            {{ s.name }}\r\n          </li>\r\n        }\r\n      </ul>\r\n    } @else {\r\n      <span></span>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      [class]=\"\r\n        'rounded-sm text-xs text-fg-muted underline-offset-2 transition-colors duration-fast ease-emphasis hover:text-fg hover:underline ' +\r\n        focusRecipe\r\n      \"\r\n      (click)=\"toggleTable()\"\r\n    >\r\n      {{ tableView() ? i18n().showChart : i18n().showTable }}\r\n    </button>\r\n  </div>\r\n\r\n  @if (tableView()) {\r\n    <div class=\"overflow-x-auto\">\r\n      <table class=\"w-full border-collapse text-sm\">\r\n        <caption class=\"sr-only\">\r\n          {{\r\n            ariaLabel()\r\n          }}\r\n        </caption>\r\n        <thead>\r\n          <tr class=\"border-b border-border\">\r\n            <th scope=\"col\" class=\"py-2 pe-4 text-start text-eyebrow text-fg-subtle\">\r\n              {{ i18n().category }}\r\n            </th>\r\n            @for (s of series(); track s.name) {\r\n              <th scope=\"col\" class=\"py-2 ps-4 text-end text-eyebrow text-fg-subtle\">\r\n                {{ s.name }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (row of tableRows(); track $index) {\r\n            <tr class=\"border-b border-border-subtle last:border-b-0\">\r\n              <th scope=\"row\" class=\"py-2 pe-4 text-start font-normal text-fg-muted\">\r\n                {{ row.label }}\r\n              </th>\r\n              @for (value of row.values; track $index) {\r\n                <td class=\"py-2 ps-4 text-end tabular-nums text-fg\">{{ value }}</td>\r\n              }\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  } @else {\r\n    <div\r\n      tabindex=\"0\"\r\n      role=\"group\"\r\n      [attr.aria-label]=\"ariaLabel()\"\r\n      [class]=\"'relative touch-pan-y rounded-sm ' + focusRecipe\"\r\n      [style.height.px]=\"height()\"\r\n      (pointermove)=\"onPointerMove($event)\"\r\n      (pointerleave)=\"activeIndex.set(null)\"\r\n      (focus)=\"onFocus()\"\r\n      (blur)=\"activeIndex.set(null)\"\r\n      (keydown)=\"onKeydown($event)\"\r\n    >\r\n      <svg\r\n        [attr.width]=\"width()\"\r\n        [attr.height]=\"height()\"\r\n        class=\"block overflow-visible\"\r\n        aria-hidden=\"true\"\r\n      >\r\n        @for (tick of yTicks(); track tick.value) {\r\n          <line\r\n            [attr.x1]=\"plotLeft\"\r\n            [attr.x2]=\"plotRight()\"\r\n            [attr.y1]=\"tick.y\"\r\n            [attr.y2]=\"tick.y\"\r\n            class=\"stroke-border\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n          <text\r\n            [attr.x]=\"plotLeft - 8\"\r\n            [attr.y]=\"tick.y\"\r\n            text-anchor=\"end\"\r\n            dominant-baseline=\"middle\"\r\n            class=\"fill-fg-subtle text-caption tabular-nums\"\r\n          >\r\n            {{ tick.label }}\r\n          </text>\r\n        }\r\n\r\n        <line\r\n          [attr.x1]=\"plotLeft\"\r\n          [attr.x2]=\"plotRight()\"\r\n          [attr.y1]=\"baselineY()\"\r\n          [attr.y2]=\"baselineY()\"\r\n          class=\"stroke-border-strong\"\r\n          stroke-width=\"1\"\r\n          shape-rendering=\"crispEdges\"\r\n        />\r\n\r\n        @for (label of xLabels(); track $index) {\r\n          <text\r\n            [attr.x]=\"label.x\"\r\n            [attr.y]=\"plotBottom() + 18\"\r\n            [attr.text-anchor]=\"label.anchor\"\r\n            class=\"fill-fg-subtle text-caption\"\r\n          >\r\n            {{ label.text }}\r\n          </text>\r\n        }\r\n\r\n        @if (area()) {\r\n          @for (s of plotSeries(); track s.name) {\r\n            <path [attr.d]=\"s.areaPath\" [class]=\"s.fillClass\" fill-opacity=\"0.1\" />\r\n          }\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          <path\r\n            [attr.d]=\"s.path\"\r\n            fill=\"none\"\r\n            [class]=\"s.strokeClass\"\r\n            stroke-width=\"2\"\r\n            stroke-linejoin=\"round\"\r\n            stroke-linecap=\"round\"\r\n          />\r\n        }\r\n\r\n        @if (activeX() !== null) {\r\n          <line\r\n            [attr.x1]=\"activeX()\"\r\n            [attr.x2]=\"activeX()\"\r\n            [attr.y1]=\"12\"\r\n            [attr.y2]=\"plotBottom()\"\r\n            class=\"stroke-border-strong\"\r\n            stroke-width=\"1\"\r\n            shape-rendering=\"crispEdges\"\r\n          />\r\n        }\r\n\r\n        @for (s of plotSeries(); track s.name) {\r\n          @let point = activeIndex() !== null ? s.points[activeIndex()!] : s.points.at(-1);\r\n          @if (point) {\r\n            <circle\r\n              [attr.cx]=\"point.x\"\r\n              [attr.cy]=\"point.y\"\r\n              r=\"4\"\r\n              [class]=\"s.fillClass + ' stroke-surface'\"\r\n              stroke-width=\"2\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (single() && activeIndex() === null) {\r\n          @let last = plotSeries()[0].points.at(-1);\r\n          @if (last) {\r\n            <text\r\n              [attr.x]=\"last.x + 10\"\r\n              [attr.y]=\"last.y\"\r\n              dominant-baseline=\"middle\"\r\n              class=\"fill-fg text-caption font-medium tabular-nums\"\r\n            >\r\n              {{ valueFormatter()(plotSeries()[0].values.at(-1)!) }}\r\n            </text>\r\n          }\r\n        }\r\n      </svg>\r\n\r\n      @if (readout(); as r) {\r\n        <div\r\n          aria-hidden=\"true\"\r\n          [class]=\"tooltipSurface + ' pointer-events-none absolute top-0 z-10 min-w-32 px-3 py-2'\"\r\n          [style.left]=\"tooltipStyle()?.left\"\r\n          [style.right]=\"tooltipStyle()?.right\"\r\n        >\r\n          <p class=\"mb-1.5 text-caption text-fg-subtle\">{{ r.label }}</p>\r\n          <ul class=\"m-0 flex list-none flex-col gap-1 p-0\">\r\n            @for (row of r.rows; track row.name) {\r\n              <li class=\"flex items-center gap-2 text-xs\">\r\n                <span class=\"h-0.5 w-3 shrink-0 rounded-full\" [class]=\"row.keyClass\"></span>\r\n                <span class=\"font-medium tabular-nums text-fg\">{{ row.value }}</span>\r\n                <span class=\"text-fg-muted\">{{ row.name }}</span>\r\n              </li>\r\n            }\r\n          </ul>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"sr-only\" aria-live=\"polite\">{{ liveText() }}</div>\r\n    </div>\r\n  }\r\n</figure>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: true }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }] } });
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+
+const INSET = 4;
+/**
+ * `<mf-sparkline [values]="last12" ariaLabel="Son 12 ay: 120'den 184'e" />`
+ *
+ * Eksensiz, etkileşimsiz trend glifi — StatTile'ın "trend" satırı (dataviz figür sözleşmesi:
+ * çizgi geri planda kalan tonla, GÜNCEL dönem vurgu renginde). Değerin kendisi yanındaki metinde
+ * yazdığı için hover katmanı YOK; `ariaLabel` verilmezse süs sayılır (`aria-hidden`).
+ * Gerçek piksellerle çizilir (sabit `width`/`height`) — `viewBox` ölçeklemesi uç noktayı
+ * elipse çevirirdi.
+ */
+class Sparkline {
+    values = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    width = input(96, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input(28, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    area = input(false, { ...(ngDevMode ? { debugName: "area" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    geometry = computed(() => {
+        const values = this.values();
+        const width = this.width();
+        const height = this.height();
+        if (values.length === 0)
+            return { line: '', area: '', end: null };
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const span = max - min || 1;
+        const stepX = values.length > 1 ? (width - INSET * 2) / (values.length - 1) : 0;
+        const points = values.map((value, index) => ({
+            x: values.length > 1 ? INSET + index * stepX : width / 2,
+            y: height - INSET - ((value - min) / span) * (height - INSET * 2),
+        }));
+        const line = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`).join(' ');
+        const first = points[0];
+        const end = points[points.length - 1];
+        const area = points.length > 1 ? `${line} L${end.x} ${height} L${first.x} ${height} Z` : '';
+        return { line, area, end };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Sparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Sparkline, isStandalone: true, selector: "mf-sparkline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block align-middle leading-none" }, ngImport: i0, template: "<svg\r\n  [attr.width]=\"width()\"\r\n  [attr.height]=\"height()\"\r\n  class=\"block overflow-visible\"\r\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\r\n>\r\n  @if (area() && geometry().area) {\r\n    <path [attr.d]=\"geometry().area\" class=\"fill-chart-1\" fill-opacity=\"0.1\" />\r\n  }\r\n  <path\r\n    [attr.d]=\"geometry().line\"\r\n    fill=\"none\"\r\n    class=\"stroke-chart-other\"\r\n    stroke-width=\"1.5\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n  />\r\n  @if (geometry().end; as end) {\r\n    <circle\r\n      [attr.cx]=\"end.x\"\r\n      [attr.cy]=\"end.y\"\r\n      r=\"3\"\r\n      class=\"fill-chart-1 stroke-surface\"\r\n      stroke-width=\"1.5\"\r\n    />\r\n  }\r\n</svg>\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Sparkline, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-sparkline', host: { class: 'inline-block align-middle leading-none' }, template: "<svg\r\n  [attr.width]=\"width()\"\r\n  [attr.height]=\"height()\"\r\n  class=\"block overflow-visible\"\r\n  [attr.role]=\"ariaLabel() ? 'img' : null\"\r\n  [attr.aria-label]=\"ariaLabel() || null\"\r\n  [attr.aria-hidden]=\"ariaLabel() ? null : 'true'\"\r\n>\r\n  @if (area() && geometry().area) {\r\n    <path [attr.d]=\"geometry().area\" class=\"fill-chart-1\" fill-opacity=\"0.1\" />\r\n  }\r\n  <path\r\n    [attr.d]=\"geometry().line\"\r\n    fill=\"none\"\r\n    class=\"stroke-chart-other\"\r\n    stroke-width=\"1.5\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n  />\r\n  @if (geometry().end; as end) {\r\n    <circle\r\n      [attr.cx]=\"end.x\"\r\n      [attr.cy]=\"end.y\"\r\n      r=\"3\"\r\n      class=\"fill-chart-1 stroke-surface\"\r\n      stroke-width=\"1.5\"\r\n    />\r\n  }\r\n</svg>\r\n" }]
+        }], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BarChart, BarList, LineChart, MF_CHART_SLOT_COUNT, Sparkline, chartBgClass, chartFillClass, chartStrokeClass, niceTicks };
+//# sourceMappingURL=mesgflow-ui-kit-chart.mjs.map