fix(demo): fix tooltips not overflowing plots correctly (#231)

demo/changepoint.js

@@ -903,7 +903,6 @@ function highlightChangepointsPlugin(ds, cps) {
     hooks: {
       drawClear: [
         (u) => {
-          const { ctx } = u;
           const { height, top } = u.bbox;
           u.ctx.save();
           let color = "white";

demo/clustering.js

@@ -48,7 +48,7 @@ class ClusteringWorker {
   }
 
   cluster = async (dtwOpts, dbscanOpts) => {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const start = performance.now();
       this.worker.postMessage({
         dtwOpts,
@@ -85,15 +85,15 @@ async function main() {
   const dbscanOpts = { epsilon: 5000, minClusterSize: 2 };
   runClustering(dtwOpts, dbscanOpts);
 
-  document.getElementById("clustering-dtw-window").addEventListener("change", function() {
+  document.getElementById("clustering-dtw-window").addEventListener("input", function() {
     dtwOpts.window = parseFloat(this.value);
     runClustering(dtwOpts, dbscanOpts);
   });
-  document.getElementById("clustering-dbscan-epsilon").addEventListener("change", function() {
+  document.getElementById("clustering-dbscan-epsilon").addEventListener("input", function() {
     dbscanOpts.epsilon = parseFloat(this.value);
     runClustering(dtwOpts, dbscanOpts);
   });
-  document.getElementById("clustering-dbscan-min-cluster-size").addEventListener("change", function() {
+  document.getElementById("clustering-dbscan-min-cluster-size").addEventListener("input", function() {
     dbscanOpts.minClusterSize = parseInt(this.value);
     runClustering(dtwOpts, dbscanOpts);
   });

demo/index.html

@@ -57,7 +57,7 @@
                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                 padding: 1rem;
                 max-width: 100%;
-                overflow-x: auto; /* Allows horizontal scrolling if needed */
+                overflow: visible;
             }
 
             /* Make sure the uPlot canvas is responsive */

demo/mstl.js

@@ -1243,7 +1243,7 @@ class MSTLWorker {
   }
 
   fitPredict = async (data, opts) => {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const start = performance.now();
       this.worker.postMessage({ data, opts });
       this.worker.onmessage = (e) => {
@@ -1279,8 +1279,6 @@ async function main() {
 
   const worker = await MSTLWorker.create();
 
-  let start;
-
   async function runMSTL(opts) {
     const { predictions, elapsed } = await worker.fitPredict(df, opts);
     if (data.length > 2) {
@@ -1323,7 +1321,7 @@ async function main() {
       `Forecasting with MSTL - done in ${elapsed}ms`;
   }
   runMSTL(undefined);
-  document.getElementById("mstl-interval-width").addEventListener("change", function() {
+  document.getElementById("mstl-interval-width").addEventListener("input", function() {
     const intervalWidth = parseFloat(this.value);
     runMSTL({ intervalWidth });
   })

demo/outlier.js

@@ -26,7 +26,7 @@ class OutlierWorker {
   }
 
   detect = async (opts) => {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const start = performance.now();
       this.worker.postMessage({
         opts,
@@ -40,7 +40,7 @@ class OutlierWorker {
   }
 }
 
-function setUpPlot(data, outlyingSeries) {
+function setUpPlot(data) {
   const opts = {
     ...getSize(),
     series: [
@@ -68,7 +68,6 @@ async function main() {
   const u = setUpPlot(worker.data);
   async function runOutlierDetection(opts) {
     const { outliers, elapsed } = await worker.detect(opts);
-    const outlyingSeries = new Set(outliers.outlyingSeries);
     outliers.seriesResults.forEach((res, i) => {
       const seriesIdx = i + 1;
       u.delSeries(seriesIdx);
@@ -83,7 +82,7 @@ async function main() {
   }
   runOutlierDetection({ sensitivity: 0.8 });
 
-  document.getElementById("outlier-sensitivity").addEventListener("change", function() {
+  document.getElementById("outlier-sensitivity").addEventListener("input", function() {
     runOutlierDetection({ sensitivity: parseFloat(this.value) });
   })
 }

demo/plugins.js

@@ -7,7 +7,7 @@ export function legendAsTooltipPlugin({
 } = {}) {
   let legendEl;
 
-  function init(u, opts) {
+  function init(u) {
     legendEl = u.root.querySelector(".u-legend");
 
     legendEl.classList.remove("u-inline");

demo/prophet.js

@@ -1242,7 +1242,7 @@ class ProphetWorker {
   }
 
   fitPredict = async (data, opts) => {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
       const start = performance.now();
       this.worker.postMessage({ data, opts });
       this.worker.onmessage = (e) => {

demo/prophet.worker.js

@@ -1,5 +1,4 @@
 import initProphet, {
-  initLogging,
   Prophet,
 } from "./dist/@bsull/augurs/prophet.js";
 import { optimizer } from "./dist/@bsull/augurs-prophet-wasmstan/prophet-wasmstan.js";