@ojiepermana/angular-chart 22.0.27

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

@@ -0,0 +1,1186 @@
+import * as i0 from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, viewChild, signal, Directive, ElementRef, contentChild, TemplateRef } from '@angular/core';
+import { CartesianContext, linearTicks, bandTicks, ChartContext, CategoricalViewportContext, ScatterViewportContext, nearestCategoryIndex, normalizeIndexRange, panIndexRange, panNumericDomain, indexRangeSize, normalizeNumericDomain, zoomNumericDomain, zoomIndexRange, seriesColorVar } from '@ojiepermana/angular-chart/core';
+import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
+
+/**
+ * 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.2", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartAxisX, isStandalone: true, selector: "svg:g[ChartAxisX]", 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.2", ngImport: i0, type: ChartAxisX, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ChartAxisX]',
+                    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.2", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartAxisY, isStandalone: true, selector: "svg:g[ChartAxisY]", 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.2", ngImport: i0, type: ChartAxisY, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ChartAxisY]',
+                    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.2", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartGrid, isStandalone: true, selector: "svg:g[ChartGrid]", 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.2", ngImport: i0, type: ChartGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ChartGrid]',
+                    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.2", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartCrosshair, isStandalone: true, selector: "svg:g[ChartCrosshair]", 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.2", ngImport: i0, type: ChartCrosshair, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ChartCrosshair]',
+                    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" />
+    }
+  `,
+                }]
+        }] });
+
+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.2", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartBrush, isStandalone: true, selector: "svg:g[ChartBrush]", 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.2", ngImport: i0, type: ChartBrush, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg:g[ChartBrush]',
+                    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.2", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[ChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartPointerTracker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'svg:svg[ChartPointerTracker]',
+                    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.2", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartTooltip, isStandalone: true, selector: "ChartTooltip", 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-[hsl(var(--border)/var(--opacity-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.2", ngImport: i0, type: ChartTooltip, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartTooltip',
+                    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-[hsl(var(--border)/var(--opacity-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 `<Chart>`:
+ * ```html
+ * <Chart [config]="cfg">
+ *   <ChartBar ... />
+ *   <ChartLegend />
+ * </Chart>
+ * ```
+ */
+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.2", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartLegend, isStandalone: true, selector: "ChartLegend", 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.2", ngImport: i0, type: ChartLegend, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartLegend',
+                    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.2", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ChartZoomControls, isStandalone: true, selector: "ChartZoomControls", 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.2", ngImport: i0, type: ChartZoomControls, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartZoomControls',
+                    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.2", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: PieCenter, isStandalone: true, selector: "ChartPieCenter", 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.2", ngImport: i0, type: PieCenter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartPieCenter',
+                    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.2", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: RadialCenter, isStandalone: true, selector: "ChartRadialCenter", 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.2", ngImport: i0, type: RadialCenter, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartRadialCenter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'flex max-w-[10rem] flex-col items-center justify-center text-center',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ChartAxisX, ChartAxisY, ChartBrush, ChartCrosshair, ChartGrid, ChartLegend, ChartPointerTracker, ChartTooltip, ChartZoomControls, PieCenter, RadialCenter };
+//# sourceMappingURL=ojiepermana-angular-chart-primitives.mjs.map