@ojiepermana/angular 22.1.13 → 22.2.0

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

@@ -1,200 +1,241 @@
-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';
-
+import { scaleLinear } from "d3-scale";
+import { extent } from "d3-array";
+import { ChartContext, ChartDataTable, ChartMarkFocus, ChartRovingFocus, ChartThemeSpace, DEFAULT_CARTESIAN_MARGIN_UNITS, ScatterViewportContext, readNumber, resolveChartMargin, resolveChartStyle, seriesColorVar, setupCartesianChart } from "@ojiepermana/angular/chart/core";
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output } from "@angular/core";
 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];
+	const [lo, hi] = extent;
+	if (lo === void 0 || hi === void 0) 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))),
-    };
+	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 };
+	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";
+	return {
+		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
+			}];
+		}),
+		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: `
+var ScatterChart = class ScatterChart {
+	root = inject(ChartContext);
+	viewport = inject(ScatterViewportContext);
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	xKey = input.required(...ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []);
+	yKey = input.required(...ngDevMode ? [{ debugName: "yKey" }] : /* istanbul ignore next */ []);
+	sizeKey = input(void 0, ...ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []);
+	seriesKey = input(void 0, ...ngDevMode ? [{ debugName: "seriesKey" }] : /* istanbul ignore next */ []);
+	styleVariant = input(void 0, ...ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []);
+	styles = input("base", ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+	themeSpace = inject(ChartThemeSpace);
+	margin = input(null, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
+	plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
+	minPointRadius = input(3, ...ngDevMode ? [{ debugName: "minPointRadius" }] : /* istanbul ignore next */ []);
+	maxPointRadius = input(12, ...ngDevMode ? [{ debugName: "maxPointRadius" }] : /* istanbul ignore next */ []);
+	xDomain = input(void 0, ...ngDevMode ? [{ debugName: "xDomain" }] : /* istanbul ignore next */ []);
+	yDomain = input(void 0, ...ngDevMode ? [{ debugName: "yDomain" }] : /* istanbul ignore next */ []);
+	pointClick = output();
+	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,
+				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()
+	}), ...ngDevMode ? [{ debugName: "resolvedDomains" }] : /* istanbul ignore next */ []);
+	currentXDomain = computed(() => this.viewport.zoomXDomain() ?? this.resolvedDomains().xDomain, ...ngDevMode ? [{ debugName: "currentXDomain" }] : /* istanbul ignore next */ []);
+	currentYDomain = computed(() => this.viewport.zoomYDomain() ?? this.resolvedDomains().yDomain, ...ngDevMode ? [{ debugName: "currentYDomain" }] : /* istanbul ignore next */ []);
+	layout = computed(() => computeScatterLayout({
+		data: this.data(),
+		xKey: this.xKey(),
+		yKey: this.yKey(),
+		sizeKey: this.sizeKey(),
+		seriesKey: this.seriesKey(),
+		seriesKeys: this.root.visibleSeriesKeys(),
+		innerWidth: this.cx.innerWidth(),
+		innerHeight: this.cx.innerHeight(),
+		minPointRadius: this.minPointRadius(),
+		maxPointRadius: this.maxPointRadius(),
+		xDomain: this.currentXDomain(),
+		yDomain: this.currentYDomain()
+	}), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	clipPathId = computed(() => `${this.root.id()}-scatter-clip`, ...ngDevMode ? [{ debugName: "clipPathId" }] : /* istanbul ignore next */ []);
+	ariaSummary = computed(() => `Scatter chart, ${this.data().length} points.`, ...ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []);
+	dataColumns = computed(() => [this.xKey(), this.yKey()], ...ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ScatterChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		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"
@@ -242,16 +283,53 @@ class ScatterChart {
     <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: `
+  `,
+		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.2.0",
+	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"
@@ -299,12 +377,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <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 };
+  `
+		}]
+	}],
+	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"]
+		}]
+	}
+});
+export { ScatterChart, computeScatterLayout, resolveScatterDomains };