@ojiepermana/angular 22.1.13 → 22.2.0

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

@@ -1,194 +1,287 @@
-import { curveCardinalClosed, curveLinearClosed, lineRadial } from 'd3-shape';
-import { max } from 'd3-array';
-import { readNumber, seriesColorVar, ChartContext, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_RADAR_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';
-
+import { curveCardinalClosed, curveLinearClosed, lineRadial } from "d3-shape";
+import { max } from "d3-array";
+import { ChartContext, ChartDataTable, ChartMarkFocus, ChartRovingFocus, ChartThemeSpace, DEFAULT_RADAR_MARGIN_UNITS, readNumber, resolveChartMargin, resolveChartStyle, seriesColorVar, setupPolarChart } from "@ojiepermana/angular/chart/core";
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output } from "@angular/core";
 function computeRadarLayout(input) {
-    const { data, axisKey, seriesKeys, innerWidth, innerHeight, levels, curve, grid } = input;
-    const radius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
-    const centerX = innerWidth / 2;
-    const centerY = innerHeight / 2;
-    if (data.length === 0 || seriesKeys.length === 0 || radius === 0) {
-        return { centerX, centerY, radius, axes: [], levels: [], maxValue: 0, series: [], grid };
-    }
-    const maxValue = input.maxValue ?? max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 1;
-    const safeMaxValue = maxValue > 0 ? maxValue : 1;
-    const angleStep = (2 * Math.PI) / data.length;
-    const angleFor = (i) => i * angleStep - Math.PI / 2;
-    const axes = data.map((d, i) => {
-        const angle = angleFor(i);
-        return {
-            name: String(d[axisKey] ?? i),
-            angle,
-            x: Math.cos(angle) * radius,
-            y: Math.sin(angle) * radius,
-        };
-    });
-    const levelValues = Array.from({ length: levels }, (_, index) => {
-        const value = ((index + 1) / levels) * safeMaxValue;
-        const levelRadius = ((index + 1) / levels) * radius;
-        return {
-            value,
-            radius: levelRadius,
-            path: polygonPath(axes.map((axis) => ({
-                x: Math.cos(axis.angle) * levelRadius,
-                y: Math.sin(axis.angle) * levelRadius,
-            }))),
-        };
-    });
-    const curveFactory = curve === 'cardinal' ? curveCardinalClosed : curveLinearClosed;
-    const radial = lineRadial()
-        .angle((point) => point.angle + Math.PI / 2)
-        .radius((point) => (point.value / safeMaxValue) * radius)
-        .curve(curveFactory);
-    const series = seriesKeys.map((seriesKey) => {
-        const points = data.map((datum, index) => {
-            const value = readNumber(datum, seriesKey);
-            const angle = angleFor(index);
-            const pointRadius = (value / safeMaxValue) * radius;
-            return {
-                axis: String(datum[axisKey] ?? index),
-                value,
-                x: Math.cos(angle) * pointRadius,
-                y: Math.sin(angle) * pointRadius,
-            };
-        });
-        return {
-            seriesKey,
-            color: seriesColorVar(seriesKey),
-            path: radial(data.map((datum, index) => ({
-                angle: angleFor(index),
-                value: readNumber(datum, seriesKey),
-            }))) ?? '',
-            points,
-        };
-    });
-    return {
-        centerX,
-        centerY,
-        radius,
-        axes,
-        levels: levelValues,
-        maxValue: safeMaxValue,
-        series,
-        grid,
-    };
+	const { data, axisKey, seriesKeys, innerWidth, innerHeight, levels, curve, grid } = input;
+	const radius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+	const centerX = innerWidth / 2;
+	const centerY = innerHeight / 2;
+	if (data.length === 0 || seriesKeys.length === 0 || radius === 0) return {
+		centerX,
+		centerY,
+		radius,
+		axes: [],
+		levels: [],
+		maxValue: 0,
+		series: [],
+		grid
+	};
+	const maxValue = input.maxValue ?? max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 1;
+	const safeMaxValue = maxValue > 0 ? maxValue : 1;
+	const angleStep = 2 * Math.PI / data.length;
+	const angleFor = (i) => i * angleStep - Math.PI / 2;
+	const axes = data.map((d, i) => {
+		const angle = angleFor(i);
+		return {
+			name: String(d[axisKey] ?? i),
+			angle,
+			x: Math.cos(angle) * radius,
+			y: Math.sin(angle) * radius
+		};
+	});
+	const levelValues = Array.from({ length: levels }, (_, index) => {
+		const value = (index + 1) / levels * safeMaxValue;
+		const levelRadius = (index + 1) / levels * radius;
+		return {
+			value,
+			radius: levelRadius,
+			path: polygonPath(axes.map((axis) => ({
+				x: Math.cos(axis.angle) * levelRadius,
+				y: Math.sin(axis.angle) * levelRadius
+			})))
+		};
+	});
+	const curveFactory = curve === "cardinal" ? curveCardinalClosed : curveLinearClosed;
+	const radial = lineRadial().angle((point) => point.angle + Math.PI / 2).radius((point) => point.value / safeMaxValue * radius).curve(curveFactory);
+	return {
+		centerX,
+		centerY,
+		radius,
+		axes,
+		levels: levelValues,
+		maxValue: safeMaxValue,
+		series: seriesKeys.map((seriesKey) => {
+			const points = data.map((datum, index) => {
+				const value = readNumber(datum, seriesKey);
+				const angle = angleFor(index);
+				const pointRadius = value / safeMaxValue * radius;
+				return {
+					axis: String(datum[axisKey] ?? index),
+					value,
+					x: Math.cos(angle) * pointRadius,
+					y: Math.sin(angle) * pointRadius
+				};
+			});
+			return {
+				seriesKey,
+				color: seriesColorVar(seriesKey),
+				path: radial(data.map((datum, index) => ({
+					angle: angleFor(index),
+					value: readNumber(datum, seriesKey)
+				}))) ?? "",
+				points
+			};
+		}),
+		grid
+	};
 }
 function polygonPath(points) {
-    if (points.length === 0) {
-        return '';
-    }
-    const [first, ...rest] = points;
-    return `M ${first.x} ${first.y} ${rest.map((point) => `L ${point.x} ${point.y}`).join(' ')} Z`;
+	if (points.length === 0) return "";
+	const [first, ...rest] = points;
+	return `M ${first.x} ${first.y} ${rest.map((point) => `L ${point.x} ${point.y}`).join(" ")} Z`;
 }
-
-class RadarChart {
-    root = inject(ChartContext);
-    data = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    axisKey = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "axisKey" }] : /* istanbul ignore next */ []));
-    /**
-     * 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_RADAR_MARGIN_UNITS, this.themeSpace);
-    curve = input('linear', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    levels = input(4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
-    maxValue = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    fillOpacity = input(0.2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []));
-    showLabels = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
-    showDots = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
-    grid = input('circle', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
-    gridFilled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []));
-    showAxes = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []));
-    linesOnly = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []));
-    /**
-     * Emitted when a dot is activated by pointer or keyboard. Radar was the one
-     * chart family a keyboard user could focus but never operate.
-     */
-    pointClick = output();
-    polar = setupPolarChart({ margin: () => this.plotMargin() });
-    layout = computed(() => computeRadarLayout({
-        data: this.data(),
-        axisKey: this.axisKey(),
-        seriesKeys: this.root.visibleSeriesKeys(),
-        innerWidth: this.polar.innerWidth(),
-        innerHeight: this.polar.innerHeight(),
-        maxValue: this.maxValue(),
-        levels: this.levels(),
-        curve: this.curve(),
-        grid: this.grid(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => {
-        const keys = this.root.visibleSeriesKeys();
-        return `Radar chart, ${this.data().length} axes, ${keys.length} series.`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
-    dataColumns = computed(() => [
-        this.axisKey(),
-        ...this.root.visibleSeriesKeys(),
-    ], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
-    gridFill() {
-        return this.gridFilled() ? 'hsl(var(--muted))' : 'none';
-    }
-    gridFillOpacity(levelIndex) {
-        return this.gridFilled() ? Math.max(0.06, 0.18 - levelIndex * 0.02) : null;
-    }
-    dotAriaLabel(seriesKey, p) {
-        const label = this.polar.seriesLabel(seriesKey);
-        return `${label} at ${p.axis}: ${p.value}`;
-    }
-    emitClick(seriesKey, point, datumIndex) {
-        this.pointClick.emit({
-            seriesKey,
-            datumIndex,
-            category: point.axis,
-            value: point.value,
-            datum: this.data()[datumIndex],
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: RadarChart, isStandalone: true, selector: "ChartRadar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, axisKey: { classPropertyName: "axisKey", publicName: "axisKey", isSignal: true, isRequired: true, 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 }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, gridFilled: { classPropertyName: "gridFilled", publicName: "gridFilled", isSignal: true, isRequired: false, transformFunction: null }, showAxes: { classPropertyName: "showAxes", publicName: "showAxes", isSignal: true, isRequired: false, transformFunction: null }, linesOnly: { classPropertyName: "linesOnly", publicName: "linesOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+var RadarChart = class RadarChart {
+	root = inject(ChartContext);
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	axisKey = input.required(...ngDevMode ? [{ debugName: "axisKey" }] : /* 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_RADAR_MARGIN_UNITS, this.themeSpace);
+	curve = input("linear", ...ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []);
+	levels = input(4, ...ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []);
+	maxValue = input(void 0, ...ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []);
+	strokeWidth = input(2, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+	fillOpacity = input(.2, ...ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []);
+	showLabels = input(true, ...ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []);
+	showDots = input(true, ...ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []);
+	dotRadius = input(3, ...ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []);
+	grid = input("circle", ...ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []);
+	gridFilled = input(false, ...ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []);
+	showAxes = input(true, ...ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []);
+	linesOnly = input(false, ...ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []);
+	pointClick = output();
+	polar = setupPolarChart({ margin: () => this.plotMargin() });
+	layout = computed(() => computeRadarLayout({
+		data: this.data(),
+		axisKey: this.axisKey(),
+		seriesKeys: this.root.visibleSeriesKeys(),
+		innerWidth: this.polar.innerWidth(),
+		innerHeight: this.polar.innerHeight(),
+		maxValue: this.maxValue(),
+		levels: this.levels(),
+		curve: this.curve(),
+		grid: this.grid()
+	}), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	ariaSummary = computed(() => {
+		const keys = this.root.visibleSeriesKeys();
+		return `Radar chart, ${this.data().length} axes, ${keys.length} series.`;
+	}, ...ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []);
+	dataColumns = computed(() => [this.axisKey(), ...this.root.visibleSeriesKeys()], ...ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []);
+	gridFill() {
+		return this.gridFilled() ? "hsl(var(--muted))" : "none";
+	}
+	gridFillOpacity(levelIndex) {
+		return this.gridFilled() ? Math.max(.06, .18 - levelIndex * .02) : null;
+	}
+	dotAriaLabel(seriesKey, p) {
+		return `${this.polar.seriesLabel(seriesKey)} at ${p.axis}: ${p.value}`;
+	}
+	emitClick(seriesKey, point, datumIndex) {
+		this.pointClick.emit({
+			seriesKey,
+			datumIndex,
+			category: point.axis,
+			value: point.value,
+			datum: this.data()[datumIndex]
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: RadarChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: RadarChart,
+		isStandalone: true,
+		selector: "ChartRadar",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			axisKey: {
+				classPropertyName: "axisKey",
+				publicName: "axisKey",
+				isSignal: true,
+				isRequired: true,
+				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
+			},
+			curve: {
+				classPropertyName: "curve",
+				publicName: "curve",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			levels: {
+				classPropertyName: "levels",
+				publicName: "levels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxValue: {
+				classPropertyName: "maxValue",
+				publicName: "maxValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strokeWidth: {
+				classPropertyName: "strokeWidth",
+				publicName: "strokeWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fillOpacity: {
+				classPropertyName: "fillOpacity",
+				publicName: "fillOpacity",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLabels: {
+				classPropertyName: "showLabels",
+				publicName: "showLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDots: {
+				classPropertyName: "showDots",
+				publicName: "showDots",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dotRadius: {
+				classPropertyName: "dotRadius",
+				publicName: "dotRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			grid: {
+				classPropertyName: "grid",
+				publicName: "grid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			gridFilled: {
+				classPropertyName: "gridFilled",
+				publicName: "gridFilled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showAxes: {
+				classPropertyName: "showAxes",
+				publicName: "showAxes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linesOnly: {
+				classPropertyName: "linesOnly",
+				publicName: "linesOnly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { pointClick: "pointClick" },
+		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"
@@ -297,15 +390,52 @@ class RadarChart {
       [rowHeaderKey]="axisKey()"
       [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: RadarChart, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartRadar',
-                    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: RadarChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartRadar",
+			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"
@@ -414,12 +544,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       [rowHeaderKey]="axisKey()"
       [label]="ariaSummary()"
     />
-  `,
-                }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], axisKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisKey", required: true }] }], 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 }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], levels: [{ type: i0.Input, args: [{ isSignal: true, alias: "levels", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], gridFilled: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridFilled", required: false }] }], showAxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxes", required: false }] }], linesOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "linesOnly", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { RadarChart, computeRadarLayout };
+  `
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		axisKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "axisKey",
+				required: true
+			}]
+		}],
+		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
+			}]
+		}],
+		curve: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "curve",
+				required: false
+			}]
+		}],
+		levels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "levels",
+				required: false
+			}]
+		}],
+		maxValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxValue",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		fillOpacity: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fillOpacity",
+				required: false
+			}]
+		}],
+		showLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLabels",
+				required: false
+			}]
+		}],
+		showDots: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDots",
+				required: false
+			}]
+		}],
+		dotRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dotRadius",
+				required: false
+			}]
+		}],
+		grid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "grid",
+				required: false
+			}]
+		}],
+		gridFilled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gridFilled",
+				required: false
+			}]
+		}],
+		showAxes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showAxes",
+				required: false
+			}]
+		}],
+		linesOnly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linesOnly",
+				required: false
+			}]
+		}],
+		pointClick: [{
+			type: i0.Output,
+			args: ["pointClick"]
+		}]
+	}
+});
+export { RadarChart, computeRadarLayout };