@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/financial/financeEnums.js

@@ -0,0 +1,269 @@
+// src/charts/financial/financeEnums.ts
+/** How the price axis maps values. `Percent` rebases everything to the first close. */
+var PriceScale = /* @__PURE__ */ function(PriceScale) {
+	PriceScale["Linear"] = "linear";
+	PriceScale["Log"] = "log";
+	PriceScale["Percent"] = "percent";
+	return PriceScale;
+}({});
+var PriceOverlay = /* @__PURE__ */ function(PriceOverlay) {
+	PriceOverlay["None"] = "none";
+	PriceOverlay["SMA"] = "sma";
+	PriceOverlay["EMA"] = "ema";
+	PriceOverlay["WMA"] = "wma";
+	PriceOverlay["VWAP"] = "vwap";
+	PriceOverlay["Bollinger"] = "bollinger";
+	PriceOverlay["Keltner"] = "keltner";
+	PriceOverlay["Donchian"] = "donchian";
+	return PriceOverlay;
+}({});
+var MovingAverageKind = /* @__PURE__ */ function(MovingAverageKind) {
+	MovingAverageKind["Simple"] = "simple";
+	MovingAverageKind["Exponential"] = "exponential";
+	MovingAverageKind["Weighted"] = "weighted";
+	MovingAverageKind["Wilder"] = "wilder";
+	return MovingAverageKind;
+}({});
+var VolumeLayout = /* @__PURE__ */ function(VolumeLayout) {
+	VolumeLayout["None"] = "no-volume";
+	VolumeLayout["Pane"] = "volume-pane";
+	VolumeLayout["Overlay"] = "volume-overlay";
+	return VolumeLayout;
+}({});
+var CandleBody = /* @__PURE__ */ function(CandleBody) {
+	CandleBody["Solid"] = "solid";
+	CandleBody["Hollow"] = "hollow";
+	CandleBody["VolumeWidth"] = "volume-width";
+	return CandleBody;
+}({});
+var OhlcTicks = /* @__PURE__ */ function(OhlcTicks) {
+	OhlcTicks["OpenClose"] = "open-close";
+	OhlcTicks["CloseOnly"] = "close-only";
+	OhlcTicks["RangeOnly"] = "range-only";
+	return OhlcTicks;
+}({});
+/** What stands in for price where a chart can show it several ways. */
+var PriceMark = /* @__PURE__ */ function(PriceMark) {
+	PriceMark["Line"] = "line";
+	PriceMark["Candles"] = "candles";
+	PriceMark["Bars"] = "bars";
+	PriceMark["Area"] = "area";
+	return PriceMark;
+}({});
+/** Which prices drive a chart built from price moves rather than time. */
+var PriceSource = /* @__PURE__ */ function(PriceSource) {
+	PriceSource["Close"] = "close";
+	PriceSource["HighLow"] = "high-low";
+	return PriceSource;
+}({});
+/** How a box, brick or reversal size is derived. */
+var BoxMethod = /* @__PURE__ */ function(BoxMethod) {
+	BoxMethod["Range"] = "range";
+	BoxMethod["ATR"] = "atr";
+	BoxMethod["Percent"] = "percent";
+	return BoxMethod;
+}({});
+var BollingerPane = /* @__PURE__ */ function(BollingerPane) {
+	BollingerPane["None"] = "no-pane";
+	BollingerPane["PercentB"] = "percent-b";
+	BollingerPane["Bandwidth"] = "bandwidth";
+	return BollingerPane;
+}({});
+var IchimokuPeriods = /* @__PURE__ */ function(IchimokuPeriods) {
+	IchimokuPeriods["Classic"] = "9-26-52";
+	IchimokuPeriods["Fast"] = "7-22-44";
+	IchimokuPeriods["Slow"] = "10-30-60";
+	return IchimokuPeriods;
+}({});
+var IchimokuLines = /* @__PURE__ */ function(IchimokuLines) {
+	IchimokuLines["All"] = "all-lines";
+	IchimokuLines["NoChikou"] = "no-chikou";
+	IchimokuLines["CloudOnly"] = "cloud-only";
+	return IchimokuLines;
+}({});
+var MacdPeriods = /* @__PURE__ */ function(MacdPeriods) {
+	MacdPeriods["Standard"] = "12-26-9";
+	MacdPeriods["Fast"] = "5-35-5";
+	MacdPeriods["Wide"] = "8-17-9";
+	return MacdPeriods;
+}({});
+var MacdHistogram = /* @__PURE__ */ function(MacdHistogram) {
+	MacdHistogram["Bars"] = "bars";
+	MacdHistogram["Area"] = "area";
+	MacdHistogram["None"] = "no-histogram";
+	return MacdHistogram;
+}({});
+var MacdBasis = /* @__PURE__ */ function(MacdBasis) {
+	MacdBasis["Absolute"] = "absolute";
+	MacdBasis["Percent"] = "ppo";
+	return MacdBasis;
+}({});
+var RsiForm = /* @__PURE__ */ function(RsiForm) {
+	RsiForm["Classic"] = "rsi";
+	RsiForm["Stochastic"] = "stoch-rsi";
+	return RsiForm;
+}({});
+var StochasticForm = /* @__PURE__ */ function(StochasticForm) {
+	StochasticForm["Fast"] = "fast";
+	StochasticForm["Slow"] = "slow";
+	StochasticForm["Full"] = "full";
+	return StochasticForm;
+}({});
+var DrawdownMark = /* @__PURE__ */ function(DrawdownMark) {
+	DrawdownMark["Area"] = "area";
+	DrawdownMark["Line"] = "line";
+	DrawdownMark["Step"] = "step";
+	return DrawdownMark;
+}({});
+var DrawdownUnit = /* @__PURE__ */ function(DrawdownUnit) {
+	DrawdownUnit["Percent"] = "percent";
+	DrawdownUnit["Absolute"] = "absolute";
+	return DrawdownUnit;
+}({});
+var EquityBasis = /* @__PURE__ */ function(EquityBasis) {
+	EquityBasis["Absolute"] = "absolute";
+	EquityBasis["Rebased"] = "rebased";
+	EquityBasis["Percent"] = "percent";
+	EquityBasis["Log"] = "log";
+	return EquityBasis;
+}({});
+var EquityFill = /* @__PURE__ */ function(EquityFill) {
+	EquityFill["None"] = "no-fill";
+	EquityFill["Area"] = "area";
+	EquityFill["Relative"] = "relative";
+	return EquityFill;
+}({});
+var VolumeMeasure = /* @__PURE__ */ function(VolumeMeasure) {
+	VolumeMeasure["Shares"] = "shares";
+	VolumeMeasure["Notional"] = "notional";
+	VolumeMeasure["Relative"] = "relative";
+	VolumeMeasure["Balance"] = "on-balance";
+	return VolumeMeasure;
+}({});
+var VolumeMark = /* @__PURE__ */ function(VolumeMark) {
+	VolumeMark["Bars"] = "bars";
+	VolumeMark["Area"] = "area";
+	VolumeMark["Lollipop"] = "lollipop";
+	return VolumeMark;
+}({});
+var VolumeBucket = /* @__PURE__ */ function(VolumeBucket) {
+	VolumeBucket["Session"] = "session";
+	VolumeBucket["Week"] = "week";
+	return VolumeBucket;
+}({});
+var ProfileSide = /* @__PURE__ */ function(ProfileSide) {
+	ProfileSide["Right"] = "right";
+	ProfileSide["Left"] = "left";
+	return ProfileSide;
+}({});
+var ProfileMode = /* @__PURE__ */ function(ProfileMode) {
+	ProfileMode["Total"] = "total";
+	ProfileMode["Split"] = "split";
+	ProfileMode["Delta"] = "delta";
+	return ProfileMode;
+}({});
+var ProfileAllocation = /* @__PURE__ */ function(ProfileAllocation) {
+	ProfileAllocation["Range"] = "range";
+	ProfileAllocation["Typical"] = "typical";
+	return ProfileAllocation;
+}({});
+var DepthLayout = /* @__PURE__ */ function(DepthLayout) {
+	DepthLayout["Cumulative"] = "cumulative";
+	DepthLayout["Butterfly"] = "butterfly";
+	DepthLayout["Ladder"] = "ladder";
+	return DepthLayout;
+}({});
+var DepthCurve = /* @__PURE__ */ function(DepthCurve) {
+	DepthCurve["Step"] = "step";
+	DepthCurve["Linear"] = "linear";
+	DepthCurve["Smooth"] = "smooth";
+	return DepthCurve;
+}({});
+var DepthScale = /* @__PURE__ */ function(DepthScale) {
+	DepthScale["Linear"] = "linear";
+	DepthScale["Sqrt"] = "sqrt";
+	return DepthScale;
+}({});
+var MaturityScale = /* @__PURE__ */ function(MaturityScale) {
+	MaturityScale["Log"] = "log";
+	MaturityScale["Linear"] = "linear-tenor";
+	MaturityScale["Sqrt"] = "sqrt";
+	MaturityScale["Even"] = "even";
+	return MaturityScale;
+}({});
+var YieldMode = /* @__PURE__ */ function(YieldMode) {
+	YieldMode["Curves"] = "curves";
+	YieldMode["Spread"] = "spread";
+	YieldMode["Ribbon"] = "ribbon";
+	return YieldMode;
+}({});
+var OptionStrategy = /* @__PURE__ */ function(OptionStrategy) {
+	OptionStrategy["Custom"] = "custom";
+	OptionStrategy["LongCall"] = "long-call";
+	OptionStrategy["LongPut"] = "long-put";
+	OptionStrategy["CoveredCall"] = "covered-call";
+	OptionStrategy["ProtectivePut"] = "protective-put";
+	OptionStrategy["BullCallSpread"] = "bull-call-spread";
+	OptionStrategy["BearPutSpread"] = "bear-put-spread";
+	OptionStrategy["Straddle"] = "straddle";
+	OptionStrategy["Strangle"] = "strangle";
+	OptionStrategy["IronCondor"] = "iron-condor";
+	OptionStrategy["Butterfly"] = "butterfly";
+	return OptionStrategy;
+}({});
+var PayoffAxis = /* @__PURE__ */ function(PayoffAxis) {
+	PayoffAxis["Price"] = "price";
+	PayoffAxis["Move"] = "move";
+	return PayoffAxis;
+}({});
+var PayoffHorizon = /* @__PURE__ */ function(PayoffHorizon) {
+	PayoffHorizon["Expiry"] = "expiry";
+	PayoffHorizon["Decay"] = "decay";
+	return PayoffHorizon;
+}({});
+var ConeBands = /* @__PURE__ */ function(ConeBands) {
+	ConeBands["Fifty"] = "central-50";
+	ConeBands["Ninety"] = "central-90";
+	ConeBands["Graded"] = "graded";
+	return ConeBands;
+}({});
+var ConeModel = /* @__PURE__ */ function(ConeModel) {
+	ConeModel["Normal"] = "normal";
+	ConeModel["Lognormal"] = "lognormal";
+	ConeModel["Empirical"] = "empirical";
+	return ConeModel;
+}({});
+var CalendarMeasure = /* @__PURE__ */ function(CalendarMeasure) {
+	CalendarMeasure["Return"] = "return";
+	CalendarMeasure["Excess"] = "excess";
+	return CalendarMeasure;
+}({});
+var CalendarTotals = /* @__PURE__ */ function(CalendarTotals) {
+	CalendarTotals["None"] = "no-totals";
+	CalendarTotals["Year"] = "year-totals";
+	CalendarTotals["Both"] = "all-totals";
+	return CalendarTotals;
+}({});
+var CalendarGrain = /* @__PURE__ */ function(CalendarGrain) {
+	CalendarGrain["Month"] = "monthly";
+	CalendarGrain["Quarter"] = "quarterly";
+	return CalendarGrain;
+}({});
+var CalendarCell = /* @__PURE__ */ function(CalendarCell) {
+	CalendarCell["Tile"] = "tile";
+	CalendarCell["Bubble"] = "bubble";
+	return CalendarCell;
+}({});
+var VolatilitySurfaceForm = /* @__PURE__ */ function(VolatilitySurfaceForm) {
+	VolatilitySurfaceForm["Mesh"] = "mesh";
+	VolatilitySurfaceForm["Wireframe"] = "wireframe";
+	VolatilitySurfaceForm["Slices"] = "slices";
+	VolatilitySurfaceForm["Terraces"] = "terraces";
+	return VolatilitySurfaceForm;
+}({});
+var Candle3DDepth = /* @__PURE__ */ function(Candle3DDepth) {
+	Candle3DDepth["Uniform"] = "uniform";
+	Candle3DDepth["Volume"] = "volume";
+	return Candle3DDepth;
+}({});
+export { BollingerPane, BoxMethod, CalendarCell, CalendarGrain, CalendarMeasure, CalendarTotals, Candle3DDepth, CandleBody, ConeBands, ConeModel, DepthCurve, DepthLayout, DepthScale, DrawdownMark, DrawdownUnit, EquityBasis, EquityFill, IchimokuLines, IchimokuPeriods, MacdBasis, MacdHistogram, MacdPeriods, MaturityScale, MovingAverageKind, OhlcTicks, OptionStrategy, PayoffAxis, PayoffHorizon, PriceMark, PriceOverlay, PriceScale, PriceSource, ProfileAllocation, ProfileMode, ProfileSide, RsiForm, StochasticForm, VolatilitySurfaceForm, VolumeBucket, VolumeLayout, VolumeMark, VolumeMeasure, YieldMode };

package/dist/charts/financial/index.js

@@ -0,0 +1,62 @@
+import { BollingerPane, BoxMethod, CalendarCell, CalendarGrain, CalendarMeasure, CalendarTotals, Candle3DDepth, CandleBody, ConeBands, ConeModel, DepthCurve, DepthLayout, DepthScale, DrawdownMark, DrawdownUnit, EquityBasis, EquityFill, IchimokuLines, IchimokuPeriods, MacdBasis, MacdHistogram, MacdPeriods, MaturityScale, MovingAverageKind, OhlcTicks, OptionStrategy, PayoffAxis, PayoffHorizon, PriceMark, PriceOverlay, PriceScale, PriceSource, ProfileAllocation, ProfileMode, ProfileSide, RsiForm, StochasticForm, VolatilitySurfaceForm, VolumeBucket, VolumeLayout, VolumeMark, VolumeMeasure, YieldMode } from "./financeEnums.js";
+import { FinanceMath } from "./FinanceMath.js";
+import { Quotes } from "./Quotes.js";
+import { SessionChart } from "./SessionChart.js";
+import { PriceChart } from "./PriceChart.js";
+import { BollingerBands } from "./BollingerBands.js";
+import { Candlestick3D } from "./Candlestick3D.js";
+import { CandlestickChart } from "./CandlestickChart.js";
+import { DepthChart } from "./DepthChart.js";
+import { EquityBase } from "./EquityBase.js";
+import { DrawdownChart } from "./DrawdownChart.js";
+import { EquityCurve } from "./EquityCurve.js";
+import { PriceTransforms } from "./PriceTransforms.js";
+import { HeikinAshiChart } from "./HeikinAshiChart.js";
+import { IchimokuCloud } from "./IchimokuCloud.js";
+import { BrickChart } from "./BrickChart.js";
+import { KagiChart } from "./KagiChart.js";
+import { LineBreakChart } from "./LineBreakChart.js";
+import { OscillatorChart } from "./OscillatorChart.js";
+import { MACDChart } from "./MACDChart.js";
+import { TpoBracket, TpoForm, TpoGrouping, TpoProfile, TpoStacking } from "./TpoProfile.js";
+import { MarketProfileChart } from "./MarketProfileChart.js";
+import { OHLCChart } from "./OHLCChart.js";
+import { PayoffDiagram } from "./PayoffDiagram.js";
+import { PointFigureChart } from "./PointFigureChart.js";
+import { ProjectionCone } from "./ProjectionCone.js";
+import { RenkoChart } from "./RenkoChart.js";
+import { ReturnCalendar } from "./ReturnCalendar.js";
+import { RSIChart } from "./RSIChart.js";
+import { StochasticChart } from "./StochasticChart.js";
+import { VolatilitySurface } from "./VolatilitySurface.js";
+import { VolumeBars } from "./VolumeBars.js";
+import { VolumeProfile } from "./VolumeProfile.js";
+import { YieldCurve } from "./YieldCurve.js";
+// src/charts/financial/index.ts
+var financialCatalog = [
+	CandlestickChart,
+	OHLCChart,
+	HeikinAshiChart,
+	BollingerBands,
+	IchimokuCloud,
+	MACDChart,
+	RSIChart,
+	StochasticChart,
+	RenkoChart,
+	KagiChart,
+	PointFigureChart,
+	LineBreakChart,
+	VolumeProfile,
+	MarketProfileChart,
+	VolumeBars,
+	DepthChart,
+	YieldCurve,
+	PayoffDiagram,
+	EquityCurve,
+	DrawdownChart,
+	ReturnCalendar,
+	ProjectionCone,
+	VolatilitySurface,
+	Candlestick3D
+];
+export { BollingerBands, BollingerPane, BoxMethod, BrickChart, CalendarCell, CalendarGrain, CalendarMeasure, CalendarTotals, Candle3DDepth, CandleBody, Candlestick3D, CandlestickChart, ConeBands, ConeModel, DepthChart, DepthCurve, DepthLayout, DepthScale, DrawdownChart, DrawdownMark, DrawdownUnit, EquityBase, EquityBasis, EquityCurve, EquityFill, FinanceMath, HeikinAshiChart, IchimokuCloud, IchimokuLines, IchimokuPeriods, KagiChart, LineBreakChart, MACDChart, MacdBasis, MacdHistogram, MacdPeriods, MarketProfileChart, MaturityScale, MovingAverageKind, OHLCChart, OhlcTicks, OptionStrategy, OscillatorChart, PayoffAxis, PayoffDiagram, PayoffHorizon, PointFigureChart, PriceChart, PriceMark, PriceOverlay, PriceScale, PriceSource, PriceTransforms, ProfileAllocation, ProfileMode, ProfileSide, ProjectionCone, Quotes, RSIChart, RenkoChart, ReturnCalendar, RsiForm, SessionChart, StochasticChart, StochasticForm, TpoBracket, TpoForm, TpoGrouping, TpoProfile, TpoStacking, VolatilitySurface, VolatilitySurfaceForm, VolumeBars, VolumeBucket, VolumeLayout, VolumeMark, VolumeMeasure, VolumeProfile, YieldCurve, YieldMode, financialCatalog };

package/dist/charts/flow/AlluvialChart.js

@@ -0,0 +1,129 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { FlowBaseline, FlowRibbon, FlowSort } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowSamples } from "./FlowSamples.js";
+import { FlowTable } from "./FlowTable.js";
+import { StratumAxisOrder, StratumChart, StratumThreading } from "./StratumChart.js";
+// src/charts/flow/AlluvialChart.ts
+/** See how records move between categorical columns, with labelled blocks for each category and bands coloured by the first column. */
+var AlluvialChart = class extends StratumChart {
+	static meta = {
+		id: "alluvial",
+		name: "Alluvial diagram",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Tracks records across categorical columns, showing how each group divides into the next.",
+		tags: [
+			"categorical",
+			"migration",
+			"cross-tab"
+		],
+		sample: (seed) => FlowSamples.records(seed),
+		variants: {
+			threading: [StratumThreading.Threaded, StratumThreading.Pairwise],
+			ribbon: [
+				FlowRibbon.Curved,
+				FlowRibbon.Angular,
+				FlowRibbon.Shoulder
+			],
+			categoryOrder: [
+				FlowSort.Input,
+				FlowSort.Descending,
+				FlowSort.Alpha
+			],
+			baseline: [
+				FlowBaseline.Center,
+				FlowBaseline.Top,
+				FlowBaseline.Bottom
+			],
+			orientation: [Orientation.Horizontal, Orientation.Vertical]
+		}
+	};
+	defaults() {
+		return {
+			value: "value",
+			orientation: Orientation.Horizontal,
+			threading: StratumThreading.Threaded,
+			ribbon: FlowRibbon.Curved,
+			categoryOrder: FlowSort.Input,
+			axisOrder: StratumAxisOrder.Input,
+			baseline: FlowBaseline.Center,
+			gap: 8,
+			block: 58
+		};
+	}
+	plotMargin() {
+		return {
+			top: 4,
+			right: 8,
+			bottom: 8,
+			left: 8
+		};
+	}
+	draw(ctx) {
+		const vertical = this.options.orientation === Orientation.Vertical;
+		const to = FlowGeometry.project(this.options.orientation);
+		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
+		const head = 18;
+		const block = vertical ? 22 : Math.min(this.options.block, length / 5);
+		const layout = this.layout(vertical ? head : 0, length, breadth - (vertical ? 0 : head), block);
+		const shift = vertical ? 0 : head;
+		const at = (u, v) => to(u, v + shift);
+		const firsts = layout.axes[0]?.strata.map((stratum) => stratum.name) ?? [];
+		for (const name of firsts) ctx.palette.color(name);
+		const color = (origin) => ctx.palette.color(origin);
+		this.bands(ctx, "bands", this.segmentBands(layout, at, (segment) => color(segment.origin)), (segment) => this.segmentTip(segment, layout.total, color(segment.origin)), .5);
+		const blocks = layout.axes.flatMap((axis, a) => axis.strata.map((stratum) => ({
+			...stratum,
+			field: axis.field,
+			u: axis.u,
+			first: a === 0
+		})));
+		const shape = (d) => FlowGeometry.polygon([
+			at(d.u, d.v0),
+			at(d.u + block, d.v0),
+			at(d.u + block, d.v1),
+			at(d.u, d.v1)
+		]);
+		const fill = (d) => d.first ? color(d.name) : ctx.theme.grid;
+		const marks = ctx.marks("blocks", "path", blocks, (d) => `${d.field}/${d.name}`).attr("fill", fill);
+		ctx.set(marks, { d: shape }, { d: shape }, 6);
+		ctx.hover(marks, (d) => ({
+			title: d.name,
+			color: fill(d),
+			rows: [[d.field, +d.value.toFixed(2)], ["Share", `${(d.value / layout.total * 100).toFixed(1)}%`]]
+		}));
+		this.labels(ctx, "heads", layout.axes.map((axis) => {
+			return vertical ? {
+				key: axis.field,
+				x: 0,
+				y: axis.u - 9,
+				text: axis.field,
+				weight: 600,
+				halo: true
+			} : {
+				key: axis.field,
+				x: axis.u + block / 2,
+				y: 7,
+				text: axis.field,
+				anchor: "middle",
+				weight: 600
+			};
+		}));
+		this.labels(ctx, "names", blocks.flatMap((d) => {
+			const [x0, y0] = at(d.u, d.v0), [x1, y1] = at(d.u + block, d.v1);
+			const wide = Math.abs(x1 - x0), tall = Math.abs(y1 - y0);
+			const text = FlowTable.fit(d.name, wide - 8);
+			return text && tall >= 14 ? [{
+				key: `${d.field}/${d.name}`,
+				x: (x0 + x1) / 2,
+				y: (y0 + y1) / 2,
+				text,
+				anchor: "middle",
+				fill: ctx.palette.inkOn(fill(d))
+			}] : [];
+		}));
+	}
+};
+export { AlluvialChart };

package/dist/charts/flow/BumpFlow.js

@@ -0,0 +1,212 @@
+import { ChartFamily, CurveKind, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { FlowChart } from "./FlowChart.js";
+import { FlowRibbon, FlowRouter, FlowSort } from "./flowEnums.js";
+import { FlowGeometry } from "./FlowPathKit.js";
+import { FlowTable } from "./FlowTable.js";
+import { line, scaleLinear, scalePoint } from "d3";
+// src/charts/flow/BumpFlow.ts
+/** `Line` is rank alone. `Ribbon` also makes thickness proportional to value. */
+var BumpMark = /* @__PURE__ */ function(BumpMark) {
+	BumpMark["Line"] = "line";
+	BumpMark["Ribbon"] = "ribbon";
+	return BumpMark;
+}({});
+/** `Rank` spaces positions evenly; `Value` keeps rank order but spaces by actual gap. */
+var BumpSpacing = /* @__PURE__ */ function(BumpSpacing) {
+	BumpSpacing["Rank"] = "rank";
+	BumpSpacing["Value"] = "value";
+	return BumpSpacing;
+}({});
+var BumpLeader = /* @__PURE__ */ function(BumpLeader) {
+	BumpLeader["Top"] = "top";
+	BumpLeader["Bottom"] = "bottom";
+	return BumpLeader;
+}({});
+/** Track how rankings change over time when position matters more than the underlying value. */
+var BumpFlow = class extends FlowChart {
+	static meta = {
+		id: "bump-flow",
+		name: "Bump flow",
+		family: ChartFamily.Flow,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Follows each series through its rank in every period, making overtakes and streaks easy to read.",
+		tags: [
+			"bump chart",
+			"ranking",
+			"league table"
+		],
+		sample: (seed) => SampleData.categories(seed, 7, 6),
+		variants: {
+			mark: ["line", "ribbon"],
+			curve: [
+				CurveKind.Bump,
+				CurveKind.Linear,
+				CurveKind.StepAfter,
+				CurveKind.Monotone
+			],
+			spacing: ["rank", "value"],
+			leader: ["top", "bottom"],
+			dots: [true, false],
+			orientation: [Orientation.Horizontal, Orientation.Vertical]
+		},
+		valid: (v) => v.mark === "line" || v.curve !== CurveKind.Monotone && v.dots === false
+	};
+	defaults() {
+		return {
+			x: "category",
+			series: "series",
+			y: "value",
+			mark: "line",
+			curve: CurveKind.Bump,
+			spacing: "rank",
+			leader: "top",
+			dots: true,
+			orientation: Orientation.Horizontal
+		};
+	}
+	plotMargin() {
+		return this.options.orientation === Orientation.Vertical ? {
+			top: 8,
+			right: 10,
+			bottom: 8,
+			left: 58
+		} : {
+			top: 10,
+			right: 12,
+			bottom: 26,
+			left: 12
+		};
+	}
+	draw(ctx) {
+		const { data, x, series, y, mark, curve, spacing, leader, dots, orientation } = this.options;
+		const vertical = orientation === Orientation.Vertical;
+		const to = FlowGeometry.project(orientation);
+		const [length, breadth] = vertical ? [ctx.plot.height, ctx.plot.width] : [ctx.plot.width, ctx.plot.height];
+		const table = FlowTable.pivot(data, x, series, y);
+		const gutter = vertical ? 0 : Math.min(length * .16, 12 + Math.max(0, ...table.series.map((name) => FlowTable.width(name))));
+		const along = scalePoint(table.columns.map((_, c) => c), vertical ? [18, length - 18] : [gutter, length - gutter]);
+		const rows = Math.max(1, table.series.length);
+		const inset = 12;
+		const rankScale = scaleLinear([1, Math.max(2, rows)], leader === "top" ? [inset, breadth - inset] : [breadth - inset, inset]);
+		const values = table.columns.flatMap((_, c) => table.series.map((name) => table.at(c, name)));
+		const valueScale = scaleLinear([Math.min(0, ...values), Math.max(1, ...values)], leader === "top" ? [breadth - inset, inset] : [inset, breadth - inset]);
+		const stops = table.series.map((name) => ({
+			name,
+			stops: []
+		}));
+		table.columns.forEach((_, c) => {
+			FlowTable.sorted(table.series, FlowSort.Descending, (name) => table.at(c, name)).forEach((name, i) => {
+				const value = table.at(c, name);
+				stops.find((row) => row.name === name).stops.push({
+					series: name,
+					column: c,
+					rank: i + 1,
+					value,
+					u: along(c),
+					v: spacing === "value" ? valueScale(value) : rankScale(i + 1),
+					label: table.labels[c]
+				});
+			});
+		});
+		const color = (name) => ctx.palette.color(name);
+		for (const name of table.series) color(name);
+		const peak = Math.max(1, ...values);
+		const room = breadth / rows * .8;
+		const trace = line().curve(Scales.curve(curve)).x((d) => to(d.u, d.v)[0]).y((d) => to(d.u, d.v)[1]);
+		const form = curve === CurveKind.Linear ? FlowRibbon.Angular : curve === CurveKind.StepAfter ? FlowRibbon.Shoulder : FlowRibbon.Curved;
+		const lanes = ctx.marks("lanes", "path", mark === "line" ? stops : [], (d) => d.name).attr("fill", "none").attr("stroke", (d) => color(d.name)).attr("stroke-width", 3).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		const lanePath = (d) => vertical && curve === CurveKind.Bump ? FlowGeometry.route(d.stops.map((stop) => [stop.u, stop.v]), FlowRouter.Curved, to) : trace(d.stops) ?? "";
+		this.stroke(ctx, lanes, lanePath);
+		ctx.hover(lanes, (d) => ({
+			title: d.name,
+			color: color(d.name),
+			rows: d.stops.map((stop) => [stop.label, `#${stop.rank}`])
+		}));
+		const pieces = mark === "ribbon" ? stops.flatMap((row) => row.stops.slice(1).map((stop, i) => {
+			const a = row.stops[i];
+			const half = (value) => Math.max(1, value / peak * room) / 2;
+			return {
+				key: `${row.name}#${i}`,
+				from: color(row.name),
+				datum: row,
+				d: FlowGeometry.ribbon({
+					u: a.u,
+					v0: a.v - half(a.value),
+					v1: a.v + half(a.value)
+				}, {
+					u: stop.u,
+					v0: stop.v - half(stop.value),
+					v1: stop.v + half(stop.value)
+				}, form, to)
+			};
+		})) : [];
+		this.bands(ctx, "ribbons", pieces, (row) => ({
+			title: row.name,
+			color: color(row.name),
+			rows: row.stops.map((stop) => [stop.label, stop.value])
+		}), .72);
+		const all = stops.flatMap((row) => row.stops);
+		const dotted = dots ? all : [];
+		const marks = ctx.marks("dots", "circle", dotted, (d) => `${d.series}/${d.column}`).attr("fill", (d) => color(d.series)).attr("stroke", ctx.theme.surface).attr("stroke-width", 2);
+		const at = (d) => to(d.u, d.v);
+		ctx.set(marks, {
+			cx: (d) => at(d)[0],
+			cy: (d) => at(d)[1],
+			r: 5
+		}, {
+			cx: (d) => at(d)[0],
+			cy: (d) => at(d)[1],
+			r: 0
+		}, 4);
+		ctx.hover(marks, (d) => ({
+			title: d.series,
+			color: color(d.series),
+			rows: [[d.label, d.value], ["Rank", `#${d.rank}`]]
+		}));
+		this.labels(ctx, "names", vertical ? stops.flatMap(({ name, stops: list }) => {
+			const end = list[list.length - 1];
+			return end ? [{
+				key: name,
+				x: at(end)[0],
+				y: at(end)[1] + 11,
+				text: name,
+				anchor: "middle",
+				tone: "ink",
+				halo: true
+			}] : [];
+		}) : stops.flatMap(({ name, stops: list }) => {
+			const start = list[0], end = list[list.length - 1];
+			if (!start || !end) return [];
+			return [{
+				key: `${name}<`,
+				x: at(start)[0] - 9,
+				y: at(start)[1],
+				text: name,
+				anchor: "end"
+			}, {
+				key: `${name}>`,
+				x: at(end)[0] + 9,
+				y: at(end)[1],
+				text: name,
+				tone: "ink"
+			}];
+		}));
+		this.ticks(ctx, "columns", table.columns.map((_, c) => vertical ? {
+			key: `c${c}`,
+			x: -6,
+			y: along(c),
+			text: table.labels[c],
+			anchor: "end"
+		} : {
+			key: `c${c}`,
+			x: along(c),
+			y: 0,
+			text: table.labels[c],
+			anchor: "middle"
+		}), vertical ? "left" : "bottom");
+	}
+};
+export { BumpFlow, BumpLeader, BumpMark, BumpSpacing };