From 99d53cc8c32337c00a81cf1a7bde68fa6957afb5 Mon Sep 17 00:00:00 2001
From: io53 <defragmated@gmail.com>
Date: Mon, 19 Aug 2024 23:15:26 +0300
Subject: [PATCH] Added touch zoom to compare page #209

---
 src/components/CompareView.js          |  5 +++++
 src/components/UplotTouchZoomPlugin.js | 13 ++++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/CompareView.js b/src/components/CompareView.js
index 2660ea6..9714615 100644
--- 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
index d54d5de..d2608df 100644
--- 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;