Added touch zoom to compare page #209

ruuvi · Aug 19, 2024 · 99d53cc · 99d53cc
1 parent 0def786
commit 99d53cc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/CompareView.js b/src/components/CompareView.js
@@ -9,6 +9,7 @@ import { ruuviTheme } from "../themes";
 import { Box, useColorMode } from "@chakra-ui/react";
 import { t } from "i18next";
 import { getUnitHelper } from "../UnitHelper";
+import UplotTouchZoomPlugin from "./UplotTouchZoomPlugin";
 
 function ddmm(ts) {
     var d = new Date(ts * 1000);
@@ -162,6 +163,9 @@ function CompareView(props) {
         })();
     }, [sensors, props.from, props.reloadIndex]);
 
+    function getXRange() {
+        return [props.from, new Date().getTime() / 1000]
+    }
 
     const { width } = useContainerDimensions(ref)
     const colorMode = useColorMode().colorMode;
@@ -178,6 +182,7 @@ function CompareView(props) {
                 : (
                     <UplotReact
                         options={{
+                            plugins: [UplotTouchZoomPlugin(getXRange())],
                             padding: [10, 10, 0, -10],
                             width: width,
                             height: 450,

diff --git a/src/components/UplotTouchZoomPlugin.js b/src/components/UplotTouchZoomPlugin.js
@@ -3,12 +3,15 @@ export default function UplotTouchZoomPlugin(xRange) {
     function init(u, opts, data) {
         let min = Number.POSITIVE_INFINITY;
         let max = Number.NEGATIVE_INFINITY;
-
-        for (let i = 0; i < data[1].length; i++) {
-            const value = data[1][i];
-            if (value < min) min = value;
-            if (value > max) max = value;
+
+        if (Array.isArray(data[1])) {
+            for (let i = 0; i < data[1].length; i++) {
+                const value = data[1][i];
+                if (value < min) min = value;
+                if (value > max) max = value;
+            }
         }
+
         let yRange = [min - 0.5, max + 0.5]
         let over = u.over;
         let rect, oxRange, oyRange, xVal, yVal;