Refactor DashboardChartComponent and DashboardValueComponent for impr…

…oved readability; add unit display in DashboardValueComponent
OneUptime · Dec 3, 2024 · d6f9971 · d6f9971
1 parent 8e4733b
commit d6f9971
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 19 deletions.
diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
@@ -92,16 +92,12 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
 
   useEffect(() => {
     fetchAggregatedResults();
-  }, [
-    props.dashboardStartAndEndDate,
-    props.metricNameAndUnits,
-  ]);
+  }, [props.dashboardStartAndEndDate, props.metricNameAndUnits]);
 
   const [metricQueryConfig, setMetricQueryConfig] = React.useState<
     MetricQueryConfigData | undefined
   >(props.component.arguments.metricQueryConfig);
 
-
   useEffect(() => {
     // set metricQueryConfig to the new value only if it is different from the previous value
     if (
@@ -139,18 +135,18 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
   const chartMetricViewData: MetricViewData = {
     queryConfigs: props.component.arguments.metricQueryConfig
       ? [
-        {
-          ...props.component.arguments.metricQueryConfig!,
-          metricAliasData: {
-            title: props.component.arguments.chartTitle || undefined,
-            description:
-              props.component.arguments.chartDescription || undefined,
-            metricVariable: undefined,
-            legend: props.component.arguments.legendText || undefined,
-            legendUnit: props.component.arguments.legendUnit || undefined,
+          {
+            ...props.component.arguments.metricQueryConfig!,
+            metricAliasData: {
+              title: props.component.arguments.chartTitle || undefined,
+              description:
+                props.component.arguments.chartDescription || undefined,
+              metricVariable: undefined,
+              legend: props.component.arguments.legendText || undefined,
+              legendUnit: props.component.arguments.legendUnit || undefined,
+            },
           },
-        },
-      ]
+        ]
       : [],
     startAndEndDate: DashboardStartAndEndDateUtil.getStartAndEndDate(
       props.dashboardStartAndEndDate,

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
@@ -12,6 +12,7 @@ import AggregationType from "Common/Types/BaseDatabase/AggregationType";
 import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
 import JSONFunctions from "Common/Types/JSONFunctions";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import MetricNameAndUnit from "../../Metrics/Types/MetricNameAndUnit";
 
 export interface ComponentProps extends DashboardBaseComponentProps {
   component: DashboardValueComponent;
@@ -158,9 +159,20 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
     aggregatedValue = aggregatedValue / avgCount;
   }
 
+  // round to 2 decimal places
+  aggregatedValue = Math.round(aggregatedValue * 100) / 100;
+
   const valueHeightInPx: number = props.dashboardComponentHeightInPx * 0.4;
   const titleHeightInPx: number = props.dashboardComponentHeightInPx * 0.13;
 
+  const unit: string | undefined =
+    props.metricNameAndUnits?.find((item: MetricNameAndUnit) => {
+      return (
+        item.metricName?.toString() ===
+        props.component.arguments.metricQueryConfig?.metricQueryData.filterData.metricName?.toString()
+      );
+    })?.unit || "";
+
   return (
     <div className="w-full text-center h-full m-auto">
       <div
@@ -178,6 +190,7 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
         }}
       >
         {aggregatedValue || "0"}
+        {unit}
       </div>
     </div>
   );

diff --git a/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx b/Dashboard/src/Components/Metrics/MetricQueryConfig.tsx
@@ -28,7 +28,6 @@ export interface ComponentProps {
 const MetricGraphConfig: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-
   const getContent: GetReactElementFunction = (): ReactElement => {
     return (
       <div>

diff --git a/Dashboard/src/Components/NavBar/NavBar.tsx b/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"