diff --git a/public/icons/v25.svg b/public/icons/v25.svg index 32b277ce3..4ed73717e 100644 --- a/public/icons/v25.svg +++ b/public/icons/v25.svg @@ -132,5 +132,7 @@ + + diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 33e6c8aa8..cdc7f682f 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -92,6 +92,8 @@ type Name = | 'layout-grid' | 'arrow-down' | 'share' + | 'maximize' + | 'minimize' export interface IIcon extends SVGProps { name: Name diff --git a/src/containers/ProtocolOverview/Chart/Chart.tsx b/src/containers/ProtocolOverview/Chart/Chart.tsx index 7d967f46f..95ba3b177 100644 --- a/src/containers/ProtocolOverview/Chart/Chart.tsx +++ b/src/containers/ProtocolOverview/Chart/Chart.tsx @@ -27,6 +27,7 @@ export default function ProtocolLineBarChart({ unlockTokenSymbol = '', isThemeDark, groupBy, + isLogScale = false, ...props }) { const id = useId() @@ -174,7 +175,7 @@ export default function ProtocolLineBarChart({ // create instance const chartInstance = createInstance() - const { graphic, tooltip, xAxis, yAxis, dataZoom } = defaultChartSettings + const { graphic, tooltip, xAxis, yAxis: defaultYAxis, dataZoom } = defaultChartSettings for (const option in chartOptions) { if (defaultChartSettings[option]) { @@ -192,7 +193,7 @@ export default function ProtocolLineBarChart({ allYAxis.forEach(([type, index]) => { const options = { - ...yAxis, + ...defaultYAxis, name: '', type: 'value', alignTicks: true, @@ -203,7 +204,7 @@ export default function ProtocolLineBarChart({ } if (type === 'TVL') { - finalYAxis.push(yAxis) + finalYAxis.push(defaultYAxis) } if (type === 'Token Price') { @@ -506,9 +507,17 @@ export default function ProtocolLineBarChart({ }) if (allYAxis.length === 0) { - finalYAxis.push(yAxis) + finalYAxis.push(defaultYAxis) } + const yAxis = !isLogScale + ? finalYAxis + : finalYAxis.map((axis) => ({ + ...axis, + type: 'log', + startValue: 1 + })) + chartInstance.setOption({ graphic, tooltip, @@ -521,7 +530,7 @@ export default function ProtocolLineBarChart({ outerBoundsContain: 'axisLabel' }, xAxis, - yAxis: finalYAxis, + yAxis: yAxis, ...(series.every((s) => s.data.length > 1) ? { dataZoom } : {}), series }) @@ -544,7 +553,9 @@ export default function ProtocolLineBarChart({ unlockTokenSymbol, chartColors, allYAxis, - rangeHallmarks + rangeHallmarks, + height, + isLogScale ]) return ( diff --git a/src/containers/ProtocolOverview/Chart/ProtocolChart.tsx b/src/containers/ProtocolOverview/Chart/ProtocolChart.tsx index 44ee3b22c..6311f189d 100644 --- a/src/containers/ProtocolOverview/Chart/ProtocolChart.tsx +++ b/src/containers/ProtocolOverview/Chart/ProtocolChart.tsx @@ -1,4 +1,4 @@ -import { lazy, memo, Suspense, useCallback, useMemo } from 'react' +import React, { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useRouter } from 'next/router' import * as Ariakit from '@ariakit/react' import { useQuery } from '@tanstack/react-query' @@ -54,6 +54,34 @@ const INTERVALS_LIST = ['daily', 'weekly', 'monthly', 'cumulative'] as const export const ProtocolChart = memo(function ProtocolChart(props: IProtocolOverviewPageData) { const router = useRouter() const [isThemeDark] = useDarkModeManager() + const chartContainerRef = useRef(null) + const [isFullscreen, setIsFullscreen] = useState(false) + const [isLogScale, setIsLogScale] = useState(true) + + useEffect(() => { + function handleFullscreenChange() { + setIsFullscreen(!!document.fullscreenElement) + } + + document.addEventListener('fullscreenchange', handleFullscreenChange) + return function cleanup() { + document.removeEventListener('fullscreenchange', handleFullscreenChange) + } + }, []) + + const toggleFullscreen = useCallback(async () => { + if (!chartContainerRef.current) return + + try { + if (!document.fullscreenElement) { + await chartContainerRef.current.requestFullscreen() + } else { + await document.exitFullscreen() + } + } catch (error) { + console.error('Error toggling fullscreen:', error) + } + }, []) const queryParamsString = useMemo(() => { const { tvl, ...rest } = router.query ?? {} @@ -161,13 +189,14 @@ export const ProtocolChart = memo(function ProtocolChart(props: IProtocolOvervie }) const metricsDialogStore = Ariakit.useDialogStore() + const chartSettingsPopover = Ariakit.usePopoverStore() const prepareCsv = useCallback(() => { return prepareChartCsv(finalCharts, `${props.name}.csv`) }, [finalCharts, props.name]) return ( -
+
{props.availableCharts.length > 0 ? ( @@ -175,7 +204,7 @@ export const ProtocolChart = memo(function ProtocolChart(props: IProtocolOvervie Add Metrics - + Add metrics to chart @@ -362,25 +391,66 @@ export const ProtocolChart = memo(function ProtocolChart(props: IProtocolOvervie ) : null} + + + + + Chart Settings + + + + +
-
+
{loadingCharts ? ( -

+

fetching {loadingCharts}

) : ( - }> + + } + > )}