diff --git a/src/components/Asset/AssetActions/Pool/Graph/_utils.ts b/src/components/Asset/AssetActions/Pool/Graph/_utils.ts index 4c5b3a0d7..1396ba033 100644 --- a/src/components/Asset/AssetActions/Pool/Graph/_utils.ts +++ b/src/components/Asset/AssetActions/Pool/Graph/_utils.ts @@ -27,7 +27,7 @@ export function getOptions(locale: string, isDarkMode: boolean): ChartOptions { }, hover: { intersect: false }, scales: { - y: { display: false }, + y: { display: false, beginAtZero: true }, x: { display: false } } } diff --git a/src/components/Asset/AssetActions/Pool/Graph/index.module.css b/src/components/Asset/AssetActions/Pool/Graph/index.module.css index 89a92cee9..3a696bfcb 100644 --- a/src/components/Asset/AssetActions/Pool/Graph/index.module.css +++ b/src/components/Asset/AssetActions/Pool/Graph/index.module.css @@ -1,5 +1,5 @@ .graphWrap { - min-height: 90px; + min-height: 120px; display: flex; align-items: center; justify-content: center; diff --git a/src/components/Asset/AssetActions/Pool/Graph/index.tsx b/src/components/Asset/AssetActions/Pool/Graph/index.tsx index 1cf66f715..51929f42c 100644 --- a/src/components/Asset/AssetActions/Pool/Graph/index.tsx +++ b/src/components/Asset/AssetActions/Pool/Graph/index.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react' import { ChartData, ChartOptions } from 'chart.js' -import { Chart } from 'react-chartjs-2' +import { Bar, Chart, Line } from 'react-chartjs-2' import Loader from '@shared/atoms/Loader' import { useUserPreferences } from '@context/UserPreferences' import useDarkMode from 'use-dark-mode' @@ -26,7 +26,7 @@ export default function Graph(): ReactElement { const [error, setError] = useState() const [isLoading, setIsLoading] = useState(true) const [dataHistory, setDataHistory] = useState() - const [graphData, setGraphData] = useState() + const [graphData, setGraphData] = useState>() const [graphFetchInterval, setGraphFetchInterval] = useState() // Helper: fetch pool snapshots data @@ -71,10 +71,10 @@ export default function Graph(): ReactElement { // 0 Get Graph options // useEffect(() => { - LoggerInstance.log('[pool graph] Fired getOptions() for color scheme.') + LoggerInstance.log('[pool graph] Fired getOptions().') const options = getOptions(locale, darkMode.value) setOptions(options) - }, [locale, darkMode.value]) + }, [locale, darkMode.value, graphType]) // // 1 Fetch all the data on mount @@ -112,7 +112,7 @@ export default function Graph(): ReactElement { volumeCumulative = new Decimal(volumeCumulative) .add(item.swapVolume) .toString() - return baseTokenLiquidityCumulative + return volumeCumulative }) let data @@ -146,14 +146,11 @@ export default function Graph(): ReactElement { <>