Refactor DashboardToolbar component to adjust margins and spacing

Common/Types/Dashboard/DashboardSize.ts

@@ -7,17 +7,97 @@ const DefaultDashboardSize: DashboardSize = {
   widthInDashboardUnits: 12,
   heightInDashboardUnits: 60,
 };
-// 5 rem is the dashboard unit width, and 0.94 is margin between those units.
 
-export const DashboardRemConversionFactor: number = 5.94;
+export const SpaceBetweenUnitsInPx: number = 10;
+export const MarginForEachUnitInPx: number = 10 / 2;
 
-export const DahboardHeightUnitInRem: number = 5;
+type GetDashboardUnitWidthInPxFunction = (
+  currentTotalDashboardWidthInPx: number,
+) => number;
 
-export const DashboardWidthUnitInRem: number = 5;
+export const GetDashboardUnitWidthInPx: GetDashboardUnitWidthInPxFunction = (
+  currentTotalDashboardWidthInPx: number,
+): number => {
+  return (
+    (currentTotalDashboardWidthInPx -
+      (DefaultDashboardSize.widthInDashboardUnits - 1) *
+        SpaceBetweenUnitsInPx) /
+    DefaultDashboardSize.widthInDashboardUnits
+  );
+};
+
+
+type GetDashboardUnitHeightInPxFunction = (
+  currentTotalDashboardWidthInPx: number,
+) => number;
+
+export const GetDashboardUnitHeightInPx: GetDashboardUnitHeightInPxFunction = (
+  currentTotalDashboardWidthInPx: number,
+): number => {
+  return GetDashboardUnitWidthInPx(currentTotalDashboardWidthInPx); // its a square, so height is the same as width
+};
+
+type GetHeightOfDashboardComponentFunction = (
+  heightInDashboardUnits: number,
+  totalCurrentDashboardWidthInPx: number,
+) => number;
+
+export const GetHeightOfDashboardComponent: GetHeightOfDashboardComponentFunction = (
+  heightInDashboardUnits: number,
+  totalCurrentDashboardWidthInPx: number,
+): number => {
+  return (
+    heightInDashboardUnits *
+      GetDashboardUnitHeightInPx(totalCurrentDashboardWidthInPx) +
+    (heightInDashboardUnits - 1) * SpaceBetweenUnitsInPx
+  );
+};
 
-export const DashboardSpaceBetweenUnitsInRem: number = 0.94;
+type GetWidthOfDashboardComponentFunction = (
+  widthInDashboardUnits: number,
+  totalCurrentDashboardWidthInPx: number,
+) => number;
 
-export const TotalWidthOfDashboardInRem: number =
-  DefaultDashboardSize.widthInDashboardUnits * DashboardRemConversionFactor;
+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),
+  );
+}
+
+
+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 default DefaultDashboardSize;

Common/Utils/Dashboard/Components/DashboardTextComponent.ts

@@ -7,8 +7,8 @@ export default class DashboardTextComponentUtil extends DashboardBaseComponentUt
   public static override getDefaultComponent(): DashboardTextComponent {
     return {
       _type: ObjectType.DashboardTextComponent,
-      widthInDashboardUnits: 12,
-      heightInDashboardUnits: 1,
+      widthInDashboardUnits: 6,
+      heightInDashboardUnits: 3,
       topInDashboardUnits: 0,
       leftInDashboardUnits: 0,
       text: "Hello, World!",

Dashboard/src/Components/Dashboard/Canvas/BlankCanvas.tsx

@@ -7,6 +7,7 @@ export interface ComponentProps {
   dashboardViewConfig: DashboardViewConfig;
   onClick: (top: number, left: number) => void;
   isEditMode: boolean;
+  totalCurrentDashboardWidthInPx: number;
 }
 
 const BlankCanvasElement: FunctionComponent<ComponentProps> = (
@@ -20,7 +21,7 @@ const BlankCanvasElement: FunctionComponent<ComponentProps> = (
 
   if (!props.isEditMode && props.dashboardViewConfig.components.length === 0) {
     return (
-      <div className="rounded p-10 border-2 border-gray-100 text-sm text-gray-400 text-center">
+      <div className="ml-1 mr-1 rounded p-10 border-2 border-gray-100 text-sm text-gray-400 text-center pt-24 pb-24">
         No components added to this dashboard. Please add one to get started.
       </div>
     );
@@ -33,6 +34,9 @@ const BlankCanvasElement: FunctionComponent<ComponentProps> = (
         return (
           <BlankRowElement
             key={index}
+            totalCurrentDashboardWidthInPx={
+              props.totalCurrentDashboardWidthInPx
+            }
             isEditMode={props.isEditMode}
             rowNumber={index}
             onClick={(top: number, left: number) => {

Dashboard/src/Components/Dashboard/Canvas/BlankRow.tsx

@@ -6,6 +6,7 @@ export interface ComponentProps {
   rowNumber: number;
   onClick: (top: number, left: number) => void;
   isEditMode: boolean;
+  totalCurrentDashboardWidthInPx: number;
 }
 
 const BlankRowElement: FunctionComponent<ComponentProps> = (
@@ -19,6 +20,9 @@ const BlankRowElement: FunctionComponent<ComponentProps> = (
         (_: number, index: number) => {
           return (
             <BlankDashboardUnitElement
+              currentTotalDashboardWidthInPx={
+                props.totalCurrentDashboardWidthInPx
+              }
               key={index}
               isEditMode={props.isEditMode}
               onClick={() => {

Dashboard/src/Components/Dashboard/Canvas/DashboardUnit.tsx

@@ -1,14 +1,25 @@
+import {
+  GetDashboardUnitHeightInPx,
+  MarginForEachUnitInPx,
+} from "Common/Types/Dashboard/DashboardSize";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
   isEditMode: boolean;
   onClick: () => void;
+  currentTotalDashboardWidthInPx: number;
 }
 
 const DashboardUnitElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-  let className: string = "m-2 h-20 w-20 min-w-20 min-h-20 ";
+  const heightOfUnitInPx: number = GetDashboardUnitHeightInPx(
+    props.currentTotalDashboardWidthInPx,
+  );
+
+  const widthOfUnitInPx: number = heightOfUnitInPx; // its a square
+
+  let className: string = "";
 
   if (props.isEditMode) {
     className +=
@@ -21,6 +32,11 @@ const DashboardUnitElement: FunctionComponent<ComponentProps> = (
       onClick={() => {
         props.onClick();
       }}
+      style={{
+        width: widthOfUnitInPx + "px",
+        height: heightOfUnitInPx + "px",
+        margin: MarginForEachUnitInPx + "px",
+      }}
     ></div>
   );
 };

Dashboard/src/Components/Dashboard/Canvas/Index.tsx

@@ -11,6 +11,7 @@ export interface ComponentProps {
   dashboardViewConfig: DashboardViewConfig;
   onDashboardViewConfigChange: (newConfig: DashboardViewConfig) => void;
   isEditMode: boolean;
+  currentTotalDashboardWidthInPx: number;
 }
 
 const DashboardCanvas: FunctionComponent<ComponentProps> = (
@@ -83,6 +84,9 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
           // render a blank unit
           renderedComponents.push(
             <BlankDashboardUnitElement
+              currentTotalDashboardWidthInPx={
+                props.currentTotalDashboardWidthInPx
+              }
               isEditMode={props.isEditMode}
               key={`blank-${i}-${j}`}
               onClick={() => {
@@ -125,6 +129,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
     return (
       <DashboardBaseComponentElement
         isEditMode={props.isEditMode}
+        totalCurrentDashboardWidthInPx={props.currentTotalDashboardWidthInPx}
         component={component}
         key={component.componentId.toString()}
         isSelected={selectedComponentId === component.componentId.toString()}
@@ -164,6 +169,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
   ) {
     return (
       <BlankCanvasElement
+        totalCurrentDashboardWidthInPx={props.currentTotalDashboardWidthInPx}
         isEditMode={props.isEditMode}
         onClick={() => {}}
         dashboardViewConfig={props.dashboardViewConfig}