From 7a5651e3a89b40a5ceb7539382960e1ee537c26b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Jan 2022 12:53:10 +0000 Subject: [PATCH] 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 {