@ojiepermana/angular 22.0.1 → 22.0.27

package/fesm2022/ojiepermana-angular-component-chart.mjs

@@ -1,3925 +0,0 @@
-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('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    /** User-provided series config. */
-    config = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
-    /** Measured render-area dimensions (ResizeObserver-driven). */
-    dimensions = signal({ width: 0, height: 0 }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
-    /** Currently highlighted data point (tooltip / crosshair). */
-    activePoint = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []));
-    /** Series keys the user has toggled off via legend. */
-    hiddenSeries = signal(new Set(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []));
-    /** Ordered list of series keys (from `config`). */
-    seriesKeys = computed(() => Object.keys(this.config()), /* @ts-ignore */
-    ...(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));
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartContext });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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()), /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ChartStyle, isStandalone: true, selector: "ui-chart-style", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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(/* @ts-ignore */
-    ...(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', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
-    hostClass = computed(() => `relative flex ${this.aspect()} justify-center text-xs`, /* @ts-ignore */
-    ...(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, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", 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: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    /** Inner height (outer height − margin.top − margin.bottom). */
-    innerHeight = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    /** Margins around the plotting area. */
-    margin = signal({ top: 8, right: 8, bottom: 24, left: 40 }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    /** Layout orientation (drives which axis holds the band scale). */
-    orientation = signal('vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    /** Band (categorical) scale. */
-    categoryScale = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryScale" }] : /* istanbul ignore next */ []));
-    /** Linear (numeric) scale. */
-    valueScale = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueScale" }] : /* istanbul ignore next */ []));
-    /** Ordered category domain (e.g. x labels for vertical, y labels for horizontal). */
-    categories = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CartesianContext });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
-    /** Show 6-px tick marks between the axis line and the labels. */
-    tickLine = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
-    /** Formatter for numeric tick labels. */
-    tickFormat = input((v) => String(v), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
-    innerWidth = this.ctx.innerWidth;
-    transform = computed(() => `translate(0,${this.ctx.innerHeight()})`, /* @ts-ignore */
-    ...(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) : [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
-    tickLine = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
-    tickFormat = input((v) => String(v), /* @ts-ignore */
-    ...(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()) : [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
-    ticks = computed(() => {
-        const scale = this.ctx.valueScale();
-        return scale ? linearTicks(scale, this.tickCount()) : [];
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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 };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataCount" }] : /* istanbul ignore next */ []));
-    brushRange = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "brushRange" }] : /* istanbul ignore next */ []));
-    zoomRange = signal(null, /* @ts-ignore */
-    ...(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);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
-    resetZoom() {
-        this.brushRange.set(null);
-        this.zoomRange.set(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoricalViewportContext });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoricalViewportContext, decorators: [{
-            type: Injectable
-        }] });
-
-class ScatterViewportContext {
-    innerWidth = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    fullXDomain = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fullXDomain" }] : /* istanbul ignore next */ []));
-    fullYDomain = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fullYDomain" }] : /* istanbul ignore next */ []));
-    zoomXDomain = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zoomXDomain" }] : /* istanbul ignore next */ []));
-    zoomYDomain = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "zoomYDomain" }] : /* istanbul ignore next */ []));
-    xScale = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []));
-    yScale = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []));
-    hasZoom = computed(() => this.zoomXDomain() !== null || this.zoomYDomain() !== null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
-    resetZoom() {
-        this.zoomXDomain.set(null);
-        this.zoomYDomain.set(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterViewportContext });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    activePointerId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activePointerId" }] : /* istanbul ignore next */ []));
-    categoryStartIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryStartIndex" }] : /* istanbul ignore next */ []));
-    categoryPanStart = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryPanStart" }] : /* istanbul ignore next */ []));
-    scatterBrush = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scatterBrush" }] : /* istanbul ignore next */ []));
-    scatterPan = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scatterPan" }] : /* istanbul ignore next */ []));
-    width = computed(() => this.scatter?.innerWidth() ?? this.cart?.innerWidth() ?? 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    height = computed(() => this.scatter?.innerHeight() ?? this.cart?.innerHeight() ?? 0, /* @ts-ignore */
-    ...(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) };
-    }, /* @ts-ignore */
-    ...(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),
-        };
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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: "22.0.0", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[uiChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", 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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    /** Data source (optional — if omitted tooltip reads from chart data via activePoint.datumIndex). */
-    data = input(null, /* @ts-ignore */
-    ...(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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
-    /** Indicator variant next to each row. Default `'dot'`. */
-    indicator = input('dot', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
-    /** Hide the header label entirely. */
-    hideLabel = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
-    /** Override the header label with a fixed string. Takes precedence over `labelKey`. */
-    label = input(null, /* @ts-ignore */
-    ...(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, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
-    /** Transform the final header string (e.g. ISO date → long date). */
-    labelFormatter = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelFormatter" }] : /* istanbul ignore next */ []));
-    /** Format each row's value (return string — HTML is not interpreted). */
-    formatter = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
-    customTpl = contentChild((TemplateRef), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customTpl" }] : /* istanbul ignore next */ []));
-    visible = computed(() => this.root.activePoint() !== null, /* @ts-ignore */
-    ...(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 };
-    }, /* @ts-ignore */
-    ...(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 };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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),
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    toggle(key) {
-        this.root.toggleSeries(key);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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;
-    }, /* @ts-ignore */
-    ...(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.';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    resetZoom() {
-        this.categorical?.resetZoom();
-        this.scatter?.resetZoom();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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: "22.0.0", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", 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: "22.0.0", 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: "22.0.0", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    variant = input('grouped', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$6, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    bandPadding = input(0.2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []));
-    groupPadding = input(0.05, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
-    colorKey = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
-    activeKey = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
-    activeValue = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
-    showValueLabels = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
-    valueLabelFormat = input(defaultBarValueFormatter, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
-    barClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    bars = computed(() => this.layout().bars, /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(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(', ')}.`;
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    curve = input('monotone', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$5, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    showDots = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
-    dotColorKey = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotColorKey" }] : /* istanbul ignore next */ []));
-    dotStrokeColor = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotStrokeColor" }] : /* istanbul ignore next */ []));
-    dotStrokeWidth = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotStrokeWidth" }] : /* istanbul ignore next */ []));
-    showValueLabels = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
-    valueLabelFormat = input(defaultLineValueFormatter, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
-    pointClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
-    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    series = computed(() => this.layout().series, /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(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(', ')}.`;
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    stacked = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
-    expanded = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    gradient = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
-    curve = input('monotone', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    showDots = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
-    pointClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
-    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    series = computed(() => this.layout().series, /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(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(', ')}.`;
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    valueKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
-    nameKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
-    seriesKeys = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    innerRadius = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
-    padAngle = input(0.01, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
-    startAngle = input(-Math.PI / 2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
-    endAngle = input((3 * Math.PI) / 2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
-    showLabels = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
-    activeIndex = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    activeOffset = input(12, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeOffset" }] : /* istanbul ignore next */ []));
-    sliceClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Pie chart, ${this.data().length} slices.`, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    axisKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "axisKey" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    curve = input('linear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    levels = input(4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
-    maxValue = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    fillOpacity = input(0.2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []));
-    showLabels = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
-    showDots = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
-    grid = input('circle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
-    gridFilled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []));
-    showAxes = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []));
-    linesOnly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []));
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => {
-        const keys = this.root.visibleSeriesKeys();
-        return `Radar chart, ${this.data().length} axes, ${keys.length} series.`;
-    }, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    nameKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
-    valueKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
-    seriesKeys = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    trackPadding = input(4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(8, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
-    startAngle = input(-Math.PI / 2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
-    endAngle = input((3 * Math.PI) / 2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
-    maxValue = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-    showTrack = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
-    showValueLabels = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
-    valueLabelFormat = input(defaultRadialValueFormatter, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
-    barClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Radial bar chart, ${this.data().length} tracks.`, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    yKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "yKey" }] : /* istanbul ignore next */ []));
-    /** Optional numeric field to drive point radius. */
-    sizeKey = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []));
-    /** Optional field on each datum used as color key. */
-    seriesKey = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "seriesKey" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    minPointRadius = input(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minPointRadius" }] : /* istanbul ignore next */ []));
-    maxPointRadius = input(12, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxPointRadius" }] : /* istanbul ignore next */ []));
-    xDomain = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xDomain" }] : /* istanbul ignore next */ []));
-    yDomain = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "yDomain" }] : /* istanbul ignore next */ []));
-    pointClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    resolvedDomains = computed(() => resolveScatterDomains({
-        data: this.data(),
-        xKey: this.xKey(),
-        yKey: this.yKey(),
-        xDomain: this.xDomain(),
-        yDomain: this.yDomain(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedDomains" }] : /* istanbul ignore next */ []));
-    currentXDomain = computed(() => this.viewport.zoomXDomain() ?? this.resolvedDomains().xDomain, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentXDomain" }] : /* istanbul ignore next */ []));
-    currentYDomain = computed(() => this.viewport.zoomYDomain() ?? this.resolvedDomains().yDomain, /* @ts-ignore */
-    ...(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(),
-    }), /* @ts-ignore */
-    ...(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)}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    clipPathId = computed(() => `${this.root.id()}-scatter-clip`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "clipPathId" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Scatter chart, ${this.data().length} points.`, /* @ts-ignore */
-    ...(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: "22.0.0", ngImport: i0, type: ScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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: "22.0.0", 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/component/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-component-chart.mjs.map