data tweaks

fidlabs · Aug 20, 2024 · 428e983 · 428e983
1 parent 35c0fe9
commit 428e983
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 35 deletions.
diff --git a/src/components/ClientAllocationPage/index.js b/src/components/ClientAllocationPage/index.js
@@ -4,16 +4,13 @@ import { useFetch } from 'hooks/fetch';
 
 import { PageHeading } from 'components/PageHeading';
 import { TableHeading } from 'components/TableHeading';
-// import { TableControls } from 'components/TableControls';
 import { Table } from 'components/Table';
 import { ComplianceDownloadButton } from '../ComplianceDownloadButton';
 import { useMemo, useState } from 'react';
 import { Area, Bar, CartesianGrid, ComposedChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 import { convertBytesToIEC } from '../../utils/bytes';
 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 = [
@@ -31,7 +28,8 @@ const table = [
   {
     key: 'height',
     title: 'Height',
-    align: 'right'
+    align: 'right',
+    convertToDate: true
   }
 ];
 
@@ -110,8 +108,6 @@ export default function ClientAllocationPage() {
       });
     });
 
-    console.log(returnData);
-
     return returnData;
 
   }, [data]);

diff --git a/src/components/ClientBreakdownPage/index.js b/src/components/ClientBreakdownPage/index.js
@@ -12,6 +12,7 @@ import { ComplianceDownloadButton } from '../ComplianceDownloadButton';
 import { Cell, Pie, PieChart, ResponsiveContainer, Sector } from 'recharts';
 import { palette } from '../../utils/colors';
 import { convertBytesToIEC } from '../../utils/bytes';
+import { value } from 'lodash/seq';
 
 const table = [
   { key: 'provider', title: 'Storage Provider ID' },
@@ -81,13 +82,13 @@ export default function ClientBreakdownPage() {
   const auxEndDate = new Date();
   const auxStartDate = new Date(new Date().setDate(auxEndDate.getDate() - 30));
 
-  const [activeIndex, setActiveIndex] = useState(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 [data, { loading }] = useFetch(fetchUrl);
+  const [data, { loading, error }] = useFetch(fetchUrl);
   const csvFilename = `client-${clientID}-stats.csv`;
 
   const name = data?.name ? `, ${data.name}` : '';
@@ -98,7 +99,7 @@ export default function ClientBreakdownPage() {
 
   const chartData = useMemo(() => {
     if (!data?.stats?.length) {
-      return []
+      return [];
     }
 
     return data?.stats?.map((item) => ({
@@ -176,32 +177,40 @@ export default function ClientBreakdownPage() {
             itemsCount: data?.stats?.length || 0
           }}
         />
-        {chartData && <ResponsiveContainer width={'100%'} aspect={1.5} debounce={500} style={{
-          backgroundColor: '#fff',
+        <div style={{
+          backgroundColor: '#fff'
         }}>
-          <PieChart>
-            <Pie
-              data={chartData}
-              cx="50%"
-              cy="50%"
-              labelLine={false}
-              // label={renderCustomizedLabel}
-              outerRadius={'50%'}
-              innerRadius={'35%'}
-              fill="#8884d8"
-              dataKey="value"
-              activeIndex={activeIndex}
-              activeShape={renderActiveShape}
-              onMouseEnter={onPieEnter}
-              onClick={console.log}
-              paddingAngle={1}
-            >
-              {chartData.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={palette(chartData.length, index)} />
-              ))}
-            </Pie>
-          </PieChart>
-        </ResponsiveContainer>}
+          {
+            error && <div style={{padding: '2em'}}>
+              Unable to prepare data
+            </div>
+          }
+          {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}
+                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>
   );

diff --git a/src/hooks/fetch.js b/src/hooks/fetch.js
@@ -79,6 +79,7 @@ const defaultState = {
   results: {},
   loading: false,
   loaded: false,
+  error: undefined
 };
 
 export const useFetch = (url) => {
@@ -105,6 +106,7 @@ export const useFetch = (url) => {
         setData({
           ...defaultState,
           loaded: true,
+          error: e.statusCode ?? 500
         });
       });
 
@@ -113,5 +115,5 @@ export const useFetch = (url) => {
     };
   }, [url]);
 
-  return [data.results, { loading: data.loading, loaded: data.loaded }];
+  return [data.results, { loading: data.loading, loaded: data.loaded, error: data.error }];
 };