Refactor DashboardChartComponent and related components for improved …

…code readability and maintainability; add optional title and description properties for enhanced chart configuration
OneUptime · Dec 2, 2024 · cc62b26 · cc62b26
1 parent 6113b10
commit cc62b26
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 25 deletions.
diff --git a/Common/Utils/Dashboard/Components/DashboardChartComponent.ts b/Common/Utils/Dashboard/Components/DashboardChartComponent.ts
@@ -38,8 +38,6 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       ComponentArgument<DashboardChartComponent>
     > = [];
 
-
-
     componentArguments.push({
       name: "Chart Configuration",
       description: "Please select the metrics to display on the chart",

diff --git a/Common/Utils/Monitor/MonitorMetricType.ts b/Common/Utils/Monitor/MonitorMetricType.ts
@@ -161,7 +161,6 @@ class MonitorMetricTypeUtil {
     }
   }
 
-
   public static getDescriptionByMonitorMetricType(
     monitorMetricType: MonitorMetricType,
   ): string {

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx
@@ -115,20 +115,23 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
     heightOfChart = undefined;
   }
 
-  // add title and description. 
+  // add title and description.
 
   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/DashboardTextComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardTextComponent.tsx
@@ -10,13 +10,18 @@ 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 - 20;
+  const textHeightInxPx: number = props.dashboardComponentHeightInPx - 20;
 
   return (
     <div>
-      <div className={textClassName} style={{
-        height: textHeightInxPx > 0 ? `${textHeightInxPx}px` : "auto",
-      }}>{props.component.arguments.text}</div>
+      <div
+        className={textClassName}
+        style={{
+          height: textHeightInxPx > 0 ? `${textHeightInxPx}px` : "auto",
+        }}
+      >
+        {props.component.arguments.text}
+      </div>
     </div>
   );
 };

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardValueComponent.tsx
@@ -75,12 +75,11 @@ const DashboardValueComponent: FunctionComponent<ComponentProps> = (
           "Please select an Aggregation Type. Click here to add a Aggregation Type.",
         );
         return;
-      } else {
-        setAggregationType(
-          (metricViewData.queryConfigs[0].metricQueryData.filterData
-            ?.aggegationType as AggregationType) || AggregationType.Avg,
-        );
       }
+      setAggregationType(
+        (metricViewData.queryConfigs[0].metricQueryData.filterData
+          ?.aggegationType as AggregationType) || AggregationType.Avg,
+      );
 
       try {
         const results: Array<AggregatedResult> = await MetricUtil.fetchResults({

diff --git a/Dashboard/src/Components/Monitor/MonitorMetrics.tsx b/Dashboard/src/Components/Monitor/MonitorMetrics.tsx
@@ -125,11 +125,11 @@ const MonitorMetricsElement: FunctionComponent<ComponentProps> = (
               MonitorMetricTypeUtil.getDescriptionByMonitorMetricType(
                 monitorMetricType,
               ),
-              legend:   
+            legend:
               MonitorMetricTypeUtil.getLegendByMonitorMetricType(
                 monitorMetricType,
               ),
-              legendUnit:
+            legendUnit:
               MonitorMetricTypeUtil.getLegendUnitByMonitorMetricType(
                 monitorMetricType,
               ),
-Original file line number
+Diff line change
@@ Expand Up / @@ -161,7 +161,6 @@ class MonitorMetricTypeUtil { @@
         }
       }
       public static getDescriptionByMonitorMetricType(
         monitorMetricType: MonitorMetricType,
       ): string {
@@ Expand Down @@