@tangle-network/charts 0.7.0 → 0.9.0

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { a as BandKind, c as MarkKind, m as Figure, o as ChartBand, r as TimelineSpan, s as ChartMark, t as TimelineLane, y as Refusal } from "../timeline-BAjzF-wL.js";
+import { N as Refusal, O as Figure, S as YTick, _ as MarkVerdict, b as YScale, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, l as TickOutcome, m as ChartBand, n as TimelineOptions, p as BandKind, r as TimelineSpan, t as TimelineLane, v as MarkerShape, x as YTarget, y as XCategory } from "../timeline-CNHABOS1.js";
 import { ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -138,10 +138,6 @@ interface WaterfallHeaderProps extends WaterfallTimeAxisProps {
 }
 export declare function WaterfallHeader({ label, attribution, durationLabel, ...axis }: WaterfallHeaderProps): import("react").JSX.Element;
 //#endregion
-//#region src/svg.d.ts
-/** Point shapes: the second channel that keeps series distinct without colour. */
-type MarkerShape = "circle" | "square" | "triangle" | "diamond";
-//#endregion
 //#region src/react/live.d.ts
 export declare const LIVE_SERIES: readonly ['#8b7cf6', '#0ea5a0', '#c98500', '#e2508f', '#4a90e2'];
 export declare const formatCompact: (value: number | null | undefined) => string;
@@ -259,4 +255,14 @@ interface FigureViewProps {
 }
 export declare function FigureView({ figure, presentation }: FigureViewProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, Figure, FigureViewProps, LineSeries, MarkKind, MarkerShape, MeterSegment, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TimelineLane, TimelineSpan, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow };
+//#region src/react/timeline-view.d.ts
+interface TimelineViewProps {
+  lanes: TimelineLane[];
+  options: Omit<TimelineOptions, 'collapsed'>;
+  /** Lane ids folded on first render, such as every lead on a large team. */
+  defaultCollapsed?: string[];
+  presentation?: FigureViewProps['presentation'];
+}
+export declare function TimelineView({ lanes, options, defaultCollapsed, presentation }: TimelineViewProps): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, Figure, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

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 { K as markerPath, U as hatchPath, _ as markName, c as MARK_HEADS, p as eventsGap, t as timeline, v as isRefusal } from "../timeline-BAwebuqb.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;
@@ -1268,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,
@@ -1286,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)
 			})
 		]
 	});
@@ -1302,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,
@@ -1683,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,25 @@ 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); }
+/* A group band labels a run of positions; in the live renderer it is an outline, never a fill over the data. */
+.ov-band-group { fill: none; stroke: var(--chart-live-border, var(--chart-rule)); stroke-dasharray: 2 3; }
 /* 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 +65,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); }