@tangle-network/charts 0.6.0 → 0.8.0

package/dist/react/index.js

@@ -1,6 +1,6 @@
-import { d as hatchPath, i as eventsGap, m as markerPath, o as isRefusal } from "../events-Cw6abvgR.js";
+import { F as hatchPath, R as markerPath, l as markName, o as eventsGap, r as MARK_HEADS, t as timeline, u as isRefusal } from "../timeline-CCWFvLxg.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -247,7 +247,7 @@ function StackedBarChart(props) {
 	validate(props);
 	const bySeries = new Map(series.map((entry) => [entry.id, entry]));
 	const formatted = (value) => isValue(value) ? formatValue(value) : unavailableLabel;
-	const summary = (bucket) => `${bucket.label}: total ${formatted(bucket.total)}` + (hasGap(bucket) ? ` — ${unavailableLabel}` : "") + (bucket.segments.length ? ` — ${bucket.segments.map((segment) => `${bySeries.get(segment.seriesId).label} ${formatted(segment.value)}`).join(", ")}` : "");
+	const summary = (bucket) => `${bucket.label}: total ${formatted(bucket.total)}` + (hasGap(bucket) ? ` — ${unavailableLabel}` : "") + (bucket.segments.length ? ` — ${bucket.segments.map((segment) => `${bySeries.get(segment.seriesId).label} ${formatted(segment.value)}`).join(", ")}` : "") + (bucket.description ? ` — ${bucket.description}` : "");
 	const activeIndex = selectedBucketId === null ? -1 : buckets.findIndex(({ id }) => id === selectedBucketId);
 	const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight = 16, marginLeft = 56;
 	const chartHeight = 220;
@@ -490,7 +490,8 @@ function StackedBarChart(props) {
 						bySeries.get(segment.seriesId).label,
 						": ",
 						formatted(segment.value)
-					] }, segment.seriesId))
+					] }, segment.seriesId)),
+					activeBucket.description && /* @__PURE__ */ jsx("div", { children: activeBucket.description })
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -1267,13 +1268,17 @@ function Band({ band, x, y, width, height }) {
 		]
 	});
 }
-/** A vertical event rule with its label; kinds differ by stroke pattern and the died cross as well as colour. */
+/** A vertical event rule with its label; kinds differ by stroke pattern, the died cross and the release, steer, ruling
+* and wake head shapes as well as colour, and a recorded verdict colours the rule. */
 function Mark({ mark, x, top, bottom, row, em, flip }) {
 	const s = Math.max(3, em / 4);
+	const head = MARK_HEADS[mark.kind];
 	return /* @__PURE__ */ jsxs("g", {
 		"data-mark": mark.kind,
+		"data-verdict": mark.verdict,
+		className: mark.verdict ? `ov-verdict-${mark.verdict}` : void 0,
 		children: [
-			/* @__PURE__ */ jsx("title", { children: mark.label }),
+			/* @__PURE__ */ jsx("title", { children: markName(mark) }),
 			/* @__PURE__ */ jsx("line", {
 				x1: x,
 				x2: x,
@@ -1285,12 +1290,16 @@ function Mark({ mark, x, top, bottom, row, em, flip }) {
 				d: `M${x - s} ${bottom - 2 * s}L${x + s} ${bottom}M${x - s} ${bottom}L${x + s} ${bottom - 2 * s}`,
 				className: "ov-mark ov-mark-died"
 			}),
+			head && /* @__PURE__ */ jsx("path", {
+				d: markerPath(head, x, top + s, s),
+				className: "ov-mark-head"
+			}),
 			/* @__PURE__ */ jsx("text", {
 				x: flip ? x - em * .3 : x + em * .3,
 				y: top + em * (.9 + row),
 				textAnchor: flip ? "end" : "start",
 				className: "ov-mark-label",
-				children: mark.label
+				children: markName(mark)
 			})
 		]
 	});
@@ -1301,7 +1310,7 @@ function EventList({ marks, bands, format }) {
 	const items = [...marks.map((m) => ({
 		at: m.at,
 		kind: m.kind,
-		text: `${m.label} · ${format(m.at)}`
+		text: `${markName(m)} · ${format(m.at)}${m.verdict ? ` · ${m.verdict}` : ""}`
 	})), ...bands.map((b) => ({
 		at: b.from,
 		kind: b.kind,
@@ -1682,4 +1691,46 @@ function FigureView({ figure, presentation = "chart" }) {
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DayBars, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/timeline-view.tsx
+/** The static `timeline` in React, with lanes that fold by subtree. A parent lane's label is a toggle: a click, Enter
+* or Space folds its descendants away, and the folded lane's ticks and counts then total its subtree. */
+function TimelineView({ lanes, options, defaultCollapsed = [], presentation }) {
+	const [collapsed, setCollapsed] = useState(defaultCollapsed);
+	const box = useRef(null);
+	const refocus = useRef(null);
+	const figure = useMemo(() => timeline(lanes, {
+		...options,
+		collapsed
+	}), [
+		lanes,
+		options,
+		collapsed
+	]);
+	useEffect(() => {
+		const id = refocus.current;
+		refocus.current = null;
+		if (id === null || !box.current) return;
+		Array.from(box.current.querySelectorAll("[data-toggle]")).find((element) => element.getAttribute("data-toggle") === id)?.focus();
+	}, [figure]);
+	const fold = (target, keyboard) => {
+		const id = target instanceof Element ? target.closest("[data-toggle]")?.getAttribute("data-toggle") : null;
+		if (!id) return false;
+		if (keyboard) refocus.current = id;
+		setCollapsed((list) => list.includes(id) ? list.filter((other) => other !== id) : [...list, id]);
+		return true;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: box,
+		className: "tgc-timeline-view",
+		onClick: (event) => fold(event.target, false),
+		onKeyDown: (event) => {
+			if ((event.key === "Enter" || event.key === " ") && fold(event.target, true)) event.preventDefault();
+		},
+		children: /* @__PURE__ */ jsx(FigureView, {
+			figure,
+			presentation
+		})
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DayBars, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -31,9 +31,23 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-mark-deadline { stroke: var(--chart-live-fg, var(--chart-ink)); stroke-dasharray: 5 3; }
 .ov-mark-died { stroke: var(--chart-live-danger, var(--chart-breach, var(--status-error))); stroke-width: 2; }
 .ov-mark-event { stroke: var(--chart-live-muted, var(--chart-ink-muted)); stroke-dasharray: 1 3; stroke-linecap: round; }
+.ov-mark-release { stroke: var(--chart-live-muted, var(--chart-ink-muted)); }
+.ov-mark-steer { stroke: var(--chart-live-accent, var(--chart-accent)); stroke-dasharray: 1 3; stroke-linecap: round; }
+.ov-mark-ruling { stroke: var(--chart-live-fg, var(--chart-ink)); stroke-dasharray: 6 2 1 2; }
+.ov-mark-wake { stroke: var(--chart-live-muted, var(--chart-ink-muted)); stroke-dasharray: 1 3; stroke-linecap: round; }
+.ov-mark-head { fill: var(--chart-live-muted, var(--chart-ink-muted)); stroke: var(--chart-live-surface, var(--chart-canvas)); stroke-width: 1; }
+[data-mark="steer"] .ov-mark-head { fill: var(--chart-live-accent, var(--chart-accent)); }
+[data-mark="ruling"] .ov-mark-head { fill: var(--chart-live-fg, var(--chart-ink)); }
+.ov-verdict-pass .ov-mark { stroke: var(--chart-live-pass, var(--chart-pass, var(--status-running))); }
+.ov-verdict-pass .ov-mark-head { fill: var(--chart-live-pass, var(--chart-pass, var(--status-running))); }
+.ov-verdict-fail .ov-mark { stroke: var(--chart-live-danger, var(--chart-breach, var(--status-error))); }
+.ov-verdict-fail .ov-mark-head { fill: var(--chart-live-danger, var(--chart-breach, var(--status-error))); }
+.ov-verdict-unknown .ov-mark { stroke: var(--chart-live-faint, var(--chart-muted)); }
+.ov-verdict-unknown .ov-mark-head { fill: var(--chart-live-faint, var(--chart-muted)); }
 .ov-mark-label { fill: var(--chart-live-fg, var(--chart-ink)); font-size: .75em; paint-order: stroke; stroke: var(--chart-live-surface, var(--chart-canvas)); stroke-width: 3px; stroke-linejoin: round; }
 .ov-band-after-pass { fill: color-mix(in srgb, var(--chart-live-pass, var(--chart-pass, var(--status-running))) 12%, transparent); }
 .ov-band-idle { fill: var(--chart-live-hover, var(--chart-shade)); }
+.ov-band-blocked { fill: color-mix(in srgb, var(--chart-live-danger, var(--chart-breach, var(--status-error))) 9%, transparent); }
 /* Missing data is hatched, never drawn as zero. */
 .ov-hatch-bg { fill: color-mix(in srgb, var(--chart-live-faint, var(--chart-muted)) 10%, transparent); }
 .ov-hatch { fill: none; stroke: var(--chart-live-faint, var(--chart-muted)); stroke-width: 1; }
@@ -49,7 +63,10 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-event-pass { border-left: 2px solid var(--chart-live-pass, var(--chart-pass, var(--status-running))); border-radius: 0; width: 0; }
 .ov-event-deadline { border-left: 2px dashed var(--chart-live-fg, var(--chart-ink)); border-radius: 0; width: 0; }
 .ov-event-died { border-left: 2px solid var(--chart-live-danger, var(--chart-breach, var(--status-error))); border-radius: 0; width: 0; }
-.ov-event-event { border-left: 2px dotted var(--chart-live-muted, var(--chart-ink-muted)); border-radius: 0; width: 0; }
+.ov-event-event, .ov-event-steer, .ov-event-wake { border-left: 2px dotted var(--chart-live-muted, var(--chart-ink-muted)); border-radius: 0; width: 0; }
+.ov-event-release { border-left: 2px solid var(--chart-live-muted, var(--chart-ink-muted)); border-radius: 0; width: 0; }
+.ov-event-ruling { border-left: 2px dashed var(--chart-live-fg, var(--chart-ink)); border-radius: 0; width: 0; }
+.ov-event-blocked { background: color-mix(in srgb, var(--chart-live-danger, var(--chart-breach, var(--status-error))) 25%, transparent); }
 .ov-event-after-pass { background: color-mix(in srgb, var(--chart-live-pass, var(--chart-pass, var(--status-running))) 25%, transparent); }
 .ov-event-idle { background: var(--chart-live-hover, var(--chart-shade)); }
 .ov-event-missing { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 4px); }

package/dist/{timeline-BAjzF-wL.d.ts → timeline-CCEJug7n.d.ts}

@@ -133,15 +133,25 @@ interface Refusal {
 declare function isRefusal(value: Figure | Refusal): value is Refusal;
 //#endregion
 //#region src/events.d.ts
-/** `pass` is solid, `deadline` dashed, `died` ends in a cross and `event` is dotted, so kinds read without colour. */
-type MarkKind = "pass" | "deadline" | "died" | "event";
+/**
+ * `pass` is solid, `deadline` dashed, `died` ends in a cross and `event` is dotted. `release`, `steer`, `ruling` and
+ * `wake` carry a head shape (diamond, triangle, square, circle), so every kind reads without colour.
+ */
+type MarkKind = "pass" | "deadline" | "died" | "event" | "release" | "steer" | "ruling" | "wake";
+/** A recorded verdict, such as a release tag's check: pass and fail take the status tones, unknown the muted tone. */
+type MarkVerdict = "pass" | "fail" | "unknown";
 interface ChartMark {
   at: number;
   label: string;
   kind: MarkKind;
+  verdict?: MarkVerdict;
+  /** Who made the event, such as the operator or the keeper for a steer. Shown with the label and in the table. */
+  source?: string;
+  /** `timeline` only: the lane the event belongs to. It is drawn on that lane instead of across every lane. */
+  lane?: string;
 }
-/** `missing` is hatched: a span with no data is never drawn as zero. */
-type BandKind = "after-pass" | "idle" | "missing";
+/** `missing` is hatched: a span with no data is never drawn as zero. `blocked` is a system-wide wall, such as a quota window. */
+type BandKind = "after-pass" | "idle" | "missing" | "blocked";
 interface ChartBand {
   from: number;
   to: number;
@@ -157,14 +167,33 @@ interface TimelineSpan {
   state: string;
   note?: string;
 }
+/** How one recorded attempt ended. `ok` succeeded; every other outcome counts as failed. */
+type TickOutcome = "ok" | "quota" | "rate-limit" | "oom" | "refused" | "aborted" | "other";
+/** One recorded attempt on a lane, such as a driver turn, at the time it ended. `note` (an error line) shows on hover. */
+interface TimelineTick {
+  at: number;
+  outcome: TickOutcome;
+  note?: string;
+}
 interface TimelineLane {
   id: string;
   label: string;
   spans: TimelineSpan[];
+  /** The lane that started this one. The lane is drawn under its parent with a tree connector. */
+  parent?: string;
+  /** Tree depth: 0 for a root. Defaults to the parent's depth plus one, or 0 without a parent. */
+  depth?: number;
+  /** Recorded attempts, drawn as ticks with ok and failed counts at the lane's end. Omit when attempts are not recorded. */
+  ticks?: TimelineTick[];
+  /** Caller-composed facts, one per hover line on the lane and each of its spans: profile, model, status, attempts, cost, top error. */
+  detail?: string[];
 }
 interface TimelineOptions {
   measure: string;
-  /** The recorded window; defaults to the extent of spans, marks, bands and `now`. Everything must fall inside it. */
+  /**
+   * The recorded window; defaults to the extent of the data (spans, ticks and `now`). Spans, ticks and `now` must fall
+   * inside it. Marks outside it, such as a later deadline, are named at the edge they fall past; bands are clipped.
+   */
   start?: number;
   end?: number;
   /** The time an open span is drawn to. Required when any span is open. */
@@ -175,9 +204,15 @@ interface TimelineOptions {
   hatch?: string[];
   /** States drawn in the muted tone, such as idle. Default: idle. */
   muted?: string[];
+  /**
+   * Lane ids whose subtrees are folded: descendants are hidden and the lane's ticks and counts include them. Passing
+   * it, even empty, makes each parent lane's label a fold toggle (`data-toggle`), which React `TimelineView` wires up.
+   * Ids that name no lane are ignored, so a fold state can outlive the lanes it was made for.
+   */
+  collapsed?: string[];
   formatTime?: (ms: number) => string;
   id?: string;
 }
 declare function timeline(lanes: TimelineLane[], o: TimelineOptions): Figure | Refusal;
 //#endregion
-export { isRefusal as C, TierCounts as S, MatrixCell as _, BandKind as a, Setup as b, MarkKind as c, CostBasis as d, Estimate as f, IntervalMethod as g, Interval as h, timeline as i, BreakdownInput as l, Figure as m, TimelineOptions as n, ChartBand as o, Exclusion as p, TimelineSpan as r, ChartMark as s, TimelineLane as t, ComparisonRow as u, RateRow as v, Tier as x, Refusal as y };
+export { Setup as C, isRefusal as E, Refusal as S, TierCounts as T, Figure as _, TimelineTick as a, MatrixCell as b, ChartBand as c, MarkVerdict as d, BreakdownInput as f, Exclusion as g, Estimate as h, TimelineSpan as i, ChartMark as l, CostBasis as m, TimelineLane as n, timeline as o, ComparisonRow as p, TimelineOptions as r, BandKind as s, TickOutcome as t, MarkKind as u, Interval as v, Tier as w, RateRow as x, IntervalMethod as y };