@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/ChartCard/ChartCard.chart.js

@@ -0,0 +1,1333 @@
+import { AXIS_LABEL_LIMIT_EXPR } from "../../lib/vega/axisTicks.js";
+import { arcVegaConfig } from "../../lib/vega/config.js";
+import { CHART_TYPES } from "./ChartCard.model.js";
+//#region src/components/ChartCard/ChartCard.chart.ts
+/** Long-form rows, one per reading — `ChartRow` from the model. */
+const CHART_TABLE_DATASET = "table";
+/** Distinct axis categories `{ x }` — the radar's spokes and labels. */
+const CHART_AXES_DATASET = "axes";
+/** The hover selection: nearest point, so a pointer anywhere near a mark reads it. */
+const CHART_HOVER_PARAM = "hover";
+/** Responsive x tick values, recomputed by Vega when the domain or the width changes. */
+const CHART_X_TICKS_PARAM = "chart_x_ticks";
+/** Series labels, pushed as a signal so a violin's category axis needs no spec rebuild. */
+const CHART_SERIES_NAMES_PARAM = "chart_series_names";
+const POINT_SIZE = 64;
+const BAR_WIDTH_EXPR = "min(24, bandwidth('x') * 0.8)";
+const BAR_HEIGHT_EXPR = "min(24, bandwidth('y') * 0.8)";
+const PLOT_PADDING = 6;
+const STACK_GAP_PX = 1;
+const AREA_FILL_OPACITY = .12;
+const POLAR_OUTER = "min(width, height) / 2 - 4";
+const RADAR_RADIUS = "max(24, min(width, height) / 2 - 46)";
+/**
+* A radar axis on the unit plane. Both scales map one unit to the SAME pixel
+* radius, so the web stays circular however wide the panel is — and because
+* the domain is derived from the frame rather than fixed, a wide card spends
+* its extra width on the label gutter instead of stretching the web into an
+* ellipse.
+*/
+const radarPlane = (field, extent) => ({
+	field,
+	type: "quantitative",
+	axis: null,
+	scale: {
+		nice: false,
+		zero: false,
+		domainMin: { expr: `-(${extent} / 2) / (${RADAR_RADIUS})` },
+		domainMax: { expr: `(${extent} / 2) / (${RADAR_RADIUS})` }
+	}
+});
+const RADAR_ORDER = {
+	field: "ai",
+	type: "quantitative"
+};
+const VIOLIN_HALF_WIDTH = .42;
+const DENSITY_STEPS = 64;
+const PUNCHCARD_SIZE_RANGE = [0, 320];
+const BUBBLE_SIZE_RANGE = [16, 800];
+const IDENTITY_COLOR = {
+	field: "c",
+	type: "nominal",
+	scale: null,
+	legend: null
+};
+const SERIES_DETAIL = {
+	field: "s",
+	type: "nominal"
+};
+/** The magnitude scale for the forms whose colour IS the measure. */
+function magnitudeColor(tokens, format, title) {
+	return {
+		field: "v",
+		type: "quantitative",
+		title,
+		scale: { range: tokens.sequential },
+		legend: null,
+		format,
+		formatType: "arcNumber"
+	};
+}
+/**
+* The name to draw on an axis whose field the consumer did not name: a
+* histogram counts, a density has no unit, a box plot reads the measure. Each
+* of those has a sensible fallback — but a fallback is still an axis title,
+* and axis titles are off unless the consumer asked for them.
+*/
+function axisTitle(options, preferred, fallback) {
+	if (!options.axisTitles) return null;
+	return preferred ?? fallback;
+}
+/**
+* The measure axis: no domain line, hairline grid instead, rounded ticks, and
+* the card's own number grammar — so an axis label reads the way the tooltip
+* and the table read it.
+*/
+function measureAxis(options, title, format) {
+	if (!options.axes) return null;
+	return {
+		title: title ?? null,
+		domain: false,
+		ticks: false,
+		grid: options.grid,
+		tickCount: options.yTicks,
+		labelOverlap: true,
+		labelPadding: 6,
+		labelLimit: 80,
+		format: format ?? options.valueFormat,
+		formatType: "arcNumber"
+	};
+}
+/**
+* The category or time axis: a domain line, no grid, and the package's
+* responsive tick selection — explicit values that keep the endpoints, an
+* inward alignment at the edges, and a bounded label width — so a narrow card
+* thins its labels instead of overlapping them.
+*/
+function positionAxis(options, title, discrete) {
+	if (!options.axes) return null;
+	const { xType, axisTimeFormat } = options;
+	const tickFormat = xType === "temporal" ? axisTimeFormat : "compact";
+	const tickKind = xType === "temporal" ? "time" : xType === "quantitative" ? "number" : "text";
+	const args = `domain('x'), width, ${discrete}, ${JSON.stringify(tickFormat)}, ${JSON.stringify(tickKind)}`;
+	const labels = xType === "temporal" ? {
+		format: axisTimeFormat,
+		formatType: "arcTime"
+	} : xType === "quantitative" ? {
+		format: "compact",
+		formatType: "arcNumber"
+	} : {};
+	return {
+		title: title ?? null,
+		orient: "bottom",
+		domain: true,
+		ticks: false,
+		grid: false,
+		values: { expr: CHART_X_TICKS_PARAM },
+		labelAngle: 0,
+		labelAlign: { expr: `arcAxisLabelAlign(datum.value, ${args})` },
+		labelFlush: false,
+		labelOverlap: false,
+		labelLimit: { expr: AXIS_LABEL_LIMIT_EXPR },
+		labelPadding: 4,
+		...labels
+	};
+}
+/** A plain nominal axis for the discrete side of a horizontal or table-shaped plot. */
+function categoryAxis(options, title, orient) {
+	if (!options.axes) return null;
+	return {
+		title: title ?? null,
+		orient,
+		domain: false,
+		ticks: false,
+		grid: false,
+		labelOverlap: true,
+		labelLimit: orient === "left" ? 120 : 80,
+		labelPadding: 6
+	};
+}
+/** The x position for the cartesian forms whose x is the primary dimension. */
+function xPosition(options, discrete) {
+	const axis = positionAxis(options, options.xTitle, discrete);
+	if (discrete) return {
+		field: "x",
+		type: "ordinal",
+		sort: null,
+		axis,
+		scale: { paddingOuter: .05 }
+	};
+	return {
+		field: "x",
+		type: options.xType,
+		axis,
+		scale: {
+			nice: false,
+			...options.xType === "quantitative" ? { zero: false } : {}
+		}
+	};
+}
+/** The measure position, with the zero baseline the form requires. */
+function measurePosition(options, { zero, stack, format }) {
+	return {
+		field: "v",
+		type: "quantitative",
+		title: options.valueTitle,
+		axis: measureAxis(options, options.yTitle, format),
+		scale: {
+			zero,
+			nice: options.axes
+		},
+		...stack === false ? { stack: null } : { stack }
+	};
+}
+/** The tooltip channel: the dimension, the series when there is more than one, the measure, and any second measure. */
+function tooltipChannel(options, extras = []) {
+	const info = CHART_TYPES[options.type];
+	const channel = [];
+	if (info.fields.x !== "none") channel.push(options.xType === "temporal" ? {
+		field: "x",
+		type: "temporal",
+		title: options.xTitle ?? "",
+		format: options.timeFormat,
+		formatType: "arcTime"
+	} : options.xType === "quantitative" ? {
+		field: "x",
+		type: "quantitative",
+		title: options.xTitle ?? "",
+		format: "number",
+		formatType: "arcNumber"
+	} : {
+		field: "x",
+		type: "nominal",
+		title: options.xTitle ?? ""
+	});
+	channel.push({
+		field: "n",
+		type: "nominal",
+		title: options.seriesTitle
+	});
+	channel.push({
+		field: "v",
+		type: "quantitative",
+		title: options.valueTitle,
+		format: options.valueFormat,
+		formatType: "arcNumber"
+	});
+	if (info.fields.size && options.sizeTitle) channel.push({
+		field: "z",
+		type: "quantitative",
+		title: options.sizeTitle,
+		format: options.valueFormat,
+		formatType: "arcNumber"
+	});
+	return [...channel, ...extras];
+}
+/**
+* The nearest-point hover every form shares: a `point` selection that lights
+* the mark under the pointer and hands the Arc tooltip handler the row. The
+* marks carry `tooltip` themselves rather than through a separate transparent
+* layer, because unlike a multi-series trend this card reads ONE mark at a
+* time — there is no shared-x column to light up.
+*
+* It is declared on ONE layer, never at the top level: Vega-Lite pushes a
+* top-level selection param down into every layer of a layered spec, and the
+* duplicated signals fail the parse outright ("Duplicate signal name:
+* hover_tuple"). Sibling layers still read it — a layer param is hoisted to a
+* top-level Vega signal, which is what makes `{param: "hover"}` conditions
+* work across the stack.
+*/
+const HOVER_PARAM_DEF = {
+	name: CHART_HOVER_PARAM,
+	select: {
+		type: "point",
+		on: "pointerover",
+		clear: "pointerout"
+	}
+};
+/**
+* Forms that take no selection param. Vega-Lite refuses one on a composite
+* mark ("Selection not supported for boxplot yet") and the empty selection
+* store then starves the shared scale into an infinite extent.
+*/
+const SELECTION_FREE = ["boxplot"];
+/** Dim every mark but the hovered one — the redundant half of the tooltip, never its replacement. */
+function hoverOpacity(options, base = 1) {
+	if (!options.tooltip) return {};
+	return { opacity: {
+		condition: {
+			param: CHART_HOVER_PARAM,
+			empty: true,
+			value: base
+		},
+		value: base * .45
+	} };
+}
+/**
+* One layer stack per form. Each returns the layers to draw and, where the
+* form needs them, extra top-level transforms — nothing here reads data, only
+* its shape.
+*/
+function buildLayers(options, tokens) {
+	const { type } = options;
+	const info = CHART_TYPES[type];
+	const tooltip = options.tooltip ? { tooltip: tooltipChannel(options) } : {};
+	const encodedTooltip = options.tooltip ? { tooltip: { content: "encoding" } } : {};
+	const discreteX = options.xType === "nominal" || options.xType === "ordinal";
+	switch (type) {
+		case "bar":
+		case "bar-grouped":
+		case "bar-stacked":
+		case "bar-normalized": {
+			const grouped = type === "bar-grouped";
+			const stack = info.stack;
+			const normalized = type === "bar-normalized";
+			return { layers: [{
+				mark: {
+					type: "bar",
+					cornerRadiusEnd: 2,
+					...grouped ? {} : { width: { expr: BAR_WIDTH_EXPR } },
+					...stack === false ? {} : {
+						stroke: tokens.background,
+						strokeWidth: STACK_GAP_PX
+					},
+					...encodedTooltip
+				},
+				encoding: {
+					x: xPosition(options, true),
+					y: measurePosition(options, {
+						zero: true,
+						stack,
+						format: normalized ? "percent:0" : void 0
+					}),
+					...grouped ? { xOffset: {
+						field: "i",
+						type: "ordinal",
+						sort: null
+					} } : { detail: SERIES_DETAIL },
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options),
+					...tooltip
+				}
+			}] };
+		}
+		case "bar-horizontal": return { layers: [{
+			mark: {
+				type: "bar",
+				cornerRadiusEnd: 2,
+				height: { expr: BAR_HEIGHT_EXPR }
+			},
+			encoding: {
+				y: {
+					field: "x",
+					type: "ordinal",
+					sort: null,
+					axis: categoryAxis(options, options.xTitle, "left")
+				},
+				x: measurePosition(options, {
+					zero: true,
+					stack: false
+				}),
+				detail: SERIES_DETAIL,
+				fill: IDENTITY_COLOR,
+				...hoverOpacity(options),
+				...tooltip
+			}
+		}] };
+		case "bar-diverging": return { layers: [{
+			mark: {
+				type: "bar",
+				cornerRadiusEnd: 2,
+				height: { expr: BAR_HEIGHT_EXPR }
+			},
+			encoding: {
+				y: {
+					field: "x",
+					type: "ordinal",
+					sort: null,
+					axis: categoryAxis(options, options.xTitle, "left")
+				},
+				x: measurePosition(options, {
+					zero: true,
+					stack: false
+				}),
+				fill: {
+					condition: {
+						test: "datum.v < 0",
+						value: tokens.divergingNegative
+					},
+					value: tokens.divergingPositive
+				},
+				...hoverOpacity(options),
+				...tooltip
+			}
+		}, {
+			mark: {
+				type: "rule",
+				stroke: tokens.axis,
+				strokeWidth: 1,
+				aria: false
+			},
+			encoding: { x: {
+				datum: 0,
+				type: "quantitative"
+			} }
+		}] };
+		case "bar-range": {
+			const rangeType = options.xType === "temporal" ? "temporal" : "quantitative";
+			return { layers: [{
+				mark: {
+					type: "bar",
+					cornerRadius: 3,
+					height: { expr: BAR_HEIGHT_EXPR }
+				},
+				encoding: {
+					y: {
+						field: "n",
+						type: "nominal",
+						sort: null,
+						axis: categoryAxis(options, axisTitle(options, options.xTitle, options.seriesTitle), "left")
+					},
+					x: {
+						field: "x",
+						type: rangeType,
+						title: options.xTitle ?? null,
+						axis: rangeType === "temporal" ? {
+							...measureAxis(options, options.xTitle),
+							format: options.axisTimeFormat,
+							formatType: "arcTime"
+						} : measureAxis(options, options.xTitle, "compact"),
+						scale: {
+							nice: false,
+							...rangeType === "quantitative" ? { zero: false } : {}
+						}
+					},
+					x2: { field: "x2" },
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options),
+					...tooltip
+				}
+			}] };
+		}
+		case "lollipop": {
+			const yField = {
+				field: "x",
+				type: "ordinal",
+				sort: null,
+				axis: categoryAxis(options, options.xTitle, "left")
+			};
+			const xField = measurePosition(options, {
+				zero: true,
+				stack: false
+			});
+			return { layers: [{
+				mark: {
+					type: "rule",
+					strokeWidth: 1.5,
+					aria: false
+				},
+				encoding: {
+					y: yField,
+					x: xField,
+					x2: { datum: 0 },
+					stroke: IDENTITY_COLOR
+				}
+			}, {
+				mark: {
+					type: "point",
+					filled: true,
+					size: 96,
+					stroke: tokens.background,
+					strokeWidth: 1.5
+				},
+				encoding: {
+					y: yField,
+					x: xField,
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options),
+					...tooltip
+				}
+			}] };
+		}
+		case "waterfall": return { layers: [{
+			mark: {
+				type: "bar",
+				cornerRadius: 2,
+				width: { expr: BAR_WIDTH_EXPR }
+			},
+			encoding: {
+				x: xPosition(options, true),
+				y: {
+					field: "lo",
+					type: "quantitative",
+					title: options.valueTitle,
+					axis: measureAxis(options, options.yTitle),
+					scale: {
+						zero: true,
+						nice: options.axes
+					},
+					stack: null
+				},
+				y2: { field: "hi" },
+				fill: IDENTITY_COLOR,
+				...hoverOpacity(options),
+				...options.tooltip ? { tooltip: tooltipChannel(options, [{
+					field: "hi",
+					type: "quantitative",
+					title: "Running total",
+					format: options.valueFormat,
+					formatType: "arcNumber"
+				}]) } : {}
+			}
+		}, {
+			mark: {
+				type: "rule",
+				stroke: tokens.axis,
+				strokeWidth: 1,
+				aria: false
+			},
+			encoding: { y: {
+				datum: 0,
+				type: "quantitative"
+			} }
+		}] };
+		case "line":
+		case "line-points":
+		case "step":
+		case "connected-scatter": {
+			const withPoints = type === "line-points" || type === "connected-scatter";
+			const x = type === "connected-scatter" ? {
+				field: "x",
+				type: "quantitative",
+				axis: measureAxis(options, options.xTitle, "compact"),
+				scale: {
+					zero: false,
+					nice: options.axes
+				}
+			} : xPosition(options, discreteX);
+			const y = measurePosition(options, {
+				zero: false,
+				stack: false
+			});
+			const layers = [{
+				mark: {
+					type: "line",
+					strokeWidth: 2,
+					strokeCap: "round",
+					strokeJoin: "round",
+					interpolate: type === "step" ? "step-after" : "linear",
+					invalid: "break-paths-show-domains"
+				},
+				encoding: {
+					x,
+					y,
+					detail: SERIES_DETAIL,
+					stroke: IDENTITY_COLOR,
+					...type === "connected-scatter" ? { order: {
+						field: "o",
+						type: "quantitative"
+					} } : {}
+				}
+			}];
+			if (withPoints) layers.push({
+				mark: {
+					type: "point",
+					filled: true,
+					size: POINT_SIZE,
+					stroke: tokens.background,
+					strokeWidth: 1.5
+				},
+				encoding: {
+					x,
+					y,
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options),
+					...tooltip
+				}
+			});
+			else layers.push({
+				mark: {
+					type: "point",
+					filled: true,
+					size: POINT_SIZE,
+					opacity: 0,
+					aria: false
+				},
+				encoding: {
+					x,
+					y,
+					fill: IDENTITY_COLOR,
+					...tooltip
+				}
+			});
+			return { layers };
+		}
+		case "trail": return { layers: [{
+			mark: {
+				type: "trail",
+				interpolate: "linear"
+			},
+			encoding: {
+				x: xPosition(options, discreteX),
+				y: measurePosition(options, {
+					zero: false,
+					stack: false
+				}),
+				detail: SERIES_DETAIL,
+				color: IDENTITY_COLOR,
+				size: {
+					field: "z",
+					type: "quantitative",
+					legend: null,
+					title: options.sizeTitle ?? null
+				},
+				...tooltip
+			}
+		}] };
+		case "area":
+		case "area-stacked":
+		case "area-normalized":
+		case "streamgraph": {
+			const stack = info.stack;
+			const normalized = type === "area-normalized";
+			const stream = type === "streamgraph";
+			const x = xPosition(options, discreteX);
+			const y = measurePosition(options, {
+				zero: stack !== false,
+				stack,
+				format: normalized ? "percent:0" : void 0
+			});
+			const streamY = stream ? {
+				...y,
+				axis: null,
+				scale: {
+					zero: true,
+					nice: false
+				}
+			} : y;
+			return { layers: [{
+				mark: {
+					type: "area",
+					line: false,
+					interpolate: stream ? "monotone" : "linear",
+					fillOpacity: stack === false ? AREA_FILL_OPACITY : .9,
+					invalid: "break-paths-show-domains",
+					...stack === false ? {} : {
+						stroke: tokens.background,
+						strokeWidth: STACK_GAP_PX
+					},
+					...stream ? { aria: true } : {}
+				},
+				encoding: {
+					x,
+					y: streamY,
+					detail: SERIES_DETAIL,
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options, stack === false ? AREA_FILL_OPACITY : .9),
+					...tooltip
+				}
+			}, ...stack === false && !stream ? [{
+				mark: {
+					type: "line",
+					strokeWidth: 2,
+					strokeCap: "round",
+					strokeJoin: "round",
+					invalid: "break-paths-show-domains",
+					aria: false
+				},
+				encoding: {
+					x,
+					y: streamY,
+					detail: SERIES_DETAIL,
+					stroke: IDENTITY_COLOR
+				}
+			}] : []] };
+		}
+		case "slope": {
+			const x = {
+				field: "x",
+				type: "ordinal",
+				sort: null,
+				axis: options.axes ? {
+					title: options.xTitle ?? null,
+					orient: "bottom",
+					domain: false,
+					ticks: false,
+					grid: false,
+					labelPadding: 8,
+					labelLimit: 100
+				} : null,
+				scale: { padding: .35 }
+			};
+			const y = measurePosition(options, {
+				zero: false,
+				stack: false
+			});
+			return { layers: [{
+				mark: {
+					type: "line",
+					strokeWidth: 2,
+					strokeCap: "round"
+				},
+				encoding: {
+					x,
+					y,
+					detail: SERIES_DETAIL,
+					stroke: IDENTITY_COLOR
+				}
+			}, {
+				mark: {
+					type: "point",
+					filled: true,
+					size: POINT_SIZE,
+					stroke: tokens.background,
+					strokeWidth: 1.5
+				},
+				encoding: {
+					x,
+					y,
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options),
+					...tooltip
+				}
+			}] };
+		}
+		case "pie":
+		case "donut":
+		case "radial": {
+			const radial = type === "radial";
+			const outer = { expr: POLAR_OUTER };
+			return { layers: [{
+				mark: {
+					type: "arc",
+					padAngle: .012,
+					...type === "donut" ? { innerRadius: { expr: `(${POLAR_OUTER}) * ${options.innerRadius ?? .6}` } } : {},
+					...radial ? {
+						stroke: tokens.background,
+						strokeWidth: 1
+					} : {},
+					...type !== "radial" ? { outerRadius: outer } : {}
+				},
+				encoding: {
+					theta: {
+						field: "v",
+						type: "quantitative",
+						stack: true,
+						title: options.valueTitle
+					},
+					...radial ? { radius: {
+						field: "v",
+						type: "quantitative",
+						scale: {
+							type: "sqrt",
+							zero: true,
+							range: [12, outer]
+						},
+						title: options.valueTitle
+					} } : {},
+					fill: IDENTITY_COLOR,
+					...hoverOpacity(options),
+					...tooltip
+				}
+			}] };
+		}
+		case "scatter":
+		case "bubble":
+		case "dot": {
+			const quantitativeY = type !== "dot" || options.yType === "quantitative";
+			const x = type === "dot" && discreteX ? xPosition(options, true) : options.xType === "quantitative" ? {
+				field: "x",
+				type: "quantitative",
+				title: options.xTitle ?? null,
+				axis: measureAxis(options, options.xTitle, "compact"),
+				scale: {
+					zero: false,
+					nice: options.axes
+				}
+			} : xPosition(options, discreteX);
+			const y = quantitativeY ? measurePosition(options, {
+				zero: false,
+				stack: false
+			}) : {
+				field: "y",
+				type: "nominal",
+				sort: null,
+				axis: categoryAxis(options, options.yTitle, "left")
+			};
+			return { layers: [{
+				mark: {
+					type: "point",
+					filled: true,
+					size: POINT_SIZE,
+					fillOpacity: type === "bubble" ? .7 : .85,
+					stroke: tokens.background,
+					strokeWidth: 1
+				},
+				encoding: {
+					x,
+					y,
+					fill: IDENTITY_COLOR,
+					...type === "bubble" ? { size: {
+						field: "z",
+						type: "quantitative",
+						scale: {
+							type: "sqrt",
+							zero: true,
+							range: BUBBLE_SIZE_RANGE
+						},
+						legend: null,
+						title: options.sizeTitle ?? null
+					} } : {},
+					...hoverOpacity(options),
+					...tooltip
+				}
+			}] };
+		}
+		case "heatmap-binned": return { layers: [{
+			mark: {
+				type: "rect",
+				...encodedTooltip
+			},
+			encoding: {
+				x: {
+					field: "x",
+					type: "quantitative",
+					bin: { maxbins: options.maxBins },
+					title: options.xTitle ?? null,
+					axis: measureAxis(options, options.xTitle, "compact")
+				},
+				y: {
+					field: "v",
+					type: "quantitative",
+					bin: { maxbins: options.maxBins },
+					title: options.yTitle ?? options.valueTitle,
+					axis: measureAxis(options, options.yTitle)
+				},
+				color: {
+					aggregate: "count",
+					type: "quantitative",
+					title: "Count",
+					scale: { range: tokens.sequential },
+					legend: null
+				}
+			}
+		}] };
+		case "histogram": return { layers: [{
+			mark: {
+				type: "bar",
+				cornerRadiusEnd: 2,
+				stroke: tokens.background,
+				strokeWidth: STACK_GAP_PX,
+				...encodedTooltip
+			},
+			encoding: {
+				x: {
+					field: "v",
+					type: "quantitative",
+					bin: { maxbins: options.maxBins },
+					title: options.xTitle ?? options.valueTitle,
+					axis: measureAxis(options, axisTitle(options, options.xTitle, options.valueTitle))
+				},
+				y: {
+					aggregate: "count",
+					type: "quantitative",
+					title: options.yTitle ?? "Count",
+					axis: measureAxis(options, axisTitle(options, options.yTitle, "Count"), "integer"),
+					stack: "zero"
+				},
+				fill: IDENTITY_COLOR,
+				detail: SERIES_DETAIL
+			}
+		}] };
+		case "density": return {
+			transform: [{
+				density: "v",
+				groupby: [
+					"s",
+					"n",
+					"c"
+				],
+				steps: DENSITY_STEPS,
+				as: ["value", "density"]
+			}],
+			layers: [{
+				mark: {
+					type: "area",
+					line: true,
+					fillOpacity: AREA_FILL_OPACITY * 2,
+					interpolate: "monotone",
+					...encodedTooltip
+				},
+				encoding: {
+					x: {
+						field: "value",
+						type: "quantitative",
+						title: options.xTitle ?? options.valueTitle,
+						axis: measureAxis(options, axisTitle(options, options.xTitle, options.valueTitle)),
+						scale: {
+							nice: false,
+							zero: false
+						}
+					},
+					y: {
+						field: "density",
+						type: "quantitative",
+						title: options.yTitle ?? "Density",
+						axis: options.axes ? {
+							title: options.yTitle ?? null,
+							domain: false,
+							ticks: false,
+							grid: options.grid,
+							labels: false
+						} : null,
+						stack: null
+					},
+					detail: SERIES_DETAIL,
+					fill: IDENTITY_COLOR,
+					stroke: IDENTITY_COLOR
+				}
+			}]
+		};
+		case "violin": {
+			const half = VIOLIN_HALF_WIDTH;
+			return {
+				transform: [
+					{
+						density: "v",
+						groupby: [
+							"s",
+							"n",
+							"c",
+							"i"
+						],
+						steps: DENSITY_STEPS,
+						as: ["value", "density"]
+					},
+					{ joinaggregate: [{
+						op: "max",
+						field: "density",
+						as: "dmax"
+					}] },
+					{
+						calculate: `datum.i - datum.density / datum.dmax * ${half}`,
+						as: "xlo"
+					},
+					{
+						calculate: `datum.i + datum.density / datum.dmax * ${half}`,
+						as: "xhi"
+					}
+				],
+				layers: [{
+					mark: {
+						type: "area",
+						orient: "horizontal",
+						interpolate: "monotone",
+						fillOpacity: .85,
+						...encodedTooltip
+					},
+					encoding: {
+						y: {
+							field: "value",
+							type: "quantitative",
+							title: options.yTitle ?? options.valueTitle,
+							axis: measureAxis(options, axisTitle(options, options.yTitle, options.valueTitle)),
+							scale: {
+								nice: false,
+								zero: false
+							}
+						},
+						x: {
+							field: "xlo",
+							type: "quantitative",
+							title: options.xTitle ?? null,
+							axis: options.axes ? {
+								title: options.xTitle ?? null,
+								orient: "bottom",
+								domain: false,
+								ticks: false,
+								grid: false,
+								values: { expr: "sequence(0, ceil(domain('x')[1]) + 1)" },
+								labelExpr: `${CHART_SERIES_NAMES_PARAM}[datum.value] || ''`,
+								labelLimit: 90,
+								labelPadding: 6
+							} : null,
+							scale: {
+								nice: false,
+								zero: false,
+								padding: 8
+							}
+						},
+						x2: { field: "xhi" },
+						detail: SERIES_DETAIL,
+						fill: IDENTITY_COLOR
+					}
+				}]
+			};
+		}
+		case "boxplot": return { layers: [{
+			mark: {
+				type: "boxplot",
+				extent: options.extent ?? "min-max",
+				size: 28,
+				median: {
+					color: tokens.background,
+					strokeWidth: 2
+				},
+				outliers: {
+					size: POINT_SIZE / 2,
+					fillOpacity: .7
+				},
+				...options.tooltip ? { tooltip: true } : {}
+			},
+			encoding: {
+				x: xPosition(options, true),
+				y: {
+					field: "v",
+					type: "quantitative",
+					title: options.yTitle ?? options.valueTitle,
+					axis: measureAxis(options, axisTitle(options, options.yTitle, options.valueTitle)),
+					scale: {
+						zero: false,
+						nice: options.axes
+					}
+				},
+				color: IDENTITY_COLOR
+			}
+		}] };
+		case "strip": return { layers: [{
+			mark: {
+				type: "tick",
+				thickness: 2,
+				opacity: .55,
+				...encodedTooltip
+			},
+			encoding: {
+				x: {
+					field: "v",
+					type: "quantitative",
+					title: options.xTitle ?? options.valueTitle,
+					axis: measureAxis(options, axisTitle(options, options.xTitle, options.valueTitle)),
+					scale: {
+						zero: false,
+						nice: options.axes
+					}
+				},
+				...options.hasX ? { y: {
+					field: "x",
+					type: "nominal",
+					sort: null,
+					axis: categoryAxis(options, options.yTitle, "left")
+				} } : {},
+				color: IDENTITY_COLOR,
+				...tooltip
+			}
+		}] };
+		case "errorbar":
+		case "errorband": {
+			const band = type === "errorband";
+			const x = xPosition(options, discreteX);
+			const y = {
+				field: "v",
+				type: "quantitative",
+				title: options.yTitle ?? options.valueTitle,
+				axis: measureAxis(options, axisTitle(options, options.yTitle, options.valueTitle)),
+				scale: {
+					zero: false,
+					nice: options.axes
+				}
+			};
+			return { layers: [{
+				mark: {
+					type: band ? "errorband" : "errorbar",
+					extent: options.extent ?? "ci",
+					...band ? {
+						borders: false,
+						opacity: .18,
+						interpolate: "monotone"
+					} : {
+						ticks: true,
+						thickness: 1.5
+					}
+				},
+				encoding: {
+					x,
+					y,
+					...band ? { fill: IDENTITY_COLOR } : { color: IDENTITY_COLOR }
+				}
+			}, {
+				mark: band ? {
+					type: "line",
+					strokeWidth: 2,
+					interpolate: "monotone",
+					...encodedTooltip
+				} : {
+					type: "point",
+					filled: true,
+					size: POINT_SIZE,
+					stroke: tokens.background,
+					strokeWidth: 1.5,
+					...encodedTooltip
+				},
+				encoding: {
+					x,
+					y: {
+						...y,
+						aggregate: "mean",
+						field: "v"
+					},
+					detail: SERIES_DETAIL,
+					...band ? { stroke: IDENTITY_COLOR } : { fill: IDENTITY_COLOR }
+				}
+			}] };
+		}
+		case "heatmap": return { layers: [{
+			mark: {
+				type: "rect",
+				cornerRadius: 3,
+				stroke: tokens.background,
+				strokeWidth: 2
+			},
+			encoding: {
+				x: {
+					field: "x",
+					type: "nominal",
+					sort: null,
+					axis: categoryAxis(options, options.xTitle, "bottom")
+				},
+				y: {
+					field: "y",
+					type: "nominal",
+					sort: null,
+					axis: categoryAxis(options, options.yTitle, "left")
+				},
+				color: magnitudeColor(tokens, options.valueFormat, options.valueTitle),
+				...hoverOpacity(options),
+				...tooltip
+			}
+		}] };
+		case "punchcard": return { layers: [{
+			mark: {
+				type: "circle",
+				opacity: .9
+			},
+			encoding: {
+				x: {
+					field: "x",
+					type: "nominal",
+					sort: null,
+					axis: categoryAxis(options, options.xTitle, "bottom")
+				},
+				y: {
+					field: "y",
+					type: "nominal",
+					sort: null,
+					axis: categoryAxis(options, options.yTitle, "left")
+				},
+				size: {
+					field: "v",
+					type: "quantitative",
+					title: options.valueTitle,
+					scale: {
+						type: "sqrt",
+						zero: true,
+						range: PUNCHCARD_SIZE_RANGE
+					},
+					legend: null
+				},
+				color: magnitudeColor(tokens, options.valueFormat, options.valueTitle),
+				...hoverOpacity(options),
+				...tooltip
+			}
+		}] };
+		case "radar": {
+			const x = radarPlane("px", "width");
+			const y = radarPlane("py", "height");
+			return { layers: [
+				{
+					data: { name: CHART_AXES_DATASET },
+					mark: {
+						type: "line",
+						stroke: tokens.grid,
+						strokeWidth: 1,
+						aria: false
+					},
+					encoding: {
+						x: radarPlane("px", "width"),
+						y: radarPlane("py", "height"),
+						detail: {
+							field: "x",
+							type: "nominal"
+						},
+						order: {
+							field: "k",
+							type: "quantitative"
+						}
+					}
+				},
+				{
+					data: { name: CHART_AXES_DATASET },
+					transform: [{ filter: "datum.k > 0" }],
+					mark: {
+						type: "line",
+						interpolate: "linear-closed",
+						stroke: tokens.grid,
+						strokeWidth: 1,
+						aria: false
+					},
+					encoding: {
+						x: radarPlane("px", "width"),
+						y: radarPlane("py", "height"),
+						detail: {
+							field: "k",
+							type: "nominal"
+						},
+						order: RADAR_ORDER
+					}
+				},
+				{
+					data: { name: CHART_AXES_DATASET },
+					transform: [{ filter: "datum.k == 1" }],
+					mark: {
+						type: "text",
+						fontSize: 10,
+						lineHeight: 12,
+						lineBreak: " ",
+						fill: tokens.axisLabel,
+						limit: { expr: "max(52, width * 0.26)" },
+						align: { expr: "datum.lx > 0.15 ? 'left' : datum.lx < -0.15 ? 'right' : 'center'" },
+						baseline: { expr: "datum.ly > 0.15 ? 'bottom' : datum.ly < -0.15 ? 'top' : 'middle'" },
+						aria: false
+					},
+					encoding: {
+						x: radarPlane("lx", "width"),
+						y: radarPlane("ly", "height"),
+						text: {
+							field: "x",
+							type: "nominal"
+						}
+					}
+				},
+				{
+					mark: {
+						type: "line",
+						interpolate: "linear-closed",
+						strokeWidth: 0,
+						fillOpacity: .22,
+						aria: false
+					},
+					encoding: {
+						x,
+						y,
+						detail: SERIES_DETAIL,
+						fill: IDENTITY_COLOR,
+						order: RADAR_ORDER
+					}
+				},
+				{
+					mark: {
+						type: "line",
+						interpolate: "linear-closed",
+						strokeWidth: 2,
+						strokeJoin: "round"
+					},
+					encoding: {
+						x,
+						y,
+						detail: SERIES_DETAIL,
+						stroke: IDENTITY_COLOR,
+						order: RADAR_ORDER
+					}
+				},
+				{
+					mark: {
+						type: "point",
+						filled: true,
+						size: POINT_SIZE * .6,
+						stroke: tokens.background,
+						strokeWidth: 1
+					},
+					encoding: {
+						x,
+						y,
+						fill: IDENTITY_COLOR,
+						...hoverOpacity(options),
+						...tooltip
+					}
+				}
+			] };
+		}
+		default: throw new Error(`ChartCard: no encoding for type ${String(type)}`);
+	}
+}
+/**
+* Builds the plot for one form. Every spec is a single or layered view — never
+* a facet, concat or repeat — so `autosize: "fit"` applies and the width and
+* height can come from the View API rather than from a rebuild.
+*
+* The Vega legend is always `null`: the legend is real Arc controls, because
+* Vega offers no keyboard navigation of its own marks.
+*/
+function buildChartSpec(options, tokens) {
+	const info = CHART_TYPES[options.type];
+	const { layers, transform } = buildLayers(options, tokens);
+	if (options.tooltip && !SELECTION_FREE.includes(options.type)) {
+		const target = [...layers].reverse().find((layer) => {
+			const encoding = layer.encoding;
+			const mark = layer.mark;
+			return encoding?.tooltip != null || mark?.tooltip != null;
+		}) ?? layers[layers.length - 1];
+		target.params = [...target.params ?? [], HOVER_PARAM_DEF];
+	}
+	const params = [];
+	if (options.axes && !info.polar && !info.horizontal && ![
+		"heatmap",
+		"punchcard",
+		"violin",
+		"histogram",
+		"density",
+		"slope",
+		"heatmap-binned",
+		"strip",
+		"connected-scatter"
+	].includes(options.type)) {
+		const discrete = options.xType === "nominal" || options.xType === "ordinal" || [
+			"bar",
+			"bar-grouped",
+			"bar-stacked",
+			"bar-normalized",
+			"waterfall",
+			"boxplot"
+		].includes(options.type);
+		const tickFormat = options.xType === "temporal" ? options.axisTimeFormat : "compact";
+		const tickKind = options.xType === "temporal" ? "time" : options.xType === "quantitative" ? "number" : "text";
+		params.push({
+			name: CHART_X_TICKS_PARAM,
+			expr: `arcAxisTicks(domain('x'), width, ${discrete}, ${JSON.stringify(tickFormat)}, ${JSON.stringify(tickKind)})`
+		});
+	}
+	if (options.type === "violin") params.push({
+		name: CHART_SERIES_NAMES_PARAM,
+		value: []
+	});
+	return {
+		$schema: "https://vega.github.io/schema/vega-lite/v6.json",
+		width: 320,
+		height: options.height,
+		autosize: {
+			type: "fit",
+			contains: "padding"
+		},
+		padding: PLOT_PADDING,
+		background: "transparent",
+		data: { name: CHART_TABLE_DATASET },
+		...transform ? { transform } : {},
+		...params.length > 0 ? { params } : {},
+		layer: layers,
+		config: arcVegaConfig(tokens, {
+			locale: options.locale,
+			timeZone: options.timeZone
+		})
+	};
+}
+//#endregion
+export { CHART_AXES_DATASET, CHART_HOVER_PARAM, CHART_SERIES_NAMES_PARAM, CHART_TABLE_DATASET, CHART_X_TICKS_PARAM, buildChartSpec };