hide legned when not hoveing in compare #445

src/components/CompareView.jsx

@@ -9,7 +9,8 @@ import { ruuviTheme } from "../themes";
 import { Box, useColorMode } from "@chakra-ui/react";
 import { t } from "i18next";
 import { getUnitHelper } from "../UnitHelper";
-import UplotTouchZoomPlugin from "./UplotTouchZoomPlugin";
+import UplotTouchZoomPlugin from "./uplotPlugins/UplotTouchZoomPlugin";
+import UplotLegendHider from "./uplotPlugins/UplotLegendHider";
 import { date2digits, secondsToUserDateString, time2digits } from "../TimeHelper";
 
 function getGraphColor(idx, fill) {
@@ -170,7 +171,7 @@ function CompareView(props) {
                 : (
                     <UplotReact
                         options={{
-                            plugins: [UplotTouchZoomPlugin(getXRange())],
+                            plugins: [UplotTouchZoomPlugin(getXRange()), UplotLegendHider],
                             padding: [10, 10, 0, -10],
                             width: width,
                             height: 450,

src/components/Graph.jsx

@@ -2,7 +2,8 @@ import React, { Component, Suspense, useEffect, useState } from "react";
 import 'uplot/dist/uPlot.min.css';
 import { withTranslation } from 'react-i18next';
 import { getDisplayValue, getUnitHelper, localeNumber, round } from "../UnitHelper";
-import UplotTouchZoomPlugin from "./UplotTouchZoomPlugin";
+import UplotTouchZoomPlugin from "./uplotPlugins/UplotTouchZoomPlugin";
+import UplotLegendHider from "./uplotPlugins/UplotLegendHider";
 import { ruuviTheme } from "../themes";
 import { withColorMode } from "../utils/withColorMode";
 import { IconButton } from "@chakra-ui/react";
@@ -12,20 +13,6 @@ import { calculateAverage } from "../utils/dataMath";
 import { date2digits, secondsToUserDateString, time2digits } from "../TimeHelper";
 const UplotReact = React.lazy(() => import('uplot-react'));
 
-const legendHider = ({
-    hooks: {
-        init(u, opts) {
-            document.getElementsByClassName("u-legend")[0].style.visibility = 'hidden';
-            u.over.addEventListener("mouseleave", () => {
-                document.getElementsByClassName("u-legend")[0].style.visibility = 'hidden';
-            });
-            u.over.addEventListener("mousemove", () => {
-                document.getElementsByClassName("u-legend")[0].style.visibility = '';
-            });
-        }
-    }
-});
-
 let zoomData = {
     value: undefined,
     aListener: function (val) { },
@@ -198,7 +185,7 @@ class Graph extends Component {
         var plugins = [];
         if (!this.props.cardView) {
             plugins.push(UplotTouchZoomPlugin(this.getXRange()))
-            plugins.push(legendHider)
+            plugins.push(UplotLegendHider)
         }
         let colorMode = this.props.overrideColorMode ? this.props.overrideColorMode : this.props.colorMode.colorMode;
         let height = this.props.height || 300;

src/components/uplotPlugins/UplotLegendHider.jsx

@@ -0,0 +1,16 @@
+export default {
+    hooks: {
+        init(u, opts) {
+            const legend = document.getElementsByClassName("u-legend")[0];
+            legend.style.visibility = 'hidden';
+
+            u.over.addEventListener("mouseleave", () => {
+                legend.style.visibility = 'hidden';
+            });
+
+            u.over.addEventListener("mousemove", () => {
+                legend.style.visibility = '';
+            });
+        }
+    }
+};