@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/bars/WaterfallChart.js

@@ -0,0 +1,214 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BandChart } from "./BandChart.js";
+import { BarRows, BarSort } from "./BarRows.js";
+import { descending, max, min } from "d3";
+// src/charts/bars/WaterfallChart.ts
+var WaterfallChartTotals = /* @__PURE__ */ function(WaterfallChartTotals) {
+	WaterfallChartTotals["End"] = "end";
+	WaterfallChartTotals["None"] = "none";
+	WaterfallChartTotals["Subtotals"] = "subtotals";
+	return WaterfallChartTotals;
+}({});
+var WaterfallChartStep = /* @__PURE__ */ function(WaterfallChartStep) {
+	WaterfallChartStep["Bar"] = "bar";
+	WaterfallChartStep["Slim"] = "slim";
+	WaterfallChartStep["Arrow"] = "arrow";
+	return WaterfallChartStep;
+}({});
+var reshape = (seed) => SampleData.categories(seed, 8, 1).map((row, i) => ({
+	...row,
+	value: i ? (+row.value - 58) * 1.4 | 0 : +row.value + 120
+}));
+/** Walk from a start to an end value through signed contributions, such as a profit bridge. */
+var WaterfallChart = class extends BandChart {
+	static meta = {
+		id: "bar-waterfall",
+		name: "Waterfall chart",
+		family: ChartFamily.Comparison,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Floats each change from the running total so a sequence of gains and losses adds up visibly.",
+		tags: [
+			"bridge",
+			"cascade",
+			"contribution"
+		],
+		sample: reshape,
+		variants: {
+			orientation: [Orientation.Vertical, Orientation.Horizontal],
+			totals: [
+				"end",
+				"none",
+				"subtotals"
+			],
+			step: [
+				"bar",
+				"slim",
+				"arrow"
+			],
+			sort: [BarSort.Data, BarSort.Descending],
+			connectors: [true, false],
+			labels: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			x: "category",
+			y: "value",
+			orientation: Orientation.Vertical,
+			sort: BarSort.Data,
+			totals: "end",
+			step: "bar",
+			connectors: true,
+			labels: false,
+			totalLabel: "Total"
+		};
+	}
+	get steps() {
+		const { data, x, y, sort, totals, totalLabel } = this.options;
+		const [opening, ...rest] = BarRows.rollup(data, x, y);
+		if (!opening) return [];
+		const changes = sort === BarSort.Descending ? rest.sort((a, b) => descending(Math.abs(a.value), Math.abs(b.value))) : rest;
+		const steps = [];
+		let running = 0;
+		const add = (band, delta) => {
+			steps.push({
+				band,
+				start: running,
+				end: running + delta,
+				delta,
+				total: false
+			});
+			running += delta;
+		};
+		const pin = (band) => {
+			steps.push({
+				band,
+				start: 0,
+				end: running,
+				delta: running,
+				total: true
+			});
+		};
+		steps.push({
+			band: opening.band,
+			start: 0,
+			end: opening.value,
+			delta: opening.value,
+			total: true
+		});
+		running = opening.value;
+		const half = Math.ceil(changes.length / 2);
+		changes.forEach((change, i) => {
+			if (totals === "subtotals" && i === half) pin("Subtotal");
+			add(change.band, change.value);
+		});
+		if (totals !== "none") pin(totalLabel);
+		return steps;
+	}
+	bandNames() {
+		return this.steps.map((step) => step.band);
+	}
+	bandPadding() {
+		return .18;
+	}
+	valueExtent() {
+		const edges = this.steps.flatMap((step) => [step.start, step.end]);
+		return [Math.min(0, min(edges) ?? 0), Math.max(0, max(edges) ?? 1)];
+	}
+	reserve() {
+		if (!this.options.labels) return [0, 0];
+		const room = this.vertical ? 16 : 36;
+		return [this.valueExtent()[0] < 0 ? room : 0, room];
+	}
+	tone(step) {
+		if (step.total) return this.theme.inkMuted;
+		return this.palette.diverging(step.delta < 0 ? -.9 : .9);
+	}
+	legendItems() {
+		const present = this.steps;
+		return [
+			{
+				key: "Increase",
+				hit: present.some((step) => !step.total && step.delta >= 0),
+				color: this.palette.diverging(.9)
+			},
+			{
+				key: "Decrease",
+				hit: present.some((step) => !step.total && step.delta < 0),
+				color: this.palette.diverging(-.9)
+			},
+			{
+				key: "Total",
+				hit: present.some((step) => step.total),
+				color: this.theme.inkMuted
+			}
+		].filter((item) => item.hit);
+	}
+	drawBands(ctx, frame) {
+		const { steps } = this;
+		const { step, connectors, labels } = this.options;
+		const size = (d) => d.total || step === "bar" ? frame.thick : step === "slim" ? Math.max(4, frame.thick * .36) : 0;
+		const at = (d) => (frame.band(d.band) ?? 0) + (frame.thick - size(d)) / 2;
+		this.drawConnectors(ctx, frame, connectors ? steps.slice(1).map((d, i) => ({
+			from: steps[i],
+			to: d
+		})) : []);
+		const solid = steps.filter((d) => d.total || step !== "arrow");
+		const bars = ctx.marks("bars", "path", solid, (d) => d.band).attr("fill", (d) => this.tone(d));
+		ctx.set(bars, { d: (d) => frame.bar(at(d), size(d), d.start, d.end) }, { d: (d) => frame.bar(at(d), size(d), d.start, d.start) }, 30);
+		ctx.hover(bars, (d) => ({
+			title: d.band,
+			color: this.tone(d),
+			rows: d.total ? [["Total", d.end]] : [["Change", d.delta], ["Running total", d.end]]
+		}));
+		const arrows = steps.filter((d) => !d.total && step === "arrow");
+		const stems = ctx.marks("arrow-stems", "line", arrows, (d) => d.band).attr("stroke", (d) => this.tone(d)).attr("stroke-width", 3);
+		const tail = (d) => frame.stem(frame.center(d.band), d.start, d.end);
+		const nudge = (d) => frame.value.invert(frame.value(d.end) + this.heading(frame, d) * -6);
+		const shaft = (d) => frame.stem(frame.center(d.band), d.start, Math.abs(frame.value(d.end) - frame.value(d.start)) > 9 ? nudge(d) : d.end);
+		ctx.set(stems, {
+			x1: (d) => tail(d).x1,
+			y1: (d) => tail(d).y1,
+			x2: (d) => shaft(d).x2,
+			y2: (d) => shaft(d).y2
+		});
+		const heads = ctx.marks("arrow-heads", "path", arrows, (d) => d.band).attr("fill", (d) => this.tone(d)).attr("d", (d) => {
+			const s = this.heading(frame, d);
+			return frame.vertical ? `M0,0L7,${-s * 9}L-7,${-s * 9}Z` : `M0,0L${-s * 9},7L${-s * 9},-7Z`;
+		});
+		ctx.set(heads, { transform: (d) => `translate(${frame.point(frame.center(d.band), d.end).join(",")})` });
+		ctx.hover(heads, (d) => ({
+			title: d.band,
+			color: this.tone(d),
+			rows: [["Change", d.delta], ["Running total", d.end]]
+		}));
+		const format = this.formatter(frame);
+		this.endLabels(ctx, frame, !labels ? [] : steps.map((d) => {
+			const below = !d.total && d.delta < 0;
+			return {
+				key: d.band,
+				at: frame.center(d.band),
+				value: below ? Math.min(d.start, d.end) : Math.max(d.start, d.end),
+				below,
+				text: `${!d.total && d.delta > 0 ? "+" : ""}${format(d.delta)}`
+			};
+		}));
+	}
+	/** Pixel direction a step travels along the value axis. */
+	heading(frame, d) {
+		return frame.value(d.end) >= frame.value(d.start) ? 1 : -1;
+	}
+	drawConnectors(ctx, frame, links) {
+		const line = (d) => frame.rule(d.from.end, frame.band(d.from.band) ?? 0, (frame.band(d.to.band) ?? 0) + frame.thick);
+		const rules = ctx.marks("connectors", "line", links, (d) => d.to.band).attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("stroke-dasharray", "3 3");
+		ctx.set(rules, {
+			x1: (d) => line(d).x1,
+			y1: (d) => line(d).y1,
+			x2: (d) => line(d).x2,
+			y2: (d) => line(d).y2
+		});
+	}
+};
+export { WaterfallChart, WaterfallChartStep, WaterfallChartTotals };

package/dist/charts/bars/index.js

@@ -0,0 +1,50 @@
+import { BarFrame } from "./BarFrame.js";
+import { BarAggregate, BarRows, BarSort } from "./BarRows.js";
+import { BandChart } from "./BandChart.js";
+import { BarChart } from "./BarChart.js";
+import { BulletBar, BulletBarMeasure, BulletBarScale, BulletBarTarget } from "./BulletBar.js";
+import { MirrorChart, MirrorMark } from "./MirrorChart.js";
+import { ButterflyChart, ButterflyChartScale, ButterflyChartSort } from "./ButterflyChart.js";
+import { DateBarChart, DateBarInterval } from "./DateBarChart.js";
+import { DivergingBarCenter, DivergingBarChart, DivergingBarLabels, DivergingBarLayout } from "./DivergingBarChart.js";
+import { DotPlot, DotPlotDomain, DotPlotGuide, DotPlotLayout } from "./DotPlot.js";
+import { DumbbellChart, DumbbellChartConnector, DumbbellChartSort } from "./DumbbellChart.js";
+import { ErrorBarColumn, ErrorBarInterval, ErrorBarMark } from "./ErrorBarColumn.js";
+import { FacetedBarChart, FacetedBarMark, FacetedBarScale, FacetedBarSort } from "./FacetedBarChart.js";
+import { GroupedStackedBar } from "./GroupedStackedBar.js";
+import { HistogramBar, HistogramBarBinning, HistogramBarLayout } from "./HistogramBar.js";
+import { IconlessRankAlign, IconlessRankBar, IconlessRankLayout } from "./IconlessRankBar.js";
+import { LollipopChart, LollipopChartBaseline } from "./LollipopChart.js";
+import { MarimekkoBar, MekkoMode } from "./MarimekkoBar.js";
+import { ParetoBar, ParetoBarLine } from "./ParetoBar.js";
+import { PercentChangeBar, PercentChangeMark, PercentChangeMeasure } from "./PercentChangeBar.js";
+import { PopulationPyramid } from "./PopulationPyramid.js";
+import { ProgressBars, ProgressBarsLabel, ProgressBarsTrack } from "./ProgressBars.js";
+import { RangeBarChart, RangeBarMark, RangeBarSort, RangeBarSpread } from "./RangeBarChart.js";
+import { OverlayFront, OverlayNesting, TripleBarOverlay } from "./TripleBarOverlay.js";
+import { WaterfallChart, WaterfallChartStep, WaterfallChartTotals } from "./WaterfallChart.js";
+// src/charts/bars/index.ts
+var barsCatalog = [
+	BarChart,
+	LollipopChart,
+	DotPlot,
+	DumbbellChart,
+	DivergingBarChart,
+	ButterflyChart,
+	WaterfallChart,
+	MarimekkoBar,
+	HistogramBar,
+	RangeBarChart,
+	PopulationPyramid,
+	BulletBar,
+	ProgressBars,
+	GroupedStackedBar,
+	PercentChangeBar,
+	TripleBarOverlay,
+	IconlessRankBar,
+	ParetoBar,
+	DateBarChart,
+	FacetedBarChart,
+	ErrorBarColumn
+];
+export { BandChart, BarAggregate, BarChart, BarFrame, BarRows, BarSort, BulletBar, BulletBarMeasure, BulletBarScale, BulletBarTarget, ButterflyChart, ButterflyChartScale, ButterflyChartSort, DateBarChart, DateBarInterval, DivergingBarCenter, DivergingBarChart, DivergingBarLabels, DivergingBarLayout, DotPlot, DotPlotDomain, DotPlotGuide, DotPlotLayout, DumbbellChart, DumbbellChartConnector, DumbbellChartSort, ErrorBarColumn, ErrorBarInterval, ErrorBarMark, FacetedBarChart, FacetedBarMark, FacetedBarScale, FacetedBarSort, GroupedStackedBar, HistogramBar, HistogramBarBinning, HistogramBarLayout, IconlessRankAlign, IconlessRankBar, IconlessRankLayout, LollipopChart, LollipopChartBaseline, MarimekkoBar, MekkoMode, MirrorChart, MirrorMark, OverlayFront, OverlayNesting, ParetoBar, ParetoBarLine, PercentChangeBar, PercentChangeMark, PercentChangeMeasure, PopulationPyramid, ProgressBars, ProgressBarsLabel, ProgressBarsTrack, RangeBarChart, RangeBarMark, RangeBarSort, RangeBarSpread, TripleBarOverlay, WaterfallChart, WaterfallChartStep, WaterfallChartTotals, barsCatalog };

package/dist/charts/business/SparkBar.js

@@ -0,0 +1,281 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BarRows } from "../bars/BarRows.js";
+import { LineAggregate } from "../linesareas/LineEnums.js";
+import { TrendLabels } from "../linesareas/TrendLabels.js";
+import { TrendMath } from "../linesareas/TrendMath.js";
+import { TrendTable } from "../linesareas/TrendTable.js";
+import { max, mean, median, min, scaleLinear, select } from "d3";
+// src/charts/business/SparkBar.ts
+/**
+* Columns show magnitude from zero. WinLoss drops magnitude for equal up or down tiles. Threshold
+* keeps columns from zero and picks out those that clear a rule. Deviation grows bars from the rule.
+*/
+var SparkBarForm = /* @__PURE__ */ function(SparkBarForm) {
+	SparkBarForm["Columns"] = "columns";
+	SparkBarForm["WinLoss"] = "win-loss";
+	SparkBarForm["Threshold"] = "threshold";
+	SparkBarForm["Deviation"] = "deviation";
+	return SparkBarForm;
+}({});
+/** Rows on their own scale show each row's shape; a shared scale compares sizes across rows. */
+var SparkBarScale = /* @__PURE__ */ function(SparkBarScale) {
+	SparkBarScale["Independent"] = "independent";
+	SparkBarScale["Shared"] = "shared";
+	return SparkBarScale;
+}({});
+var SparkBarReference = /* @__PURE__ */ function(SparkBarReference) {
+	SparkBarReference["Mean"] = "mean";
+	SparkBarReference["Median"] = "median";
+	return SparkBarReference;
+}({});
+/** A tie on a win/loss strip stays an empty slot, or gets a short tile on the centre line. */
+var SparkBarTies = /* @__PURE__ */ function(SparkBarTies) {
+	SparkBarTies["Gap"] = "gap";
+	SparkBarTies["Tile"] = "tile";
+	return SparkBarTies;
+}({});
+var INSET = 3;
+var MAX_THICK = 16;
+var fix = (value) => +value.toFixed(2);
+/** Weekly net account adds per region: signed counts with ties, reshaped from a random walk's steps. */
+var netAdds = (seed) => {
+	const weeks = 27, regions = [
+		"North",
+		"South",
+		"East",
+		"West"
+	];
+	const rows = SampleData.timeSeries(seed, weeks, regions.length);
+	return rows.flatMap((row, i) => i % weeks ? [{
+		date: row.date,
+		series: regions[Math.floor(i / weeks)],
+		value: Math.round((+row.value - +rows[i - 1].value) * 1.1 + 1.5)
+	}] : []);
+};
+/** Word-sized bars with no axes for tables and dashboards. Several series become aligned rows with a name and a reading. */
+var SparkBar = class extends Chart2D {
+	periods = [];
+	static meta = {
+		id: "spark-bar",
+		name: "Spark bar",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Packs a run of periods into tiny inline bars, as magnitudes, winners and losers, or against a threshold.",
+		tags: [
+			"sparkline",
+			"inline",
+			"micro chart",
+			"win loss",
+			"threshold",
+			"kpi"
+		],
+		sample: netAdds,
+		variants: {
+			form: [
+				"columns",
+				"win-loss",
+				"threshold",
+				"deviation"
+			],
+			scale: ["independent", "shared"],
+			reference: ["mean", "median"],
+			ties: ["gap", "tile"],
+			readout: [true, false]
+		},
+		valid: ({ form, scale, reference, ties }) => {
+			return (form === "win-loss" ? scale === "independent" : ties === "gap") && (form === "threshold" || form === "deviation" || reference === "mean");
+		}
+	};
+	defaults() {
+		return {
+			x: "date",
+			y: "value",
+			series: "series",
+			aggregate: LineAggregate.Sum,
+			form: "columns",
+			reference: "mean",
+			scale: "independent",
+			ties: "gap",
+			readout: true
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	legendItems() {
+		return [];
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 4,
+			bottom: 4,
+			left: 4
+		};
+	}
+	get winLoss() {
+		return this.options.form === "win-loss";
+	}
+	spark(series, slots) {
+		const { threshold, reference } = this.options;
+		const values = Array.from({ length: slots.size }, () => null);
+		for (const point of series.points) values[slots.get(point.order)] = point.y;
+		const known = values.filter((value) => value !== null);
+		const usual = (reference === "median" ? median(known) : mean(known)) ?? 0;
+		return {
+			key: series.key,
+			values,
+			rule: threshold ?? (this.winLoss ? 0 : usual)
+		};
+	}
+	/** What a bar draws: its distance from the rule for Deviation, otherwise the value from zero. */
+	bar(spark, value) {
+		return this.options.form === "deviation" ? value - spark.rule : value;
+	}
+	reach(spark) {
+		const bars = spark.values.flatMap((value) => value === null ? [] : [this.bar(spark, value)]);
+		const lines = this.options.form === "threshold" ? [spark.rule] : [];
+		return [min([
+			...bars,
+			...lines,
+			0
+		]), max([
+			...bars,
+			...lines,
+			0
+		])];
+	}
+	reading(spark) {
+		const { form } = this.options;
+		const known = spark.values.filter((value) => value !== null);
+		const wins = known.filter((value) => value > spark.rule).length, losses = known.filter((value) => value < spark.rule).length;
+		const ties = known.length - wins - losses;
+		if (form === "win-loss") return [
+			wins,
+			losses,
+			...ties ? [ties] : []
+		].join("-");
+		if (form === "threshold") return `${wins + ties}/${known.length}`;
+		const last = known.at(-1);
+		if (last === void 0) return "";
+		if (form === "columns") return Scales.format(last, Math.abs(last));
+		const gap = last - spark.rule;
+		return `${gap > 0 ? "+" : ""}${Scales.format(gap, Math.abs(gap))}`;
+	}
+	left(box, slot) {
+		return fix(slot.index * box.step + (box.step - box.thick) / 2);
+	}
+	drawTiles(ctx, row, spark, box, slots) {
+		const middle = box.height / 2;
+		const tall = Math.max(1, middle - INSET - 1);
+		const tied = this.options.ties === "tile";
+		const shown = slots.filter((d) => d.value !== spark.rule || tied);
+		const left = (d) => this.left(box, d);
+		const height = (d) => d.value === spark.rule ? Math.min(3, tall) : tall;
+		const top = (d) => d.value === spark.rule ? middle - height(d) / 2 : d.value > spark.rule ? middle - 1 - tall : middle + 1;
+		const tiles = ctx.marks("tiles", "rect", shown, (d) => d.index, row).attr("rx", Math.min(1.5, box.thick / 2)).attr("fill", (d) => d.value === spark.rule ? ctx.theme.inkMuted : ctx.palette.diverging(TrendMath.polarity(d.value > spark.rule ? 1 : -1)));
+		ctx.set(tiles, {
+			x: left,
+			width: box.thick,
+			y: top,
+			height
+		}, {
+			x: left,
+			width: box.thick,
+			y: middle,
+			height: 0
+		}, 6);
+		this.hoverSlots(ctx, tiles, spark);
+	}
+	drawBars(ctx, row, spark, box, slots) {
+		const { form } = this.options;
+		const zero = box.y(0);
+		const lastIndex = slots.at(-1)?.index;
+		const shown = slots.filter((d) => d.bar !== 0);
+		const left = (d) => this.left(box, d);
+		const height = (d) => fix(Math.max(1, Math.abs(box.y(d.bar) - zero)));
+		const top = (d) => fix(d.bar > 0 ? zero - height(d) : zero);
+		const color = ctx.palette.color(spark.key);
+		const fill = (d) => {
+			if (form === "deviation") return ctx.palette.diverging(TrendMath.polarity(d.bar > 0 ? 1 : -1));
+			return form === "threshold" && d.value < spark.rule ? ctx.theme.inkMuted : color;
+		};
+		const bars = ctx.marks("bars", "rect", shown, (d) => d.index, row).attr("rx", Math.min(1.5, box.thick / 2)).attr("fill", fill).attr("fill-opacity", (d) => form === "columns" && d.index !== lastIndex ? .6 : 1);
+		ctx.set(bars, {
+			x: left,
+			width: box.thick,
+			y: top,
+			height
+		}, {
+			x: left,
+			width: box.thick,
+			y: zero,
+			height: 0
+		}, 6);
+		this.hoverSlots(ctx, bars, spark);
+		ctx.marks("zero", "line", this.winLoss ? [] : [zero], void 0, row).attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("x1", 0).attr("x2", box.width).attr("y1", (d) => d).attr("y2", (d) => d);
+		const rule = form === "threshold" ? [box.y(spark.rule)] : [];
+		ctx.marks("rule", "line", rule, void 0, row).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "3 2").attr("x1", 0).attr("x2", box.width).attr("y1", (d) => d).attr("y2", (d) => d);
+	}
+	hoverSlots(ctx, marks, spark) {
+		const names = this.periods;
+		const judged = this.options.form !== "columns";
+		ctx.hover(marks, (d) => ({
+			title: names[d.index],
+			color: ctx.palette.color(spark.key),
+			rows: [[spark.key, Scales.format(d.value, Math.abs(d.value))], ...judged ? [["Threshold", Scales.format(spark.rule, Math.abs(spark.rule))]] : []]
+		}));
+	}
+	draw(ctx) {
+		const { x, y, series, aggregate, readout, scale } = this.options;
+		const table = new TrendTable(this.options.data, {
+			x,
+			y,
+			series,
+			aggregate
+		});
+		const slots = new Map(table.xs.map((point, i) => [point.order, i]));
+		this.periods = table.xs.map((point) => BarRows.label(point.x));
+		const sparks = table.series.map((line) => this.spark(line, slots));
+		const { width, height } = ctx.plot;
+		const rowHeight = height / Math.max(1, sparks.length);
+		const worded = width >= 180 && rowHeight >= 14;
+		const nameRoom = worded && sparks.length > 1 ? TrendLabels.room(sparks.map((s) => s.key), width * .26) : 0;
+		const valueRoom = worded && readout ? TrendLabels.room(sparks.map((s) => this.reading(s)), width * .2) : 0;
+		const inner = Math.max(1, width - nameRoom - valueRoom);
+		const step = inner / Math.max(1, slots.size);
+		const thick = Math.max(1, Math.min(MAX_THICK, step - (step >= 6 ? 2 : step >= 3 ? 1 : 0)));
+		const shared = scale === "shared" ? sparks.map((s) => this.reach(s)) : null;
+		const scaled = (spark) => {
+			const low = shared ? min(shared, (r) => r[0]) : this.reach(spark)[0];
+			const high = shared ? max(shared, (r) => r[1]) : this.reach(spark)[1];
+			return scaleLinear([low, high === low ? low + 1 : high], [rowHeight - INSET, INSET]);
+		};
+		const chart = this;
+		ctx.marks("rows", "g", sparks, (s) => s.key).attr("transform", (_, i) => `translate(0,${fix(i * rowHeight)})`).each(function(spark) {
+			const row = select(this);
+			const body = ctx.group("spark", row).attr("transform", `translate(${nameRoom},0)`);
+			const box = {
+				width: inner,
+				height: rowHeight,
+				step,
+				thick,
+				y: scaled(spark)
+			};
+			const filled = spark.values.flatMap((value, index) => value === null ? [] : [{
+				index,
+				value,
+				bar: chart.bar(spark, value)
+			}]);
+			chart.drawTiles(ctx, body, spark, box, chart.winLoss ? filled : []);
+			chart.drawBars(ctx, body, spark, box, chart.winLoss ? [] : filled);
+			ctx.text(ctx.marks("name", "text", nameRoom ? [spark] : [], (d) => d.key, row)).attr("y", rowHeight / 2).attr("dy", ".32em").text((d) => TrendLabels.fit(d.key, nameRoom - 8));
+			ctx.text(ctx.marks("reading", "text", valueRoom ? [spark] : [], (d) => d.key, row), 11, "ink").attr("x", width).attr("y", rowHeight / 2).attr("dy", ".32em").attr("text-anchor", "end").attr("font-weight", 600).text((d) => chart.reading(d));
+		});
+	}
+};
+export { SparkBar, SparkBarForm, SparkBarReference, SparkBarScale, SparkBarTies };