Refactor DashboardTextComponent and DashboardValueComponent to use co…

…nsistent decimal notation for height calculations, improving code clarity
OneUptime · Dec 2, 2024 · 12fc986 · 12fc986
1 parent 4ec718a
commit 12fc986
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx
@@ -10,7 +10,7 @@ const DashboardTextComponentElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const textClassName: string = `truncate ${props.component.arguments.isBold ? "font-medium" : ""} ${props.component.arguments.isItalic ? "italic" : ""} ${props.component.arguments.isUnderline ? "underline" : ""}`;
-  const textHeightInxPx: number = props.dashboardComponentHeightInPx * 0.50;
+  const textHeightInxPx: number = props.dashboardComponentHeightInPx * 0.5;
 
   return (
     <div>

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
@@ -148,26 +148,27 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
     aggregatedValue = aggregatedValue / avgCount;
   }
 
-  const valueHeightInPx: number = props.dashboardComponentHeightInPx * 0.40;
-  const titleHeightInPx: number = props.dashboardComponentHeightInPx * 0.10;
+  const valueHeightInPx: number = props.dashboardComponentHeightInPx * 0.4;
+  const titleHeightInPx: number = props.dashboardComponentHeightInPx * 0.1;
 
   return (
     <div className="w-full text-center">
-      <div 
-        style={
-          {
-            fontSize: titleHeightInPx > 0 ? `${titleHeightInPx}px` : "",
-          }
-        }
-      className="text-center text-sm text-semibold">
+      <div
+        style={{
+          fontSize: titleHeightInPx > 0 ? `${titleHeightInPx}px` : "",
+        }}
+        className="text-center text-sm text-semibold"
+      >
         {props.component.arguments.title || ""}
       </div>
       <div
         className="text-center text-lg text-semibold"
         style={{
           fontSize: valueHeightInPx > 0 ? `${valueHeightInPx}px` : "",
         }}
-      >{aggregatedValue || "-"}</div>
+      >
+        {aggregatedValue || "-"}
+      </div>
     </div>
   );
 };