From 56314e2c164ab222702771c136c7d7c44f6bbd42 Mon Sep 17 00:00:00 2001
From: KedharnathS <kedharnath.sompalli@accenture.com>
Date: Thu, 3 Nov 2022 09:44:40 +0000
Subject: [PATCH] fixed Diem in Circulation  graph  no data  issue

---
 .../DiemInCirculationPage.tsx                 | 49 ++++++++++++++-----
 src/Pages/VaspsPage/VaspsPage.tsx             |  6 +--
 src/main.css                                  |  9 ++++
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/src/Pages/DiemInCirculationPage/DiemInCirculationPage.tsx b/src/Pages/DiemInCirculationPage/DiemInCirculationPage.tsx
index cbdf3c9..0688096 100644
--- a/src/Pages/DiemInCirculationPage/DiemInCirculationPage.tsx
+++ b/src/Pages/DiemInCirculationPage/DiemInCirculationPage.tsx
@@ -12,7 +12,7 @@ import {
   diemInCirculationHistoryQuery,
   DiemInCirculationHistoryType,
 } from '../../api_clients/AnalyticsQueries'
-import { Line, LineChart, XAxis, YAxis } from 'recharts'
+import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts'
 import moment from 'moment'
 import { FetchError } from '../../api_clients/FetchTypes'
 import { Card } from 'react-bootstrap'
@@ -42,6 +42,26 @@ type DiemInCirculationResponse = {
 const DiemInCirculationGraph: React.FC<{ data: DiemCirculationHistory[] }> = ({
   data,
 }) => {
+  const customTooltipOnYourLine = (e: any) => {
+    if (e.active && e.payload != null && e.payload[0] != null) {
+      return (<div className="custom-tooltip">
+        <p className='graphTooltip'>{e.payload[0].payload["totalNet"]}</p>
+      </div>);
+    }
+    else {
+      return "";
+    }
+  }
+  const graphWidth = (len: number) => {
+    let gWidth = 350;
+    if (len > 1 && len < 8) {
+      gWidth = len * 135
+    }
+    else if (len >= 8) {
+      gWidth = 850
+    }
+    return gWidth
+  }
   return (
     <Card
       data-testid='circulation-graph-card'
@@ -49,18 +69,23 @@ const DiemInCirculationGraph: React.FC<{ data: DiemCirculationHistory[] }> = ({
     >
       <Card.Header>Diem In Circulation History In Past Week</Card.Header>
       <Card.Body>
-        <LineChart width={500} height={300} data={data}>
-          <XAxis
-            dataKey='timestamp'
-            tickFormatter={(timestamp) =>
-              moment(timestamp).format('MM/DD HH:mm')
-            }
-          />
-          <YAxis />
-          <Line type='monotone' dataKey='totalNet' stroke='#82ca9d' />
-        </LineChart>
+        {data.length > 0 ?
+          <LineChart width={graphWidth(data.length)} height={300} data={data}
+            margin={{ top: 10, bottom: 10, left: 100, right: 10 }}
+          >
+            <CartesianGrid strokeDasharray="2 7" />
+            <XAxis padding={{ left: 30, right: 30 }}
+              dataKey='timestamp'
+              tickFormatter={(timestamp) =>
+                moment(timestamp).format('MM/DD HH:mm')
+              }
+            />
+            <YAxis dataKey='totalNet' />
+            <Tooltip content={customTooltipOnYourLine} />
+            <Line type='monotone' dataKey='totalNet' stroke='#8884d8' />
+          </LineChart> : "No Data Available"}
       </Card.Body>
-    </Card>
+    </Card >
   )
 }
 
diff --git a/src/Pages/VaspsPage/VaspsPage.tsx b/src/Pages/VaspsPage/VaspsPage.tsx
index 7f7b73e..dcbe860 100644
--- a/src/Pages/VaspsPage/VaspsPage.tsx
+++ b/src/Pages/VaspsPage/VaspsPage.tsx
@@ -1,6 +1,6 @@
 
 import React, { useEffect, useState } from 'react'
-import ApiRequestComponent, { PlainErrorComponent, PlainLoadingComponent } from '../../ApiRequestComponent'
+import ApiRequestComponent, { FullPageLoadingComponent, PlainErrorComponent } from '../../ApiRequestComponent'
 import { postQueryToAnalyticsApi } from '../../api_clients/AnalyticsClient'
 import { FetchError } from '../../api_clients/FetchTypes'
 import MainWrapper from '../../MainWrapper'
@@ -20,7 +20,7 @@ export function VaspTbl({
         return vaspRes.length > count
     }
     const nameValidate = (data: any) => {
-        return <span>Vasp Name {data.row.index}</span>
+        return <span>No.  {data.row.index + 1} VASP</span>
     }
 
     return (
@@ -97,7 +97,7 @@ export default function VaspsPage() {
                 </header>
                 <ApiRequestComponent
                     request={handleData}
-                    loadingComponent={<PlainLoadingComponent />}
+                    loadingComponent={<FullPageLoadingComponent />}
                     errorComponent={<PlainErrorComponent />}
                 >
                     <div>
diff --git a/src/main.css b/src/main.css
index 59a374e..d660608 100644
--- a/src/main.css
+++ b/src/main.css
@@ -45,4 +45,13 @@
 
 .vasp .form-check-input:focus {
   box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 10%);
+}
+
+.vasp {
+  margin-top: 15px;
+}
+
+.graphTooltip {
+  padding: 5px;
+  border: 1px solid;
 }
\ No newline at end of file