@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/linesareas/SmallMultipleLines.js

@@ -0,0 +1,153 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, CurveKind, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FacetScale, LineAggregate } from "./LineEnums.js";
+import { TrendHover } from "./TrendHover.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendTable } from "./TrendTable.js";
+import { area, extent, line, scaleLinear, select, ticks, utcFormat } from "d3";
+// src/charts/linesareas/SmallMultipleLines.ts
+var HEAD = 16;
+var GAP_X = 18;
+var AXIS = 16;
+var YAXIS = 26;
+var shortDate = utcFormat("%b %-d");
+/** One small chart per series on shared axes. The fix for spaghetti: use it whenever a multi-line chart has more than about six lines. */
+var SmallMultipleLines = class SmallMultipleLines extends Chart2D {
+	static meta = {
+		id: "small-multiple-lines",
+		name: "Small multiple lines",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Splits series into a grid of small line charts on shared scales, comparing many series without tangling them.",
+		tags: [
+			"trellis",
+			"facets",
+			"lattice",
+			"panel"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 40, 6),
+		variants: {
+			columns: [
+				3,
+				2,
+				1
+			],
+			yScale: [FacetScale.Shared, FacetScale.Free],
+			context: [true, false],
+			fill: [false, true],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			]
+		},
+		valid: ({ yScale, context }) => yScale === FacetScale.Shared || !context
+	};
+	defaults() {
+		return {
+			x: "date",
+			y: "value",
+			series: "series",
+			aggregate: LineAggregate.Mean,
+			curve: CurveKind.Monotone,
+			yScale: FacetScale.Shared,
+			context: true,
+			fill: false
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	legendItems() {
+		return [];
+	}
+	plotMargin() {
+		return {
+			top: 6,
+			right: 12,
+			bottom: 6,
+			left: 12
+		};
+	}
+	static range(points, zero) {
+		const [lo = 0, hi = 1] = extent(points.flatMap((p) => p.y === null ? [] : zero ? [p.y, 0] : [p.y]));
+		return lo === hi ? [lo - 1, hi + 1] : [lo, hi];
+	}
+	static tick(x) {
+		return x instanceof Date ? shortDate(x) : String(x);
+	}
+	draw(ctx) {
+		const { x, y, series, aggregate, curve, yScale, context, fill } = this.options;
+		const table = new TrendTable(this.options.data, {
+			x,
+			y,
+			series,
+			aggregate
+		});
+		const lines = table.series;
+		const { width, height } = ctx.plot;
+		const auto = Math.max(1, Math.round(Math.sqrt(lines.length * width / (height * 1.6))));
+		const columns = Math.max(1, Math.min(this.options.columns ?? auto, lines.length || 1));
+		const rows = Math.max(1, Math.ceil(lines.length / columns));
+		const cellWidth = (width - GAP_X * (columns - 1)) / columns;
+		const gap = rows > 3 ? 3 : 10;
+		const innerWidth = Math.max(10, cellWidth - YAXIS), innerHeight = Math.max(8, (height - AXIS - gap * (rows - 1)) / rows - HEAD);
+		const px = table.xScale([0, innerWidth]);
+		const shared = SmallMultipleLines.range(lines.flatMap((s) => s.points), fill);
+		const facet = ctx.marks("facets", "g", lines, (s) => s.key).attr("transform", (_, i) => `translate(${i % columns * (cellWidth + GAP_X) + YAXIS},${Math.floor(i / columns) * (innerHeight + HEAD + gap) + HEAD})`);
+		const chart = this;
+		facet.each(function(s, i) {
+			const group = select(this);
+			const domain = yScale === FacetScale.Shared ? shared : SmallMultipleLines.range(s.points, fill);
+			const py = scaleLinear(domain, [innerHeight, 0]).nice();
+			const ownColumn = i % columns === 0 || yScale === FacetScale.Free, bottom = i + columns >= lines.length;
+			chart.frame(ctx, group, s, py, innerWidth, innerHeight, ownColumn, bottom ? [table.xs[0], table.xs.at(-1)].flatMap((p) => p ?? []) : []);
+			const known = (p) => p.y !== null;
+			const path = line().defined(known).x((p) => px(p.x)).y((p) => py(p.y)).curve(Scales.curve(curve));
+			const ghosts = ctx.marks("ghosts", "path", context ? lines.filter((other) => other !== s) : [], (o) => o.key, group).attr("fill", "none").attr("stroke", ctx.theme.grid).attr("stroke-width", 1.5);
+			ctx.set(ghosts, { d: (o) => path(o.points) ?? "" });
+			const color = ctx.palette.color(s.key);
+			const base = py(Math.max(py.domain()[0], 0));
+			const under = area().defined(known).x((p) => px(p.x)).y0(base).y1((p) => py(p.y)).curve(Scales.curve(curve));
+			const flat = area().defined(known).x((p) => px(p.x)).y(base).curve(Scales.curve(curve));
+			ctx.set(ctx.marks("fill", "path", fill ? [s] : [], void 0, group).attr("fill", color).attr("fill-opacity", .22), { d: under(s.points) ?? "" }, { d: flat(s.points) ?? "" });
+			const stroke = ctx.marks("line", "path", [s], void 0, group).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+			stroke.filter(function() {
+				return !this.getAttribute("d");
+			}).attr("d", path(s.points) ?? "");
+			ctx.drawOn(stroke);
+			ctx.set(stroke, { d: path(s.points) ?? "" });
+			const last = s.points.filter(known).at(-1);
+			const end = ctx.marks("end", "circle", last ? [last] : [], void 0, group).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+			ctx.set(end, {
+				cx: (p) => px(p.x),
+				cy: (p) => py(p.y),
+				r: 5
+			}, {
+				cx: (p) => px(p.x),
+				cy: (p) => py(p.y),
+				r: 0
+			});
+			TrendHover.attach(ctx, TrendHover.slices([s], {
+				place: (p) => [px(p.x), py(p.y)],
+				color: () => color
+			}), innerWidth, innerHeight, group);
+		});
+	}
+	frame(ctx, group, s, py, width, height, showY, xTicks) {
+		const [lo, hi] = py.domain();
+		const room = Math.max(1, Math.floor(height / 14));
+		const candidates = ticks(lo, hi, Math.min(4, room));
+		const levels = candidates.filter((_, n) => (candidates.length - 1 - n) % Math.ceil(candidates.length / room) === 0);
+		ctx.marks("grid", "line", levels, (v) => v, group).attr("stroke", ctx.theme.grid).attr("x1", 0).attr("x2", width).attr("y1", py).attr("y2", py);
+		ctx.text(ctx.marks("y-ticks", "text", showY ? levels : [], (v) => v, group), 10).attr("x", -4).attr("y", py).attr("dy", ".32em").attr("text-anchor", "end").text((v) => Scales.format(v, Math.max(Math.abs(lo), Math.abs(hi))));
+		ctx.marks("axis", "line", [0], void 0, group).attr("stroke", ctx.theme.axis).attr("x1", 0).attr("x2", width).attr("y1", height).attr("y2", height);
+		const dated = width >= 80 ? xTicks : xTicks.slice(0, 1);
+		ctx.text(ctx.marks("x-ticks", "text", dated, (p) => p.order, group), 10).attr("x", (_, i) => i ? width : 0).attr("y", height + 12).attr("text-anchor", (_, i) => i ? "end" : "start").text((p) => SmallMultipleLines.tick(p.x));
+		ctx.text(ctx.marks("head", "text", [s.key], void 0, group), 11, "ink").attr("x", 0).attr("y", -5).attr("font-weight", 600).text((key) => TrendLabels.fit(key, width));
+	}
+};
+export { SmallMultipleLines };

package/dist/charts/linesareas/SparklineChart.js

@@ -0,0 +1,211 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension, LegendPosition } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LineAggregate, LineBaseline, SparklineBand, SparklineForm } from "./LineEnums.js";
+import { TrendHover } from "./TrendHover.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendMath } from "./TrendMath.js";
+import { TrendTable } from "./TrendTable.js";
+import { area, curveLinear, curveStepAfter, extent, line, scaleLinear, select } from "d3";
+// src/charts/linesareas/SparklineChart.ts
+var INSET = 7;
+/** A word-sized line with no axes, for tables and dashboards. Several series become rows with name and latest value. */
+var SparklineChart = class extends Chart2D {
+	static meta = {
+		id: "sparkline",
+		name: "Sparkline",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Packs a trend into a word-sized mark with no axes, for reading shape and latest value at a glance.",
+		tags: [
+			"inline",
+			"micro chart",
+			"kpi",
+			"win loss"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 30, 4),
+		variants: {
+			form: [
+				SparklineForm.Line,
+				SparklineForm.Area,
+				SparklineForm.Step,
+				SparklineForm.Bars,
+				SparklineForm.WinLoss
+			],
+			baseline: [LineBaseline.Data, LineBaseline.Zero],
+			band: [
+				SparklineBand.None,
+				SparklineBand.Interquartile,
+				SparklineBand.Range
+			],
+			end: [true, false],
+			extrema: [false, true]
+		},
+		valid: ({ form, baseline, band, end, extrema }) => {
+			if (form === SparklineForm.Bars || form === SparklineForm.WinLoss) return band === SparklineBand.None && end === true && !extrema && baseline === (form === SparklineForm.Bars ? LineBaseline.Zero : LineBaseline.Data);
+			return form !== SparklineForm.Area || baseline === LineBaseline.Zero;
+		}
+	};
+	defaults() {
+		return {
+			x: "date",
+			y: "value",
+			series: "series",
+			aggregate: LineAggregate.Mean,
+			form: SparklineForm.Line,
+			baseline: LineBaseline.Data,
+			band: SparklineBand.None,
+			end: true,
+			extrema: false
+		};
+	}
+	get legendPosition() {
+		return LegendPosition.None;
+	}
+	legendItems() {
+		return [];
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 4,
+			bottom: 4,
+			left: 4
+		};
+	}
+	scales(s, width, height) {
+		const values = s.points.flatMap((p) => p.y === null ? [] : [p.y]);
+		const [lo = 0, hi = 1] = extent(this.options.baseline === LineBaseline.Zero ? [...values, 0] : values);
+		const y = scaleLinear([lo, hi === lo ? lo + 1 : hi], [height - INSET, INSET]);
+		const count = Math.max(1, s.points.length);
+		const step = (width - 14) / Math.max(1, count - 1);
+		return {
+			x: (i) => count === 1 ? width / 2 : INSET + i * step,
+			y,
+			width,
+			height,
+			base: y(Math.max(lo, Math.min(0, hi))),
+			step
+		};
+	}
+	body(ctx, row, s, geo) {
+		const { form, band, end, extrema } = this.options;
+		const color = ctx.palette.color(s.key);
+		const known = s.points.map((p, i) => ({
+			p,
+			i
+		})).filter(({ p }) => p.y !== null);
+		const sorted = TrendMath.sorted(s.points);
+		const span = band === SparklineBand.None || !sorted.length ? [] : [band === SparklineBand.Range ? [sorted[0], sorted.at(-1)] : [TrendMath.quantile(sorted, .25), TrendMath.quantile(sorted, .75)]];
+		ctx.marks("band", "rect", span, void 0, row).attr("fill", ctx.theme.grid).attr("rx", 2).attr("x", 0).attr("width", geo.width).attr("y", (d) => geo.y(d[1])).attr("height", (d) => Math.max(1, geo.y(d[0]) - geo.y(d[1])));
+		const curve = form === SparklineForm.Step ? curveStepAfter : curveLinear;
+		const trail = line().x((d) => geo.x(d.i)).y((d) => geo.y(d.p.y)).curve(curve);
+		const fill = area().x((d) => geo.x(d.i)).y0(geo.base).y1((d) => geo.y(d.p.y)).curve(curve);
+		const flat = area().x((d) => geo.x(d.i)).y(geo.base).curve(curve);
+		const stroked = form !== SparklineForm.Bars && form !== SparklineForm.WinLoss;
+		const shaded = ctx.marks("fill", "path", form === SparklineForm.Area ? [known] : [], void 0, row).attr("fill", color).attr("fill-opacity", .25);
+		ctx.set(shaded, { d: (d) => fill(d) ?? "" }, { d: (d) => flat(d) ?? "" });
+		const path = ctx.marks("line", "path", stroked ? [known] : [], void 0, row).attr("fill", "none").attr("stroke", color).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		path.filter(function() {
+			return !this.getAttribute("d");
+		}).attr("d", (d) => trail(d) ?? "");
+		ctx.drawOn(path);
+		ctx.set(path, { d: (d) => trail(d) ?? "" });
+		const thick = Math.max(1, Math.min(10, geo.step - 2));
+		const bars = ctx.marks("bars", "rect", form === SparklineForm.Bars ? known : [], (d) => d.i, row).attr("fill", color).attr("rx", Math.min(2, thick / 2));
+		ctx.set(bars, {
+			x: (d) => geo.x(d.i) - thick / 2,
+			width: thick,
+			y: (d) => Math.min(geo.y(d.p.y), geo.base),
+			height: (d) => Math.abs(geo.base - geo.y(d.p.y))
+		}, {
+			x: (d) => geo.x(d.i) - thick / 2,
+			width: thick,
+			y: geo.base,
+			height: 0
+		}, 6);
+		const middle = geo.height / 2;
+		const steps = form === SparklineForm.WinLoss ? known.slice(1).map((d, n) => ({
+			...d,
+			up: d.p.y >= known[n].p.y
+		})) : [];
+		const tiles = ctx.marks("win-loss", "rect", steps, (d) => d.i, row).attr("fill", (d) => ctx.palette.diverging(TrendMath.polarity(d.up ? 1 : -1))).attr("rx", Math.min(2, thick / 2));
+		ctx.set(tiles, {
+			x: (d) => geo.x(d.i) - thick / 2,
+			width: thick,
+			y: (d) => d.up ? INSET : middle + 1,
+			height: middle - INSET - 1
+		}, {
+			x: (d) => geo.x(d.i) - thick / 2,
+			width: thick,
+			y: middle,
+			height: 0
+		}, 6);
+		const last = known.at(-1);
+		const low = known.reduce((a, b) => !a || b.p.y < a.p.y ? b : a, void 0);
+		const high = known.reduce((a, b) => !a || b.p.y > a.p.y ? b : a, void 0);
+		const points = [
+			...extrema && low ? [{
+				key: "low",
+				d: low,
+				fill: ctx.palette.diverging(TrendMath.polarity(-1))
+			}] : [],
+			...extrema && high && high !== low ? [{
+				key: "high",
+				d: high,
+				fill: ctx.palette.diverging(TrendMath.polarity(1))
+			}] : [],
+			...end && stroked && last ? [{
+				key: "end",
+				d: last,
+				fill: color
+			}] : [],
+			...form === SparklineForm.Area && !end && known.length === 1 ? [{
+				key: "only",
+				d: known[0],
+				fill: color
+			}] : []
+		];
+		const dots = ctx.marks("dots", "circle", points, (d) => d.key, row).attr("fill", (d) => d.fill).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		ctx.set(dots, {
+			cx: (d) => geo.x(d.d.i),
+			cy: (d) => geo.y(d.d.p.y),
+			r: 5
+		}, {
+			cx: (d) => geo.x(d.d.i),
+			cy: (d) => geo.y(d.d.p.y),
+			r: 0
+		});
+		TrendHover.attach(ctx, TrendHover.slices([s], {
+			place: (p) => [geo.x(s.points.indexOf(p)), geo.y(p.y)],
+			color: () => color
+		}), geo.width, geo.height, row);
+	}
+	draw(ctx) {
+		const { x, y, series, aggregate } = this.options;
+		const lines = new TrendTable(this.options.data, {
+			x,
+			y,
+			series,
+			aggregate
+		}).series;
+		const { width, height } = ctx.plot;
+		const rowHeight = height / Math.max(1, lines.length);
+		const worded = width >= 180 && rowHeight >= 14;
+		const latest = (s) => TrendHover.value(s.points.filter((p) => p.y !== null).at(-1)?.y ?? null);
+		const nameRoom = worded && lines.length > 1 ? TrendLabels.room(lines.map((s) => s.key), width * .26) : 0;
+		const valueRoom = worded ? TrendLabels.room(lines.map((s) => String(latest(s))), width * .2) : 0;
+		const rows = ctx.marks("rows", "g", lines, (s) => s.key).attr("transform", (_, i) => `translate(0,${i * rowHeight})`);
+		const body = (node) => select(node);
+		const chart = this;
+		rows.each(function(s) {
+			const row = body(this);
+			const inner = ctx.group("spark", row).attr("transform", `translate(${nameRoom},0)`);
+			chart.body(ctx, inner, s, chart.scales(s, width - nameRoom - valueRoom, rowHeight));
+			ctx.text(ctx.marks("name", "text", nameRoom ? [s] : [], (d) => d.key, row)).attr("y", rowHeight / 2).attr("dy", ".32em").text((d) => TrendLabels.fit(d.key, nameRoom - 8));
+			ctx.text(ctx.marks("latest", "text", valueRoom ? [s] : [], (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) => latest(d));
+		});
+	}
+};
+export { SparklineChart };

package/dist/charts/linesareas/StackedAreaChart.js

@@ -0,0 +1,67 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, StackMode } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LayerOffset, LayeredChart } from "./LayeredChart.js";
+import { AreaStackOrder, LineLabels } from "./LineEnums.js";
+// src/charts/linesareas/StackedAreaChart.ts
+/** Show a total and its parts over time; normalise it to compare shares. Only the bottom layer reads precisely, so keep layers few. */
+var StackedAreaChart = class extends LayeredChart {
+	static meta = {
+		id: "stacked-area",
+		name: "Stacked area chart",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Stacks series to show how a total and its composition change over time, in units or as shares.",
+		tags: [
+			"composition",
+			"part to whole",
+			"100% area"
+		],
+		sample: (seed) => {
+			const weight = {
+				Alpha: 1.5,
+				Bravo: .45,
+				Charlie: 1,
+				Delta: .65
+			};
+			return SampleData.timeSeries(seed, 30, 4).map((row) => ({
+				...row,
+				value: +(row.value * weight[row.series]).toFixed(2)
+			}));
+		},
+		variants: {
+			stack: [StackMode.Stacked, StackMode.Normalized],
+			order: [
+				AreaStackOrder.Data,
+				AreaStackOrder.Ascending,
+				AreaStackOrder.Descending,
+				AreaStackOrder.InsideOut,
+				AreaStackOrder.Reverse
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter,
+				CurveKind.Basis
+			],
+			labels: [LineLabels.Legend, LineLabels.Direct]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			stack: StackMode.Stacked,
+			order: AreaStackOrder.Data,
+			labels: LineLabels.Legend
+		};
+	}
+	offset() {
+		return this.options.stack === StackMode.Normalized ? LayerOffset.Expand : LayerOffset.None;
+	}
+	tickFormat(scale) {
+		const base = super.tickFormat(scale);
+		if (this.options.stack !== StackMode.Normalized || !(typeof scale.domain?.()[0] === "number")) return base;
+		return (value) => `${Math.round(+value * 100)}%`;
+	}
+};
+export { StackedAreaChart };

package/dist/charts/linesareas/StepChart.js

@@ -0,0 +1,85 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, ScaleKind } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LineBaseline, LineMarkers, StepLineForm, StepPlacement } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+// src/charts/linesareas/StepChart.ts
+var CURVE = {
+	[StepPlacement.After]: CurveKind.StepAfter,
+	[StepPlacement.Before]: CurveKind.StepBefore,
+	[StepPlacement.Middle]: CurveKind.Step
+};
+/** For values that hold until they change: prices, rates, inventory, headcount. Interpolating these with a sloped line would invent values. */
+var StepChart = class extends TrendChart {
+	static meta = {
+		id: "step-line",
+		name: "Step chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Draws a value as flat runs joined by jumps, for quantities that change abruptly and hold in between.",
+		tags: [
+			"staircase",
+			"discrete change",
+			"stepped line"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 22, 2),
+		variants: {
+			placement: [
+				StepPlacement.After,
+				StepPlacement.Before,
+				StepPlacement.Middle
+			],
+			form: [
+				StepLineForm.Line,
+				StepLineForm.Filled,
+				StepLineForm.Treads
+			],
+			markers: [
+				LineMarkers.None,
+				LineMarkers.Ends,
+				LineMarkers.All
+			],
+			baseline: [LineBaseline.Data, LineBaseline.Zero],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		},
+		valid: ({ form, baseline, scale }) => (form !== StepLineForm.Filled || baseline === LineBaseline.Zero && scale === ScaleKind.Linear) && !(baseline === LineBaseline.Zero && scale === ScaleKind.Log)
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			placement: StepPlacement.After,
+			form: StepLineForm.Line,
+			markers: LineMarkers.None,
+			baseline: LineBaseline.Data
+		};
+	}
+	get zeroBased() {
+		return this.options.baseline === LineBaseline.Zero || this.options.form === StepLineForm.Filled;
+	}
+	/** Horizontal runs alone, with the jumps left to the eye. */
+	treads(axes, points) {
+		const known = points.filter(this.drawn);
+		const xs = known.map((p) => this.px(axes, p));
+		const placement = this.options.placement;
+		return known.map((p, i) => {
+			const x = xs[i], before = xs[i - 1], after = xs[i + 1];
+			const from = placement === StepPlacement.After ? x : placement === StepPlacement.Before ? before ?? x : before === void 0 ? x : (before + x) / 2;
+			const to = placement === StepPlacement.After ? after ?? x : placement === StepPlacement.Before ? x : after === void 0 ? x : (x + after) / 2;
+			return `M${from},${this.py(axes, p)}H${to}`;
+		}).join("");
+	}
+	plotMarks(ctx, axes) {
+		const { form, placement } = this.options;
+		const series = this.view;
+		const curve = this.curveOf(CURVE[placement]);
+		const fill = this.areaPath(axes, ctx.plot.height, curve);
+		const fills = ctx.marks("fills", "path", form === StepLineForm.Filled ? series : [], (s) => s.key).attr("fill", (s) => ctx.palette.color(s.key)).attr("fill-opacity", .22);
+		ctx.set(fills, { d: (s) => fill(s.points) }, { d: (s) => this.flatPath(axes, ctx.plot.height, curve)(s.points) });
+		this.strokes(ctx, "lines", form === StepLineForm.Treads ? [] : series, axes, curve);
+		const runs = this.styleStroke(ctx.marks("treads", "path", form === StepLineForm.Treads ? series : [], (s) => s.key), (s) => ctx.palette.color(s.key));
+		this.trace(ctx, runs, (s) => this.treads(axes, s.points));
+		this.markers(ctx, series, axes, this.options.markers);
+		this.hoverColumns(ctx, axes, series);
+	}
+};
+export { StepChart };

package/dist/charts/linesareas/Streamgraph.js

@@ -0,0 +1,70 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { LayerOffset, LayeredChart } from "./LayeredChart.js";
+import { AreaStackOrder, LineLabels } from "./LineEnums.js";
+// src/charts/linesareas/Streamgraph.ts
+/** Stacked layers around a floating baseline. Reads rise and fall of many themes, not exact values, so it has no y axis. */
+var Streamgraph = class extends LayeredChart {
+	static meta = {
+		id: "streamgraph",
+		name: "Streamgraph",
+		family: ChartFamily.Composition,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Flows stacked layers around a central axis to show how many categories swell and fade over time.",
+		tags: [
+			"theme river",
+			"composition",
+			"organic"
+		],
+		sample: (seed) => {
+			const rows = SampleData.timeSeries(seed, 40, 6);
+			const floor = /* @__PURE__ */ new Map();
+			for (const row of rows) floor.set(row.series, Math.min(floor.get(row.series) ?? Infinity, row.value));
+			return rows.map((row) => ({
+				...row,
+				value: +(row.value - floor.get(row.series) * .8).toFixed(2)
+			}));
+		},
+		variants: {
+			offset: [LayerOffset.Wiggle, LayerOffset.Silhouette],
+			order: [
+				AreaStackOrder.InsideOut,
+				AreaStackOrder.Data,
+				AreaStackOrder.Ascending,
+				AreaStackOrder.Descending,
+				AreaStackOrder.Reverse
+			],
+			curve: [
+				CurveKind.Basis,
+				CurveKind.Monotone,
+				CurveKind.CatmullRom,
+				CurveKind.Linear
+			],
+			labels: [LineLabels.Direct, LineLabels.Legend]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			offset: LayerOffset.Wiggle,
+			order: AreaStackOrder.InsideOut,
+			curve: CurveKind.Basis,
+			labels: LineLabels.Direct
+		};
+	}
+	offset() {
+		return this.options.offset;
+	}
+	yTicks() {
+		return 0;
+	}
+	plotMargin() {
+		return {
+			...super.plotMargin(),
+			left: 16,
+			right: 16
+		};
+	}
+};
+export { Streamgraph };