@ojiepermana/angular 0.1.1 → 21.0.0

package/fesm2022/ojiepermana-angular-chart.mjs

@@ -0,0 +1,3714 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, DestroyRef, input, afterNextRender, viewChild, Directive, contentChild, TemplateRef, output } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+import { scaleBand, scaleLinear, scalePoint } from 'd3-scale';
+import { min, max, extent } from 'd3-array';
+import { stack, curveLinear, curveStep, curveMonotoneX, line, area, stackOffsetExpand, pie, arc, curveCardinalClosed, curveLinearClosed, lineRadial } from 'd3-shape';
+
+/** CSS selector under which a chart instance is scoped. */
+const CHART_DATA_ATTRIBUTE = 'data-chart';
+/** Default color schemes supported by the generated `<style>` block. */
+const CHART_THEMES = [
+    { key: 'light', selector: '' },
+    { key: 'dark', selector: '[data-mode="dark"]' },
+];
+/**
+ * Generate the CSS rule-set for a chart instance: one `--color-<key>` per
+ * series, scoped to the owning `[data-chart]` element, with optional dark
+ * variant via `[data-mode="dark"] [data-chart="…"]`.
+ *
+ * Series without any color are skipped (consumer can fall back to a default).
+ *
+ * @param chartId  Unique chart id (used as attribute value).
+ * @param config   Series configuration map.
+ */
+function buildChartCss(chartId, config) {
+    const entries = Object.entries(config).filter(([, cfg]) => cfg.color || cfg.theme);
+    if (entries.length === 0) {
+        return '';
+    }
+    return CHART_THEMES.map(({ key, selector }) => {
+        const vars = entries
+            .map(([seriesKey, cfg]) => {
+            const value = cfg.theme?.[key] ?? cfg.color;
+            return value ? `  --color-${escapeCssIdent(seriesKey)}: ${value};` : '';
+        })
+            .filter(Boolean)
+            .join('\n');
+        if (!vars) {
+            return '';
+        }
+        const scope = selector
+            ? `${selector} [${CHART_DATA_ATTRIBUTE}="${chartId}"]`
+            : `[${CHART_DATA_ATTRIBUTE}="${chartId}"]`;
+        return `${scope} {\n${vars}\n}`;
+    })
+        .filter(Boolean)
+        .join('\n');
+}
+/**
+ * Escape a string so it is safe to use as a CSS custom-property identifier.
+ * Allows `[A-Za-z0-9_-]`; everything else becomes `_`.
+ */
+function escapeCssIdent(input) {
+    return input.replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+/** Resolve the `var(--color-<key>)` reference for a given series. */
+function seriesColorVar(seriesKey) {
+    return `var(--color-${seriesKey.replace(/[^a-zA-Z0-9_-]/g, '_')})`;
+}
+
+/**
+ * Shared chart state provided by `ChartContainer` to all nested chart
+ * components (axes, grid, tooltip, legend, chart types).
+ *
+ * All state is exposed as signals so consumers can derive computed state
+ * (scales, visible series, tooltip position) without manual subscriptions.
+ */
+class ChartContext {
+    /** Stable instance id — used in the `data-chart` attribute and CSS scope. */
+    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** User-provided series config. */
+    config = signal({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** Measured render-area dimensions (ResizeObserver-driven). */
+    dimensions = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
+    /** Currently highlighted data point (tooltip / crosshair). */
+    activePoint = signal(null, ...(ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []));
+    /** Series keys the user has toggled off via legend. */
+    hiddenSeries = signal(new Set(), ...(ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []));
+    /** Ordered list of series keys (from `config`). */
+    seriesKeys = computed(() => Object.keys(this.config()), ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    /** Series keys currently visible (config order minus `hiddenSeries`). */
+    visibleSeriesKeys = computed(() => {
+        const hidden = this.hiddenSeries();
+        return this.seriesKeys().filter((k) => !hidden.has(k));
+    }, ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
+    /** Toggle visibility of a series. */
+    toggleSeries(key) {
+        this.hiddenSeries.update((set) => {
+            const next = new Set(set);
+            if (next.has(key)) {
+                next.delete(key);
+            }
+            else {
+                next.add(key);
+            }
+            return next;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartContext, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Emits a scoped `<style>` block mapping every series key in the current
+ * `ChartConfig` to a `--color-<key>` CSS custom property, scoped to
+ * `[data-chart="<id>"]`. Dark-mode values are scoped under `[data-mode="dark"]`.
+ *
+ * Implemented as an empty component that injects a real `<style>` element
+ * into its host via `Renderer2`. We avoid rendering `<style>` directly in a
+ * template — Angular hoists those into component CSS and strips
+ * interpolations from them.
+ *
+ * Consumers never instantiate this directly — `ChartContainer` renders it.
+ */
+class ChartStyle {
+    ctx = inject(ChartContext);
+    host = inject((ElementRef));
+    renderer = inject(Renderer2);
+    styleEl = null;
+    css = computed(() => buildChartCss(this.ctx.id(), this.ctx.config()), ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const css = this.css();
+            if (!this.styleEl) {
+                this.styleEl = this.renderer.createElement('style');
+                this.renderer.appendChild(this.host.nativeElement, this.styleEl);
+            }
+            this.styleEl.textContent = css;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ChartStyle, isStandalone: true, selector: "ui-chart-style", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartStyle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart-style',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '',
+                }]
+        }], ctorParameters: () => [] });
+
+let chartIdCounter = 0;
+/**
+ * Root of every chart. Provides `ChartContext` to descendants, reflects the
+ * chart id via `data-chart`, injects the per-instance CSS-variable
+ * `<style>` block, and tracks its render-area dimensions via
+ * `ResizeObserver`.
+ *
+ * Usage:
+ * ```html
+ * <ui-chart-container [config]="cfg">
+ *   <ui-bar-chart [data]="data" />
+ * </ui-chart-container>
+ * ```
+ */
+class ChartContainer {
+    ctx = inject(ChartContext);
+    host = inject((ElementRef));
+    zone = inject(NgZone);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    /** Series configuration. Required for color / label resolution. */
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * Tailwind aspect-ratio utility for the container. Defaults to `aspect-video`
+     * for cartesian charts; override with `aspect-square` for radial / pie layouts.
+     */
+    aspect = input('aspect-video', ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => `relative flex ${this.aspect()} justify-center text-xs`, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional explicit id override. When omitted, a stable auto-id is
+     * generated (`chart-<n>`), unique across the document.
+     */
+    chartId = input(null, ...(ngDevMode ? [{ debugName: "chartId" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const autoId = `chart-${++chartIdCounter}`;
+        // Sync id + config into the shared context.
+        effect(() => {
+            this.ctx.id.set(this.chartId() ?? autoId);
+        });
+        effect(() => {
+            this.ctx.config.set(this.config());
+        });
+        // Observe host size (browser only; client-only is a confirmed constraint).
+        if (isPlatformBrowser(this.platformId)) {
+            afterNextRender(() => this.observeSize());
+        }
+    }
+    observeSize() {
+        const el = this.host.nativeElement;
+        if (typeof ResizeObserver === 'undefined') {
+            const rect = el.getBoundingClientRect();
+            this.ctx.dimensions.set({ width: rect.width, height: rect.height });
+            return;
+        }
+        const observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                // Avoid NgZone churn — dimensions signal drives CD on its own.
+                this.zone.run(() => this.ctx.dimensions.set({ width, height }));
+            }
+        });
+        observer.observe(el);
+        this.destroyRef.onDestroy(() => observer.disconnect());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ChartContainer, isStandalone: true, selector: "ui-chart-container", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-chart": "ctx.id()", "class": "hostClass()" } }, providers: [ChartContext], ngImport: i0, template: `
+    <ui-chart-style />
+    <ng-content />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ui-chart-style" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart-container',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [ChartContext],
+                    imports: [ChartStyle],
+                    host: {
+                        '[attr.data-chart]': 'ctx.id()',
+                        '[class]': 'hostClass()',
+                    },
+                    template: `
+    <ui-chart-style />
+    <ng-content />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], aspect: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspect", required: false }] }], chartId: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartId", required: false }] }] } });
+
+/**
+ * Cartesian plotting frame shared between a chart type (Bar, Line, Area…)
+ * and its axis / grid primitives.
+ *
+ * The owning chart component provides an instance and publishes its scales;
+ * descendants read them via signals and re-render when dimensions or data
+ * change.
+ */
+class CartesianContext {
+    /** Inner width (outer width − margin.left − margin.right). */
+    innerWidth = signal(0, ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    /** Inner height (outer height − margin.top − margin.bottom). */
+    innerHeight = signal(0, ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    /** Margins around the plotting area. */
+    margin = signal({ top: 8, right: 8, bottom: 24, left: 40 }, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** Layout orientation (drives which axis holds the band scale). */
+    orientation = signal('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /** Band (categorical) scale. */
+    categoryScale = signal(null, ...(ngDevMode ? [{ debugName: "categoryScale" }] : /* istanbul ignore next */ []));
+    /** Linear (numeric) scale. */
+    valueScale = signal(null, ...(ngDevMode ? [{ debugName: "valueScale" }] : /* istanbul ignore next */ []));
+    /** Ordered category domain (e.g. x labels for vertical, y labels for horizontal). */
+    categories = signal([], ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CartesianContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CartesianContext, decorators: [{
+            type: Injectable
+        }] });
+/** Resolve the scale that maps to the X axis for a given orientation. */
+function xScale(ctx) {
+    return ctx.orientation() === 'vertical' ? ctx.categoryScale : ctx.valueScale;
+}
+/** Resolve the scale that maps to the Y axis for a given orientation. */
+function yScale(ctx) {
+    return ctx.orientation() === 'vertical' ? ctx.valueScale : ctx.categoryScale;
+}
+
+/** Produce evenly-spaced ticks for a band (categorical) scale. */
+function bandTicks(scale) {
+    const half = scale.bandwidth() / 2;
+    return scale.domain().map((value) => ({
+        value,
+        offset: (scale(value) ?? 0) + half,
+        label: value,
+    }));
+}
+/**
+ * Produce ticks for a linear scale.
+ *
+ * @param scale      The linear scale.
+ * @param count      Approximate number of ticks (hint, d3 may return fewer/more).
+ * @param formatter  Label formatter.
+ */
+function linearTicks(scale, count = 5, formatter = (v) => String(v)) {
+    return scale.ticks(count).map((value) => ({
+        value,
+        offset: scale(value),
+        label: formatter(value),
+    }));
+}
+
+function clamp$1(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function normalizeIndexRange(start, end, maxCount) {
+    if (maxCount <= 0) {
+        return null;
+    }
+    const lo = clamp$1(Math.floor(Math.min(start, end)), 0, maxCount - 1);
+    const hi = clamp$1(Math.floor(Math.max(start, end)), 0, maxCount - 1);
+    return { startIndex: lo, endIndex: hi };
+}
+function effectiveIndexRange(range, maxCount) {
+    if (maxCount <= 0) {
+        return null;
+    }
+    return range
+        ? normalizeIndexRange(range.startIndex, range.endIndex, maxCount)
+        : { startIndex: 0, endIndex: maxCount - 1 };
+}
+function indexRangeSize(range, maxCount) {
+    const effective = effectiveIndexRange(range, maxCount);
+    return effective ? effective.endIndex - effective.startIndex + 1 : 0;
+}
+function sliceByIndexRange(data, range) {
+    if (!range) {
+        return data;
+    }
+    return data.slice(range.startIndex, range.endIndex + 1);
+}
+function zoomIndexRange(current, maxCount, anchorIndex, factor) {
+    const base = effectiveIndexRange(current, maxCount);
+    if (!base) {
+        return null;
+    }
+    const currentSize = base.endIndex - base.startIndex + 1;
+    const nextSize = clamp$1(Math.round(currentSize * factor), 2, maxCount);
+    if (nextSize >= maxCount) {
+        return null;
+    }
+    const boundedAnchor = clamp$1(anchorIndex, base.startIndex, base.endIndex);
+    const ratio = currentSize <= 1 ? 0.5 : (boundedAnchor - base.startIndex) / (currentSize - 1);
+    let start = Math.round(boundedAnchor - ratio * (nextSize - 1));
+    start = clamp$1(start, 0, maxCount - nextSize);
+    return { startIndex: start, endIndex: start + nextSize - 1 };
+}
+function panIndexRange(current, maxCount, deltaSteps) {
+    const base = effectiveIndexRange(current, maxCount);
+    if (!base) {
+        return null;
+    }
+    const size = base.endIndex - base.startIndex + 1;
+    if (size >= maxCount) {
+        return null;
+    }
+    const start = clamp$1(base.startIndex + deltaSteps, 0, maxCount - size);
+    return { startIndex: start, endIndex: start + size - 1 };
+}
+function normalizeNumericDomain(a, b) {
+    if (a === b) {
+        return [a - 1, b + 1];
+    }
+    return a < b ? [a, b] : [b, a];
+}
+function zoomNumericDomain(current, full, anchor, factor) {
+    const currentWidth = current[1] - current[0];
+    const fullWidth = full[1] - full[0];
+    const nextWidth = clamp$1(currentWidth * factor, fullWidth / 50, fullWidth);
+    if (nextWidth >= fullWidth) {
+        return full;
+    }
+    const ratio = currentWidth === 0 ? 0.5 : (anchor - current[0]) / currentWidth;
+    let start = anchor - ratio * nextWidth;
+    start = clamp$1(start, full[0], full[1] - nextWidth);
+    return [start, start + nextWidth];
+}
+function panNumericDomain(current, full, delta) {
+    const width = current[1] - current[0];
+    const start = clamp$1(current[0] + delta, full[0], full[1] - width);
+    return [start, start + width];
+}
+
+/**
+ * X axis for a cartesian chart. Reads scales from `CartesianContext`.
+ *
+ * Renders as `<svg:g>` — must be placed inside the owning chart's SVG.
+ */
+class ChartAxisX {
+    ctx = inject(CartesianContext);
+    /** Approximate tick count for linear (value) scales. */
+    tickCount = input(5, ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
+    /** Show 6-px tick marks between the axis line and the labels. */
+    tickLine = input(true, ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
+    /** Formatter for numeric tick labels. */
+    tickFormat = input((v) => String(v), ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
+    innerWidth = this.ctx.innerWidth;
+    transform = computed(() => `translate(0,${this.ctx.innerHeight()})`, ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    ticks = computed(() => {
+        const horizontal = this.ctx.orientation() === 'horizontal';
+        if (horizontal) {
+            const scale = this.ctx.valueScale();
+            return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
+        }
+        const scale = this.ctx.categoryScale();
+        return scale ? bandTicks(scale) : [];
+    }, ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartAxisX, isStandalone: true, selector: "svg:g[ui-chart-axis-x]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null }, tickLine: { classPropertyName: "tickLine", publicName: "tickLine", isSignal: true, isRequired: false, transformFunction: null }, tickFormat: { classPropertyName: "tickFormat", publicName: "tickFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.transform": "transform()" }, classAttribute: "chart-axis chart-axis-x text-muted-foreground" }, ngImport: i0, template: `
+    <svg:line class="stroke-border" [attr.x1]="0" [attr.x2]="innerWidth()" y1="0" y2="0" />
+    @for (t of ticks(); track t.value) {
+      <svg:g [attr.transform]="'translate(' + t.offset + ',0)'">
+        @if (tickLine()) {
+          <svg:line class="stroke-border" y1="0" y2="6" />
+        }
+        <svg:text
+          class="fill-current"
+          y="18"
+          text-anchor="middle"
+          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          {{ t.label }}
+        </svg:text>
+      </svg:g>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartAxisX, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ui-chart-axis-x]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'chart-axis chart-axis-x text-muted-foreground',
+                        '[attr.transform]': 'transform()',
+                    },
+                    template: `
+    <svg:line class="stroke-border" [attr.x1]="0" [attr.x2]="innerWidth()" y1="0" y2="0" />
+    @for (t of ticks(); track t.value) {
+      <svg:g [attr.transform]="'translate(' + t.offset + ',0)'">
+        @if (tickLine()) {
+          <svg:line class="stroke-border" y1="0" y2="6" />
+        }
+        <svg:text
+          class="fill-current"
+          y="18"
+          text-anchor="middle"
+          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          {{ t.label }}
+        </svg:text>
+      </svg:g>
+    }
+  `,
+                }]
+        }], propDecorators: { tickCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickCount", required: false }] }], tickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickLine", required: false }] }], tickFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickFormat", required: false }] }] } });
+
+/**
+ * Y axis for a cartesian chart. Reads scales from `CartesianContext`.
+ *
+ * Renders as `<svg:g>` — must be placed inside the owning chart's SVG.
+ */
+class ChartAxisY {
+    ctx = inject(CartesianContext);
+    tickCount = input(5, ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
+    tickLine = input(true, ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
+    tickFormat = input((v) => String(v), ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
+    innerHeight = this.ctx.innerHeight;
+    ticks = computed(() => {
+        const horizontal = this.ctx.orientation() === 'horizontal';
+        if (horizontal) {
+            const scale = this.ctx.categoryScale();
+            return scale ? bandTicks(scale) : [];
+        }
+        const scale = this.ctx.valueScale();
+        return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
+    }, ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartAxisY, isStandalone: true, selector: "svg:g[ui-chart-axis-y]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null }, tickLine: { classPropertyName: "tickLine", publicName: "tickLine", isSignal: true, isRequired: false, transformFunction: null }, tickFormat: { classPropertyName: "tickFormat", publicName: "tickFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-axis chart-axis-y text-muted-foreground" }, ngImport: i0, template: `
+    <svg:line class="stroke-border" x1="0" x2="0" [attr.y1]="0" [attr.y2]="innerHeight()" />
+    @for (t of ticks(); track t.value) {
+      <svg:g [attr.transform]="'translate(0,' + t.offset + ')'">
+        @if (tickLine()) {
+          <svg:line class="stroke-border" x1="-6" x2="0" />
+        }
+        <svg:text
+          class="fill-current"
+          x="-8"
+          dy="0.32em"
+          text-anchor="end"
+          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          {{ t.label }}
+        </svg:text>
+      </svg:g>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartAxisY, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ui-chart-axis-y]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'chart-axis chart-axis-y text-muted-foreground',
+                    },
+                    template: `
+    <svg:line class="stroke-border" x1="0" x2="0" [attr.y1]="0" [attr.y2]="innerHeight()" />
+    @for (t of ticks(); track t.value) {
+      <svg:g [attr.transform]="'translate(0,' + t.offset + ')'">
+        @if (tickLine()) {
+          <svg:line class="stroke-border" x1="-6" x2="0" />
+        }
+        <svg:text
+          class="fill-current"
+          x="-8"
+          dy="0.32em"
+          text-anchor="end"
+          style="font-size: var(--text-xs); font-family: var(--font-sans)">
+          {{ t.label }}
+        </svg:text>
+      </svg:g>
+    }
+  `,
+                }]
+        }], propDecorators: { tickCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickCount", required: false }] }], tickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickLine", required: false }] }], tickFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickFormat", required: false }] }] } });
+
+/**
+ * Horizontal / vertical grid lines for the cartesian plotting area.
+ *
+ * Reads tick positions from `CartesianContext.valueScale`. Direction of the
+ * grid lines follows `orientation`:
+ *  - vertical   → horizontal grid lines (one per y-tick)
+ *  - horizontal → vertical grid lines (one per x-tick)
+ */
+class ChartGrid {
+    ctx = inject(CartesianContext);
+    tickCount = input(5, ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
+    ticks = computed(() => {
+        const scale = this.ctx.valueScale();
+        return scale ? linearTicks(scale, this.tickCount()) : [];
+    }, ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    line = (offset) => {
+        if (this.ctx.orientation() === 'vertical') {
+            return { x1: 0, x2: this.ctx.innerWidth(), y1: offset, y2: offset };
+        }
+        return { x1: offset, x2: offset, y1: 0, y2: this.ctx.innerHeight() };
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartGrid, isStandalone: true, selector: "svg:g[ui-chart-grid]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-grid text-border" }, ngImport: i0, template: `
+    @for (t of ticks(); track t.value) {
+      <svg:line
+        class="stroke-border"
+        stroke-dasharray="3 3"
+        [attr.x1]="line(t.offset).x1"
+        [attr.x2]="line(t.offset).x2"
+        [attr.y1]="line(t.offset).y1"
+        [attr.y2]="line(t.offset).y2" />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ui-chart-grid]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'chart-grid text-border',
+                    },
+                    template: `
+    @for (t of ticks(); track t.value) {
+      <svg:line
+        class="stroke-border"
+        stroke-dasharray="3 3"
+        [attr.x1]="line(t.offset).x1"
+        [attr.x2]="line(t.offset).x2"
+        [attr.y1]="line(t.offset).y1"
+        [attr.y2]="line(t.offset).y2" />
+    }
+  `,
+                }]
+        }], propDecorators: { tickCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickCount", required: false }] }] } });
+
+/**
+ * Crosshair primitive — a line drawn through the currently active data point
+ * perpendicular to the categorical axis. Reads `activePoint` from
+ * `ChartContext` and the scales from `CartesianContext`.
+ *
+ * Place inside a cartesian chart's SVG inner group.
+ */
+class ChartCrosshair {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    line = computed(() => {
+        const active = this.root.activePoint();
+        const scale = this.cart.categoryScale();
+        const categories = this.cart.categories();
+        if (!active || !scale || active.index < 0 || active.index >= categories.length) {
+            return null;
+        }
+        const base = scale(categories[active.index]) ?? 0;
+        const pos = base + scale.bandwidth() / 2;
+        if (this.cart.orientation() === 'vertical') {
+            return { x1: pos, x2: pos, y1: 0, y2: this.cart.innerHeight() };
+        }
+        return { x1: 0, x2: this.cart.innerWidth(), y1: pos, y2: pos };
+    }, ...(ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartCrosshair, isStandalone: true, selector: "svg:g[ui-chart-crosshair]", host: { classAttribute: "chart-crosshair" }, ngImport: i0, template: `
+    @if (line(); as l) {
+      <svg:line
+        class="stroke-border"
+        stroke-dasharray="3 3"
+        [attr.x1]="l.x1"
+        [attr.x2]="l.x2"
+        [attr.y1]="l.y1"
+        [attr.y2]="l.y2" />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartCrosshair, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ui-chart-crosshair]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'chart-crosshair' },
+                    template: `
+    @if (line(); as l) {
+      <svg:line
+        class="stroke-border"
+        stroke-dasharray="3 3"
+        [attr.x1]="l.x1"
+        [attr.x2]="l.x2"
+        [attr.y1]="l.y1"
+        [attr.y2]="l.y2" />
+    }
+  `,
+                }]
+        }] });
+
+class CategoricalViewportContext {
+    dataCount = signal(0, ...(ngDevMode ? [{ debugName: "dataCount" }] : /* istanbul ignore next */ []));
+    brushRange = signal(null, ...(ngDevMode ? [{ debugName: "brushRange" }] : /* istanbul ignore next */ []));
+    zoomRange = signal(null, ...(ngDevMode ? [{ debugName: "zoomRange" }] : /* istanbul ignore next */ []));
+    hasZoom = computed(() => {
+        const range = this.zoomRange();
+        const count = this.dataCount();
+        return !!range && count > 0 && (range.startIndex > 0 || range.endIndex < count - 1);
+    }, ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    resetZoom() {
+        this.brushRange.set(null);
+        this.zoomRange.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CategoricalViewportContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CategoricalViewportContext, decorators: [{
+            type: Injectable
+        }] });
+
+class ScatterViewportContext {
+    innerWidth = signal(0, ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = signal(0, ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    fullXDomain = signal(null, ...(ngDevMode ? [{ debugName: "fullXDomain" }] : /* istanbul ignore next */ []));
+    fullYDomain = signal(null, ...(ngDevMode ? [{ debugName: "fullYDomain" }] : /* istanbul ignore next */ []));
+    zoomXDomain = signal(null, ...(ngDevMode ? [{ debugName: "zoomXDomain" }] : /* istanbul ignore next */ []));
+    zoomYDomain = signal(null, ...(ngDevMode ? [{ debugName: "zoomYDomain" }] : /* istanbul ignore next */ []));
+    xScale = signal(null, ...(ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []));
+    yScale = signal(null, ...(ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []));
+    hasZoom = computed(() => this.zoomXDomain() !== null || this.zoomYDomain() !== null, ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    resetZoom() {
+        this.zoomXDomain.set(null);
+        this.zoomYDomain.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScatterViewportContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScatterViewportContext, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Given a pointer event's local (x, y) relative to the chart's inner group,
+ * resolve the nearest category index along the categorical axis.
+ *
+ * @returns index into `ctx.categories()` (or −1 if no scale / no data).
+ */
+function nearestCategoryIndex(ctx, localX, localY) {
+    const scale = ctx.categoryScale();
+    const categories = ctx.categories();
+    if (!scale || categories.length === 0)
+        return -1;
+    const isVertical = ctx.orientation() === 'vertical';
+    const pointerAlong = isVertical ? localX : localY;
+    const bandwidth = scale.bandwidth();
+    // scale.step() is only defined for band scales; fall back to bandwidth.
+    const step = scale.step?.() ?? bandwidth;
+    let bestIndex = -1;
+    let bestDelta = Infinity;
+    for (let i = 0; i < categories.length; i++) {
+        const base = scale(categories[i]) ?? 0;
+        const center = base + bandwidth / 2;
+        const delta = Math.abs(pointerAlong - center);
+        if (delta < bestDelta) {
+            bestDelta = delta;
+            bestIndex = i;
+        }
+    }
+    // Ignore clicks far outside any band (> 1 step away).
+    if (bestDelta > step) {
+        return -1;
+    }
+    return bestIndex;
+}
+/** Resolve the client-space center point of a focused or clicked SVG/HTML element. */
+function elementClientCenter(target) {
+    const el = target;
+    if (!el || typeof el.getBoundingClientRect !== 'function') {
+        return null;
+    }
+    const rect = el.getBoundingClientRect();
+    return {
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2,
+    };
+}
+
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function sameDomain(a, b) {
+    return Math.abs(a[0] - b[0]) < 1e-9 && Math.abs(a[1] - b[1]) < 1e-9;
+}
+class ChartBrush {
+    hitbox = viewChild.required('hitbox');
+    cart = inject(CartesianContext, { optional: true });
+    categorical = inject(CategoricalViewportContext, { optional: true });
+    scatter = inject(ScatterViewportContext, { optional: true });
+    mode = signal(null, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    activePointerId = signal(null, ...(ngDevMode ? [{ debugName: "activePointerId" }] : /* istanbul ignore next */ []));
+    categoryStartIndex = signal(null, ...(ngDevMode ? [{ debugName: "categoryStartIndex" }] : /* istanbul ignore next */ []));
+    categoryPanStart = signal(null, ...(ngDevMode ? [{ debugName: "categoryPanStart" }] : /* istanbul ignore next */ []));
+    scatterBrush = signal(null, ...(ngDevMode ? [{ debugName: "scatterBrush" }] : /* istanbul ignore next */ []));
+    scatterPan = signal(null, ...(ngDevMode ? [{ debugName: "scatterPan" }] : /* istanbul ignore next */ []));
+    width = computed(() => this.scatter?.innerWidth() ?? this.cart?.innerWidth() ?? 0, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = computed(() => this.scatter?.innerHeight() ?? this.cart?.innerHeight() ?? 0, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    categoryPreview = computed(() => {
+        const cart = this.cart;
+        const viewport = this.categorical;
+        const range = viewport?.brushRange();
+        const scale = cart?.categoryScale();
+        const categories = cart?.categories() ?? [];
+        if (!cart || !viewport || !range || !scale || categories.length === 0) {
+            return null;
+        }
+        const visibleStart = viewport.zoomRange()?.startIndex ?? 0;
+        const startVisible = range.startIndex - visibleStart;
+        const endVisible = range.endIndex - visibleStart;
+        if (startVisible < 0 || endVisible >= categories.length) {
+            return null;
+        }
+        const first = scale(categories[startVisible]) ?? 0;
+        const last = (scale(categories[endVisible]) ?? 0) + scale.bandwidth();
+        if (cart.orientation() === 'vertical') {
+            return { x: Math.min(first, last), y: 0, width: Math.abs(last - first), height: cart.innerHeight() };
+        }
+        return { x: 0, y: Math.min(first, last), width: cart.innerWidth(), height: Math.abs(last - first) };
+    }, ...(ngDevMode ? [{ debugName: "categoryPreview" }] : /* istanbul ignore next */ []));
+    scatterPreviewRect = computed(() => {
+        const preview = this.scatterBrush();
+        if (!preview) {
+            return null;
+        }
+        return {
+            x: Math.min(preview.start.x, preview.current.x),
+            y: Math.min(preview.start.y, preview.current.y),
+            width: Math.abs(preview.current.x - preview.start.x),
+            height: Math.abs(preview.current.y - preview.start.y),
+        };
+    }, ...(ngDevMode ? [{ debugName: "scatterPreviewRect" }] : /* istanbul ignore next */ []));
+    onPointerDown(event) {
+        if (this.activePointerId() != null) {
+            return;
+        }
+        const local = this.localPoint(event);
+        if (!local) {
+            return;
+        }
+        if (this.scatter) {
+            if (!this.scatter.fullXDomain() || !this.scatter.fullYDomain()) {
+                return;
+            }
+            event.preventDefault();
+            this.activePointerId.set(event.pointerId);
+            this.hitbox().nativeElement.setPointerCapture(event.pointerId);
+            this.onScatterPointerDown(event, local);
+            return;
+        }
+        if (!this.cart || !this.categorical) {
+            return;
+        }
+        const index = nearestCategoryIndex({
+            categoryScale: this.cart.categoryScale,
+            categories: this.cart.categories,
+            orientation: this.cart.orientation,
+        }, local.x, local.y);
+        if (index < 0) {
+            return;
+        }
+        event.preventDefault();
+        this.activePointerId.set(event.pointerId);
+        this.hitbox().nativeElement.setPointerCapture(event.pointerId);
+        const visibleStart = this.categorical.zoomRange()?.startIndex ?? 0;
+        const absoluteIndex = visibleStart + index;
+        if (event.pointerType === 'touch' && this.categorical.hasZoom()) {
+            this.mode.set('category-pan');
+            this.categoryPanStart.set({ coord: this.pointerAxis(local), range: this.categorical.zoomRange() });
+            return;
+        }
+        this.mode.set('category-brush');
+        this.categoryStartIndex.set(absoluteIndex);
+        this.categorical.brushRange.set({ startIndex: absoluteIndex, endIndex: absoluteIndex });
+    }
+    onPointerMove(event) {
+        if (this.activePointerId() !== event.pointerId) {
+            return;
+        }
+        const local = this.localPoint(event);
+        if (!local) {
+            return;
+        }
+        if (this.mode() === 'category-brush' && this.cart && this.categorical) {
+            const startIndex = this.categoryStartIndex();
+            if (startIndex == null) {
+                return;
+            }
+            const index = nearestCategoryIndex({
+                categoryScale: this.cart.categoryScale,
+                categories: this.cart.categories,
+                orientation: this.cart.orientation,
+            }, local.x, local.y);
+            if (index < 0) {
+                return;
+            }
+            const visibleStart = this.categorical.zoomRange()?.startIndex ?? 0;
+            this.categorical.brushRange.set(normalizeIndexRange(startIndex, visibleStart + index, this.categorical.dataCount()));
+            return;
+        }
+        if (this.mode() === 'category-pan' && this.cart && this.categorical) {
+            const pan = this.categoryPanStart();
+            if (!pan) {
+                return;
+            }
+            const scale = this.cart.categoryScale();
+            const step = scale?.step?.() ?? scale?.bandwidth() ?? 0;
+            if (step <= 0) {
+                return;
+            }
+            const deltaSteps = Math.round((pan.coord - this.pointerAxis(local)) / step);
+            this.categorical.zoomRange.set(panIndexRange(pan.range, this.categorical.dataCount(), deltaSteps));
+            return;
+        }
+        if (this.mode() === 'scatter-brush') {
+            const preview = this.scatterBrush();
+            if (!preview) {
+                return;
+            }
+            this.scatterBrush.set({ start: preview.start, current: local });
+            return;
+        }
+        if (this.mode() === 'scatter-pan' && this.scatter) {
+            const pan = this.scatterPan();
+            const xScale = this.scatter.xScale();
+            const yScale = this.scatter.yScale();
+            const fullX = this.scatter.fullXDomain();
+            const fullY = this.scatter.fullYDomain();
+            if (!pan || !xScale || !yScale || !fullX || !fullY) {
+                return;
+            }
+            const deltaX = xScale.invert(pan.start.x) - xScale.invert(local.x);
+            const deltaY = yScale.invert(pan.start.y) - yScale.invert(local.y);
+            this.scatter.zoomXDomain.set(panNumericDomain(pan.xDomain, fullX, deltaX));
+            this.scatter.zoomYDomain.set(panNumericDomain(pan.yDomain, fullY, deltaY));
+        }
+    }
+    onPointerUp(event) {
+        if (event && this.activePointerId() !== event.pointerId) {
+            return;
+        }
+        if (this.mode() === 'category-brush' && this.categorical) {
+            const range = this.categorical.brushRange();
+            if (range && indexRangeSize(range, this.categorical.dataCount()) > 1) {
+                this.categorical.zoomRange.set(range);
+            }
+            this.categorical.brushRange.set(null);
+        }
+        if (this.mode() === 'scatter-brush' && this.scatter) {
+            const preview = this.scatterBrush();
+            const xScale = this.scatter.xScale();
+            const yScale = this.scatter.yScale();
+            const fullX = this.scatter.fullXDomain();
+            const fullY = this.scatter.fullYDomain();
+            if (preview && xScale && yScale && fullX && fullY) {
+                const width = Math.abs(preview.current.x - preview.start.x);
+                const height = Math.abs(preview.current.y - preview.start.y);
+                if (width >= 6 && height >= 6) {
+                    const nextX = normalizeNumericDomain(xScale.invert(preview.start.x), xScale.invert(preview.current.x));
+                    const nextY = normalizeNumericDomain(yScale.invert(preview.start.y), yScale.invert(preview.current.y));
+                    this.scatter.zoomXDomain.set(sameDomain(nextX, fullX) ? null : nextX);
+                    this.scatter.zoomYDomain.set(sameDomain(nextY, fullY) ? null : nextY);
+                }
+            }
+            this.scatterBrush.set(null);
+        }
+        this.mode.set(null);
+        this.categoryStartIndex.set(null);
+        this.categoryPanStart.set(null);
+        this.scatterPan.set(null);
+        if (event && this.hitbox().nativeElement.hasPointerCapture(event.pointerId)) {
+            this.hitbox().nativeElement.releasePointerCapture(event.pointerId);
+        }
+        this.activePointerId.set(null);
+    }
+    onPointerCancel(event) {
+        if (this.activePointerId() !== event.pointerId) {
+            return;
+        }
+        if (this.hitbox().nativeElement.hasPointerCapture(event.pointerId)) {
+            this.hitbox().nativeElement.releasePointerCapture(event.pointerId);
+        }
+        this.mode.set(null);
+        this.categorical?.brushRange.set(null);
+        this.scatterBrush.set(null);
+        this.categoryStartIndex.set(null);
+        this.categoryPanStart.set(null);
+        this.scatterPan.set(null);
+        this.activePointerId.set(null);
+    }
+    onWheel(event) {
+        const local = this.localPoint(event);
+        if (!local) {
+            return;
+        }
+        event.preventDefault();
+        if (this.scatter) {
+            const xScale = this.scatter.xScale();
+            const yScale = this.scatter.yScale();
+            const fullX = this.scatter.fullXDomain();
+            const fullY = this.scatter.fullYDomain();
+            if (!xScale || !yScale || !fullX || !fullY) {
+                return;
+            }
+            const factor = event.deltaY < 0 ? 0.8 : 1.25;
+            const currentX = this.scatter.zoomXDomain() ?? fullX;
+            const currentY = this.scatter.zoomYDomain() ?? fullY;
+            const nextX = zoomNumericDomain(currentX, fullX, xScale.invert(local.x), factor);
+            const nextY = zoomNumericDomain(currentY, fullY, yScale.invert(local.y), factor);
+            this.scatter.zoomXDomain.set(sameDomain(nextX, fullX) ? null : nextX);
+            this.scatter.zoomYDomain.set(sameDomain(nextY, fullY) ? null : nextY);
+            return;
+        }
+        if (!this.cart || !this.categorical) {
+            return;
+        }
+        const visibleIndex = nearestCategoryIndex({
+            categoryScale: this.cart.categoryScale,
+            categories: this.cart.categories,
+            orientation: this.cart.orientation,
+        }, local.x, local.y);
+        if (visibleIndex < 0) {
+            return;
+        }
+        const anchor = (this.categorical.zoomRange()?.startIndex ?? 0) + visibleIndex;
+        const factor = event.deltaY < 0 ? 0.75 : 1.25;
+        this.categorical.zoomRange.set(zoomIndexRange(this.categorical.zoomRange(), this.categorical.dataCount(), anchor, factor));
+        this.categorical.brushRange.set(null);
+    }
+    resetZoom() {
+        this.categorical?.resetZoom();
+        this.scatter?.resetZoom();
+        this.scatterBrush.set(null);
+    }
+    onScatterPointerDown(event, local) {
+        const fullX = this.scatter?.fullXDomain();
+        const fullY = this.scatter?.fullYDomain();
+        if (!this.scatter || !fullX || !fullY) {
+            return;
+        }
+        if (event.pointerType === 'touch' && this.scatter.hasZoom()) {
+            this.mode.set('scatter-pan');
+            this.scatterPan.set({
+                start: local,
+                xDomain: this.scatter.zoomXDomain() ?? fullX,
+                yDomain: this.scatter.zoomYDomain() ?? fullY,
+            });
+            return;
+        }
+        this.mode.set('scatter-brush');
+        this.scatterBrush.set({ start: local, current: local });
+    }
+    localPoint(event) {
+        const hitbox = this.hitbox()?.nativeElement;
+        const width = this.width();
+        const height = this.height();
+        if (!hitbox || width <= 0 || height <= 0) {
+            return null;
+        }
+        const rect = hitbox.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+            return null;
+        }
+        return {
+            x: clamp(((event.clientX - rect.left) / rect.width) * width, 0, width),
+            y: clamp(((event.clientY - rect.top) / rect.height) * height, 0, height),
+        };
+    }
+    pointerAxis(local) {
+        return this.cart?.orientation() === 'horizontal' ? local.y : local.x;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartBrush, isStandalone: true, selector: "svg:g[ui-chart-brush]", host: { listeners: { "window:pointermove": "onPointerMove($event)", "window:pointerup": "onPointerUp($event)", "window:pointercancel": "onPointerCancel($event)" }, classAttribute: "chart-brush" }, viewQueries: [{ propertyName: "hitbox", first: true, predicate: ["hitbox"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <svg:rect
+      #hitbox
+      class="fill-transparent touch-none"
+      x="0"
+      y="0"
+      [attr.width]="width()"
+      [attr.height]="height()"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerCancel($event)"
+      (wheel)="onWheel($event)"
+      (dblclick)="resetZoom()" />
+
+    @if (categoryPreview(); as rect) {
+      <svg:rect
+        class="fill-foreground/10 stroke-foreground/30"
+        [attr.x]="rect.x"
+        [attr.y]="rect.y"
+        [attr.width]="rect.width"
+        [attr.height]="rect.height"
+        stroke-dasharray="4 3" />
+    }
+
+    @if (scatterPreviewRect(); as rect) {
+      <svg:rect
+        class="fill-foreground/10 stroke-foreground/30"
+        [attr.x]="rect.x"
+        [attr.y]="rect.y"
+        [attr.width]="rect.width"
+        [attr.height]="rect.height"
+        stroke-dasharray="4 3" />
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartBrush, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ui-chart-brush]',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'chart-brush',
+                        '(window:pointermove)': 'onPointerMove($event)',
+                        '(window:pointerup)': 'onPointerUp($event)',
+                        '(window:pointercancel)': 'onPointerCancel($event)',
+                    },
+                    template: `
+    <svg:rect
+      #hitbox
+      class="fill-transparent touch-none"
+      x="0"
+      y="0"
+      [attr.width]="width()"
+      [attr.height]="height()"
+      (pointerdown)="onPointerDown($event)"
+      (pointermove)="onPointerMove($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerCancel($event)"
+      (wheel)="onWheel($event)"
+      (dblclick)="resetZoom()" />
+
+    @if (categoryPreview(); as rect) {
+      <svg:rect
+        class="fill-foreground/10 stroke-foreground/30"
+        [attr.x]="rect.x"
+        [attr.y]="rect.y"
+        [attr.width]="rect.width"
+        [attr.height]="rect.height"
+        stroke-dasharray="4 3" />
+    }
+
+    @if (scatterPreviewRect(); as rect) {
+      <svg:rect
+        class="fill-foreground/10 stroke-foreground/30"
+        [attr.x]="rect.x"
+        [attr.y]="rect.y"
+        [attr.width]="rect.width"
+        [attr.height]="rect.height"
+        stroke-dasharray="4 3" />
+    }
+  `,
+                }]
+        }], propDecorators: { hitbox: [{ type: i0.ViewChild, args: ['hitbox', { isSignal: true }] }] } });
+
+/**
+ * Attach to a chart's `<svg:svg>` to publish pointer-driven active-point
+ * state into the surrounding `ChartContext`.
+ *
+ * Computes the local (x, y) of the pointer relative to the inner plotting
+ * area, resolves the nearest category, and updates
+ * `ChartContext.activePoint`. Clears it on `pointerleave`.
+ */
+class ChartPointerTracker {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    viewport = inject(CategoricalViewportContext, { optional: true });
+    onMove(event) {
+        const target = event.currentTarget;
+        if (!target)
+            return;
+        const rect = target.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0)
+            return;
+        const { width, height } = this.root.dimensions();
+        // Map client coords → viewBox coords (SVG uses `0 0 width height`,
+        // preserveAspectRatio="none" so axes scale independently).
+        const scaleX = width / rect.width;
+        const scaleY = height / rect.height;
+        const viewX = (event.clientX - rect.left) * scaleX;
+        const viewY = (event.clientY - rect.top) * scaleY;
+        const margin = this.cart.margin();
+        const localX = viewX - margin.left;
+        const localY = viewY - margin.top;
+        const index = nearestCategoryIndex({
+            categoryScale: this.cart.categoryScale,
+            categories: this.cart.categories,
+            orientation: this.cart.orientation,
+        }, localX, localY);
+        if (index < 0) {
+            this.root.activePoint.set(null);
+            return;
+        }
+        this.root.activePoint.set({
+            index,
+            datumIndex: (this.viewport?.zoomRange()?.startIndex ?? 0) + index,
+            clientX: event.clientX,
+            clientY: event.clientY,
+        });
+    }
+    onLeave() {
+        this.root.activePoint.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[uiChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartPointerTracker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg:svg[uiChartPointerTracker]',
+                    host: {
+                        '(pointermove)': 'onMove($event)',
+                        '(pointerleave)': 'onLeave()',
+                    },
+                }]
+        }] });
+
+/** Locate the chart container DOM in order to position the tooltip. */
+function containerRect(el) {
+    // Climb to the nearest `[data-chart]` (the ChartContainer host).
+    let node = el;
+    while (node && !node.hasAttribute('data-chart')) {
+        node = node.parentElement;
+    }
+    return node?.getBoundingClientRect() ?? null;
+}
+/**
+ * Tooltip overlay — renders the default tooltip card (or a user-supplied
+ * template) anchored to the currently active data point.
+ *
+ * Shadcn-compatible knobs:
+ * - `indicator="line"` / `"none"` / `"dashed"` — swap the row glyph
+ * - `hideLabel` — drop the header row
+ * - `label="Activities"` — override the header text
+ * - `labelKey="activities"` — resolve the header from `config[labelKey].label`
+ * - `labelFormatter` — transform the header (e.g. ISO date → long date)
+ * - `formatter` — format per-row values (e.g. `"380 kcal"`)
+ * - `valueKey` — for pie/radial/radar, read row value from a single field
+ * - Icons are picked up automatically from `config[key].icon`.
+ */
+class ChartTooltip {
+    root = inject(ChartContext);
+    host = inject((ElementRef));
+    /** Data key on each datum whose value is the category label (x-axis). */
+    xKey = input(null, ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    /** Data source (optional — if omitted tooltip reads from chart data via activePoint.datumIndex). */
+    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional key for per-datum value lookup (pie / radial / radar datasets
+     * store values on a single field like `visitors` instead of one field per
+     * series). When set and `activePoint.seriesKey` is active, the tooltip row
+     * reads `datum[valueKey]` for its value.
+     */
+    valueKey = input(null, ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    /** Indicator variant next to each row. Default `'dot'`. */
+    indicator = input('dot', ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+    /** Hide the header label entirely. */
+    hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    /** Override the header label with a fixed string. Takes precedence over `labelKey`. */
+    label = input(null, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolve the header label from `config[labelKey].label`. Useful when the
+     * header should come from a config entry rather than the datum itself
+     * (shadcn's "Custom label" variant).
+     */
+    labelKey = input(null, ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    /** Transform the final header string (e.g. ISO date → long date). */
+    labelFormatter = input(null, ...(ngDevMode ? [{ debugName: "labelFormatter" }] : /* istanbul ignore next */ []));
+    /** Format each row's value (return string — HTML is not interpreted). */
+    formatter = input(null, ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
+    customTpl = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "customTpl" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.root.activePoint() !== null, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    payload = computed(() => {
+        const active = this.root.activePoint();
+        const rows = this.data();
+        if (!active || !rows)
+            return null;
+        const dataIndex = active.datumIndex != null && active.datumIndex < rows.length ? active.datumIndex : active.index;
+        if (dataIndex < 0 || dataIndex >= rows.length)
+            return null;
+        const cfg = this.root.config();
+        const visibleKeys = this.root.visibleSeriesKeys();
+        const datum = rows[dataIndex];
+        const xKey = this.xKey();
+        const category = xKey && xKey in datum ? String(datum[xKey]) : String(active.index);
+        // When the active point targets a single series (pie/radial/radar hover),
+        // collapse the tooltip to just that row.
+        const activeSeriesKey = active.seriesKey && visibleKeys.includes(active.seriesKey) ? active.seriesKey : null;
+        const keys = activeSeriesKey ? [activeSeriesKey] : visibleKeys;
+        const valueKey = this.valueKey();
+        const tooltipRows = keys.map((k) => {
+            // For single-slice hover on pie/radial/radar the value lives on a
+            // shared `valueKey` field, not on a per-series column.
+            const rawValue = valueKey != null && activeSeriesKey === k ? datum[valueKey] : datum[k];
+            return {
+                seriesKey: k,
+                label: cfg[k]?.label ?? k,
+                value: rawValue,
+                color: seriesColorVar(k),
+                icon: cfg[k]?.icon,
+            };
+        });
+        return { category, datum, rows: tooltipRows };
+    }, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
+    /** Resolve the header string honoring `label`, `labelKey`, then `labelFormatter`. */
+    headerText(p) {
+        if (this.hideLabel())
+            return null;
+        const override = this.label();
+        const labelKey = this.labelKey();
+        const cfg = this.root.config();
+        const fromKey = labelKey ? (cfg[labelKey]?.label ?? labelKey) : null;
+        const raw = override ?? fromKey ?? p.category;
+        const fmt = this.labelFormatter();
+        return fmt ? fmt(raw, p) : raw;
+    }
+    /** Apply per-row value formatter (or stringify). */
+    formatRow(row, p) {
+        const fmt = this.formatter();
+        if (fmt)
+            return fmt(row.value, row, p);
+        return row.value == null ? '' : String(row.value);
+    }
+    position = computed(() => {
+        const active = this.root.activePoint();
+        if (!active || active.clientX == null || active.clientY == null) {
+            return { x: 0, y: 0 };
+        }
+        // Map client coords → offset within the chart container (the element
+        // marked with `data-chart`, which is our positioning ancestor).
+        const rect = containerRect(this.host.nativeElement);
+        if (!rect)
+            return { x: 0, y: 0 };
+        const tooltip = this.host.nativeElement.querySelector('[role="tooltip"]');
+        const tooltipWidth = tooltip?.offsetWidth ?? 128;
+        const tooltipHeight = tooltip?.offsetHeight ?? 0;
+        const padding = 8;
+        const minX = padding + tooltipWidth / 2;
+        const maxX = Math.max(minX, rect.width - padding - tooltipWidth / 2);
+        const x = Math.min(maxX, Math.max(minX, active.clientX - rect.left));
+        // Y is the tooltip's bottom edge because the card is translated upward.
+        const minY = padding + tooltipHeight;
+        const y = Math.max(minY, active.clientY - rect.top - padding);
+        return { x, y };
+    }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartTooltip, isStandalone: true, selector: "ui-chart-tooltip", inputs: { xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "!visible()" }, classAttribute: "pointer-events-none absolute inset-0 z-10" }, queries: [{ propertyName: "customTpl", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (payload(); as p) {
+      <div
+        role="tooltip"
+        class="pointer-events-none absolute grid min-w-32 max-w-72 -translate-x-1/2 -translate-y-full gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs shadow-md"
+        [style.left.px]="position().x"
+        [style.top.px]="position().y">
+        @if (customTpl(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }" />
+        } @else {
+          @if (!hideLabel() && headerText(p); as header) {
+            <div class="font-medium">{{ header }}</div>
+          }
+          <ul class="grid gap-1.5">
+            @for (row of p.rows; track row.seriesKey) {
+              <li class="flex w-full flex-wrap items-stretch gap-2">
+                <span class="flex flex-1 items-center gap-1.5">
+                  @switch (indicator()) {
+                    @case ('dot') {
+                      <span
+                        class="h-2.5 w-2.5 shrink-0 rounded-sm"
+                        [style.background]="row.color"
+                        [style.borderColor]="row.color"></span>
+                    }
+                    @case ('line') {
+                      <span class="h-full min-h-4 w-1 shrink-0 rounded-sm" [style.background]="row.color"></span>
+                    }
+                    @case ('dashed') {
+                      <span
+                        class="h-0 w-3 shrink-0 self-center border-t-2 border-dashed"
+                        [style.borderColor]="row.color"></span>
+                    }
+                  }
+                  @if (row.icon; as icon) {
+                    <span class="mr-1 inline-flex items-center text-muted-foreground">
+                      <ng-container *ngComponentOutlet="icon" />
+                    </span>
+                  }
+                  <span class="text-muted-foreground">{{ row.label }}</span>
+                </span>
+                <span class="font-mono font-medium tabular-nums text-foreground">
+                  {{ formatRow(row, p) }}
+                </span>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    }
+
+    <!-- Live region — announces category changes to AT. -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      @if (payload(); as p) {
+        {{ p.category }}
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartTooltip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart-tooltip',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet, NgComponentOutlet],
+                    host: {
+                        class: 'pointer-events-none absolute inset-0 z-10',
+                        '[attr.aria-hidden]': '!visible()',
+                    },
+                    template: `
+    @if (payload(); as p) {
+      <div
+        role="tooltip"
+        class="pointer-events-none absolute grid min-w-32 max-w-72 -translate-x-1/2 -translate-y-full gap-1.5 rounded-lg border border-border/60 bg-background px-3 py-1.5 text-xs shadow-md"
+        [style.left.px]="position().x"
+        [style.top.px]="position().y">
+        @if (customTpl(); as tpl) {
+          <ng-container *ngTemplateOutlet="tpl; context: { $implicit: p }" />
+        } @else {
+          @if (!hideLabel() && headerText(p); as header) {
+            <div class="font-medium">{{ header }}</div>
+          }
+          <ul class="grid gap-1.5">
+            @for (row of p.rows; track row.seriesKey) {
+              <li class="flex w-full flex-wrap items-stretch gap-2">
+                <span class="flex flex-1 items-center gap-1.5">
+                  @switch (indicator()) {
+                    @case ('dot') {
+                      <span
+                        class="h-2.5 w-2.5 shrink-0 rounded-sm"
+                        [style.background]="row.color"
+                        [style.borderColor]="row.color"></span>
+                    }
+                    @case ('line') {
+                      <span class="h-full min-h-4 w-1 shrink-0 rounded-sm" [style.background]="row.color"></span>
+                    }
+                    @case ('dashed') {
+                      <span
+                        class="h-0 w-3 shrink-0 self-center border-t-2 border-dashed"
+                        [style.borderColor]="row.color"></span>
+                    }
+                  }
+                  @if (row.icon; as icon) {
+                    <span class="mr-1 inline-flex items-center text-muted-foreground">
+                      <ng-container *ngComponentOutlet="icon" />
+                    </span>
+                  }
+                  <span class="text-muted-foreground">{{ row.label }}</span>
+                </span>
+                <span class="font-mono font-medium tabular-nums text-foreground">
+                  {{ formatRow(row, p) }}
+                </span>
+              </li>
+            }
+          </ul>
+        }
+      </div>
+    }
+
+    <!-- Live region — announces category changes to AT. -->
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      @if (payload(); as p) {
+        {{ p.category }}
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], labelFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormatter", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], customTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * Legend — renders a list of series swatches. Clicking an item toggles
+ * visibility via `ChartContext.toggleSeries`.
+ *
+ * Place as a child of `<ui-chart-container>`:
+ * ```html
+ * <ui-chart-container [config]="cfg">
+ *   <ui-bar-chart ... />
+ *   <ui-chart-legend />
+ * </ui-chart-container>
+ * ```
+ */
+class ChartLegend {
+    root = inject(ChartContext);
+    items = computed(() => {
+        const cfg = this.root.config();
+        const hidden = this.root.hiddenSeries();
+        return this.root.seriesKeys().map((key) => ({
+            seriesKey: key,
+            label: cfg[key]?.label ?? key,
+            color: seriesColorVar(key),
+            hidden: hidden.has(key),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    toggle(key) {
+        this.root.toggleSeries(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartLegend, isStandalone: true, selector: "ui-chart-legend", host: { classAttribute: "block pt-3" }, ngImport: i0, template: `
+    <ul class="flex flex-wrap items-center justify-center gap-3 text-xs" aria-label="Toggle chart series visibility">
+      @for (item of items(); track item.seriesKey) {
+        <li>
+          <button
+            type="button"
+            class="inline-flex min-h-11 items-center gap-2 rounded-md px-2.5 py-1.5 outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            [class.opacity-50]="item.hidden"
+            [attr.aria-pressed]="!item.hidden"
+            [attr.aria-label]="(item.hidden ? 'Show ' : 'Hide ') + item.label"
+            (click)="toggle(item.seriesKey)">
+            <span class="inline-block h-2.5 w-2.5 rounded-sm" [style.background]="item.color"></span>
+            <span class="text-muted-foreground">{{ item.label }}</span>
+          </button>
+        </li>
+      }
+    </ul>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartLegend, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart-legend',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block pt-3' },
+                    template: `
+    <ul class="flex flex-wrap items-center justify-center gap-3 text-xs" aria-label="Toggle chart series visibility">
+      @for (item of items(); track item.seriesKey) {
+        <li>
+          <button
+            type="button"
+            class="inline-flex min-h-11 items-center gap-2 rounded-md px-2.5 py-1.5 outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            [class.opacity-50]="item.hidden"
+            [attr.aria-pressed]="!item.hidden"
+            [attr.aria-label]="(item.hidden ? 'Show ' : 'Hide ') + item.label"
+            (click)="toggle(item.seriesKey)">
+            <span class="inline-block h-2.5 w-2.5 rounded-sm" [style.background]="item.color"></span>
+            <span class="text-muted-foreground">{{ item.label }}</span>
+          </button>
+        </li>
+      }
+    </ul>
+  `,
+                }]
+        }] });
+
+function formatNumber(value) {
+    return Math.abs(value) >= 10 ? value.toFixed(0) : value.toFixed(1);
+}
+class ChartZoomControls {
+    categorical = inject(CategoricalViewportContext, { optional: true });
+    scatter = inject(ScatterViewportContext, { optional: true });
+    status = computed(() => {
+        if (this.categorical?.hasZoom()) {
+            const range = this.categorical.zoomRange();
+            const count = this.categorical.dataCount();
+            if (!range) {
+                return null;
+            }
+            return `Showing ${range.startIndex + 1}-${range.endIndex + 1} of ${count}`;
+        }
+        if (this.scatter?.hasZoom()) {
+            const xDomain = this.scatter.zoomXDomain() ?? this.scatter.fullXDomain();
+            const yDomain = this.scatter.zoomYDomain() ?? this.scatter.fullYDomain();
+            if (!xDomain || !yDomain) {
+                return null;
+            }
+            return `X ${formatNumber(xDomain[0])}-${formatNumber(xDomain[1])} · Y ${formatNumber(yDomain[0])}-${formatNumber(yDomain[1])}`;
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    hint = computed(() => {
+        if (this.scatter) {
+            return 'Drag to brush a region. Use the wheel to zoom and one-finger touch drag to pan while zoomed.';
+        }
+        return 'Drag to select a category range. Use the wheel to zoom and one-finger touch drag to pan while zoomed.';
+    }, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    resetZoom() {
+        this.categorical?.resetZoom();
+        this.scatter?.resetZoom();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChartZoomControls, isStandalone: true, selector: "ui-chart-zoom-controls", host: { classAttribute: "mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground" }, ngImport: i0, template: `
+    <p>{{ hint() }}</p>
+
+    @if (status(); as currentStatus) {
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground">
+          {{ currentStatus }}
+        </span>
+        <button
+          type="button"
+          class="inline-flex min-h-11 items-center rounded-md border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          (click)="resetZoom()">
+          Reset zoom
+        </button>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChartZoomControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-chart-zoom-controls',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground' },
+                    template: `
+    <p>{{ hint() }}</p>
+
+    @if (status(); as currentStatus) {
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="rounded-full border border-border bg-background px-2.5 py-1 font-medium text-foreground">
+          {{ currentStatus }}
+        </span>
+        <button
+          type="button"
+          class="inline-flex min-h-11 items-center rounded-md border border-border bg-background px-3 text-foreground transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+          (click)="resetZoom()">
+          Reset zoom
+        </button>
+      </div>
+    }
+  `,
+                }]
+        }] });
+
+class PieCenter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PieCenter, isStandalone: true, selector: "ui-pie-center", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PieCenter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-pie-center',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+class RadialCenter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: RadialCenter, isStandalone: true, selector: "ui-radial-center", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialCenter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-radial-center',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+/** Read a numeric value from a datum, tolerating strings. */
+function readNumber$1(datum, key) {
+    const raw = datum[key];
+    if (typeof raw === 'number' && Number.isFinite(raw)) {
+        return raw;
+    }
+    if (typeof raw === 'string') {
+        const n = Number(raw);
+        return Number.isFinite(n) ? n : 0;
+    }
+    return 0;
+}
+function resolveBarColor(datum, seriesKey, colorKey) {
+    if (!colorKey) {
+        return seriesColorVar(seriesKey);
+    }
+    const raw = datum[colorKey];
+    if (typeof raw !== 'string' || raw.length === 0) {
+        return seriesColorVar(seriesKey);
+    }
+    if (raw.startsWith('var(') ||
+        raw.startsWith('#') ||
+        raw.startsWith('rgb') ||
+        raw.startsWith('hsl') ||
+        raw.includes('(')) {
+        return raw;
+    }
+    return seriesColorVar(raw);
+}
+function isActiveBar(datum, activeKey, activeValue) {
+    if (!activeKey || activeValue === undefined) {
+        return false;
+    }
+    const value = datum[activeKey];
+    if (typeof value === 'number' && typeof activeValue === 'number') {
+        return value === activeValue;
+    }
+    return String(value ?? '') === String(activeValue);
+}
+/** Build all bar rectangles for the given config. */
+function computeBarLayout(input) {
+    const { data, xKey, seriesKeys, variant, orientation, innerWidth, innerHeight, bandPadding, groupPadding, colorKey, activeKey, activeValue, } = input;
+    const categories = data.map((d) => String(d[xKey] ?? ''));
+    const isVertical = orientation === 'vertical';
+    const categoryScale = scaleBand()
+        .domain(categories)
+        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
+        .padding(bandPadding);
+    const valueScale = scaleLinear();
+    if (variant === 'stacked' && seriesKeys.length > 0) {
+        return stackedLayout({
+            data,
+            xKey,
+            seriesKeys,
+            orientation,
+            innerWidth,
+            innerHeight,
+            categoryScale,
+            valueScale,
+            categories,
+            colorKey,
+            activeKey,
+            activeValue,
+        });
+    }
+    return groupedLayout({
+        data,
+        xKey,
+        seriesKeys,
+        orientation,
+        innerWidth,
+        innerHeight,
+        categoryScale,
+        valueScale,
+        groupPadding,
+        categories,
+        colorKey,
+        activeKey,
+        activeValue,
+    });
+}
+function groupedLayout(input) {
+    const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, groupPadding, categories, colorKey, activeKey, activeValue, } = input;
+    const isVertical = orientation === 'vertical';
+    const minValue = min(data, (d) => min(seriesKeys, (k) => readNumber$1(d, k)) ?? 0) ?? 0;
+    const maxValue = max(data, (d) => max(seriesKeys, (k) => readNumber$1(d, k)) ?? 0) ?? 0;
+    const domainMin = Math.min(0, minValue);
+    const domainMax = Math.max(0, maxValue, domainMin === 0 ? 1 : 0);
+    valueScale
+        .domain([domainMin, domainMax])
+        .nice()
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    const baseline = valueScale(0);
+    const subScale = scaleBand()
+        .domain(seriesKeys)
+        .range([0, categoryScale.bandwidth()])
+        .padding(groupPadding);
+    const bars = [];
+    data.forEach((datum, datumIndex) => {
+        const category = categories[datumIndex];
+        const bandStart = categoryScale(category) ?? 0;
+        seriesKeys.forEach((seriesKey) => {
+            const value = readNumber$1(datum, seriesKey);
+            const sub = subScale(seriesKey) ?? 0;
+            const scaledValue = valueScale(value);
+            const color = resolveBarColor(datum, seriesKey, colorKey);
+            const active = isActiveBar(datum, activeKey, activeValue);
+            const rect = isVertical
+                ? {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: bandStart + sub,
+                    y: Math.min(scaledValue, baseline),
+                    width: subScale.bandwidth(),
+                    height: Math.abs(baseline - scaledValue),
+                    color,
+                    active,
+                }
+                : {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: Math.min(scaledValue, baseline),
+                    y: bandStart + sub,
+                    width: Math.abs(baseline - scaledValue),
+                    height: subScale.bandwidth(),
+                    color,
+                    active,
+                };
+            bars.push(rect);
+        });
+    });
+    return { bars, categoryScale, valueScale, categories };
+}
+function stackedLayout(input) {
+    const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, categories, colorKey, activeKey, activeValue, } = input;
+    const isVertical = orientation === 'vertical';
+    const normalized = data.map((d) => {
+        const out = {};
+        for (const k of seriesKeys) {
+            out[k] = readNumber$1(d, k);
+        }
+        return out;
+    });
+    const series = stack().keys(seriesKeys)(normalized);
+    const maxTotal = max(series[series.length - 1] ?? [], (p) => p[1]) ?? 0;
+    valueScale
+        .domain([0, maxTotal === 0 ? 1 : maxTotal])
+        .nice()
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    const bars = [];
+    series.forEach((layer) => {
+        const seriesKey = layer.key;
+        layer.forEach((point, datumIndex) => {
+            const [lower, upper] = point;
+            const value = upper - lower;
+            const category = categories[datumIndex];
+            const bandStart = categoryScale(category) ?? 0;
+            const color = resolveBarColor(data[datumIndex], seriesKey, colorKey);
+            const active = isActiveBar(data[datumIndex], activeKey, activeValue);
+            const rect = isVertical
+                ? {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: bandStart,
+                    y: valueScale(upper),
+                    width: categoryScale.bandwidth(),
+                    height: valueScale(lower) - valueScale(upper),
+                    color,
+                    active,
+                }
+                : {
+                    key: `${datumIndex}-${seriesKey}`,
+                    seriesKey,
+                    datumIndex,
+                    category,
+                    value,
+                    x: valueScale(lower),
+                    y: bandStart,
+                    width: valueScale(upper) - valueScale(lower),
+                    height: categoryScale.bandwidth(),
+                    color,
+                    active,
+                };
+            bars.push(rect);
+        });
+    });
+    return { bars, categoryScale, valueScale, categories };
+}
+
+const DEFAULT_MARGIN$6 = { top: 8, right: 8, bottom: 24, left: 40 };
+const defaultBarValueFormatter = (value) => `${value}`;
+/**
+ * Bar chart — composable within `<ui-chart-container>`.
+ *
+ * Layout variants (via inputs):
+ * - `orientation`: `'vertical'` (default) or `'horizontal'`
+ * - `variant`:     `'grouped'`  (default) or `'stacked'`
+ */
+class BarChart {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    variant = input('grouped', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$6, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    bandPadding = input(0.2, ...(ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []));
+    groupPadding = input(0.05, ...(ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(4, ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    colorKey = input(undefined, ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
+    activeKey = input(undefined, ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    activeValue = input(undefined, ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultBarValueFormatter, ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    barClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeBarLayout({
+        data: this.data(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        variant: this.variant(),
+        orientation: this.orientation(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        bandPadding: this.bandPadding(),
+        groupPadding: this.groupPadding(),
+        colorKey: this.colorKey(),
+        activeKey: this.activeKey(),
+        activeValue: this.activeValue(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    bars = computed(() => this.layout().bars, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        const n = this.data().length;
+        return `Bar chart, ${n} categories, ${keys.length} series: ${keys.join(', ')}.`;
+    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const layout = this.layout();
+            this.cart.orientation.set(this.orientation());
+            this.cart.margin.set(this.margin());
+            this.cart.innerWidth.set(this.innerWidth());
+            this.cart.innerHeight.set(this.innerHeight());
+            this.cart.categoryScale.set(layout.categoryScale);
+            this.cart.valueScale.set(layout.valueScale);
+            this.cart.categories.set(layout.categories);
+        });
+    }
+    emitClick(bar) {
+        this.barClick.emit({
+            seriesKey: bar.seriesKey,
+            datumIndex: bar.datumIndex,
+            category: bar.category,
+            value: bar.value,
+            datum: this.data()[bar.datumIndex],
+        });
+    }
+    setActivePoint(event, bar) {
+        const center = elementClientCenter(event.currentTarget);
+        this.root.activePoint.set({
+            index: bar.datumIndex,
+            seriesKey: bar.seriesKey,
+            clientX: center?.clientX,
+            clientY: center?.clientY,
+        });
+    }
+    clearActivePoint() {
+        this.root.activePoint.set(null);
+    }
+    barOpacity(bar) {
+        return this.activeKey() && this.activeValue() !== undefined ? (bar.active ? 1 : 0.42) : 1;
+    }
+    formatValueLabel(bar) {
+        return this.valueLabelFormat()(bar.value);
+    }
+    barLabelX(bar) {
+        if (this.orientation() === 'vertical') {
+            return bar.x + bar.width / 2;
+        }
+        return bar.value >= 0 ? bar.x + bar.width + 6 : bar.x - 6;
+    }
+    barLabelY(bar) {
+        if (this.orientation() === 'vertical') {
+            return bar.value >= 0 ? bar.y - 8 : bar.y + bar.height + 10;
+        }
+        return bar.y + bar.height / 2;
+    }
+    barLabelAnchor(bar) {
+        if (this.orientation() === 'vertical') {
+            return 'middle';
+        }
+        return bar.value >= 0 ? 'start' : 'end';
+    }
+    barAriaLabel(bar) {
+        const label = this.root.config()[bar.seriesKey]?.label ?? bar.seriesKey;
+        return `${label} in ${bar.category}: ${bar.value}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BarChart, isStandalone: true, selector: "ui-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, bandPadding: { classPropertyName: "bandPadding", publicName: "bandPadding", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
+    <svg:svg
+      uiChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ui-chart-grid]" />
+        <svg:g class="chart-bars">
+          @for (bar of bars(); track bar.key) {
+            <svg:rect
+              class="chart-bar cursor-pointer outline-none transition-opacity hover:opacity-80"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.rx]="cornerRadius()"
+              [attr.ry]="cornerRadius()"
+              [attr.fill]="bar.color"
+              [attr.opacity]="barOpacity(bar)"
+              [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
+              [attr.stroke-width]="bar.active ? 1.5 : null"
+              [attr.aria-label]="barAriaLabel(bar)"
+              tabindex="0"
+              (focus)="setActivePoint($event, bar)"
+              (blur)="clearActivePoint()"
+              (click)="emitClick(bar)"
+              (keydown.enter)="emitClick(bar)"
+              (keydown.space)="emitClick(bar); $event.preventDefault()" />
+            @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
+              <svg:text
+                class="chart-bar-value pointer-events-none fill-muted-foreground text-[10px]"
+                [attr.x]="barLabelX(bar)"
+                [attr.y]="barLabelY(bar)"
+                [attr.text-anchor]="barLabelAnchor(bar)"
+                dominant-baseline="middle">
+                {{ formatValueLabel(bar) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ui-chart-axis-x]" />
+        <ng-content select="svg\\:g[ui-chart-axis-y]" />
+        <ng-content select="svg\\:g[ui-chart-crosshair]" />
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[uiChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-bar-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [CartesianContext],
+                    imports: [ChartPointerTracker],
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      uiChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ui-chart-grid]" />
+        <svg:g class="chart-bars">
+          @for (bar of bars(); track bar.key) {
+            <svg:rect
+              class="chart-bar cursor-pointer outline-none transition-opacity hover:opacity-80"
+              [attr.x]="bar.x"
+              [attr.y]="bar.y"
+              [attr.width]="bar.width"
+              [attr.height]="bar.height"
+              [attr.rx]="cornerRadius()"
+              [attr.ry]="cornerRadius()"
+              [attr.fill]="bar.color"
+              [attr.opacity]="barOpacity(bar)"
+              [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
+              [attr.stroke-width]="bar.active ? 1.5 : null"
+              [attr.aria-label]="barAriaLabel(bar)"
+              tabindex="0"
+              (focus)="setActivePoint($event, bar)"
+              (blur)="clearActivePoint()"
+              (click)="emitClick(bar)"
+              (keydown.enter)="emitClick(bar)"
+              (keydown.space)="emitClick(bar); $event.preventDefault()" />
+            @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
+              <svg:text
+                class="chart-bar-value pointer-events-none fill-muted-foreground text-[10px]"
+                [attr.x]="barLabelX(bar)"
+                [attr.y]="barLabelY(bar)"
+                [attr.text-anchor]="barLabelAnchor(bar)"
+                dominant-baseline="middle">
+                {{ formatValueLabel(bar) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ui-chart-axis-x]" />
+        <ng-content select="svg\\:g[ui-chart-axis-y]" />
+        <ng-content select="svg\\:g[ui-chart-crosshair]" />
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], bandPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bandPadding", required: false }] }], groupPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
+
+function curveFor(curve) {
+    switch (curve) {
+        case 'monotone':
+            return curveMonotoneX;
+        case 'step':
+            return curveStep;
+        case 'linear':
+        default:
+            return curveLinear;
+    }
+}
+function readNumber(datum, key) {
+    const raw = datum[key];
+    if (typeof raw === 'number' && Number.isFinite(raw))
+        return raw;
+    if (typeof raw === 'string') {
+        const n = Number(raw);
+        return Number.isFinite(n) ? n : 0;
+    }
+    return 0;
+}
+/** Build category + value scales for point-based charts (line / area). */
+function buildCartesianScales(input) {
+    const { data, xKey, seriesKeys, orientation, innerWidth, innerHeight } = input;
+    const isVertical = orientation === 'vertical';
+    const categories = data.map((d) => String(d[xKey] ?? ''));
+    const categoryScale = scalePoint()
+        .domain(categories)
+        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
+        .padding(0.5);
+    const maxValue = max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+    const valueScale = scaleLinear()
+        .domain([0, maxValue === 0 ? 1 : maxValue])
+        .nice()
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    return { categories, categoryScale, valueScale };
+}
+/** Compute line-chart geometry. */
+function computeLineLayout(input) {
+    const { data, seriesKeys, orientation, curve } = input;
+    const { categories, categoryScale, valueScale } = buildCartesianScales(input);
+    const isVertical = orientation === 'vertical';
+    const allPoints = [];
+    const series = [];
+    for (const seriesKey of seriesKeys) {
+        const points = data.map((d, datumIndex) => {
+            const value = readNumber(d, seriesKey);
+            const category = categories[datumIndex];
+            const c = categoryScale(category) ?? 0;
+            const v = valueScale(value);
+            return {
+                seriesKey,
+                datumIndex,
+                category,
+                value,
+                x: isVertical ? c : v,
+                y: isVertical ? v : c,
+            };
+        });
+        allPoints.push(...points);
+        const generator = line()
+            .x((p) => p.x)
+            .y((p) => p.y)
+            .curve(curveFor(curve));
+        series.push({
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            linePath: generator(points) ?? '',
+            points,
+        });
+    }
+    return {
+        series,
+        points: allPoints,
+        categoryScale,
+        valueScale,
+        categories,
+    };
+}
+/** Compute area-chart geometry (single or stacked). */
+function computeAreaLayout(input) {
+    if (input.stacked && input.seriesKeys.length > 0) {
+        return computeStackedArea(input);
+    }
+    return computeSingleArea(input);
+}
+function computeSingleArea(input) {
+    const { data, seriesKeys, orientation, curve } = input;
+    const { categories, categoryScale, valueScale } = buildCartesianScales(input);
+    const isVertical = orientation === 'vertical';
+    const baseline = isVertical ? valueScale(0) : valueScale(0);
+    const allPoints = [];
+    const series = [];
+    for (const seriesKey of seriesKeys) {
+        const points = data.map((d, datumIndex) => {
+            const value = readNumber(d, seriesKey);
+            const category = categories[datumIndex];
+            const c = categoryScale(category) ?? 0;
+            const v = valueScale(value);
+            return {
+                seriesKey,
+                datumIndex,
+                category,
+                value,
+                x: isVertical ? c : v,
+                y: isVertical ? v : c,
+            };
+        });
+        allPoints.push(...points);
+        const lineGen = line()
+            .x((p) => p.x)
+            .y((p) => p.y)
+            .curve(curveFor(curve));
+        const areaGen = isVertical
+            ? area()
+                .x((p) => p.x)
+                .y0(baseline)
+                .y1((p) => p.y)
+                .curve(curveFor(curve))
+            : area()
+                .y((p) => p.y)
+                .x0(baseline)
+                .x1((p) => p.x)
+                .curve(curveFor(curve));
+        series.push({
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            linePath: lineGen(points) ?? '',
+            areaPath: areaGen(points) ?? '',
+            points,
+        });
+    }
+    return {
+        series,
+        points: allPoints,
+        categoryScale,
+        valueScale,
+        categories,
+        stacked: false,
+    };
+}
+function computeStackedArea(input) {
+    const { data, seriesKeys, orientation, innerWidth, innerHeight, xKey, curve, expanded } = input;
+    const isVertical = orientation === 'vertical';
+    const categories = data.map((d) => String(d[xKey] ?? ''));
+    const categoryScale = scalePoint()
+        .domain(categories)
+        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
+        .padding(0.5);
+    const normalized = data.map((d) => {
+        const out = {};
+        for (const k of seriesKeys)
+            out[k] = readNumber(d, k);
+        return out;
+    });
+    const stackGenerator = stack().keys(seriesKeys);
+    if (expanded) {
+        stackGenerator.offset(stackOffsetExpand);
+    }
+    const stackSeries = stackGenerator(normalized);
+    const maxTotal = expanded ? 1 : (max(stackSeries[stackSeries.length - 1] ?? [], (p) => p[1]) ?? 0);
+    const valueScale = scaleLinear()
+        .domain([0, maxTotal === 0 ? 1 : maxTotal])
+        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+    if (!expanded) {
+        valueScale.nice();
+    }
+    const allPoints = [];
+    const series = stackSeries.map((layer) => {
+        const seriesKey = layer.key;
+        const points = layer.map((p, datumIndex) => {
+            const category = categories[datumIndex];
+            const c = categoryScale(category) ?? 0;
+            const upper = valueScale(p[1]);
+            return {
+                seriesKey,
+                datumIndex,
+                category,
+                value: p[1] - p[0],
+                x: isVertical ? c : upper,
+                y: isVertical ? upper : c,
+            };
+        });
+        allPoints.push(...points);
+        const lineGen = line()
+            .x(([x]) => x)
+            .y(([, y]) => y)
+            .curve(curveFor(curve));
+        const areaGen = isVertical
+            ? area()
+                .x(([x]) => x)
+                .y0(([, , y0]) => y0)
+                .y1(([, y1]) => y1)
+                .curve(curveFor(curve))
+            : area()
+                .y(([x]) => x)
+                .x0(([, , x0]) => x0)
+                .x1(([, x1]) => x1)
+                .curve(curveFor(curve));
+        const tuples = layer.map((p, i) => {
+            const c = categoryScale(categories[i]) ?? 0;
+            return [c, valueScale(p[1]), valueScale(p[0])];
+        });
+        return {
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            linePath: lineGen(tuples) ?? '',
+            areaPath: areaGen(tuples) ?? '',
+            points,
+        };
+    });
+    return {
+        series,
+        points: allPoints,
+        categoryScale,
+        valueScale,
+        categories,
+        stacked: true,
+    };
+}
+
+/**
+ * Publish a `scalePoint` from line/area layouts to the `CartesianContext`,
+ * which expects a `scaleBand`. We adapt by building a band with zero padding
+ * centered on the same positions, so axis ticks render at the correct
+ * offsets.
+ *
+ * This keeps axes/grid primitives agnostic to whether the underlying chart
+ * uses `scaleBand` (bar) or `scalePoint` (line/area).
+ */
+function pointToBandAdapter(pointScale, range) {
+    return scaleBand().domain(pointScale.domain()).range(range).padding(0);
+}
+/** Recreate a linear scale with the same domain/range (handy for effects). */
+function cloneLinear(scale) {
+    return scaleLinear().domain(scale.domain()).range(scale.range());
+}
+function provideCartesianFromLineLayout(ctx, layout, orientation, innerWidth, innerHeight) {
+    const range = orientation === 'vertical' ? [0, innerWidth] : [0, innerHeight];
+    ctx.orientation.set(orientation);
+    ctx.innerWidth.set(innerWidth);
+    ctx.innerHeight.set(innerHeight);
+    ctx.categoryScale.set(pointToBandAdapter(layout.categoryScale, range));
+    ctx.valueScale.set(cloneLinear(layout.valueScale));
+    ctx.categories.set(layout.categories);
+}
+
+const DEFAULT_MARGIN$5 = { top: 8, right: 8, bottom: 24, left: 40 };
+const defaultLineValueFormatter = (value) => `${value}`;
+class LineChart {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    viewport = inject(CategoricalViewportContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    curve = input('monotone', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$5, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    dotColorKey = input(undefined, ...(ngDevMode ? [{ debugName: "dotColorKey" }] : /* istanbul ignore next */ []));
+    dotStrokeColor = input(undefined, ...(ngDevMode ? [{ debugName: "dotStrokeColor" }] : /* istanbul ignore next */ []));
+    dotStrokeWidth = input(0, ...(ngDevMode ? [{ debugName: "dotStrokeWidth" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultLineValueFormatter, ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    pointClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
+    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeLineLayout({
+        data: this.visibleData(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        orientation: this.orientation(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        curve: this.curve(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.layout().series, ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        return `Line chart, ${this.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
+    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const layout = this.layout();
+            this.viewport.dataCount.set(this.data().length);
+            provideCartesianFromLineLayout(this.cart, layout, this.orientation(), this.innerWidth(), this.innerHeight());
+            this.cart.margin.set(this.margin());
+        });
+    }
+    emitClick(p) {
+        const datumIndex = this.visibleStartIndex() + p.datumIndex;
+        this.pointClick.emit({
+            seriesKey: p.seriesKey,
+            datumIndex,
+            category: p.category,
+            value: p.value,
+            datum: this.data()[datumIndex],
+        });
+    }
+    setActivePoint(event, p) {
+        const center = elementClientCenter(event.currentTarget);
+        const datumIndex = this.visibleStartIndex() + p.datumIndex;
+        this.root.activePoint.set({
+            index: p.datumIndex,
+            datumIndex,
+            seriesKey: p.seriesKey,
+            clientX: center?.clientX,
+            clientY: center?.clientY,
+        });
+    }
+    clearActivePoint() {
+        this.root.activePoint.set(null);
+    }
+    dotFill(point, fallbackColor) {
+        const colorKey = this.dotColorKey();
+        if (!colorKey) {
+            return fallbackColor;
+        }
+        const datum = this.visibleData()[point.datumIndex];
+        const raw = datum?.[colorKey];
+        if (typeof raw !== 'string' || raw.length === 0) {
+            return fallbackColor;
+        }
+        if (raw.startsWith('var(') ||
+            raw.startsWith('#') ||
+            raw.startsWith('rgb') ||
+            raw.startsWith('hsl') ||
+            raw.includes('(')) {
+            return raw;
+        }
+        return `var(--color-${raw.replace(/[^a-zA-Z0-9_-]/g, '_')})`;
+    }
+    formatValueLabel(point) {
+        return this.valueLabelFormat()(point.value);
+    }
+    labelX(point) {
+        return this.orientation() === 'vertical' ? point.x : point.x + this.dotRadius() + 6;
+    }
+    labelY(point) {
+        return this.orientation() === 'vertical' ? point.y - this.dotRadius() - 8 : point.y;
+    }
+    labelAnchor() {
+        return this.orientation() === 'vertical' ? 'middle' : 'start';
+    }
+    pointAriaLabel(p) {
+        const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
+        return `${label} at ${p.category}: ${p.value}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: LineChart, isStandalone: true, selector: "ui-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, dotColorKey: { classPropertyName: "dotColorKey", publicName: "dotColorKey", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeColor: { classPropertyName: "dotStrokeColor", publicName: "dotStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeWidth: { classPropertyName: "dotStrokeWidth", publicName: "dotStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+    <svg:svg
+      uiChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ui-chart-grid]" />
+        <svg:g class="chart-lines">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-line"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              [attr.d]="s.linePath" />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  class="chart-dot cursor-pointer outline-none"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="dotFill(p, s.color)"
+                  [attr.stroke]="dotStrokeColor()"
+                  [attr.stroke-width]="dotStrokeWidth() || null"
+                  [attr.aria-label]="pointAriaLabel(p)"
+                  tabindex="0"
+                  (focus)="setActivePoint($event, p)"
+                  (blur)="clearActivePoint()"
+                  (click)="emitClick(p)"
+                  (keydown.enter)="emitClick(p)"
+                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                @if (showValueLabels()) {
+                  <svg:text
+                    class="chart-line-value pointer-events-none fill-muted-foreground text-[10px]"
+                    [attr.x]="labelX(p)"
+                    [attr.y]="labelY(p)"
+                    [attr.text-anchor]="labelAnchor()"
+                    dominant-baseline="middle">
+                    {{ formatValueLabel(p) }}
+                  </svg:text>
+                }
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ui-chart-axis-x]" />
+        <ng-content select="svg\\:g[ui-chart-axis-y]" />
+        <ng-content select="svg\\:g[ui-chart-crosshair]" />
+        <ng-content select="svg:g[ui-chart-brush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+    <ng-content select="ui-chart-zoom-controls" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[uiChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LineChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-line-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [CartesianContext, CategoricalViewportContext],
+                    imports: [ChartPointerTracker],
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      uiChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ui-chart-grid]" />
+        <svg:g class="chart-lines">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-line"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              [attr.d]="s.linePath" />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  class="chart-dot cursor-pointer outline-none"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="dotFill(p, s.color)"
+                  [attr.stroke]="dotStrokeColor()"
+                  [attr.stroke-width]="dotStrokeWidth() || null"
+                  [attr.aria-label]="pointAriaLabel(p)"
+                  tabindex="0"
+                  (focus)="setActivePoint($event, p)"
+                  (blur)="clearActivePoint()"
+                  (click)="emitClick(p)"
+                  (keydown.enter)="emitClick(p)"
+                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+                @if (showValueLabels()) {
+                  <svg:text
+                    class="chart-line-value pointer-events-none fill-muted-foreground text-[10px]"
+                    [attr.x]="labelX(p)"
+                    [attr.y]="labelY(p)"
+                    [attr.text-anchor]="labelAnchor()"
+                    dominant-baseline="middle">
+                    {{ formatValueLabel(p) }}
+                  </svg:text>
+                }
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ui-chart-axis-x]" />
+        <ng-content select="svg\\:g[ui-chart-axis-y]" />
+        <ng-content select="svg\\:g[ui-chart-crosshair]" />
+        <ng-content select="svg:g[ui-chart-brush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+    <ng-content select="ui-chart-zoom-controls" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], dotColorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColorKey", required: false }] }], dotStrokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotStrokeColor", required: false }] }], dotStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotStrokeWidth", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
+
+const DEFAULT_MARGIN$4 = { top: 8, right: 8, bottom: 24, left: 40 };
+/**
+ * Area chart — composable within `<ui-chart-container>`.
+ *
+ * - `stacked=true` stacks series along the value axis.
+ * - `gradient=true` fills each area with a vertical linear-gradient from
+ *   the series color (top) to transparent (bottom). The gradient is
+ *   emitted as `<defs><linearGradient>` per series, unique per chart id.
+ */
+class AreaChart {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    viewport = inject(CategoricalViewportContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    gradient = input(true, ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
+    curve = input('monotone', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$4, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    showDots = input(false, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    pointClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
+    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeAreaLayout({
+        data: this.visibleData(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        orientation: this.orientation(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        curve: this.curve(),
+        stacked: this.stacked(),
+        expanded: this.expanded(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.layout().series, ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        return `Area chart, ${this.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
+    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const layout = this.layout();
+            this.viewport.dataCount.set(this.data().length);
+            provideCartesianFromLineLayout(this.cart, layout, this.orientation(), this.innerWidth(), this.innerHeight());
+            this.cart.margin.set(this.margin());
+        });
+    }
+    gradientId(seriesKey) {
+        return `${this.root.id()}-grad-${seriesKey.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+    }
+    areaFill(seriesKey, color) {
+        return this.gradient() ? `url(#${this.gradientId(seriesKey)})` : color;
+    }
+    emitClick(p) {
+        const datumIndex = this.visibleStartIndex() + p.datumIndex;
+        this.pointClick.emit({
+            seriesKey: p.seriesKey,
+            datumIndex,
+            category: p.category,
+            value: p.value,
+            datum: this.data()[datumIndex],
+        });
+    }
+    setActivePoint(event, p) {
+        const center = elementClientCenter(event.currentTarget);
+        const datumIndex = this.visibleStartIndex() + p.datumIndex;
+        this.root.activePoint.set({
+            index: p.datumIndex,
+            datumIndex,
+            seriesKey: p.seriesKey,
+            clientX: center?.clientX,
+            clientY: center?.clientY,
+        });
+    }
+    clearActivePoint() {
+        this.root.activePoint.set(null);
+    }
+    pointAriaLabel(p) {
+        const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
+        return `${label} at ${p.category}: ${p.value}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AreaChart, isStandalone: true, selector: "ui-area-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+    <svg:svg
+      uiChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      @if (gradient()) {
+        <svg:defs>
+          @for (s of series(); track s.seriesKey) {
+            <svg:linearGradient [attr.id]="gradientId(s.seriesKey)" x1="0" y1="0" x2="0" y2="1">
+              <svg:stop offset="0%" [attr.stop-color]="s.color" stop-opacity="0.4" />
+              <svg:stop offset="100%" [attr.stop-color]="s.color" stop-opacity="0" />
+            </svg:linearGradient>
+          }
+        </svg:defs>
+      }
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ui-chart-grid]" />
+        <svg:g class="chart-areas">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-area"
+              [attr.d]="s.areaPath"
+              [attr.fill]="areaFill(s.seriesKey, s.color)"
+              stroke="none" />
+            <svg:path
+              class="chart-area-stroke"
+              [attr.d]="s.linePath"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  class="chart-dot cursor-pointer outline-none"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  [attr.aria-label]="pointAriaLabel(p)"
+                  tabindex="0"
+                  (focus)="setActivePoint($event, p)"
+                  (blur)="clearActivePoint()"
+                  (click)="emitClick(p)"
+                  (keydown.enter)="emitClick(p)"
+                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ui-chart-axis-x]" />
+        <ng-content select="svg\\:g[ui-chart-axis-y]" />
+        <ng-content select="svg\\:g[ui-chart-crosshair]" />
+        <ng-content select="svg:g[ui-chart-brush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+    <ng-content select="ui-chart-zoom-controls" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[uiChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AreaChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-area-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [CartesianContext, CategoricalViewportContext],
+                    imports: [ChartPointerTracker],
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      uiChartPointerTracker
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      @if (gradient()) {
+        <svg:defs>
+          @for (s of series(); track s.seriesKey) {
+            <svg:linearGradient [attr.id]="gradientId(s.seriesKey)" x1="0" y1="0" x2="0" y2="1">
+              <svg:stop offset="0%" [attr.stop-color]="s.color" stop-opacity="0.4" />
+              <svg:stop offset="100%" [attr.stop-color]="s.color" stop-opacity="0" />
+            </svg:linearGradient>
+          }
+        </svg:defs>
+      }
+      <svg:g [attr.transform]="innerTransform()">
+        <ng-content select="svg\\:g[ui-chart-grid]" />
+        <svg:g class="chart-areas">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-area"
+              [attr.d]="s.areaPath"
+              [attr.fill]="areaFill(s.seriesKey, s.color)"
+              stroke="none" />
+            <svg:path
+              class="chart-area-stroke"
+              [attr.d]="s.linePath"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  class="chart-dot cursor-pointer outline-none"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  [attr.aria-label]="pointAriaLabel(p)"
+                  tabindex="0"
+                  (focus)="setActivePoint($event, p)"
+                  (blur)="clearActivePoint()"
+                  (click)="emitClick(p)"
+                  (keydown.enter)="emitClick(p)"
+                  (keydown.space)="emitClick(p); $event.preventDefault()" />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ui-chart-axis-x]" />
+        <ng-content select="svg\\:g[ui-chart-axis-y]" />
+        <ng-content select="svg\\:g[ui-chart-crosshair]" />
+        <ng-content select="svg:g[ui-chart-brush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+    <ng-content select="ui-chart-zoom-controls" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], gradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradient", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
+
+function computePieLayout(input) {
+    const { data, valueKey, nameKey, seriesKeys, innerWidth, innerHeight, innerRadius, padAngle, cornerRadius, startAngle, endAngle, activeIndex, activeOffset = 12, } = input;
+    const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+    const centerX = innerWidth / 2;
+    const centerY = innerHeight / 2;
+    if (data.length === 0 || outerRadius === 0) {
+        return { slices: [], centerX, centerY, outerRadius };
+    }
+    const pieGen = pie()
+        .value((d) => Number(d[valueKey] ?? 0))
+        .sort(null)
+        .padAngle(padAngle)
+        .startAngle(startAngle)
+        .endAngle(endAngle);
+    const arcGen = arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .cornerRadius(cornerRadius);
+    const arcs = pieGen(data);
+    const slices = arcs.map((a, i) => {
+        const d = a.data;
+        const key = seriesKeys?.[i] ?? String(d[nameKey] ?? i);
+        const centroid = arcGen.centroid(a);
+        const magnitude = Math.hypot(centroid[0], centroid[1]) || 1;
+        const isActive = i === activeIndex;
+        return {
+            seriesKey: key,
+            name: String(d[nameKey] ?? key),
+            value: Number(d[valueKey] ?? 0),
+            datumIndex: i,
+            color: seriesColorVar(key),
+            arcPath: arcGen(a) ?? '',
+            centroid,
+            startAngle: a.startAngle,
+            endAngle: a.endAngle,
+            translateX: isActive ? (centroid[0] / magnitude) * activeOffset : 0,
+            translateY: isActive ? (centroid[1] / magnitude) * activeOffset : 0,
+        };
+    });
+    return { slices, centerX, centerY, outerRadius };
+}
+
+const DEFAULT_MARGIN$3 = { top: 8, right: 8, bottom: 8, left: 8 };
+class PieChart {
+    root = inject(ChartContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    valueKey = input.required(...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    nameKey = input.required(...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
+    seriesKeys = input(undefined, ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$3, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    innerRadius = input(0, ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
+    padAngle = input(0.01, ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(0, ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    startAngle = input(-Math.PI / 2, ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
+    endAngle = input((3 * Math.PI) / 2, ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
+    showLabels = input(false, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    activeIndex = input(undefined, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeOffset = input(12, ...(ngDevMode ? [{ debugName: "activeOffset" }] : /* istanbul ignore next */ []));
+    sliceClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computePieLayout({
+        data: this.data(),
+        valueKey: this.valueKey(),
+        nameKey: this.nameKey(),
+        seriesKeys: this.seriesKeys(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        innerRadius: this.innerRadius(),
+        padAngle: this.padAngle(),
+        cornerRadius: this.cornerRadius(),
+        startAngle: this.startAngle(),
+        endAngle: this.endAngle(),
+        activeIndex: this.activeIndex(),
+        activeOffset: this.activeOffset(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Pie chart, ${this.data().length} slices.`, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    sliceAriaLabel(s) {
+        return `${s.name}: ${s.value}`;
+    }
+    sliceTransform(s) {
+        return s.translateX || s.translateY ? `translate(${s.translateX}, ${s.translateY})` : null;
+    }
+    emitClick(s) {
+        this.sliceClick.emit({
+            seriesKey: s.seriesKey,
+            name: s.name,
+            value: s.value,
+            datumIndex: s.datumIndex,
+            datum: this.data()[s.datumIndex],
+        });
+    }
+    setActive(event, s) {
+        const clientX = event instanceof PointerEvent ? event.clientX : event.target.getBoundingClientRect().left;
+        const clientY = event instanceof PointerEvent ? event.clientY : event.target.getBoundingClientRect().top;
+        this.root.activePoint.set({
+            index: s.datumIndex,
+            datumIndex: s.datumIndex,
+            seriesKey: s.seriesKey,
+            clientX,
+            clientY,
+        });
+    }
+    clearActive() {
+        this.root.activePoint.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PieChart, isStandalone: true, selector: "ui-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, innerRadius: { classPropertyName: "innerRadius", publicName: "innerRadius", isSignal: true, isRequired: false, transformFunction: null }, padAngle: { classPropertyName: "padAngle", publicName: "padAngle", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, activeOffset: { classPropertyName: "activeOffset", publicName: "activeOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceClick: "sliceClick" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (s of layout().slices; track s.seriesKey) {
+            <svg:path
+              class="chart-slice cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="s.arcPath"
+              [attr.fill]="s.color"
+              [attr.transform]="sliceTransform(s)"
+              [attr.aria-label]="sliceAriaLabel(s)"
+              tabindex="0"
+              (click)="emitClick(s)"
+              (keydown.enter)="emitClick(s)"
+              (keydown.space)="emitClick(s); $event.preventDefault()"
+              (pointerenter)="setActive($event, s)"
+              (pointermove)="setActive($event, s)"
+              (pointerleave)="clearActive()"
+              (focus)="setActive($event, s)"
+              (blur)="clearActive()" />
+          }
+          @if (showLabels()) {
+            @for (s of layout().slices; track s.seriesKey) {
+              <svg:text
+                class="chart-slice-label fill-foreground text-[10px]"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                [attr.x]="s.centroid[0] + s.translateX"
+                [attr.y]="s.centroid[1] + s.translateY">
+                {{ s.value }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ui-pie-center" />
+    </div>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PieChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-pie-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (s of layout().slices; track s.seriesKey) {
+            <svg:path
+              class="chart-slice cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="s.arcPath"
+              [attr.fill]="s.color"
+              [attr.transform]="sliceTransform(s)"
+              [attr.aria-label]="sliceAriaLabel(s)"
+              tabindex="0"
+              (click)="emitClick(s)"
+              (keydown.enter)="emitClick(s)"
+              (keydown.space)="emitClick(s); $event.preventDefault()"
+              (pointerenter)="setActive($event, s)"
+              (pointermove)="setActive($event, s)"
+              (pointerleave)="clearActive()"
+              (focus)="setActive($event, s)"
+              (blur)="clearActive()" />
+          }
+          @if (showLabels()) {
+            @for (s of layout().slices; track s.seriesKey) {
+              <svg:text
+                class="chart-slice-label fill-foreground text-[10px]"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                [attr.x]="s.centroid[0] + s.translateX"
+                [attr.y]="s.centroid[1] + s.translateY">
+                {{ s.value }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ui-pie-center" />
+    </div>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: true }] }], nameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameKey", required: true }] }], seriesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKeys", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], innerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadius", required: false }] }], padAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAngle", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], startAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAngle", required: false }] }], endAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAngle", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], activeOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOffset", required: false }] }], sliceClick: [{ type: i0.Output, args: ["sliceClick"] }] } });
+
+function computeRadarLayout(input) {
+    const { data, axisKey, seriesKeys, innerWidth, innerHeight, levels, curve, grid } = input;
+    const radius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+    const centerX = innerWidth / 2;
+    const centerY = innerHeight / 2;
+    if (data.length === 0 || seriesKeys.length === 0 || radius === 0) {
+        return { centerX, centerY, radius, axes: [], levels: [], maxValue: 0, series: [], grid };
+    }
+    const maxValue = input.maxValue ?? max(data, (d) => max(seriesKeys, (k) => Number(d[k] ?? 0)) ?? 0) ?? 1;
+    const angleStep = (2 * Math.PI) / data.length;
+    const angleFor = (i) => i * angleStep - Math.PI / 2;
+    const axes = data.map((d, i) => {
+        const angle = angleFor(i);
+        return {
+            name: String(d[axisKey] ?? i),
+            angle,
+            x: Math.cos(angle) * radius,
+            y: Math.sin(angle) * radius,
+        };
+    });
+    const levelValues = Array.from({ length: levels }, (_, index) => {
+        const value = ((index + 1) / levels) * maxValue;
+        const levelRadius = ((index + 1) / levels) * radius;
+        return {
+            value,
+            radius: levelRadius,
+            path: polygonPath(axes.map((axis) => ({
+                x: Math.cos(axis.angle) * levelRadius,
+                y: Math.sin(axis.angle) * levelRadius,
+            }))),
+        };
+    });
+    const curveFactory = curve === 'cardinal' ? curveCardinalClosed : curveLinearClosed;
+    const radial = lineRadial()
+        .angle((point) => point.angle + Math.PI / 2)
+        .radius((point) => (point.value / maxValue) * radius)
+        .curve(curveFactory);
+    const series = seriesKeys.map((seriesKey) => {
+        const points = data.map((datum, index) => {
+            const value = Number(datum[seriesKey] ?? 0);
+            const angle = angleFor(index);
+            const pointRadius = (value / maxValue) * radius;
+            return {
+                axis: String(datum[axisKey] ?? index),
+                value,
+                x: Math.cos(angle) * pointRadius,
+                y: Math.sin(angle) * pointRadius,
+            };
+        });
+        return {
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            path: radial(data.map((datum, index) => ({ angle: angleFor(index), value: Number(datum[seriesKey] ?? 0) }))) ?? '',
+            points,
+        };
+    });
+    return { centerX, centerY, radius, axes, levels: levelValues, maxValue, series, grid };
+}
+function polygonPath(points) {
+    if (points.length === 0) {
+        return '';
+    }
+    const [first, ...rest] = points;
+    return `M ${first.x} ${first.y} ${rest.map((point) => `L ${point.x} ${point.y}`).join(' ')} Z`;
+}
+
+const DEFAULT_MARGIN$2 = { top: 24, right: 24, bottom: 24, left: 24 };
+class RadarChart {
+    root = inject(ChartContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    axisKey = input.required(...(ngDevMode ? [{ debugName: "axisKey" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$2, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    curve = input('linear', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    levels = input(4, ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    fillOpacity = input(0.2, ...(ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []));
+    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    grid = input('circle', ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    gridFilled = input(false, ...(ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []));
+    showAxes = input(true, ...(ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []));
+    linesOnly = input(false, ...(ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeRadarLayout({
+        data: this.data(),
+        axisKey: this.axisKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        maxValue: this.maxValue(),
+        levels: this.levels(),
+        curve: this.curve(),
+        grid: this.grid(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        return `Radar chart, ${this.data().length} axes, ${keys.length} series.`;
+    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    gridFill() {
+        return this.gridFilled() ? 'hsl(var(--muted))' : 'none';
+    }
+    gridFillOpacity(levelIndex) {
+        return this.gridFilled() ? Math.max(0.06, 0.18 - levelIndex * 0.02) : null;
+    }
+    dotAriaLabel(seriesKey, p) {
+        const label = this.root.config()[seriesKey]?.label ?? seriesKey;
+        return `${label} at ${p.axis}: ${p.value}`;
+    }
+    setActive(event, seriesKey, index) {
+        const clientX = event instanceof PointerEvent ? event.clientX : event.target.getBoundingClientRect().left;
+        const clientY = event instanceof PointerEvent ? event.clientY : event.target.getBoundingClientRect().top;
+        this.root.activePoint.set({ index, datumIndex: index, seriesKey, clientX, clientY });
+    }
+    clearActive() {
+        this.root.activePoint.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadarChart, isStandalone: true, selector: "ui-radar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, axisKey: { classPropertyName: "axisKey", publicName: "axisKey", isSignal: true, isRequired: true, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, gridFilled: { classPropertyName: "gridFilled", publicName: "gridFilled", isSignal: true, isRequired: false, transformFunction: null }, showAxes: { classPropertyName: "showAxes", publicName: "showAxes", isSignal: true, isRequired: false, transformFunction: null }, linesOnly: { classPropertyName: "linesOnly", publicName: "linesOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g class="chart-radar" [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @if (layout().grid !== 'none') {
+            @for (level of layout().levels; track level.value; let levelIndex = $index) {
+              @if (layout().grid === 'circle') {
+                <svg:circle
+                  class="chart-radar-level stroke-border"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2"
+                  cx="0"
+                  cy="0"
+                  [attr.r]="level.radius" />
+              } @else {
+                <svg:path
+                  class="chart-radar-level stroke-border"
+                  [attr.d]="level.path"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2" />
+              }
+            }
+          }
+          @if (showAxes()) {
+            @for (axis of layout().axes; track axis.name) {
+              <svg:line class="chart-radar-axis stroke-border" x1="0" y1="0" [attr.x2]="axis.x" [attr.y2]="axis.y" />
+              @if (showLabels()) {
+                <svg:text
+                  class="chart-radar-axis-label fill-muted-foreground text-[10px]"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  [attr.x]="axis.x * 1.12"
+                  [attr.y]="axis.y * 1.12">
+                  {{ axis.name }}
+                </svg:text>
+              }
+            }
+          }
+          @for (s of layout().series; track s.seriesKey) {
+            <svg:path
+              class="chart-radar-series"
+              [attr.d]="s.path"
+              [attr.stroke]="s.color"
+              [attr.fill]="linesOnly() ? 'none' : s.color"
+              [attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
+              [attr.stroke-width]="strokeWidth()"
+              stroke-linejoin="round" />
+            @if (showDots()) {
+              @for (p of s.points; track p.axis; let i = $index) {
+                <svg:circle
+                  class="chart-radar-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  tabindex="0"
+                  [attr.aria-label]="dotAriaLabel(s.seriesKey, p)"
+                  (pointerenter)="setActive($event, s.seriesKey, i)"
+                  (pointermove)="setActive($event, s.seriesKey, i)"
+                  (pointerleave)="clearActive()"
+                  (focus)="setActive($event, s.seriesKey, i)"
+                  (blur)="clearActive()" />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-radar-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g class="chart-radar" [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @if (layout().grid !== 'none') {
+            @for (level of layout().levels; track level.value; let levelIndex = $index) {
+              @if (layout().grid === 'circle') {
+                <svg:circle
+                  class="chart-radar-level stroke-border"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2"
+                  cx="0"
+                  cy="0"
+                  [attr.r]="level.radius" />
+              } @else {
+                <svg:path
+                  class="chart-radar-level stroke-border"
+                  [attr.d]="level.path"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2" />
+              }
+            }
+          }
+          @if (showAxes()) {
+            @for (axis of layout().axes; track axis.name) {
+              <svg:line class="chart-radar-axis stroke-border" x1="0" y1="0" [attr.x2]="axis.x" [attr.y2]="axis.y" />
+              @if (showLabels()) {
+                <svg:text
+                  class="chart-radar-axis-label fill-muted-foreground text-[10px]"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  [attr.x]="axis.x * 1.12"
+                  [attr.y]="axis.y * 1.12">
+                  {{ axis.name }}
+                </svg:text>
+              }
+            }
+          }
+          @for (s of layout().series; track s.seriesKey) {
+            <svg:path
+              class="chart-radar-series"
+              [attr.d]="s.path"
+              [attr.stroke]="s.color"
+              [attr.fill]="linesOnly() ? 'none' : s.color"
+              [attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
+              [attr.stroke-width]="strokeWidth()"
+              stroke-linejoin="round" />
+            @if (showDots()) {
+              @for (p of s.points; track p.axis; let i = $index) {
+                <svg:circle
+                  class="chart-radar-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  tabindex="0"
+                  [attr.aria-label]="dotAriaLabel(s.seriesKey, p)"
+                  (pointerenter)="setActive($event, s.seriesKey, i)"
+                  (pointermove)="setActive($event, s.seriesKey, i)"
+                  (pointerleave)="clearActive()"
+                  (focus)="setActive($event, s.seriesKey, i)"
+                  (blur)="clearActive()" />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], axisKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisKey", required: true }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], levels: [{ type: i0.Input, args: [{ isSignal: true, alias: "levels", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], gridFilled: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridFilled", required: false }] }], showAxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxes", required: false }] }], linesOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "linesOnly", required: false }] }] } });
+
+function computeRadialLayout(input) {
+    const { data, nameKey, valueKey, innerWidth, innerHeight, seriesKeys, trackPadding, startAngle, endAngle, cornerRadius, } = input;
+    const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+    const centerX = innerWidth / 2;
+    const centerY = innerHeight / 2;
+    if (data.length === 0 || outerRadius === 0) {
+        return { centerX, centerY, outerRadius, bars: [], maxValue: 0 };
+    }
+    const maxValue = input.maxValue ?? max(data, (d) => Number(d[valueKey] ?? 0)) ?? 1;
+    const trackCount = data.length;
+    const availableRadius = outerRadius - (trackCount - 1) * trackPadding;
+    const trackThickness = availableRadius / trackCount;
+    const bars = data.map((d, i) => {
+        const inner = i * (trackThickness + trackPadding);
+        const outer = inner + trackThickness;
+        const value = Number(d[valueKey] ?? 0);
+        const pct = maxValue === 0 ? 0 : value / maxValue;
+        const sweep = (endAngle - startAngle) * pct;
+        const valueEndAngle = startAngle + sweep;
+        const key = seriesKeys?.[i] ?? String(d[nameKey] ?? i);
+        const arcGen = arc().innerRadius(inner).outerRadius(outer).cornerRadius(cornerRadius);
+        return {
+            seriesKey: key,
+            name: String(d[nameKey] ?? key),
+            value,
+            datumIndex: i,
+            color: seriesColorVar(key),
+            arcPath: arcGen.startAngle(startAngle).endAngle(valueEndAngle)(null) ?? '',
+            backgroundPath: arcGen.startAngle(startAngle).endAngle(endAngle)(null) ?? '',
+            innerRadius: inner,
+            outerRadius: outer,
+            endAngle: valueEndAngle,
+        };
+    });
+    return { centerX, centerY, outerRadius, bars, maxValue };
+}
+
+const DEFAULT_MARGIN$1 = { top: 8, right: 8, bottom: 8, left: 8 };
+const defaultRadialValueFormatter = (value) => `${value}`;
+class RadialChart {
+    root = inject(ChartContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    nameKey = input.required(...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
+    valueKey = input.required(...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    seriesKeys = input(undefined, ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$1, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    trackPadding = input(4, ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(8, ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    startAngle = input(-Math.PI / 2, ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
+    endAngle = input((3 * Math.PI) / 2, ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    showTrack = input(true, ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultRadialValueFormatter, ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    barClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeRadialLayout({
+        data: this.data(),
+        nameKey: this.nameKey(),
+        valueKey: this.valueKey(),
+        seriesKeys: this.seriesKeys(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        trackPadding: this.trackPadding(),
+        startAngle: this.startAngle(),
+        endAngle: this.endAngle(),
+        cornerRadius: this.cornerRadius(),
+        maxValue: this.maxValue(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Radial bar chart, ${this.data().length} tracks.`, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    barAriaLabel(b) {
+        return `${b.name}: ${b.value}`;
+    }
+    formatValueLabel(b) {
+        return this.valueLabelFormat()(b.value, b.name);
+    }
+    barLabelX(b) {
+        const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
+        return Math.sin(b.endAngle) * radius;
+    }
+    barLabelY(b) {
+        const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
+        return -Math.cos(b.endAngle) * radius;
+    }
+    barLabelAnchor(b) {
+        return this.barLabelX(b) >= 0 ? 'start' : 'end';
+    }
+    emitClick(b) {
+        this.barClick.emit({
+            seriesKey: b.seriesKey,
+            name: b.name,
+            value: b.value,
+            datumIndex: b.datumIndex,
+            datum: this.data()[b.datumIndex],
+        });
+    }
+    setActive(event, b) {
+        const clientX = event instanceof PointerEvent ? event.clientX : event.target.getBoundingClientRect().left;
+        const clientY = event instanceof PointerEvent ? event.clientY : event.target.getBoundingClientRect().top;
+        this.root.activePoint.set({
+            index: b.datumIndex,
+            datumIndex: b.datumIndex,
+            seriesKey: b.seriesKey,
+            clientX,
+            clientY,
+        });
+    }
+    clearActive() {
+        this.root.activePoint.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadialChart, isStandalone: true, selector: "ui-radial-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, trackPadding: { classPropertyName: "trackPadding", publicName: "trackPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (b of layout().bars; track b.seriesKey) {
+            @if (showTrack()) {
+              <svg:path class="chart-radial-track fill-muted" [attr.d]="b.backgroundPath" />
+            }
+            <svg:path
+              class="chart-radial-bar cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="b.arcPath"
+              [attr.fill]="b.color"
+              [attr.aria-label]="barAriaLabel(b)"
+              tabindex="0"
+              (click)="emitClick(b)"
+              (keydown.enter)="emitClick(b)"
+              (keydown.space)="emitClick(b); $event.preventDefault()"
+              (pointerenter)="setActive($event, b)"
+              (pointermove)="setActive($event, b)"
+              (pointerleave)="clearActive()"
+              (focus)="setActive($event, b)"
+              (blur)="clearActive()" />
+            @if (showValueLabels()) {
+              <svg:text
+                class="chart-radial-value pointer-events-none fill-muted-foreground text-[10px]"
+                [attr.x]="barLabelX(b)"
+                [attr.y]="barLabelY(b)"
+                [attr.text-anchor]="barLabelAnchor(b)"
+                dominant-baseline="middle">
+                {{ formatValueLabel(b) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ui-radial-center" />
+    </div>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadialChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-radial-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (b of layout().bars; track b.seriesKey) {
+            @if (showTrack()) {
+              <svg:path class="chart-radial-track fill-muted" [attr.d]="b.backgroundPath" />
+            }
+            <svg:path
+              class="chart-radial-bar cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="b.arcPath"
+              [attr.fill]="b.color"
+              [attr.aria-label]="barAriaLabel(b)"
+              tabindex="0"
+              (click)="emitClick(b)"
+              (keydown.enter)="emitClick(b)"
+              (keydown.space)="emitClick(b); $event.preventDefault()"
+              (pointerenter)="setActive($event, b)"
+              (pointermove)="setActive($event, b)"
+              (pointerleave)="clearActive()"
+              (focus)="setActive($event, b)"
+              (blur)="clearActive()" />
+            @if (showValueLabels()) {
+              <svg:text
+                class="chart-radial-value pointer-events-none fill-muted-foreground text-[10px]"
+                [attr.x]="barLabelX(b)"
+                [attr.y]="barLabelY(b)"
+                [attr.text-anchor]="barLabelAnchor(b)"
+                dominant-baseline="middle">
+                {{ formatValueLabel(b) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ui-radial-center" />
+    </div>
+    <ng-content select="ui-chart-tooltip" />
+    <ng-content select="ui-chart-legend" />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameKey", required: true }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: true }] }], seriesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKeys", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], trackPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], startAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAngle", required: false }] }], endAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAngle", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
+
+function nice(extent) {
+    const [lo, hi] = extent;
+    if (lo === undefined || hi === undefined)
+        return [0, 1];
+    if (lo === hi)
+        return [lo - 1, hi + 1];
+    return [lo, hi];
+}
+function resolveScatterDomains(input) {
+    const xValues = input.data.map((d) => Number(d[input.xKey] ?? 0));
+    const yValues = input.data.map((d) => Number(d[input.yKey] ?? 0));
+    return {
+        xDomain: (input.xDomain ?? nice(extent(xValues))),
+        yDomain: (input.yDomain ?? nice(extent(yValues))),
+    };
+}
+function computeScatterLayout(input) {
+    const { data, xKey, yKey, sizeKey, seriesKey, seriesKeys, innerWidth, innerHeight, minPointRadius, maxPointRadius } = input;
+    const xValues = data.map((d) => Number(d[xKey] ?? 0));
+    const yValues = data.map((d) => Number(d[yKey] ?? 0));
+    const sizeValues = sizeKey ? data.map((d) => Number(d[sizeKey] ?? 0)) : [];
+    const { xDomain, yDomain } = resolveScatterDomains(input);
+    const xScale = scaleLinear()
+        .domain(xDomain)
+        .range([0, innerWidth]);
+    const yScale = scaleLinear()
+        .domain(yDomain)
+        .range([innerHeight, 0]);
+    let sizeScale = null;
+    if (sizeKey && sizeValues.length > 0) {
+        const [sLo, sHi] = extent(sizeValues);
+        sizeScale = scaleLinear()
+            .domain([sLo ?? 0, sHi ?? 1])
+            .range([minPointRadius, maxPointRadius]);
+    }
+    const fallbackKey = seriesKeys[0] ?? 'value';
+    const points = data.flatMap((d, i) => {
+        const key = seriesKey ? String(d[seriesKey] ?? fallbackKey) : fallbackKey;
+        const sz = sizeKey ? Number(d[sizeKey] ?? 0) : 0;
+        const rawX = xValues[i];
+        const rawY = yValues[i];
+        if (rawX < xDomain[0] || rawX > xDomain[1] || rawY < yDomain[0] || rawY > yDomain[1]) {
+            return [];
+        }
+        return [
+            {
+                seriesKey: key,
+                color: seriesColorVar(key),
+                x: xScale(rawX),
+                y: yScale(rawY),
+                radius: sizeScale ? sizeScale(sz) : minPointRadius,
+                datumIndex: i,
+                rawX,
+                rawY,
+                rawSize: sz,
+            },
+        ];
+    });
+    return { points, xScale, yScale, xDomain, yDomain };
+}
+
+const DEFAULT_MARGIN = { top: 8, right: 8, bottom: 24, left: 40 };
+/**
+ * Scatter chart — one dot per datum. Both axes are linear; color can
+ * come from a fixed series key or per-row via `seriesKey` field. Point
+ * radius optionally scales with `sizeKey`.
+ */
+class ScatterChart {
+    root = inject(ChartContext);
+    viewport = inject(ScatterViewportContext);
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    yKey = input.required(...(ngDevMode ? [{ debugName: "yKey" }] : /* istanbul ignore next */ []));
+    /** Optional numeric field to drive point radius. */
+    sizeKey = input(undefined, ...(ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []));
+    /** Optional field on each datum used as color key. */
+    seriesKey = input(undefined, ...(ngDevMode ? [{ debugName: "seriesKey" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    minPointRadius = input(3, ...(ngDevMode ? [{ debugName: "minPointRadius" }] : /* istanbul ignore next */ []));
+    maxPointRadius = input(12, ...(ngDevMode ? [{ debugName: "maxPointRadius" }] : /* istanbul ignore next */ []));
+    xDomain = input(undefined, ...(ngDevMode ? [{ debugName: "xDomain" }] : /* istanbul ignore next */ []));
+    yDomain = input(undefined, ...(ngDevMode ? [{ debugName: "yDomain" }] : /* istanbul ignore next */ []));
+    pointClick = output();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    resolvedDomains = computed(() => resolveScatterDomains({
+        data: this.data(),
+        xKey: this.xKey(),
+        yKey: this.yKey(),
+        xDomain: this.xDomain(),
+        yDomain: this.yDomain(),
+    }), ...(ngDevMode ? [{ debugName: "resolvedDomains" }] : /* istanbul ignore next */ []));
+    currentXDomain = computed(() => this.viewport.zoomXDomain() ?? this.resolvedDomains().xDomain, ...(ngDevMode ? [{ debugName: "currentXDomain" }] : /* istanbul ignore next */ []));
+    currentYDomain = computed(() => this.viewport.zoomYDomain() ?? this.resolvedDomains().yDomain, ...(ngDevMode ? [{ debugName: "currentYDomain" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeScatterLayout({
+        data: this.data(),
+        xKey: this.xKey(),
+        yKey: this.yKey(),
+        sizeKey: this.sizeKey(),
+        seriesKey: this.seriesKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        minPointRadius: this.minPointRadius(),
+        maxPointRadius: this.maxPointRadius(),
+        xDomain: this.currentXDomain(),
+        yDomain: this.currentYDomain(),
+    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    clipPathId = computed(() => `${this.root.id()}-scatter-clip`, ...(ngDevMode ? [{ debugName: "clipPathId" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Scatter chart, ${this.data().length} points.`, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const domains = this.resolvedDomains();
+            const layout = this.layout();
+            this.viewport.innerWidth.set(this.innerWidth());
+            this.viewport.innerHeight.set(this.innerHeight());
+            this.viewport.fullXDomain.set(domains.xDomain);
+            this.viewport.fullYDomain.set(domains.yDomain);
+            this.viewport.xScale.set(layout.xScale);
+            this.viewport.yScale.set(layout.yScale);
+        });
+    }
+    pointAriaLabel(p) {
+        return `${p.seriesKey}: x=${p.rawX}, y=${p.rawY}`;
+    }
+    emitClick(p) {
+        this.pointClick.emit({
+            seriesKey: p.seriesKey,
+            datumIndex: p.datumIndex,
+            x: p.rawX,
+            y: p.rawY,
+            datum: this.data()[p.datumIndex],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ScatterChart, isStandalone: true, selector: "ui-scatter-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, yKey: { classPropertyName: "yKey", publicName: "yKey", isSignal: true, isRequired: true, transformFunction: null }, sizeKey: { classPropertyName: "sizeKey", publicName: "sizeKey", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, minPointRadius: { classPropertyName: "minPointRadius", publicName: "minPointRadius", isSignal: true, isRequired: false, transformFunction: null }, maxPointRadius: { classPropertyName: "maxPointRadius", publicName: "maxPointRadius", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [ScatterViewportContext], ngImport: i0, template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:defs>
+        <svg:clipPath [attr.id]="clipPathId()">
+          <svg:rect x="0" y="0" [attr.width]="innerWidth()" [attr.height]="innerHeight()" />
+        </svg:clipPath>
+      </svg:defs>
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g class="chart-scatter" [attr.clip-path]="'url(#' + clipPathId() + ')'">
+          @for (p of layout().points; track p.datumIndex) {
+            <svg:circle
+              class="chart-scatter-point cursor-pointer transition-opacity hover:opacity-80"
+              [attr.cx]="p.x"
+              [attr.cy]="p.y"
+              [attr.r]="p.radius"
+              [attr.fill]="p.color"
+              [attr.aria-label]="pointAriaLabel(p)"
+              tabindex="0"
+              (click)="emitClick(p)"
+              (keydown.enter)="emitClick(p)"
+              (keydown.space)="emitClick(p); $event.preventDefault()" />
+          }
+        </svg:g>
+        <ng-content select="svg:g[ui-chart-brush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-legend" />
+    <ng-content select="ui-chart-zoom-controls" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ScatterChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-scatter-chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [ScatterViewportContext],
+                    host: { class: 'relative block h-full w-full' },
+                    template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:defs>
+        <svg:clipPath [attr.id]="clipPathId()">
+          <svg:rect x="0" y="0" [attr.width]="innerWidth()" [attr.height]="innerHeight()" />
+        </svg:clipPath>
+      </svg:defs>
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g class="chart-scatter" [attr.clip-path]="'url(#' + clipPathId() + ')'">
+          @for (p of layout().points; track p.datumIndex) {
+            <svg:circle
+              class="chart-scatter-point cursor-pointer transition-opacity hover:opacity-80"
+              [attr.cx]="p.x"
+              [attr.cy]="p.y"
+              [attr.r]="p.radius"
+              [attr.fill]="p.color"
+              [attr.aria-label]="pointAriaLabel(p)"
+              tabindex="0"
+              (click)="emitClick(p)"
+              (keydown.enter)="emitClick(p)"
+              (keydown.space)="emitClick(p); $event.preventDefault()" />
+          }
+        </svg:g>
+        <ng-content select="svg:g[ui-chart-brush]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ui-chart-legend" />
+    <ng-content select="ui-chart-zoom-controls" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], yKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "yKey", required: true }] }], sizeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeKey", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], minPointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "minPointRadius", required: false }] }], maxPointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPointRadius", required: false }] }], xDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomain", required: false }] }], yDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomain", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
+
+/*
+ * Public API Surface of @ojiepermana/angular/chart
+ */
+// Core
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AreaChart, BarChart, CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, ChartAxisX, ChartAxisY, ChartBrush, ChartContainer, ChartContext, ChartCrosshair, ChartGrid, ChartLegend, ChartPointerTracker, ChartStyle, ChartTooltip, ChartZoomControls, LineChart, PieCenter, PieChart, RadarChart, RadialCenter, RadialChart, ScatterChart, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeBarLayout, computeLineLayout, computePieLayout, computeRadarLayout, computeRadialLayout, computeScatterLayout, effectiveIndexRange, indexRangeSize, linearTicks, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, resolveScatterDomains, seriesColorVar, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain };
+//# sourceMappingURL=ojiepermana-angular-chart.mjs.map