#3, #4 - Clinets pages tweaks

src/App/index.js

@@ -2,8 +2,6 @@ import { lazy, Suspense } from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 
 import { Spinner, Header } from 'components';
-import ClientAllocationPage from 'pages/ClientAllocationPage';
-import ClientDDODealsPage from 'pages/ClientDDODealsPage';
 import { Toaster } from 'sonner';
 
 const DashboardPageV2 = lazy(() => import('pages/DashboardPageV2'));
@@ -24,6 +22,12 @@ const ClientPage = lazy(() => import('pages/ClientPage'));
 const ClientBreakdownPage = lazy(() =>
   import('pages/ClientBreakdownPage')
 );
+const ClientAllocationPage = lazy(() =>
+  import('pages/ClientAllocationPage')
+);
+const ClientDDODealsPage = lazy(() =>
+  import('pages/ClientDDODealsPage')
+);
 
 const MinersPage = lazy(() => import('pages/MinersPage'));
 const MinerPage = lazy(() => import('pages/MinerPage'));

src/components/Header/index.js

@@ -81,25 +81,14 @@ export const Header = () => {
               Dashboard
             </NavLink>
             <NavLink
-              exact
               to="/notaries"
               className={s.navLink}
               activeClassName={s.active}
               onClick={handlerCloseMenu}
             >
               Allocators
             </NavLink>
-            {/* <NavLink
-              exact
-              to="/large-datasets"
-              className={s.navLink}
-              activeClassName={s.active}
-              onClick={handlerCloseMenu}
-            >
-              Large datasets
-            </NavLink> */}
             <NavLink
-              exact
               to="/clients"
               className={s.navLink}
               activeClassName={s.active}
@@ -108,7 +97,6 @@ export const Header = () => {
               Clients
             </NavLink>
             <NavLink
-              exact
               to="/storage-providers"
               className={s.navLink}
               activeClassName={s.active}

src/components/Table/index.js

@@ -68,7 +68,7 @@ const Td = ({ cell, item }) => {
         );
       }
       return tempChildren;
-    }
+    };
 
     children = (
       <Link
@@ -238,7 +238,7 @@ const Td = ({ cell, item }) => {
   );
 };
 
-export const Table = ({ table, data = [], loading, noControls = false }) => {
+export const Table = ({ table, data = [], loading, hovered, hoverColor, setHovered, noControls = false, noWrap = false }) => {
   const { query, pushQueryRoute } = useQuery();
   const filterQuery = query.get('filter');
 
@@ -252,8 +252,8 @@ export const Table = ({ table, data = [], loading, noControls = false }) => {
       <div className={s.sortWrap}>
         <SortDropdown table={table} />
       </div>
-      <div className={cn(s.tableWrap, { [s.loading]: loading })}>
-        <table className={cn(s.table, { [s.noControls]: noControls })}>
+      <div className={cn(s.tableWrap, { [s.loading]: loading }, { [s.noWrap]: noWrap })}>
+        <table className={cn(s.table, { [s.noControls]: noControls }, { [s.noWrap]: noWrap })}>
           <thead>
           <tr>
             {table.map((item) => (
@@ -264,7 +264,12 @@ export const Table = ({ table, data = [], loading, noControls = false }) => {
           <tbody>
           {data?.length ? (
             data.map((item, itemIdx) => (
-              <tr key={itemIdx}>
+              <tr key={itemIdx}
+                  className={cn({ [s.hovered]: hovered === itemIdx })}
+                  style={{ '--hover-color': `${hoverColor}33` }}
+                  onMouseEnter={() => {
+                setHovered && setHovered(itemIdx);
+              }}>
                 {table.map((cell, cellIdx) => (
                   <Td key={cellIdx} cell={cell} item={item} />
                 ))}

src/components/Table/s.module.css

@@ -1,3 +1,7 @@
+:root {
+  --hover-color: rgba(var(--rgb-oyster-bay), 0.24);
+}
+
 .sortWrap {
   border-top: 1px solid var(--color-oyster-bay);
   background: var(--theme-area-background);
@@ -12,6 +16,10 @@
   min-height: 100px;
 }
 
+.tableWrap.noWrap {
+  overflow: hidden;
+}
+
 .spinnerWrap {
   position: absolute;
   top: 0;
@@ -146,40 +154,57 @@
   .sortWrap {
     display: none;
   }
+
   .tableWrap {
     overflow-y: auto;
   }
+
   .spinnerWrap {
     align-items: center;
     padding: 0;
   }
+
   .table {
     display: table;
   }
+
   .table thead {
     display: table-header-group;
   }
+
   .table tbody {
     display: table-row-group;
   }
+
   .table tr {
     display: table-row;
     border: 0;
   }
+
   .table th {
     padding: 12px 16px;
   }
+
   .table td {
     display: table-cell;
     border-top: 1px solid var(--color-oyster-bay);
     border-bottom: 1px solid var(--color-oyster-bay);
     padding: 16px;
     text-align: left;
   }
+
   .table td::before {
     display: none;
   }
-  .table tbody tr:hover td {
-    background: rgba(var(--rgb-oyster-bay), 0.24);
+
+  .table tbody tr:hover td,
+  .table tbody tr.hovered td {
+    background: var(--hover-color);
   }
 }
+
+.table.noWrap td,
+.table.noWrap th,
+.table.noWrap tr {
+  white-space: nowrap;
+}

src/pages/ClientAllocationPage/index.js

@@ -5,6 +5,8 @@ import { useMemo } from 'react';
 import { Area, Bar, CartesianGrid, ComposedChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import s from '../DashboardPageV2/s.module.css';
 import { PageHeading, ContentTabs, TableHeading, Table, ComplianceDownloadButton} from 'components';
+import { calculateDateFromHeight } from '../../utils/height';
+import { convertBytesToIEC } from '../../utils/bytes';
 
 const table = [
   {
@@ -149,7 +151,7 @@ export default function ClientAllocationPage() {
               loading={loading}
               noControls
             />
-            <div className={cn('chartWrap', s.aspect3_2)}>
+            <div className={cn('chartWrap', 'aspect3_2')}>
               {chartData && <ResponsiveContainer width="100%" height="100%" aspect={3/2} debounce={500}>
                 <ComposedChart
                   width={500}

src/pages/ClientBreakdownPage/index.js

@@ -8,7 +8,7 @@ import { useMemo, useState } from 'react';
 import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from 'recharts';
 import { value } from 'lodash/seq';
 import { palette } from 'utils/colors';
-import { TableHeading, PageHeading, ComplianceDownloadButton } from 'components';
+import { TableHeading, PageHeading, ComplianceDownloadButton, Table } from 'components';
 import { convertBytesToIEC } from 'utils/bytes';
 
 const table = [
@@ -76,18 +76,17 @@ const renderActiveShape = (props) => {
 export default function ClientBreakdownPage() {
   const { clientID } = useParams();
 
-  const auxEndDate = new Date();
-  const auxStartDate = new Date(new Date().setDate(auxEndDate.getDate() - 30));
+  const auxEndDate = new Date().toISOString().split('T')[0];
+  const auxStartDate = new Date(171374400*1000).toISOString().split('T')[0];
 
   const [activeIndex, setActiveIndex] = useState(0);
-  const [startDate, setStartDate] = useState(auxStartDate);
-  const [endDate, setEndDate] = useState(auxEndDate);
-  const fetchUrl = `/getDealAllocationStats/${clientID}?startDate=${
-    startDate.toISOString().split('T')[0]
-  }&endDate=${endDate.toISOString().split('T')[0]}`;
+  const [tableOpened, setTableOpened] = useState(true);
+
+  const fetchUrl = `/getDealAllocationStats/${clientID}?startDate=${auxStartDate}&endDate=${auxEndDate}`;
   const [data, { loading, error }] = useFetch(fetchUrl);
   const csvFilename = `client-${clientID}-stats.csv`;
 
+
   const name = data?.name ? `, ${data.name}` : '';
 
   const onPieEnter = (_, index) => {
@@ -135,38 +134,6 @@ export default function ClientBreakdownPage() {
               url: `/clients/${clientID}/allocations`
             }
           ]}
-
-          hideSearch={<div className={s.date_filters}>
-            <div className={s.entry}>
-              <label>From</label>
-              <DatePicker
-                selected={startDate}
-                onChange={(date) => {
-                  if (!date) return;
-                  if (Math.floor(date.getTime() / 1000) < 1598306400) {
-                    return;
-                  }
-                  setStartDate(date);
-                }}
-                disabled={loading}
-              />
-            </div>
-            <div className={s.entry}>
-              <label>to</label>
-              <DatePicker
-                selected={endDate}
-                onChange={(date) => {
-                  if (!date) return;
-                  if (date > new Date()) {
-                    return;
-                  }
-                  setEndDate(date);
-                }}
-                disabled={loading}
-              />
-            </div>
-          </div>}
-
           csv={{
             table,
             fetchUrl,
@@ -177,38 +144,48 @@ export default function ClientBreakdownPage() {
         <div style={{
           backgroundColor: '#fff'
         }}>
-          {
-            error && <div style={{ padding: '2em' }}>
-              Unable to prepare data
+          <div className={s.chartFlexContent}>
+            {
+              error && <div style={{ padding: '2em' }}>
+                Unable to prepare data
+              </div>
+            }
+            <div className={cn('chartWrap', 'square', s.chart)}>
+              {chartData && <ResponsiveContainer width={'100%'} aspect={1} debounce={500}>
+                <PieChart>
+                  <Pie
+                    data={chartData}
+                    cx="50%"
+                    cy="50%"
+                    labelLine={false}
+                    outerRadius={'50%'}
+                    innerRadius={'35%'}
+                    fill="#8884d8"
+                    dataKey="value"
+                    activeIndex={activeIndex}
+                    activeShape={renderActiveShape}
+                    onMouseEnter={onPieEnter}
+                    cursor={'pointer'}
+                    paddingAngle={1}
+                    onClick={(val) => {
+                      window.open(`/storage-providers/${val.name}`, '_blank');
+                    }}
+                  >
+                    {chartData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={palette(chartData.length, index)} cursor="pointer" />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </ResponsiveContainer>}
+            </div>
+            <div className={cn(s.table, tableOpened && s.opened)}>
+              <button className={cn(s.toggle)} onClick={() => setTableOpened(!tableOpened)}>
+                <span>
+                  {tableOpened ? 'Hide' : 'Show'} table
+                </span>
+              </button>
+              <Table hovered={activeIndex} hoverColor={palette(chartData.length, activeIndex)} setHovered={setActiveIndex} table={table} data={data?.stats} loading={loading} noControls noWrap />
             </div>
-          }
-          <div className={cn('chartWrap', s.aspect3_2)}>
-            {chartData && <ResponsiveContainer width={'100%'} aspect={1.5} debounce={500}>
-              <PieChart>
-                <Pie
-                  data={chartData}
-                  cx="50%"
-                  cy="50%"
-                  labelLine={false}
-                  outerRadius={'50%'}
-                  innerRadius={'35%'}
-                  fill="#8884d8"
-                  dataKey="value"
-                  activeIndex={activeIndex}
-                  activeShape={renderActiveShape}
-                  onMouseEnter={onPieEnter}
-                  cursor={'pointer'}
-                  paddingAngle={1}
-                  onClick={(val) => {
-                    window.open(`/storage-providers/${val.name}`, '_blank');
-                  }}
-                >
-                  {chartData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={palette(chartData.length, index)} cursor="pointer" />
-                  ))}
-                </Pie>
-              </PieChart>
-            </ResponsiveContainer>}
           </div>
         </div>
       </div>

src/pages/ClientBreakdownPage/s.module.css

@@ -18,3 +18,35 @@
 .date_filters .entry input {
   outline: none !important;
 }
+
+.chartFlexContent {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}
+
+.chartFlexContent .chart {
+  flex: 1;
+}
+
+.chartFlexContent .table {
+  position: relative;
+  border-left: 1px solid var(--color-oyster-bay);
+  width: 0;
+  transition: width 0.3s ease-out;
+}
+
+.chartFlexContent .table.opened {
+  width: 33%;
+}
+
+.chartFlexContent .table .toggle {
+  position: absolute;
+  height: 42px;
+  width: 100px;
+  right: 100%;
+  border-radius: 0;
+  border: 1px solid var(--color-oyster-bay);
+  border-right: 0;
+  background: transparent;
+}