From d43920548f1af87d715d111db0427763a44685dd Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Jan 2022 17:11:12 +0000 Subject: [PATCH 01/15] fix liquidity & price graph --- .../Asset/AssetActions/Pool/Graph.tsx | 29 +++++++++++-------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/components/Asset/AssetActions/Pool/Graph.tsx b/src/components/Asset/AssetActions/Pool/Graph.tsx index 2abdd2da5..1db7ac9e1 100644 --- a/src/components/Asset/AssetActions/Pool/Graph.tsx +++ b/src/components/Asset/AssetActions/Pool/Graph.tsx @@ -26,6 +26,7 @@ import { gql, OperationResult } from 'urql' import { PoolHistory } from '../../../../@types/subgraph/PoolHistory' import { fetchData, getQueryContext } from '@utils/subgraph' import styles from './Graph.module.css' +import Decimal from 'decimal.js' declare type GraphType = 'liquidity' | 'price' @@ -167,20 +168,24 @@ export default function Graph(): ReactElement { } LoggerInstance.log('Fired GraphData!') - const latestTimestamps = [ - ...dataHistory.poolSnapshots.map((item) => { - const date = new Date(item.date * 1000) - return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` - }) - ] + const latestTimestamps = dataHistory.poolSnapshots.map((item) => { + const date = new Date(item.date * 1000) + return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` + }) - const latestLiquidityHistory = [ - ...dataHistory.poolSnapshots.map((item) => item.baseTokenLiquidity) - ] + let baseTokenLiquidityCumulative = '0' - const latestPriceHistory = [ - ...dataHistory.poolSnapshots.map((item) => item.datatokenLiquidity) - ] + const latestLiquidityHistory = dataHistory.poolSnapshots.map((item) => { + baseTokenLiquidityCumulative = new Decimal(baseTokenLiquidityCumulative) + .add(item.baseTokenLiquidity) + .toString() + + return baseTokenLiquidityCumulative + }) + + const latestPriceHistory = dataHistory.poolSnapshots.map( + (item) => item.spotPrice + ) setGraphData({ labels: latestTimestamps.slice(0), From 52437616f2f1b45ee934e56e6d05262a42a21e08 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Jan 2022 17:39:41 +0000 Subject: [PATCH 02/15] add volume graph --- .../Asset/AssetActions/Pool/Graph.tsx | 50 +++++++++++++------ 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/src/components/Asset/AssetActions/Pool/Graph.tsx b/src/components/Asset/AssetActions/Pool/Graph.tsx index 1db7ac9e1..d62e73d11 100644 --- a/src/components/Asset/AssetActions/Pool/Graph.tsx +++ b/src/components/Asset/AssetActions/Pool/Graph.tsx @@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react' -import { Line, defaults } from 'react-chartjs-2' +import { Line, defaults, Bar } from 'react-chartjs-2' import { ChartData, ChartDataSets, @@ -28,7 +28,7 @@ import { fetchData, getQueryContext } from '@utils/subgraph' import styles from './Graph.module.css' import Decimal from 'decimal.js' -declare type GraphType = 'liquidity' | 'price' +declare type GraphType = 'liquidity' | 'price' | 'volume' // Chart.js global defaults defaults.global.defaultFontFamily = `'Sharp Sans', -apple-system, BlinkMacSystemFont, @@ -108,7 +108,7 @@ function getOptions(locale: string, isDarkMode: boolean): ChartOptions { } } -const graphTypes = ['Liquidity', 'Price'] +const graphTypes = ['Liquidity', 'Price', 'Volume'] const poolHistoryQuery = gql` query PoolHistory($id: String!) { @@ -117,6 +117,7 @@ const poolHistoryQuery = gql` spotPrice baseTokenLiquidity datatokenLiquidity + swapVolume } } ` @@ -168,35 +169,51 @@ export default function Graph(): ReactElement { } LoggerInstance.log('Fired GraphData!') - const latestTimestamps = dataHistory.poolSnapshots.map((item) => { + const timestamps = dataHistory.poolSnapshots.map((item) => { const date = new Date(item.date * 1000) return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` }) let baseTokenLiquidityCumulative = '0' - - const latestLiquidityHistory = dataHistory.poolSnapshots.map((item) => { + const liquidityHistory = dataHistory.poolSnapshots.map((item) => { baseTokenLiquidityCumulative = new Decimal(baseTokenLiquidityCumulative) .add(item.baseTokenLiquidity) .toString() - return baseTokenLiquidityCumulative }) - const latestPriceHistory = dataHistory.poolSnapshots.map( + const priceHistory = dataHistory.poolSnapshots.map( (item) => item.spotPrice ) + let volumeCumulative = '0' + const volumeHistory = dataHistory.poolSnapshots.map((item) => { + volumeCumulative = new Decimal(volumeCumulative) + .add(item.swapVolume) + .toString() + return baseTokenLiquidityCumulative + }) + + let data + switch (graphType) { + case 'price': + data = priceHistory.slice(0) + break + case 'volume': + data = volumeHistory.slice(0) + break + default: + data = liquidityHistory.slice(0) + break + } + setGraphData({ - labels: latestTimestamps.slice(0), + labels: timestamps.slice(0), datasets: [ { ...lineStyle, label: 'Liquidity (OCEAN)', - data: - graphType === 'liquidity' - ? latestLiquidityHistory.slice(0) - : latestPriceHistory.slice(0), + data, borderColor: `#8b98a9`, pointBackgroundColor: `#8b98a9` } @@ -238,7 +255,12 @@ export default function Graph(): ReactElement { ))} - + + {graphType === 'volume' ? ( + + ) : ( + + )} )} From 1e4446116b14d6bfedd1b586d3ef4890b1f1e12c Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 24 Jan 2022 19:11:59 +0000 Subject: [PATCH 03/15] update and migrate to chart.js & react-chartjs new major versions --- package-lock.json | 94 ++++----------- package.json | 4 +- .../Asset/AssetActions/Pool/Graph.tsx | 107 +++++++++--------- 3 files changed, 81 insertions(+), 124 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3f3189e71..13e168635 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "@walletconnect/web3-provider": "^1.7.1", "axios": "^0.24.0", "bignumber.js": "^9.0.2", - "chart.js": "^2.9.4", + "chart.js": "^3.7.0", "classnames": "^2.3.1", "d3": "^7.3.0", "date-fns": "^2.28.0", @@ -42,7 +42,7 @@ "query-string": "^7.1.0", "querystring": "^0.2.1", "react": "^17.0.2", - "react-chartjs-2": "^2.11.2", + "react-chartjs-2": "^4.0.1", "react-clipboard.js": "^2.0.16", "react-data-table-component": "^6.11.7", "react-dom": "^17.0.2", @@ -9724,30 +9724,9 @@ "dev": true }, "node_modules/chart.js": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", - "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", - "dependencies": { - "chartjs-color": "^2.1.0", - "moment": "^2.10.2" - } - }, - "node_modules/chartjs-color": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", - "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", - "dependencies": { - "chartjs-color-string": "^0.6.0", - "color-convert": "^1.9.3" - } - }, - "node_modules/chartjs-color-string": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", - "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", - "dependencies": { - "color-name": "^1.0.0" - } + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz", + "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==" }, "node_modules/check-error": { "version": "1.0.2", @@ -10458,7 +10437,8 @@ "node_modules/color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "node_modules/colorette": { "version": "1.4.0", @@ -19979,6 +19959,7 @@ "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "dev": true, "engines": { "node": "*" } @@ -21883,17 +21864,12 @@ } }, "node_modules/react-chartjs-2": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz", - "integrity": "sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==", - "dependencies": { - "lodash": "^4.17.19", - "prop-types": "^15.7.2" - }, + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz", + "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==", "peerDependencies": { - "chart.js": "^2.3", - "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", - "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + "chart.js": "^3.5.0", + "react": "^16.8.0 || ^17.0.0" } }, "node_modules/react-clipboard.js": { @@ -35769,30 +35745,9 @@ "dev": true }, "chart.js": { - "version": "2.9.4", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", - "integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", - "requires": { - "chartjs-color": "^2.1.0", - "moment": "^2.10.2" - } - }, - "chartjs-color": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz", - "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==", - "requires": { - "chartjs-color-string": "^0.6.0", - "color-convert": "^1.9.3" - } - }, - "chartjs-color-string": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz", - "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==", - "requires": { - "color-name": "^1.0.0" - } + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.0.tgz", + "integrity": "sha512-31gVuqqKp3lDIFmzpKIrBeum4OpZsQjSIAqlOpgjosHDJZlULtvwLEZKtEhIAZc7JMPaHlYMys40Qy9Mf+1AAg==" }, "check-error": { "version": "1.0.2", @@ -36341,7 +36296,8 @@ "color-name": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true }, "colorette": { "version": "1.4.0", @@ -43782,7 +43738,8 @@ "moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", - "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "dev": true }, "mri": { "version": "1.2.0", @@ -45247,13 +45204,10 @@ } }, "react-chartjs-2": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.11.2.tgz", - "integrity": "sha512-hcPS9vmRJeAALPPf0uo02BiD8BDm0HNmneJYTZVR74UKprXOpql+Jy1rVuj93rKw0Jfx77mkcRfXPxTe5K83uw==", - "requires": { - "lodash": "^4.17.19", - "prop-types": "^15.7.2" - } + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.0.1.tgz", + "integrity": "sha512-q8bgWzKoFvBvD7YcjT/hXG8jt55TaMAuJ1dmI3tKFJ7CijUWYz4pIfOhkTI6PBTwqu/pmeWsClBRd/7HiWzN1g==", + "requires": {} }, "react-clipboard.js": { "version": "2.0.16", diff --git a/package.json b/package.json index ab0da8d5f..83969af5f 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@walletconnect/web3-provider": "^1.7.1", "axios": "^0.24.0", "bignumber.js": "^9.0.2", - "chart.js": "^2.9.4", + "chart.js": "^3.7.0", "classnames": "^2.3.1", "d3": "^7.3.0", "date-fns": "^2.28.0", @@ -50,7 +50,7 @@ "query-string": "^7.1.0", "querystring": "^0.2.1", "react": "^17.0.2", - "react-chartjs-2": "^2.11.2", + "react-chartjs-2": "^4.0.1", "react-clipboard.js": "^2.0.16", "react-data-table-component": "^6.11.7", "react-dom": "^17.0.2", diff --git a/src/components/Asset/AssetActions/Pool/Graph.tsx b/src/components/Asset/AssetActions/Pool/Graph.tsx index d62e73d11..682defd04 100644 --- a/src/components/Asset/AssetActions/Pool/Graph.tsx +++ b/src/components/Asset/AssetActions/Pool/Graph.tsx @@ -1,4 +1,3 @@ -/* eslint-disable camelcase */ import React, { ChangeEvent, ReactElement, @@ -6,14 +5,24 @@ import React, { useEffect, useState } from 'react' -import { Line, defaults, Bar } from 'react-chartjs-2' import { + Chart as ChartJS, + LinearScale, + CategoryScale, + PointElement, + Tooltip, ChartData, - ChartDataSets, ChartOptions, - ChartTooltipItem, - ChartTooltipOptions + defaults, + ChartDataset, + TooltipOptions, + TooltipItem, + BarElement, + LineElement, + LineController, + BarController } from 'chart.js' +import { Chart } from 'react-chartjs-2' import Loader from '@shared/atoms/Loader' import { formatPrice } from '@shared/Price/PriceUnit' import { useUserPreferences } from '@context/UserPreferences' @@ -28,18 +37,28 @@ import { fetchData, getQueryContext } from '@utils/subgraph' import styles from './Graph.module.css' import Decimal from 'decimal.js' +ChartJS.register( + LineElement, + BarElement, + PointElement, + LinearScale, + CategoryScale, + // Title, + Tooltip, + LineController, + BarController +) + declare type GraphType = 'liquidity' | 'price' | 'volume' // Chart.js global defaults -defaults.global.defaultFontFamily = `'Sharp Sans', -apple-system, BlinkMacSystemFont, -'Segoe UI', Helvetica, Arial, sans-serif` -defaults.global.animation = { easing: 'easeInOutQuart', duration: 1000 } +defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` +defaults.animation = { easing: 'easeInOutQuart', duration: 1000 } const REFETCH_INTERVAL = 10000 -const lineStyle: Partial = { +const lineStyle: Partial = { fill: false, - lineTension: 0.1, borderWidth: 2, pointBorderWidth: 0, pointRadius: 0, @@ -49,15 +68,10 @@ const lineStyle: Partial = { pointHoverBackgroundColor: '#ff4092' } -const tooltipOptions: Partial = { +const tooltipOptions: Partial = { intersect: false, - titleFontStyle: 'normal', - titleFontSize: 10, - bodyFontSize: 12, - bodyFontStyle: 'bold', displayColors: false, - xPadding: 10, - yPadding: 10, + padding: 10, cornerRadius: 3, borderWidth: 1, caretSize: 7 @@ -73,37 +87,23 @@ function getOptions(locale: string, isDarkMode: boolean): ChartOptions { bottom: 10 } }, - tooltips: { - ...tooltipOptions, - backgroundColor: isDarkMode ? `#141414` : `#fff`, - titleFontColor: isDarkMode ? `#e2e2e2` : `#303030`, - bodyFontColor: isDarkMode ? `#fff` : `#141414`, - borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, - callbacks: { - label: (tooltipItem: ChartTooltipItem) => - `${formatPrice(`${tooltipItem.yLabel}`, locale)} OCEAN` + plugins: { + tooltip: { + ...tooltipOptions, + backgroundColor: isDarkMode ? `#141414` : `#fff`, + titleColor: isDarkMode ? `#e2e2e2` : `#303030`, + bodyColor: isDarkMode ? `#fff` : `#141414`, + borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, + callbacks: { + label: (tooltipItem: TooltipItem) => + `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN` + } } }, - legend: { - display: false - }, - hover: { - intersect: false, - animationDuration: 0 - }, + hover: { intersect: false }, scales: { - yAxes: [ - { - display: false - // gridLines: { - // drawBorder: false, - // color: isDarkMode ? '#303030' : '#e2e2e2', - // zeroLineColor: isDarkMode ? '#303030' : '#e2e2e2' - // }, - // ticks: { display: false } - } - ], - xAxes: [{ display: false, gridLines: { display: true } }] + y: { display: false }, + x: { display: false } } } } @@ -126,6 +126,7 @@ export default function Graph(): ReactElement { const { locale } = useUserPreferences() const { price, ddo } = useAsset() const darkMode = useDarkMode(false, darkModeConfig) + const [options, setOptions] = useState() const [graphType, setGraphType] = useState('liquidity') const [error, setError] = useState() @@ -214,8 +215,7 @@ export default function Graph(): ReactElement { ...lineStyle, label: 'Liquidity (OCEAN)', data, - borderColor: `#8b98a9`, - pointBackgroundColor: `#8b98a9` + borderColor: `#8b98a9` } ] }) @@ -256,11 +256,14 @@ export default function Graph(): ReactElement { ))} - {graphType === 'volume' ? ( - - ) : ( - - )} + )} From 58f1c884de1ad8501d486bf9470b88e019e12350 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Jan 2022 12:32:49 +0000 Subject: [PATCH 04/15] split up fetching & data manipulation, refactor --- .../Asset/AssetActions/Pool/Graph.tsx | 271 ------------------ .../Nav.module.css} | 21 -- .../Asset/AssetActions/Pool/Graph/Nav.tsx | 40 +++ .../AssetActions/Pool/Graph/_constants.ts | 75 +++++ .../AssetActions/Pool/Graph/index.module.css | 20 ++ .../Asset/AssetActions/Pool/Graph/index.tsx | 202 +++++++++++++ 6 files changed, 337 insertions(+), 292 deletions(-) delete mode 100644 src/components/Asset/AssetActions/Pool/Graph.tsx rename src/components/Asset/AssetActions/Pool/{Graph.module.css => Graph/Nav.module.css} (59%) create mode 100644 src/components/Asset/AssetActions/Pool/Graph/Nav.tsx create mode 100644 src/components/Asset/AssetActions/Pool/Graph/_constants.ts create mode 100644 src/components/Asset/AssetActions/Pool/Graph/index.module.css create mode 100644 src/components/Asset/AssetActions/Pool/Graph/index.tsx diff --git a/src/components/Asset/AssetActions/Pool/Graph.tsx b/src/components/Asset/AssetActions/Pool/Graph.tsx deleted file mode 100644 index 682defd04..000000000 --- a/src/components/Asset/AssetActions/Pool/Graph.tsx +++ /dev/null @@ -1,271 +0,0 @@ -import React, { - ChangeEvent, - ReactElement, - useCallback, - useEffect, - useState -} from 'react' -import { - Chart as ChartJS, - LinearScale, - CategoryScale, - PointElement, - Tooltip, - ChartData, - ChartOptions, - defaults, - ChartDataset, - TooltipOptions, - TooltipItem, - BarElement, - LineElement, - LineController, - BarController -} from 'chart.js' -import { Chart } from 'react-chartjs-2' -import Loader from '@shared/atoms/Loader' -import { formatPrice } from '@shared/Price/PriceUnit' -import { useUserPreferences } from '@context/UserPreferences' -import useDarkMode from 'use-dark-mode' -import { darkModeConfig } from '../../../../../app.config' -import Button from '@shared/atoms/Button' -import { LoggerInstance } from '@oceanprotocol/lib' -import { useAsset } from '@context/Asset' -import { gql, OperationResult } from 'urql' -import { PoolHistory } from '../../../../@types/subgraph/PoolHistory' -import { fetchData, getQueryContext } from '@utils/subgraph' -import styles from './Graph.module.css' -import Decimal from 'decimal.js' - -ChartJS.register( - LineElement, - BarElement, - PointElement, - LinearScale, - CategoryScale, - // Title, - Tooltip, - LineController, - BarController -) - -declare type GraphType = 'liquidity' | 'price' | 'volume' - -// Chart.js global defaults -defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` -defaults.animation = { easing: 'easeInOutQuart', duration: 1000 } - -const REFETCH_INTERVAL = 10000 - -const lineStyle: Partial = { - fill: false, - borderWidth: 2, - pointBorderWidth: 0, - pointRadius: 0, - pointHoverRadius: 4, - pointHoverBorderWidth: 0, - pointHitRadius: 2, - pointHoverBackgroundColor: '#ff4092' -} - -const tooltipOptions: Partial = { - intersect: false, - displayColors: false, - padding: 10, - cornerRadius: 3, - borderWidth: 1, - caretSize: 7 -} - -function getOptions(locale: string, isDarkMode: boolean): ChartOptions { - return { - layout: { - padding: { - left: 0, - right: 0, - top: 0, - bottom: 10 - } - }, - plugins: { - tooltip: { - ...tooltipOptions, - backgroundColor: isDarkMode ? `#141414` : `#fff`, - titleColor: isDarkMode ? `#e2e2e2` : `#303030`, - bodyColor: isDarkMode ? `#fff` : `#141414`, - borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, - callbacks: { - label: (tooltipItem: TooltipItem) => - `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN` - } - } - }, - hover: { intersect: false }, - scales: { - y: { display: false }, - x: { display: false } - } - } -} - -const graphTypes = ['Liquidity', 'Price', 'Volume'] - -const poolHistoryQuery = gql` - query PoolHistory($id: String!) { - poolSnapshots(first: 1000, where: { pool: $id }, orderBy: date) { - date - spotPrice - baseTokenLiquidity - datatokenLiquidity - swapVolume - } - } -` - -export default function Graph(): ReactElement { - const { locale } = useUserPreferences() - const { price, ddo } = useAsset() - const darkMode = useDarkMode(false, darkModeConfig) - - const [options, setOptions] = useState() - const [graphType, setGraphType] = useState('liquidity') - const [error, setError] = useState() - const [isLoading, setIsLoading] = useState(true) - const [dataHistory, setDataHistory] = useState() - const [graphData, setGraphData] = useState() - const [graphFetchInterval, setGraphFetchInterval] = useState() - - const getPoolHistory = useCallback(async () => { - try { - const queryResult: OperationResult = await fetchData( - poolHistoryQuery, - { id: price.address.toLowerCase() }, - getQueryContext(ddo.chainId) - ) - setDataHistory(queryResult?.data) - } catch (error) { - console.error('Error fetchData: ', error.message) - setError(error) - } - }, [ddo?.chainId, price?.address]) - - const refetchGraph = useCallback(async () => { - if (graphFetchInterval) return - - const newInterval = setInterval(() => getPoolHistory(), REFETCH_INTERVAL) - setGraphFetchInterval(newInterval) - }, [getPoolHistory, graphFetchInterval]) - - useEffect(() => { - LoggerInstance.log('Fired GraphOptions!') - const options = getOptions(locale, darkMode.value) - setOptions(options) - }, [locale, darkMode.value]) - - useEffect(() => { - async function init() { - if (!dataHistory) { - await getPoolHistory() - return - } - LoggerInstance.log('Fired GraphData!') - - const timestamps = dataHistory.poolSnapshots.map((item) => { - const date = new Date(item.date * 1000) - return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` - }) - - let baseTokenLiquidityCumulative = '0' - const liquidityHistory = dataHistory.poolSnapshots.map((item) => { - baseTokenLiquidityCumulative = new Decimal(baseTokenLiquidityCumulative) - .add(item.baseTokenLiquidity) - .toString() - return baseTokenLiquidityCumulative - }) - - const priceHistory = dataHistory.poolSnapshots.map( - (item) => item.spotPrice - ) - - let volumeCumulative = '0' - const volumeHistory = dataHistory.poolSnapshots.map((item) => { - volumeCumulative = new Decimal(volumeCumulative) - .add(item.swapVolume) - .toString() - return baseTokenLiquidityCumulative - }) - - let data - switch (graphType) { - case 'price': - data = priceHistory.slice(0) - break - case 'volume': - data = volumeHistory.slice(0) - break - default: - data = liquidityHistory.slice(0) - break - } - - setGraphData({ - labels: timestamps.slice(0), - datasets: [ - { - ...lineStyle, - label: 'Liquidity (OCEAN)', - data, - borderColor: `#8b98a9` - } - ] - }) - setIsLoading(false) - refetchGraph() - } - init() - - return () => clearInterval(graphFetchInterval) - }, [dataHistory, graphType, graphFetchInterval, getPoolHistory, refetchGraph]) - - function handleGraphTypeSwitch(e: ChangeEvent) { - e.preventDefault() - setGraphType(e.currentTarget.textContent.toLowerCase() as GraphType) - } - - return ( -
- {isLoading ? ( - - ) : error ? ( - {error.message} - ) : ( - <> - - - - - )} -
- ) -} diff --git a/src/components/Asset/AssetActions/Pool/Graph.module.css b/src/components/Asset/AssetActions/Pool/Graph/Nav.module.css similarity index 59% rename from src/components/Asset/AssetActions/Pool/Graph.module.css rename to src/components/Asset/AssetActions/Pool/Graph/Nav.module.css index 1aa5c5a32..27741c4be 100644 --- a/src/components/Asset/AssetActions/Pool/Graph.module.css +++ b/src/components/Asset/AssetActions/Pool/Graph/Nav.module.css @@ -1,24 +1,3 @@ -.graphWrap { - min-height: 97px; - display: flex; - align-items: center; - justify-content: center; - margin: calc(var(--spacer) / 6) -1.35rem calc(var(--spacer) / 1.5) -1.35rem; - position: relative; -} - -@media (min-width: 40rem) { - .graphWrap { - margin-left: -2rem; - margin-right: -2rem; - } -} - -.graphWrap canvas { - position: relative; - z-index: 0; -} - .type { position: absolute; bottom: -10px; diff --git a/src/components/Asset/AssetActions/Pool/Graph/Nav.tsx b/src/components/Asset/AssetActions/Pool/Graph/Nav.tsx new file mode 100644 index 000000000..4fef95a0c --- /dev/null +++ b/src/components/Asset/AssetActions/Pool/Graph/Nav.tsx @@ -0,0 +1,40 @@ +import Button from '@shared/atoms/Button' +import React, { + ChangeEvent, + Dispatch, + ReactElement, + SetStateAction +} from 'react' +import styles from './Nav.module.css' +import { graphTypes, GraphType } from './_constants' + +export default function Nav({ + graphType, + setGraphType +}: { + graphType: GraphType + setGraphType: Dispatch> +}): ReactElement { + function handleGraphTypeSwitch(e: ChangeEvent) { + e.preventDefault() + setGraphType(e.currentTarget.textContent.toLowerCase() as GraphType) + } + + return ( + + ) +} diff --git a/src/components/Asset/AssetActions/Pool/Graph/_constants.ts b/src/components/Asset/AssetActions/Pool/Graph/_constants.ts new file mode 100644 index 000000000..4716c1796 --- /dev/null +++ b/src/components/Asset/AssetActions/Pool/Graph/_constants.ts @@ -0,0 +1,75 @@ +import { formatPrice } from '@shared/Price/PriceUnit' +import { + ChartDataset, + TooltipOptions, + ChartOptions, + TooltipItem +} from 'chart.js' +import { gql } from 'urql' + +export declare type GraphType = 'liquidity' | 'price' | 'volume' + +export const poolHistoryQuery = gql` + query PoolHistory($id: String!) { + poolSnapshots(first: 1000, where: { pool: $id }, orderBy: date) { + date + spotPrice + baseTokenLiquidity + datatokenLiquidity + swapVolume + } + } +` + +export const lineStyle: Partial = { + fill: false, + borderWidth: 2, + pointBorderWidth: 0, + pointRadius: 0, + pointHoverRadius: 4, + pointHoverBorderWidth: 0, + pointHitRadius: 2, + pointHoverBackgroundColor: '#ff4092' +} + +export const tooltipOptions: Partial = { + intersect: false, + displayColors: false, + padding: 10, + cornerRadius: 3, + borderWidth: 1, + caretSize: 7 +} + +export function getOptions(locale: string, isDarkMode: boolean): ChartOptions { + return { + layout: { + padding: { + left: 0, + right: 0, + top: 0, + bottom: 10 + } + }, + plugins: { + tooltip: { + ...tooltipOptions, + backgroundColor: isDarkMode ? `#141414` : `#fff`, + titleColor: isDarkMode ? `#e2e2e2` : `#303030`, + bodyColor: isDarkMode ? `#fff` : `#141414`, + borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, + callbacks: { + label: (tooltipItem: TooltipItem) => + `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN` + } + } + }, + hover: { intersect: false }, + scales: { + y: { display: false }, + x: { display: false } + } + } +} + +export const graphTypes = ['Liquidity', 'Price', 'Volume'] diff --git a/src/components/Asset/AssetActions/Pool/Graph/index.module.css b/src/components/Asset/AssetActions/Pool/Graph/index.module.css new file mode 100644 index 000000000..12a4254b2 --- /dev/null +++ b/src/components/Asset/AssetActions/Pool/Graph/index.module.css @@ -0,0 +1,20 @@ +.graphWrap { + min-height: 97px; + display: flex; + align-items: center; + justify-content: center; + margin: calc(var(--spacer) / 6) -1.35rem calc(var(--spacer) / 1.5) -1.35rem; + position: relative; +} + +@media (min-width: 40rem) { + .graphWrap { + margin-left: -2rem; + margin-right: -2rem; + } +} + +.graphWrap canvas { + position: relative; + z-index: 0; +} diff --git a/src/components/Asset/AssetActions/Pool/Graph/index.tsx b/src/components/Asset/AssetActions/Pool/Graph/index.tsx new file mode 100644 index 000000000..556b03c22 --- /dev/null +++ b/src/components/Asset/AssetActions/Pool/Graph/index.tsx @@ -0,0 +1,202 @@ +import React, { + ChangeEvent, + ReactElement, + useCallback, + useEffect, + useState +} from 'react' +import { + Chart as ChartJS, + LinearScale, + CategoryScale, + PointElement, + Tooltip, + ChartData, + ChartOptions, + defaults, + ChartDataset, + TooltipOptions, + TooltipItem, + BarElement, + LineElement, + LineController, + BarController +} from 'chart.js' +import { Chart } from 'react-chartjs-2' +import Loader from '@shared/atoms/Loader' +import { useUserPreferences } from '@context/UserPreferences' +import useDarkMode from 'use-dark-mode' +import { darkModeConfig } from '../../../../../../app.config' +import { LoggerInstance } from '@oceanprotocol/lib' +import { useAsset } from '@context/Asset' +import { OperationResult } from 'urql' +import { PoolHistory } from '../../../../../@types/subgraph/PoolHistory' +import { fetchData, getQueryContext } from '@utils/subgraph' +import styles from './index.module.css' +import Decimal from 'decimal.js' +import { + poolHistoryQuery, + getOptions, + lineStyle, + GraphType +} from './_constants' +import Nav from './Nav' + +ChartJS.register( + LineElement, + BarElement, + PointElement, + LinearScale, + CategoryScale, + Tooltip, + LineController, + BarController +) + +// Chart.js global defaults +defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` +defaults.animation = { easing: 'easeInOutQuart', duration: 1000 } + +export default function Graph(): ReactElement { + const { locale } = useUserPreferences() + const { price, ddo, refreshInterval } = useAsset() + const darkMode = useDarkMode(false, darkModeConfig) + + const [options, setOptions] = useState() + const [graphType, setGraphType] = useState('liquidity') + const [error, setError] = useState() + const [isLoading, setIsLoading] = useState(true) + const [dataHistory, setDataHistory] = useState() + const [graphData, setGraphData] = useState() + const [graphFetchInterval, setGraphFetchInterval] = useState() + + // Helper: fetch pool snapshots data + const fetchPoolHistory = useCallback(async () => { + try { + const queryResult: OperationResult = await fetchData( + poolHistoryQuery, + { id: price.address.toLowerCase() }, + getQueryContext(ddo.chainId) + ) + setDataHistory(queryResult?.data) + setIsLoading(false) + + LoggerInstance.log( + `[pool graph] Fetched pool snapshots:`, + queryResult?.data + ) + } catch (error) { + LoggerInstance.error('[pool graph] Error fetchData: ', error.message) + setError(error) + } + }, [ddo?.chainId, price?.address]) + + // Helper: start interval fetching + const initFetchInterval = useCallback(() => { + if (graphFetchInterval) return + + const newInterval = setInterval(() => { + fetchPoolHistory() + LoggerInstance.log( + `[pool graph] Refetch interval fired after ${refreshInterval / 1000}s` + ) + }, refreshInterval) + setGraphFetchInterval(newInterval) + }, [fetchPoolHistory, graphFetchInterval, refreshInterval]) + + useEffect(() => { + return () => clearInterval(graphFetchInterval) + }, [graphFetchInterval]) + + // + // 0 Get Graph options + // + useEffect(() => { + LoggerInstance.log('[pool graph] Fired getOptions() for color scheme.') + const options = getOptions(locale, darkMode.value) + setOptions(options) + }, [locale, darkMode.value]) + + // + // 1 Fetch all the data on mount + // All further effects depend on the fetched data + // and only do further data checking and manipulation. + // + useEffect(() => { + fetchPoolHistory() + initFetchInterval() + }, [fetchPoolHistory, initFetchInterval]) + + // + // 2 Data manipulation + // + useEffect(() => { + if (!dataHistory?.poolSnapshots) return + + const timestamps = dataHistory.poolSnapshots.map((item) => { + const date = new Date(item.date * 1000) + return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}` + }) + + let baseTokenLiquidityCumulative = '0' + const liquidityHistory = dataHistory.poolSnapshots.map((item) => { + baseTokenLiquidityCumulative = new Decimal(baseTokenLiquidityCumulative) + .add(item.baseTokenLiquidity) + .toString() + return baseTokenLiquidityCumulative + }) + + const priceHistory = dataHistory.poolSnapshots.map((item) => item.spotPrice) + + let volumeCumulative = '0' + const volumeHistory = dataHistory.poolSnapshots.map((item) => { + volumeCumulative = new Decimal(volumeCumulative) + .add(item.swapVolume) + .toString() + return baseTokenLiquidityCumulative + }) + + let data + switch (graphType) { + case 'price': + data = priceHistory.slice(0) + break + case 'volume': + data = volumeHistory.slice(0) + break + default: + data = liquidityHistory.slice(0) + break + } + + const newGraphData = { + labels: timestamps.slice(0), + datasets: [{ ...lineStyle, data, borderColor: `#8b98a9` }] + } + setGraphData(newGraphData) + LoggerInstance.log('[pool graph] New graph data:', newGraphData) + }, [dataHistory?.poolSnapshots, graphType]) + + return ( +
+ {isLoading ? ( + + ) : error ? ( + {error.message} + ) : ( + <> +
+ ) +} From 7a5651e3a89b40a5ceb7539382960e1ee537c26b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Jan 2022 12:53:10 +0000 Subject: [PATCH 05/15] spacing, more file moving around --- .../AssetActions/Pool/Graph/_constants.ts | 63 ++++++++----------- .../Asset/AssetActions/Pool/Graph/_utils.ts | 34 ++++++++++ .../AssetActions/Pool/Graph/index.module.css | 2 +- .../Asset/AssetActions/Pool/Graph/index.tsx | 51 ++------------- 4 files changed, 67 insertions(+), 83 deletions(-) create mode 100644 src/components/Asset/AssetActions/Pool/Graph/_utils.ts diff --git a/src/components/Asset/AssetActions/Pool/Graph/_constants.ts b/src/components/Asset/AssetActions/Pool/Graph/_constants.ts index 4716c1796..2f09d6c83 100644 --- a/src/components/Asset/AssetActions/Pool/Graph/_constants.ts +++ b/src/components/Asset/AssetActions/Pool/Graph/_constants.ts @@ -1,14 +1,23 @@ -import { formatPrice } from '@shared/Price/PriceUnit' import { + Chart as ChartJS, + LinearScale, + CategoryScale, + PointElement, + Tooltip, + BarElement, + LineElement, + LineController, + BarController, ChartDataset, TooltipOptions, - ChartOptions, - TooltipItem + defaults } from 'chart.js' import { gql } from 'urql' export declare type GraphType = 'liquidity' | 'price' | 'volume' +export const graphTypes = ['Liquidity', 'Price', 'Volume'] + export const poolHistoryQuery = gql` query PoolHistory($id: String!) { poolSnapshots(first: 1000, where: { pool: $id }, orderBy: date) { @@ -21,6 +30,21 @@ export const poolHistoryQuery = gql` } ` +// Chart.js global defaults +ChartJS.register( + LineElement, + BarElement, + PointElement, + LinearScale, + CategoryScale, + Tooltip, + LineController, + BarController +) + +defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` +defaults.animation = { easing: 'easeInOutQuart', duration: 1000 } + export const lineStyle: Partial = { fill: false, borderWidth: 2, @@ -40,36 +64,3 @@ export const tooltipOptions: Partial = { borderWidth: 1, caretSize: 7 } - -export function getOptions(locale: string, isDarkMode: boolean): ChartOptions { - return { - layout: { - padding: { - left: 0, - right: 0, - top: 0, - bottom: 10 - } - }, - plugins: { - tooltip: { - ...tooltipOptions, - backgroundColor: isDarkMode ? `#141414` : `#fff`, - titleColor: isDarkMode ? `#e2e2e2` : `#303030`, - bodyColor: isDarkMode ? `#fff` : `#141414`, - borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, - callbacks: { - label: (tooltipItem: TooltipItem) => - `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN` - } - } - }, - hover: { intersect: false }, - scales: { - y: { display: false }, - x: { display: false } - } - } -} - -export const graphTypes = ['Liquidity', 'Price', 'Volume'] diff --git a/src/components/Asset/AssetActions/Pool/Graph/_utils.ts b/src/components/Asset/AssetActions/Pool/Graph/_utils.ts new file mode 100644 index 000000000..4c5b3a0d7 --- /dev/null +++ b/src/components/Asset/AssetActions/Pool/Graph/_utils.ts @@ -0,0 +1,34 @@ +import { formatPrice } from '@shared/Price/PriceUnit' +import { ChartOptions, TooltipItem } from 'chart.js' +import { tooltipOptions } from './_constants' + +export function getOptions(locale: string, isDarkMode: boolean): ChartOptions { + return { + layout: { + padding: { + left: 0, + right: 0, + top: 0, + bottom: 20 + } + }, + plugins: { + tooltip: { + ...tooltipOptions, + backgroundColor: isDarkMode ? `#141414` : `#fff`, + titleColor: isDarkMode ? `#e2e2e2` : `#303030`, + bodyColor: isDarkMode ? `#fff` : `#141414`, + borderColor: isDarkMode ? `#41474e` : `#e2e2e2`, + callbacks: { + label: (tooltipItem: TooltipItem) => + `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN` + } + } + }, + hover: { intersect: false }, + scales: { + y: { display: false }, + 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 12a4254b2..89a92cee9 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: 97px; + min-height: 90px; 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 556b03c22..1cf66f715 100644 --- a/src/components/Asset/AssetActions/Pool/Graph/index.tsx +++ b/src/components/Asset/AssetActions/Pool/Graph/index.tsx @@ -1,27 +1,5 @@ -import React, { - ChangeEvent, - ReactElement, - useCallback, - useEffect, - useState -} from 'react' -import { - Chart as ChartJS, - LinearScale, - CategoryScale, - PointElement, - Tooltip, - ChartData, - ChartOptions, - defaults, - ChartDataset, - TooltipOptions, - TooltipItem, - BarElement, - LineElement, - LineController, - BarController -} from 'chart.js' +import React, { ReactElement, useCallback, useEffect, useState } from 'react' +import { ChartData, ChartOptions } from 'chart.js' import { Chart } from 'react-chartjs-2' import Loader from '@shared/atoms/Loader' import { useUserPreferences } from '@context/UserPreferences' @@ -34,28 +12,9 @@ import { PoolHistory } from '../../../../../@types/subgraph/PoolHistory' import { fetchData, getQueryContext } from '@utils/subgraph' import styles from './index.module.css' import Decimal from 'decimal.js' -import { - poolHistoryQuery, - getOptions, - lineStyle, - GraphType -} from './_constants' +import { poolHistoryQuery, lineStyle, GraphType } from './_constants' import Nav from './Nav' - -ChartJS.register( - LineElement, - BarElement, - PointElement, - LinearScale, - CategoryScale, - Tooltip, - LineController, - BarController -) - -// Chart.js global defaults -defaults.font.family = `'Sharp Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif` -defaults.animation = { easing: 'easeInOutQuart', duration: 1000 } +import { getOptions } from './_utils' export default function Graph(): ReactElement { const { locale } = useUserPreferences() @@ -190,7 +149,7 @@ export default function Graph(): ReactElement { Date: Tue, 25 Jan 2022 13:42:16 +0000 Subject: [PATCH 06/15] re-render fixes --- .../Asset/AssetActions/Pool/Graph/_utils.ts | 2 +- .../AssetActions/Pool/Graph/index.module.css | 2 +- .../Asset/AssetActions/Pool/Graph/index.tsx | 23 ++++++++----------- 3 files changed, 12 insertions(+), 15 deletions(-) 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 { <>