Refactor GetHeightOfDashboardComponent and GetWidthOfDashboardCompone…

…nt functions
OneUptime · Oct 31, 2024 · ee49f3e · ee49f3e
1 parent 8d4b8b7
commit ee49f3e
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 70 deletions.
diff --git a/Common/Types/Dashboard/DashboardSize.ts b/Common/Types/Dashboard/DashboardSize.ts
@@ -26,7 +26,6 @@ export const GetDashboardUnitWidthInPx: GetDashboardUnitWidthInPxFunction = (
   );
 };
 
-
 type GetDashboardUnitHeightInPxFunction = (
   currentTotalDashboardWidthInPx: number,
 ) => number;
@@ -42,62 +41,69 @@ type GetHeightOfDashboardComponentFunction = (
   totalCurrentDashboardWidthInPx: number,
 ) => number;
 
-export const GetHeightOfDashboardComponent: GetHeightOfDashboardComponentFunction = (
-  heightInDashboardUnits: number,
-  totalCurrentDashboardWidthInPx: number,
-): number => {
-  return (
-    heightInDashboardUnits *
-      GetDashboardUnitHeightInPx(totalCurrentDashboardWidthInPx) +
-    (heightInDashboardUnits - 1) * SpaceBetweenUnitsInPx
-  );
-};
+export const GetHeightOfDashboardComponent: GetHeightOfDashboardComponentFunction =
+  (
+    heightInDashboardUnits: number,
+    totalCurrentDashboardWidthInPx: number,
+  ): number => {
+    return (
+      heightInDashboardUnits *
+        GetDashboardUnitHeightInPx(totalCurrentDashboardWidthInPx) +
+      (heightInDashboardUnits - 1) * SpaceBetweenUnitsInPx
+    );
+  };
 
 type GetWidthOfDashboardComponentFunction = (
   widthInDashboardUnits: number,
   totalCurrentDashboardWidthInPx: number,
 ) => number;
 
-export const GetWidthOfDashboardComponent: GetWidthOfDashboardComponentFunction = (
-  widthInDashboardUnits: number,
-  totalCurrentDashboardWidthInPx: number,
-): number => {
-  return (
-    widthInDashboardUnits *
-      GetDashboardUnitWidthInPx(totalCurrentDashboardWidthInPx) +
-    (widthInDashboardUnits - 1) * SpaceBetweenUnitsInPx
-  );
-};
+export const GetWidthOfDashboardComponent: GetWidthOfDashboardComponentFunction =
+  (
+    widthInDashboardUnits: number,
+    totalCurrentDashboardWidthInPx: number,
+  ): number => {
+    return (
+      widthInDashboardUnits *
+        GetDashboardUnitWidthInPx(totalCurrentDashboardWidthInPx) +
+      (widthInDashboardUnits - 1) * SpaceBetweenUnitsInPx
+    );
+  };
 
 type GetDashboardComponentWidthInDashboardUnitsFunction = (
   currentTotalDashboardWidthInPx: number,
   componentWidthInPx: number,
 ) => number;
 
-export const GetDashboardComponentWidthInDashboardUnits: GetDashboardComponentWidthInDashboardUnitsFunction = (
-  currentTotalDashboardWidthInPx: number,
-  componentWidthInPx: number,
-): number => {
-  return Math.floor(
-    (componentWidthInPx + (DefaultDashboardSize.widthInDashboardUnits - 1) * SpaceBetweenUnitsInPx) /
-      GetDashboardUnitWidthInPx(currentTotalDashboardWidthInPx),
-  );
-}
-
+export const GetDashboardComponentWidthInDashboardUnits: GetDashboardComponentWidthInDashboardUnitsFunction =
+  (
+    currentTotalDashboardWidthInPx: number,
+    componentWidthInPx: number,
+  ): number => {
+    return Math.floor(
+      (componentWidthInPx +
+        (DefaultDashboardSize.widthInDashboardUnits - 1) *
+          SpaceBetweenUnitsInPx) /
+        GetDashboardUnitWidthInPx(currentTotalDashboardWidthInPx),
+    );
+  };
 
 type GetDashboardComponentHeightInDashboardUnitsFunction = (
   currentTotalDashboardWidthInPx: number,
   componentHeightInPx: number,
 ) => number;
 
-export const GetDashboardComponentHeightInDashboardUnits: GetDashboardComponentHeightInDashboardUnitsFunction = (
-  currentTotalDashboardWidthInPx: number,
-  componentHeightInPx: number,
-): number => {
-  return Math.floor(
-    (componentHeightInPx + (DefaultDashboardSize.heightInDashboardUnits - 1) * SpaceBetweenUnitsInPx) /
-      GetDashboardUnitHeightInPx(currentTotalDashboardWidthInPx),
-  );
-}
+export const GetDashboardComponentHeightInDashboardUnits: GetDashboardComponentHeightInDashboardUnitsFunction =
+  (
+    currentTotalDashboardWidthInPx: number,
+    componentHeightInPx: number,
+  ): number => {
+    return Math.floor(
+      (componentHeightInPx +
+        (DefaultDashboardSize.heightInDashboardUnits - 1) *
+          SpaceBetweenUnitsInPx) /
+        GetDashboardUnitHeightInPx(currentTotalDashboardWidthInPx),
+    );
+  };
 
 export default DefaultDashboardSize;
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
@@ -7,7 +7,13 @@ import { ObjectType } from "Common/Types/JSON";
 import DashboardChartComponent from "./DashboardChartComponent";
 import DashboardValueComponent from "./DashboardValueComponent";
 import DashboardTextComponent from "./DashboardTextComponent";
-import { GetDashboardComponentHeightInDashboardUnits, GetDashboardComponentWidthInDashboardUnits, GetDashboardUnitHeightInPx, GetDashboardUnitWidthInPx, MarginForEachUnitInPx } from "Common/Types/Dashboard/DashboardSize";
+import {
+  GetDashboardComponentHeightInDashboardUnits,
+  GetDashboardComponentWidthInDashboardUnits,
+  GetDashboardUnitHeightInPx,
+  GetDashboardUnitWidthInPx,
+  MarginForEachUnitInPx,
+} from "Common/Types/Dashboard/DashboardSize";
 import { GetReactElementFunction } from "Common/UI/Types/FunctionTypes";
 
 export interface DashboardCommonComponentProps
@@ -44,7 +50,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     className += " border-2 border-blue-300";
   }
 
-  const dashboardComponentRef: React.RefObject<HTMLDivElement> = React.useRef<HTMLDivElement>(null);
+  const dashboardComponentRef: React.RefObject<HTMLDivElement> =
+    React.useRef<HTMLDivElement>(null);
 
   type MoveComponentTypeFunction = (
     moveLeftOffset: number,
@@ -67,47 +74,64 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     };
   };
 
-  let moveFunction: Function | undefined = undefined;
+  let moveFunction: ((event: MouseEvent) => void) | undefined = undefined;
 
   const resizeWidth: (event: MouseEvent) => void = (event: MouseEvent) => {
     if (dashboardComponentRef.current === null) {
       return;
     }
 
-     let newDashboardWidthInPx: number=
-      event.pageX -
-      dashboardComponentRef.current.getBoundingClientRect().left; 
+    let newDashboardWidthInPx: number =
+      event.pageX - dashboardComponentRef.current.getBoundingClientRect().left;
 
+    if (
+      GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) >
+      newDashboardWidthInPx
+    ) {
+      newDashboardWidthInPx = GetDashboardUnitWidthInPx(
+        props.totalCurrentDashboardWidthInPx,
+      );
+    }
 
-      if(GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) > newDashboardWidthInPx) {
-        newDashboardWidthInPx = GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx);
-      }
-
-      // get this in dashboard units., 
-      const widthInDashboardUnits: number = GetDashboardComponentWidthInDashboardUnits(props.totalCurrentDashboardWidthInPx, newDashboardWidthInPx);
+    // get this in dashboard units.,
+    const widthInDashboardUnits: number =
+      GetDashboardComponentWidthInDashboardUnits(
+        props.totalCurrentDashboardWidthInPx,
+        newDashboardWidthInPx,
+      );
 
-      // update the component
-      const newComponentProps: DashboardBaseComponent = {
-        ...props.component,
-        widthInDashboardUnits: widthInDashboardUnits,
-      };
+    // update the component
+    const newComponentProps: DashboardBaseComponent = {
+      ...props.component,
+      widthInDashboardUnits: widthInDashboardUnits,
+    };
 
-      props.onComponentUpdate(newComponentProps);
+    props.onComponentUpdate(newComponentProps);
   };
 
   const resizeHeight: (event: MouseEvent) => void = (event: MouseEvent) => {
     if (dashboardComponentRef.current === null) {
       return;
     }
 
-    let newDashboardHeightInPx: number = event.pageY - dashboardComponentRef.current.getBoundingClientRect().top;
+    let newDashboardHeightInPx: number =
+      event.pageY - dashboardComponentRef.current.getBoundingClientRect().top;
 
-    if(GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) > newDashboardHeightInPx) {
-      newDashboardHeightInPx = GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx)
+    if (
+      GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) >
+      newDashboardHeightInPx
+    ) {
+      newDashboardHeightInPx = GetDashboardUnitHeightInPx(
+        props.totalCurrentDashboardWidthInPx,
+      );
     }
 
     // get this in dashboard units
-    const heightInDashboardUnits: number = GetDashboardComponentHeightInDashboardUnits(props.totalCurrentDashboardWidthInPx, newDashboardHeightInPx);
+    const heightInDashboardUnits: number =
+      GetDashboardComponentHeightInDashboardUnits(
+        props.totalCurrentDashboardWidthInPx,
+        newDashboardHeightInPx,
+      );
 
     // update the component
     const newComponentProps: DashboardBaseComponent = {
@@ -122,7 +146,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     window.removeEventListener("mousemove", resizeHeight);
     window.removeEventListener("mousemove", resizeWidth);
     if (moveFunction) {
-      window.removeEventListener("mousemove", moveFunction as any);
+      window.removeEventListener("mousemove", moveFunction);
       moveFunction = undefined;
     }
     window.removeEventListener("mouseup", stopResizeAndMove);
@@ -172,12 +196,9 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
             ? dashboardComponentRef.current.getBoundingClientRect().top
             : 0;
 
-            moveFunction = moveComponent(leftOffset, topOffset); 
+          moveFunction = moveComponent(leftOffset, topOffset);
 
-          window.addEventListener(
-            "mousemove",
-            moveFunction as any,
-          );
+          window.addEventListener("mousemove", moveFunction as any);
           window.addEventListener("mouseup", stopResizeAndMove);
         }}
         className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"

diff --git a/Dashboard/src/Components/Dashboard/DashboardView.tsx b/Dashboard/src/Components/Dashboard/DashboardView.tsx
@@ -24,7 +24,7 @@ import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import PageLoader from "Common/UI/Components/Loader/PageLoader";
 import DashboardViewConfigUtil from "Common/Utils/Dashboard/DashboardViewConfig";
 import DefaultDashboardSize from "Common/Types/Dashboard/DashboardSize";
-import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
+import { PromiseVoidFunction, VoidFunction } from "Common/Types/FunctionTypes";
 
 export interface ComponentProps {
   dashboardId: ObjectID;
@@ -49,7 +49,7 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
   useEffect(() => {
     setDashboardTotalWidth(dashboardViewRef.current?.offsetWidth || 0);
 
-    const handleResize = (): void => {
+    const handleResize: VoidFunction = (): void => {
       setDashboardTotalWidth(dashboardViewRef.current?.offsetWidth || 0);
     };