@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,299 @@
-export * from '@ojiepermana/angular-chart/radial';
+import { arc } from 'd3-shape';
+import { max } from 'd3-array';
+import { readNumber, seriesColorVar, ChartContext, ChartThemeRadius, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_POLAR_MARGIN_UNITS, setupPolarChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function computeRadialLayout(input) {
+    const { data, nameKey, valueKey, innerWidth, innerHeight, seriesKeys, hiddenSeriesKeys, trackPadding, startAngle, endAngle, cornerRadius, } = input;
+    const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+    const centerX = innerWidth / 2;
+    const centerY = innerHeight / 2;
+    // `datumIndex` is carried through the filter, so a track keeps addressing the
+    // row it came from however many siblings the legend has hidden.
+    const entries = data
+        .map((datum, datumIndex) => ({
+        datum,
+        datumIndex,
+        seriesKey: seriesKeys?.[datumIndex] ?? String(datum[nameKey] ?? datumIndex),
+    }))
+        .filter((entry) => !hiddenSeriesKeys?.has(entry.seriesKey));
+    if (entries.length === 0 || outerRadius === 0) {
+        return { centerX, centerY, outerRadius, bars: [], maxValue: 0 };
+    }
+    const maxValue = input.maxValue ?? max(data, (d) => readNumber(d, valueKey)) ?? 1;
+    const trackCount = entries.length;
+    const safeTrackPadding = trackCount > 1
+        ? Math.min(Math.max(trackPadding, 0), outerRadius / (trackCount - 1))
+        : Math.max(trackPadding, 0);
+    const availableRadius = Math.max(0, outerRadius - (trackCount - 1) * safeTrackPadding);
+    const trackThickness = availableRadius / trackCount;
+    const bars = entries.map((entry, i) => {
+        const { datum: d, datumIndex, seriesKey: key } = entry;
+        const inner = i * (trackThickness + safeTrackPadding);
+        const outer = inner + trackThickness;
+        const value = readNumber(d, valueKey);
+        const pct = maxValue === 0 ? 0 : value / maxValue;
+        const sweep = (endAngle - startAngle) * pct;
+        const valueEndAngle = startAngle + sweep;
+        const arcGen = arc()
+            .innerRadius(inner)
+            .outerRadius(outer)
+            .cornerRadius(cornerRadius);
+        return {
+            seriesKey: key,
+            name: String(d[nameKey] ?? key),
+            value,
+            datumIndex,
+            color: seriesColorVar(key),
+            arcPath: arcGen.startAngle(startAngle).endAngle(valueEndAngle)(null) ?? '',
+            backgroundPath: arcGen.startAngle(startAngle).endAngle(endAngle)(null) ?? '',
+            innerRadius: inner,
+            outerRadius: outer,
+            endAngle: valueEndAngle,
+        };
+    });
+    return { centerX, centerY, outerRadius, bars, maxValue };
+}
+
+const defaultRadialValueFormatter = (value) => `${value}`;
+class RadialChart {
+    root = inject(ChartContext);
+    themeRadius = inject(ChartThemeRadius);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    nameKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
+    valueKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    seriesKeys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    /**
+     * Presentational style of the chart.
+     *
+     * Replaces `styles`, which read like a CSS styles bag rather than a single
+     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
+     * publishes a `variant` input for its grouped versus stacked axis, and one
+     * name cannot mean two things across the family.
+     */
+    styleVariant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
+     *   `styleVariant` wins. Due for removal in the next major.
+     */
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    /** The style actually in effect. Bind this, never `styles()`. */
+    chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+    themeSpace = inject(ChartThemeSpace);
+    /**
+     * Plot gutters. Leave it unset and they follow the theme-space density
+     * axis; set it and your numbers win, unchanged, whatever the axis says.
+     */
+    margin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** The margin actually in effect. Bind this, never `margin()`. */
+    plotMargin = resolveChartMargin(this.margin, DEFAULT_POLAR_MARGIN_UNITS, this.themeSpace);
+    trackPadding = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    startAngle = input(-Math.PI / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
+    endAngle = input((3 * Math.PI) / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    showTrack = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultRadialValueFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    barClick = output();
+    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
+    polar = setupPolarChart({ margin: () => this.plotMargin() });
+    layout = computed(() => computeRadialLayout({
+        data: this.data(),
+        nameKey: this.nameKey(),
+        valueKey: this.valueKey(),
+        seriesKeys: this.seriesKeys(),
+        hiddenSeriesKeys: this.root.hiddenSeries(),
+        innerWidth: this.polar.innerWidth(),
+        innerHeight: this.polar.innerHeight(),
+        trackPadding: this.trackPadding(),
+        startAngle: this.startAngle(),
+        endAngle: this.endAngle(),
+        cornerRadius: this.resolvedCornerRadius(),
+        maxValue: this.maxValue(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Radial bar chart, ${this.layout().bars.length} tracks.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    dataColumns = computed(() => [this.nameKey(), this.valueKey()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
+    barAriaLabel(b) {
+        return `${b.name}: ${b.value}`;
+    }
+    formatValueLabel(b) {
+        return this.valueLabelFormat()(b.value, b.name);
+    }
+    barLabelX(b) {
+        const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
+        return Math.sin(b.endAngle) * radius;
+    }
+    barLabelY(b) {
+        const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
+        return -Math.cos(b.endAngle) * radius;
+    }
+    barLabelAnchor(b) {
+        return this.barLabelX(b) >= 0 ? 'start' : 'end';
+    }
+    emitClick(b) {
+        this.barClick.emit({
+            seriesKey: b.seriesKey,
+            datumIndex: b.datumIndex,
+            // `category` is the shared name for what this family calls `name`; both are
+            // emitted so a handler written against either shape works.
+            category: b.name,
+            name: b.name,
+            value: b.value,
+            datum: this.data()[b.datumIndex],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: RadialChart, isStandalone: true, selector: "ChartRadial", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, trackPadding: { classPropertyName: "trackPadding", publicName: "trackPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <svg:svg
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="polar.viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="polar.innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (b of layout().bars; track b.seriesKey) {
+            @if (showTrack()) {
+              <svg:path class="chart-radial-track fill-muted" [attr.d]="b.backgroundPath" />
+            }
+            <svg:path
+              ChartMarkFocus
+              class="chart-radial-bar cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="b.arcPath"
+              [attr.fill]="b.color"
+              [attr.aria-label]="barAriaLabel(b)"
+              role="img"
+              tabindex="0"
+              (click)="emitClick(b)"
+              (keydown.enter)="emitClick(b)"
+              (keydown.space)="emitClick(b); $event.preventDefault()"
+              (pointerenter)="polar.setActivePoint($event, b)"
+              (pointermove)="polar.setActivePoint($event, b)"
+              (pointerleave)="polar.clearActivePoint()"
+              (focus)="polar.setActivePoint($event, b)"
+              (blur)="polar.clearActivePoint()"
+            />
+            @if (showValueLabels()) {
+              <svg:text
+                class="chart-radial-value pointer-events-none fill-muted-foreground text-2xs"
+                [attr.x]="barLabelX(b)"
+                [attr.y]="barLabelY(b)"
+                [attr.text-anchor]="barLabelAnchor(b)"
+                dominant-baseline="middle"
+              >
+                {{ formatValueLabel(b) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ChartRadialCenter" />
+    </div>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="nameKey()"
+      [label]="ariaSummary()"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartRovingFocus, selector: "svg[ChartRovingFocus]" }, { kind: "directive", type: ChartMarkFocus, selector: "[ChartMarkFocus]" }, { kind: "component", type: ChartDataTable, selector: "ChartDataTable", inputs: ["data", "columns", "label", "rowHeaderKey"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadialChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartRadial',
+                    imports: [ChartRovingFocus, ChartMarkFocus, ChartDataTable],
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
+                    template: `
+    <svg:svg
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="polar.viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="polar.innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (b of layout().bars; track b.seriesKey) {
+            @if (showTrack()) {
+              <svg:path class="chart-radial-track fill-muted" [attr.d]="b.backgroundPath" />
+            }
+            <svg:path
+              ChartMarkFocus
+              class="chart-radial-bar cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="b.arcPath"
+              [attr.fill]="b.color"
+              [attr.aria-label]="barAriaLabel(b)"
+              role="img"
+              tabindex="0"
+              (click)="emitClick(b)"
+              (keydown.enter)="emitClick(b)"
+              (keydown.space)="emitClick(b); $event.preventDefault()"
+              (pointerenter)="polar.setActivePoint($event, b)"
+              (pointermove)="polar.setActivePoint($event, b)"
+              (pointerleave)="polar.clearActivePoint()"
+              (focus)="polar.setActivePoint($event, b)"
+              (blur)="polar.clearActivePoint()"
+            />
+            @if (showValueLabels()) {
+              <svg:text
+                class="chart-radial-value pointer-events-none fill-muted-foreground text-2xs"
+                [attr.x]="barLabelX(b)"
+                [attr.y]="barLabelY(b)"
+                [attr.text-anchor]="barLabelAnchor(b)"
+                dominant-baseline="middle"
+              >
+                {{ formatValueLabel(b) }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ChartRadialCenter" />
+    </div>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="nameKey()"
+      [label]="ariaSummary()"
+    />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameKey", required: true }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: true }] }], seriesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKeys", required: false }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], trackPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], startAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAngle", required: false }] }], endAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAngle", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { RadialChart, computeRadialLayout };

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

@@ -1,7 +1,310 @@
-export * from '@ojiepermana/angular-chart/scatter';
+import { scaleLinear } from 'd3-scale';
+import { extent } from 'd3-array';
+import { readNumber, seriesColorVar, ChartContext, ScatterViewportContext, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_CARTESIAN_MARGIN_UNITS, setupCartesianChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function nice(extent) {
+    const [lo, hi] = extent;
+    if (lo === undefined || hi === undefined)
+        return [0, 1];
+    if (lo === hi)
+        return [lo - 1, hi + 1];
+    return [lo, hi];
+}
+function resolveScatterDomains(input) {
+    const xValues = input.data.map((d) => readNumber(d, input.xKey));
+    const yValues = input.data.map((d) => readNumber(d, input.yKey));
+    return {
+        xDomain: (input.xDomain ?? nice(extent(xValues))),
+        yDomain: (input.yDomain ?? nice(extent(yValues))),
+    };
+}
+function computeScatterLayout(input) {
+    const { data, xKey, yKey, sizeKey, seriesKey, seriesKeys, innerWidth, innerHeight, minPointRadius, maxPointRadius, } = input;
+    const xValues = data.map((d) => readNumber(d, xKey));
+    const yValues = data.map((d) => readNumber(d, yKey));
+    const sizeValues = sizeKey ? data.map((d) => readNumber(d, sizeKey)) : [];
+    const { xDomain, yDomain } = resolveScatterDomains(input);
+    const xScale = scaleLinear()
+        .domain(xDomain)
+        .range([0, innerWidth]);
+    const yScale = scaleLinear()
+        .domain(yDomain)
+        .range([innerHeight, 0]);
+    let sizeScale = null;
+    if (sizeKey && sizeValues.length > 0) {
+        const [sLo, sHi] = extent(sizeValues);
+        sizeScale = scaleLinear()
+            .domain([sLo ?? 0, sHi ?? 1])
+            .range([minPointRadius, maxPointRadius]);
+    }
+    const fallbackKey = seriesKeys[0] ?? 'value';
+    const points = data.flatMap((d, i) => {
+        const key = seriesKey ? String(d[seriesKey] ?? fallbackKey) : fallbackKey;
+        const sz = sizeKey ? readNumber(d, sizeKey) : 0;
+        const rawX = xValues[i];
+        const rawY = yValues[i];
+        if (rawX < xDomain[0] || rawX > xDomain[1] || rawY < yDomain[0] || rawY > yDomain[1]) {
+            return [];
+        }
+        return [
+            {
+                seriesKey: key,
+                color: seriesColorVar(key),
+                x: xScale(rawX),
+                y: yScale(rawY),
+                radius: sizeScale ? sizeScale(sz) : minPointRadius,
+                datumIndex: i,
+                rawX,
+                rawY,
+                rawSize: sz,
+            },
+        ];
+    });
+    return { points, xScale, yScale, xDomain, yDomain };
+}
+
+/**
+ * Scatter chart — one dot per datum. Both axes are linear; color can
+ * come from a fixed series key or per-row via `seriesKey` field. Point
+ * radius optionally scales with `sizeKey`.
+ */
+class ScatterChart {
+    root = inject(ChartContext);
+    viewport = inject(ScatterViewportContext);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    yKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yKey" }] : /* istanbul ignore next */ []));
+    /** Optional numeric field to drive point radius. */
+    sizeKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []));
+    /** Optional field on each datum used as color key. */
+    seriesKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Presentational style of the chart.
+     *
+     * Replaces `styles`, which read like a CSS styles bag rather than a single
+     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
+     * publishes a `variant` input for its grouped versus stacked axis, and one
+     * name cannot mean two things across the family.
+     */
+    styleVariant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
+     *   `styleVariant` wins. Due for removal in the next major.
+     */
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    /** The style actually in effect. Bind this, never `styles()`. */
+    chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+    themeSpace = inject(ChartThemeSpace);
+    /**
+     * Plot gutters. Leave it unset and they follow the theme-space density
+     * axis; set it and your numbers win, unchanged, whatever the axis says.
+     */
+    margin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** The margin actually in effect. Bind this, never `margin()`. */
+    plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
+    minPointRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minPointRadius" }] : /* istanbul ignore next */ []));
+    maxPointRadius = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxPointRadius" }] : /* istanbul ignore next */ []));
+    xDomain = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xDomain" }] : /* istanbul ignore next */ []));
+    yDomain = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yDomain" }] : /* istanbul ignore next */ []));
+    pointClick = output();
+    /**
+     * The shared cartesian scaffolding. Scatter uses the geometry, the layout
+     * effect, and the click plus active-point plus aria-label handlers; it has no
+     * `CartesianContext` of its own (it publishes to a `ScatterViewportContext`
+     * instead) and no index window, so it passes neither `cartesian` nor
+     * `viewport`.
+     *
+     * Declared before `layout` because the layout computed reads its geometry.
+     */
+    cx = setupCartesianChart({
+        data: () => this.data(),
+        margin: () => this.plotMargin(),
+        publishLayout: (inner) => {
+            const domains = this.resolvedDomains();
+            const layout = this.layout();
+            this.viewport.innerWidth.set(inner.width);
+            this.viewport.innerHeight.set(inner.height);
+            this.viewport.fullXDomain.set(domains.xDomain);
+            this.viewport.fullYDomain.set(domains.yDomain);
+            this.viewport.xScale.set(layout.xScale);
+            this.viewport.yScale.set(layout.yScale);
+        },
+        click: {
+            emit: (event) => this.pointClick.emit(event),
+            payload: (point, datumIndex, datum) => ({
+                seriesKey: point.seriesKey,
+                datumIndex,
+                // A scatter point has no category of its own, so the shared fields carry
+                // the pair it does have: x as the label, y as the magnitude. `x` and `y`
+                // stay for handlers that want the raw numbers.
+                category: String(point.rawX),
+                value: point.rawY,
+                x: point.rawX,
+                y: point.rawY,
+                datum,
+            }),
+        },
+        ariaLabel: (point) => `${point.seriesKey}: x=${point.rawX}, y=${point.rawY}`,
+    });
+    resolvedDomains = computed(() => resolveScatterDomains({
+        data: this.data(),
+        xKey: this.xKey(),
+        yKey: this.yKey(),
+        xDomain: this.xDomain(),
+        yDomain: this.yDomain(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDomains" }] : /* istanbul ignore next */ []));
+    currentXDomain = computed(() => this.viewport.zoomXDomain() ?? this.resolvedDomains().xDomain, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentXDomain" }] : /* istanbul ignore next */ []));
+    currentYDomain = computed(() => this.viewport.zoomYDomain() ?? this.resolvedDomains().yDomain, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentYDomain" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computeScatterLayout({
+        data: this.data(),
+        xKey: this.xKey(),
+        yKey: this.yKey(),
+        sizeKey: this.sizeKey(),
+        seriesKey: this.seriesKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        innerWidth: this.cx.innerWidth(),
+        innerHeight: this.cx.innerHeight(),
+        minPointRadius: this.minPointRadius(),
+        maxPointRadius: this.maxPointRadius(),
+        xDomain: this.currentXDomain(),
+        yDomain: this.currentYDomain(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    clipPathId = computed(() => `${this.root.id()}-scatter-clip`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clipPathId" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Scatter chart, ${this.data().length} points.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    dataColumns = computed(() => [this.xKey(), this.yKey()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ScatterChart, isStandalone: true, selector: "ChartScatter", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, yKey: { classPropertyName: "yKey", publicName: "yKey", isSignal: true, isRequired: true, transformFunction: null }, sizeKey: { classPropertyName: "sizeKey", publicName: "sizeKey", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, minPointRadius: { classPropertyName: "minPointRadius", publicName: "minPointRadius", isSignal: true, isRequired: false, transformFunction: null }, maxPointRadius: { classPropertyName: "maxPointRadius", publicName: "maxPointRadius", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, providers: [ScatterViewportContext], ngImport: i0, template: `
+    <svg:svg
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:defs>
+        <svg:clipPath [attr.id]="clipPathId()">
+          <svg:rect x="0" y="0" [attr.width]="cx.innerWidth()" [attr.height]="cx.innerHeight()" />
+        </svg:clipPath>
+      </svg:defs>
+      <svg:g [attr.transform]="cx.innerTransform()">
+        <!-- The brush hitbox is slotted first so it sits UNDER the points: it is
+             a hit-testable rect, and on top it swallowed every click, hover and
+             cursor affordance the points publish. -->
+        <ng-content select="svg:g[ChartBrush]" />
+        <svg:g class="chart-scatter" [attr.clip-path]="'url(#' + clipPathId() + ')'">
+          @for (p of layout().points; track p.datumIndex) {
+            <svg:circle
+              ChartMarkFocus
+              class="chart-scatter-point cursor-pointer transition-opacity hover:opacity-80"
+              [attr.cx]="p.x"
+              [attr.cy]="p.y"
+              [attr.r]="p.radius"
+              [attr.fill]="p.color"
+              [attr.aria-label]="cx.pointAriaLabel(p)"
+              role="img"
+              tabindex="0"
+              (pointerenter)="cx.setActivePoint($event, p)"
+              (pointermove)="cx.setActivePoint($event, p)"
+              (pointerleave)="cx.clearActivePoint()"
+              (focus)="cx.setActivePoint($event, p)"
+              (blur)="cx.clearActivePoint()"
+              (click)="cx.emitClick(p)"
+              (keydown.enter)="cx.emitClick(p)"
+              (keydown.space)="cx.emitClick(p); $event.preventDefault()"
+            />
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+    <ChartDataTable [data]="data()" [columns]="dataColumns()" [label]="ariaSummary()" />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartRovingFocus, selector: "svg[ChartRovingFocus]" }, { kind: "directive", type: ChartMarkFocus, selector: "[ChartMarkFocus]" }, { kind: "component", type: ChartDataTable, selector: "ChartDataTable", inputs: ["data", "columns", "label", "rowHeaderKey"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ScatterChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartScatter',
+                    providers: [ScatterViewportContext],
+                    imports: [ChartRovingFocus, ChartMarkFocus, ChartDataTable],
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
+                    template: `
+    <svg:svg
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:defs>
+        <svg:clipPath [attr.id]="clipPathId()">
+          <svg:rect x="0" y="0" [attr.width]="cx.innerWidth()" [attr.height]="cx.innerHeight()" />
+        </svg:clipPath>
+      </svg:defs>
+      <svg:g [attr.transform]="cx.innerTransform()">
+        <!-- The brush hitbox is slotted first so it sits UNDER the points: it is
+             a hit-testable rect, and on top it swallowed every click, hover and
+             cursor affordance the points publish. -->
+        <ng-content select="svg:g[ChartBrush]" />
+        <svg:g class="chart-scatter" [attr.clip-path]="'url(#' + clipPathId() + ')'">
+          @for (p of layout().points; track p.datumIndex) {
+            <svg:circle
+              ChartMarkFocus
+              class="chart-scatter-point cursor-pointer transition-opacity hover:opacity-80"
+              [attr.cx]="p.x"
+              [attr.cy]="p.y"
+              [attr.r]="p.radius"
+              [attr.fill]="p.color"
+              [attr.aria-label]="cx.pointAriaLabel(p)"
+              role="img"
+              tabindex="0"
+              (pointerenter)="cx.setActivePoint($event, p)"
+              (pointermove)="cx.setActivePoint($event, p)"
+              (pointerleave)="cx.clearActivePoint()"
+              (focus)="cx.setActivePoint($event, p)"
+              (blur)="cx.clearActivePoint()"
+              (click)="cx.emitClick(p)"
+              (keydown.enter)="cx.emitClick(p)"
+              (keydown.space)="cx.emitClick(p); $event.preventDefault()"
+            />
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+    <ChartDataTable [data]="data()" [columns]="dataColumns()" [label]="ariaSummary()" />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], yKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "yKey", required: true }] }], sizeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizeKey", required: false }] }], seriesKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKey", required: false }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], minPointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "minPointRadius", required: false }] }], maxPointRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPointRadius", required: false }] }], xDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "xDomain", required: false }] }], yDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "yDomain", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ScatterChart, computeScatterLayout, resolveScatterDomains };

package/fesm2022/ojiepermana-angular-chart.mjs

@@ -1,8 +1,17 @@
-export * from '@ojiepermana/angular-chart';
+export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartStyle, DEFAULT_CARTESIAN_MARGIN, DEFAULT_POLAR_MARGIN, DEFAULT_RADAR_MARGIN, ScatterViewportContext, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, escapeCssIdent, indexRangeSize, isSafeCssColorValue, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, resolveChartStyle, resolveSeriesColor, seriesColorVar, setupCartesianChart, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain } from '@ojiepermana/angular/chart/core';
+export { ChartAxisX, ChartAxisY, ChartBrush, ChartCrosshair, ChartGrid, ChartLegend, ChartPointerTracker, ChartTooltip, ChartZoomControls, PieCenter, RadialCenter } from '@ojiepermana/angular/chart/primitives';
 
 /*
- * Public API of @ojiepermana/angular/chart
- * Re-exports the independent @ojiepermana/angular-chart package.
+ * Public API Surface of @ojiepermana/angular/chart
+ *
+ * Hanya core + primitives (kebutuhan bersama semua chart). Famili chart
+ * diimpor lewat entry point masing-masing, mis. `@ojiepermana/angular/chart/bar`,
+ * supaya aplikasi hanya membundel jenis chart yang dipakai.
+ */
+/*
+ * Re-export per nama (bukan `export *`): entry point ini menjadi modul shared
+ * native federation, dan esbuild tidak bisa meneruskan named export melalui
+ * `export *` dari modul external — konsumen akan gagal resolve saat runtime.
  */
 
 /**