@tangle-network/charts 0.18.1 → 0.20.0

package/dist/{timeline-CVXBpZzt.js → timeline-B7c-cede.js}

@@ -626,10 +626,10 @@ function drawGroups(bands, extent, top, bottom, left, right, format, clip) {
 		const from = clip ? Math.max(band.from, clip[0]) : band.from, to = clip ? Math.min(band.to, clip[1]) : band.to;
 		if (to < from) return "";
 		const [x0, x1] = extent(from, to), w = x1 - x0;
-		const label = w >= 24 ? wrap(band.label, w - 10, 11, "sans", 1).lines[0] : "";
+		const label = w >= 24 ? wrap(band.label, w - 10, 12, "sans", 1).lines[0] : "";
 		const edges = [x0, x1].filter((x) => x > left + .5 && x < right - .5).map((x) => line(x, top - 16, x, bottom, "tgc-group-edge")).join("");
 		const bracket = line(x0 + 2, top - 3, x1 - 2, top - 3, "tgc-group-rule") + (label ? text(x0 + 3, top - 7, label, {
-			size: 11,
+			size: 12,
 			cls: "tgc-group-label"
 		}) : "");
 		return titled(`${band.label}: ${format(band.from)} to ${format(band.to)}`, `<g data-band="group">${edges}${bracket}</g>`);
@@ -661,7 +661,7 @@ function layoutLabels(groups, left, right, o) {
 	const taken = Array.from({ length: rows }, () => []);
 	const fits = (row, a, b) => taken[row].every(([p, q]) => b + gap <= p || a >= q + gap);
 	const place = (value, start, end, prefer, flexible) => {
-		const label = wrap(value, maxW, 11, "sans", 1).lines[0], w = textWidth(label, 11);
+		const label = wrap(value, maxW, 12, "sans", 1).lines[0], w = textWidth(label, 12);
 		for (const anchor of flexible ? [prefer, prefer === "start" ? "end" : "start"] : [prefer]) {
 			const [a, b] = anchor === "start" ? [start, start + w] : [end - w, end];
 			if (a < left - 4 || b > right + 4) continue;
@@ -721,13 +721,13 @@ function drawMarks(marks, px, top, bottom, left, right, format, labelTop = top,
 	for (const group of groups) {
 		const spot = placed.get(group);
 		if (spot) out += text(spot.x, rowY(spot.row), spot.text, {
-			size: 11,
+			size: 12,
 			anchor: spot.anchor,
 			cls: "tgc-mark-label"
 		});
 	}
 	for (const edge of edges) out += `<g data-edge="${edge.anchor === "end" ? "after" : "before"}">${text(edge.x, rowY(edge.row), edge.text, {
-		size: 11,
+		size: 12,
 		anchor: edge.anchor,
 		cls: "tgc-mark-label tgc-mark-edge"
 	})}</g>`;
@@ -1012,7 +1012,7 @@ function timeline(lanes, o) {
 	const detail = (lane) => (lane.detail ?? []).filter((fact) => typeof fact === "string" && fact.trim());
 	const spanLabel = (lane, span) => [`${lane.label}: ${span.state} ${fmt(span.start)} to ${span.end === null ? `now (${fmt(o.now)}, open)` : fmt(span.end)}, ${duration(ends(span) - span.start)}${span.note ? ` · ${span.note}` : ""}`, ...detail(lane)].join("\n");
 	const hasTicks = rows.some((row) => row.ticks !== void 0);
-	const countWidth = hasTicks ? Math.max(...rows.filter((row) => row.ticks).map((row) => textWidth(counts(row.ticks).text, 11, "mono"))) : 0;
+	const countWidth = hasTicks ? Math.max(...rows.filter((row) => row.ticks).map((row) => textWidth(counts(row.ticks).text, 12, "mono"))) : 0;
 	const draw = (width) => {
 		const phone = width === 358, indent = phone ? 10 : 12;
 		const caretX = (depth) => 4 + depth * indent;
@@ -1031,7 +1031,7 @@ function timeline(lanes, o) {
 		const barTop = (y) => y + (phone ? 19 : 5), barH = 14;
 		let body = drawBands(bands, px, top, bottom, fmt, [t0, t1]) + drawGroups(bands, (from, to) => [px(from), px(to)], top, bottom, left, right, fmt, [t0, t1]);
 		for (const t of axisTicks(t0, t1, px, left, right, axisLabel)) body += line(px(t), top, px(t), bottom, "tgc-gridline") + text(px(t), bottom + 16, axisLabel(t), {
-			size: 11,
+			size: 12,
 			cls: "tgc-ink-muted tgc-num",
 			anchor: "middle"
 		});
@@ -1048,9 +1048,9 @@ function timeline(lanes, o) {
 				body += `<path class="tgc-tree" d="M${x} ${from}V${mid}H${labelX(row.depth) - (row.children ? 13 : 3)}"/>`;
 			}
 			const countText = row.ticks ? counts(row.ticks) : void 0;
-			const room = (phone ? width - 12 - (countText ? textWidth(countText.text, 11, "mono") + 8 : 0) : left - 8) - labelX(row.depth) - textWidth(tail(row), 12);
-			const label = wrap(lane.label, Math.max(24, room), phone ? 11 : 12, "sans", 1).lines[0];
-			const name = `<text class="tgc-ink tgc-lane-label" x="${labelX(row.depth)}" y="${baseline}" font-size="${phone ? 11 : 12}">${esc(label)}${row.hidden ? `<tspan class="tgc-ink-muted">${esc(tail(row))}</tspan>` : ""}</text>`;
+			const room = (phone ? width - 12 - (countText ? textWidth(countText.text, 12, "mono") + 8 : 0) : left - 8) - labelX(row.depth) - textWidth(tail(row), 12);
+			const label = wrap(lane.label, Math.max(24, room), 12, "sans", 1).lines[0];
+			const name = `<text class="tgc-ink tgc-lane-label" x="${labelX(row.depth)}" y="${baseline}" font-size="12">${esc(label)}${row.hidden ? `<tspan class="tgc-ink-muted">${esc(tail(row))}</tspan>` : ""}</text>`;
 			const caret = row.children ? `<path class="tgc-caret" d="${row.folded ? `M${caretX(row.depth)} ${mid - 4}l6 4l-6 4z` : `M${caretX(row.depth) - 1} ${mid - 3}h8l-4 6z`}"/>` : "";
 			const facts = [
 				lane.label,
@@ -1068,7 +1068,7 @@ function timeline(lanes, o) {
 			if (row.ticks?.length) body += drawTicks(row.ticks, lane.label, px, barTop(y), barH, fmt);
 			if (countText) {
 				const x = phone ? width - 12 : width - 16;
-				body += titled(`${lane.label}: ${countText.sentence}${row.hidden ? ` across ${row.hidden + 1} lanes` : ""}`, `<text class="tgc-num tgc-count" x="${x}" y="${baseline}" font-size="11" text-anchor="end">${countText.ok}<tspan class="tgc-count-ok">✓</tspan> ${countText.failed}<tspan class="tgc-count-failed">✗</tspan></text>`);
+				body += titled(`${lane.label}: ${countText.sentence}${row.hidden ? ` across ${row.hidden + 1} lanes` : ""}`, `<text class="tgc-num tgc-count" x="${x}" y="${baseline}" font-size="12" text-anchor="end">${countText.ok}<tspan class="tgc-count-ok">✓</tspan> ${countText.failed}<tspan class="tgc-count-failed">✗</tspan></text>`);
 			}
 			body += "</g>";
 		});
@@ -1079,7 +1079,7 @@ function timeline(lanes, o) {
 			body += titled(`${markName(mark)}: ${fmt(mark.at)}${mark.verdict ? ` · ${mark.verdict}` : ""}`, `<g data-mark="${mark.kind}" data-lane-mark="${esc(mark.lane)}"${verdict}>${glyph}</g>`);
 		}
 		if (o.now !== void 0) body += line(px(o.now), top, px(o.now), bottom, "tgc-now") + text(px(o.now), bottom + 30, `now ${fmt(o.now)}`, {
-			size: 11,
+			size: 12,
 			cls: "tgc-ink tgc-num",
 			anchor: px(o.now) > (left + right) / 2 ? "end" : "start"
 		});
@@ -1184,7 +1184,7 @@ function axisTicks(t0, t1, px, left, right, label) {
 	const fit = (list) => {
 		let end = -Infinity;
 		for (const t of list) {
-			const w = textWidth(label(t), 11, "mono"), a = px(t) - w / 2, b = px(t) + w / 2;
+			const w = textWidth(label(t), 12, "mono"), a = px(t) - w / 2, b = px(t) + w / 2;
 			if (a < left - 14 || b > right + 14 || a < end + 10) return false;
 			end = b;
 		}

package/package.json

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