@tangle-network/charts 0.12.1 → 0.13.0

package/dist/react/index.d.ts

@@ -220,11 +220,16 @@ 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;
 /** 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

@@ -1237,7 +1237,7 @@ function Lines({ series, format = formatCompact, rows = 13, axis, marks = [], ba
 			hover !== null && /* @__PURE__ */ jsx(Tooltip, { tip: {
 				x: Math.min(x(hover) + 10, width - em * 14),
 				y: 8,
-				title: day(hover),
+				title: axis ? axis(hover) : day(hover),
 				lines: series.filter((s) => s.points.length).map((s) => {
 					const p = nearest(s.points, hover);
 					return {
@@ -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,18 +1462,43 @@ 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
+			})
+		]
 	});
 }
 /** 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

package/package.json

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