improve hover logic

domechn · Nov 25, 2023 · a6e5e6f · a6e5e6f
1 parent 5720906
commit a6e5e6f
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 4 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import IndexApp from "@/components/index";
 import AutoUpdater from "@/components/auto-updater";
-import { Toaster } from "@/components/ui/toaster"
+import { Toaster } from "@/components/ui/toaster";
 import Loading from "@/components/common/loading";
 import { useState } from "react";
 import React from "react";

diff --git a/src/components/coins-amount-and-value-change.tsx b/src/components/coins-amount-and-value-change.tsx
@@ -40,11 +40,11 @@ const App = ({
   const options = {
     maintainAspectRatio: false,
     responsive: false,
-    tooltips: {
+    hover: {
       mode: "index",
       intersect: false,
     },
-    hover: {
+    interaction: {
       mode: "index",
       intersect: false,
     },
@@ -108,7 +108,7 @@ const App = ({
       labels: current.timestamps.map((x) => timestampToDate(x)),
       datasets: [
         {
-          label: "Value In " + currency.currency,
+          label: `Value(${currency.currency})`,
           data: _(current.values)
             .map((v) => currencyWrapper(currency)(v))
             .value(),

diff --git a/src/components/pnl.tsx b/src/components/pnl.tsx
@@ -15,6 +15,14 @@ const App = ({
   const options = {
     maintainAspectRatio: false,
     responsive: false,
+    hover: {
+      mode: "index",
+      intersect: false,
+    },
+    interaction: {
+      mode: "index",
+      intersect: false,
+    },
     plugins: {
       title: {
         display: false,

diff --git a/src/components/top-coins-percentage-change.tsx b/src/components/top-coins-percentage-change.tsx
@@ -27,6 +27,14 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => {
   const options = {
     maintainAspectRatio: false,
     responsive: false,
+    hover: {
+      mode: "nearest",
+      intersect: false,
+    },
+    interaction: {
+      mode: "nearest",
+      intersect: false,
+    },
     plugins: {
       title: {
         display: false,

diff --git a/src/components/top-coins-rank.tsx b/src/components/top-coins-rank.tsx
@@ -23,6 +23,14 @@ const App = ({ data }: { data: TopCoinsRankData }) => {
   const options = {
     maintainAspectRatio: false,
     responsive: false,
+    hover: {
+      mode: "nearest",
+      intersect: false,
+    },
+    interaction: {
+      mode: "nearest",
+      intersect: false,
+    },
     plugins: {
       title: {
         display: false,

diff --git a/src/components/total-value-and-change.tsx b/src/components/total-value-and-change.tsx
@@ -246,6 +246,14 @@ const App = ({
   const options = {
     maintainAspectRatio: false,
     responsive: false,
+    hover: {
+      mode: "index",
+      intersect: false,
+    },
+    interaction: {
+      mode: "index",
+      intersect: false,
+    },
     plugins: {
       title: {
         display: false,