@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/indicators/IndicatorEnums.js

@@ -0,0 +1,331 @@
+// src/charts/indicators/IndicatorEnums.ts
+/** How much of the circle a dial spans. */
+var GaugeSweep = /* @__PURE__ */ function(GaugeSweep) {
+	GaugeSweep["Semi"] = "semi";
+	GaugeSweep["Horseshoe"] = "horseshoe";
+	GaugeSweep["ThreeQuarter"] = "three-quarter";
+	GaugeSweep["Fan"] = "fan";
+	GaugeSweep["Full"] = "full";
+	return GaugeSweep;
+}({});
+var GaugeMarker = /* @__PURE__ */ function(GaugeMarker) {
+	GaugeMarker["Fill"] = "fill";
+	GaugeMarker["Needle"] = "needle";
+	GaugeMarker["Dot"] = "dot";
+	return GaugeMarker;
+}({});
+var GaugeScale = /* @__PURE__ */ function(GaugeScale) {
+	GaugeScale["None"] = "no-scale";
+	GaugeScale["Ends"] = "ends";
+	GaugeScale["Full"] = "full-scale";
+	return GaugeScale;
+}({});
+var NeedleStyle = /* @__PURE__ */ function(NeedleStyle) {
+	NeedleStyle["Taper"] = "taper";
+	NeedleStyle["Line"] = "line";
+	NeedleStyle["Arrow"] = "arrow";
+	return NeedleStyle;
+}({});
+var NumeralPlacement = /* @__PURE__ */ function(NumeralPlacement) {
+	NumeralPlacement["Inside"] = "inside";
+	NumeralPlacement["Outside"] = "outside";
+	return NumeralPlacement;
+}({});
+var TickDensity = /* @__PURE__ */ function(TickDensity) {
+	TickDensity["Coarse"] = "coarse";
+	TickDensity["Fine"] = "fine";
+	return TickDensity;
+}({});
+var IndicatorCap = /* @__PURE__ */ function(IndicatorCap) {
+	IndicatorCap["Round"] = "round";
+	IndicatorCap["Flat"] = "flat";
+	return IndicatorCap;
+}({});
+var IndicatorStatus = /* @__PURE__ */ function(IndicatorStatus) {
+	IndicatorStatus["Good"] = "good";
+	IndicatorStatus["Warning"] = "warning";
+	IndicatorStatus["Critical"] = "critical";
+	return IndicatorStatus;
+}({});
+var SegmentMark = /* @__PURE__ */ function(SegmentMark) {
+	SegmentMark["Block"] = "block";
+	SegmentMark["Tick"] = "tick";
+	SegmentMark["Dot"] = "dot";
+	SegmentMark["Wedge"] = "wedge";
+	return SegmentMark;
+}({});
+var SegmentLit = /* @__PURE__ */ function(SegmentLit) {
+	SegmentLit["Cumulative"] = "cumulative";
+	SegmentLit["Single"] = "single";
+	SegmentLit["Partial"] = "partial";
+	return SegmentLit;
+}({});
+var MeterForm = /* @__PURE__ */ function(MeterForm) {
+	MeterForm["Bar"] = "bar";
+	MeterForm["Blocks"] = "blocks";
+	MeterForm["Dots"] = "dots";
+	return MeterForm;
+}({});
+var MeterZones = /* @__PURE__ */ function(MeterZones) {
+	MeterZones["None"] = "no-zones";
+	MeterZones["Ticks"] = "zone-ticks";
+	MeterZones["Strip"] = "zone-strip";
+	return MeterZones;
+}({});
+var MeterLabel = /* @__PURE__ */ function(MeterLabel) {
+	MeterLabel["Above"] = "above";
+	MeterLabel["Side"] = "side";
+	return MeterLabel;
+}({});
+var BulletMeasure = /* @__PURE__ */ function(BulletMeasure) {
+	BulletMeasure["Bar"] = "bar";
+	BulletMeasure["Dot"] = "dot";
+	return BulletMeasure;
+}({});
+var BulletTarget = /* @__PURE__ */ function(BulletTarget) {
+	BulletTarget["Tick"] = "tick";
+	BulletTarget["Triangle"] = "triangle";
+	BulletTarget["None"] = "no-target";
+	return BulletTarget;
+}({});
+var BulletScale = /* @__PURE__ */ function(BulletScale) {
+	BulletScale["Shared"] = "shared";
+	BulletScale["Relative"] = "relative";
+	return BulletScale;
+}({});
+var ThermometerBase = /* @__PURE__ */ function(ThermometerBase) {
+	ThermometerBase["Bulb"] = "bulb";
+	ThermometerBase["Flat"] = "flat";
+	return ThermometerBase;
+}({});
+var ThermometerScale = /* @__PURE__ */ function(ThermometerScale) {
+	ThermometerScale["Major"] = "major";
+	ThermometerScale["Fine"] = "fine";
+	ThermometerScale["None"] = "no-graduation";
+	return ThermometerScale;
+}({});
+var ThermometerSide = /* @__PURE__ */ function(ThermometerSide) {
+	ThermometerSide["Left"] = "left";
+	ThermometerSide["Right"] = "right";
+	ThermometerSide["Both"] = "both";
+	return ThermometerSide;
+}({});
+var KpiLayout = /* @__PURE__ */ function(KpiLayout) {
+	KpiLayout["Stacked"] = "stacked";
+	KpiLayout["Split"] = "split";
+	KpiLayout["Backdrop"] = "backdrop";
+	return KpiLayout;
+}({});
+var KpiSpark = /* @__PURE__ */ function(KpiSpark) {
+	KpiSpark["Line"] = "line";
+	KpiSpark["Area"] = "area";
+	KpiSpark["Bars"] = "bars";
+	KpiSpark["Step"] = "step";
+	KpiSpark["None"] = "no-spark";
+	return KpiSpark;
+}({});
+var KpiDelta = /* @__PURE__ */ function(KpiDelta) {
+	KpiDelta["Arrow"] = "arrow";
+	KpiDelta["Pill"] = "pill";
+	KpiDelta["Bar"] = "bar";
+	return KpiDelta;
+}({});
+var KpiCompare = /* @__PURE__ */ function(KpiCompare) {
+	KpiCompare["First"] = "first";
+	KpiCompare["Previous"] = "previous";
+	KpiCompare["Mean"] = "mean";
+	return KpiCompare;
+}({});
+var RingStart = /* @__PURE__ */ function(RingStart) {
+	RingStart["Top"] = "top";
+	RingStart["Left"] = "left";
+	RingStart["Bottom"] = "bottom";
+	return RingStart;
+}({});
+var RingDirection = /* @__PURE__ */ function(RingDirection) {
+	RingDirection["Clockwise"] = "clockwise";
+	RingDirection["Counter"] = "counter";
+	return RingDirection;
+}({});
+var RingTrack = /* @__PURE__ */ function(RingTrack) {
+	RingTrack["Solid"] = "solid";
+	RingTrack["Ticks"] = "ticks";
+	RingTrack["None"] = "no-track";
+	return RingTrack;
+}({});
+var LiquidShape = /* @__PURE__ */ function(LiquidShape) {
+	LiquidShape["Circle"] = "circle";
+	LiquidShape["Rounded"] = "rounded";
+	LiquidShape["Hexagon"] = "hexagon";
+	LiquidShape["Drop"] = "drop";
+	LiquidShape["Tank"] = "tank";
+	return LiquidShape;
+}({});
+var LiquidLevel = /* @__PURE__ */ function(LiquidLevel) {
+	LiquidLevel["Height"] = "height";
+	LiquidLevel["Area"] = "area";
+	return LiquidLevel;
+}({});
+var LiquidWave = /* @__PURE__ */ function(LiquidWave) {
+	LiquidWave["Gentle"] = "gentle";
+	LiquidWave["Choppy"] = "choppy";
+	LiquidWave["Flat"] = "flat";
+	return LiquidWave;
+}({});
+var RadialOrder = /* @__PURE__ */ function(RadialOrder) {
+	RadialOrder["Data"] = "data";
+	RadialOrder["Descending"] = "descending";
+	RadialOrder["Ascending"] = "ascending";
+	return RadialOrder;
+}({});
+var RadialLabel = /* @__PURE__ */ function(RadialLabel) {
+	RadialLabel["Start"] = "start";
+	RadialLabel["Key"] = "key";
+	return RadialLabel;
+}({});
+var RingOverflow = /* @__PURE__ */ function(RingOverflow) {
+	RingOverflow["Wrap"] = "wrap";
+	RingOverflow["Clamp"] = "clamp";
+	return RingOverflow;
+}({});
+var TargetRingScale = /* @__PURE__ */ function(TargetRingScale) {
+	TargetRingScale["Linear"] = "linear";
+	TargetRingScale["EqualArea"] = "equal-area";
+	return TargetRingScale;
+}({});
+var TargetPlacement = /* @__PURE__ */ function(TargetPlacement) {
+	TargetPlacement["Even"] = "even";
+	TargetPlacement["Spiral"] = "spiral";
+	TargetPlacement["Sides"] = "sides";
+	return TargetPlacement;
+}({});
+var TargetMark = /* @__PURE__ */ function(TargetMark) {
+	TargetMark["Dot"] = "dot";
+	TargetMark["Stem"] = "stem";
+	return TargetMark;
+}({});
+var TargetRingStyle = /* @__PURE__ */ function(TargetRingStyle) {
+	TargetRingStyle["Filled"] = "filled";
+	TargetRingStyle["Reticle"] = "reticle";
+	return TargetRingStyle;
+}({});
+var RatingGlyph = /* @__PURE__ */ function(RatingGlyph) {
+	RatingGlyph["Star"] = "star";
+	RatingGlyph["Heart"] = "heart";
+	RatingGlyph["Circle"] = "circle";
+	RatingGlyph["Diamond"] = "diamond";
+	return RatingGlyph;
+}({});
+var RatingLayout = /* @__PURE__ */ function(RatingLayout) {
+	RatingLayout["List"] = "list";
+	RatingLayout["Hero"] = "hero";
+	RatingLayout["Breakdown"] = "breakdown";
+	return RatingLayout;
+}({});
+var RatingPrecision = /* @__PURE__ */ function(RatingPrecision) {
+	RatingPrecision["Exact"] = "exact";
+	RatingPrecision["Half"] = "half";
+	RatingPrecision["Whole"] = "whole";
+	return RatingPrecision;
+}({});
+var HarveyForm = /* @__PURE__ */ function(HarveyForm) {
+	HarveyForm["Pie"] = "pie";
+	HarveyForm["Level"] = "level";
+	HarveyForm["Ring"] = "ring";
+	return HarveyForm;
+}({});
+var HarveyLayout = /* @__PURE__ */ function(HarveyLayout) {
+	HarveyLayout["Matrix"] = "matrix";
+	HarveyLayout["List"] = "list";
+	return HarveyLayout;
+}({});
+var TrafficLayout = /* @__PURE__ */ function(TrafficLayout) {
+	TrafficLayout["Housing"] = "housing";
+	TrafficLayout["List"] = "list";
+	TrafficLayout["Matrix"] = "matrix";
+	return TrafficLayout;
+}({});
+var TrafficHousing = /* @__PURE__ */ function(TrafficHousing) {
+	TrafficHousing["Pill"] = "pill";
+	TrafficHousing["Box"] = "box";
+	TrafficHousing["Bare"] = "bare";
+	return TrafficHousing;
+}({});
+var DeltaForm = /* @__PURE__ */ function(DeltaForm) {
+	DeltaForm["Triangle"] = "triangle";
+	DeltaForm["Chevrons"] = "chevrons";
+	DeltaForm["Bar"] = "bar";
+	DeltaForm["Slope"] = "slope";
+	DeltaForm["Dumbbell"] = "dumbbell";
+	return DeltaForm;
+}({});
+var DeltaMode = /* @__PURE__ */ function(DeltaMode) {
+	DeltaMode["Percent"] = "percent";
+	DeltaMode["Absolute"] = "absolute";
+	return DeltaMode;
+}({});
+var DeltaSort = /* @__PURE__ */ function(DeltaSort) {
+	DeltaSort["Data"] = "data";
+	DeltaSort["Magnitude"] = "magnitude";
+	return DeltaSort;
+}({});
+var DeltaLayout = /* @__PURE__ */ function(DeltaLayout) {
+	DeltaLayout["List"] = "list";
+	DeltaLayout["Tiles"] = "tiles";
+	return DeltaLayout;
+}({});
+var ScoreGauge = /* @__PURE__ */ function(ScoreGauge) {
+	ScoreGauge["Bullet"] = "bullet";
+	ScoreGauge["Bar"] = "bar";
+	ScoreGauge["Dot"] = "dot";
+	return ScoreGauge;
+}({});
+var ScoreStatus = /* @__PURE__ */ function(ScoreStatus) {
+	ScoreStatus["Pill"] = "pill";
+	ScoreStatus["Icon"] = "icon";
+	return ScoreStatus;
+}({});
+var ScoreDensity = /* @__PURE__ */ function(ScoreDensity) {
+	ScoreDensity["Comfortable"] = "comfortable";
+	ScoreDensity["Compact"] = "compact";
+	return ScoreDensity;
+}({});
+var ScoreSort = /* @__PURE__ */ function(ScoreSort) {
+	ScoreSort["Data"] = "data";
+	ScoreSort["Worst"] = "worst";
+	return ScoreSort;
+}({});
+var TallyBundle = /* @__PURE__ */ function(TallyBundle) {
+	TallyBundle["Gate"] = "gate";
+	TallyBundle["Zheng"] = "zheng";
+	TallyBundle["Box"] = "box";
+	TallyBundle["Plain"] = "plain";
+	return TallyBundle;
+}({});
+var TallyLayout = /* @__PURE__ */ function(TallyLayout) {
+	TallyLayout["Rows"] = "rows";
+	TallyLayout["Columns"] = "columns";
+	return TallyLayout;
+}({});
+var BatteryRim = /* @__PURE__ */ function(BatteryRim) {
+	BatteryRim["Outline"] = "outline";
+	BatteryRim["Solid"] = "solid";
+	return BatteryRim;
+}({});
+var StepForm = /* @__PURE__ */ function(StepForm) {
+	StepForm["Line"] = "line";
+	StepForm["Chevrons"] = "chevrons";
+	StepForm["Bars"] = "bars";
+	return StepForm;
+}({});
+var StepLabels = /* @__PURE__ */ function(StepLabels) {
+	StepLabels["Below"] = "below";
+	StepLabels["Alternate"] = "alternate";
+	return StepLabels;
+}({});
+var VuResponse = /* @__PURE__ */ function(VuResponse) {
+	VuResponse["Linear"] = "linear";
+	VuResponse["Decibel"] = "decibel";
+	return VuResponse;
+}({});
+export { BatteryRim, BulletMeasure, BulletScale, BulletTarget, DeltaForm, DeltaLayout, DeltaMode, DeltaSort, GaugeMarker, GaugeScale, GaugeSweep, HarveyForm, HarveyLayout, IndicatorCap, IndicatorStatus, KpiCompare, KpiDelta, KpiLayout, KpiSpark, LiquidLevel, LiquidShape, LiquidWave, MeterForm, MeterLabel, MeterZones, NeedleStyle, NumeralPlacement, RadialLabel, RadialOrder, RatingGlyph, RatingLayout, RatingPrecision, RingDirection, RingOverflow, RingStart, RingTrack, ScoreDensity, ScoreGauge, ScoreSort, ScoreStatus, SegmentLit, SegmentMark, StepForm, StepLabels, TallyBundle, TallyLayout, TargetMark, TargetPlacement, TargetRingScale, TargetRingStyle, ThermometerBase, ThermometerScale, ThermometerSide, TickDensity, TrafficHousing, TrafficLayout, VuResponse };

package/dist/charts/indicators/IndicatorSamples.js

@@ -0,0 +1,18 @@
+import { SampleData } from "../../data/SampleData.js";
+// src/charts/indicators/IndicatorSamples.ts
+/** Reshapes `SampleData.categories` into the goal-tracking rows the indicator charts read. */
+var IndicatorSamples = class {
+	/** `{ category, value, target, previous }`, one row per category. */
+	static goals(seed, count) {
+		return SampleData.categories(seed, count, 3).reduce((rows, row, i, all) => {
+			if (i % 3 === 0) rows.push({
+				category: row.category,
+				value: row.value,
+				target: Math.round(+all[i + 1].value * .4 + 52),
+				previous: all[i + 2].value
+			});
+			return rows;
+		}, []);
+	}
+};
+export { IndicatorSamples };

package/dist/charts/indicators/KpiTile.js

@@ -0,0 +1,249 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { IndicatorStatus, KpiCompare, KpiDelta, KpiLayout, KpiSpark } from "./IndicatorEnums.js";
+import { area, curveLinear, curveMonotoneX, curveStepAfter, group, line, mean, scaleLinear } from "d3";
+// src/charts/indicators/KpiTile.ts
+/** The dashboard stat tile: headline number, change against a baseline and a sparkline of how it got there. */
+var KpiTile = class extends IndicatorChart {
+	static meta = {
+		id: "kpi-tile",
+		name: "KPI tile",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "A stat tile pairing the latest value with its change and a sparkline of recent history.",
+		tags: [
+			"stat",
+			"sparkline",
+			"delta",
+			"dashboard",
+			"big number"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 30, 2),
+		variants: {
+			layout: [
+				KpiLayout.Stacked,
+				KpiLayout.Split,
+				KpiLayout.Backdrop
+			],
+			spark: [
+				KpiSpark.Line,
+				KpiSpark.Area,
+				KpiSpark.Bars,
+				KpiSpark.Step,
+				KpiSpark.None
+			],
+			delta: [
+				KpiDelta.Arrow,
+				KpiDelta.Pill,
+				KpiDelta.Bar
+			],
+			compare: [
+				KpiCompare.First,
+				KpiCompare.Previous,
+				KpiCompare.Mean
+			],
+			reference: [true, false]
+		},
+		valid: (v) => (v.layout !== KpiLayout.Backdrop || v.spark !== KpiSpark.Area) && (v.spark === KpiSpark.None ? v.layout === KpiLayout.Stacked && v.reference === true && v.compare === KpiCompare.First : v.reference === true || v.compare === KpiCompare.First)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			series: "series",
+			x: "date",
+			layout: KpiLayout.Stacked,
+			spark: KpiSpark.Line,
+			delta: KpiDelta.Arrow,
+			compare: KpiCompare.First,
+			reference: true
+		};
+	}
+	/** One reading per series; rows of a series are its history, oldest first. */
+	readings(rows = this.options.data ?? []) {
+		const { series, x, value } = this.options;
+		const order = (row) => +row[x] || 0;
+		return [...group(rows.filter((row) => row[value] !== null && row[value] !== void 0 && Number.isFinite(+row[value])), (row) => String(row[series] ?? ""))].map(([name, own], i) => {
+			const sorted = [...own].sort((a, b) => order(a) - order(b));
+			const history = sorted.map((row) => +row[value]);
+			const last = history[history.length - 1];
+			return {
+				id: `${name}#${i}`,
+				label: name,
+				value: last,
+				target: null,
+				previous: this.baseline(history),
+				fraction: 1,
+				targetFraction: null,
+				attainment: 1,
+				history,
+				row: sorted[sorted.length - 1]
+			};
+		});
+	}
+	baseline(history) {
+		if (history.length < 2) return null;
+		const { compare } = this.options;
+		if (compare === KpiCompare.Previous) return history[history.length - 2];
+		return compare === KpiCompare.Mean ? mean(history) : history[0];
+	}
+	drawReadings(ctx, readings) {
+		this.facets(ctx, readings, this.options.layout === KpiLayout.Split ? 2.4 : 1.1, (cell, reading) => this.tile(cell, reading), 90);
+	}
+	tooltip(reading, color) {
+		const change = this.change(reading);
+		return {
+			title: reading.label,
+			color,
+			rows: [["Latest", this.formatted(reading.value)], ...change === null ? [] : [["Baseline", this.formatted(reading.previous)], ["Change", this.formatted(change)]]]
+		};
+	}
+	change(reading) {
+		return reading.previous === null ? null : reading.value - reading.previous;
+	}
+	/** Direction with its icon; colour follows whether the change is welcome. */
+	trend(change) {
+		const good = change === 0 || change > 0 === this.options.higherIsBetter;
+		return this.statusView(good ? IndicatorStatus.Good : IndicatorStatus.Critical);
+	}
+	tile(ctx, reading) {
+		const { layout } = this.options;
+		const { width, height } = ctx.plot;
+		const split = layout === KpiLayout.Split;
+		const size = Math.max(20, Math.min(height * .3, split ? 34 : 40, width * .16));
+		const value = this.formatted(reading.value);
+		const count = [reading.value, (v) => this.formatted(v)];
+		const block = 14 + size + 26;
+		const y0 = split ? Math.max(6, (height - block) / 2) + 6 : 6;
+		this.texts(ctx, "text", [{
+			key: "label",
+			text: this.fit(reading.label, width),
+			x: 0,
+			y: y0,
+			anchor: "start",
+			size: 12
+		}, {
+			key: "value",
+			text: value,
+			x: 0,
+			y: y0 + 13 + size / 2,
+			size,
+			tone: "ink",
+			weight: 600,
+			anchor: "start",
+			count
+		}]);
+		this.delta(ctx, reading, y0 + 26 + size, split ? width * .42 : width);
+		const textBottom = y0 + 26 + size + 12;
+		const box = split ? {
+			x: width * .46,
+			y: height * .14,
+			width: width * .54,
+			height: height * .72
+		} : layout === KpiLayout.Backdrop ? {
+			x: 0,
+			y: textBottom - 8,
+			width,
+			height: Math.max(0, height - textBottom + 8)
+		} : {
+			x: 0,
+			y: textBottom + 4,
+			width,
+			height: Math.max(0, height - textBottom - 6)
+		};
+		this.spark(ctx, reading, box);
+	}
+	delta(ctx, reading, y, room) {
+		const { delta } = this.options;
+		const change = this.change(reading);
+		const known = change !== null;
+		const percent = known && reading.previous ? change / Math.abs(reading.previous) * 100 : null;
+		const text = known ? `${change >= 0 ? "+" : ""}${this.formatted(change)}${percent === null ? "" : ` (${percent >= 0 ? "+" : ""}${percent.toFixed(1)}%)`}` : "";
+		const view = known ? this.trend(change) : null;
+		const up = (change ?? 0) >= 0;
+		const offset = delta === KpiDelta.Bar ? 40 : delta === KpiDelta.Pill ? 21 : 16;
+		const word = view?.key === IndicatorStatus.Critical ? "worse" : "better";
+		const shown = this.fit(this.textWidth(text) + offset + 44 < room && known ? `${text} ${word}` : text, room - offset);
+		const wide = this.textWidth(shown);
+		const pill = ctx.marks("pill", "rect", delta === KpiDelta.Pill && known ? [reading] : [], (d) => d.id).attr("fill", view?.color ?? ctx.theme.grid).attr("fill-opacity", .16).attr("x", 0).attr("y", y - 10).attr("width", wide + 26).attr("height", 20).attr("rx", 10);
+		ctx.hover(pill, (d) => this.tooltip(d, view?.color));
+		const arrow = ctx.marks("arrow", "path", known && delta !== KpiDelta.Bar ? [reading] : [], (d) => d.id).attr("fill", view?.color ?? ctx.theme.inkMuted).attr("d", up ? "M0 -5 L5.5 4 H-5.5 Z" : "M0 5 L5.5 -4 H-5.5 Z").attr("transform", `translate(${delta === KpiDelta.Pill ? 11 : 6},${y})`);
+		ctx.hover(arrow, (d) => this.tooltip(d, view?.color));
+		const meter = delta === KpiDelta.Bar && known && reading.history ? [reading] : [];
+		const bound = Math.max(...(reading.history ?? [0]).map((v, i, all) => Math.abs(v - (all[i - 1] ?? v))), Math.abs(change ?? 0), 1e-9);
+		const length = Math.abs(change ?? 0) / bound * 18;
+		const axis = ctx.marks("delta-axis", "rect", meter, (d) => d.id).attr("x", 17).attr("y", y - 6).attr("width", 2).attr("height", 12).attr("fill", ctx.theme.axis);
+		const bar = ctx.marks("delta-bar", "rect", meter, (d) => d.id).attr("y", y - 4).attr("height", 8).attr("rx", 2).attr("fill", view?.color ?? ctx.theme.inkMuted);
+		ctx.set(bar, {
+			x: up ? 19 : 17 - length,
+			width: length
+		}, {
+			x: up ? 19 : 17,
+			width: 0
+		});
+		ctx.hover(axis, (d) => this.tooltip(d));
+		ctx.hover(bar, (d) => this.tooltip(d, view?.color));
+		this.texts(ctx, "change", [{
+			key: "change",
+			text: shown,
+			x: offset,
+			y,
+			anchor: "start"
+		}]);
+	}
+	spark(ctx, reading, box) {
+		const { spark, reference } = this.options;
+		const history = reading.history ?? [];
+		const color = this.accent(ctx);
+		const usable = spark !== KpiSpark.None && history.length > 1 && box.height >= 12;
+		const low = Math.min(...history), high = Math.max(...history), pad = (high - low || 1) * .08;
+		const x = scaleLinear().domain([0, Math.max(1, history.length - 1)]).range([box.x + 3, box.x + box.width - 7]);
+		const y = scaleLinear().domain([low - pad, high + pad]).range([box.y + box.height, box.y]);
+		const bars = spark === KpiSpark.Bars;
+		const curve = spark === KpiSpark.Step ? curveStepAfter : spark === KpiSpark.Line || spark === KpiSpark.Area ? curveMonotoneX : curveLinear;
+		const trace = line((_, i) => x(i), (v) => y(v)).curve(curve);
+		const under = area((_, i) => x(i), box.y + box.height, (v) => y(v)).curve(curve);
+		const backdrop = this.options.layout === KpiLayout.Backdrop;
+		const filled = usable && (spark === KpiSpark.Area || backdrop && !bars);
+		const shade = ctx.marks("spark-area", "path", filled ? [history] : [], (_, i) => i).attr("fill", color).attr("fill-opacity", backdrop ? .14 : .2).attr("d", (d) => under(d) ?? "");
+		ctx.hover(shade, () => this.tooltip(reading, color));
+		const stroke = ctx.marks("spark-line", "path", usable && !bars ? [history] : [], (_, i) => i).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("d", (d) => trace(d) ?? "");
+		ctx.drawOn(stroke);
+		ctx.hover(stroke, () => this.tooltip(reading, color));
+		const slot = box.width / Math.max(1, history.length), base = box.y + box.height;
+		const columns = usable && bars ? history.map((v, i) => ({
+			key: `${i}`,
+			x: box.x + i * slot,
+			y: y(v),
+			width: Math.max(1, slot - 2),
+			height: base - y(v)
+		})) : [];
+		const rects = ctx.marks("spark-bars", "rect", columns, (d) => d.key).attr("fill", color).attr("fill-opacity", backdrop ? .3 : 1).attr("rx", Math.min(2, slot / 3));
+		ctx.set(rects, {
+			x: (d) => d.x,
+			width: (d) => d.width,
+			y: (d) => d.y,
+			height: (d) => d.height
+		}, {
+			x: (d) => d.x,
+			width: (d) => d.width,
+			y: base,
+			height: 0
+		}, 6);
+		ctx.hover(rects, (d, i) => ({
+			title: reading.label,
+			color,
+			rows: [[`Point ${i + 1}`, this.formatted(history[+d.key])]]
+		}));
+		const line0 = usable && reference && reading.previous !== null ? [reading.previous] : [];
+		const guide = ctx.marks("reference", "line", line0, (_, i) => i).attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 1).attr("stroke-dasharray", "3 3").attr("x1", box.x).attr("x2", box.x + box.width).attr("y1", (v) => y(v)).attr("y2", (v) => y(v));
+		ctx.hover(guide, (v) => ({
+			title: "Baseline",
+			rows: [["Value", this.formatted(v)]]
+		}));
+		const tip = ctx.marks("spark-end", "circle", usable && !bars ? [reading] : [], (d) => d.id).attr("r", 4.5).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("cx", x(history.length - 1)).attr("cy", y(history[history.length - 1] ?? 0));
+		ctx.hover(tip, (d) => this.tooltip(d, color));
+	}
+};
+export { KpiTile };