From 5683d7b187997c1629171e79461f3cd6b919ffff Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 25 Jan 2022 13:42:16 +0000
Subject: [PATCH] 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<Error>()
   const [isLoading, setIsLoading] = useState(true)
   const [dataHistory, setDataHistory] = useState<PoolHistory>()
-  const [graphData, setGraphData] = useState<ChartData>()
+  const [graphData, setGraphData] = useState<ChartData<any>>()
   const [graphFetchInterval, setGraphFetchInterval] = useState<NodeJS.Timeout>()
 
   // 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 {
         <>
           <Nav graphType={graphType} setGraphType={setGraphType} />
 
-          <Chart
-            type={graphType === 'volume' ? 'bar' : 'line'}
-            width={416}
-            height={90}
-            data={graphData}
-            options={options}
-            redraw
-          />
+          {graphType === 'volume' ? (
+            <Bar width={416} height={120} data={graphData} options={options} />
+          ) : (
+            <Line width={416} height={120} data={graphData} options={options} />
+          )}
         </>
       )}
     </div>