From a6e5e6f02ab034954725d43ad521eb1d3aff9595 Mon Sep 17 00:00:00 2001 From: readme-bot Date: Sat, 25 Nov 2023 20:36:35 +0800 Subject: [PATCH] improve hover logic --- src/App.tsx | 2 +- src/components/coins-amount-and-value-change.tsx | 6 +++--- src/components/pnl.tsx | 8 ++++++++ src/components/top-coins-percentage-change.tsx | 8 ++++++++ src/components/top-coins-rank.tsx | 8 ++++++++ src/components/total-value-and-change.tsx | 8 ++++++++ 6 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3029f80..c8c7a83 100644 --- 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 index b42ca0b..30712e1 100644 --- 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 index 231bd77..74e9144 100644 --- 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 index 1367aa2..cefe3ee 100644 --- 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 index f1e8394..63b465d 100644 --- 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 index 2dccc89..7b935a4 100644 --- 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,