@ojiepermana/angular-chart 22.0.27

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

@@ -0,0 +1,764 @@
+import * as i0 from '@angular/core';
+import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { scalePoint, scaleLinear, scaleBand } from 'd3-scale';
+import { max } from 'd3-array';
+import { curveLinear, curveStep, curveMonotoneX, line, area, stack, stackOffsetExpand } 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.2", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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.2", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.2", type: ChartStyle, isStandalone: true, selector: "ChartStyle", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartStyle, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartStyle',
+                    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
+ * <Chart [config]="cfg">
+ *   <ChartBar [data]="data" />
+ *   <ChartLegend />
+ * </Chart>
+ * ```
+ *
+ * The chart render area is laid out on top; any projected `<ChartLegend>` is
+ * rendered as a centered row beneath it. Render-area dimensions are measured on
+ * the chart area only, so the legend never shrinks the chart.
+ */
+class ChartContainer {
+    ctx = inject(ChartContext);
+    zone = inject(NgZone);
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    areaRef = viewChild.required('area');
+    /** Series configuration. Required for color / label resolution. */
+    config = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * Tailwind aspect-ratio utility for the chart render area. Defaults to
+     * `aspect-video` for cartesian charts; override with `aspect-square` for
+     * radial / pie layouts, or e.g. `aspect-auto h-[320px]` for a fixed height.
+     */
+    aspect = input('aspect-video', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
+    areaClass = computed(() => `relative flex ${this.aspect()} w-full justify-center`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "areaClass" }] : /* 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.areaRef().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.2", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.2", type: ChartContainer, isStandalone: true, selector: "Chart", 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()" }, classAttribute: "relative flex flex-col text-xs" }, providers: [ChartContext], viewQueries: [{ propertyName: "areaRef", first: true, predicate: ["area"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ChartStyle />
+    <div #area data-chart-area [class]="areaClass()">
+      <ng-content />
+    </div>
+    <ng-content select="ChartLegend" />
+  `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ChartStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ChartContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Chart',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [ChartContext],
+                    imports: [ChartStyle],
+                    host: {
+                        '[attr.data-chart]': 'ctx.id()',
+                        class: 'relative flex flex-col text-xs',
+                    },
+                    template: `
+    <ChartStyle />
+    <div #area data-chart-area [class]="areaClass()">
+      <ng-content />
+    </div>
+    <ng-content select="ChartLegend" />
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { areaRef: [{ type: i0.ViewChild, args: ['area', { isSignal: true }] }], 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.2", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CartesianContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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;
+}
+
+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.2", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CategoricalViewportContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", 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.2", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ScatterViewportContext });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ScatterViewportContext, decorators: [{
+            type: Injectable
+        }] });
+
+/** 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(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function normalizeIndexRange(start, end, maxCount) {
+    if (maxCount <= 0) {
+        return null;
+    }
+    const lo = clamp(Math.floor(Math.min(start, end)), 0, maxCount - 1);
+    const hi = clamp(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(Math.round(currentSize * factor), 2, maxCount);
+    if (nextSize >= maxCount) {
+        return null;
+    }
+    const boundedAnchor = clamp(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(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(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(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(start, full[0], full[1] - nextWidth);
+    return [start, start + nextWidth];
+}
+function panNumericDomain(current, full, delta) {
+    const width = current[1] - current[0];
+    const start = clamp(current[0] + delta, full[0], full[1] - width);
+    return [start, start + width];
+}
+
+/**
+ * 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 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);
+    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);
+    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`. Line/area points sit on the range edges (the
+ * point scale has zero padding, so the first point touches the y-axis and the
+ * last touches the right edge). We extend the band range by half a step on
+ * each side so band centers — used to position axis ticks — line up exactly
+ * with those edge-touching points.
+ *
+ * This keeps axes/grid primitives agnostic to whether the underlying chart
+ * uses `scaleBand` (bar) or `scalePoint` (line/area).
+ */
+function pointToBandAdapter(pointScale, range) {
+    const half = pointScale.step() / 2;
+    const extended = [range[0] - half, range[1] + half];
+    return scaleBand().domain(pointScale.domain()).range(extended).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);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartStyle, ScatterViewportContext, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, indexRangeSize, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, seriesColorVar, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain };
+//# sourceMappingURL=ojiepermana-angular-chart-core.mjs.map