@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/indicators/index.js

@@ -0,0 +1,49 @@
+import { BatteryRim, BulletMeasure, BulletScale, BulletTarget, DeltaForm, DeltaLayout, DeltaMode, DeltaSort, GaugeMarker, GaugeScale, GaugeSweep, HarveyForm, HarveyLayout, IndicatorCap, IndicatorStatus, KpiCompare, KpiDelta, KpiLayout, KpiSpark, LiquidLevel, LiquidShape, LiquidWave, MeterForm, MeterLabel, MeterZones, NeedleStyle, NumeralPlacement, RadialLabel, RadialOrder, RatingGlyph, RatingLayout, RatingPrecision, RingDirection, RingOverflow, RingStart, RingTrack, ScoreDensity, ScoreGauge, ScoreSort, ScoreStatus, SegmentLit, SegmentMark, StepForm, StepLabels, TallyBundle, TallyLayout, TargetMark, TargetPlacement, TargetRingScale, TargetRingStyle, ThermometerBase, ThermometerScale, ThermometerSide, TickDensity, TrafficHousing, TrafficLayout, VuResponse } from "./IndicatorEnums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { ActivityRings } from "./ActivityRings.js";
+import { BatteryChart } from "./BatteryChart.js";
+import { BulletChart } from "./BulletChart.js";
+import { DeltaIndicator } from "./DeltaIndicator.js";
+import { DialChart } from "./DialChart.js";
+import { GaugeChart } from "./GaugeChart.js";
+import { HarveyBalls } from "./HarveyBalls.js";
+import { KpiTile } from "./KpiTile.js";
+import { LiquidFillGauge } from "./LiquidFillGauge.js";
+import { MeterChart } from "./MeterChart.js";
+import { ProgressRing } from "./ProgressRing.js";
+import { RadialProgress } from "./RadialProgress.js";
+import { RatingStars } from "./RatingStars.js";
+import { ScoreCard } from "./ScoreCard.js";
+import { SegmentedGauge } from "./SegmentedGauge.js";
+import { SpeedometerChart } from "./SpeedometerChart.js";
+import { StepProgress } from "./StepProgress.js";
+import { TallyChart } from "./TallyChart.js";
+import { TargetChart } from "./TargetChart.js";
+import { ThermometerChart } from "./ThermometerChart.js";
+import { TrafficLightChart } from "./TrafficLightChart.js";
+import { VuMeterChart } from "./VuMeterChart.js";
+// src/charts/indicators/index.ts
+var indicatorsCatalog = [
+	ActivityRings,
+	BatteryChart,
+	BulletChart,
+	DeltaIndicator,
+	GaugeChart,
+	HarveyBalls,
+	KpiTile,
+	LiquidFillGauge,
+	MeterChart,
+	ProgressRing,
+	RadialProgress,
+	RatingStars,
+	ScoreCard,
+	SegmentedGauge,
+	SpeedometerChart,
+	StepProgress,
+	TallyChart,
+	TargetChart,
+	ThermometerChart,
+	TrafficLightChart,
+	VuMeterChart
+];
+export { ActivityRings, BatteryChart, BatteryRim, BulletChart, BulletMeasure, BulletScale, BulletTarget, DeltaForm, DeltaIndicator, DeltaLayout, DeltaMode, DeltaSort, DialChart, GaugeChart, GaugeMarker, GaugeScale, GaugeSweep, HarveyBalls, HarveyForm, HarveyLayout, IndicatorCap, IndicatorChart, IndicatorStatus, KpiCompare, KpiDelta, KpiLayout, KpiSpark, KpiTile, LiquidFillGauge, LiquidLevel, LiquidShape, LiquidWave, MeterChart, MeterForm, MeterLabel, MeterZones, NeedleStyle, NumeralPlacement, ProgressRing, RadialLabel, RadialOrder, RadialProgress, RatingGlyph, RatingLayout, RatingPrecision, RatingStars, RingDirection, RingOverflow, RingStart, RingTrack, ScoreCard, ScoreDensity, ScoreGauge, ScoreSort, ScoreStatus, SegmentLit, SegmentMark, SegmentedGauge, SpeedometerChart, StepForm, StepLabels, StepProgress, TallyBundle, TallyChart, TallyLayout, TargetChart, TargetMark, TargetPlacement, TargetRingScale, TargetRingStyle, ThermometerBase, ThermometerChart, ThermometerScale, ThermometerSide, TickDensity, TrafficHousing, TrafficLayout, TrafficLightChart, VuMeterChart, VuResponse, indicatorsCatalog };

package/dist/charts/linesareas/AreaChart.js

@@ -0,0 +1,76 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { AreaBaseline, LineMarkers } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { mean } from "d3";
+// src/charts/linesareas/AreaChart.ts
+/** A line with its volume filled, for one or two series whose magnitude matters. Stack with `StackedAreaChart` for parts of a whole. */
+var AreaChart = class extends TrendChart {
+	static meta = {
+		id: "area",
+		name: "Area chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Fills under a line to stress the magnitude of a value over time, from zero or around a reference level.",
+		tags: [
+			"trend",
+			"volume",
+			"mountain"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 40, 2),
+		variants: {
+			curve: [
+				CurveKind.Monotone,
+				CurveKind.Linear,
+				CurveKind.StepAfter,
+				CurveKind.Natural,
+				CurveKind.Basis
+			],
+			baseline: [
+				AreaBaseline.Zero,
+				AreaBaseline.Mean,
+				AreaBaseline.First
+			],
+			outline: [true, false],
+			markers: [
+				LineMarkers.None,
+				LineMarkers.Ends,
+				LineMarkers.Extrema
+			]
+		},
+		valid: ({ outline, markers }) => outline === true || markers === LineMarkers.None
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			baseline: AreaBaseline.Zero,
+			outline: true,
+			markers: LineMarkers.None
+		};
+	}
+	get zeroBased() {
+		return this.options.baseline === AreaBaseline.Zero;
+	}
+	level(series) {
+		const known = series.points.filter(this.drawn);
+		if (this.options.baseline === AreaBaseline.Zero) return 0;
+		return this.options.baseline === AreaBaseline.Mean ? mean(known, (p) => p.y) ?? 0 : known[0]?.y ?? 0;
+	}
+	plotMarks(ctx, axes) {
+		const series = this.view;
+		const base = (s) => axes.y(this.level(s)) ?? ctx.plot.height;
+		const fills = ctx.marks("fills", "path", series, (s) => s.key).attr("fill", (s) => ctx.palette.color(s.key)).attr("fill-opacity", this.options.outline ? series.length > 1 ? .22 : .3 : .45);
+		ctx.set(fills, { d: (s) => this.areaPath(axes, base(s))(s.points) }, { d: (s) => this.flatPath(axes, base(s))(s.points) });
+		this.strokes(ctx, "lines", this.options.outline ? series : [], axes);
+		this.rules(ctx, axes, series, base);
+		this.markers(ctx, series, axes, this.options.markers);
+		this.hoverColumns(ctx, axes, series);
+	}
+	rules(ctx, axes, series, base) {
+		const shown = this.options.baseline === AreaBaseline.Zero ? [] : series;
+		const width = axes.x.range?.()[1] ?? ctx.plot.width;
+		ctx.marks("baselines", "line", shown, (s) => s.key).attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("stroke-dasharray", "3 3").attr("x1", 0).attr("x2", width).attr("y1", base).attr("y2", base);
+	}
+};
+export { AreaChart };

package/dist/charts/linesareas/BumpChart.js

@@ -0,0 +1,155 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { BumpDirection, BumpStops, BumpWidth, SlopeLabels } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendMath } from "./TrendMath.js";
+import { area, range, scaleLinear } from "d3";
+// src/charts/linesareas/BumpChart.ts
+var ROOM = 84;
+/** Rank over time: who overtook whom. Ties keep first-seen order; values that are missing leave a gap. */
+var BumpChart = class extends TrendChart {
+	static meta = {
+		id: "bump",
+		name: "Bump chart",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Plots the rank of each entity at each period to reveal overtakes rather than the gaps between values.",
+		tags: [
+			"rank",
+			"ranking over time",
+			"league table"
+		],
+		sample: (seed) => TrendMath.restart(SampleData.timeSeries(seed, 64, 6), 200).filter((_, i) => i % 64 % 9 === 0),
+		variants: {
+			curve: [
+				CurveKind.Bump,
+				CurveKind.Linear,
+				CurveKind.Monotone
+			],
+			direction: [BumpDirection.TopFirst, BumpDirection.BottomFirst],
+			labels: [SlopeLabels.Both, SlopeLabels.Right],
+			stops: [
+				BumpStops.Dots,
+				BumpStops.Ranks,
+				BumpStops.None
+			],
+			thickness: [BumpWidth.Uniform, BumpWidth.Value]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			curve: CurveKind.Bump,
+			direction: BumpDirection.TopFirst,
+			labels: SlopeLabels.Both,
+			stops: BumpStops.Dots,
+			thickness: BumpWidth.Uniform,
+			grid: false
+		};
+	}
+	get direct() {
+		return true;
+	}
+	startRoom() {
+		return this.options.labels === SlopeLabels.Both ? TrendLabels.room(this.view.map((s) => s.key), ROOM) : 0;
+	}
+	yTicks() {
+		return this.view.length;
+	}
+	shape(table) {
+		const ranks = /* @__PURE__ */ new Map();
+		const lookups = table.series.map((s) => ({
+			key: s.key,
+			values: TrendMath.byOrder(s)
+		}));
+		for (const slot of table.xs) {
+			const present = lookups.flatMap(({ key, values }) => {
+				const value = values.get(slot.order);
+				return value === null || value === void 0 ? [] : [{
+					key,
+					value
+				}];
+			}).sort((a, b) => b.value - a.value);
+			ranks.set(slot.order, new Map(present.map((item, i) => [item.key, i + 1])));
+		}
+		return table.series.map((s) => ({
+			key: s.key,
+			points: s.points.map((p) => ({
+				...p,
+				raw: p.y,
+				y: p.y === null ? null : ranks.get(p.order).get(s.key)
+			}))
+		}));
+	}
+	yAxis(height) {
+		const count = Math.max(1, this.view.length);
+		const span = this.options.direction === BumpDirection.TopFirst ? [0, height] : [height, 0];
+		const every = Math.ceil(count / Math.max(1, Math.floor(height / 16)));
+		return Object.assign(scaleLinear([.5, count + .5], span), { ticks: () => range(1, count + 1, every) });
+	}
+	ribbon(ctx, series, axes) {
+		const top = Math.max(1, ...series.flatMap((s) => s.points.map((p) => Math.abs(p.raw ?? 0))));
+		const half = ctx.plot.height / Math.max(1, this.view.length) * .4;
+		const thick = (p) => Math.max(1, Math.abs(p.raw ?? 0) / top * half);
+		const shape = area().defined(this.drawn).x((p) => this.px(axes, p)).y0((p) => this.py(axes, p) + thick(p)).y1((p) => this.py(axes, p) - thick(p)).curve(this.curveOf());
+		const flat = area().defined(this.drawn).x((p) => this.px(axes, p)).y((p) => this.py(axes, p)).curve(this.curveOf());
+		const fills = ctx.marks("ribbons", "path", series, (s) => s.key).attr("fill", (s) => ctx.palette.color(s.key));
+		ctx.set(fills, { d: (s) => shape(s.points) ?? "" }, { d: (s) => flat(s.points) ?? "" });
+	}
+	stopMarks(ctx, series, axes) {
+		const { stops } = this.options;
+		const items = stops === BumpStops.None ? [] : series.flatMap((s) => s.points.filter(this.drawn).map((p) => ({
+			key: `${s.key}/${p.order}`,
+			x: this.px(axes, p),
+			y: this.py(axes, p),
+			color: ctx.palette.color(s.key),
+			rank: p.y
+		})));
+		const numbered = stops === BumpStops.Ranks;
+		const radius = numbered ? Math.max(5, Math.min(9, ctx.plot.height / Math.max(1, this.view.length) / 2 - 1)) : 5;
+		const marks = this.dots(ctx, "stops", items, ctx.root, radius);
+		if (numbered) marks.attr("stroke-width", 0);
+		const numbers = ctx.marks("stop-ranks", "text", numbered ? items : [], (d) => d.key).attr("text-anchor", "middle").attr("dy", ".34em").attr("font-size", 10).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("fill", (d) => ctx.palette.inkOn(d.color)).text((d) => d.rank);
+		ctx.set(numbers, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+	startLabels(ctx, series, axes) {
+		const room = this.startRoom();
+		const items = room ? series.flatMap((s) => {
+			const first = s.points.find(this.drawn);
+			return first ? [{
+				key: s.key,
+				x: this.px(axes, first),
+				y: this.py(axes, first)
+			}] : [];
+		}) : [];
+		const placed = TrendLabels.dodge(items, ctx.plot.height);
+		const labels = ctx.text(ctx.marks("start-labels", "text", placed, (d) => d.key)).attr("text-anchor", "end").attr("dy", ".32em").text((d) => TrendLabels.fit(d.key, room - 12));
+		ctx.set(labels, {
+			x: (d) => d.x - 10,
+			y: (d) => d.at
+		}, {
+			x: (d) => d.x - 10,
+			y: (d) => d.at
+		});
+	}
+	plotMarks(ctx, axes) {
+		const series = this.view;
+		const ribbons = this.options.thickness === BumpWidth.Value;
+		this.ribbon(ctx, ribbons ? series : [], axes);
+		this.strokes(ctx, "lines", ribbons ? [] : series, axes, Scales.curve(this.options.curve));
+		this.stopMarks(ctx, series, axes);
+		this.startLabels(ctx, series, axes);
+		this.endLabels(ctx, series, axes);
+		this.hoverColumns(ctx, axes, series);
+	}
+};
+export { BumpChart };

package/dist/charts/linesareas/ConnectedScatterTime.js

@@ -0,0 +1,206 @@
+import { CartesianChart } from "../../core/CartesianChart.js";
+import { ChartFamily, CurveKind, DataShape, Dimension, LegendPosition, ScaleKind } from "../../core/enums.js";
+import { Scales } from "../../core/Scales.js";
+import { SampleData } from "../../data/SampleData.js";
+import { ConnectedDates, ConnectedDots } from "./LineEnums.js";
+import { TrendHover } from "./TrendHover.js";
+import { TrendLabels } from "./TrendLabels.js";
+import { TrendTable } from "./TrendTable.js";
+import { extent, group, line, utcFormat } from "d3";
+// src/charts/linesareas/ConnectedScatterTime.ts
+var dateLabel = utcFormat("%b %-d");
+/** Two measures moving together through time, where the loops of the path are the story. Needs a reader willing to follow direction. */
+var ConnectedScatterTime = class ConnectedScatterTime extends CartesianChart {
+	static meta = {
+		id: "connected-scatter-time",
+		name: "Connected scatter over time",
+		family: ChartFamily.Relationship,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Joins x-y points in time order, so that the path shows how two measures move together.",
+		tags: [
+			"phase plot",
+			"path",
+			"trajectory"
+		],
+		sample: (seed) => {
+			const rows = SampleData.timeSeries(seed, 26, 2);
+			const half = rows.length / 2;
+			return rows.slice(0, half).map((row, i) => ({
+				date: row.date,
+				x: row.value,
+				y: rows[half + i].value
+			}));
+		},
+		variants: {
+			curve: [
+				CurveKind.CatmullRom,
+				CurveKind.Linear,
+				CurveKind.Cardinal,
+				CurveKind.Basis
+			],
+			dots: [
+				ConnectedDots.Ends,
+				ConnectedDots.All,
+				ConnectedDots.None
+			],
+			dates: [
+				ConnectedDates.Ends,
+				ConnectedDates.Periodic,
+				ConnectedDates.None
+			],
+			arrows: [true, false],
+			scale: [ScaleKind.Linear, ScaleKind.Log]
+		}
+	};
+	defaults() {
+		return {
+			x: "x",
+			y: "y",
+			time: "date",
+			series: "series",
+			curve: CurveKind.CatmullRom,
+			scale: ScaleKind.Linear,
+			dots: ConnectedDots.Ends,
+			dates: ConnectedDates.Ends,
+			arrows: true
+		};
+	}
+	get log() {
+		return this.options.scale === ScaleKind.Log;
+	}
+	get legendPosition() {
+		return this.trails.length > 1 ? super.legendPosition : LegendPosition.None;
+	}
+	static moment(cell) {
+		if (cell instanceof Date) return +cell;
+		if (typeof cell === "number") return cell;
+		if (typeof cell !== "string" || !cell) return null;
+		const parsed = +new Date(cell);
+		return Number.isNaN(parsed) ? null : parsed;
+	}
+	get trails() {
+		const { data, x, y, time, series } = this.options;
+		const parsed = (Array.isArray(data) ? data : []).flatMap((row) => {
+			const at = ConnectedScatterTime.moment(row[time]), a = TrendTable.number(row[x]), b = TrendTable.number(row[y]);
+			if (at === null || a === null || b === null || this.log && (a <= 0 || b <= 0)) return [];
+			const label = row[time] instanceof Date ? dateLabel(row[time]) : String(row[time]);
+			return [{
+				key: `${row[series] ?? ""}/${at}`,
+				name: String(row[series] ?? y),
+				x: a,
+				y: b,
+				time: at,
+				label
+			}];
+		});
+		return [...group(parsed, (d) => d.name)].map(([key, items]) => {
+			const sorted = [...items].sort((a, b) => a.time - b.time);
+			return {
+				key,
+				stops: sorted.map((d, i) => ({
+					...d,
+					share: sorted.length > 1 ? i / (sorted.length - 1) : 1,
+					position: i
+				}))
+			};
+		});
+	}
+	axis(values, range) {
+		const [lo = this.log ? 1 : 0, hi = this.log ? 10 : 1] = extent(values);
+		const pad = (hi - lo) * .05 || Math.abs(lo) * .1 || 1;
+		const scale = Scales.continuous(this.options.scale).domain(this.log ? [lo / 1.05, hi * 1.05] : [lo - pad, hi + pad]).range(range);
+		return this.log ? scale : scale.nice();
+	}
+	scales(ctx) {
+		const stops = this.trails.flatMap((trail) => trail.stops);
+		return {
+			x: this.axis(stops.map((s) => s.x), [0, ctx.plot.width]),
+			y: this.axis(stops.map((s) => s.y), [ctx.plot.height, 0])
+		};
+	}
+	/** Where the drawn curve really passes a stop: B-splines cut inside their control points. */
+	onCurve(stops, i) {
+		const here = stops[i];
+		if (this.options.curve !== CurveKind.Basis) return here;
+		const before = stops[i - 1] ?? here, after = stops[i + 1] ?? here;
+		return [(before[0] + 4 * here[0] + after[0]) / 6, (before[1] + 4 * here[1] + after[1]) / 6];
+	}
+	plotMarks(ctx, axes) {
+		const { curve, dots, dates, arrows } = this.options;
+		const trails = this.trails;
+		const single = trails.length === 1;
+		const cx = (s) => axes.x(s.x) ?? 0, cy = (s) => axes.y(s.y) ?? 0;
+		const path = line().x(cx).y(cy).curve(Scales.curve(curve));
+		const lines = ctx.marks("lines", "path", trails, (t) => t.key).attr("fill", "none").attr("stroke", (t) => ctx.palette.color(t.key)).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round");
+		lines.filter(function() {
+			return !this.getAttribute("d");
+		}).attr("d", (t) => path(t.stops) ?? "");
+		ctx.drawOn(lines);
+		ctx.set(lines, { d: (t) => path(t.stops) ?? "" });
+		const heads = trails.flatMap((trail) => {
+			const at = trail.stops.map((s) => [cx(s), cy(s)]);
+			const every = Math.max(2, Math.ceil(at.length / 6));
+			return arrows ? trail.stops.flatMap((stop, i) => {
+				if (i === 0 || i >= at.length - 1 || i % every) return [];
+				const before = this.onCurve(at, i - 1), after = this.onCurve(at, i + 1), place = this.onCurve(at, i);
+				return [{
+					key: stop.key,
+					color: ctx.palette.color(trail.key),
+					x: place[0],
+					y: place[1],
+					angle: Math.atan2(after[1] - before[1], after[0] - before[0]) * 180 / Math.PI
+				}];
+			}) : [];
+		});
+		const arrowMarks = ctx.marks("arrows", "path", heads, (d) => d.key).attr("fill", (d) => d.color).attr("stroke", ctx.theme.surface).attr("stroke-width", 1).attr("d", "M-6,-5L6,0L-6,5L-3,0Z");
+		ctx.set(arrowMarks, { transform: (d) => `translate(${d.x},${d.y}) rotate(${d.angle})` });
+		const dotted = trails.flatMap((trail) => trail.stops.filter((s, i) => dots === ConnectedDots.All || dots === ConnectedDots.Ends && (i === 0 || i === trail.stops.length - 1)).map((stop) => ({
+			stop,
+			trail
+		})));
+		const marks = ctx.marks("dots", "circle", dotted, (d) => d.stop.key).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("fill", (d) => single ? ctx.palette.sequential(.3 + d.stop.share * .7) : ctx.palette.color(d.trail.key));
+		ctx.set(marks, {
+			cx: (d) => cx(d.stop),
+			cy: (d) => cy(d.stop),
+			r: 5
+		}, {
+			cx: (d) => cx(d.stop),
+			cy: (d) => cy(d.stop),
+			r: 0
+		});
+		const noted = dates === ConnectedDates.None ? [] : trails.flatMap((trail) => {
+			const every = Math.max(1, Math.ceil(trail.stops.length / 5)), last = trail.stops.length - 1;
+			return trail.stops.filter((_, i) => i === 0 || i === last || dates === ConnectedDates.Periodic && i % every === 0).map((stop) => {
+				const w = stop.label.length * 6.2;
+				return {
+					key: stop.key,
+					text: stop.label,
+					w,
+					h: 12,
+					x: Math.max(w / 2, Math.min(ctx.plot.width - w / 2, cx(stop))),
+					y: cy(stop) < 18 ? cy(stop) + 15 : cy(stop) - 13
+				};
+			});
+		});
+		const notes = ctx.text(ctx.marks("dates", "text", TrendLabels.reject(noted), (d) => d.key), 11, "ink").attr("text-anchor", "middle").attr("dy", ".32em").attr("paint-order", "stroke").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).text((d) => d.text);
+		ctx.set(notes, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		}, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const stops = trails.flatMap((trail) => trail.stops.map((stop) => ({
+			stop,
+			trail
+		})));
+		const hits = ctx.marks("hits", "circle", stops, (d) => d.stop.key).attr("fill", "transparent").attr("r", 12).attr("cx", (d) => cx(d.stop)).attr("cy", (d) => cy(d.stop));
+		ctx.hover(hits, ({ stop, trail }) => ({
+			title: stop.label,
+			color: ctx.palette.color(trail.key),
+			rows: [[this.options.xLabel ?? this.options.x, TrendHover.value(stop.x)], [this.options.yLabel ?? this.options.y, TrendHover.value(stop.y)]]
+		}));
+	}
+};
+export { ConnectedScatterTime };

package/dist/charts/linesareas/CumulativeLine.js

@@ -0,0 +1,115 @@
+import { ChartFamily, CurveKind, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { CumulativeReset, CumulativeUnit } from "./LineEnums.js";
+import { TrendChart } from "./TrendChart.js";
+import { utcMonday, utcMonth } from "d3";
+// src/charts/linesareas/CumulativeLine.ts
+/** Running total of a measure. Use it for progress against a target, burn-up, or month-to-date revenue. */
+var CumulativeLine = class extends TrendChart {
+	static meta = {
+		id: "cumulative-line",
+		name: "Cumulative line",
+		family: ChartFamily.Trend,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Accumulates a value along x to show running totals, pace against an even rate, or period-to-date progress.",
+		tags: [
+			"running total",
+			"burn-up",
+			"year to date"
+		],
+		sample: (seed) => SampleData.timeSeries(seed, 60, 2),
+		variants: {
+			curve: [
+				CurveKind.Linear,
+				CurveKind.StepAfter,
+				CurveKind.Monotone
+			],
+			unit: [CumulativeUnit.Absolute, CumulativeUnit.Share],
+			reset: [
+				CumulativeReset.Never,
+				CumulativeReset.Weekly,
+				CumulativeReset.Monthly
+			],
+			pace: [false, true],
+			fill: [false, true]
+		},
+		valid: ({ unit, reset, pace }) => reset === CumulativeReset.Never || unit === CumulativeUnit.Absolute && !pace
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			curve: CurveKind.Linear,
+			unit: CumulativeUnit.Absolute,
+			reset: CumulativeReset.Never,
+			pace: false,
+			fill: false
+		};
+	}
+	get zeroBased() {
+		return true;
+	}
+	period(point) {
+		const { reset } = this.options;
+		if (!(point.x instanceof Date) || reset === CumulativeReset.Never) return 0;
+		return +(reset === CumulativeReset.Weekly ? utcMonday : utcMonth).floor(point.x);
+	}
+	shape(table) {
+		return table.series.map((s) => {
+			let total = 0, period = NaN;
+			const running = s.points.map((point) => {
+				const at = this.period(point);
+				if (at !== period) {
+					period = at;
+					total = 0;
+				}
+				total += point.y ?? 0;
+				return {
+					...point,
+					y: total,
+					raw: total
+				};
+			});
+			const final = running.at(-1)?.y || 1;
+			return {
+				key: s.key,
+				points: this.options.unit === CumulativeUnit.Share ? running.map((p) => ({
+					...p,
+					y: p.y / final * 100
+				})) : running
+			};
+		});
+	}
+	plotMarks(ctx, axes) {
+		const { fill, pace, reset } = this.options;
+		const series = this.view;
+		const base = axes.y(0) ?? ctx.plot.height;
+		const runs = series.flatMap((s) => {
+			const parts = /* @__PURE__ */ new Map();
+			for (const point of s.points) {
+				const period = this.period(point);
+				(parts.get(period) ?? parts.set(period, []).get(period)).push(point);
+			}
+			return [...parts].map(([period, points]) => ({
+				key: `${s.key}/${period}`,
+				owner: s.key,
+				points
+			}));
+		});
+		const color = (s) => ctx.palette.color(s.owner);
+		const shape = this.areaPath(axes, base);
+		const fills = ctx.marks("fills", "path", fill ? runs : [], (s) => s.key).attr("fill", color).attr("fill-opacity", .2);
+		ctx.set(fills, { d: (s) => shape(s.points) }, { d: (s) => this.flatPath(axes, base)(s.points) });
+		this.strokes(ctx, "lines", runs, axes, this.curveOf(), color);
+		const paced = pace && reset === CumulativeReset.Never ? series.map((s) => ({
+			key: s.key,
+			points: [s.points[0], s.points.at(-1)].map((p, i) => ({
+				...p,
+				y: i ? p.y : 0
+			}))
+		})) : [];
+		this.strokes(ctx, "pace", paced, axes, this.curveOf(CurveKind.Linear), () => ctx.theme.inkMuted).attr("stroke-dasharray", "5 4");
+		this.hoverColumns(ctx, axes, series);
+	}
+};
+export { CumulativeLine };