@tangle-network/charts 0.13.0 → 0.14.0

package/dist/react/index.d.ts

@@ -231,6 +231,19 @@ export declare function Spark({ points, max, color, label, format, time }: {
   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.
  * `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs

package/dist/react/index.js

@@ -1501,6 +1501,70 @@ function Spark({ points, max = 1, color = LIVE_SERIES[0], label, format = format
 		]
 	});
 }
+/** 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);
+				})
+			]
+		})
+	});
+}
 /** 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.
 * `lanes` give a row several spans (the same shape as the static `timeline`); a span with `end: null` is open and runs
@@ -2228,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.13.0",
+  "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",