@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/HighlightCard/index.d.ts

@@ -0,0 +1,4 @@
+import { BuildHighlightAnalysisInsightInput, BuildHighlightDescriptionInput, DEFAULT_HIGHLIGHT_LABELS, DEFAULT_PERCENTILE_THRESHOLDS, DEFAULT_SIGMA_THRESHOLDS, DeriveHighlightDeltaOptions, DeriveHighlightStateInput, DerivePeersOptions, HighlightBandRow, HighlightBaseline, HighlightCardLabels, HighlightCardSize, HighlightCardState, HighlightCardStatus, HighlightContextDatasets, HighlightContextRow, HighlightDelta, HighlightDeltaMode, HighlightDriver, HighlightDriverInfo, HighlightDriversInfo, HighlightEndpointRow, HighlightGoodDirection, HighlightInsightSegment, HighlightLeg, HighlightMark, HighlightOutsideRow, HighlightPeer, HighlightPeerMode, HighlightPeerStats, HighlightPoint, HighlightPolarity, HighlightReading, HighlightRow, HighlightScale, HighlightSection, HighlightSeverity, HighlightSeverityThresholds, HighlightSummary, HighlightTextFormatters, HighlightWindow, HighlightWindowInfo, HighlightXType, NormalizeDriversOptions, ResolveHighlightWindowOptions, buildContextDescription, buildDriverRows, buildDriversDescription, buildHighlightAnalysisInsight, buildHighlightContextDatasets, buildHighlightDescription, buildPeerVerdict, buildPeersDescription, buildTypicalRows, createHighlightFormatters, deriveHighlightDelta, deriveHighlightState, derivePeers, highlightSegmentsToText, normalizeDrivers, normalizeHighlightSeries, resolveHighlightLabels, resolveHighlightWindow } from "./HighlightCard.model.js";
+import { HighlightCard, HighlightCardProps } from "./HighlightCard.js";
+import { HIGHLIGHT_BAND_DATASET, HIGHLIGHT_DRIVERS_DATASET, HIGHLIGHT_DRIVER_HOVER_PARAM, HIGHLIGHT_ENDPOINTS_DATASET, HIGHLIGHT_END_PARAM, HIGHLIGHT_HOVER_PARAM, HIGHLIGHT_INSIDE_DATASET, HIGHLIGHT_OUTSIDE_DATASET, HIGHLIGHT_PEERS_DATASET, HIGHLIGHT_PEER_HOVER_PARAM, HIGHLIGHT_START_PARAM, HIGHLIGHT_TABLE_DATASET, HIGHLIGHT_TYPICAL_DATASET, HIGHLIGHT_X_TICKS_PARAM, HIGHLIGHT_ZERO_DATASET, HighlightContextSpecOptions, HighlightDriversSpecOptions, HighlightPeersSpecOptions, MAX_DRIVER_BAR_HEIGHT, buildHighlightContextSpec, buildHighlightDriversSpec, buildHighlightPeersSpec } from "./HighlightCard.chart.js";
+export { type BuildHighlightAnalysisInsightInput, type BuildHighlightDescriptionInput, DEFAULT_HIGHLIGHT_LABELS, DEFAULT_PERCENTILE_THRESHOLDS, DEFAULT_SIGMA_THRESHOLDS, type DeriveHighlightDeltaOptions, type DeriveHighlightStateInput, type DerivePeersOptions, HIGHLIGHT_BAND_DATASET, HIGHLIGHT_DRIVERS_DATASET, HIGHLIGHT_DRIVER_HOVER_PARAM, HIGHLIGHT_ENDPOINTS_DATASET, HIGHLIGHT_END_PARAM, HIGHLIGHT_HOVER_PARAM, HIGHLIGHT_INSIDE_DATASET, HIGHLIGHT_OUTSIDE_DATASET, HIGHLIGHT_PEERS_DATASET, HIGHLIGHT_PEER_HOVER_PARAM, HIGHLIGHT_START_PARAM, HIGHLIGHT_TABLE_DATASET, HIGHLIGHT_TYPICAL_DATASET, HIGHLIGHT_X_TICKS_PARAM, HIGHLIGHT_ZERO_DATASET, type HighlightBandRow, type HighlightBaseline, HighlightCard, type HighlightCardLabels, type HighlightCardProps, type HighlightCardSize, type HighlightCardState, type HighlightCardStatus, type HighlightContextDatasets, type HighlightContextRow, type HighlightContextSpecOptions, type HighlightDelta, type HighlightDeltaMode, type HighlightDriver, type HighlightDriverInfo, type HighlightDriversInfo, type HighlightDriversSpecOptions, type HighlightEndpointRow, type HighlightGoodDirection, type HighlightInsightSegment, type HighlightLeg, type HighlightMark, type HighlightOutsideRow, type HighlightPeer, type HighlightPeerMode, type HighlightPeerStats, type HighlightPeersSpecOptions, type HighlightPoint, type HighlightPolarity, type HighlightReading, type HighlightRow, type HighlightScale, type HighlightSection, type HighlightSeverity, type HighlightSeverityThresholds, type HighlightSummary, type HighlightTextFormatters, type HighlightWindow, type HighlightWindowInfo, type HighlightXType, MAX_DRIVER_BAR_HEIGHT, type NormalizeDriversOptions, type ResolveHighlightWindowOptions, buildContextDescription, buildDriverRows, buildDriversDescription, buildHighlightAnalysisInsight, buildHighlightContextDatasets, buildHighlightContextSpec, buildHighlightDescription, buildHighlightDriversSpec, buildHighlightPeersSpec, buildPeerVerdict, buildPeersDescription, buildTypicalRows, createHighlightFormatters, deriveHighlightDelta, deriveHighlightState, derivePeers, highlightSegmentsToText, normalizeDrivers, normalizeHighlightSeries, resolveHighlightLabels, resolveHighlightWindow };

package/dist/components/HighlightCard/index.js

@@ -0,0 +1,4 @@
+import { HIGHLIGHT_BAND_DATASET, HIGHLIGHT_DRIVERS_DATASET, HIGHLIGHT_DRIVER_HOVER_PARAM, HIGHLIGHT_ENDPOINTS_DATASET, HIGHLIGHT_END_PARAM, HIGHLIGHT_HOVER_PARAM, HIGHLIGHT_INSIDE_DATASET, HIGHLIGHT_OUTSIDE_DATASET, HIGHLIGHT_PEERS_DATASET, HIGHLIGHT_PEER_HOVER_PARAM, HIGHLIGHT_START_PARAM, HIGHLIGHT_TABLE_DATASET, HIGHLIGHT_TYPICAL_DATASET, HIGHLIGHT_X_TICKS_PARAM, HIGHLIGHT_ZERO_DATASET, MAX_DRIVER_BAR_HEIGHT, buildHighlightContextSpec, buildHighlightDriversSpec, buildHighlightPeersSpec } from "./HighlightCard.chart.js";
+import { DEFAULT_HIGHLIGHT_LABELS, DEFAULT_PERCENTILE_THRESHOLDS, DEFAULT_SIGMA_THRESHOLDS, buildContextDescription, buildDriverRows, buildDriversDescription, buildHighlightAnalysisInsight, buildHighlightContextDatasets, buildHighlightDescription, buildPeerVerdict, buildPeersDescription, buildTypicalRows, createHighlightFormatters, deriveHighlightDelta, deriveHighlightState, derivePeers, highlightSegmentsToText, normalizeDrivers, normalizeHighlightSeries, resolveHighlightLabels, resolveHighlightWindow } from "./HighlightCard.model.js";
+import { HighlightCard } from "./HighlightCard.js";
+export { DEFAULT_HIGHLIGHT_LABELS, DEFAULT_PERCENTILE_THRESHOLDS, DEFAULT_SIGMA_THRESHOLDS, HIGHLIGHT_BAND_DATASET, HIGHLIGHT_DRIVERS_DATASET, HIGHLIGHT_DRIVER_HOVER_PARAM, HIGHLIGHT_ENDPOINTS_DATASET, HIGHLIGHT_END_PARAM, HIGHLIGHT_HOVER_PARAM, HIGHLIGHT_INSIDE_DATASET, HIGHLIGHT_OUTSIDE_DATASET, HIGHLIGHT_PEERS_DATASET, HIGHLIGHT_PEER_HOVER_PARAM, HIGHLIGHT_START_PARAM, HIGHLIGHT_TABLE_DATASET, HIGHLIGHT_TYPICAL_DATASET, HIGHLIGHT_X_TICKS_PARAM, HIGHLIGHT_ZERO_DATASET, HighlightCard, MAX_DRIVER_BAR_HEIGHT, buildContextDescription, buildDriverRows, buildDriversDescription, buildHighlightAnalysisInsight, buildHighlightContextDatasets, buildHighlightContextSpec, buildHighlightDescription, buildHighlightDriversSpec, buildHighlightPeersSpec, buildPeerVerdict, buildPeersDescription, buildTypicalRows, createHighlightFormatters, deriveHighlightDelta, deriveHighlightState, derivePeers, highlightSegmentsToText, normalizeDrivers, normalizeHighlightSeries, resolveHighlightLabels, resolveHighlightWindow };

package/dist/components/InsightCard/InsightCard.chart.d.ts

@@ -0,0 +1,91 @@
+import { ChartTokens } from "../../lib/vega/tokens.js";
+import { InsightXType } from "./InsightCard.model.js";
+import { TopLevelSpec } from "vega-lite";
+//#region src/components/InsightCard/InsightCard.chart.d.ts
+/** The measure's history — `{ x, y, e, lo, hi, f, c }`, one row per period. */
+declare const INSIGHT_POINTS_DATASET = "points";
+/** The flagged period's expected interval — one row `{ x, lo, hi }`, and only when the corridor is a single scalar band. */
+declare const INSIGHT_INTERVAL_DATASET = "interval";
+/** The range strip's one row — `{ lo, hi, e, v, d0, d1, c }`. */
+declare const INSIGHT_STRIP_DATASET = "strip";
+/** Evenly spaced x labels that keep both ends and the flagged period. */
+declare const INSIGHT_X_TICKS_PARAM = "xTicks";
+/** The flagged period, so the axis anchors a label on it. */
+declare const INSIGHT_FLAG_PARAM = "flaggedX";
+/** The shared-x hover selection: projected onto `x`, so pointing anywhere in a column reads that period. */
+declare const INSIGHT_HOVER_PARAM = "hover";
+/** Which axes the spark draws. `none` is the sparkline convention the card defaults to. */
+type InsightAxes = "none" | "x" | "y" | "both";
+interface InsightSparkSpecOptions {
+  /** Plot height in pixels. The width rides the View API. */
+  height: number;
+  xType: InsightXType;
+  /** Which axes to draw. The key row above the plot carries the numbers, so `none` is honest. */
+  axes: InsightAxes;
+  /** Include zero in the value scale. A line may crop; `zero` is for a measure whose distance from zero is the point. */
+  zero: boolean;
+  /** Draw the per-period corridor as a band. Only when two or more rows carry one. */
+  band: boolean;
+  /** Draw the per-period expectation as a dashed line. Only when two or more rows carry one. */
+  expectedLine: boolean;
+  /** Draw the flagged period's expected interval as a rule. Only when the corridor is a single scalar band. */
+  interval: boolean;
+  /** Wire the shared-x hover selection and the tooltip channel. */
+  tooltip: boolean;
+  /** Tooltip and axis titles. */
+  xTitle: string;
+  valueTitle: string;
+  expectedTitle: string;
+  /** `arcNumber` grammar for the value axis and the tooltip. */
+  valueFormat: string;
+  /** `arcTime` grammar for the tooltip, and the shorter one for the axis. */
+  timeFormat: string;
+  axisTimeFormat: string;
+  /** Value-axis tick budget. */
+  yTicks: number;
+  locale?: string;
+}
+/**
+ * The evidence spark: the measure over its history, the expected corridor
+ * behind it, and the flagged reading marked with a dot inside a ring.
+ *
+ * The series takes the emphasis hue — one measure needs no identity colour —
+ * while the corridor and the expectation take the context gray and the
+ * reference role, so the ground can never be mistaken for a second series.
+ * The flagged marker's colour rides the pushed row (`c`) with `scale: null`:
+ * it is the one place a status hue belongs on a mark here, because there the
+ * encoded value really is good or bad news.
+ */
+declare function buildInsightSparkSpec(options: InsightSparkSpecOptions, tokens: ChartTokens): TopLevelSpec;
+interface InsightStripSpecOptions {
+  /** Strip height in pixels. The width rides the View API. */
+  height: number;
+  /** Draw the expected band. `false` when the detector reported only a point expectation. */
+  band: boolean;
+  /** Draw the expectation tick. */
+  expected: boolean;
+  /** Wire the tooltip channel on the observed marker. */
+  tooltip: boolean;
+  observedTitle: string;
+  expectedTitle: string;
+  lowerTitle: string;
+  upperTitle: string;
+  valueFormat: string;
+  locale?: string;
+}
+/**
+ * The range strip: the expected band laid on the value axis with the observed
+ * reading marked against it. One dimension, no time — the honest degrade when
+ * a finding has no history to plot, and the compact evidence for a dense rail.
+ *
+ * It draws no axis. The key row above it prints the reading, the expectation
+ * and the range in real type, which is both more legible than three tick
+ * labels under a 24px strip and the reason every layer here can agree on
+ * `axis: null` — the one arrangement Vega-Lite never mis-merges.
+ *
+ * The domain comes out of the pushed row rather than from a scale
+ * computation, so a new finding moves the marker without re-embedding.
+ */
+declare function buildInsightStripSpec(options: InsightStripSpecOptions, tokens: ChartTokens): TopLevelSpec;
+//#endregion
+export { INSIGHT_FLAG_PARAM, INSIGHT_HOVER_PARAM, INSIGHT_INTERVAL_DATASET, INSIGHT_POINTS_DATASET, INSIGHT_STRIP_DATASET, INSIGHT_X_TICKS_PARAM, InsightAxes, InsightSparkSpecOptions, InsightStripSpecOptions, buildInsightSparkSpec, buildInsightStripSpec };

package/dist/components/InsightCard/InsightCard.chart.js

@@ -0,0 +1,471 @@
+import { AXIS_LABEL_LIMIT_EXPR } from "../../lib/vega/axisTicks.js";
+import { arcVegaConfig } from "../../lib/vega/config.js";
+//#region src/components/InsightCard/InsightCard.chart.ts
+/** The measure's history — `{ x, y, e, lo, hi, f, c }`, one row per period. */
+const INSIGHT_POINTS_DATASET = "points";
+/** The flagged period's expected interval — one row `{ x, lo, hi }`, and only when the corridor is a single scalar band. */
+const INSIGHT_INTERVAL_DATASET = "interval";
+/** The range strip's one row — `{ lo, hi, e, v, d0, d1, c }`. */
+const INSIGHT_STRIP_DATASET = "strip";
+/** Evenly spaced x labels that keep both ends and the flagged period. */
+const INSIGHT_X_TICKS_PARAM = "xTicks";
+/** The flagged period, so the axis anchors a label on it. */
+const INSIGHT_FLAG_PARAM = "flaggedX";
+/** The shared-x hover selection: projected onto `x`, so pointing anywhere in a column reads that period. */
+const INSIGHT_HOVER_PARAM = "hover";
+const POINT_SIZE = 72;
+const RING_SIZE = 220;
+const BAND_OPACITY = .16;
+const INTERVAL_WIDTH = 7;
+const INTERVAL_OPACITY = .34;
+const EXPECTED_DASH = [3, 3];
+const STRIP_MID = .5;
+const STRIP_BAND = [.24, .76];
+const STRIP_TICK = [.14, .86];
+const STRIP_HEIGHT_SCALE = {
+	domain: [0, 1],
+	nice: false
+};
+const STRIP_DOMAIN_EXPR = `length(data('${INSIGHT_STRIP_DATASET}')) ? [data('${INSIGHT_STRIP_DATASET}')[0].d0, data('${INSIGHT_STRIP_DATASET}')[0].d1] : [0, 1]`;
+const FLAG_INDEX_EXPR = `indexof(pluck(data('${INSIGHT_POINTS_DATASET}'), 'f'), true)`;
+const FLAG_EXPR = `(${FLAG_INDEX_EXPR} >= 0 ? data('${INSIGHT_POINTS_DATASET}')[${FLAG_INDEX_EXPR}].x : null)`;
+/**
+* The evidence spark: the measure over its history, the expected corridor
+* behind it, and the flagged reading marked with a dot inside a ring.
+*
+* The series takes the emphasis hue — one measure needs no identity colour —
+* while the corridor and the expectation take the context gray and the
+* reference role, so the ground can never be mistaken for a second series.
+* The flagged marker's colour rides the pushed row (`c`) with `scale: null`:
+* it is the one place a status hue belongs on a mark here, because there the
+* encoded value really is good or bad news.
+*/
+function buildInsightSparkSpec(options, tokens) {
+	const { height, xType, axes, zero, band, expectedLine, interval, tooltip, xTitle, valueTitle, expectedTitle, valueFormat, timeFormat, axisTimeFormat, yTicks, locale } = options;
+	const discreteX = xType === "ordinal";
+	const showX = axes === "x" || axes === "both";
+	const showY = axes === "y" || axes === "both";
+	const xTickFormat = xType === "temporal" ? axisTimeFormat : "compact";
+	const xTickKind = xType === "temporal" ? "time" : xType === "quantitative" ? "number" : "text";
+	const axisArgs = `domain('x'), width, ${discreteX}, ${JSON.stringify(xTickFormat)}, ${JSON.stringify(xTickKind)}`;
+	const anchorsArg = `, [${INSIGHT_FLAG_PARAM}, ${INSIGHT_FLAG_PARAM}]`;
+	const xAxisLabels = xType === "temporal" ? {
+		format: axisTimeFormat,
+		formatType: "arcTime"
+	} : xType === "quantitative" ? {
+		format: "compact",
+		formatType: "arcNumber"
+	} : {};
+	const xAxis = showX ? {
+		title: null,
+		orient: "bottom",
+		domain: true,
+		ticks: false,
+		grid: false,
+		values: { expr: INSIGHT_X_TICKS_PARAM },
+		labelAngle: 0,
+		labelAlign: { expr: `arcAxisLabelAlign(datum.value, ${axisArgs}${anchorsArg})` },
+		labelFlush: false,
+		labelOverlap: false,
+		labelLimit: { expr: AXIS_LABEL_LIMIT_EXPR },
+		labelPadding: 4,
+		...xAxisLabels
+	} : null;
+	const yAxis = showY ? {
+		title: null,
+		orient: "left",
+		domain: false,
+		ticks: false,
+		grid: true,
+		tickCount: yTicks,
+		labelOverlap: true,
+		labelPadding: 6,
+		format: valueFormat,
+		formatType: "arcNumber"
+	} : null;
+	const xField = discreteX ? {
+		field: "x",
+		type: "ordinal",
+		sort: null,
+		axis: xAxis,
+		title: null
+	} : {
+		field: "x",
+		type: xType,
+		axis: xAxis,
+		title: null,
+		scale: {
+			nice: false,
+			...xType === "quantitative" ? { zero: false } : {}
+		}
+	};
+	const yField = {
+		field: "y",
+		type: "quantitative",
+		axis: yAxis,
+		title: null,
+		scale: {
+			zero,
+			nice: showY
+		},
+		stack: null
+	};
+	const markerColor = {
+		field: "c",
+		type: "nominal",
+		scale: null,
+		legend: null
+	};
+	const tooltipChannel = [
+		xType === "temporal" ? {
+			field: "x",
+			type: "temporal",
+			title: xTitle,
+			format: timeFormat,
+			formatType: "arcTime"
+		} : xType === "quantitative" ? {
+			field: "x",
+			type: "quantitative",
+			title: xTitle,
+			format: "number",
+			formatType: "arcNumber"
+		} : {
+			field: "x",
+			type: "nominal",
+			title: xTitle
+		},
+		{
+			field: "y",
+			type: "quantitative",
+			title: valueTitle,
+			format: valueFormat,
+			formatType: "arcNumber"
+		},
+		{
+			field: "e",
+			type: "quantitative",
+			title: expectedTitle,
+			format: valueFormat,
+			formatType: "arcNumber"
+		}
+	];
+	const layers = [];
+	if (band) layers.push({
+		mark: {
+			type: "area",
+			line: false,
+			interpolate: "linear",
+			fill: tokens.context,
+			fillOpacity: BAND_OPACITY,
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: {
+				...yField,
+				field: "lo"
+			},
+			y2: { field: "hi" }
+		}
+	});
+	if (expectedLine) layers.push({
+		mark: {
+			type: "line",
+			interpolate: "linear",
+			stroke: tokens.reference,
+			strokeWidth: 1,
+			strokeDash: EXPECTED_DASH,
+			invalid: "break-paths-show-domains",
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: {
+				...yField,
+				field: "e"
+			}
+		}
+	});
+	if (interval) layers.push({
+		data: { name: INSIGHT_INTERVAL_DATASET },
+		mark: {
+			type: "rule",
+			stroke: tokens.context,
+			strokeWidth: INTERVAL_WIDTH,
+			strokeCap: "butt",
+			opacity: INTERVAL_OPACITY,
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: {
+				...yField,
+				field: "lo"
+			},
+			y2: { field: "hi" }
+		}
+	});
+	layers.push({
+		mark: {
+			type: "line",
+			interpolate: "linear",
+			stroke: tokens.emphasis,
+			invalid: "break-paths-show-domains",
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: yField
+		}
+	});
+	layers.push({
+		transform: [{ filter: "datum.f === true && isValid(datum.y)" }],
+		mark: {
+			type: "point",
+			filled: false,
+			size: RING_SIZE,
+			strokeWidth: 1.5,
+			opacity: 1,
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: yField,
+			stroke: markerColor
+		}
+	});
+	layers.push({
+		transform: [{ filter: "datum.f === true && isValid(datum.y)" }],
+		mark: {
+			type: "point",
+			filled: true,
+			size: POINT_SIZE,
+			stroke: tokens.background,
+			strokeWidth: 1.5,
+			opacity: 1,
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: yField,
+			fill: markerColor
+		}
+	});
+	if (tooltip) layers.push({
+		params: [{
+			name: INSIGHT_HOVER_PARAM,
+			select: {
+				type: "point",
+				on: "pointermove",
+				nearest: true,
+				clear: "pointerout",
+				encodings: ["x"]
+			}
+		}],
+		mark: {
+			type: "point",
+			filled: true,
+			size: POINT_SIZE,
+			stroke: tokens.background,
+			strokeWidth: 1.5,
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: yField,
+			fill: { value: tokens.emphasis },
+			opacity: {
+				condition: {
+					param: INSIGHT_HOVER_PARAM,
+					empty: false,
+					value: 1
+				},
+				value: 0
+			},
+			tooltip: tooltipChannel
+		}
+	});
+	const params = [{
+		name: INSIGHT_FLAG_PARAM,
+		expr: FLAG_EXPR
+	}];
+	if (showX) params.push({
+		name: INSIGHT_X_TICKS_PARAM,
+		expr: `arcAxisTicks(${axisArgs}${anchorsArg})`
+	});
+	return {
+		$schema: "https://vega.github.io/schema/vega-lite/v6.json",
+		width: 240,
+		height,
+		autosize: {
+			type: "fit",
+			contains: "padding"
+		},
+		padding: 0,
+		background: "transparent",
+		data: { name: INSIGHT_POINTS_DATASET },
+		params,
+		layer: layers,
+		config: arcVegaConfig(tokens, { locale })
+	};
+}
+/**
+* The range strip: the expected band laid on the value axis with the observed
+* reading marked against it. One dimension, no time — the honest degrade when
+* a finding has no history to plot, and the compact evidence for a dense rail.
+*
+* It draws no axis. The key row above it prints the reading, the expectation
+* and the range in real type, which is both more legible than three tick
+* labels under a 24px strip and the reason every layer here can agree on
+* `axis: null` — the one arrangement Vega-Lite never mis-merges.
+*
+* The domain comes out of the pushed row rather than from a scale
+* computation, so a new finding moves the marker without re-embedding.
+*/
+function buildInsightStripSpec(options, tokens) {
+	const { height, band, expected, tooltip, observedTitle, expectedTitle, lowerTitle, upperTitle, valueFormat, locale } = options;
+	const xChannel = (field) => ({
+		field,
+		type: "quantitative",
+		scale: {
+			domain: { expr: STRIP_DOMAIN_EXPR },
+			nice: false
+		},
+		axis: null,
+		title: null
+	});
+	const yAt = (value) => ({
+		datum: value,
+		type: "quantitative",
+		scale: STRIP_HEIGHT_SCALE,
+		axis: null,
+		title: null
+	});
+	const markerColor = {
+		field: "c",
+		type: "nominal",
+		scale: null,
+		legend: null
+	};
+	const tooltipChannel = [
+		{
+			field: "v",
+			type: "quantitative",
+			title: observedTitle,
+			format: valueFormat,
+			formatType: "arcNumber"
+		},
+		{
+			field: "e",
+			type: "quantitative",
+			title: expectedTitle,
+			format: valueFormat,
+			formatType: "arcNumber"
+		},
+		{
+			field: "lo",
+			type: "quantitative",
+			title: lowerTitle,
+			format: valueFormat,
+			formatType: "arcNumber"
+		},
+		{
+			field: "hi",
+			type: "quantitative",
+			title: upperTitle,
+			format: valueFormat,
+			formatType: "arcNumber"
+		}
+	];
+	const layers = [];
+	layers.push({
+		mark: {
+			type: "rule",
+			stroke: tokens.grid,
+			strokeWidth: 1,
+			aria: false
+		},
+		encoding: {
+			x: xChannel("d0"),
+			x2: { field: "d1" },
+			y: yAt(STRIP_MID)
+		}
+	});
+	if (band) layers.push({
+		mark: {
+			type: "rect",
+			fill: tokens.context,
+			fillOpacity: BAND_OPACITY * 2,
+			cornerRadius: 2,
+			aria: false
+		},
+		encoding: {
+			x: xChannel("lo"),
+			x2: { field: "hi" },
+			y: yAt(STRIP_BAND[0]),
+			y2: yAt(STRIP_BAND[1])
+		}
+	});
+	if (expected) layers.push({
+		mark: {
+			type: "rule",
+			stroke: tokens.reference,
+			strokeWidth: 1,
+			strokeDash: EXPECTED_DASH,
+			aria: false
+		},
+		encoding: {
+			x: xChannel("e"),
+			y: yAt(STRIP_TICK[0]),
+			y2: yAt(STRIP_TICK[1])
+		}
+	});
+	layers.push({
+		mark: {
+			type: "point",
+			filled: false,
+			size: RING_SIZE,
+			strokeWidth: 1.5,
+			opacity: 1,
+			aria: false
+		},
+		encoding: {
+			x: xChannel("v"),
+			y: yAt(STRIP_MID),
+			stroke: markerColor
+		}
+	});
+	layers.push({
+		mark: {
+			type: "point",
+			filled: true,
+			size: POINT_SIZE,
+			stroke: tokens.background,
+			strokeWidth: 1.5,
+			opacity: 1,
+			aria: false
+		},
+		encoding: {
+			x: xChannel("v"),
+			y: yAt(STRIP_MID),
+			fill: markerColor,
+			...tooltip ? { tooltip: tooltipChannel } : {}
+		}
+	});
+	return {
+		$schema: "https://vega.github.io/schema/vega-lite/v6.json",
+		width: 240,
+		height,
+		autosize: {
+			type: "fit",
+			contains: "padding"
+		},
+		padding: 0,
+		background: "transparent",
+		data: { name: INSIGHT_STRIP_DATASET },
+		layer: layers,
+		config: arcVegaConfig(tokens, { locale })
+	};
+}
+//#endregion
+export { INSIGHT_FLAG_PARAM, INSIGHT_HOVER_PARAM, INSIGHT_INTERVAL_DATASET, INSIGHT_POINTS_DATASET, INSIGHT_STRIP_DATASET, INSIGHT_X_TICKS_PARAM, buildInsightSparkSpec, buildInsightStripSpec };