@mstone6969/graph 0.0.0-stage → 0.2.0

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 };

package/dist/charts/linesareas/ThresholdAreaChart.js

@@ -0,0 +1,133 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ThresholdSide, ThresholdSource } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendMath } from "./TrendMath.js";
+import { TrendHover } from "./TrendHover.js";
+// src/charts/linesareas/ThresholdAreaChart.ts
+/** One series against a limit: budget, target or normal level. Only the first series in the data is drawn. */
+var ThresholdAreaChart = class extends TrendChart {
+	static meta = {
+		id: "threshold-area",
+		name: "Threshold area chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Colours the area between a line and a threshold by polarity, to show when a value is over or under its limit.",
+		tags: [
+			"target",
+			"over under",
+			"bipartite area",
+			"limit"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 60, 1),
+		variants: {
+			source: [
+				ThresholdSource.Mean,
+				ThresholdSource.Median,
+				ThresholdSource.First,
+				ThresholdSource.Last
+			],
+			side: [
+				ThresholdSide.Both,
+				ThresholdSide.Above,
+				ThresholdSide.Below
+			],
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter
+			],
+			tolerance: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			source: ThresholdSource.Mean,
+			side: ThresholdSide.Both,
+			tolerance: false
+		};
+	}
+	get legended() {
+		return this.points.length > 0;
+	}
+	get points() {
+		return this.view[0]?.points ?? [];
+	}
+	get level() {
+		const { threshold, source } = this.options;
+		if (threshold !== void 0) return threshold;
+		const known = this.points.filter((p) => p.y !== null);
+		const sorted = TrendMath.sorted(known);
+		if (source === ThresholdSource.First) return known[0]?.y ?? 0;
+		if (source === ThresholdSource.Last) return known.at(-1)?.y ?? 0;
+		if (source === ThresholdSource.Median) return TrendMath.quantile(sorted, .5) ?? 0;
+		return sorted.reduce((a, b) => a + b, 0) / Math.max(1, sorted.length);
+	}
+	get slack() {
+		return this.options.tolerance ? TrendMath.deviation(this.points) / 2 : 0;
+	}
+	yValues() {
+		return [
+			...this.points.flatMap((p) => p.y === null ? [] : [p.y]),
+			this.level,
+			this.level + this.slack,
+			this.level - this.slack
+		];
+	}
+	legendItems() {
+		const { side } = this.options;
+		return [...side === ThresholdSide.Below ? [] : [{
+			key: "Above",
+			color: this.palette.diverging(TrendMath.polarity(1))
+		}], ...side === ThresholdSide.Above ? [] : [{
+			key: "Below",
+			color: this.palette.diverging(TrendMath.polarity(-1))
+		}]];
+	}
+	plotMarks(ctx, axes) {
+		const { side } = this.options;
+		const { width, height } = ctx.plot;
+		const points = this.points;
+		const rule = axes.y(this.level) ?? 0;
+		const reach = this.slack;
+		const top = axes.y(this.level + reach) ?? 0, bottom = axes.y(this.level - reach) ?? 0;
+		const band = ctx.marks("tolerance", "rect", reach ? [0] : []).attr("fill", ctx.theme.grid).attr("rx", 2).attr("x", 0).attr("width", width);
+		ctx.set(band, {
+			y: top,
+			height: Math.max(0, bottom - top)
+		});
+		const sides = [...side === ThresholdSide.Below ? [] : [{
+			key: "above",
+			tone: 1,
+			clip: `M0,0H${width}V${top}H0Z`,
+			from: top
+		}], ...side === ThresholdSide.Above ? [] : [{
+			key: "below",
+			tone: -1,
+			clip: `M0,${bottom}H${width}V${height}H0Z`,
+			from: bottom
+		}]].map((item) => ({
+			...item,
+			url: this.clipTo(ctx, item.key, item.clip)
+		}));
+		const fills = ctx.marks("fills", "path", sides, (d) => d.key).attr("fill", (d) => ctx.palette.diverging(TrendMath.polarity(d.tone))).attr("fill-opacity", .7).attr("clip-path", (d) => d.url);
+		ctx.set(fills, { d: (d) => this.areaPath(axes, d.from)(points) }, { d: (d) => this.flatPath(axes, d.from)(points) });
+		ctx.marks("rule", "line", [0]).attr("stroke", ctx.theme.ink).attr("stroke-width", 1).attr("stroke-dasharray", "4 3").attr("x1", 0).attr("x2", width).attr("y1", rule).attr("y2", rule);
+		const series = this.view.slice(0, 1);
+		this.strokes(ctx, "lines", series, axes, Scales.curve(this.options.curve), () => ctx.theme.inkSecondary);
+		const text = `${TrendHover.value(this.level)}`;
+		const note = ctx.text(ctx.marks("rule-note", "text", points.length ? [text] : []), 11, "ink").attr("text-anchor", "end").attr("dy", rule < 16 ? 14 : -5).text((d) => d).attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3);
+		ctx.set(note, {
+			x: width - 2,
+			y: rule
+		}, {
+			x: width - 2,
+			y: rule
+		});
+		this.hoverColumns(ctx, axes, series, { color: () => ctx.theme.inkSecondary });
+	}
+};
+export { ThresholdAreaChart };