From 61d7a9b149b8537b851e7f094bde76ad28f20206 Mon Sep 17 00:00:00 2001 From: groninge Date: Wed, 18 Sep 2024 13:04:30 +0200 Subject: [PATCH 01/11] add custom tooltip to chart --- .../marketing/useEcosystemPoolActivity.tsx | 199 ++++++++---------- 1 file changed, 93 insertions(+), 106 deletions(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index 456ff83b4..e13744a38 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -2,15 +2,23 @@ /* eslint-disable react-hooks/exhaustive-deps */ 'use client' import * as echarts from 'echarts/core' -import { useEffect, useMemo, useRef, useState } from 'react' +import { useEffect, useMemo, useRef, useState, FC } from 'react' import { format } from 'date-fns' import { GqlChain, GqlPoolEventType, GqlToken } from '@/lib/shared/services/api/generated/graphql' import EChartsReactCore from 'echarts-for-react/lib/core' -import { ColorMode, useTheme as useChakraTheme } from '@chakra-ui/react' -import { useTheme as useNextTheme } from 'next-themes' +import { + Box, + Card, + ChakraProvider, + useTheme, + Text, + Link, + Image, + VStack, + HStack, +} from '@chakra-ui/react' import { abbreviateAddress } from '@/lib/shared/utils/addresses' import { useTokens } from '@/lib/modules/tokens/TokensProvider' - import { getBlockExplorerAddressUrl, getBlockExplorerTxUrl, @@ -21,6 +29,8 @@ import { NumberFormatter } from '@/lib/shared/utils/numbers' import { usePoolEvents } from '../pool/usePoolEvents' import { supportedNetworks } from '../web3/ChainConfig' import { getChainShortName } from '@/lib/config/app.config' +import { createRoot } from 'react-dom/client' +import { ArrowUpRight } from 'react-feather' type ChartInfoTokens = { token?: GqlToken @@ -108,27 +118,80 @@ function getDefaultChainMeta() { } } +const CustomTooltip: FC<{ + params: any + currencyFormatter: (value: string) => string +}> = ({ params, currencyFormatter }) => { + const data = Array.isArray(params) ? params[0] : params + const timestamp = data.value[0] + const metaData = data.data[2] as ChartInfoMetaData + const { userAddress, tokens, usdValue, tx, chain, type } = metaData + const txLink = getBlockExplorerTxUrl(tx, chain) + const addressLink = getBlockExplorerAddressUrl(userAddress, chain) + + const typeStr = + type === GqlPoolEventType.Add ? 'Add' : type === GqlPoolEventType.Remove ? 'Remove' : 'Swap' + + return ( + + + + {`${typeStr} ${currencyFormatter(usdValue)}`} + + on {getChainShortName(chain)} + + + + {tokens + .filter(token => token.token && Number(token.amount) !== 0) + .map((token, index) => ( + + {token.token?.symbol} + + {Number(Number(token.amount).toFixed(2)).toLocaleString()} {token.token?.symbol} + + + ))} + + + + + + Tx: {format(new Date(timestamp * 1000), 'MMM d, h:mma').toLowerCase()} + + + + + + + + + + By: {abbreviateAddress(userAddress)} + + + + + + + + + + ) +} + const getDefaultPoolActivityChartOptions = ( - nextTheme: ColorMode = 'dark', theme: any, // TODO: type this currencyFormatter: NumberFormatter, isMobile = false, is2xl = false // chain: GqlChain ): echarts.EChartsCoreOption => { - const toolTipTheme = { - heading: 'font-weight: bold; color: #E5D3BE', - container: `background: ${ - nextTheme === 'dark' - ? theme.semanticTokens.colors.background.level3._dark - : theme.semanticTokens.colors.background.default - };`, - text: - nextTheme === 'dark' - ? theme.semanticTokens.colors.font.primary._dark - : theme.semanticTokens.colors.font.primary.default, - } - return { grid: { left: isMobile ? '15%' : '5.5%', @@ -175,91 +238,23 @@ const getDefaultPoolActivityChartOptions = ( splitNumber: 3, }, tooltip: { - triggerOn: 'mousemove|click', + trigger: 'item', confine: is2xl ? false : true, enterable: true, hideDelay: 300, position: function (point: number[]) { return [point[0] + 5, point[1] - 5] }, - extraCssText: `padding-right:2rem;border: none;${toolTipTheme.container};pointer-events: auto!important`, + extraCssText: `padding-right: 2rem;border: none;background: transparent;pointer-events: auto!important;box-shadow: none;`, formatter: (params: any) => { - const data = Array.isArray(params) ? params[0] : params - const timestamp = data.value[0] - const metaData = data.data[2] as ChartInfoMetaData - const userAddress = metaData.userAddress - const tokens = metaData.tokens.filter(token => { - if (!token.token) return false - if (Number(token.amount) === 0) return false - return true - }) as ChartInfoTokens[] - - const tx = metaData.tx - const txLink = getBlockExplorerTxUrl(tx, metaData.chain) - const addressLink = getBlockExplorerAddressUrl(userAddress, metaData.chain) - const typeStr = - metaData.type === GqlPoolEventType.Add - ? 'Add' - : metaData.type === GqlPoolEventType.Remove - ? 'Remove' - : 'Swap' - - const arrow = `` - - return ` -
-
- ${typeStr} -  ${currencyFormatter(metaData.usdValue)}  - on ${getChainShortName(metaData.chain)} -
-
- ${tokens?.map((token, index) => { - return ` -
- -
- ${Number(Number(token.amount).toFixed(2)).toLocaleString()} - ${token.token?.symbol} -
-
- ` - })} -
- - - Tx: ${format(new Date(timestamp * 1000), 'MMM d, h:mma') - .replace('AM', 'am') - .replace('PM', 'pm')} - - - ${arrow} - -
- - By: ${abbreviateAddress( - userAddress - )} - ${arrow} - -
-
- ` + const div = document.createElement('div') + const root = createRoot(div) + root.render( + + + + ) + return div }, }, } @@ -309,13 +304,11 @@ const tabsList: PoolActivityChartTypeTab[] = [ export function useEcosystemPoolActivityChart() { const eChartsRef = useRef(null) const { isMobile, is2xl } = useBreakpoints() - const { theme: nextTheme } = useNextTheme() const { getToken } = useTokens() const { toCurrency } = useCurrency() const [activeTab, setActiveTab] = useState(tabsList[0]) const [activeNetwork, setActiveNetwork] = useState('all') - - const theme = useChakraTheme() + const theme = useTheme() const { loading, data: response } = usePoolEvents({ first: 500, @@ -429,13 +422,7 @@ export function useEcosystemPoolActivityChart() { return { isLoading: loading, - chartOption: getDefaultPoolActivityChartOptions( - nextTheme as ColorMode, - theme, - toCurrency, - isMobile, - is2xl - ), + chartOption: getDefaultPoolActivityChartOptions(theme, toCurrency, isMobile, is2xl), eChartsRef, chartData, tabsList, From fb588628cb76b7f1860caf11710faac4c5576664 Mon Sep 17 00:00:00 2001 From: groninge Date: Wed, 18 Sep 2024 14:08:13 +0200 Subject: [PATCH 02/11] memoize custom tooltip --- .../marketing/useEcosystemPoolActivity.tsx | 123 +++++++++--------- 1 file changed, 65 insertions(+), 58 deletions(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index e13744a38..0546f0855 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -2,7 +2,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ 'use client' import * as echarts from 'echarts/core' -import { useEffect, useMemo, useRef, useState, FC } from 'react' +import { useEffect, useMemo, useRef, useState, FC, memo } from 'react' import { format } from 'date-fns' import { GqlChain, GqlPoolEventType, GqlToken } from '@/lib/shared/services/api/generated/graphql' import EChartsReactCore from 'echarts-for-react/lib/core' @@ -121,7 +121,8 @@ function getDefaultChainMeta() { const CustomTooltip: FC<{ params: any currencyFormatter: (value: string) => string -}> = ({ params, currencyFormatter }) => { + theme: any +}> = ({ params, currencyFormatter, theme }) => { const data = Array.isArray(params) ? params[0] : params const timestamp = data.value[0] const metaData = data.data[2] as ChartInfoMetaData @@ -133,58 +134,64 @@ const CustomTooltip: FC<{ type === GqlPoolEventType.Add ? 'Add' : type === GqlPoolEventType.Remove ? 'Remove' : 'Swap' return ( - - - - {`${typeStr} ${currencyFormatter(usdValue)}`} - - on {getChainShortName(chain)} - - - - {tokens - .filter(token => token.token && Number(token.amount) !== 0) - .map((token, index) => ( - - {token.token?.symbol} - - {Number(Number(token.amount).toFixed(2)).toLocaleString()} {token.token?.symbol} + + + + + {`${typeStr} ${currencyFormatter( + usdValue + )}`} + + on {getChainShortName(chain)} + + + + {tokens + .filter(token => token.token && Number(token.amount) !== 0) + .map((token, index) => ( + + {token.token?.symbol} + + {Number(Number(token.amount).toFixed(2)).toLocaleString()} {token.token?.symbol} + + + ))} + + + + + + Tx: {format(new Date(timestamp * 1000), 'MMM d, h:mma').toLowerCase()} + + + - ))} - - - - - - Tx: {format(new Date(timestamp * 1000), 'MMM d, h:mma').toLowerCase()} - - - - - - - - - - By: {abbreviateAddress(userAddress)} - - - - - - + + + + + By: {abbreviateAddress(userAddress)} + + + + + + + - - + + ) } +const MemoizedCustomTooltip = memo(CustomTooltip) + const getDefaultPoolActivityChartOptions = ( theme: any, // TODO: type this currencyFormatter: NumberFormatter, @@ -192,6 +199,15 @@ const getDefaultPoolActivityChartOptions = ( is2xl = false // chain: GqlChain ): echarts.EChartsCoreOption => { + const tooltipFormatter = (params: any) => { + const div = document.createElement('div') + const root = createRoot(div) + root.render( + + ) + return div + } + return { grid: { left: isMobile ? '15%' : '5.5%', @@ -246,16 +262,7 @@ const getDefaultPoolActivityChartOptions = ( return [point[0] + 5, point[1] - 5] }, extraCssText: `padding-right: 2rem;border: none;background: transparent;pointer-events: auto!important;box-shadow: none;`, - formatter: (params: any) => { - const div = document.createElement('div') - const root = createRoot(div) - root.render( - - - - ) - return div - }, + formatter: tooltipFormatter, }, } } From 22943ed839fd162204bf29c71b3aae8ad3152c20 Mon Sep 17 00:00:00 2001 From: groninge Date: Wed, 18 Sep 2024 14:31:39 +0200 Subject: [PATCH 03/11] memoize chart options --- lib/modules/marketing/useEcosystemPoolActivity.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index 0546f0855..a4e4ff394 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -322,6 +322,10 @@ export function useEcosystemPoolActivityChart() { chainIn: supportedNetworks, }) + const memoizedChartOptions = useMemo(() => { + return getDefaultPoolActivityChartOptions(theme, toCurrency, isMobile, is2xl) + }, [theme, toCurrency, isMobile, is2xl]) + const chartData = useMemo(() => { if (!response) return getDefaultChainMeta() const { poolEvents: events } = response @@ -429,7 +433,7 @@ export function useEcosystemPoolActivityChart() { return { isLoading: loading, - chartOption: getDefaultPoolActivityChartOptions(theme, toCurrency, isMobile, is2xl), + chartOption: memoizedChartOptions, eChartsRef, chartData, tabsList, From 7c23de67167347bfa26893c78f973c76f81bcdcc Mon Sep 17 00:00:00 2001 From: groninge Date: Wed, 18 Sep 2024 16:03:38 +0200 Subject: [PATCH 04/11] use createPortal instead of createRoot --- .../marketing/useEcosystemPoolActivity.tsx | 64 ++++++++++++++----- .../marketing/EcosystemActivityChart.tsx | 34 ++++++++-- 2 files changed, 76 insertions(+), 22 deletions(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index a4e4ff394..b081bb536 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -2,7 +2,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ 'use client' import * as echarts from 'echarts/core' -import { useEffect, useMemo, useRef, useState, FC, memo } from 'react' +import { useEffect, useMemo, useRef, useState, FC, memo, useCallback, ReactNode } from 'react' import { format } from 'date-fns' import { GqlChain, GqlPoolEventType, GqlToken } from '@/lib/shared/services/api/generated/graphql' import EChartsReactCore from 'echarts-for-react/lib/core' @@ -29,8 +29,8 @@ import { NumberFormatter } from '@/lib/shared/utils/numbers' import { usePoolEvents } from '../pool/usePoolEvents' import { supportedNetworks } from '../web3/ChainConfig' import { getChainShortName } from '@/lib/config/app.config' -import { createRoot } from 'react-dom/client' import { ArrowUpRight } from 'react-feather' +import { createPortal } from 'react-dom' type ChartInfoTokens = { token?: GqlToken @@ -196,18 +196,10 @@ const getDefaultPoolActivityChartOptions = ( theme: any, // TODO: type this currencyFormatter: NumberFormatter, isMobile = false, - is2xl = false + is2xl = false, + tooltipFormatter: (params: any) => string // chain: GqlChain ): echarts.EChartsCoreOption => { - const tooltipFormatter = (params: any) => { - const div = document.createElement('div') - const root = createRoot(div) - root.render( - - ) - return div - } - return { grid: { left: isMobile ? '15%' : '5.5%', @@ -258,9 +250,7 @@ const getDefaultPoolActivityChartOptions = ( confine: is2xl ? false : true, enterable: true, hideDelay: 300, - position: function (point: number[]) { - return [point[0] + 5, point[1] - 5] - }, + position: [0, 0], // This will be overridden by our custom positioning extraCssText: `padding-right: 2rem;border: none;background: transparent;pointer-events: auto!important;box-shadow: none;`, formatter: tooltipFormatter, }, @@ -315,6 +305,9 @@ export function useEcosystemPoolActivityChart() { const { toCurrency } = useCurrency() const [activeTab, setActiveTab] = useState(tabsList[0]) const [activeNetwork, setActiveNetwork] = useState('all') + const [tooltipContent, setTooltipContent] = useState(null) + const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 }) + const theme = useTheme() const { loading, data: response } = usePoolEvents({ @@ -322,9 +315,43 @@ export function useEcosystemPoolActivityChart() { chainIn: supportedNetworks, }) + const tooltipFormatter = useCallback( + (params: any) => { + setTooltipContent( + + + + ) + return ' ' + }, + [theme, toCurrency] + ) + + const onEvents = useMemo( + () => ({ + mousemove: (params: any) => { + console.log({ params }) + if (params.componentType === 'series') { + setTooltipPosition({ x: params.event.offsetX, y: params.event.offsetY }) + } + }, + mouseout: () => { + setTooltipContent(null) + }, + }), + [] + ) + const memoizedChartOptions = useMemo(() => { - return getDefaultPoolActivityChartOptions(theme, toCurrency, isMobile, is2xl) - }, [theme, toCurrency, isMobile, is2xl]) + return getDefaultPoolActivityChartOptions(theme, toCurrency, isMobile, is2xl, tooltipFormatter) + }, [theme, toCurrency, isMobile, is2xl, tooltipFormatter]) + + useEffect(() => { + const tooltipContainer = document.getElementById('echarts-tooltip-container') + if (tooltipContainer && tooltipContent) { + createPortal(tooltipContent, tooltipContainer) + } + }, [tooltipContent]) const chartData = useMemo(() => { if (!response) return getDefaultChainMeta() @@ -442,5 +469,8 @@ export function useEcosystemPoolActivityChart() { activeNetwork, setActiveNetwork, headerInfo, + tooltipContent, + tooltipPosition, + onEvents, } } diff --git a/lib/shared/components/marketing/EcosystemActivityChart.tsx b/lib/shared/components/marketing/EcosystemActivityChart.tsx index b1b986f18..629991c82 100644 --- a/lib/shared/components/marketing/EcosystemActivityChart.tsx +++ b/lib/shared/components/marketing/EcosystemActivityChart.tsx @@ -25,6 +25,7 @@ import { gradientMap, useEcosystemPoolActivityChart, } from '@/lib/modules/marketing/useEcosystemPoolActivity' +import { createPortal } from 'react-dom' const AnimateOpacity: FC> = ({ children }) => ( @@ -45,6 +46,9 @@ export function EcosystemActivityChart() { tabsList, headerInfo, eChartsRef, + tooltipContent, + tooltipPosition, + onEvents, } = useEcosystemPoolActivityChart() const legendTabs = supportedNetworks.map(key => { @@ -54,6 +58,8 @@ export function EcosystemActivityChart() { } }) + console.log({ tooltipContent, tooltipPosition }) + return ( @@ -98,11 +104,29 @@ export function EcosystemActivityChart() { - +
+ + {createPortal( +
+ {tooltipContent} +
, + document.body + )} +
From 71c2c03e6b7b71f7fb94cb898a3d75502eeb2a5a Mon Sep 17 00:00:00 2001 From: groninge Date: Thu, 19 Sep 2024 08:26:31 +0200 Subject: [PATCH 05/11] fix tooltip positioning --- .../marketing/EcosystemActivityChart.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/lib/shared/components/marketing/EcosystemActivityChart.tsx b/lib/shared/components/marketing/EcosystemActivityChart.tsx index 629991c82..558f08047 100644 --- a/lib/shared/components/marketing/EcosystemActivityChart.tsx +++ b/lib/shared/components/marketing/EcosystemActivityChart.tsx @@ -16,7 +16,6 @@ import { import ButtonGroup from '@/lib/shared/components/btns/button-group/ButtonGroup' import { FC, PropsWithChildren } from 'react' import { motion } from 'framer-motion' - import { EcosystemChainSelect } from './EcosystemChainSelect' import { getChainShortName } from '@/lib/config/app.config' import { supportedNetworks } from '@/lib/modules/web3/ChainConfig' @@ -26,6 +25,7 @@ import { useEcosystemPoolActivityChart, } from '@/lib/modules/marketing/useEcosystemPoolActivity' import { createPortal } from 'react-dom' +import useMeasure from 'react-use-measure' const AnimateOpacity: FC> = ({ children }) => ( @@ -51,6 +51,10 @@ export function EcosystemActivityChart() { onEvents, } = useEcosystemPoolActivityChart() + const [ref, bounds] = useMeasure({ + scroll: true, + }) + const legendTabs = supportedNetworks.map(key => { return { label: getChainShortName(key), @@ -58,13 +62,10 @@ export function EcosystemActivityChart() { } }) - console.log({ tooltipContent, tooltipPosition }) - return ( {isLoading && } - - - { @@ -104,7 +103,7 @@ export function EcosystemActivityChart() { -
+
- - {legendTabs.map((tab, index) => ( From aa2ee5fbaccf998889957c7602d19a717b665cd9 Mon Sep 17 00:00:00 2001 From: groninge Date: Thu, 19 Sep 2024 08:44:32 +0200 Subject: [PATCH 06/11] not needed here anymore --- lib/modules/marketing/useEcosystemPoolActivity.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index b081bb536..2904b88ad 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -30,7 +30,6 @@ import { usePoolEvents } from '../pool/usePoolEvents' import { supportedNetworks } from '../web3/ChainConfig' import { getChainShortName } from '@/lib/config/app.config' import { ArrowUpRight } from 'react-feather' -import { createPortal } from 'react-dom' type ChartInfoTokens = { token?: GqlToken @@ -346,13 +345,6 @@ export function useEcosystemPoolActivityChart() { return getDefaultPoolActivityChartOptions(theme, toCurrency, isMobile, is2xl, tooltipFormatter) }, [theme, toCurrency, isMobile, is2xl, tooltipFormatter]) - useEffect(() => { - const tooltipContainer = document.getElementById('echarts-tooltip-container') - if (tooltipContainer && tooltipContent) { - createPortal(tooltipContent, tooltipContainer) - } - }, [tooltipContent]) - const chartData = useMemo(() => { if (!response) return getDefaultChainMeta() const { poolEvents: events } = response From eed081e706731c4d17f71714e73f9a71d8f8d4da Mon Sep 17 00:00:00 2001 From: groninge Date: Thu, 19 Sep 2024 08:45:02 +0200 Subject: [PATCH 07/11] remove console.log --- lib/modules/marketing/useEcosystemPoolActivity.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index 2904b88ad..aacd1e11d 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -329,7 +329,6 @@ export function useEcosystemPoolActivityChart() { const onEvents = useMemo( () => ({ mousemove: (params: any) => { - console.log({ params }) if (params.componentType === 'series') { setTooltipPosition({ x: params.event.offsetX, y: params.event.offsetY }) } From 6ba284637ac842c65fc398abc9ed12992655b6c6 Mon Sep 17 00:00:00 2001 From: groninge Date: Thu, 19 Sep 2024 08:58:35 +0200 Subject: [PATCH 08/11] add comment --- lib/shared/components/marketing/EcosystemActivityChart.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/shared/components/marketing/EcosystemActivityChart.tsx b/lib/shared/components/marketing/EcosystemActivityChart.tsx index 558f08047..6b7843b1e 100644 --- a/lib/shared/components/marketing/EcosystemActivityChart.tsx +++ b/lib/shared/components/marketing/EcosystemActivityChart.tsx @@ -110,9 +110,9 @@ export function EcosystemActivityChart() { ref={eChartsRef} onEvents={onEvents} /> + {/* No idea how to get this to work with */} {createPortal(
Date: Thu, 19 Sep 2024 18:22:10 +0200 Subject: [PATCH 09/11] replace div with Box --- lib/shared/components/marketing/EcosystemActivityChart.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/shared/components/marketing/EcosystemActivityChart.tsx b/lib/shared/components/marketing/EcosystemActivityChart.tsx index 6b7843b1e..81a0a73bd 100644 --- a/lib/shared/components/marketing/EcosystemActivityChart.tsx +++ b/lib/shared/components/marketing/EcosystemActivityChart.tsx @@ -103,7 +103,7 @@ export function EcosystemActivityChart() { -
+ , document.body )} -
+ From 6b630b7fab3e4d0ba39104b1da80629c7692d20c Mon Sep 17 00:00:00 2001 From: groninge Date: Fri, 20 Sep 2024 10:50:53 +0200 Subject: [PATCH 10/11] keep tooltip open on hover and click links --- .../marketing/EcosystemActivityChart.tsx | 48 +++++++++++++++++-- 1 file changed, 45 insertions(+), 3 deletions(-) diff --git a/lib/shared/components/marketing/EcosystemActivityChart.tsx b/lib/shared/components/marketing/EcosystemActivityChart.tsx index 81a0a73bd..305145f7c 100644 --- a/lib/shared/components/marketing/EcosystemActivityChart.tsx +++ b/lib/shared/components/marketing/EcosystemActivityChart.tsx @@ -14,7 +14,7 @@ import { VStack, } from '@chakra-ui/react' import ButtonGroup from '@/lib/shared/components/btns/button-group/ButtonGroup' -import { FC, PropsWithChildren } from 'react' +import { FC, PropsWithChildren, useState, useRef, useCallback, useEffect } from 'react' import { motion } from 'framer-motion' import { EcosystemChainSelect } from './EcosystemChainSelect' import { getChainShortName } from '@/lib/config/app.config' @@ -62,6 +62,39 @@ export function EcosystemActivityChart() { } }) + const [isTooltipVisible, setIsTooltipVisible] = useState(false) + const tooltipRef = useRef(null) + const timeoutRef = useRef(null) + + const showTooltip = useCallback( + (params: any) => { + onEvents.mousemove(params) + setIsTooltipVisible(true) + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + }, + [onEvents] + ) + + const hideTooltip = useCallback(() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + timeoutRef.current = setTimeout(() => { + onEvents.mouseout() + setIsTooltipVisible(false) + }, 100) + }, [onEvents]) + + useEffect(() => { + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + } + }, []) + return ( @@ -108,18 +141,27 @@ export function EcosystemActivityChart() { style={{ height: `${chartHeight}px` }} option={chartOption} ref={eChartsRef} - onEvents={onEvents} + onEvents={{ + ...onEvents, + mousemove: showTooltip, + mouseout: hideTooltip, + }} /> {/* No idea how to get this to work with */} {createPortal(
{tooltipContent}
, From 0d2fa7135c49e144c8515ebf3be101b67c9e7640 Mon Sep 17 00:00:00 2001 From: groninge Date: Fri, 20 Sep 2024 11:51:00 +0200 Subject: [PATCH 11/11] not needed anymore --- lib/modules/marketing/useEcosystemPoolActivity.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/modules/marketing/useEcosystemPoolActivity.tsx b/lib/modules/marketing/useEcosystemPoolActivity.tsx index aacd1e11d..016fc9aa2 100644 --- a/lib/modules/marketing/useEcosystemPoolActivity.tsx +++ b/lib/modules/marketing/useEcosystemPoolActivity.tsx @@ -250,7 +250,7 @@ const getDefaultPoolActivityChartOptions = ( enterable: true, hideDelay: 300, position: [0, 0], // This will be overridden by our custom positioning - extraCssText: `padding-right: 2rem;border: none;background: transparent;pointer-events: auto!important;box-shadow: none;`, + extraCssText: `border: none;background: transparent;box-shadow: none;`, formatter: tooltipFormatter, }, }