spacing, more file moving around

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,
+  defaults
-  TooltipItem
 } 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<ChartDataset> = {
   fill: false,
   borderWidth: 2,
@@ -40,36 +64,3 @@ export const tooltipOptions: Partial<TooltipOptions> = {
   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<any>) =>
-            `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN`
-        }
-      }
-    },
-    hover: { intersect: false },
-    scales: {
-      y: { display: false },
-      x: { display: false }
-    }
-  }
-}
-
-export const graphTypes = ['Liquidity', 'Price', 'Volume']

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<any>) =>
+            `${formatPrice(`${tooltipItem.formattedValue}`, locale)} OCEAN`
+        }
+      }
+    },
+    hover: { intersect: false },
+    scales: {
+      y: { display: false },
+      x: { display: false }
+    }
+  }
+}

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;

src/components/Asset/AssetActions/Pool/Graph/index.tsx

@@ -1,27 +1,5 @@
-import React, {
+import React, { ReactElement, useCallback, useEffect, useState } from 'react'
-  ChangeEvent,
+import { ChartData, ChartOptions } from 'chart.js'
-  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'
@@ -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 {
+import { poolHistoryQuery, lineStyle, GraphType } from './_constants'
-  poolHistoryQuery,
-  getOptions,
-  lineStyle,
-  GraphType
-} from './_constants'
 import Nav from './Nav'
-
+import { getOptions } from './_utils'
-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()
@@ -190,7 +149,7 @@ export default function Graph(): ReactElement {
           <Chart
             type={graphType === 'volume' ? 'bar' : 'line'}
             width={416}
-            height={80}
+            height={90}
             data={graphData}
             options={options}
             redraw