@tangle-network/charts 0.8.0 → 0.9.0

package/dist/react/index.d.ts

@@ -1,9 +1,5 @@
-import { S as Refusal, _ as Figure, a as TimelineTick, c as ChartBand, d as MarkVerdict, i as TimelineSpan, l as ChartMark, n as TimelineLane, r as TimelineOptions, s as BandKind, t as TickOutcome, u as MarkKind } from "../timeline-CCEJug7n.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/svg.d.ts
-/** Point shapes: the second channel that keeps series distinct without colour. */
-type MarkerShape = "circle" | "square" | "triangle" | "diamond";
-//#endregion
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
 type SparklineValues = readonly (number | null)[];
@@ -269,4 +265,4 @@ interface TimelineViewProps {
 }
 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, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow };
+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,4 +1,4 @@
-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 { 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, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx

package/dist/react/live.css

@@ -48,6 +48,8 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .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; }

package/dist/{timeline-CCWFvLxg.js → timeline-BAwebuqb.js}

@@ -555,7 +555,8 @@ const BAND_KINDS = [
 	"after-pass",
 	"idle",
 	"missing",
-	"blocked"
+	"blocked",
+	"group"
 ];
 /** The head shape of each kind that has one, shared with the React marks. */
 const MARK_HEADS = {
@@ -577,10 +578,14 @@ function eventsGap(marks = [], bands = [], domain) {
 	for (const band of bands) {
 		if (!band || typeof band.label !== "string" || !band.label.trim()) return "Every band needs a label.";
 		if (!BAND_KINDS.includes(band.kind)) return `${band.label}: unknown band kind.`;
-		if (!Number.isFinite(band.from) || !Number.isFinite(band.to) || band.from >= band.to || !inside(band.from) || !inside(band.to)) return `${band.label}: a band needs finite, increasing bounds inside the axis domain.`;
+		if (!Number.isFinite(band.from) || !Number.isFinite(band.to) || (band.kind === "group" ? band.from > band.to : band.from >= band.to) || !inside(band.from) || !inside(band.to)) return `${band.label}: a band needs finite, increasing bounds inside the axis domain.`;
 	}
 	return null;
 }
+/** An `event` whose source is `gap`: a break in time between positions of an ordinal axis. It never crosses the data. */
+function isGap(mark) {
+	return mark.kind === "event" && mark.source === "gap";
+}
 /** A mark's label with its source, as drawn and listed. */
 function markName(mark) {
 	return mark.source ? `${mark.label} · ${mark.source}` : mark.label;
@@ -593,16 +598,44 @@ function markKindLabel(mark) {
 		mark.lane && `lane ${mark.lane}`
 	].filter(Boolean).join(" · ");
 }
-/** Bands sit under the data; a missing band is hatched over a neutral wash. A band is clipped to `clip` when given. */
-function drawBands(bands, px, top, bottom, format, clip) {
+/**
+* Bands sit under the data; a missing band is hatched over a neutral wash. A band is clipped to `clip` when given.
+* `extent` maps a band's bounds to pixels when a bound covers more than a point, such as a column of an ordinal axis.
+* Group bands are drawn by `drawGroups`, not here.
+*/
+function drawBands(bands, px, top, bottom, format, clip, extent) {
 	return bands.map((band) => {
+		if (band.kind === "group") return "";
 		const from = clip ? Math.max(band.from, clip[0]) : band.from, to = clip ? Math.min(band.to, clip[1]) : band.to;
 		if (to <= from) return "";
-		const x = px(from), w = px(to) - x, cls = `tgc-band tgc-band-${band.kind}`;
+		const [x0, x1] = extent ? extent(from, to) : [px(from), px(to)];
+		const x = x0, w = x1 - x0, cls = `tgc-band tgc-band-${band.kind}`;
 		const mark = band.kind === "missing" ? hatch(x, top, w, bottom - top, cls) : rect(x, top, w, bottom - top, cls) + (band.kind === "blocked" ? line(x, top, x + w, top, "tgc-band-wall") : "");
 		return titled(`${band.label}: ${format(band.from)} to ${format(band.to)}`, `<g data-band="${band.kind}">${mark}</g>`);
 	}).join("");
 }
+/** The header row height `drawGroups` needs, or 0 without group bands. */
+function groupRowHeight(bands = []) {
+	return bands.some((band) => band.kind === "group") ? 18 : 0;
+}
+/**
+* Group bands as labelled brackets in the header row that ends at `top`, with a rule at each inner edge through the
+* data. A label that does not fit its bracket is cut with an ellipsis; the full label is the bracket's hover.
+*/
+function drawGroups(bands, extent, top, bottom, left, right, format, clip) {
+	return bands.filter((band) => band.kind === "group").map((band) => {
+		const from = clip ? Math.max(band.from, clip[0]) : band.from, to = clip ? Math.min(band.to, clip[1]) : band.to;
+		if (to < from) return "";
+		const [x0, x1] = extent(from, to), w = x1 - x0;
+		const label = w >= 24 ? wrap(band.label, w - 10, 11, "sans", 1).lines[0] : "";
+		const edges = [x0, x1].filter((x) => x > left + .5 && x < right - .5).map((x) => line(x, top - 16, x, bottom, "tgc-group-edge")).join("");
+		const bracket = line(x0 + 2, top - 3, x1 - 2, top - 3, "tgc-group-rule") + (label ? text(x0 + 3, top - 7, label, {
+			size: 11,
+			cls: "tgc-group-label"
+		}) : "");
+		return titled(`${band.label}: ${format(band.from)} to ${format(band.to)}`, `<g data-band="group">${edges}${bracket}</g>`);
+	}).join("");
+}
 /** Marks of one kind and verdict merge when under 3 px apart, or under 12 px apart with the same label (a re-checked tag). */
 function groupMarks(marks, px) {
 	const groups = [];
@@ -645,7 +678,7 @@ function layoutLabels(groups, left, right, o) {
 	const [w0, w1] = o.window ?? [-Infinity, Infinity];
 	const edges = [...(o.after ?? []).map((mark) => place(`${markName(mark)} +${duration(mark.at - w1)} →`, right, right, "end", false)), ...(o.before ?? []).map((mark) => place(`← ${markName(mark)} −${duration(w0 - mark.at)}`, left, left, "start", false))].filter((p) => p !== null);
 	const placed = /* @__PURE__ */ new Map();
-	for (const group of groups) {
+	for (const group of [...groups.filter((g) => !isGap(g.marks[0])), ...groups.filter((g) => isGap(g.marks[0]))]) {
 		const flip = group.x > left + (right - left) * .62;
 		const spot = place(markName(group.marks[0]) + (group.marks.length > 1 ? ` (+${group.marks.length - 1})` : ""), group.x + 4, group.x - 4, flip ? "end" : "start", true);
 		if (spot) placed.set(group, spot);
@@ -676,7 +709,7 @@ function drawMarks(marks, px, top, bottom, left, right, format, labelTop = top,
 	const rowY = (row) => labelTop + 12 + row * 14;
 	let out = groups.map((group) => {
 		const { x, marks: members } = group, mark = members[0];
-		const stem = MARK_HEADS[mark.kind] !== void 0 && mark.kind !== "ruling";
+		const stem = MARK_HEADS[mark.kind] !== void 0 && mark.kind !== "ruling" || isGap(mark);
 		let glyph = line(x, Math.min(top, labelTop), x, stem ? top + 4 : bottom, `tgc-mark tgc-mark-${mark.kind}`);
 		if (mark.kind === "died") glyph += line(x - 4, bottom - 8, x + 4, bottom, "tgc-mark tgc-mark-died") + line(x - 4, bottom, x + 4, bottom - 8, "tgc-mark tgc-mark-died");
 		glyph += markHead(mark.kind, x, top + 4);
@@ -733,20 +766,42 @@ function eventsTable(marks, bands, axisLabel, format) {
 }
 const EVENTS_READ = "Vertical rules mark recorded events (solid: pass, dashed: deadline, cross: died, dotted: other; a diamond is a release, a triangle a steer, a square a ruling and a circle a wake, coloured by verdict when one is recorded); tinted spans are recorded periods, a wall-topped span is a system-wide block, and hatched spans have no data.";
 //#endregion
-//#region src/timeline.ts
+//#region src/outcomes.ts
 /**
-* Lanes of recorded spans on one time axis, with recorded marks; an open span runs to the supplied `now`. Lanes can
-* form a tree (`parent`), carry attempt ticks coloured by outcome with ok and failed counts, and fold by subtree.
+* Outcomes in stack order. Adjacent outcomes pass the colour-vision checks in both themes in this order, so a stacked
+* bar keeps it; `aborted` and `other` share the neutral tone and always carry a label. An attempt still running is
+* `open` and is drawn hatched, never as an outcome.
 */
-const TICK_OUTCOMES = [
+const OUTCOME_ORDER = [
 	"ok",
 	"quota",
+	"lost",
 	"rate-limit",
 	"oom",
 	"refused",
 	"aborted",
 	"other"
 ];
+/** The CSS colour of each outcome, for a caller that paints its own marks (a legend, a stacked bar). */
+const OUTCOME_COLORS = Object.freeze(Object.fromEntries(OUTCOME_ORDER.map((outcome) => [outcome, `var(--chart-outcome-${outcome === "aborted" || outcome === "other" ? "neutral" : outcome})`])));
+/** How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. */
+const CHECKER_HUES = 4;
+/** The CSS colour of checker `index` (0 is current). Indexes past the fourth hue fold into the muted tone. */
+function checkerColor(index) {
+	return Number.isInteger(index) && index >= 0 && index < 4 ? `var(--chart-checker-${index})` : "var(--chart-muted)";
+}
+/** The class a figure puts on a series drawn in checker `index`'s colour. */
+function checkerClass(index) {
+	if (index === void 0) return "";
+	return Number.isInteger(index) && index >= 0 && index < 4 ? `tgc-checker-${index}` : "tgc-checker-other";
+}
+//#endregion
+//#region src/timeline.ts
+/**
+* Lanes of recorded spans on one time axis, with recorded marks; an open span runs to the supplied `now`. Lanes can
+* form a tree (`parent`), carry attempt ticks coloured by outcome with ok and failed counts, and fold by subtree.
+*/
+const TICK_OUTCOMES = OUTCOME_ORDER;
 const utcClock = (ms) => new Date(ms).toISOString().slice(11, 16);
 const MIN = 6e4;
 const DAY = 864e5;
@@ -955,10 +1010,10 @@ function timeline(lanes, o) {
 			after,
 			window: [t0, t1]
 		});
-		const top = 8 + (labelRows ? labelRows * 14 + 6 : 0);
+		const top = 8 + (labelRows ? labelRows * 14 + 6 : 0) + groupRowHeight(bands);
 		const rowH = phone ? 40 : 24, bottom = top + rows.length * rowH;
 		const barTop = (y) => y + (phone ? 19 : 5), barH = 14;
-		let body = drawBands(bands, px, top, bottom, fmt, [t0, t1]);
+		let body = drawBands(bands, px, top, bottom, fmt, [t0, t1]) + drawGroups(bands, (from, to) => [px(from), px(to)], top, bottom, left, right, fmt, [t0, t1]);
 		for (const t of axisTicks(t0, t1, px, left, right, axisLabel)) body += line(px(t), top, px(t), bottom, "tgc-gridline") + text(px(t), bottom + 16, axisLabel(t), {
 			size: 11,
 			cls: "tgc-ink-muted tgc-num",
@@ -1127,4 +1182,4 @@ function axisTicks(t0, t1, px, left, right, label) {
 	return fit([t0, t1]) ? [t0, t1] : [t0];
 }
 //#endregion
-export { usdTick as A, rect as B, rateDataGap as C, tierSummary as D, tierAtLeast as E, hatchPath as F, esc as G, text as H, hbar as I, plural as J, fitLines as K, line as L, MARKER_SHAPES as M, circle as N, tierTotal as O, hatch as P, markerPath as R, pts as S, rateOrder as T, titled as U, svgRoot as V, capitalize as W, textWidth as X, textBlock as Y, wrap as Z, intervalGap as _, drawMarks as a, pct as b, markLabelRows as c, METHOD_NAME as d, TIERS_BEST_FIRST as f, estimateNote as g, duration as h, drawBands as i, table as j, usd as k, markName as l, drawable as m, EVENTS_READ as n, eventsGap as o, costText as p, listJoin as q, MARK_HEADS as r, eventsTable as s, timeline as t, isRefusal as u, intervalName as v, rateIntervalGap as w, perPass as x, kn as y, polyline as z };
+export { esc as $, pts as A, MARKER_SHAPES as B, duration as C, kn as D, intervalName as E, tierSummary as F, line as G, hatch as H, tierTotal as I, rect as J, markerPath as K, usd as L, rateIntervalGap as M, rateOrder as N, pct as O, tierAtLeast as P, capitalize as Q, usdTick as R, drawable as S, intervalGap as T, hatchPath as U, circle as V, hbar as W, text as X, svgRoot as Y, titled as Z, markName as _, checkerClass as a, wrap as at, TIERS_BEST_FIRST as b, MARK_HEADS as c, drawGroups as d, fitLines as et, drawMarks as f, markLabelRows as g, groupRowHeight as h, OUTCOME_ORDER as i, textWidth as it, rateDataGap as j, perPass as k, MARK_VERDICTS as l, eventsTable as m, CHECKER_HUES as n, plural as nt, checkerColor as o, eventsGap as p, polyline as q, OUTCOME_COLORS as r, textBlock as rt, EVENTS_READ as s, timeline as t, listJoin as tt, drawBands as u, isRefusal as v, estimateNote as w, costText as x, METHOD_NAME as y, table as z };

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

@@ -132,6 +132,31 @@ interface Refusal {
 }
 declare function isRefusal(value: Figure | Refusal): value is Refusal;
 //#endregion
+//#region src/axis.d.ts
+/** One column of an ordinal x axis. Points sit at a category's `at`; `weight` scales its width (default 1). */
+interface XCategory {
+  at: number;
+  label: string;
+  weight?: number;
+}
+/** A recorded goal on the y axis, such as a paper's bar: a band from `from` to `to`, or a line when they are equal. */
+interface YTarget {
+  from: number;
+  to: number;
+  label: string;
+  kind: "target" | "stretch";
+}
+/** A caller-named gridline, such as a check stage. */
+interface YTick {
+  at: number;
+  label: string;
+}
+type YScale = "linear" | "log";
+//#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/events.d.ts
 /**
  * `pass` is solid, `deadline` dashed, `died` ends in a cross and `event` is dotted. `release`, `steer`, `ruling` and
@@ -150,8 +175,12 @@ interface ChartMark {
   /** `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. `blocked` is a system-wide wall, such as a quota window. */
-type BandKind = "after-pass" | "idle" | "missing" | "blocked";
+/**
+ * `missing` is hatched: a span with no data is never drawn as zero. `blocked` is a system-wide wall, such as a quota
+ * window. `group` labels a run of positions in a header row above the data, such as one run's release tags, with a
+ * rule at each edge; a group may cover a single position (`from` equal to `to`).
+ */
+type BandKind = "after-pass" | "idle" | "missing" | "blocked" | "group";
 interface ChartBand {
   from: number;
   to: number;
@@ -159,6 +188,54 @@ interface ChartBand {
   kind: BandKind;
 }
 //#endregion
+//#region src/points.d.ts
+/** A status glyph beside a mark: `check` for a solve, `cross` for a failing candidate. */
+type PointGlyph = "check" | "cross";
+interface PointFields {
+  /**
+   * A recorded verdict: `pass` draws a filled mark (solved, contract held), `fail` an outline (not solved, contract
+   * failed), `unknown` a dashed outline (undecided). A verdict with a null value is drawn in the strip under the plot.
+   */
+  verdict?: MarkVerdict;
+  /** How many recorded rows this mark stands for. Above 1 it carries a `×n` badge. */
+  count?: number;
+  /** Epoch milliseconds of the first and last recorded row, shown on hover and in the table. */
+  firstAt?: number;
+  lastAt?: number;
+  /** Whether the value can be compared with the goal: false is an outline with `*`, null (unknown) an outline with `?`. */
+  comparable?: boolean | null;
+  glyph?: PointGlyph;
+  /** This mark's shape, such as a diamond for a gate among circles for checks. Default: the series' shape. */
+  marker?: MarkerShape;
+  /** A short direct label beside the mark, such as `9/15`. */
+  label?: string;
+}
+//#endregion
+//#region src/outcomes.d.ts
+/**
+ * The fixed palettes every Discovery view shares: attempt outcomes (stack order) and check versions (checkers).
+ * The colours live once, as `--chart-outcome-*` and `--chart-checker-*` custom properties in `figure.css`, each a
+ * `light-dark()` pair chosen by the page's `color-scheme`. `node scripts/palette-check.mjs <validate_palette.js>`
+ * runs both palettes through the dataviz validator on the light surface and on #161616.
+ */
+/**
+ * How one recorded attempt ended. `ok` succeeded; every other outcome counts as failed. `lost` is a turn the
+ * platform lost without a kill (a sandbox that vanished), distinct from `oom`, a turn killed for memory.
+ */
+type TickOutcome = "ok" | "quota" | "lost" | "rate-limit" | "oom" | "refused" | "aborted" | "other";
+/**
+ * Outcomes in stack order. Adjacent outcomes pass the colour-vision checks in both themes in this order, so a stacked
+ * bar keeps it; `aborted` and `other` share the neutral tone and always carry a label. An attempt still running is
+ * `open` and is drawn hatched, never as an outcome.
+ */
+declare const OUTCOME_ORDER: readonly TickOutcome[];
+/** The CSS colour of each outcome, for a caller that paints its own marks (a legend, a stacked bar). */
+declare const OUTCOME_COLORS: Readonly<Record<TickOutcome, string>>;
+/** How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. */
+declare const CHECKER_HUES = 4;
+/** The CSS colour of checker `index` (0 is current). Indexes past the fourth hue fold into the muted tone. */
+declare function checkerColor(index: number): string;
+//#endregion
 //#region src/timeline.d.ts
 /** Epoch milliseconds. `end: null` is an open span; it needs the figure's `now`. */
 interface TimelineSpan {
@@ -167,8 +244,6 @@ 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;
@@ -215,4 +290,4 @@ interface TimelineOptions {
 }
 declare function timeline(lanes: TimelineLane[], o: TimelineOptions): Figure | Refusal;
 //#endregion
-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 };
+export { IntervalMethod as A, BreakdownInput as C, Exclusion as D, Estimate as E, Tier as F, TierCounts as I, isRefusal as L, RateRow as M, Refusal as N, Figure as O, Setup as P, YTick as S, CostBasis as T, MarkVerdict as _, timeline as a, YScale as b, OUTCOME_ORDER as c, PointFields as d, PointGlyph as f, MarkKind as g, ChartMark as h, TimelineTick as i, MatrixCell as j, Interval as k, TickOutcome as l, ChartBand as m, TimelineOptions as n, CHECKER_HUES as o, BandKind as p, TimelineSpan as r, OUTCOME_COLORS as s, TimelineLane as t, checkerColor as u, MarkerShape as v, ComparisonRow as w, YTarget as x, XCategory as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",