reduce redundant ctx.lineTo() calls when data is too dense to advance…

… x. close #15.
leeoniya · Oct 12, 2019 · 51b536c · 51b536c
1 parent 010ad6a
commit 51b536c
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 37 deletions.
diff --git a/bench/uPlot.html b/bench/uPlot.html
@@ -44,13 +44,25 @@ <h2 id="wait">Loading lib....</h2>
 					data[2][j] = round2(100 * packed[i+5] / (packed[i+5] + packed[i+6]));
 					data[3][j] = packed[i+3];
 				}
+
+			/*
+				function filter(d) {
+					return d.filter((d, i) => Math.round(i/1000) % 5 != 2);
+				}
+
+				data[0] = filter(data[0]);
+				data[1] = filter(data[1]);
+				data[2] = filter(data[2]);
+				data[3] = filter(data[3]);
+			*/
 			/*
 				data[0] = data[0].slice(0, 1000);
 				data[1] = data[1].slice(0, 1000);
 				data[2] = data[2].slice(0, 1000);
 				data[3] = data[3].slice(0, 1000);
 
 				data[1][35] = null;
+				data[1][36] = null;
 				data[2][730] = null;
 			*/
 				console.timeEnd('prep');
@@ -75,21 +87,21 @@ <h2 id="wait">Loading lib....</h2>
 								label: "CPU",
 								data: data[1],
 								scale: "%",
-								value: v => v.toFixed(1) + "%",
+								value: v => v == null ? "-" : v.toFixed(1) + "%",
 								color: "red",
 							},
 							{
 								label: "RAM",
 								data: data[2],
 								scale: "%",
-								value: v => v.toFixed(1) + "%",
+								value: v => v == null ? "-" : v.toFixed(1) + "%",
 								color: "blue",
 							},
 							{
 								label: "TCP Out",
 								data: data[3],
 								scale: "mb",
-								value: v => v.toFixed(2) + " MB",
+								value: v => v == null ? "-" : v.toFixed(2) + " MB",
 								color: "green",
 							}
 						],

diff --git a/dist/uPlot.cjs.js b/dist/uPlot.cjs.js
@@ -573,27 +573,42 @@ function uPlot(opts) {
 	function drawLine(xdata, ydata, scaleX, scaleY, color, width, dash, fill) {
 		setCtxStyle(color, width, dash, fill);
 
-		var yOk;
 		var gap = false;
 
 		ctx.beginPath();
 
+		var prevX, minY, maxY, prevY, x, y;
+
 		for (var i = i0; i <= i1; i++) {
-			var xPos = getXPos(xdata[i], scaleX, can[WIDTH]);
-			var yPos = getYPos(ydata[i], scaleY, can[HEIGHT]);
+			x = getXPos(xdata[i], scaleX, can[WIDTH]);
+			y = getYPos(ydata[i], scaleY, can[HEIGHT]);
 
-			if (yPos == null) {				// data gaps
+			if (y == null) {				// data gaps
 				gap = true;
-				ctx.moveTo(xPos, yOk);
+				ctx.moveTo(x, prevY);
 			}
 			else {
-				yOk = yPos;
-				if (gap) {
-					ctx.moveTo(xPos, yPos);
-					gap = false;
+				if (x != prevX) {
+					if (gap) {
+						ctx.moveTo(x, y);
+						gap = false;
+					}
+					else if (i > i0) {
+						ctx.moveTo(prevX, maxY);
+						ctx.lineTo(prevX, minY);
+						ctx.moveTo(prevX, prevY);
+						ctx.lineTo(x, y);
+					}
+
+					minY = maxY = y;
+					prevX = x;
+				}
+				else {
+					minY = min(y, minY);
+					maxY = max(y, maxY);
 				}
-				else
-					{ ctx.lineTo(xPos, yPos); }
+
+				prevY = y;
 			}
 		}
 

diff --git a/dist/uPlot.iife.js b/dist/uPlot.iife.js
@@ -574,27 +574,42 @@ var uPlot = (function () {
 		function drawLine(xdata, ydata, scaleX, scaleY, color, width, dash, fill) {
 			setCtxStyle(color, width, dash, fill);
 
-			var yOk;
 			var gap = false;
 
 			ctx.beginPath();
 
+			var prevX, minY, maxY, prevY, x, y;
+
 			for (var i = i0; i <= i1; i++) {
-				var xPos = getXPos(xdata[i], scaleX, can[WIDTH]);
-				var yPos = getYPos(ydata[i], scaleY, can[HEIGHT]);
+				x = getXPos(xdata[i], scaleX, can[WIDTH]);
+				y = getYPos(ydata[i], scaleY, can[HEIGHT]);
 
-				if (yPos == null) {				// data gaps
+				if (y == null) {				// data gaps
 					gap = true;
-					ctx.moveTo(xPos, yOk);
+					ctx.moveTo(x, prevY);
 				}
 				else {
-					yOk = yPos;
-					if (gap) {
-						ctx.moveTo(xPos, yPos);
-						gap = false;
+					if (x != prevX) {
+						if (gap) {
+							ctx.moveTo(x, y);
+							gap = false;
+						}
+						else if (i > i0) {
+							ctx.moveTo(prevX, maxY);
+							ctx.lineTo(prevX, minY);
+							ctx.moveTo(prevX, prevY);
+							ctx.lineTo(x, y);
+						}
+
+						minY = maxY = y;
+						prevX = x;
+					}
+					else {
+						minY = min(y, minY);
+						maxY = max(y, maxY);
 					}
-					else
-						{ ctx.lineTo(xPos, yPos); }
+
+					prevY = y;
 				}
 			}
 

diff --git a/dist/uPlot.iife.min.js b/dist/uPlot.iife.min.js
diff --git a/src/uPlot.js b/src/uPlot.js
@@ -264,27 +264,42 @@ export default function uPlot(opts) {
 	function drawLine(xdata, ydata, scaleX, scaleY, color, width, dash, fill) {
 		setCtxStyle(color, width, dash, fill);
 
-		let yOk;
 		let gap = false;
 
 		ctx.beginPath();
 
+		let prevX, minY, maxY, prevY, x, y;
+
 		for (let i = i0; i <= i1; i++) {
-			let xPos = getXPos(xdata[i], scaleX, can[WIDTH]);
-			let yPos = getYPos(ydata[i], scaleY, can[HEIGHT]);
+			x = getXPos(xdata[i], scaleX, can[WIDTH]);
+			y = getYPos(ydata[i], scaleY, can[HEIGHT]);
 
-			if (yPos == null) {				// data gaps
+			if (y == null) {				// data gaps
 				gap = true;
-				ctx.moveTo(xPos, yOk);
+				ctx.moveTo(x, prevY);
 			}
 			else {
-				yOk = yPos;
-				if (gap) {
-					ctx.moveTo(xPos, yPos);
-					gap = false;
+				if (x != prevX) {
+					if (gap) {
+						ctx.moveTo(x, y);
+						gap = false;
+					}
+					else if (i > i0) {
+						ctx.moveTo(prevX, maxY);
+						ctx.lineTo(prevX, minY);
+						ctx.moveTo(prevX, prevY);
+						ctx.lineTo(x, y);
+					}
+
+					minY = maxY = y;
+					prevX = x;
+				}
+				else {
+					minY = min(y, minY);
+					maxY = max(y, maxY);
 				}
-				else
-					ctx.lineTo(xPos, yPos);
+
+				prevY = y;
 			}
 		}