HOSTSD-293 - fix for storage trends chart aspect ratio bug (#127)

* fix for storage trends chart aspect ratio bug * updating to use useCallback for Storage Trends chart * fixing type for isLarge property on Storage Chart
bcgov · Mar 27, 2024 · e24657b · e24657b
1 parent a8e5397
commit e24657b
Showing 1 changed file with 41 additions and 24 deletions.
diff --git a/src/dashboard/src/components/dashboard/Dashboard.tsx b/src/dashboard/src/components/dashboard/Dashboard.tsx
@@ -173,6 +173,34 @@ export const Dashboard = () => {
     [download],
   );
 
+  const renderStorageTrendsChart = React.useCallback(
+    (isLarge: boolean | undefined) => (
+      <StorageTrendsChart
+        large={isLarge}
+        serverItems={dashboardServerItem ? [dashboardServerItem] : dashboardServerItems}
+        showExport
+        onExport={(startDate, endDate) => {
+          handleExport({
+            tenantId: dashboardTenant?.id,
+            organizationId: dashboardOrganization?.id,
+            operatingSystemItemId: dashboardOperatingSystemItem?.id,
+            serviceNowKey: dashboardServerItem?.serviceNowKey,
+            startDate: startDate,
+            endDate: endDate,
+          });
+        }}
+      />
+    ),
+    [
+      dashboardServerItem,
+      dashboardServerItems,
+      dashboardTenant,
+      dashboardOrganization,
+      dashboardOperatingSystemItem,
+      handleExport,
+    ]
+  );
+
   return (
     <>
       <Breadcrumbs multipleOrganizations={organizations.length > 1} />
@@ -254,31 +282,20 @@ export const Dashboard = () => {
       )}
       {/* Multiple Organizations */}
       {showAllOrganizations && (
-        <AllOrganizations
-          organizations={dashboardOrganizations}
-          serverItems={dashboardServerItems}
-          loading={!isReadyOrganizations || !isReadyServerItems}
-          showExport
-          onExport={() => {
-            handleExport({ tenantId: dashboardTenant?.id });
-          }}
-        />
+        <>
+          <AllOrganizations
+            organizations={dashboardOrganizations}
+            serverItems={dashboardServerItems}
+            loading={!isReadyOrganizations || !isReadyServerItems}
+            showExport
+            onExport={() => {
+              handleExport({ tenantId: dashboardTenant?.id });
+            }}
+          />
+          {renderStorageTrendsChart(false)}
+        </>
       )}
-      <StorageTrendsChart
-        large={!!dashboardOrganization || !!dashboardOperatingSystemItem || !!dashboardServerItem}
-        serverItems={dashboardServerItem ? [dashboardServerItem] : dashboardServerItems}
-        showExport
-        onExport={(startDate, endDate) => {
-          handleExport({
-            tenantId: dashboardTenant?.id,
-            organizationId: dashboardOrganization?.id,
-            operatingSystemItemId: dashboardOperatingSystemItem?.id,
-            serviceNowKey: dashboardServerItem?.serviceNowKey,
-            startDate: startDate,
-            endDate: endDate,
-          });
-        }}
-      />
+      {!showAllOrganizations && renderStorageTrendsChart(true)}
       {showAllocationByStorageVolume && (
         <AllocationByStorageVolume
           organizations={dashboardOrganizations}