@tangle-network/charts 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as IntervalMethod, C as BreakdownInput, D as Exclusion, E as Estimate, F as Tier, I as TierCounts, L as isRefusal, M as RateRow, N as Refusal, O as Figure, P as Setup, S as YTick, T as CostBasis, _ as MarkVerdict, a as timeline, b as YScale, c as OUTCOME_ORDER, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, j as MatrixCell, k as Interval, l as TickOutcome, m as ChartBand, n as TimelineOptions, o as CHECKER_HUES, p as BandKind, r as TimelineSpan, s as OUTCOME_COLORS, t as TimelineLane, u as checkerColor, v as MarkerShape, w as ComparisonRow, x as YTarget, y as XCategory } from "./timeline-CNHABOS1.js";
+import { A as IntervalMethod, C as BreakdownInput, D as Exclusion, E as Estimate, F as Tier, I as TierCounts, L as isRefusal, M as RateRow, N as Refusal, O as Figure, P as Setup, S as YTick, T as CostBasis, _ as MarkVerdict, a as timeline, b as YScale, c as OUTCOME_ORDER, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, j as MatrixCell, k as Interval, l as TickOutcome, m as ChartBand, n as TimelineOptions, o as CHECKER_HUES, p as BandKind, r as TimelineSpan, s as OUTCOME_COLORS, t as TimelineLane, u as checkerColor, v as MarkerShape, w as ComparisonRow, x as YTarget, y as XCategory } from "./timeline-irTei5Fl.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
@@ -232,6 +232,10 @@ interface TimeSeriesOptions {
   bands?: ChartBand[];
   /** What each point `marker` stands for, such as `{ circle: "check", diamond: "gate" }`, named in the figure's key. */
   markers?: Partial<Record<MarkerShape, string>>;
+  /** The wide render's width in pixels, such as the measured container (at least 720, the default). */
+  width?: number;
+  /** false leaves out the series legend under the plot, for a caller that names its series itself. The verdict key stays. */
+  legend?: boolean;
   id?: string;
 }
 export declare function timeSeries(rows: TimeSeriesRow[], o: TimeSeriesOptions): Figure | Refusal;
@@ -291,6 +295,8 @@ interface SmallMultiplesOptions {
   markers?: Partial<Record<MarkerShape, string>>;
   formatX?: (value: number) => string;
   formatY?: (value: number) => string;
+  /** The wide render's width in pixels, such as the measured container (at least 720, the default). */
+  width?: number;
   id?: string;
 }
 export declare function smallMultiples(panels: MultiplePanel[], o: SmallMultiplesOptions): Figure | Refusal;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as esc, A as pts, B as MARKER_SHAPES, C as duration, D as kn, E as intervalName, F as tierSummary, G as line, H as hatch, I as tierTotal, J as rect, K as markerPath, L as usd, M as rateIntervalGap, N as rateOrder, O as pct, P as tierAtLeast, Q as capitalize, R as usdTick, S as drawable, T as intervalGap, V as circle, W as hbar, X as text, Y as svgRoot, Z as titled, a as checkerClass, at as wrap, b as TIERS_BEST_FIRST, d as drawGroups, et as fitLines, f as drawMarks, g as markLabelRows, h as groupRowHeight, i as OUTCOME_ORDER, it as textWidth, j as rateDataGap, k as perPass, l as MARK_VERDICTS, m as eventsTable, n as CHECKER_HUES, nt as plural, o as checkerColor, p as eventsGap, q as polyline, r as OUTCOME_COLORS, rt as textBlock, s as EVENTS_READ, t as timeline, tt as listJoin, u as drawBands, v as isRefusal, w as estimateNote, x as costText, y as METHOD_NAME, z as table } from "./timeline-BAwebuqb.js";
+import { $ as capitalize, A as pts, B as MARKER_SHAPES, C as duration, D as kn, E as intervalName, F as tierSummary, G as line, H as hatch, I as tierTotal, J as rect, K as markerPath, L as usd, M as rateIntervalGap, N as rateOrder, O as pct, P as tierAtLeast, Q as wideWidth, R as usdTick, S as drawable, T as intervalGap, V as circle, W as hbar, X as text, Y as svgRoot, Z as titled, a as checkerClass, at as textWidth, b as TIERS_BEST_FIRST, d as drawGroups, et as esc, f as drawMarks, g as markLabelRows, h as groupRowHeight, i as OUTCOME_ORDER, it as textBlock, j as rateDataGap, k as perPass, l as MARK_VERDICTS, m as eventsTable, n as CHECKER_HUES, nt as listJoin, o as checkerColor, ot as wrap, p as eventsGap, q as polyline, r as OUTCOME_COLORS, rt as plural, s as EVENTS_READ, t as timeline, tt as fitLines, u as drawBands, v as isRefusal, w as estimateNote, x as costText, y as METHOD_NAME, z as table } from "./timeline-ApeJgFac.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -2641,10 +2641,6 @@ function timeSeries(rows, o) {
 	const xLabel = (x) => o.formatX ? o.formatX(x) : category.get(x) ?? String(x);
 	const yLabel = (y) => scalarLabel(y, o.y.unit, o.formatY);
 	const grid = yGridlines(o.y, yLabel);
-	if (axisGutter(grid) >= 270) return {
-		id,
-		refused: "Formatted y-axis labels leave no room for the phone chart. Use a shorter formatter or unit."
-	};
 	const flat = rows.flatMap((row) => row.points.map((point) => ({
 		row,
 		point
@@ -2656,6 +2652,14 @@ function timeSeries(rows, o) {
 	const hasEvents = marks.length + bands.length > 0;
 	const groups = bands.some((band) => band.kind === "group");
 	const stripName = o.y.strip?.trim() || "no value";
+	if (axisGutter(grid) >= 270) return {
+		id,
+		refused: "Formatted y-axis labels leave no room for the phone chart. Use a shorter formatter or unit."
+	};
+	if (stripped.length && axisGutter(grid, stripName) >= 270) return {
+		id,
+		refused: "The strip name leaves no room for the phone chart. Use a shorter y.strip."
+	};
 	const valueText = (point) => point.y !== null ? yLabel(point.y) : point.verdict !== void 0 ? `${stripName} (${VERDICT_WORD[point.verdict]})` : "not measured";
 	const facts = (row, point) => [
 		row.label,
@@ -2697,7 +2701,7 @@ function timeSeries(rows, o) {
 		lede: `${measured.length} of ${flat.length} positions have a recorded value.${stripped.length ? ` ${stripped.length} recorded ${plural(stripped.length, "verdict")} without a value ${stripped.length === 1 ? "sits" : "sit"} in the strip under the plot.` : ""}`,
 		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${recorded ? " A filled mark is a pass, an outline a fail, a dashed outline undecided; * is not comparable with the goal and ? of unknown comparability; ×n counts the recorded rows a mark stands for." : ""}${stripped.length ? ` Hatched squares under the plot are verdicts recorded without a value (${stripName}).` : ""}${o.y.targets?.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${groups ? " Brackets above the plot group positions, such as one run's releases." : ""}${hasEvents ? ` ${EVENTS_READ}` : ""}`,
 		svg: {
-			wide: plot(rows, o, 720, xLabel, yLabel, grid, facts, stripName),
+			wide: plot(rows, o, wideWidth(o.width), xLabel, yLabel, grid, facts, stripName),
 			narrow: plot(rows, o, 358, xLabel, yLabel, grid, facts, stripName),
 			interactive: true
 		},
@@ -2710,14 +2714,14 @@ function timeSeries(rows, o) {
 	};
 }
 function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
-	const left = axisGutter(grid);
+	const strip = rows.some((row) => row.points.some((point) => point.y === null && point.verdict !== void 0)) ? 24 : 0;
+	const left = axisGutter(grid, strip ? stripName : void 0);
 	const right = width - 24;
 	const axis = xAxis(o.x.domain, o.x.categories, left, right);
 	const px = axis.px;
 	const labelRows = markLabelRows(o.marks ?? [], px, left, right);
 	const top = 36 + (labelRows ? labelRows * 14 + 2 : 0) + groupRowHeight(o.bands), bottom = top + 224;
 	const py = yScale(o.y.domain, o.y.scale, top, bottom);
-	const strip = rows.some((row) => row.points.some((point) => point.y === null && point.verdict !== void 0)) ? 24 : 0;
 	let marks = text(left, 18, o.y.label, { cls: "tgc-ink-muted" });
 	for (const [i, tick] of grid.entries()) marks += line(left, py(tick.at), right, py(tick.at), i === 0 && !o.y.ticks?.length ? "tgc-axis" : "tgc-gridline") + text(left - 8, py(tick.at) + 4, tick.label, {
 		anchor: "end",
@@ -2831,7 +2835,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 		marks += wrapSeries(lines);
 		points += wrapSeries(own);
 		const legendKey = `${row.label}\u0000${row.colorIndex ?? `s${seriesIndex}`}`;
-		if (legend.has(legendKey)) continue;
+		if (o.legend === false || legend.has(legendKey)) continue;
 		legend.add(legendKey);
 		const label = wrap(row.label, right - left - 32, 12, "sans", 8);
 		marks += wrapSeries(`<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + (rows.length > 1 ? `<path class="tgc-series-key" d="${markerPath(row.colorIndex !== void 0 ? "circle" : MARKER_SHAPES[ord % MARKER_SHAPES.length], left + 12, legendY - 4, 3.5)}"/>` : "")) + textBlock(label.lines, left + 32, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
@@ -2844,8 +2848,8 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 	const events = drawMarks(o.marks ?? [], px, top - groupRowHeight(o.bands), bottom, left, right, xLabel, 22);
 	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>`;
 }
-function axisGutter(ticks) {
-	return Math.max(64, ...ticks.map((tick) => Math.ceil(textWidth(tick.label, 12, "mono")) + 20));
+function axisGutter(ticks, stripName) {
+	return Math.max(64, ...ticks.map((tick) => Math.ceil(textWidth(tick.label, 12, "mono")) + 20), stripName ? Math.ceil(textWidth(stripName, 11)) + 14 : 0);
 }
 //#endregion
 //#region src/small-multiples.ts
@@ -3011,7 +3015,7 @@ function smallMultiples(panels, o) {
 		lede: `${withData.length} of ${panels.length} ${plural(panels.length, noun)} have data${ended.length ? `; ${ended.length} ended before the window closed` : ""}.`,
 		read: `Each panel is one ${noun} on ${o.shared === "both" ? "the same x and y axes" : "the same x axis; y axes differ per panel"}. Hatched panels have no data and name the reason. A vertical rule with a cross marks where a line ended.${recorded ? " A filled mark is a pass, an outline a fail; * is not comparable with the goal and ? of unknown comparability; ✓ marks a solve and ✕ a failing candidate." : ""}${targets.length ? " Shaded bands are recorded targets; dashed bands are stretch targets." : ""}${panels.some((p) => p.scale === "log") ? " Log-scale panels say so in their y labels." : ""}`,
 		svg: {
-			wide: draw(panels, o, 720, xLabel, yLabelOf, marksOf),
+			wide: draw(panels, o, wideWidth(o.width), xLabel, yLabelOf, marksOf),
 			narrow: draw(panels, o, 358, xLabel, yLabelOf, marksOf)
 		},
 		table: table(`${capitalize(o.y.label)} by ${o.x.label} and ${noun}`, [

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-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 { 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-irTei5Fl.js";
 import { ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -248,12 +248,19 @@ export declare function Gantt({ rows, lanes: laneInput, colors, axis, span, mark
 }): import("react").JSX.Element;
 //#endregion
 //#region src/react/figure-view.d.ts
+/** A figure drawn for a width: FigureView calls it with its container's measured width (at least 720 px). */
+type FigureAtWidth = (width: number) => Figure | Refusal;
 interface FigureViewProps {
-  figure: Figure | Refusal;
+  /**
+   * A figure, or a function that draws one for a width. With a function the wide render is drawn at the container's
+   * width, in 32 px steps, so its text and marks keep their set size on a wide page instead of being scaled up from 720.
+   * Memoize the function: a new function redraws the figure.
+   */
+  figure: Figure | Refusal | FigureAtWidth;
   /** `chart` (default) keeps the lede, reading and method in the disclosure; `report` also shows the finding and lede. */
   presentation?: 'chart' | 'report';
 }
-export declare function FigureView({ figure, presentation }: FigureViewProps): import("react").JSX.Element;
+export declare function FigureView({ figure: given, presentation }: FigureViewProps): import("react").JSX.Element;
 //#endregion
 //#region src/react/timeline-view.d.ts
 interface TimelineViewProps {
@@ -265,4 +272,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, 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 };
+export type { BandKind, ChartBand, ChartMark, Figure, FigureAtWidth, 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 { 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 { K as markerPath, U as hatchPath, _ as markName, c as MARK_HEADS, p as eventsGap, t as timeline, v as isRefusal } from "../timeline-ApeJgFac.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
@@ -1626,8 +1626,10 @@ function Gantt({ rows, lanes: laneInput, colors, axis, span, marks = [], now, ha
 //#region src/react/figure-view.tsx
 /** Embeds a static Figure or Refusal in React: the wide or phone render chosen by the container's width, the data
 * table in a disclosure. The SVG and table strings come from this library's figure functions, which escape input. */
-function FigureView({ figure, presentation = "chart" }) {
+function FigureView({ figure: given, presentation = "chart" }) {
 	const [ref, width] = useWidth();
+	const drawn = width >= 720 ? Math.floor(width / 32) * 32 : 720;
+	const figure = useMemo(() => typeof given === "function" ? given(drawn) : given, [given, drawn]);
 	if (isRefusal(figure)) return /* @__PURE__ */ jsx("p", {
 		className: "ov-refusal",
 		role: "note",
@@ -1698,9 +1700,10 @@ function TimelineView({ lanes, options, defaultCollapsed = [], presentation }) {
 	const [collapsed, setCollapsed] = useState(defaultCollapsed);
 	const box = useRef(null);
 	const refocus = useRef(null);
-	const figure = useMemo(() => timeline(lanes, {
+	const figure = useMemo(() => (width) => timeline(lanes, {
 		...options,
-		collapsed
+		collapsed,
+		width
 	}), [
 		lanes,
 		options,

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

@@ -300,14 +300,13 @@ function listJoin(items) {
 function capitalize(text) {
 	return text.charAt(0).toUpperCase() + text.slice(1);
 }
-//#endregion
-//#region src/svg.ts
 /**
-* SVG marks. Every mark carries a class and `figure.css` maps classes to the
-* `--chart-*` tokens, so a render holds no colour and follows the page theme.
-* Geometry stays in attributes, so an SVG shown without the stylesheet keeps
-* its layout.
+* The wide render's width for a caller-measured `width` (a figure's container): at least `WIDE`, whole pixels. A figure
+* drawn at its container's width keeps text and marks at their set size instead of being scaled up from 720 px.
 */
+function wideWidth(width) {
+	return width !== void 0 && Number.isFinite(width) && width > 720 ? Math.floor(width) : 720;
+}
 const r2 = (n) => Math.round(n * 100) / 100;
 function svgRoot(width, height, inner) {
 	const h = Math.ceil(height);
@@ -1112,7 +1111,7 @@ function timeline(lanes, o) {
 			...marks.length + bands.length ? [EVENTS_READ] : []
 		].join(" "),
 		svg: {
-			wide: draw(720),
+			wide: draw(wideWidth(o.width)),
 			narrow: draw(358),
 			...folds ? { interactive: true } : {}
 		},
@@ -1182,4 +1181,4 @@ function axisTicks(t0, t1, px, left, right, label) {
 	return fit([t0, t1]) ? [t0, t1] : [t0];
 }
 //#endregion
-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 };
+export { capitalize 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, wideWidth 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, textWidth as at, TIERS_BEST_FIRST as b, MARK_HEADS as c, drawGroups as d, esc as et, drawMarks as f, markLabelRows as g, groupRowHeight as h, OUTCOME_ORDER as i, textBlock as it, rateDataGap as j, perPass as k, MARK_VERDICTS as l, eventsTable as m, CHECKER_HUES as n, listJoin as nt, checkerColor as o, wrap as ot, eventsGap as p, polyline as q, OUTCOME_COLORS as r, plural as rt, EVENTS_READ as s, timeline as t, fitLines as tt, drawBands as u, isRefusal as v, estimateNote as w, costText as x, METHOD_NAME as y, table as z };

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

@@ -286,6 +286,8 @@ interface TimelineOptions {
    */
   collapsed?: string[];
   formatTime?: (ms: number) => string;
+  /** The wide render's width in pixels, such as the measured container (at least 720, the default). */
+  width?: number;
   id?: string;
 }
 declare function timeline(lanes: TimelineLane[], o: TimelineOptions): Figure | Refusal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.9.0",
+  "version": "0.10.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",