Merge pull request #760 from leeoniya/master

fix tooltips at chart edges. dont spill over interpolated markers.

Author: Mark-Simulacrum

site/static/index.html

@@ -95,7 +95,29 @@
 
             const fmtDate = uPlot.fmtDate("{M}/{D}/{YY} {h}:{mm}:{ss} {AA}");
 
+            let over;
+
+            let tooltipVisible = false;
+
+            function showTooltip() {
+                if (!tooltipVisible) {
+                    tooltip.style.display = "block";
+                    over.style.cursor = "pointer";
+                    tooltipVisible = true;
+                }
+            }
+
+            function hideTooltip() {
+                if (tooltipVisible) {
+                    tooltip.style.display = "none";
+                    over.style.cursor = null;
+                    tooltipVisible = false;
+                }
+            }
+
             function setTooltip(u) {
+                showTooltip();
+
                 let top = u.valToPos(u.data[seriesIdx][dataIdx], 'y');
                 let lft = u.valToPos(u.data[        0][dataIdx], 'x');
 
@@ -109,7 +131,7 @@
                 let trailer = "";
                 if (absoluteMode) {
                     let pctSinceStart = (((u.data[seriesIdx][dataIdx] - u.data[seriesIdx][0]) / u.data[seriesIdx][0]) * 100).toFixed(2);
-                    trailer = uPlot.fmtNum(u.data[seriesIdx][dataIdx]) + "(" +
+                    trailer = uPlot.fmtNum(u.data[seriesIdx][dataIdx]) + " (" +
                         pctSinceStart + "% since start)";
                 } else {
                     trailer = uPlot.fmtNum(u.data[seriesIdx][dataIdx]) + "% since start";
@@ -124,7 +146,8 @@
                 hooks: {
                     ready: [
                         u => {
-                            let over = u.root.querySelector(".u-over");
+                            over = u.root.querySelector(".u-over");
+
                             tooltipLeftOffset = parseFloat(over.style.left);
                             tooltipTopOffset = parseFloat(over.style.top);
                             u.root.querySelector(".u-wrap").appendChild(tooltip);
@@ -151,11 +174,11 @@
                         u => {
                             let c = u.cursor;
 
-                            if (c.idx != dataIdx) {
+                            if (dataIdx != c.idx) {
                                 dataIdx = c.idx;
 
                                 if (seriesIdx != null)
-                                    setTooltip(u, setTooltip);
+                                    setTooltip(u);
                             }
                         }
                     ],
@@ -165,11 +188,9 @@
                                 seriesIdx = sidx;
 
                                 if (sidx == null)
-                                    tooltip.style.display = "none";
-                                else if (dataIdx != null) {
-                                    tooltip.style.display = "block";
+                                    hideTooltip();
+                                else if (dataIdx != null)
                                     setTooltip(u);
-                                }
                             }
                         }
                     ],
@@ -236,21 +257,23 @@
 
                                     const interpolatedColorWithAlpha = "#fcb0f15f";
 
-                                    ctx.save();
                                     ctx.strokeStyle = interpolatedColorWithAlpha;
                                     ctx.beginPath();
 
-                                    u.data[0].forEach((v, j) => {
+                                    let [ i0, i1 ] = u.series[0].idxs;
+
+                                    for (let j = i0; j <= i1; j++) {
+                                        let v = u.data[0][j];
+
                                         if (isInterpolated(j)) {
                                             let cx = Math.round(u.valToPos(v, 'x', true));
                                             ctx.moveTo(cx, top);
                                             ctx.lineTo(cx, top + height);
                                         }
-                                    });
+                                    }
 
                                     ctx.closePath();
                                     ctx.stroke();
-                                    ctx.restore();
                                 },
                             ]
                         },