#4 - client details expanded with graphs

src/components/ClientAllocationPage/index.js

@@ -14,38 +14,39 @@ import { calculateDateFromHeight } from '../../utils/height';
 import s from '../DashboardPageV2/s.module.css';
 import { palette } from '../../utils/colors';
 import { scaleSymlog } from 'd3-scale';
+import { ContentTabs } from '../ContentTabs';
 
 const table = [
   {
     key: 'verifierAddressId',
     title: 'Allocator ID',
-    linkPattern: '/notaries/:verifierAddressId',
+    linkPattern: '/notaries/:verifierAddressId'
   },
   {
     key: 'allowance',
     title: 'Total size',
     align: 'right',
-    convertToIEC: true,
+    convertToIEC: true
   },
   {
     key: 'height',
     title: 'Height',
-    align: 'right',
-  },
+    align: 'right'
+  }
 ];
 
 const totalTable = [
   {
     key: 'verifierAddressId',
     title: 'Allocator ID',
-    linkPattern: '/notaries/:verifierAddressId',
+    linkPattern: '/notaries/:verifierAddressId'
   },
   {
     key: 'allowance',
     title: 'Total size',
     align: 'right',
-    convertToIEC: true,
-  },
+    convertToIEC: true
+  }
 ];
 
 export default function ClientAllocationPage() {
@@ -66,7 +67,7 @@ export default function ClientAllocationPage() {
     for (const verifierAddressId in totalPerVerifier) {
       totalPerVerifierArray.push({
         verifierAddressId,
-        allowance: totalPerVerifier[verifierAddressId],
+        allowance: totalPerVerifier[verifierAddressId]
       });
     }
   }
@@ -104,14 +105,14 @@ export default function ClientAllocationPage() {
         verifierAddressId: item.verifierAddressId,
         allowance: +item.allowance,
         height: item.height,
-        auditTrail	: item.auditTrail	,
-        totalAllowance: returnData.reduce((acc, cur) => acc + +cur.allowance, 0) + +item.allowance,
+        auditTrail: item.auditTrail,
+        totalAllowance: returnData.reduce((acc, cur) => acc + +cur.allowance, 0) + +item.allowance
       });
     });
 
     console.log(returnData);
 
-    return returnData
+    return returnData;
 
   }, [data]);
 
@@ -127,52 +128,64 @@ export default function ClientAllocationPage() {
           tabs={[
             {
               name: 'DC claims',
-              url: `/clients/${clientID}/ddo-deals`,
+              url: `/clients/${clientID}/ddo-deals`
             },
             {
               name: `Verified deals prior to nv 22`,
-              url: `/clients/${clientID}`,
+              url: `/clients/${clientID}`
             },
             {
               name: 'Storage Providers breakdown',
-              url: `/clients/${clientID}/breakdown`,
+              url: `/clients/${clientID}/breakdown`
             },
             {
               name: 'Allocations breakdown',
-              url: `/clients/${clientID}/allocations`,
-            },
+              url: `/clients/${clientID}/allocations`
+            }
           ]}
           hideSearch
           csv={{
             table,
             fetchUrl,
             csvFilename,
-            itemsCount: data.data?.[0]?.allowanceArray?.length || 0,
+            itemsCount: data.data?.[0]?.allowanceArray?.length || 0
           }}
         />
-        {chartData && <ResponsiveContainer width="100%" height="100%" aspect={1.5} debounce={500} style={{
-          backgroundColor: 'white',
+        <div style={{
+          backgroundColor: 'white'
         }}>
-          <ComposedChart
-            width={500}
-            height={400}
-            data={chartData}
-            margin={{
-              top: 20,
-              right: 20,
-              bottom: 20,
-              left: 20,
-            }}
-          >
-            <CartesianGrid stroke="#f5f5f5" />
-            <XAxis dataKey="height" tickFormatter={(value) => calculateDateFromHeight(value)}/>
-            <YAxis tickFormatter={(value) => convertBytesToIEC(value)} />
-            <Tooltip content={renderTooltip}/>
-            <Legend />
-            <Area type="monotone" dataKey="totalAllowance" fill="#8884d8" stroke="#8884d8" />
-            <Bar dataKey="allowance" barSize={50} fill="#413ea0"  />
-          </ComposedChart>
-        </ResponsiveContainer>}
+          <ContentTabs tabs={['Table view', 'Chart view']}>
+            <Table
+              table={table}
+              data={data.data?.[0]?.allowanceArray}
+              loading={loading}
+              noControls
+            />
+            <div>
+              {chartData && <ResponsiveContainer width="100%" height="100%" aspect={1.5} debounce={500}>
+                <ComposedChart
+                  width={500}
+                  height={400}
+                  data={chartData}
+                  margin={{
+                    top: 20,
+                    right: 20,
+                    bottom: 20,
+                    left: 20
+                  }}
+                >
+                  <CartesianGrid stroke="#f5f5f5" />
+                  <XAxis dataKey="height" tickFormatter={(value) => calculateDateFromHeight(value)} />
+                  <YAxis tickFormatter={(value) => convertBytesToIEC(value)} />
+                  <Tooltip content={renderTooltip} />
+                  <Legend />
+                  <Area type="monotone" dataKey="totalAllowance" fill="#8884d8" stroke="#8884d8" />
+                  <Bar dataKey="allowance" barSize={50} fill="#413ea0" />
+                </ComposedChart>
+              </ResponsiveContainer>}
+            </div>
+          </ContentTabs>
+        </div>
       </div>
       <br />
       <div className="tableSectionWrap">

src/components/DashboardPageV2/tabs.js → src/components/ContentTabs/index.js

@@ -2,7 +2,7 @@ import s from './s.module.css';
 import cn from 'classnames';
 import {Children, cloneElement, useState } from 'react';
 
-export const Tabs = ({children, tabs}) => {
+export const ContentTabs = ({children, tabs}) => {
 
   const [currentTab, setCurrentTab] = useState(0);
 

src/components/ContentTabs/s.module.css

@@ -0,0 +1,37 @@
+.tabs {
+  min-width: 100%;
+}
+
+.tabs > .tabsHeader {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1px solid var(--theme-background);
+}
+
+.tabs > .tabsHeader > .tabToggle {
+  padding: 8px 16px;
+  cursor: pointer;
+  margin-bottom: -1px;
+  font-weight: 500;
+  font-size: 14px;
+  border-bottom: 2px solid transparent;
+}
+
+.tabs > .tabsHeader > .tabToggle:hover {
+  border-bottom: 2px solid var(--color-black);
+  background-color: var(--theme-background);
+}
+
+.tabs > .tabsHeader > .tabToggle.active {
+  border-bottom: 2px solid var(--color-black);
+}
+
+.tabs > .tabsContent {
+  overflow: hidden;
+}
+
+.tabs > .tabsContent > .tabsElement {
+  width: 100%;
+}

src/components/DashboardPageV2/index.js

@@ -1,7 +1,6 @@
 import cn from 'classnames';
 import { useFetch } from 'hooks/fetch';
 import { convertBytesToIEC } from 'utils/bytes';
-import { Spinner } from 'components/Spinner';
 import s from './s.module.css';
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -10,9 +9,9 @@ import { DataCapAllocVsAvailable } from './dataCapAllocVsAvailable';
 import { DataCapAllocationsWoW } from './dataCapAllocationsWoW';
 import { DataCapUsedOverTime } from './dataCapUsedOverTime';
 import { DataCapFlowGraph } from './dataCapFlowGraph';
-import { Tabs } from './tabs';
 import { DataCapFlowTree } from './dataCapFlowTree';
 import { LoadingValue } from '../LoadingValue';
+import { ContentTabs } from '../ContentTabs';
 
 export default function DashboardPage() {
   const fetchUrl = '/getFilPlusStats';
@@ -110,10 +109,13 @@ export default function DashboardPage() {
             </button>
           </div>
           <div className={cn(s.cardData, !toggle && s.cardDataHidden)}>
-            <Tabs tabs={['Flow chart', 'Allocation tree']}>
+            <ContentTabs tabs={['Flow chart', 'Allocation tree']}>
               <DataCapFlowGraph />
-              <DataCapFlowTree />
-            </Tabs>
+              <div style={{padding: '2em'}}>
+                Coming soon...
+              </div>
+              {/*<DataCapFlowTree />*/}
+            </ContentTabs>
           </div>
         </div>
       </div>

src/components/DashboardPageV2/s.module.css

@@ -289,44 +289,6 @@
   color: var(--theme-text);
 }
 
-.tabs {
-  min-width: 100%;
-}
-
-.tabs > .tabsHeader {
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  border-bottom: 1px solid var(--theme-background);
-}
-
-.tabs > .tabsHeader > .tabToggle {
-  padding: 8px 16px;
-  cursor: pointer;
-  margin-bottom: -1px;
-  font-weight: 500;
-  font-size: 14px;
-  border-bottom: 2px solid transparent;
-}
-
-.tabs > .tabsHeader > .tabToggle:hover {
-  border-bottom: 2px solid var(--color-black);
-  background-color: var(--theme-background);
-}
-
-.tabs > .tabsHeader > .tabToggle.active {
-  border-bottom: 2px solid var(--color-black);
-}
-
-.tabs > .tabsContent {
-  overflow: hidden;
-}
-
-.tabs > .tabsContent > .tabsElement {
-  width: 100%;
-}
-
 @media (min-width: 768px) {
   .grid, .grid.double {
     gap: 24px;