@tangle-network/charts 0.11.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/figure.css +26 -11
- package/dist/index.d.ts +2 -2
- package/dist/index.js +6 -6
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +51 -18
- package/dist/{timeline-irTei5Fl.d.ts → timeline-BvVxPTGp.d.ts} +16 -4
- package/dist/{timeline-ApeJgFac.js → timeline-CVXBpZzt.js} +24 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -244,7 +244,7 @@ const climb = timeSeries(rows, {
|
|
|
244
244
|
|
|
245
245
|
The bar panels share the climb's columns: `smallMultiples(panels, { shared: "x", x: { label, domain, categories }, columns: 2, connect: false, markers })`, each panel with its own `unit`, `format`, `scale: "log"`, `domain` and `targets`. `docs/fixtures/magnetar-play.json` holds the Magnetar play's real 17c, 18b and 19b rows in these shapes (`docs/fixtures/export-magnetar-play.mjs` exports them on the Lab host), and `src/run-page-figures.test.ts` draws them.
|
|
246
246
|
|
|
247
|
-
Attempt outcomes and
|
|
247
|
+
Attempt outcomes, checkers and run endings have one palette in every view. Green, red and amber are status colours and mean one thing everywhere: an `ok` attempt and a solved run are green, a run that died is red, a stalled run and a rate-limited attempt are amber. `OUTCOME_ORDER` is the stack order (ok, quota, lost, rate-limit, oom, refused, aborted, other; an open attempt is hatched, never an outcome); `OUTCOME_COLORS[outcome]`, `checkerColor(index)` and `ENDING_COLORS[ending]` return the `var(--chart-outcome-*)`, `var(--chart-checker-*)` and `var(--chart-ending-*)` tokens `figure.css` defines as `light-dark()` pairs, so they follow the page's `color-scheme`. Aborted and other are two distinct greys and always carry a label. Checker hues (blue for the current checker, then magenta, cyan and violet) avoid the status colours, so a checker's colour never reads as a verdict; a failing verdict without a value is a neutral ring in the strip. `ENDING_ORDER` is solved, not solved, died, stalled, cancelled, live, never started. `node scripts/palette-check.mjs <dataviz validate_palette.js>` checks both palettes, adjacent pairs in order, on the light surface and on #161616.
|
|
248
248
|
|
|
249
249
|
| Play page figure | 1440 light | 390 dark |
|
|
250
250
|
|---|---|---|
|
package/dist/figure.css
CHANGED
|
@@ -395,7 +395,8 @@
|
|
|
395
395
|
.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }
|
|
396
396
|
.tgc-tick-oom { stroke: var(--chart-outcome-oom); }
|
|
397
397
|
.tgc-tick-refused { stroke: var(--chart-outcome-refused); }
|
|
398
|
-
.tgc-tick-aborted
|
|
398
|
+
.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }
|
|
399
|
+
.tgc-tick-other { stroke: var(--chart-outcome-other); }
|
|
399
400
|
/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */
|
|
400
401
|
.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }
|
|
401
402
|
.tgc-count { fill: var(--chart-ink); }
|
|
@@ -409,24 +410,36 @@
|
|
|
409
410
|
.tgc-view-narrow svg { max-width: 100%; height: auto; }
|
|
410
411
|
|
|
411
412
|
/*
|
|
412
|
-
* One fixed palette
|
|
413
|
-
*
|
|
414
|
-
*
|
|
415
|
-
* as adjacent
|
|
416
|
-
*
|
|
413
|
+
* One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's
|
|
414
|
+
* color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that
|
|
415
|
+
* worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes
|
|
416
|
+
* pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on
|
|
417
|
+
* the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses
|
|
418
|
+
* (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their
|
|
419
|
+
* marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A
|
|
420
|
+
* page may override any of these properties; :where() keeps them at zero specificity.
|
|
417
421
|
*/
|
|
418
422
|
:where(:root) {
|
|
419
|
-
--chart-outcome-ok: light-dark(#
|
|
423
|
+
--chart-outcome-ok: light-dark(#1baf7a, #199e70);
|
|
420
424
|
--chart-outcome-quota: light-dark(#eb6834, #d95926);
|
|
421
|
-
--chart-outcome-lost: light-dark(#
|
|
425
|
+
--chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);
|
|
422
426
|
--chart-outcome-rate-limit: light-dark(#eda100, #c98500);
|
|
423
427
|
--chart-outcome-oom: light-dark(#e87ba4, #d55181);
|
|
424
428
|
--chart-outcome-refused: light-dark(#6250d6, #9085e9);
|
|
425
429
|
--chart-outcome-neutral: #898781;
|
|
430
|
+
--chart-outcome-other: #b5b3ac;
|
|
426
431
|
--chart-checker-0: light-dark(#2a78d6, #3987e5);
|
|
427
|
-
--chart-checker-1: light-dark(#
|
|
428
|
-
--chart-checker-2: light-dark(#
|
|
429
|
-
--chart-checker-3: light-dark(#
|
|
432
|
+
--chart-checker-1: light-dark(#b8478f, #c2408f);
|
|
433
|
+
--chart-checker-2: light-dark(#0f9fb8, #1a9cb3);
|
|
434
|
+
--chart-checker-3: light-dark(#6250d6, #8c7ce6);
|
|
435
|
+
/* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */
|
|
436
|
+
--chart-ending-solved: var(--chart-outcome-ok);
|
|
437
|
+
--chart-ending-died: light-dark(#d03b3b, #e05252);
|
|
438
|
+
--chart-ending-stalled: var(--chart-outcome-rate-limit);
|
|
439
|
+
--chart-ending-live: var(--chart-checker-0);
|
|
440
|
+
--chart-ending-not-solved: light-dark(#6b7a90, #8494ab);
|
|
441
|
+
--chart-ending-cancelled: var(--chart-outcome-neutral);
|
|
442
|
+
--chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);
|
|
430
443
|
}
|
|
431
444
|
/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */
|
|
432
445
|
.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }
|
|
@@ -438,6 +451,8 @@
|
|
|
438
451
|
.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }
|
|
439
452
|
.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }
|
|
440
453
|
.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }
|
|
454
|
+
/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */
|
|
455
|
+
.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }
|
|
441
456
|
.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }
|
|
442
457
|
.tgc-strip-observation:focus-visible { outline: none; }
|
|
443
458
|
.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as
|
|
1
|
+
import { A as Exclusion, B as isRefusal, C as YScale, D as ComparisonRow, E as BreakdownInput, F as RateRow, I as Refusal, L as Setup, M as Interval, N as IntervalMethod, O as CostBasis, P as MatrixCell, R as Tier, S as XCategory, T as YTick, _ as ChartBand, a as timeline, b as MarkVerdict, c as ENDING_ORDER, d as RunEnding, f as TickOutcome, g as BandKind, h as PointGlyph, i as TimelineTick, j as Figure, k as Estimate, l as OUTCOME_COLORS, m as PointFields, n as TimelineOptions, o as CHECKER_HUES, p as checkerColor, r as TimelineSpan, s as ENDING_COLORS, t as TimelineLane, u as OUTCOME_ORDER, v as ChartMark, w as YTarget, x as MarkerShape, y as MarkKind, z as TierCounts } from "./timeline-BvVxPTGp.js";
|
|
2
2
|
//#region src/block.d.ts
|
|
3
3
|
interface RenderFigureOptions {
|
|
4
4
|
/** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
|
|
@@ -344,4 +344,4 @@ interface UnitDotOptions {
|
|
|
344
344
|
*/
|
|
345
345
|
export declare function unitDotLayout(groups: DotGroup[], width: number, height: number, o?: UnitDotOptions): UnitDotLayout;
|
|
346
346
|
//#endregion
|
|
347
|
-
export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, 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 MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };
|
|
347
|
+
export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, ENDING_COLORS, ENDING_ORDER, 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 MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type RunEnding, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $ as
|
|
1
|
+
import { $ as titled, A as pct, B as usdTick, C as costText, D as intervalGap, E as estimateNote, F as rateOrder, H as MARKER_SHAPES, I as tierAtLeast, J as markerPath, K as hbar, L as tierSummary, M as pts, N as rateDataGap, O as intervalName, P as rateIntervalGap, Q as text, R as tierTotal, S as TIERS_BEST_FIRST, T as duration, U as circle, V as table, W as hatch, X as rect, Y as polyline, Z as svgRoot, _ as groupRowHeight, a as OUTCOME_COLORS, at as plural, b as isRefusal, c as checkerColor, ct as wrap, d as MARK_VERDICTS, et as wideWidth, f as drawBands, g as eventsTable, h as eventsGap, i as ENDING_ORDER, it as listJoin, j as perPass, k as kn, l as EVENTS_READ, m as drawMarks, n as CHECKER_HUES, nt as esc, o as OUTCOME_ORDER, ot as textBlock, p as drawGroups, q as line, r as ENDING_COLORS, rt as fitLines, s as checkerClass, st as textWidth, t as timeline, tt as capitalize, v as markLabelRows, w as drawable, x as METHOD_NAME, z as usd } from "./timeline-CVXBpZzt.js";
|
|
2
2
|
//#region src/block.ts
|
|
3
3
|
/**
|
|
4
4
|
* The figure block: one markup for every figure on every surface.
|
|
@@ -1136,7 +1136,7 @@ function plot$1(costed, unplaced, drawLine, o) {
|
|
|
1136
1136
|
//#endregion
|
|
1137
1137
|
//#region src/css.generated.ts
|
|
1138
1138
|
/** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
|
|
1139
|
-
const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n margin: 32px 0 0;\n padding: 0;\n max-width: 720px;\n color: var(--chart-ink);\n font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n margin: 0 0 8px;\n font-size: 18px;\n line-height: 25px;\n font-weight: 650;\n color: var(--chart-ink);\n}\n\n.tgc-noteref {\n margin-left: 2px;\n font-size: 12px;\n font-weight: 400;\n color: var(--chart-ink-muted);\n text-decoration: none;\n font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n color: var(--chart-accent);\n text-decoration: underline;\n}\n\n.tgc-lede {\n margin: 0 0 16px;\n font-size: 15px;\n line-height: 23px;\n color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n display: block;\n overflow: visible;\n}\n.tgc-narrow {\n display: none;\n}\n.tgc-narrow svg {\n max-width: 100%;\n height: auto;\n}\n@container (max-width: 719.98px) {\n .tgc-wide {\n display: none;\n }\n .tgc-narrow {\n display: block;\n }\n}\n\n.tgc-read {\n margin: 8px 0 0;\n font-size: 13px;\n line-height: 18px;\n color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n margin: 8px 0 0;\n font-size: 12px;\n line-height: 16px;\n}\n.tgc-data > summary {\n cursor: pointer;\n color: var(--chart-ink-muted);\n width: fit-content;\n}\n.tgc-data > summary:hover {\n color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n margin-bottom: 8px;\n}\n\n.tgc-scroll {\n overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n outline: 2px solid var(--chart-accent);\n outline-offset: 2px;\n}\n\n.tgc-table {\n border-collapse: collapse;\n min-width: 100%;\n font-size: 12px;\n line-height: 16px;\n color: var(--chart-ink);\n /* A host page's table rules must not restyle the figure's table. */\n border: 0;\n border-radius: 0;\n background: none;\n}\n.tgc-table caption {\n text-align: left;\n padding: 0 0 8px;\n color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n padding: 6px 12px 6px 0;\n border-bottom: 1px solid var(--chart-rule);\n text-align: left;\n vertical-align: top;\n font-weight: 400;\n font-size: inherit;\n color: inherit;\n background: none;\n text-transform: none;\n letter-spacing: normal;\n}\n.tgc-table thead th {\n color: var(--chart-ink-muted);\n white-space: nowrap;\n}\n.tgc-table tbody th {\n position: sticky;\n left: 0;\n background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n display: block;\n overflow-x: auto;\n}\n\n.tgc-notes {\n margin: 16px 0 0;\n padding-left: 20px;\n font-size: 12px;\n line-height: 16px;\n color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n margin: 0 0 8px;\n padding-left: 4px;\n}\n.tgc-notes li:target {\n color: var(--chart-ink);\n}\n.tgc-backlink {\n color: var(--chart-ink-muted);\n text-decoration: none;\n}\n\n.tgc-refusals {\n margin: 8px 0 0;\n padding-left: 20px;\n font-size: 14px;\n line-height: 22px;\n color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n fill: var(--chart-accent);\n}\n.tgc-gridline {\n stroke: var(--chart-grid);\n stroke-width: 1;\n}\n.tgc-rule {\n stroke: var(--chart-rule);\n stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n stroke: var(--chart-muted);\n stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n stroke: var(--chart-ink);\n stroke-width: 2;\n stroke-linecap: round;\n}\n.tgc-threshold {\n stroke: var(--chart-ink);\n stroke-width: 1.5;\n stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n fill: none;\n stroke: var(--chart-ink);\n stroke-width: 1.5;\n stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n fill: none;\n stroke: var(--chart-muted);\n stroke-width: 1.5;\n}\n.tgc-pt-est {\n fill: none;\n stroke: var(--chart-accent);\n stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n stroke: var(--chart-muted);\n stroke-width: 1.5;\n}\n.tgc-leader {\n stroke: var(--chart-muted);\n stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n fill: var(--chart-muted);\n}\n.tgc-dashed {\n stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n .tgc-plot {\n container-type: normal;\n }\n .tgc-wide {\n display: block;\n }\n .tgc-narrow {\n display: none;\n }\n .tgc-wide svg {\n width: 100%;\n height: auto;\n }\n .tgc-figure {\n break-inside: avoid;\n }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, var(--chart-accent)); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.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; }\n.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; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted, .tgc-tick-other { stroke: var(--chart-outcome-neutral); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n\n/*\n * One fixed palette for attempt outcomes and check versions in every view (src/outcomes.ts names them). Each is a\n * light-dark() pair picked by the page's color-scheme. Outcomes pass the dataviz colour-vision checks as adjacent\n * pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on the light surface and on #161616; checkers pass\n * as adjacent series (current, then older). `scripts/palette-check.mjs` re-runs the validator. A page may override\n * any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n --chart-outcome-ok: light-dark(#2a78d6, #3987e5);\n --chart-outcome-quota: light-dark(#eb6834, #d95926);\n --chart-outcome-lost: light-dark(#1baf7a, #199e70);\n --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n --chart-outcome-neutral: #898781;\n --chart-checker-0: light-dark(#2a78d6, #3987e5);\n --chart-checker-1: light-dark(#1baf7a, #199e70);\n --chart-checker-2: light-dark(#6250d6, #9085e9);\n --chart-checker-3: light-dark(#eda100, #c98500);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\n";
|
|
1139
|
+
const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n margin: 32px 0 0;\n padding: 0;\n max-width: 720px;\n color: var(--chart-ink);\n font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n margin: 0 0 8px;\n font-size: 18px;\n line-height: 25px;\n font-weight: 650;\n color: var(--chart-ink);\n}\n\n.tgc-noteref {\n margin-left: 2px;\n font-size: 12px;\n font-weight: 400;\n color: var(--chart-ink-muted);\n text-decoration: none;\n font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n color: var(--chart-accent);\n text-decoration: underline;\n}\n\n.tgc-lede {\n margin: 0 0 16px;\n font-size: 15px;\n line-height: 23px;\n color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n display: block;\n overflow: visible;\n}\n.tgc-narrow {\n display: none;\n}\n.tgc-narrow svg {\n max-width: 100%;\n height: auto;\n}\n@container (max-width: 719.98px) {\n .tgc-wide {\n display: none;\n }\n .tgc-narrow {\n display: block;\n }\n}\n\n.tgc-read {\n margin: 8px 0 0;\n font-size: 13px;\n line-height: 18px;\n color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n margin: 8px 0 0;\n font-size: 12px;\n line-height: 16px;\n}\n.tgc-data > summary {\n cursor: pointer;\n color: var(--chart-ink-muted);\n width: fit-content;\n}\n.tgc-data > summary:hover {\n color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n margin-bottom: 8px;\n}\n\n.tgc-scroll {\n overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n outline: 2px solid var(--chart-accent);\n outline-offset: 2px;\n}\n\n.tgc-table {\n border-collapse: collapse;\n min-width: 100%;\n font-size: 12px;\n line-height: 16px;\n color: var(--chart-ink);\n /* A host page's table rules must not restyle the figure's table. */\n border: 0;\n border-radius: 0;\n background: none;\n}\n.tgc-table caption {\n text-align: left;\n padding: 0 0 8px;\n color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n padding: 6px 12px 6px 0;\n border-bottom: 1px solid var(--chart-rule);\n text-align: left;\n vertical-align: top;\n font-weight: 400;\n font-size: inherit;\n color: inherit;\n background: none;\n text-transform: none;\n letter-spacing: normal;\n}\n.tgc-table thead th {\n color: var(--chart-ink-muted);\n white-space: nowrap;\n}\n.tgc-table tbody th {\n position: sticky;\n left: 0;\n background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n display: block;\n overflow-x: auto;\n}\n\n.tgc-notes {\n margin: 16px 0 0;\n padding-left: 20px;\n font-size: 12px;\n line-height: 16px;\n color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n margin: 0 0 8px;\n padding-left: 4px;\n}\n.tgc-notes li:target {\n color: var(--chart-ink);\n}\n.tgc-backlink {\n color: var(--chart-ink-muted);\n text-decoration: none;\n}\n\n.tgc-refusals {\n margin: 8px 0 0;\n padding-left: 20px;\n font-size: 14px;\n line-height: 22px;\n color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n fill: var(--chart-accent);\n}\n.tgc-gridline {\n stroke: var(--chart-grid);\n stroke-width: 1;\n}\n.tgc-rule {\n stroke: var(--chart-rule);\n stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n stroke: var(--chart-muted);\n stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n stroke: var(--chart-ink);\n stroke-width: 2;\n stroke-linecap: round;\n}\n.tgc-threshold {\n stroke: var(--chart-ink);\n stroke-width: 1.5;\n stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n fill: none;\n stroke: var(--chart-ink);\n stroke-width: 1.5;\n stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n fill: none;\n stroke: var(--chart-muted);\n stroke-width: 1.5;\n}\n.tgc-pt-est {\n fill: none;\n stroke: var(--chart-accent);\n stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n stroke: var(--chart-muted);\n stroke-width: 1.5;\n}\n.tgc-leader {\n stroke: var(--chart-muted);\n stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n fill: var(--chart-muted);\n}\n.tgc-dashed {\n stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n .tgc-plot {\n container-type: normal;\n }\n .tgc-wide {\n display: block;\n }\n .tgc-narrow {\n display: none;\n }\n .tgc-wide svg {\n width: 100%;\n height: auto;\n }\n .tgc-figure {\n break-inside: avoid;\n }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, var(--chart-accent)); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.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; }\n.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; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }\n.tgc-tick-other { stroke: var(--chart-outcome-other); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n\n/*\n * One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's\n * color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that\n * worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes\n * pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on\n * the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses\n * (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their\n * marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A\n * page may override any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n --chart-outcome-ok: light-dark(#1baf7a, #199e70);\n --chart-outcome-quota: light-dark(#eb6834, #d95926);\n --chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);\n --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n --chart-outcome-neutral: #898781;\n --chart-outcome-other: #b5b3ac;\n --chart-checker-0: light-dark(#2a78d6, #3987e5);\n --chart-checker-1: light-dark(#b8478f, #c2408f);\n --chart-checker-2: light-dark(#0f9fb8, #1a9cb3);\n --chart-checker-3: light-dark(#6250d6, #8c7ce6);\n /* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */\n --chart-ending-solved: var(--chart-outcome-ok);\n --chart-ending-died: light-dark(#d03b3b, #e05252);\n --chart-ending-stalled: var(--chart-outcome-rate-limit);\n --chart-ending-live: var(--chart-checker-0);\n --chart-ending-not-solved: light-dark(#6b7a90, #8494ab);\n --chart-ending-cancelled: var(--chart-outcome-neutral);\n --chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */\n.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\n";
|
|
1140
1140
|
/** --chart-* resolved per theme, for documents without brand tokens: light, dark by preference or [data-theme="dark"], light in print. */
|
|
1141
1141
|
const chartTokensCss = ":root{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:#059669;--chart-breach:#ba1a1a;--chart-canvas:#ffffff;color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:#10B981;--chart-breach:#FF4D6D;--chart-canvas:#0a0a14;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:#10B981;--chart-breach:#FF4D6D;--chart-canvas:#0a0a14;color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:#059669;--chart-breach:#ba1a1a;--chart-canvas:#ffffff;color-scheme:light}}";
|
|
1142
1142
|
//#endregion
|
|
@@ -2485,7 +2485,7 @@ function pointBadge(x, y, r, p, limit) {
|
|
|
2485
2485
|
function stripMark(x, y, size, p) {
|
|
2486
2486
|
const h = size / 2;
|
|
2487
2487
|
if (p.verdict === "unknown") return `<g class="tgc-strip-mark tgc-point-undecided">${hatch(x - h, y - h, size, size, "tgc-strip-hatch")}${rect(x - h, y - h, size, size, "tgc-strip-edge")}</g>`;
|
|
2488
|
-
return rect(x - h, y - h, size, size, p.verdict === "fail" ? "tgc-series-point tgc-point-outline" : "tgc-series-point");
|
|
2488
|
+
return rect(x - h, y - h, size, size, p.verdict === "fail" ? "tgc-series-point tgc-point-outline tgc-strip-fail" : "tgc-series-point");
|
|
2489
2489
|
}
|
|
2490
2490
|
/**
|
|
2491
2491
|
* Places each mark's badge to its right, or to its left at the plot's edge, skipping any that would cover a mark or
|
|
@@ -2747,7 +2747,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
|
|
|
2747
2747
|
cls: "tgc-ink-muted"
|
|
2748
2748
|
});
|
|
2749
2749
|
marks += drawBands(o.bands ?? [], px, top, bottom, xLabel, void 0, axis.extent);
|
|
2750
|
-
|
|
2750
|
+
const groups = drawGroups(o.bands ?? [], axis.extent, top, bottom, left, right, xLabel);
|
|
2751
2751
|
if (strip) marks += text(left - 8, bottom + 16, stripName, {
|
|
2752
2752
|
anchor: "end",
|
|
2753
2753
|
cls: "tgc-ink-muted",
|
|
@@ -2846,7 +2846,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
|
|
|
2846
2846
|
legendY += key.height;
|
|
2847
2847
|
marks += key.svg;
|
|
2848
2848
|
const events = drawMarks(o.marks ?? [], px, top - groupRowHeight(o.bands), bottom, left, right, xLabel, 22);
|
|
2849
|
-
return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${events}${points}${badges}${tips}</svg>`;
|
|
2849
|
+
return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${events}${groups}${points}${badges}${tips}</svg>`;
|
|
2850
2850
|
}
|
|
2851
2851
|
function axisGutter(ticks, stripName) {
|
|
2852
2852
|
return Math.max(64, ...ticks.map((tick) => Math.ceil(textWidth(tick.label, 12, "mono")) + 20), stripName ? Math.ceil(textWidth(stripName, 11)) + 14 : 0);
|
|
@@ -3318,4 +3318,4 @@ function unitDotLayout(groups, width, height, o = {}) {
|
|
|
3318
3318
|
};
|
|
3319
3319
|
}
|
|
3320
3320
|
//#endregion
|
|
3321
|
-
export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline, unitDotLayout };
|
|
3321
|
+
export { CHECKER_HUES, ENDING_COLORS, ENDING_ORDER, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline, unitDotLayout };
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { C as YScale, I as Refusal, S as XCategory, T as YTick, _ as ChartBand, b as MarkVerdict, f as TickOutcome, g as BandKind, h as PointGlyph, i as TimelineTick, j as Figure, m as PointFields, n as TimelineOptions, r as TimelineSpan, t as TimelineLane, v as ChartMark, w as YTarget, x as MarkerShape, y as MarkKind } from "../timeline-BvVxPTGp.js";
|
|
2
2
|
import { ReactElement, ReactNode } from "react";
|
|
3
3
|
//#region src/react/sparkline.d.ts
|
|
4
4
|
type SparklineDirection = "rising" | "falling" | "flat";
|
|
@@ -77,7 +77,7 @@ interface StackedBarChartProps {
|
|
|
77
77
|
label: string;
|
|
78
78
|
series: readonly StackedBarSeries[];
|
|
79
79
|
buckets: readonly StackedBarBucket[];
|
|
80
|
-
/**
|
|
80
|
+
/** Values must lie in [0, maxValue]; the axis extends to the next round tick. Zero is valid only for zero-valued data. */
|
|
81
81
|
maxValue: number;
|
|
82
82
|
formatValue: (value: number) => string;
|
|
83
83
|
selectedBucketId: string | null;
|
package/dist/react/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { G as hatchPath, J as markerPath, b as isRefusal, h as eventsGap, t as timeline, u as MARK_HEADS, y as markName } from "../timeline-CVXBpZzt.js";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
|
|
4
4
|
//#region src/react/sparkline.tsx
|
|
@@ -217,6 +217,41 @@ function validate({ series, buckets, maxValue }) {
|
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
219
|
}
|
|
220
|
+
/**
|
|
221
|
+
* Round axis ticks covering [0, max]: three to six steps of 1, 2, 2.5 or 5
|
|
222
|
+
* times a power of ten, so labels read $0.003 rather than $0.0028. The
|
|
223
|
+
* tightest top wins, then the fewest steps, so bars keep their height.
|
|
224
|
+
*/
|
|
225
|
+
function niceTicks(max) {
|
|
226
|
+
if (!(max > 0)) return [0];
|
|
227
|
+
const magnitude = 10 ** Math.floor(Math.log10(max));
|
|
228
|
+
let best = {
|
|
229
|
+
top: Infinity,
|
|
230
|
+
step: 0,
|
|
231
|
+
count: 0
|
|
232
|
+
};
|
|
233
|
+
for (const scale of [
|
|
234
|
+
1,
|
|
235
|
+
.1,
|
|
236
|
+
.01
|
|
237
|
+
]) for (const multiple of [
|
|
238
|
+
1,
|
|
239
|
+
2,
|
|
240
|
+
2.5,
|
|
241
|
+
5
|
|
242
|
+
]) {
|
|
243
|
+
const step = multiple * magnitude * scale;
|
|
244
|
+
const count = Math.ceil(max / step - 1e-9);
|
|
245
|
+
const top = count * step;
|
|
246
|
+
if (count < 3 || count > 6) continue;
|
|
247
|
+
if (top < best.top - 1e-12 * top || Math.abs(top - best.top) <= 1e-12 * top && count < best.count) best = {
|
|
248
|
+
top,
|
|
249
|
+
step,
|
|
250
|
+
count
|
|
251
|
+
};
|
|
252
|
+
}
|
|
253
|
+
return Array.from({ length: best.count + 1 }, (_, i) => Number((i * best.step).toPrecision(12)));
|
|
254
|
+
}
|
|
220
255
|
function StackedBarChart(props) {
|
|
221
256
|
const { label, series, buckets, maxValue, formatValue, selectedBucketId, onSelectionChange, emptyLabel = "No data yet", unavailableLabel = "Not available", className } = props;
|
|
222
257
|
const readoutId = useId();
|
|
@@ -249,13 +284,16 @@ function StackedBarChart(props) {
|
|
|
249
284
|
const formatted = (value) => isValue(value) ? formatValue(value) : unavailableLabel;
|
|
250
285
|
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}` : "");
|
|
251
286
|
const activeIndex = selectedBucketId === null ? -1 : buckets.findIndex(({ id }) => id === selectedBucketId);
|
|
252
|
-
const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight =
|
|
287
|
+
const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight = 24, marginLeft = 56;
|
|
253
288
|
const chartHeight = 220;
|
|
254
289
|
const innerHeight = 176;
|
|
255
290
|
const barGap = 6;
|
|
256
|
-
const barWidth = Math.max(8, Math.min(36,
|
|
291
|
+
const barWidth = Math.max(8, Math.min(36, 640 / Math.max(1, buckets.length) - barGap));
|
|
257
292
|
const viewWidth = Math.max(buckets.length * (barWidth + barGap) + marginLeft + marginRight, 400);
|
|
258
|
-
const
|
|
293
|
+
const ticks = niceTicks(maxValue);
|
|
294
|
+
const scaleMax = ticks[ticks.length - 1];
|
|
295
|
+
const labelWidth = Math.max(0, ...buckets.map((bucket) => bucket.label.length)) * 6 + 8;
|
|
296
|
+
const labelStride = Math.max(1, Math.ceil(labelWidth / (barWidth + barGap)));
|
|
259
297
|
if (buckets.length === 0) return /* @__PURE__ */ jsxs("p", {
|
|
260
298
|
className,
|
|
261
299
|
children: [
|
|
@@ -284,16 +322,12 @@ function StackedBarChart(props) {
|
|
|
284
322
|
maxHeight: 300
|
|
285
323
|
},
|
|
286
324
|
preserveAspectRatio: "xMinYMin meet",
|
|
287
|
-
children: [
|
|
288
|
-
0
|
|
289
|
-
.25,
|
|
290
|
-
.5,
|
|
291
|
-
.75,
|
|
292
|
-
1
|
|
293
|
-
].map((fraction) => {
|
|
325
|
+
children: [ticks.map((tick) => {
|
|
326
|
+
const fraction = scaleMax > 0 ? tick / scaleMax : 0;
|
|
294
327
|
const y = 188 - fraction * innerHeight;
|
|
295
328
|
return /* @__PURE__ */ jsxs("g", {
|
|
296
329
|
"aria-hidden": "true",
|
|
330
|
+
"data-tick": "",
|
|
297
331
|
children: [/* @__PURE__ */ jsx("line", {
|
|
298
332
|
x1: marginLeft,
|
|
299
333
|
y1: y,
|
|
@@ -310,14 +344,14 @@ function StackedBarChart(props) {
|
|
|
310
344
|
fontSize: "11",
|
|
311
345
|
fill: "currentColor",
|
|
312
346
|
fontFamily: "inherit",
|
|
313
|
-
children: formatValue(
|
|
347
|
+
children: formatValue(tick)
|
|
314
348
|
})]
|
|
315
|
-
},
|
|
349
|
+
}, tick);
|
|
316
350
|
}), buckets.map((bucket, index) => {
|
|
317
351
|
const x = marginLeft + index * (barWidth + barGap) + barGap / 2;
|
|
318
352
|
const isActive = index === activeIndex;
|
|
319
353
|
const gap = hasGap(bucket);
|
|
320
|
-
const stackHeight = !gap &&
|
|
354
|
+
const stackHeight = !gap && scaleMax > 0 ? bucket.total / scaleMax * innerHeight : 0;
|
|
321
355
|
let yOffset = 0;
|
|
322
356
|
const select = () => onSelectionChange(bucket.id);
|
|
323
357
|
const clear = () => {
|
|
@@ -398,7 +432,7 @@ function StackedBarChart(props) {
|
|
|
398
432
|
rx: 3
|
|
399
433
|
}),
|
|
400
434
|
!gap && bucket.segments.map((segment, segmentIndex) => {
|
|
401
|
-
const height =
|
|
435
|
+
const height = scaleMax > 0 ? segment.value / scaleMax * innerHeight : 0;
|
|
402
436
|
const y = 188 - yOffset - height;
|
|
403
437
|
yOffset += height;
|
|
404
438
|
return /* @__PURE__ */ jsx("rect", {
|
|
@@ -434,16 +468,15 @@ function StackedBarChart(props) {
|
|
|
434
468
|
rx: 3,
|
|
435
469
|
pointerEvents: "none"
|
|
436
470
|
}),
|
|
437
|
-
/* @__PURE__ */ jsx("text", {
|
|
471
|
+
index % labelStride === 0 && /* @__PURE__ */ jsx("text", {
|
|
438
472
|
x: x + barWidth / 2,
|
|
439
473
|
y: 204,
|
|
440
|
-
textAnchor:
|
|
474
|
+
textAnchor: "middle",
|
|
441
475
|
fontSize: "10",
|
|
442
476
|
fill: "currentColor",
|
|
443
477
|
fontFamily: "inherit",
|
|
444
478
|
pointerEvents: "none",
|
|
445
479
|
"aria-hidden": "true",
|
|
446
|
-
transform: denseLabels ? `rotate(-40, ${x + barWidth / 2}, 204)` : void 0,
|
|
447
480
|
children: bucket.label
|
|
448
481
|
})
|
|
449
482
|
]
|
|
@@ -225,13 +225,25 @@ interface PointFields {
|
|
|
225
225
|
type TickOutcome = "ok" | "quota" | "lost" | "rate-limit" | "oom" | "refused" | "aborted" | "other";
|
|
226
226
|
/**
|
|
227
227
|
* Outcomes in stack order. Adjacent outcomes pass the colour-vision checks in both themes in this order, so a stacked
|
|
228
|
-
* bar keeps it; `aborted` and `other`
|
|
229
|
-
* `open` and is drawn hatched, never as an outcome.
|
|
228
|
+
* bar keeps it; `ok` is the status green, `aborted` and `other` are two distinct greys and always carry a label. An
|
|
229
|
+
* attempt still running is `open` and is drawn hatched, never as an outcome.
|
|
230
230
|
*/
|
|
231
231
|
declare const OUTCOME_ORDER: readonly TickOutcome[];
|
|
232
232
|
/** The CSS colour of each outcome, for a caller that paints its own marks (a legend, a stacked bar). */
|
|
233
233
|
declare const OUTCOME_COLORS: Readonly<Record<TickOutcome, string>>;
|
|
234
|
-
/**
|
|
234
|
+
/**
|
|
235
|
+
* How a run ended, in the order a legend lists them: `solved` (its check passed), `not solved` (it ended, its check
|
|
236
|
+
* did not pass), `died` (the platform or driver failed), `stalled`, `cancelled`, `live` and `never started`. Every
|
|
237
|
+
* view that colours runs by their ending uses these words and ENDING_COLORS, so green, red and amber mean one thing.
|
|
238
|
+
*/
|
|
239
|
+
type RunEnding = "solved" | "not solved" | "died" | "stalled" | "cancelled" | "live" | "never started";
|
|
240
|
+
declare const ENDING_ORDER: readonly RunEnding[];
|
|
241
|
+
/** The CSS colour of each run ending (`--chart-ending-*` in figure.css). */
|
|
242
|
+
declare const ENDING_COLORS: Readonly<Record<RunEnding, string>>;
|
|
243
|
+
/**
|
|
244
|
+
* How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. Checker hues
|
|
245
|
+
* (blue, magenta, cyan, violet) avoid the status green, red and amber, so a checker's colour never reads as a verdict.
|
|
246
|
+
*/
|
|
235
247
|
declare const CHECKER_HUES = 4;
|
|
236
248
|
/** The CSS colour of checker `index` (0 is current). Indexes past the fourth hue fold into the muted tone. */
|
|
237
249
|
declare function checkerColor(index: number): string;
|
|
@@ -292,4 +304,4 @@ interface TimelineOptions {
|
|
|
292
304
|
}
|
|
293
305
|
declare function timeline(lanes: TimelineLane[], o: TimelineOptions): Figure | Refusal;
|
|
294
306
|
//#endregion
|
|
295
|
-
export {
|
|
307
|
+
export { Exclusion as A, isRefusal as B, YScale as C, ComparisonRow as D, BreakdownInput as E, RateRow as F, Refusal as I, Setup as L, Interval as M, IntervalMethod as N, CostBasis as O, MatrixCell as P, Tier as R, XCategory as S, YTick as T, ChartBand as _, timeline as a, MarkVerdict as b, ENDING_ORDER as c, RunEnding as d, TickOutcome as f, BandKind as g, PointGlyph as h, TimelineTick as i, Figure as j, Estimate as k, OUTCOME_COLORS as l, PointFields as m, TimelineOptions as n, CHECKER_HUES as o, checkerColor as p, TimelineSpan as r, ENDING_COLORS as s, TimelineLane as t, OUTCOME_ORDER as u, ChartMark as v, YTarget as w, MarkerShape as x, MarkKind as y, TierCounts as z };
|
|
@@ -635,13 +635,16 @@ function drawGroups(bands, extent, top, bottom, left, right, format, clip) {
|
|
|
635
635
|
return titled(`${band.label}: ${format(band.from)} to ${format(band.to)}`, `<g data-band="group">${edges}${bracket}</g>`);
|
|
636
636
|
}).join("");
|
|
637
637
|
}
|
|
638
|
-
/**
|
|
638
|
+
/**
|
|
639
|
+
* Marks of one kind and verdict merge when under 3 px apart, or under 12 px apart with the same label (a re-checked
|
|
640
|
+
* tag). A ruling never merges: each ruling made or kept a check, so each keeps its own rule and label.
|
|
641
|
+
*/
|
|
639
642
|
function groupMarks(marks, px) {
|
|
640
643
|
const groups = [];
|
|
641
644
|
for (const mark of [...marks].sort((a, b) => a.at - b.at)) {
|
|
642
645
|
const x = px(mark.at), last = groups.at(-1), lead = last?.marks[0];
|
|
643
646
|
const near = last && px(last.marks.at(-1).at);
|
|
644
|
-
if (last && lead.kind === mark.kind && lead.verdict === mark.verdict && (x - near < 3 || x - near < 12 && markName(lead) === markName(mark))) last.marks.push(mark);
|
|
647
|
+
if (last && mark.kind !== "ruling" && lead.kind === mark.kind && lead.verdict === mark.verdict && (x - near < 3 || x - near < 12 && markName(lead) === markName(mark))) last.marks.push(mark);
|
|
645
648
|
else groups.push({
|
|
646
649
|
x,
|
|
647
650
|
marks: [mark]
|
|
@@ -768,8 +771,8 @@ const EVENTS_READ = "Vertical rules mark recorded events (solid: pass, dashed: d
|
|
|
768
771
|
//#region src/outcomes.ts
|
|
769
772
|
/**
|
|
770
773
|
* Outcomes in stack order. Adjacent outcomes pass the colour-vision checks in both themes in this order, so a stacked
|
|
771
|
-
* bar keeps it; `aborted` and `other`
|
|
772
|
-
* `open` and is drawn hatched, never as an outcome.
|
|
774
|
+
* bar keeps it; `ok` is the status green, `aborted` and `other` are two distinct greys and always carry a label. An
|
|
775
|
+
* attempt still running is `open` and is drawn hatched, never as an outcome.
|
|
773
776
|
*/
|
|
774
777
|
const OUTCOME_ORDER = [
|
|
775
778
|
"ok",
|
|
@@ -782,8 +785,22 @@ const OUTCOME_ORDER = [
|
|
|
782
785
|
"other"
|
|
783
786
|
];
|
|
784
787
|
/** The CSS colour of each outcome, for a caller that paints its own marks (a legend, a stacked bar). */
|
|
785
|
-
const OUTCOME_COLORS = Object.freeze(Object.fromEntries(OUTCOME_ORDER.map((outcome) => [outcome, `var(--chart-outcome-${outcome === "aborted"
|
|
786
|
-
|
|
788
|
+
const OUTCOME_COLORS = Object.freeze(Object.fromEntries(OUTCOME_ORDER.map((outcome) => [outcome, `var(--chart-outcome-${outcome === "aborted" ? "neutral" : outcome})`])));
|
|
789
|
+
const ENDING_ORDER = [
|
|
790
|
+
"solved",
|
|
791
|
+
"not solved",
|
|
792
|
+
"died",
|
|
793
|
+
"stalled",
|
|
794
|
+
"cancelled",
|
|
795
|
+
"live",
|
|
796
|
+
"never started"
|
|
797
|
+
];
|
|
798
|
+
/** The CSS colour of each run ending (`--chart-ending-*` in figure.css). */
|
|
799
|
+
const ENDING_COLORS = Object.freeze(Object.fromEntries(ENDING_ORDER.map((ending) => [ending, `var(--chart-ending-${ending.replace(" ", "-")})`])));
|
|
800
|
+
/**
|
|
801
|
+
* How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. Checker hues
|
|
802
|
+
* (blue, magenta, cyan, violet) avoid the status green, red and amber, so a checker's colour never reads as a verdict.
|
|
803
|
+
*/
|
|
787
804
|
const CHECKER_HUES = 4;
|
|
788
805
|
/** The CSS colour of checker `index` (0 is current). Indexes past the fourth hue fold into the muted tone. */
|
|
789
806
|
function checkerColor(index) {
|
|
@@ -1181,4 +1198,4 @@ function axisTicks(t0, t1, px, left, right, label) {
|
|
|
1181
1198
|
return fit([t0, t1]) ? [t0, t1] : [t0];
|
|
1182
1199
|
}
|
|
1183
1200
|
//#endregion
|
|
1184
|
-
export {
|
|
1201
|
+
export { titled as $, pct as A, usdTick as B, costText as C, intervalGap as D, estimateNote as E, rateOrder as F, hatchPath as G, MARKER_SHAPES as H, tierAtLeast as I, markerPath as J, hbar as K, tierSummary as L, pts as M, rateDataGap as N, intervalName as O, rateIntervalGap as P, text as Q, tierTotal as R, TIERS_BEST_FIRST as S, duration as T, circle as U, table as V, hatch as W, rect as X, polyline as Y, svgRoot as Z, groupRowHeight as _, OUTCOME_COLORS as a, plural as at, isRefusal as b, checkerColor as c, wrap as ct, MARK_VERDICTS as d, wideWidth as et, drawBands as f, eventsTable as g, eventsGap as h, ENDING_ORDER as i, listJoin as it, perPass as j, kn as k, EVENTS_READ as l, drawMarks as m, CHECKER_HUES as n, esc as nt, OUTCOME_ORDER as o, textBlock as ot, drawGroups as p, line as q, ENDING_COLORS as r, fitLines as rt, checkerClass as s, textWidth as st, timeline as t, capitalize as tt, MARK_HEADS as u, markLabelRows as v, drawable as w, METHOD_NAME as x, markName as y, usd as z };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tangle-network/charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|