@tangle-network/charts 0.12.2 → 0.14.0

package/dist/react/index.d.ts

@@ -220,11 +220,29 @@ export declare function Meter({ used, total, format, tone, text, segments, untra
   segments?: MeterSegment[];
   untraced?: string;
 }): import("react").JSX.Element;
-/** A small line of one series for a row in a list (one hue; the row's label carries identity). */
-export declare function Spark({ points, max, color }: {
+/** A small line of one series for a row in a list (one hue; the row's label carries identity). `max` sets the top of
+ * the scale (any positive value; the default 1 suits shares). With `label`, the line is an image with that name and
+ * hovering it reads the nearest point through `format` and `time`. */
+export declare function Spark({ points, max, color, label, format, time }: {
   points: [number, number][];
   max?: number;
   color?: string;
+  label?: string;
+  format?: (v: number) => string;
+  time?: (t: number) => string;
+}): import("react").JSX.Element;
+/** Recorded instants on one time axis, such as process restarts or deploys: a tick per event in `[from, to]`, with
+ * `ticks` evenly spaced axis labels under it. Hovering a tick names its time through `time`. The strip keeps its type
+ * size at any width, and `label` names it for assistive tech. */
+export declare function Events({ at, from, to, label, color, ticks, axis, time }: {
+  at: number[];
+  from: number;
+  to: number;
+  label: string;
+  color?: string;
+  ticks?: number;
+  axis?: (t: number) => string;
+  time?: (t: number) => string;
 }): import("react").JSX.Element;
 /** One bar per row on a shared time axis (who worked when): each row's bar spans its start to its end, coloured by its
  * state; hovering a span names it, its state and its span. Times are epoch ms; `axis` labels the time axis.

package/dist/react/index.js

@@ -1449,8 +1449,11 @@ function SegmentMeter({ segments, total, format, text, untraced }) {
 		]
 	});
 }
-/** A small line of one series for a row in a list (one hue; the row's label carries identity). */
-function Spark({ points, max = 1, color = LIVE_SERIES[0] }) {
+/** A small line of one series for a row in a list (one hue; the row's label carries identity). `max` sets the top of
+* the scale (any positive value; the default 1 suits shares). With `label`, the line is an image with that name and
+* hovering it reads the nearest point through `format` and `time`. */
+function Spark({ points, max = 1, color = LIVE_SERIES[0], label, format = formatCompact, time }) {
+	const [hover, setHover] = useState(null);
 	if (points.length < 2) return /* @__PURE__ */ jsx("span", {
 		className: "ov-spark-empty",
 		children: "collecting"
@@ -1459,17 +1462,106 @@ function Spark({ points, max = 1, color = LIVE_SERIES[0] }) {
 	const t1 = points.at(-1)[0];
 	const w = 160;
 	const h = 32;
-	const domain = Math.max(1, max);
-	const d = points.map((p) => `${(p[0] - t0) / Math.max(1, t1 - t0) * w},${30 - Math.min(domain, p[1]) / domain * 28}`).join(" ");
-	return /* @__PURE__ */ jsx("svg", {
+	const domain = max > 0 && Number.isFinite(max) ? max : 1;
+	const px = (t) => (t - t0) / Math.max(1, t1 - t0) * w;
+	const py = (v) => 30 - Math.min(domain, v) / domain * 28;
+	const d = points.map((p) => `${px(p[0])},${py(p[1])}`).join(" ");
+	const hovered = hover === null ? null : points[hover];
+	const reading = hovered ? `${time ? `${time(hovered[0])} · ` : ""}${format(hovered[1])}` : null;
+	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: `0 0 ${w} ${h}`,
 		className: "ov-spark",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("polyline", {
-			fill: "none",
-			stroke: color,
-			strokeWidth: 1.6,
-			points: d
+		role: label ? "img" : void 0,
+		"aria-label": label,
+		"aria-hidden": label ? void 0 : true,
+		onMouseLeave: label ? () => setHover(null) : void 0,
+		onMouseMove: label ? (event) => {
+			const box = event.currentTarget.getBoundingClientRect();
+			const t = t0 + (event.clientX - box.left) / Math.max(1, box.width) * (t1 - t0);
+			let best = 0;
+			for (let i = 1; i < points.length; i++) if (Math.abs(points[i][0] - t) < Math.abs(points[best][0] - t)) best = i;
+			setHover(best);
+		} : void 0,
+		children: [
+			label && /* @__PURE__ */ jsx("title", { children: reading ?? label }),
+			/* @__PURE__ */ jsx("polyline", {
+				fill: "none",
+				stroke: color,
+				strokeWidth: 1.6,
+				points: d
+			}),
+			hovered && /* @__PURE__ */ jsx("circle", {
+				cx: px(hovered[0]),
+				cy: py(hovered[1]),
+				r: 3,
+				fill: color,
+				stroke: "var(--chart-live-surface, #fff)",
+				strokeWidth: 1.5
+			})
+		]
+	});
+}
+/** Recorded instants on one time axis, such as process restarts or deploys: a tick per event in `[from, to]`, with
+* `ticks` evenly spaced axis labels under it. Hovering a tick names its time through `time`. The strip keeps its type
+* size at any width, and `label` names it for assistive tech. */
+function Events({ at, from, to, label, color = LIVE_SERIES[0], ticks = 7, axis = (t) => new Date(t).toLocaleDateString(void 0, { weekday: "short" }), time = (t) => new Date(t).toLocaleString() }) {
+	const [ref, width, em] = useWidth();
+	if (!Number.isFinite(from) || !Number.isFinite(to) || to <= from) throw new RangeError("Events needs a window with to after from.");
+	const shown = at.filter((t) => Number.isFinite(t) && t >= from && t <= to).sort((a, b) => a - b);
+	const strip = Math.round(2.2 * em);
+	const height = strip + Math.round(1.5 * em);
+	const pad = 6;
+	const x = (t) => pad + (t - from) / (to - from) * Math.max(0, width - 12);
+	const steps = Math.max(1, Math.round(ticks));
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "ov-plot",
+		children: width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": `${label}: ${shown.length} in the window`,
+			children: [
+				/* @__PURE__ */ jsx("line", {
+					x1: pad,
+					x2: width - pad,
+					y1: strip / 2,
+					y2: strip / 2,
+					className: "ov-gridline"
+				}),
+				shown.map((t, i) => /* @__PURE__ */ jsxs("g", {
+					"data-event": t,
+					children: [
+						/* @__PURE__ */ jsx("title", { children: time(t) }),
+						/* @__PURE__ */ jsx("rect", {
+							x: x(t) - 6,
+							y: 0,
+							width: 12,
+							height: strip,
+							fill: "transparent"
+						}),
+						/* @__PURE__ */ jsx("line", {
+							x1: x(t),
+							x2: x(t),
+							y1: 4,
+							y2: strip - 4,
+							stroke: color,
+							strokeWidth: 2,
+							strokeLinecap: "round"
+						})
+					]
+				}, `${t}-${i}`)),
+				Array.from({ length: steps + 1 }, (_, i) => {
+					const t = from + i / steps * (to - from);
+					return /* @__PURE__ */ jsx("text", {
+						x: x(t),
+						y: height - em * .35,
+						className: "ov-axis",
+						textAnchor: i === 0 ? "start" : i === steps ? "end" : "middle",
+						children: axis(t)
+					}, i);
+				})
+			]
 		})
 	});
 }
@@ -2200,4 +2292,4 @@ function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimm
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/package.json

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