Add minimum width and height properties to dashboard components for better layout control

Common/Types/Dashboard/DashboardComponents/DashboardBaseComponent.ts

@@ -8,4 +8,6 @@ export default interface DashboardBaseComponent {
   leftInDashboardUnits: number;
   widthInDashboardUnits: number;
   heightInDashboardUnits: number;
+  minWidthInDashboardUnits: number;
+  minHeightInDashboardUnits: number;
 }

Common/Utils/Dashboard/Components/DashboardChartComponent.ts

@@ -14,6 +14,8 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       leftInDashboardUnits: 0,
       componentId: ObjectID.generate(),
       chartType: DashboardChartType.Line,
+      minHeightInDashboardUnits: 3,
+      minWidthInDashboardUnits: 6
     };
   }
 }

Common/Utils/Dashboard/Components/DashboardTextComponent.ts

@@ -16,6 +16,8 @@ export default class DashboardTextComponentUtil extends DashboardBaseComponentUt
       isBold: false,
       isItalic: false,
       isUnderline: false,
+      minHeightInDashboardUnits: 1,
+      minWidthInDashboardUnits: 3
     };
   }
 }

Common/Utils/Dashboard/Components/DashboardValueComponent.ts

@@ -12,6 +12,8 @@ export default class DashboardValueComponentUtil extends DashboardBaseComponentU
       topInDashboardUnits: 0,
       leftInDashboardUnits: 0,
       componentId: ObjectID.generate(),
+      minHeightInDashboardUnits: 1,
+      minWidthInDashboardUnits: 1
     };
   }
 }

Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx

@@ -193,12 +193,18 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     }
 
     // get this in dashboard units.,
-    const widthInDashboardUnits: number =
+    let widthInDashboardUnits: number =
       GetDashboardComponentWidthInDashboardUnits(
         props.totalCurrentDashboardWidthInPx,
         newDashboardComponentwidthInPx,
       );
 
+    // if this width is less than the min width then set it to min width
+
+    if (widthInDashboardUnits < component.minWidthInDashboardUnits) {
+      widthInDashboardUnits = component.minWidthInDashboardUnits;
+    }
+
     // update the component
     const newComponentProps: DashboardBaseComponent = {
       ...component,
@@ -228,12 +234,18 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     }
 
     // get this in dashboard units
-    const heightInDashboardUnits: number =
+    let heightInDashboardUnits: number =
       GetDashboardComponentHeightInDashboardUnits(
         props.totalCurrentDashboardWidthInPx,
         newDashboardComponentHeightInPx,
       );
 
+    // if this height is less tan the min height then set it to min height
+
+    if (heightInDashboardUnits < component.minHeightInDashboardUnits) {
+      heightInDashboardUnits = component.minHeightInDashboardUnits;
+    }
+
     // update the component
     const newComponentProps: DashboardBaseComponent = {
       ...component,
@@ -255,6 +267,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       return <></>;
     }
 
+    let resizeCursorIcon: string = "cursor-ew-resize";
+
+    // if already at min width then change icon to e-resize
+
+    if (component.widthInDashboardUnits <= component.minWidthInDashboardUnits) {
+      resizeCursorIcon = "cursor-e-resize";
+    }
+
     return (
       <div
         style={{
@@ -266,7 +286,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           window.addEventListener("mousemove", resizeWidth);
           window.addEventListener("mouseup", stopResizeAndMove);
         }}
-        className="resize-width-element cursor-ew-resize absolute right-0 w-2 h-12 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
+        className={`resize-width-element ${resizeCursorIcon} absolute right-0 w-2 h-12 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer`}
       ></div>
     );
   };
@@ -295,8 +315,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           stopResizeAndMove();
         }}
         className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
-        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}}
+        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => { }}
-        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}}
+        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => { }}
       ></div>
     );
   };
@@ -306,6 +326,14 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       return <></>;
     }
 
+    let resizeCursorIcon: string = "cursor-ns-resize";
+  
+    // if already at min height then change icon to s-resize
+
+    if (component.heightInDashboardUnits <= component.minHeightInDashboardUnits) {
+      resizeCursorIcon = "cursor-s-resize";
+    }
+
     return (
       <div
         style={{
@@ -317,7 +345,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           window.addEventListener("mousemove", resizeHeight);
           window.addEventListener("mouseup", stopResizeAndMove);
         }}
-        className="resize-height-element cursor-ns-resize absolute bottom-0 left-0 w-12 h-2 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
+        className={`resize-height-element ${resizeCursorIcon} absolute bottom-0 left-0 w-12 h-2 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer`}
       ></div>
     );
   };
@@ -357,13 +385,11 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       }}
       style={{
         margin: `${MarginForEachUnitInPx}px`,
-        height: `${
+        height: `${GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
-          GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
           heightOfComponent +
           SpaceBetweenUnitsInPx * (heightOfComponent - 1)
           }px`,
-        width: `${
+        width: `${GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
-          GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
           widthOfComponent +
           (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
           }px`,

Dashboard/src/Components/NavBar/NavBar.tsx

@@ -118,14 +118,14 @@ const DashboardNavbar: FunctionComponent<ComponentProps> = (
         )}
       ></NavBarItem>
 
-      {/* <NavBarItem
+      <NavBarItem
         title="Dashboards"
         activeRoute={RouteMap[PageMap.DASHBOARDS]}
         icon={IconProp.Window}
         route={RouteUtil.populateRouteParams(
           RouteMap[PageMap.DASHBOARDS] as Route,
         )}
-      ></NavBarItem> */}
+      ></NavBarItem>
 
       <NavBarItem
         title="More"