@tangle-network/charts 0.3.1 → 0.6.0

package/dist/figure.css

@@ -18,9 +18,9 @@
 
 .tgc-finding {
   margin: 0 0 8px;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: 650;
   color: var(--chart-ink);
 }
 
@@ -40,8 +40,8 @@
 
 .tgc-lede {
   margin: 0 0 16px;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 15px;
+  line-height: 23px;
   color: var(--text-secondary, var(--chart-ink));
 }
 
@@ -71,8 +71,8 @@
 
 .tgc-read {
   margin: 8px 0 0;
-  font-size: 12px;
-  line-height: 16px;
+  font-size: 13px;
+  line-height: 18px;
   color: var(--chart-ink-muted);
 }
 
@@ -217,7 +217,7 @@
 .tgc-whisker,
 .tgc-tick {
   stroke: var(--chart-ink);
-  stroke-width: 1.5;
+  stroke-width: 2;
   stroke-linecap: round;
 }
 .tgc-threshold {
@@ -311,7 +311,20 @@
 .tgc-tip-ink { fill: var(--chart-canvas); }
 
 .tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }
-.tgc-series-point { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 1; }
+.tgc-series-point, .tgc-series-key { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 2; }
+
+/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */
+.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }
+.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }
+.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }
+.tgc-heat-label { fill: var(--chart-ink); }
+.tgc-heat-missing { fill: var(--chart-ink-muted); }
+.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }
+.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }
+.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }
+.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }
+.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }
+.tgc-waterfall-bar { fill: var(--chart-accent); }
 .tgc-series-hit { fill: transparent; stroke: transparent; }
 .tgc-series-observation:focus-visible { outline: none; }
 .tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }
@@ -332,3 +345,26 @@
 
 .tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }
 .tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }
+
+/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */
+.tgc-mark { stroke-width: 1.5; }
+.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }
+.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }
+.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }
+.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }
+.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }
+.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }
+.tgc-band-idle { fill: var(--chart-shade); }
+/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */
+.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }
+.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }
+.tgc-span { fill: var(--chart-accent); }
+.tgc-span-muted { fill: var(--chart-muted); }
+.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
+.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }
+
+/* FigureView (React) picks the render by measured width; the wide plot fills its container. */
+.tgc-figure-view { max-width: none; margin: 0; }
+.tgc-view-plot svg { display: block; overflow: visible; }
+.tgc-view-wide svg { width: 100%; height: auto; }
+.tgc-view-narrow svg { max-width: 100%; height: auto; }

package/dist/index.d.ts

@@ -1,137 +1,4 @@
-//#region src/types.d.ts
-/**
- * Inputs and outputs of the figure functions.
- *
- * The library draws and never decides. Ranks, intervals, frontier membership,
- * estimate labels and pass counts arrive from the producer (a board record, a
- * VerticalBench report, an agent-eval lens). A figure function returns a
- * `Refusal` instead of a figure it cannot draw honestly.
- */
-/** agent-eval `SearchEstimateMethod`, the same strings: what a unit count supports. */
-type Estimate = "none" | "insufficient" | "descriptive" | "bootstrap";
-type IntervalMethod = "task-cluster-bootstrap" | "mcnemar-exact" | "wilson";
-/**
- * A confidence interval as the producer recorded it. `level` and `method` are
- * nullable because real records omit them; a figure refuses to draw an
- * interval that does not name both.
- */
-interface Interval {
-  lower: number;
-  upper: number;
-  level: number | null;
-  method: IntervalMethod | null;
-}
-/** The App Grade ladder, lowest first. U (unable to measure) is not on it. */
-type Tier = "F" | "C" | "B" | "A" | "S";
-type TierCounts = Record<Tier, number>;
-/** Where a cost comes from. Only `receipts` is billed spend. */
-type CostBasis = "receipts" | "estimated" | "unknown";
-/** A column or row identity: an AgentProfile, a model, a judge, a search node. */
-interface Setup {
-  id: string;
-  label: string;
-  /** Null when the order is a sort, not a ranking backed by comparisons. */
-  rank: number | null;
-}
-/** One setup's rate. Field names follow the board record's `BoardProfile`. */
-interface RateRow extends Setup {
-  solved: number;
-  attempts: number;
-  rate: number;
-  /** The producer's label for what `attempts` supports; the library holds no threshold. */
-  estimate: Estimate;
-  interval: Interval | null;
-  tiers: TierCounts | null;
-  cost: {
-    perSolvedUsd: number | null;
-    basis: CostBasis;
-    receipts: number | null;
-  };
-  medianWallMs: number | null;
-  /** Null when the producer computed no frontier. */
-  onFront: boolean | null;
-}
-/** One task × setup cell. */
-interface MatrixCell {
-  task: string;
-  setup: string;
-  /** Attempts that count; null when the cell never ran. */
-  attempts: number | null;
-  /** Attempts that passed; null when no pass rule applies. */
-  solved: number | null;
-  /** Attempts graded on the App Grade ladder. */
-  tiers: TierCounts | null;
-  /** Attempts graded U: no floor check failed, but one could not be observed. */
-  unmeasured?: number;
-  /** Attempts whose grade failed an integrity check and awaits human review. */
-  flagged?: number;
-  /** A lens cell's mean score; null when the setup never scored the task. */
-  mean: number | null;
-  costUsd: number | null;
-}
-interface ComparisonRow {
-  /** Setup ids. */
-  favored: string;
-  other: string;
-  pairs: number | null;
-  minimumEffect: number | null;
-  /** The clustered interval on the difference, in the measure's units. */
-  interval: Interval | null;
-  /** The exact interval, drawn under the clustered one when present. */
-  exactInterval: Interval | null;
-}
-interface BreakdownInput {
-  reasons: string[];
-  setups: Array<{
-    id: string;
-    label: string;
-    n: number | null;
-  }>;
-  counts: Array<{
-    reason: string;
-    setup: string;
-    count: number | null;
-  }>;
-  excluded: {
-    count: number;
-    why: string;
-  } | null;
-  /** True when one attempt can count under several reasons. */
-  overlapping?: boolean;
-}
-/** Attempts left out of a figure, stated in its note. */
-interface Exclusion {
-  count: number;
-  why: string;
-}
-interface Figure {
-  id: string;
-  /** Generated from the input; no function accepts heading text. */
-  finding: string;
-  /** One quantified sentence. */
-  lede: string;
-  /** How to read the marks. */
-  read: string;
-  /** Wide and phone renders; vertical columns retain a readable minimum width. Null means the phone view uses the table. */
-  svg: {
-    wide: string;
-    narrow: string | null;
-    interactive?: boolean;
-  };
-  /** An HTML table with every number the plot shows. */
-  table: string;
-  note: {
-    method: string;
-    n: string;
-    exclusions: string[];
-  };
-}
-interface Refusal {
-  id: string;
-  refused: string;
-}
-export declare function isRefusal(value: Figure | Refusal): value is Refusal;
-//#endregion
+import { C as isRefusal, S as TierCounts, _ as MatrixCell, a as BandKind, b as Setup, c as MarkKind, d as CostBasis, f as Estimate, g as IntervalMethod, h as Interval, i as timeline, l as BreakdownInput, m as Figure, n as TimelineOptions, o as ChartBand, p as Exclusion, r as TimelineSpan, s as ChartMark, t as TimelineLane, u as ComparisonRow, v as RateRow, x as Tier, y as Refusal } from "./timeline-BAjzF-wL.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
@@ -151,6 +18,62 @@ interface BreakdownOptions {
 }
 export declare function breakdown(input: BreakdownInput, o: BreakdownOptions): Figure | Refusal;
 //#endregion
+//#region src/heatmap.d.ts
+type HeatmapStatus = "pass" | "breach" | "no-data";
+interface HeatmapCell {
+  status: HeatmapStatus;
+  value: number | null;
+}
+interface HeatmapRow {
+  id: string;
+  label: string;
+  cells: HeatmapCell[];
+}
+interface HeatmapColumn {
+  id: string;
+  label: string;
+}
+interface HeatmapOptions {
+  measure: string;
+  unit: string;
+  formatValue?: (value: number) => string;
+  /** Explain what the producer's pass and breach states mean. */
+  statusRule: string;
+  id?: string;
+}
+export declare function heatmap(columns: HeatmapColumn[], rows: HeatmapRow[], o: HeatmapOptions): Figure | Refusal;
+//#endregion
+//#region src/latency-range.d.ts
+interface LatencyRangeRow {
+  id: string;
+  label: string;
+  p50Ms: number;
+  p95Ms: number;
+  n: number;
+}
+interface LatencyRangeOptions {
+  measure: string;
+  sloMs: number;
+  minN: number;
+  excluded?: string[];
+  id?: string;
+}
+export declare function latencyRange(rows: LatencyRangeRow[], o: LatencyRangeOptions): Figure | Refusal;
+//#endregion
+//#region src/phase-waterfall.d.ts
+interface WaterfallPhase {
+  id: string;
+  label: string;
+  ms: number;
+  kind?: "measured" | "unaccounted";
+}
+interface PhaseWaterfallOptions {
+  measure: string;
+  totalMs: number;
+  id?: string;
+}
+export declare function phaseWaterfall(phases: WaterfallPhase[], o: PhaseWaterfallOptions): Figure | Refusal;
+//#endregion
 //#region src/comparison-intervals.d.ts
 interface ComparisonIntervalsOptions {
   /** The measure the difference is in, lower case: "solve rate". */
@@ -287,8 +210,54 @@ interface TimeSeriesOptions {
   };
   formatX?: (value: number) => string;
   formatY?: (value: number) => string;
+  /** Recorded vertical events on the x axis, such as the first pass, a deadline or a death. Listed in the table. */
+  marks?: ChartMark[];
+  /** Recorded shaded spans on the x axis, such as time after the first pass or idle time; `missing` is hatched. */
+  bands?: ChartBand[];
   id?: string;
 }
 export declare function timeSeries(rows: TimeSeriesRow[], o: TimeSeriesOptions): Figure | Refusal;
 //#endregion
-export type { BreakdownInput, BreakdownOptions, ComparisonIntervalsOptions, ComparisonRow, CostBasis, CostFrontierOptions, Estimate, Exclusion, Figure, Interval, IntervalMethod, MatrixCell, MetricBarsOptions, MetricRow, Observations, RankedRatesOptions, RateIdentity, RateRow, Refusal, RenderFigureOptions, Setup, TaskMatrixOptions, Tier, TierCounts, TimePoint, TimeSeriesOptions, TimeSeriesRow };
+//#region src/small-multiples.d.ts
+interface MultiplePanel {
+  id: string;
+  label: string;
+  /** The panel's recorded unit. Every panel must match the figure's y unit. */
+  unit?: string;
+  /** The panel's own y domain; required when only the x axis is shared. */
+  domain?: [number, number];
+  points?: TimePoint[];
+  /** The arm produced no data. The panel is hatched and names the reason. */
+  missing?: {
+    why: string;
+    detail?: string;
+  };
+  /** The arm stopped before the window closed, for example `{ at, kind: "died" }`. */
+  end?: {
+    at: number;
+    kind: MarkKind;
+    label?: string;
+  };
+  marks?: ChartMark[];
+}
+interface SmallMultiplesOptions {
+  x: {
+    label: string;
+    domain: [number, number];
+  };
+  y: {
+    label: string;
+    unit: string;
+    domain: [number, number];
+  };
+  /** `both`: every panel on one x and y domain. `x`: one x domain; each panel supplies its own y domain. */
+  shared: "both" | "x";
+  /** What one panel is, for the lede: "3 of 4 arms have data". Default: panel. */
+  noun?: string;
+  formatX?: (value: number) => string;
+  formatY?: (value: number) => string;
+  id?: string;
+}
+export declare function smallMultiples(panels: MultiplePanel[], o: SmallMultiplesOptions): Figure | Refusal;
+//#endregion
+export { type BandKind, type BreakdownInput, type BreakdownOptions, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, type Observations, type PhaseWaterfallOptions, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type WaterfallPhase, isRefusal, timeline };