feat: add dropdown support for chart type selection in Dashboard components

Common/Types/Dashboard/DashboardComponents/ComponentArgument.ts

@@ -1,4 +1,5 @@
 import DashboardBaseComponent from "./DashboardBaseComponent";
+import { DropdownOption } from "../../../UI/Components/Dropdown/Dropdown";
 
 export enum ComponentInputType {
   Text = "Text",
@@ -9,6 +10,7 @@ export enum ComponentInputType {
   Decimal = "Decimal",
   MetricsQueryConfig = "MetricsQueryConfig",
   LongText = "Long Text",
+  Dropdown = "Dropdown",
 }
 
 export interface ComponentArgument<T extends DashboardBaseComponent> {
@@ -19,4 +21,5 @@ export interface ComponentArgument<T extends DashboardBaseComponent> {
   id: keyof T["arguments"];
   isAdvanced?: boolean | undefined;
   placeholder?: string | undefined;
+  dropdownOptions?: Array<DropdownOption> | undefined;
 }

Common/Types/Dashboard/DashboardComponents/DashboardChartComponent.ts

@@ -1,6 +1,7 @@
 import MetricQueryConfigData from "../../Metrics/MetricQueryConfigData";
 import ObjectID from "../../ObjectID";
 import DashboardComponentType from "../DashboardComponentType";
+import DashboardChartType from "../Chart/ChartType";
 import BaseComponent from "./DashboardBaseComponent";
 
 export default interface DashboardChartComponent extends BaseComponent {
@@ -12,5 +13,6 @@ export default interface DashboardChartComponent extends BaseComponent {
     chartDescription?: string | undefined;
     legendText?: string | undefined;
     legendUnit?: string | undefined;
+    chartType?: DashboardChartType | undefined;
   };
 }

Common/Utils/Dashboard/Components/DashboardChartComponent.ts

@@ -7,6 +7,7 @@ import {
   ComponentInputType,
 } from "../../../Types/Dashboard/DashboardComponents/ComponentArgument";
 import DashboardComponentType from "../../../Types/Dashboard/DashboardComponentType";
+import DashboardChartType from "../../../Types/Dashboard/Chart/ChartType";
 
 export default class DashboardChartComponentUtil extends DashboardBaseComponentUtil {
   public static override getDefaultComponent(): DashboardChartComponent {
@@ -27,6 +28,7 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
             groupBy: undefined,
           },
         },
+        chartType: DashboardChartType.Line,
       },
     };
   }
@@ -38,6 +40,24 @@ export default class DashboardChartComponentUtil extends DashboardBaseComponentU
       ComponentArgument<DashboardChartComponent>
     > = [];
 
+    componentArguments.push({
+      name: "Chart Type",
+      description: "Select the type of chart to display",
+      required: true,
+      type: ComponentInputType.Dropdown,
+      id: "chartType",
+      dropdownOptions: [
+        {
+          label: "Line Chart",
+          value: DashboardChartType.Line,
+        },
+        {
+          label: "Bar Chart",
+          value: DashboardChartType.Bar,
+        },
+      ],
+    });
+
     componentArguments.push({
       name: "Chart Configuration",
       description: "Please select the metrics to display on the chart",

Dashboard/src/Components/Dashboard/Canvas/ArgumentsForm.tsx

@@ -160,6 +160,7 @@ const ArgumentsForm: FunctionComponent<ComponentProps> = (
                 placeholder: arg.placeholder,
                 ...ComponentInputTypeToFormFieldType.getFormFieldTypeByComponentInputType(
                   arg.type,
+                  arg.dropdownOptions,
                 ),
                 getCustomElement: getCustomElememnt(arg),
               };

Dashboard/src/Components/Dashboard/Canvas/ComponentInputTypeToFormFieldType.tsx

@@ -5,6 +5,7 @@ import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchem
 export default class ComponentInputTypeToFormFieldType {
   public static getFormFieldTypeByComponentInputType(
     componentInputType: ComponentInputType,
+    dropdownOptions?: Array<DropdownOption> | undefined,
   ): {
     fieldType: FormFieldSchemaType;
     dropdownOptions?: Array<DropdownOption> | undefined;
@@ -52,6 +53,13 @@ export default class ComponentInputTypeToFormFieldType {
       };
     }
 
+    if (componentInputType === ComponentInputType.Dropdown) {
+      return {
+        fieldType: FormFieldSchemaType.Dropdown,
+        dropdownOptions: dropdownOptions || [],
+      };
+    }
+
     return {
       fieldType: FormFieldSchemaType.Text,
       dropdownOptions: [],

Dashboard/src/Components/Dashboard/Components/DashboardChartComponent.tsx

@@ -10,10 +10,13 @@ import MetricUtil from "../../Metrics/Utils/Metrics";
 import API from "Common/UI/Utils/API/API";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
 import JSONFunctions from "Common/Types/JSONFunctions";
-import MetricQueryConfigData from "Common/Types/Metrics/MetricQueryConfigData";
+import MetricQueryConfigData, {
+  MetricChartType,
+} from "Common/Types/Metrics/MetricQueryConfigData";
 import Icon from "Common/UI/Components/Icon/Icon";
 import IconProp from "Common/Types/Icon/IconProp";
 import { RangeStartAndEndDateTimeUtil } from "Common/Types/Time/RangeStartAndEndDateTime";
+import DashboardChartType from "Common/Types/Dashboard/Chart/ChartType";
 
 export interface ComponentProps extends DashboardBaseComponentProps {
   component: DashboardChartComponent;
@@ -141,6 +144,14 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
 
   // add title and description.
 
+  // Convert dashboard chart type to metric chart type
+  const getMetricChartType = (): MetricChartType => {
+    if (props.component.arguments.chartType === DashboardChartType.Bar) {
+      return MetricChartType.BAR;
+    }
+    return MetricChartType.LINE;
+  };
+
   const chartMetricViewData: MetricViewData = {
     queryConfigs: props.component.arguments.metricQueryConfig
       ? [
@@ -154,6 +165,7 @@ const DashboardChartComponentElement: FunctionComponent<ComponentProps> = (
               legend: props.component.arguments.legendText || undefined,
               legendUnit: props.component.arguments.legendUnit || undefined,
             },
+            chartType: getMetricChartType(),
           },
         ]
       : [],