leeoniya · MatthewScott967 · Mar 1, 2022 · Mar 1, 2022 · Mar 6, 2022 · Mar 6, 2022
diff --git a/demos/event-markers.html b/demos/event-markers.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Events Markers Series</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<link rel="stylesheet" href="../dist/uPlot.min.css">
+	</head>
+	<body>
+		<script src="../dist/uPlot.iife.js"></script>
+		<script src="./eventMarkers.js"></script>
+		<script>
+			let xs = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
+			let vals = [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10];
+            let events_1 = [null,null,null,null,null,null,"Event_1 0",null,null,null,null,null,null,"Event_1 1",null,null,null,null,"Event_1 2",null,null,null,null,null,null,null,null,null,null,null];
+            let events_2 = [null,null,null,null,null,null,null,null,null,null,null,"Event_2 0",null,null,null,null,null,null,null,null,"Event_2 1",null,null,null,null,null,null,null,null,null];
+
+			let data = [
+				xs,
+				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
+				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
+                events_1,
+                events_2,
+			];
+
+			function roundIncr(x, incr) {
+				return Math.round(x/incr)*incr;
+			}
+
+			const moveTuple = [0,0];
+
+			function cursorMove(self, left, top) {
+				moveTuple[0] = roundIncr(left, 10);
+				moveTuple[1] = roundIncr(top, 10);
+				return moveTuple;
+			}
+
+			const opts = {
+				width: 1920,
+				height: 600,
+				title: "Event Markers Series Demo",
+				cursor: {
+					move: cursorMove
+				},
+				scales: {
+					x: {
+						time: false,
+					},
+				},
+				series: [
+					{},
+					{
+						stroke: "red",
+						fill: "rgba(255,0,0,0.1)",
+					},
+					{
+						stroke: "blue",
+						fill: "rgba(0,0,255,0.1)",
+					},
+					{
+                        paths: eventMarkers({showLabels: true, labelsAlign: "top"}),
+						value: (u, v) => v == null ? "--" : v,
+						auto: false,
+					    label: "Event_1 Marker",
+                        width: 2,
+						stroke: "purple",
+						fill: "rgba(245,235,255)",
+					},
+					{
+                        paths: eventMarkers({showLabels: true, labelsAlign: "bottom"}),
+						value: (u, v) => v == null ? "--" : v,
+						auto: false,
+					    label: "Event_2 Marker",
+                        width: 2,
+						stroke: "green",
+						fill: "rgba(245,255,245)",
+					},
+				],
+			};
+
+			let u = new uPlot(opts, data, document.body);
+		</script>
+	</body>
+</html>
diff --git a/demos/eventMarkers.js b/demos/eventMarkers.js
@@ -0,0 +1,112 @@
+function eventMarkers(opts) {
+	opts = opts || {};
+
+	let labels = [];
+	let textFill = "black";
+	let rectFill = "white";
+	let rectStroke = "black";
+
+	let showLabels = opts.showLabels == null ? true: opts.showLabels;
+	let labelsAlign = opts.labelsAlign == null ? "top" : opts.labelsAlign;
+
+	function drawPathLabels(u, seriesIdx) {
+		let rectPadding = 7;
+
+		let s = u.series[seriesIdx];
+
+		textFill = s._stroke == null ? textFill : s._stroke;
+		rectFill = s._fill == null ? rectFill : s._fill;
+		rectStroke = s._stroke == null ? rectStroke : s._stroke;
+
+		u.ctx.fillStyle = textFill;
+		u.ctx.textAlign = "center";
+		u.ctx.textBaseline = "center";
+
+		labels.forEach((label) => {
+			let text = u.ctx.measureText(label.text);
+
+			let textWidth = text.width;
+			let textHeight = text.actualBoundingBoxDescent + text.actualBoundingBoxAscent;
+
+			let rectWidth = textWidth + (rectPadding * 2);
+			let rectHeight = textHeight + (rectPadding * 2);
+
+			let yOffAlign = text.actualBoundingBoxAscent + rectPadding;
+
+			if (label.align == "center")
+			{
+				yOffAlign = rectHeight;
+			}
+			else if (label.align == "bottom")
+			{
+				yOffAlign = -(text.actualBoundingBoxDescent + rectPadding);
+			}
+
+			let textCenterX = label.x;
+			let textCenterY = label.y + yOffAlign;
+
+			let rectTop = textCenterX - (rectWidth / 2);
+			let rectLeft = textCenterY - (rectHeight / 2);
+
+			u.ctx.fillStyle = rectFill;
+			u.ctx.strokeStyle = rectStroke;
+
+			u.ctx.fillRect(rectTop, rectLeft, rectWidth, rectHeight);
+			u.ctx.strokeRect(rectTop, rectLeft, rectWidth, rectHeight);
+
+			u.ctx.fillStyle = textFill;
+			u.ctx.fillText(label.text, textCenterX, textCenterY);
+		});
+	}
+
+	return (u, seriesIdx, idx0, idx1) => {
+		return uPlot.orient(u, seriesIdx, (series, dataX, dataY, scaleX, scaleY, valToPosX, valToPosY, xOff, yOff, xDim, yDim) => {
+
+			labels = [];
+
+			let pxRound = series.pxRound;
+			const _paths = {stroke: new Path2D(), fill: null, text: drawPathLabels, clip: null, band: null, gaps: null, flags: uPlot.BAND_CLIP_FILL};
+			const stroke = _paths.stroke;
+
+			let yBottom = yOff + yDim;
+			let yTop = yOff;
+
+			let labelPadding = 6;
+			let yLabel = yTop + labelPadding;
+
+			if (labelsAlign == "bottom")
+			{
+				yLabel = yBottom - labelPadding;
+			}
+			else if (labelsAlign == "center")
+			{
+				yLabel = (yBottom - yTop) / 2;
+			}
+
+			for (let i = idx0; i <= idx1; i++) {
+				let yEventName = dataY[i];
+
+				if (yEventName == null) {
+					continue;
+				}
+				let x = pxRound(valToPosX(dataX[i], scaleX, xDim, xOff));
+
+				stroke.moveTo(x, yBottom);
+				stroke.lineTo(x, yTop);
+
+				if (showLabels)
+				{	
+					let labelElement = {text: dataY[i], align: labelsAlign, x: x, y: yLabel};
+					labels.push(labelElement);
+				}
+			}
+
+			_paths.gaps = null;
+			_paths.fill = null;
+			_paths.clip = null;
+			_paths.band = null;
+
+			return _paths;
+		});
+	};
+}
diff --git a/dist/uPlot.cjs.js b/dist/uPlot.cjs.js
@@ -3643,6 +3643,11 @@ function uPlot(opts, data, then) {
 						}
 					}
 
+					if (s._paths != null && s._paths.text != null)
+					{
+						s._paths.text(self, i);
+					}
+
 					if (ctxAlpha != 1)
 						ctx.globalAlpha = ctxAlpha = 1;
 

diff --git a/dist/uPlot.d.ts b/dist/uPlot.d.ts
@@ -623,6 +623,9 @@ declare namespace uPlot {
 			/** path to fill */
 			fill?: Path2D | Map<CanvasRenderingContext2D['fillStyle'], Path2D> | null;
 
+			/** fn to draw path labels */
+			text?: ((self: uPlot, seriesIdx: number) => void) | null;
+
 			/** path for clipping fill & stroke (used for gaps) */
 			clip?: Path2D | null;
 

diff --git a/dist/uPlot.esm.js b/dist/uPlot.esm.js
@@ -3641,6 +3641,11 @@ function uPlot(opts, data, then) {
 						}
 					}
 
+					if (s._paths != null && s._paths.text != null)
+					{
+						s._paths.text(self, i);
+					}
+
 					if (ctxAlpha != 1)
 						ctx.globalAlpha = ctxAlpha = 1;
 

diff --git a/dist/uPlot.iife.js b/dist/uPlot.iife.js
@@ -3644,6 +3644,11 @@ var uPlot = (function () {
 							}
 						}
 
+						if (s._paths != null && s._paths.text != null)
+						{
+							s._paths.text(self, i);
+						}
+
 						if (ctxAlpha != 1)
 							ctx.globalAlpha = ctxAlpha = 1;
 

diff --git a/dist/uPlot.iife.min.js b/dist/uPlot.iife.min.js
diff --git a/src/uPlot.js b/src/uPlot.js
@@ -1399,6 +1399,11 @@ export default function uPlot(opts, data, then) {
 						}
 					}
 
+					if (s._paths != null && s._paths.text != null)
+					{
+						s._paths.text(self, i);
+					}
+
 					if (ctxAlpha != 1)
 						ctx.globalAlpha = ctxAlpha = 1;