From e24657bae13cf8d5d90726b747fd110b968c8d2c Mon Sep 17 00:00:00 2001
From: wkaspryk <wkaspryk@gmail.com>
Date: Wed, 27 Mar 2024 12:50:59 -0700
Subject: [PATCH] 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
---
 .../src/components/dashboard/Dashboard.tsx    | 65 ++++++++++++-------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/dashboard/src/components/dashboard/Dashboard.tsx b/src/dashboard/src/components/dashboard/Dashboard.tsx
index 0d038c2a..1f450942 100644
--- 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}