@databrainhq/plugin 0.7.17 → 0.7.19

package/dist/index.es.js

@@ -2554,6 +2554,7 @@ var styles$C = {
   truncate,
   border,
   "p-2": "_p-2_1ddns_1",
+  "p-1": "_p-1_1ddns_1",
   "text-center": "_text-center_1ddns_1",
   "text-sm": "_text-sm_1ddns_1",
   "text-xs": "_text-xs_1ddns_1",
@@ -7063,7 +7064,8 @@ const getChartOption = ({
   labelSettings,
   axisSettings,
   customSettings,
-  backGroundColor
+  backGroundColor,
+  tableSettings
 }) => {
   if (chartType2 === CHART_TYPES.funnel) {
     return {
@@ -7106,10 +7108,6 @@ const getChartOption = ({
       measure: "",
       sankeyValues: [],
       singleValue: singleValue2,
-      margins,
-      legendSettings,
-      labelSettings,
-      axisSettings,
       customSettings
     };
   }
@@ -7143,7 +7141,8 @@ const getChartOption = ({
     labelSettings,
     axisSettings,
     backGroundColor,
-    customSettings
+    customSettings,
+    tableSettings
   };
 };
 const useExternalMetric = ({
@@ -7165,6 +7164,7 @@ const useExternalMetric = ({
   labelSettings,
   axisSettings,
   customSettings,
+  tableSettings,
   backGroundColor,
   clientId,
   companyId,
@@ -7206,7 +7206,8 @@ const useExternalMetric = ({
           labelSettings,
           axisSettings,
           customSettings,
-          backGroundColor
+          backGroundColor,
+          tableSettings
         }),
         clientId: clientId || null,
         isCreatedByClient: !!clientId,
@@ -81518,7 +81519,8 @@ var style = {
 };
 const TableChart = ({
   data: data2,
-  chartClickConfig
+  chartClickConfig,
+  tableSettings
 }) => {
   var _a2, _b2, _c2;
   let k = 0;
@@ -81618,7 +81620,8 @@ const MetricChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  chartClickConfig
+  chartClickConfig,
+  tableSettings
 }) => {
   var _a2, _b2, _c2, _d;
   if (chartType2 === CHART_TYPES.line) {
@@ -81900,10 +81903,8 @@ const MetricChart = ({
   if (chartType2 === CHART_TYPES.table) {
     return /* @__PURE__ */ jsx(TableChart, {
       data: data2,
-      margins,
-      legendSettings,
-      labelSettings,
-      chartClickConfig
+      chartClickConfig,
+      tableSettings
     });
   }
   return /* @__PURE__ */ jsx("div", {
@@ -81936,6 +81937,7 @@ const FullScreenChart = ({
         axisSettings: chart.axisSettings,
         backGroundColor: chart.backGroundColor,
         enableSaveAs: true,
+        tableSettings: chart.tableSettings,
         customSettings: chart.customSettings,
         chartClickConfig: {
           isEnable: false,
@@ -82339,8 +82341,8 @@ const GlobalFilters = ({
     })
   });
 };
-const container$8 = "_container_17x7x_1";
-const tooltip$1 = "_tooltip_17x7x_7";
+const container$8 = "_container_3e9wk_1";
+const tooltip$1 = "_tooltip_3e9wk_7";
 var styles$i = {
   container: container$8,
   tooltip: tooltip$1
@@ -82521,23 +82523,25 @@ const Dataset = ({
     })]
   });
 };
-const container$6 = "_container_1cslw_1";
-const header$2 = "_header_1cslw_7";
-const headerText = "_headerText_1cslw_13";
-const tab$2 = "_tab_1cslw_19";
-const tabText$1 = "_tabText_1cslw_25";
-const tabHeading = "_tabHeading_1cslw_31";
-const form = "_form_1cslw_37";
-const inputWrapper = "_inputWrapper_1cslw_43";
-const input$1 = "_input_1cslw_43";
-const selectWrapper = "_selectWrapper_1cslw_55";
-const select = "_select_1cslw_55";
-const label$1 = "_label_1cslw_67";
-const series = "_series_1cslw_73";
-const legendWrapper = "_legendWrapper_1cslw_79";
-const seriesWrapper = "_seriesWrapper_1cslw_85";
-const valueLabelWrapper = "_valueLabelWrapper_1cslw_91";
-const singleCheckBox = "_singleCheckBox_1cslw_97";
+const container$6 = "_container_1mqhp_1";
+const header$2 = "_header_1mqhp_7";
+const headerText = "_headerText_1mqhp_13";
+const tab$2 = "_tab_1mqhp_19";
+const tabText$1 = "_tabText_1mqhp_25";
+const tabHeading = "_tabHeading_1mqhp_31";
+const form = "_form_1mqhp_37";
+const inputWrapper = "_inputWrapper_1mqhp_43";
+const input$1 = "_input_1mqhp_43";
+const selectWrapper = "_selectWrapper_1mqhp_55";
+const select = "_select_1mqhp_55";
+const label$1 = "_label_1mqhp_67";
+const series = "_series_1mqhp_73";
+const legendWrapper = "_legendWrapper_1mqhp_79";
+const seriesWrapper = "_seriesWrapper_1mqhp_85";
+const valueLabelWrapper = "_valueLabelWrapper_1mqhp_91";
+const singleCheckBox = "_singleCheckBox_1mqhp_97";
+const seriesCheck = "_seriesCheck_1mqhp_103";
+const seriesCheckContainer = "_seriesCheckContainer_1mqhp_109";
 var styles$e = {
   container: container$6,
   header: header$2,
@@ -82555,7 +82559,9 @@ var styles$e = {
   legendWrapper,
   seriesWrapper,
   valueLabelWrapper,
-  singleCheckBox
+  singleCheckBox,
+  seriesCheck,
+  seriesCheckContainer
 };
 const tab$1 = "_tab_1imil_1";
 const button$2 = "_button_1imil_7";
@@ -82597,552 +82603,747 @@ const ChartConfigure = ({
   customSettings,
   setCustomSettings,
   backGroundColor,
-  setBackGroundColor
+  setBackGroundColor,
+  tableSettings,
+  setTableSettings
 }) => {
   const TabList = ["Margins", "Legend", "Custom"];
   const singleValueTabs = ["Custom"];
-  const [activeTab2, setActiveTab] = useState("Custom");
+  const tableTabs = ["UI Style", "Features"];
+  const [activeTab2, setActiveTab] = useState("");
+  useEffect(() => {
+    if (chartType2 === "table") {
+      setActiveTab("UI Style");
+    } else {
+      setActiveTab("Custom");
+    }
+  }, [chartType2]);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$e.container,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: "h-[10%]",
-      children: /* @__PURE__ */ jsx(Tab, {
-        options: chartType2 !== "single value" ? TabList : singleValueTabs,
-        activeTab: activeTab2,
-        setActiveTab,
-        className: styles$e.tab,
-        tabText: styles$e.tabText
-      })
-    }), /* @__PURE__ */ jsxs("form", {
-      className: styles$e.form,
-      children: [activeTab2 === "Margins" && /* @__PURE__ */ jsxs("div", {
-        className: styles$e.inputWrapper,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: styles$e.input,
-          children: /* @__PURE__ */ jsx(InputField, {
-            type: "number",
-            label: "Top",
-            onChange: (e2) => setMargins((m2) => ({
-              ...m2,
-              marginTop: parseInt(e2.target.value, 10)
-            })),
-            defaultValue: margins.marginTop
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$e.input,
-          children: /* @__PURE__ */ jsx(InputField, {
-            type: "number",
-            label: "Bottom",
-            onChange: (e2) => setMargins((m2) => ({
-              ...m2,
-              marginBottom: parseInt(e2.target.value, 10)
-            })),
-            defaultValue: margins.marginBottom
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$e.input,
-          children: /* @__PURE__ */ jsx(InputField, {
-            type: "number",
-            label: "Left",
-            defaultValue: margins.marginLeft,
-            onChange: (e2) => setMargins((m2) => ({
-              ...m2,
-              marginLeft: parseInt(e2.target.value, 10)
-            }))
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$e.input,
-          children: /* @__PURE__ */ jsx(InputField, {
-            type: "number",
-            label: "Right",
-            defaultValue: margins.marginRight,
-            onChange: (e2) => setMargins((m2) => ({
-              ...m2,
-              marginRight: parseInt(e2.target.value, 10)
-            }))
-          })
-        })]
-      }), activeTab2 === "Legend" && /* @__PURE__ */ jsxs("div", {
-        className: styles$e.legendWrapper,
-        children: [/* @__PURE__ */ jsx(InputField, {
-          type: "checkbox",
-          label: "Show Legend",
-          checked: legendSettings.show,
-          onChange: (e2) => setLegendSettings((settings2) => ({
-            ...settings2,
-            show: e2.target.checked
-          }))
-        }), /* @__PURE__ */ jsxs("div", {
-          children: [/* @__PURE__ */ jsx(Text, {
-            variant: "h1",
-            styleClass: "primary",
-            children: "Position"
-          }), /* @__PURE__ */ jsxs("div", {
-            className: styles$e.inputWrapper,
-            children: [/* @__PURE__ */ jsx("div", {
-              className: styles$e.input,
-              children: /* @__PURE__ */ jsx(InputField, {
-                type: "number",
-                label: "Top",
-                defaultValue: legendSettings.top,
-                onChange: (e2) => setLegendSettings((settings2) => ({
-                  ...settings2,
-                  top: parseInt(e2.target.value, 10)
+    children: [chartType2 === "table" && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
+        className: "h-[10%]",
+        children: /* @__PURE__ */ jsx(Tab, {
+          options: tableTabs,
+          activeTab: activeTab2,
+          setActiveTab,
+          className: styles$e.tab,
+          tabText: styles$e.tabText
+        })
+      }), /* @__PURE__ */ jsxs("form", {
+        className: styles$e.form,
+        children: [activeTab2 === "UI Style" && /* @__PURE__ */ jsxs("div", {
+          className: styles$e.inputWrapper,
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesWrapper,
+            children: [/* @__PURE__ */ jsx(Text, {
+              variant: "h1",
+              styleClass: "font-14",
+              className: "font-medium",
+              children: "Table content Alignment"
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$e.select,
+              children: /* @__PURE__ */ jsx(Select, {
+                value: tableSettings.contentAlignment,
+                options: [{
+                  label: "Left Aligned",
+                  value: "left"
+                }, {
+                  label: "Right Aligned",
+                  value: "right"
+                }, {
+                  label: "Center Aligned",
+                  value: "center"
+                }],
+                onChange: (value) => setTableSettings((s2) => ({
+                  ...s2,
+                  contentAlignment: value
                 }))
               })
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesWrapper,
+            children: [/* @__PURE__ */ jsx(Text, {
+              variant: "h1",
+              styleClass: "font-14",
+              className: "font-medium",
+              children: "Table line gap"
             }), /* @__PURE__ */ jsx("div", {
-              className: styles$e.input,
-              children: /* @__PURE__ */ jsx(InputField, {
-                type: "number",
-                label: "Bottom",
-                defaultValue: legendSettings.bottom,
-                onChange: (e2) => setLegendSettings((settings2) => ({
-                  ...settings2,
-                  bottom: parseInt(e2.target.value, 10)
+              className: styles$e.select,
+              children: /* @__PURE__ */ jsx(Select, {
+                value: tableSettings.lineGap,
+                options: [{
+                  label: "Small",
+                  value: "small"
+                }, {
+                  label: "Medium",
+                  value: "medium"
+                }],
+                onChange: (value) => setTableSettings((s2) => ({
+                  ...s2,
+                  lineGap: value
                 }))
               })
-            }), /* @__PURE__ */ jsx("div", {
-              className: styles$e.input,
-              children: /* @__PURE__ */ jsx(InputField, {
-                type: "number",
-                label: "Left",
-                defaultValue: legendSettings.left,
-                onChange: (e2) => setLegendSettings((settings2) => ({
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesCheckContainer,
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: styles$e.seriesCheck,
+              children: [/* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Hide Vertical Divider",
+                checked: tableSettings.hideVerticalDivider,
+                onChange: (e2) => setTableSettings((settings2) => ({
                   ...settings2,
-                  left: parseInt(e2.target.value, 10)
+                  hideVerticalDivider: e2.target.checked
                 }))
-              })
-            }), /* @__PURE__ */ jsx("div", {
-              className: styles$e.input,
-              children: /* @__PURE__ */ jsx(InputField, {
-                type: "number",
-                label: "Right",
-                defaultValue: legendSettings.right,
-                onChange: (e2) => setLegendSettings((settings2) => ({
+              }), /* @__PURE__ */ jsx(InfoTooltip, {
+                children: "Hide Vertical Divider"
+              })]
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$e.seriesCheck,
+              children: [/* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Enable Striped Rows",
+                checked: tableSettings.enableStripedRows,
+                onChange: (e2) => setTableSettings((settings2) => ({
                   ...settings2,
-                  right: parseInt(e2.target.value, 10)
+                  enableStripedRows: e2.target.checked
                 }))
-              })
+              }), /* @__PURE__ */ jsx(InfoTooltip, {
+                children: "Enable Striped Rows"
+              })]
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$e.seriesCheck,
+              children: [/* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show Row Hover",
+                checked: tableSettings.showRowHover,
+                onChange: (e2) => setTableSettings((settings2) => ({
+                  ...settings2,
+                  showRowHover: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsx(InfoTooltip, {
+                children: "Show Row Hover"
+              })]
             })]
           })]
-        }), /* @__PURE__ */ jsxs("div", {
-          className: styles$e.selectWrapper,
+        }), activeTab2 === "Features" && /* @__PURE__ */ jsxs("div", {
+          className: styles$e.seriesCheckContainer,
           children: [/* @__PURE__ */ jsx(Text, {
-            variant: "h1",
-            styleClass: "primary",
-            children: "Appearance"
-          }), /* @__PURE__ */ jsx("div", {
-            className: styles$e.select,
-            children: /* @__PURE__ */ jsx(Select, {
-              value: legendSettings.position,
-              options: [{
-                label: "Horizontal",
-                value: "horizontal"
-              }, {
-                label: "Vertical",
-                value: "vertical"
-              }],
-              onChange: (value) => setLegendSettings((settings2) => ({
+            styleClass: "font-14c",
+            variant: "p",
+            className: styles$e.tabHeading,
+            children: "Table feature preferences"
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesCheck,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "checkbox",
+              label: "Show Table Title",
+              checked: tableSettings.showTableTitle,
+              onChange: (e2) => setTableSettings((settings2) => ({
                 ...settings2,
-                position: value
+                showTableTitle: e2.target.checked
               }))
-            })
+            }), /* @__PURE__ */ jsx(InfoTooltip, {
+              children: "Show Table Title"
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesCheck,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "checkbox",
+              label: "Show Table Description",
+              checked: tableSettings.showTableDesc,
+              onChange: (e2) => setTableSettings((settings2) => ({
+                ...settings2,
+                showTableDesc: e2.target.checked
+              }))
+            }), /* @__PURE__ */ jsx(InfoTooltip, {
+              children: "Show Table Description"
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesCheck,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "checkbox",
+              label: "Enable Table Search options",
+              checked: tableSettings.enableTableSearch,
+              onChange: (e2) => setTableSettings((settings2) => ({
+                ...settings2,
+                enableTableSearch: e2.target.checked
+              }))
+            }), /* @__PURE__ */ jsx(InfoTooltip, {
+              children: "Enable Table Search Options"
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesCheck,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "checkbox",
+              label: "Enable Filter options",
+              checked: tableSettings.enableFilter,
+              onChange: (e2) => setTableSettings((settings2) => ({
+                ...settings2,
+                enableFilter: e2.target.checked
+              }))
+            }), /* @__PURE__ */ jsx(InfoTooltip, {
+              children: "Enable Filter Options"
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.seriesCheck,
+            children: [/* @__PURE__ */ jsx(InputField, {
+              type: "checkbox",
+              label: "Enable Table sorting",
+              checked: tableSettings.enableSorting,
+              onChange: (e2) => setTableSettings((settings2) => ({
+                ...settings2,
+                enableSorting: e2.target.checked
+              }))
+            }), /* @__PURE__ */ jsx(InfoTooltip, {
+              children: "Enable Table Sorting"
+            })]
           })]
         })]
-      }), activeTab2 === "Custom" && /* @__PURE__ */ jsxs("div", {
-        className: styles$e.series,
-        children: [/* @__PURE__ */ jsx(Text, {
-          styleClass: "font-14c",
-          variant: "p",
-          className: styles$e.tabHeading,
-          children: "Chart preferences"
-        }), chartType2 !== "single value" && /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsxs("div", {
-            className: styles$e.seriesWrapper,
+      })]
+    }), chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
+        className: "h-[10%]",
+        children: /* @__PURE__ */ jsx(Tab, {
+          options: chartType2 !== "single value" ? TabList : singleValueTabs,
+          activeTab: activeTab2,
+          setActiveTab,
+          className: styles$e.tab,
+          tabText: styles$e.tabText
+        })
+      }), /* @__PURE__ */ jsxs("form", {
+        className: styles$e.form,
+        children: [activeTab2 === "Margins" && /* @__PURE__ */ jsxs("div", {
+          className: styles$e.inputWrapper,
+          children: [/* @__PURE__ */ jsx("div", {
+            className: styles$e.input,
+            children: /* @__PURE__ */ jsx(InputField, {
+              type: "number",
+              label: "Top",
+              onChange: (e2) => setMargins((m2) => ({
+                ...m2,
+                marginTop: parseInt(e2.target.value, 10)
+              })),
+              defaultValue: margins.marginTop
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: styles$e.input,
+            children: /* @__PURE__ */ jsx(InputField, {
+              type: "number",
+              label: "Bottom",
+              onChange: (e2) => setMargins((m2) => ({
+                ...m2,
+                marginBottom: parseInt(e2.target.value, 10)
+              })),
+              defaultValue: margins.marginBottom
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: styles$e.input,
+            children: /* @__PURE__ */ jsx(InputField, {
+              type: "number",
+              label: "Left",
+              defaultValue: margins.marginLeft,
+              onChange: (e2) => setMargins((m2) => ({
+                ...m2,
+                marginLeft: parseInt(e2.target.value, 10)
+              }))
+            })
+          }), /* @__PURE__ */ jsx("div", {
+            className: styles$e.input,
+            children: /* @__PURE__ */ jsx(InputField, {
+              type: "number",
+              label: "Right",
+              defaultValue: margins.marginRight,
+              onChange: (e2) => setMargins((m2) => ({
+                ...m2,
+                marginRight: parseInt(e2.target.value, 10)
+              }))
+            })
+          })]
+        }), activeTab2 === "Legend" && /* @__PURE__ */ jsxs("div", {
+          className: styles$e.legendWrapper,
+          children: [/* @__PURE__ */ jsx(InputField, {
+            type: "checkbox",
+            label: "Show Legend",
+            checked: legendSettings.show,
+            onChange: (e2) => setLegendSettings((settings2) => ({
+              ...settings2,
+              show: e2.target.checked
+            }))
+          }), /* @__PURE__ */ jsxs("div", {
             children: [/* @__PURE__ */ jsx(Text, {
               variant: "h1",
-              styleClass: "font-14",
-              children: "Value labels"
-            }), /* @__PURE__ */ jsx("div", {
-              className: styles$e.valueLabelWrapper,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: labelSettings.position,
-                options: [{
-                  label: "Hidden",
-                  value: "hidden"
-                }, {
+              styleClass: "primary",
+              children: "Position"
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$e.inputWrapper,
+              children: [/* @__PURE__ */ jsx("div", {
+                className: styles$e.input,
+                children: /* @__PURE__ */ jsx(InputField, {
+                  type: "number",
                   label: "Top",
-                  value: "top"
-                }, {
+                  defaultValue: legendSettings.top,
+                  onChange: (e2) => setLegendSettings((settings2) => ({
+                    ...settings2,
+                    top: parseInt(e2.target.value, 10)
+                  }))
+                })
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$e.input,
+                children: /* @__PURE__ */ jsx(InputField, {
+                  type: "number",
                   label: "Bottom",
-                  value: "bottom"
-                }, {
-                  label: "Right",
-                  value: "right"
-                }, {
+                  defaultValue: legendSettings.bottom,
+                  onChange: (e2) => setLegendSettings((settings2) => ({
+                    ...settings2,
+                    bottom: parseInt(e2.target.value, 10)
+                  }))
+                })
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$e.input,
+                children: /* @__PURE__ */ jsx(InputField, {
+                  type: "number",
                   label: "Left",
-                  value: "left"
+                  defaultValue: legendSettings.left,
+                  onChange: (e2) => setLegendSettings((settings2) => ({
+                    ...settings2,
+                    left: parseInt(e2.target.value, 10)
+                  }))
+                })
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$e.input,
+                children: /* @__PURE__ */ jsx(InputField, {
+                  type: "number",
+                  label: "Right",
+                  defaultValue: legendSettings.right,
+                  onChange: (e2) => setLegendSettings((settings2) => ({
+                    ...settings2,
+                    right: parseInt(e2.target.value, 10)
+                  }))
+                })
+              })]
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            className: styles$e.selectWrapper,
+            children: [/* @__PURE__ */ jsx(Text, {
+              variant: "h1",
+              styleClass: "primary",
+              children: "Appearance"
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$e.select,
+              children: /* @__PURE__ */ jsx(Select, {
+                value: legendSettings.position,
+                options: [{
+                  label: "Horizontal",
+                  value: "horizontal"
                 }, {
-                  label: "Inside",
-                  value: "inside"
+                  label: "Vertical",
+                  value: "vertical"
                 }],
-                onChange: (value) => value === "hidden" ? setLabelSettings((s2) => ({
-                  ...s2,
-                  show: false,
-                  position: value
-                })) : setLabelSettings((s2) => ({
-                  ...s2,
-                  show: true,
+                onChange: (value) => setLegendSettings((settings2) => ({
+                  ...settings2,
                   position: value
                 }))
               })
             })]
-          }), chartType2 !== "pie" && chartType2 !== "doughnut" && chartType2 !== "funnel" && chartType2 !== "gauge" && chartType2 !== "sankey" && chartType2 !== "singleValue" && chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
+          })]
+        }), activeTab2 === "Custom" && /* @__PURE__ */ jsxs("div", {
+          className: styles$e.series,
+          children: [/* @__PURE__ */ jsx(Text, {
+            styleClass: "font-14c",
+            variant: "p",
+            className: styles$e.tabHeading,
+            children: "Chart preferences"
+          }), chartType2 !== "single value" && /* @__PURE__ */ jsxs(Fragment, {
             children: [/* @__PURE__ */ jsxs("div", {
               className: styles$e.seriesWrapper,
               children: [/* @__PURE__ */ jsx(Text, {
                 variant: "h1",
                 styleClass: "font-14",
-                className: "font-medium",
-                children: "Axis"
+                children: "Value labels"
               }), /* @__PURE__ */ jsx("div", {
-                className: styles$e.select,
+                className: styles$e.valueLabelWrapper,
                 children: /* @__PURE__ */ jsx(Select, {
-                  value: axisSettings.axis,
+                  value: labelSettings.position,
                   options: [{
-                    label: "Left",
-                    value: "left"
+                    label: "Hidden",
+                    value: "hidden"
+                  }, {
+                    label: "Top",
+                    value: "top"
+                  }, {
+                    label: "Bottom",
+                    value: "bottom"
                   }, {
                     label: "Right",
                     value: "right"
-                  }],
-                  onChange: (value) => setAxisSettings((s2) => ({
-                    ...s2,
-                    axis: value
-                  }))
-                })
-              })]
-            }), chartType2 === "bar" || chartType2 === "row" || chartType2 === "stack" || chartType2 === "histogram" ? /* @__PURE__ */ jsx(InputField, {
-              type: "checkbox",
-              label: "Show Bar Background",
-              checked: backGroundColor.show,
-              onChange: (e2) => setBackGroundColor((settings2) => ({
-                ...settings2,
-                show: e2.target.checked
-              }))
-            }) : null, /* @__PURE__ */ jsxs("div", {
-              className: styles$e.seriesWrapper,
-              children: [/* @__PURE__ */ jsxs(Text, {
-                variant: "h1",
-                styleClass: "font-14",
-                className: styles$e.label,
-                children: ["Hide Axis labels", /* @__PURE__ */ jsx(InfoTooltip, {
-                  children: "Axis labels represents the x and y axis values"
-                })]
-              }), /* @__PURE__ */ jsx("div", {
-                className: styles$e.select,
-                children: /* @__PURE__ */ jsx(Select, {
-                  value: customSettings.axisLabels,
-                  options: [{
-                    label: "Hide X-axis labels",
-                    value: "x"
-                  }, {
-                    label: "Hide Y-axis labels",
-                    value: "y"
                   }, {
-                    label: "Hide both X and Y(axis) labels",
-                    value: "both"
+                    label: "Left",
+                    value: "left"
                   }, {
-                    label: "None",
-                    value: "none"
+                    label: "Inside",
+                    value: "inside"
                   }],
-                  onChange: (value) => setCustomSettings((s2) => ({
+                  onChange: (value) => value === "hidden" ? setLabelSettings((s2) => ({
+                    ...s2,
+                    show: false,
+                    position: value
+                  })) : setLabelSettings((s2) => ({
                     ...s2,
-                    axisLabels: value
+                    show: true,
+                    position: value
                   }))
                 })
               })]
-            }), /* @__PURE__ */ jsxs("div", {
+            }), chartType2 !== "pie" && chartType2 !== "doughnut" && chartType2 !== "funnel" && chartType2 !== "gauge" && chartType2 !== "sankey" && chartType2 !== "singleValue" && chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
+              children: [/* @__PURE__ */ jsxs("div", {
+                className: styles$e.seriesWrapper,
+                children: [/* @__PURE__ */ jsx(Text, {
+                  variant: "h1",
+                  styleClass: "font-14",
+                  className: "font-medium",
+                  children: "Axis"
+                }), /* @__PURE__ */ jsx("div", {
+                  className: styles$e.select,
+                  children: /* @__PURE__ */ jsx(Select, {
+                    value: axisSettings.axis,
+                    options: [{
+                      label: "Left",
+                      value: "left"
+                    }, {
+                      label: "Right",
+                      value: "right"
+                    }],
+                    onChange: (value) => setAxisSettings((s2) => ({
+                      ...s2,
+                      axis: value
+                    }))
+                  })
+                })]
+              }), chartType2 === "bar" || chartType2 === "row" || chartType2 === "stack" || chartType2 === "histogram" ? /* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show Bar Background",
+                checked: backGroundColor.show,
+                onChange: (e2) => setBackGroundColor((settings2) => ({
+                  ...settings2,
+                  show: e2.target.checked
+                }))
+              }) : null, /* @__PURE__ */ jsxs("div", {
+                className: styles$e.seriesWrapper,
+                children: [/* @__PURE__ */ jsxs(Text, {
+                  variant: "h1",
+                  styleClass: "font-14",
+                  className: styles$e.label,
+                  children: ["Hide Axis labels", /* @__PURE__ */ jsx(InfoTooltip, {
+                    children: "Axis labels represents the x and y axis values"
+                  })]
+                }), /* @__PURE__ */ jsx("div", {
+                  className: styles$e.select,
+                  children: /* @__PURE__ */ jsx(Select, {
+                    value: customSettings.axisLabels,
+                    options: [{
+                      label: "Hide X-axis labels",
+                      value: "x"
+                    }, {
+                      label: "Hide Y-axis labels",
+                      value: "y"
+                    }, {
+                      label: "Hide both X and Y(axis) labels",
+                      value: "both"
+                    }, {
+                      label: "None",
+                      value: "none"
+                    }],
+                    onChange: (value) => setCustomSettings((s2) => ({
+                      ...s2,
+                      axisLabels: value
+                    }))
+                  })
+                })]
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$e.seriesWrapper,
+                children: [/* @__PURE__ */ jsxs(Text, {
+                  variant: "h1",
+                  styleClass: "font-14",
+                  className: styles$e.label,
+                  children: ["Hide Splitlines", /* @__PURE__ */ jsx(InfoTooltip, {
+                    children: "Splitline is the reference lines that run along the directional x and y axis which act as reference markers"
+                  })]
+                }), /* @__PURE__ */ jsx("div", {
+                  className: styles$e.select,
+                  children: /* @__PURE__ */ jsx(Select, {
+                    value: customSettings.hideSplitLines,
+                    options: [{
+                      label: "Hide horizontal splitline",
+                      value: "horizontal"
+                    }, {
+                      label: "Hide vertical splitline",
+                      value: "vertical"
+                    }, {
+                      label: "Hide both splitline",
+                      value: "both"
+                    }, {
+                      label: "None",
+                      value: "none"
+                    }],
+                    onChange: (value) => setCustomSettings((s2) => ({
+                      ...s2,
+                      hideSplitLines: value
+                    }))
+                  })
+                })]
+              }), /* @__PURE__ */ jsxs("div", {
+                className: styles$e.seriesWrapper,
+                children: [/* @__PURE__ */ jsxs(Text, {
+                  variant: "h1",
+                  styleClass: "font-14",
+                  className: styles$e.label,
+                  children: ["Hide Axis Line", /* @__PURE__ */ jsx(InfoTooltip, {
+                    children: "The x-axis and y-axis lines act as a graph base from which the chart starts"
+                  })]
+                }), /* @__PURE__ */ jsx("div", {
+                  className: styles$e.select,
+                  children: /* @__PURE__ */ jsx(Select, {
+                    value: customSettings.hideAxisLines,
+                    options: [{
+                      label: "Hide X-axis line",
+                      value: "x"
+                    }, {
+                      label: "Hide Y-axis line",
+                      value: "y"
+                    }, {
+                      label: "Hide both X and Y(axis) lines",
+                      value: "both"
+                    }, {
+                      label: "None",
+                      value: "none"
+                    }],
+                    onChange: (value) => setCustomSettings((s2) => ({
+                      ...s2,
+                      hideAxisLines: value
+                    }))
+                  })
+                })]
+              }), chartType2 === "bar" || chartType2 === "row" || chartType2 === "stack" ? /* @__PURE__ */ jsxs(Fragment, {
+                children: [/* @__PURE__ */ jsxs("div", {
+                  className: styles$e.seriesWrapper,
+                  children: [/* @__PURE__ */ jsxs(Text, {
+                    variant: "h1",
+                    styleClass: "font-14",
+                    className: styles$e.label,
+                    children: ["Modify Bar width", /* @__PURE__ */ jsx(InfoTooltip, {
+                      children: "The width of each individual bar rectangle of the graph"
+                    })]
+                  }), /* @__PURE__ */ jsx(InputField, {
+                    type: "number",
+                    label: "",
+                    onChange: (e2) => setCustomSettings((m2) => ({
+                      ...m2,
+                      barWidth: parseInt(e2.target.value, 10)
+                    })),
+                    defaultValue: customSettings.barWidth
+                  })]
+                }), /* @__PURE__ */ jsxs("div", {
+                  className: styles$e.seriesWrapper,
+                  children: [/* @__PURE__ */ jsxs(Text, {
+                    variant: "h1",
+                    styleClass: "font-14",
+                    className: styles$e.label,
+                    children: ["Modify Bar radius", /* @__PURE__ */ jsx(InfoTooltip, {
+                      children: "The property that rounds the corners of the element's outer border edge"
+                    })]
+                  }), /* @__PURE__ */ jsx(InputField, {
+                    type: "number",
+                    label: "",
+                    onChange: (e2) => setCustomSettings((m2) => ({
+                      ...m2,
+                      barRadius: parseInt(e2.target.value, 10)
+                    })),
+                    defaultValue: customSettings.barRadius
+                  })]
+                })]
+              }) : null]
+            })]
+          }), chartType2 === "single value" && /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsxs("div", {
               className: styles$e.seriesWrapper,
-              children: [/* @__PURE__ */ jsxs(Text, {
+              children: [/* @__PURE__ */ jsx(Text, {
                 variant: "h1",
                 styleClass: "font-14",
                 className: styles$e.label,
-                children: ["Hide Splitlines", /* @__PURE__ */ jsx(InfoTooltip, {
-                  children: "Splitline is the reference lines that run along the directional x and y axis which act as reference markers"
-                })]
-              }), /* @__PURE__ */ jsx("div", {
-                className: styles$e.select,
-                children: /* @__PURE__ */ jsx(Select, {
-                  value: customSettings.hideSplitLines,
-                  options: [{
-                    label: "Hide horizontal splitline",
-                    value: "horizontal"
-                  }, {
-                    label: "Hide vertical splitline",
-                    value: "vertical"
-                  }, {
-                    label: "Hide both splitline",
-                    value: "both"
-                  }, {
-                    label: "None",
-                    value: "none"
-                  }],
-                  onChange: (value) => setCustomSettings((s2) => ({
-                    ...s2,
-                    hideSplitLines: value
-                  }))
-                })
+                children: "Single Value Chart Font Size"
+              }), /* @__PURE__ */ jsx(InputField, {
+                type: "number",
+                label: "",
+                onChange: (e2) => setCustomSettings((m2) => ({
+                  ...m2,
+                  fontSize: parseInt(e2.target.value, 10)
+                })),
+                defaultValue: customSettings.fontSize
               })]
             }), /* @__PURE__ */ jsxs("div", {
-              className: styles$e.seriesWrapper,
-              children: [/* @__PURE__ */ jsxs(Text, {
+              className: styles$e.singleCheckBox,
+              children: [/* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "",
+                checked: customSettings.subHeaderShow,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  subHeaderShow: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsxs(Text, {
                 variant: "h1",
                 styleClass: "font-14",
                 className: styles$e.label,
-                children: ["Hide Axis Line", /* @__PURE__ */ jsx(InfoTooltip, {
-                  children: "The x-axis and y-axis lines act as a graph base from which the chart starts"
+                children: ["Single Value Sub-Header", /* @__PURE__ */ jsx(InfoTooltip, {
+                  children: "Single Value Sub-Header"
                 })]
-              }), /* @__PURE__ */ jsx("div", {
-                className: styles$e.select,
-                children: /* @__PURE__ */ jsx(Select, {
-                  value: customSettings.hideAxisLines,
-                  options: [{
-                    label: "Hide X-axis line",
-                    value: "x"
-                  }, {
-                    label: "Hide Y-axis line",
-                    value: "y"
-                  }, {
-                    label: "Hide both X and Y(axis) lines",
-                    value: "both"
-                  }, {
-                    label: "None",
-                    value: "none"
-                  }],
-                  onChange: (value) => setCustomSettings((s2) => ({
-                    ...s2,
-                    hideAxisLines: value
-                  }))
-                })
               })]
-            }), chartType2 === "bar" || chartType2 === "row" || chartType2 === "stack" ? /* @__PURE__ */ jsxs(Fragment, {
+            }), customSettings.subHeaderShow && /* @__PURE__ */ jsxs(Fragment, {
               children: [/* @__PURE__ */ jsxs("div", {
                 className: styles$e.seriesWrapper,
-                children: [/* @__PURE__ */ jsxs(Text, {
+                children: [/* @__PURE__ */ jsx(Text, {
                   variant: "h1",
                   styleClass: "font-14",
                   className: styles$e.label,
-                  children: ["Modify Bar width", /* @__PURE__ */ jsx(InfoTooltip, {
-                    children: "The width of each individual bar rectangle of the graph"
-                  })]
+                  children: "Sub-Header Display Text"
                 }), /* @__PURE__ */ jsx(InputField, {
-                  type: "number",
+                  type: "text",
                   label: "",
+                  placeholder: "Enter the text to display",
                   onChange: (e2) => setCustomSettings((m2) => ({
                     ...m2,
-                    barWidth: parseInt(e2.target.value, 10)
+                    displayText: e2.target.value
                   })),
-                  defaultValue: customSettings.barWidth
+                  defaultValue: customSettings.displayText
                 })]
               }), /* @__PURE__ */ jsxs("div", {
                 className: styles$e.seriesWrapper,
-                children: [/* @__PURE__ */ jsxs(Text, {
+                children: [/* @__PURE__ */ jsx(Text, {
                   variant: "h1",
                   styleClass: "font-14",
                   className: styles$e.label,
-                  children: ["Modify Bar radius", /* @__PURE__ */ jsx(InfoTooltip, {
-                    children: "The property that rounds the corners of the element's outer border edge"
-                  })]
+                  children: "Sub-Header Font Size"
                 }), /* @__PURE__ */ jsx(InputField, {
                   type: "number",
                   label: "",
                   onChange: (e2) => setCustomSettings((m2) => ({
                     ...m2,
-                    barRadius: parseInt(e2.target.value, 10)
+                    subHeaderFontSize: parseInt(e2.target.value, 10)
                   })),
-                  defaultValue: customSettings.barRadius
+                  defaultValue: customSettings.subHeaderFontSize
                 })]
               })]
-            }) : null]
-          })]
-        }), chartType2 === "single value" && /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsxs("div", {
-            className: styles$e.seriesWrapper,
-            children: [/* @__PURE__ */ jsx(Text, {
-              variant: "h1",
-              styleClass: "font-14",
-              className: styles$e.label,
-              children: "Single Value Chart Font Size"
-            }), /* @__PURE__ */ jsx(InputField, {
-              type: "number",
-              label: "",
-              onChange: (e2) => setCustomSettings((m2) => ({
-                ...m2,
-                fontSize: parseInt(e2.target.value, 10)
-              })),
-              defaultValue: customSettings.fontSize
-            })]
-          }), /* @__PURE__ */ jsxs("div", {
-            className: styles$e.singleCheckBox,
-            children: [/* @__PURE__ */ jsx(InputField, {
-              type: "checkbox",
-              label: "",
-              checked: customSettings.subHeaderShow,
-              onChange: (e2) => setCustomSettings((settings2) => ({
-                ...settings2,
-                subHeaderShow: e2.target.checked
-              }))
-            }), /* @__PURE__ */ jsxs(Text, {
-              variant: "h1",
-              styleClass: "font-14",
-              className: styles$e.label,
-              children: ["Single Value Sub-Header", /* @__PURE__ */ jsx(InfoTooltip, {
-                children: "Single Value Sub-Header"
-              })]
-            })]
-          }), customSettings.subHeaderShow && /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsxs("div", {
+            }), /* @__PURE__ */ jsxs("div", {
               className: styles$e.seriesWrapper,
               children: [/* @__PURE__ */ jsx(Text, {
                 variant: "h1",
-                styleClass: "font-14",
-                className: styles$e.label,
-                children: "Sub-Header Display Text"
-              }), /* @__PURE__ */ jsx(InputField, {
-                type: "text",
-                label: "",
-                placeholder: "Enter the text to display",
-                onChange: (e2) => setCustomSettings((m2) => ({
-                  ...m2,
-                  displayText: e2.target.value
-                })),
-                defaultValue: customSettings.displayText
+                styleClass: "primary",
+                children: "Date formatting"
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$e.valueLabelWrapper,
+                children: /* @__PURE__ */ jsx(Select, {
+                  value: customSettings.dateFormatter,
+                  options: [{
+                    label: "None",
+                    value: "none"
+                  }, {
+                    label: "dd-mm-yyyy",
+                    value: "dd-mm-yyyy"
+                  }, {
+                    label: "mm-dd-yyyy",
+                    value: "mm-dd-yyyy"
+                  }, {
+                    label: "yyyy-mm-dd",
+                    value: "yyyy-mm-dd"
+                  }, {
+                    label: "dd/mm/yyyy",
+                    value: "dd/mm/yyyy"
+                  }, {
+                    label: "mm/dd/yyyy",
+                    value: "mm/dd/yyyy"
+                  }, {
+                    label: "yyyy/mm/dd",
+                    value: "yyyy/mm/dd"
+                  }, {
+                    label: "hh:mm:ss",
+                    value: "hh:mm:ss"
+                  }],
+                  onChange: (value) => setCustomSettings((s2) => ({
+                    ...s2,
+                    dateFormatter: value
+                  }))
+                })
               })]
             }), /* @__PURE__ */ jsxs("div", {
               className: styles$e.seriesWrapper,
               children: [/* @__PURE__ */ jsx(Text, {
                 variant: "h1",
-                styleClass: "font-14",
-                className: styles$e.label,
-                children: "Sub-Header Font Size"
-              }), /* @__PURE__ */ jsx(InputField, {
-                type: "number",
-                label: "",
-                onChange: (e2) => setCustomSettings((m2) => ({
-                  ...m2,
-                  subHeaderFontSize: parseInt(e2.target.value, 10)
-                })),
-                defaultValue: customSettings.subHeaderFontSize
+                styleClass: "primary",
+                children: "Number formatting"
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$e.valueLabelWrapper,
+                children: /* @__PURE__ */ jsx(Select, {
+                  value: customSettings.numberFormatter,
+                  textSize: "12px",
+                  options: [{
+                    label: "Original value",
+                    value: "original"
+                  }, {
+                    label: "Adaptive formatting",
+                    value: "adaptive"
+                  }, {
+                    label: ",d (12345.432 => 12,345)",
+                    value: "d"
+                  }, {
+                    label: ".1s (12345.432 => 10k)",
+                    value: "1s"
+                  }, {
+                    label: ".3s (12345.432 => 12.3k)",
+                    value: "3s"
+                  }, {
+                    label: ",.1% (12345.432 => 1,234,543.2%)",
+                    value: "1%"
+                  }, {
+                    label: ",.2% (12345.432 => 1234543.20%)",
+                    value: "2%"
+                  }, {
+                    label: ",.3% (12345.432 => 1234543.200%)",
+                    value: "3%"
+                  }, {
+                    label: ".4r (12345.432 => 12350)",
+                    value: "4r"
+                  }, {
+                    label: ",.1f (12345.432 => 12,345.4)",
+                    value: "1f"
+                  }, {
+                    label: ",.2f (12345.432 => 12,345.43)",
+                    value: "2f"
+                  }, {
+                    label: ",.3f (12345.432 => 12,345.432)",
+                    value: "3f"
+                  }, {
+                    label: "+, (12345.432 => +12,345.432)",
+                    value: "+"
+                  }, {
+                    label: "$,.2f (12345.432 => $12,345.43)",
+                    value: "$"
+                  }, {
+                    label: "Duration in ms (66000 => 1m 6s)",
+                    value: "ms1"
+                  }, {
+                    label: `Duration in ms (1.40008 => 1ms 400\u03BCs 80ns)`,
+                    value: "ms2"
+                  }],
+                  onChange: (value) => setCustomSettings((s2) => ({
+                    ...s2,
+                    numberFormatter: value
+                  }))
+                })
               })]
             })]
-          }), /* @__PURE__ */ jsxs("div", {
-            className: styles$e.seriesWrapper,
-            children: [/* @__PURE__ */ jsx(Text, {
-              variant: "h1",
-              styleClass: "primary",
-              children: "Date formatting"
-            }), /* @__PURE__ */ jsx("div", {
-              className: styles$e.valueLabelWrapper,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: customSettings.dateFormatter,
-                options: [{
-                  label: "None",
-                  value: "none"
-                }, {
-                  label: "dd-mm-yyyy",
-                  value: "dd-mm-yyyy"
-                }, {
-                  label: "mm-dd-yyyy",
-                  value: "mm-dd-yyyy"
-                }, {
-                  label: "yyyy-mm-dd",
-                  value: "yyyy-mm-dd"
-                }, {
-                  label: "dd/mm/yyyy",
-                  value: "dd/mm/yyyy"
-                }, {
-                  label: "mm/dd/yyyy",
-                  value: "mm/dd/yyyy"
-                }, {
-                  label: "yyyy/mm/dd",
-                  value: "yyyy/mm/dd"
-                }, {
-                  label: "hh:mm:ss",
-                  value: "hh:mm:ss"
-                }],
-                onChange: (value) => setCustomSettings((s2) => ({
-                  ...s2,
-                  dateFormatter: value
-                }))
-              })
-            })]
-          }), /* @__PURE__ */ jsxs("div", {
-            className: styles$e.seriesWrapper,
-            children: [/* @__PURE__ */ jsx(Text, {
-              variant: "h1",
-              styleClass: "primary",
-              children: "Number formatting"
-            }), /* @__PURE__ */ jsx("div", {
-              className: styles$e.valueLabelWrapper,
-              children: /* @__PURE__ */ jsx(Select, {
-                value: customSettings.numberFormatter,
-                textSize: "12px",
-                options: [{
-                  label: "Original value",
-                  value: "original"
-                }, {
-                  label: "Adaptive formatting",
-                  value: "adaptive"
-                }, {
-                  label: ",d (12345.432 => 12,345)",
-                  value: "d"
-                }, {
-                  label: ".1s (12345.432 => 10k)",
-                  value: "1s"
-                }, {
-                  label: ".3s (12345.432 => 12.3k)",
-                  value: "3s"
-                }, {
-                  label: ",.1% (12345.432 => 1,234,543.2%)",
-                  value: "1%"
-                }, {
-                  label: ",.2% (12345.432 => 1234543.20%)",
-                  value: "2%"
-                }, {
-                  label: ",.3% (12345.432 => 1234543.200%)",
-                  value: "3%"
-                }, {
-                  label: ".4r (12345.432 => 12350)",
-                  value: "4r"
-                }, {
-                  label: ",.1f (12345.432 => 12,345.4)",
-                  value: "1f"
-                }, {
-                  label: ",.2f (12345.432 => 12,345.43)",
-                  value: "2f"
-                }, {
-                  label: ",.3f (12345.432 => 12,345.432)",
-                  value: "3f"
-                }, {
-                  label: "+, (12345.432 => +12,345.432)",
-                  value: "+"
-                }, {
-                  label: "$,.2f (12345.432 => $12,345.43)",
-                  value: "$"
-                }, {
-                  label: "Duration in ms (66000 => 1m 6s)",
-                  value: "ms1"
-                }, {
-                  label: `Duration in ms (1.40008 => 1ms 400\u03BCs 80ns)`,
-                  value: "ms2"
-                }],
-                onChange: (value) => setCustomSettings((s2) => ({
-                  ...s2,
-                  numberFormatter: value
-                }))
-              })
-            })]
           })]
         })]
       })]
@@ -83226,7 +83427,9 @@ const ChartSettings = ({
   customSettings,
   setCustomSettings,
   backGroundColor,
-  setBackGroundColor
+  setBackGroundColor,
+  tableSettings,
+  setTableSettings
 }) => {
   const [selectedTab2, setSelectedTab] = useState(GENERAL);
   const FIRST_TAB = "Chart types";
@@ -83329,7 +83532,9 @@ const ChartSettings = ({
         chartType: chartType2,
         setChartType,
         backGroundColor,
-        setBackGroundColor
+        setBackGroundColor,
+        tableSettings,
+        setTableSettings
       })]
     })]
   });
@@ -83444,7 +83649,9 @@ const ChartTab = ({
   isEnableGroupBy,
   backGroundColor,
   setBackGroundColor,
-  headerChild
+  headerChild,
+  tableSettings,
+  setTableSettings
 }) => {
   var _a2, _b2, _c2, _d;
   const {
@@ -83553,7 +83760,9 @@ const ChartTab = ({
             customSettings,
             setCustomSettings,
             backGroundColor,
-            setBackGroundColor
+            setBackGroundColor,
+            tableSettings,
+            setTableSettings
           })
         }), (labels2 == null ? void 0 : labels2.length) ? /* @__PURE__ */ jsx("div", {
           className: styles$b.labels,
@@ -83583,7 +83792,8 @@ const ChartTab = ({
               route: "/{{value}}",
               routeType: "internal"
             },
-            enableSaveAs: true
+            enableSaveAs: true,
+            tableSettings
           })
         }) : /* @__PURE__ */ jsxs("div", {
           className: styles$b.metricChartEmpty,
@@ -83629,6 +83839,7 @@ const ChartTab = ({
         axisSettings,
         customSettings,
         backGroundColor,
+        tableSettings,
         enableSaveAs: true,
         chartClickConfig: {
           isEnable: false,
@@ -83997,6 +84208,8 @@ const MetricOutput = ({
   setAxisSettings,
   customSettings,
   setCustomSettings,
+  tableSettings,
+  setTableSettings,
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
@@ -84072,7 +84285,9 @@ const MetricOutput = ({
         isEnableGroupBy,
         isLoading,
         backGroundColor,
-        setBackGroundColor
+        setBackGroundColor,
+        tableSettings,
+        setTableSettings
       }), (_a2 = moreTabs == null ? void 0 : moreTabs.find((tabObj) => tabObj.name === selectedTab2)) == null ? void 0 : _a2.tabContent]
     })]
   });
@@ -85432,6 +85647,18 @@ const EmbeddedMetricCreation = ({
     dateFormatter: "none",
     numberFormatter: "original"
   });
+  const [tableSettings, setTableSettings] = useState({
+    contentAlignment: "center",
+    lineGap: "small",
+    hideVerticalDivider: false,
+    enableStripedRows: false,
+    showRowHover: false,
+    showTableTitle: false,
+    showTableDesc: false,
+    enableTableSearch: false,
+    enableFilter: false,
+    enableSorting: false
+  });
   const [labelSettings, setLabelSettings] = useState({
     axis: "left",
     show: false,
@@ -85489,6 +85716,7 @@ const EmbeddedMetricCreation = ({
     xAxis,
     backGroundColor,
     customSettings,
+    tableSettings,
     chartType: chartType2,
     yAxisList,
     step,
@@ -85658,7 +85886,9 @@ const EmbeddedMetricCreation = ({
           backGroundColor,
           setBackGroundColor,
           customSettings,
-          setCustomSettings
+          setCustomSettings,
+          tableSettings,
+          setTableSettings
         })]
       })
     }), /* @__PURE__ */ jsx(Modal, {
@@ -91053,6 +91283,18 @@ const MetricCard = ({
     filterValues: filterValues2
   });
   const queryData = (_a2 = metricdata == null ? void 0 : metricdata.externalMetricQuery) == null ? void 0 : _a2.data;
+  const [tableSettings, setTableSettings] = useState({
+    contentAlignment: "center",
+    lineGap: "small",
+    hideVerticalDivider: false,
+    enableStripedRows: false,
+    showRowHover: false,
+    showTableTitle: false,
+    showTableDesc: false,
+    enableTableSearch: false,
+    enableFilter: false,
+    enableSorting: false
+  });
   const [margins, setMargins] = useState({
     marginTop: 20,
     marginBottom: 20,
@@ -91141,6 +91383,18 @@ const MetricCard = ({
         routeType: "internal"
       }
     });
+    setTableSettings((metricItem == null ? void 0 : metricItem.chartOptions.tableSettings) ? metricItem == null ? void 0 : metricItem.chartOptions.tableSettings : {
+      contentAlignment: "center",
+      lineGap: "small",
+      hideVerticalDivider: false,
+      enableStripedRows: false,
+      showRowHover: false,
+      showTableTitle: false,
+      showTableDesc: false,
+      enableTableSearch: false,
+      enableFilter: false,
+      enableSorting: false
+    });
   }, [metricItem]);
   useEffect(() => {
     setData(queryData != null ? queryData : []);
@@ -91209,10 +91463,23 @@ const MetricCard = ({
       updateGroupData(dataDb, [selectedGroupBy[0]], selectedGroupBy, setGroupedData);
     }
   };
-  const onChangeFilterValue = (name, value) => setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
-    ...rls,
-    value
-  } : rls));
+  const onChangeFilterValue = (name, value, customValue) => {
+    if (customValue) {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value,
+        options: rls.options.map((option2) => option2.name === "Custom" ? {
+          ...option2,
+          ...customValue
+        } : option2)
+      } : rls));
+    } else {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value
+      } : rls));
+    }
+  };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles.cardContainer,
@@ -91250,7 +91517,7 @@ const MetricCard = ({
           })]
         }), /* @__PURE__ */ jsxs("div", {
           className: styles.features,
-          children: [!!rlsConditions.length && /* @__PURE__ */ jsx("div", {
+          children: [!!rlsConditions.length && (rlsConditions[0].datatype !== "date" ? /* @__PURE__ */ jsx("div", {
             className: styles.metricFilter,
             children: /* @__PURE__ */ jsx(FloatingDropDown, {
               label: rlsConditions[0].name,
@@ -91264,7 +91531,47 @@ const MetricCard = ({
               })),
               onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value)
             })
-          }), /* @__PURE__ */ jsxs(PopoverMenu, {
+          }) : /* @__PURE__ */ jsx("div", {
+            className: styles.metricFilter,
+            children: /* @__PURE__ */ jsx(FloatingDropDown, {
+              label: rlsConditions[0].name,
+              selectedOption: {
+                value: rlsConditions[0].value.name || rlsConditions[0].options[0].name,
+                label: rlsConditions[0].value.name || rlsConditions[0].options[0].name
+              },
+              options: rlsConditions[0].options.map((o2) => ({
+                value: o2.name,
+                label: o2.name
+              })),
+              onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value),
+              children: rlsConditions[0].value === "Custom" ? /* @__PURE__ */ jsxs("div", {
+                className: "p-1",
+                children: [/* @__PURE__ */ jsx(InputField, {
+                  label: "From Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => {
+                    onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                      from: new Date(Date.parse(value))
+                    });
+                  }
+                }), /* @__PURE__ */ jsx(InputField, {
+                  label: "To Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                    to: new Date(Date.parse(value))
+                  })
+                })]
+              }) : null
+            })
+          })), /* @__PURE__ */ jsxs(PopoverMenu, {
             buttonClass: styles.popup,
             button: /* @__PURE__ */ jsx(Icons, {
               name: "more-icon",
@@ -91295,6 +91602,7 @@ const MetricCard = ({
                   axisSettings,
                   customSettings,
                   backGroundColor,
+                  tableSettings,
                   enableSaveAs: true,
                   chartClickConfig: clickBehaviourConfigs.chart
                 });
@@ -91351,6 +91659,7 @@ const MetricCard = ({
           legendSettings,
           labelSettings,
           axisSettings,
+          tableSettings,
           enableSaveAs: true,
           colors: globalTheme ? (_c2 = (_b2 = globalTheme.chart.palettes) == null ? void 0 : _b2.find((palette) => palette.name === globalTheme.chart.selected)) == null ? void 0 : _c2.colors : colors2,
           updateGroup,
@@ -91478,10 +91787,23 @@ const SingleValueCard = ({
   const chartData = [{
     value: singleValueData2[0]
   }];
-  const onChangeFilterValue = (name, value) => setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
-    ...rls,
-    value
-  } : rls));
+  const onChangeFilterValue = (name, value, customValue) => {
+    if (customValue) {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value,
+        options: rls.options.map((option2) => option2.name === "Custom" ? {
+          ...option2,
+          ...customValue
+        } : option2)
+      } : rls));
+    } else {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value
+      } : rls));
+    }
+  };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles.cardContainer,
@@ -91519,7 +91841,7 @@ const SingleValueCard = ({
           })]
         }), /* @__PURE__ */ jsx("div", {
           className: styles.features,
-          children: !!(rlsConditions == null ? void 0 : rlsConditions.length) && /* @__PURE__ */ jsx("div", {
+          children: !!rlsConditions.length && (rlsConditions[0].datatype !== "date" ? /* @__PURE__ */ jsx("div", {
             className: styles.metricFilter,
             children: /* @__PURE__ */ jsx(FloatingDropDown, {
               label: rlsConditions[0].name,
@@ -91533,7 +91855,47 @@ const SingleValueCard = ({
               })),
               onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value)
             })
-          })
+          }) : /* @__PURE__ */ jsx("div", {
+            className: styles.metricFilter,
+            children: /* @__PURE__ */ jsx(FloatingDropDown, {
+              label: rlsConditions[0].name,
+              selectedOption: {
+                value: rlsConditions[0].value.name || rlsConditions[0].options[0].name,
+                label: rlsConditions[0].value.name || rlsConditions[0].options[0].name
+              },
+              options: rlsConditions[0].options.map((o2) => ({
+                value: o2.name,
+                label: o2.name
+              })),
+              onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value),
+              children: rlsConditions[0].value === "Custom" ? /* @__PURE__ */ jsxs("div", {
+                className: "p-1",
+                children: [/* @__PURE__ */ jsx(InputField, {
+                  label: "From Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => {
+                    onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                      from: new Date(Date.parse(value))
+                    });
+                  }
+                }), /* @__PURE__ */ jsx(InputField, {
+                  label: "To Date",
+                  type: "date",
+                  onChange: ({
+                    target: {
+                      value
+                    }
+                  }) => onChangeFilterValue(rlsConditions[0].name, "Custom", {
+                    to: new Date(Date.parse(value))
+                  })
+                })]
+              }) : null
+            })
+          }))
         })]
       }), chartType2 && /* @__PURE__ */ jsx("div", {
         className: `${styles.metricData} ${styles.singleValueData}`,