@databrainhq/plugin 0.8.18 → 0.8.20

package/dist/index.es.js

@@ -2514,7 +2514,6 @@ function useQuery(arg1, arg2, arg3) {
 }
 const container$h = "_container_1o0ns_1";
 const fixed = "_fixed_1o0ns_1";
-const absolute = "_absolute_1o0ns_1";
 const flex = "_flex_1o0ns_1";
 const table$4 = "_table_1o0ns_1";
 const grid = "_grid_1o0ns_1";
@@ -2536,11 +2535,6 @@ var styles$H = {
   container: container$h,
   "static": "_static_1o0ns_413",
   fixed,
-  absolute,
-  "left-2": "_left-2_1o0ns_1",
-  "top-1": "_top-1_1o0ns_1",
-  "mt-2.5": "_mt-2.5_1o0ns_1",
-  "mt-2": "_mt-2_1o0ns_1",
   "mb-3": "_mb-3_1o0ns_1",
   flex,
   table: table$4,
@@ -2556,10 +2550,8 @@ var styles$H = {
   truncate,
   border,
   "p-2": "_p-2_1o0ns_1",
-  "p-1": "_p-1_1o0ns_1",
   "text-center": "_text-center_1o0ns_1",
   "text-sm": "_text-sm_1o0ns_1",
-  "text-xs": "_text-xs_1o0ns_1",
   "text-blue-700": "_text-blue-700_1o0ns_1",
   shadow,
   filter: filter$1,
@@ -2645,17 +2637,17 @@ var classnames$1 = { exports: {} };
 })(classnames$1);
 var classnames = classnames$1.exports;
 var styles$G = {
-  "btn-primary": "_btn-primary_u81u9_1",
-  "btn-secondary": "_btn-secondary_u81u9_9",
-  "btn-reject": "_btn-reject_u81u9_17",
-  "btn-outlined": "_btn-outlined_u81u9_27",
-  "btn-tertiary": "_btn-tertiary_u81u9_35",
-  "btn-default": "_btn-default_u81u9_43",
-  "btn-large": "_btn-large_u81u9_49",
-  "btn-small": "_btn-small_u81u9_55",
-  "btn-xs": "_btn-xs_u81u9_61",
-  "btn-medium": "_btn-medium_u81u9_67",
-  "btn-11rem": "_btn-11rem_u81u9_75"
+  "btn-primary": "_btn-primary_17kvk_1",
+  "btn-secondary": "_btn-secondary_17kvk_5",
+  "btn-reject": "_btn-reject_17kvk_9",
+  "btn-outlined": "_btn-outlined_17kvk_14",
+  "btn-tertiary": "_btn-tertiary_17kvk_18",
+  "btn-default": "_btn-default_17kvk_22",
+  "btn-large": "_btn-large_17kvk_25",
+  "btn-small": "_btn-small_17kvk_28",
+  "btn-xs": "_btn-xs_17kvk_31",
+  "btn-medium": "_btn-medium_17kvk_34",
+  "btn-11rem": "_btn-11rem_17kvk_38"
 };
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -4944,39 +4936,39 @@ let xe = "div", ne = S.RenderStrategy, re = C$2(function(e2, s2) {
   let n2 = useContext(F) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(q, { ref: s$12, ...e2 }) : React__default.createElement(re, { ref: s$12, ...e2 }));
 }), We = Object.assign(q, { Child: Pe, Root: q });
-const listBoxButton = "_listBoxButton_kdipy_9";
-const selectedOptionText = "_selectedOptionText_kdipy_33";
-const transitionDiv = "_transitionDiv_kdipy_41";
-const listboxButtonWrapper = "_listboxButtonWrapper_kdipy_49";
-const arrowicon = "_arrowicon_kdipy_55";
-const leave$2 = "_leave_kdipy_61";
-const leaveFrom$2 = "_leaveFrom_kdipy_67";
-const leaveTo$2 = "_leaveTo_kdipy_73";
-const notAvailable = "_notAvailable_kdipy_79";
-const option$1 = "_option_kdipy_85";
-const activeOption = "_activeOption_kdipy_91";
-const optionSelected = "_optionSelected_kdipy_97";
-const inactiveOption = "_inactiveOption_kdipy_103";
-const optionLabel = "_optionLabel_kdipy_109";
-const optionSubLabel = "_optionSubLabel_kdipy_115";
-const selectedLabel = "_selectedLabel_kdipy_121";
-const nonselectedLabel = "_nonselectedLabel_kdipy_127";
-const check = "_check_kdipy_133";
-const checkActive = "_checkActive_kdipy_139";
-const checkInactive = "_checkInactive_kdipy_145";
-const checkIcon$1 = "_checkIcon_kdipy_151";
-const checkIconSelected = "_checkIconSelected_kdipy_157";
-const checkIconUnselected = "_checkIconUnselected_kdipy_163";
-const loadMore$1 = "_loadMore_kdipy_169";
-const selectedList = "_selectedList_kdipy_175";
-const selectedListItem = "_selectedListItem_kdipy_181";
-const label$7 = "_label_kdipy_187";
-const clientText$1 = "_clientText_kdipy_193";
+const listBoxButton = "_listBoxButton_fw8xj_5";
+const selectedOptionText = "_selectedOptionText_fw8xj_17";
+const transitionDiv = "_transitionDiv_fw8xj_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_fw8xj_25";
+const arrowicon = "_arrowicon_fw8xj_28";
+const leave$2 = "_leave_fw8xj_31";
+const leaveFrom$2 = "_leaveFrom_fw8xj_34";
+const leaveTo$2 = "_leaveTo_fw8xj_37";
+const notAvailable = "_notAvailable_fw8xj_40";
+const option$1 = "_option_fw8xj_43";
+const activeOption = "_activeOption_fw8xj_46";
+const optionSelected = "_optionSelected_fw8xj_49";
+const inactiveOption = "_inactiveOption_fw8xj_52";
+const optionLabel = "_optionLabel_fw8xj_55";
+const optionSubLabel = "_optionSubLabel_fw8xj_58";
+const selectedLabel = "_selectedLabel_fw8xj_61";
+const nonselectedLabel = "_nonselectedLabel_fw8xj_64";
+const check = "_check_fw8xj_67";
+const checkActive = "_checkActive_fw8xj_70";
+const checkInactive = "_checkInactive_fw8xj_73";
+const checkIcon$1 = "_checkIcon_fw8xj_76";
+const checkIconSelected = "_checkIconSelected_fw8xj_79";
+const checkIconUnselected = "_checkIconUnselected_fw8xj_82";
+const loadMore$1 = "_loadMore_fw8xj_85";
+const selectedList = "_selectedList_fw8xj_88";
+const selectedListItem = "_selectedListItem_fw8xj_91";
+const label$7 = "_label_fw8xj_94";
+const clientText$1 = "_clientText_fw8xj_97";
 var style = {
-  "listBox-label": "_listBox-label_kdipy_1",
-  "listBoxButton-container": "_listBoxButton-container_kdipy_9",
+  "listBox-label": "_listBox-label_fw8xj_1",
+  "listBoxButton-container": "_listBoxButton-container_fw8xj_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_kdipy_25",
+  "listBox-option": "_listBox-option_fw8xj_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -5005,22 +4997,22 @@ var style = {
   label: label$7,
   clientText: clientText$1
 };
-const primary = "_primary_1ipyg_1";
-const secondary = "_secondary_1ipyg_9";
-const tertiary = "_tertiary_1ipyg_19";
+const primary = "_primary_18yak_1";
+const secondary = "_secondary_18yak_5";
+const tertiary = "_tertiary_18yak_10";
 var styles$E = {
   primary,
   secondary,
   tertiary,
-  "font-18": "_font-18_1ipyg_27",
-  "font-20": "_font-20_1ipyg_35",
-  "font-14": "_font-14_1ipyg_43",
-  "font-14a": "_font-14a_1ipyg_51",
-  "font-14b": "_font-14b_1ipyg_59",
-  "font-14c": "_font-14c_1ipyg_67",
-  "font-14d": "_font-14d_1ipyg_75",
-  "font-15": "_font-15_1ipyg_83",
-  "font-34": "_font-34_1ipyg_89"
+  "font-18": "_font-18_18yak_14",
+  "font-20": "_font-20_18yak_18",
+  "font-14": "_font-14_18yak_22",
+  "font-14a": "_font-14a_18yak_26",
+  "font-14b": "_font-14b_18yak_30",
+  "font-14c": "_font-14c_18yak_34",
+  "font-14d": "_font-14d_18yak_38",
+  "font-15": "_font-15_18yak_42",
+  "font-34": "_font-34_18yak_45"
 };
 const variants = {
   h1: "h1",
@@ -5048,10 +5040,10 @@ const Text = ({
     children: children2
   });
 };
-const search$1 = "_search_qirxg_1";
+const search$1 = "_search_1klck_1";
 var styles$D = {
-  "searchTab-container": "_searchTab-container_qirxg_1",
-  "searchTab-input": "_searchTab-input_qirxg_9",
+  "searchTab-container": "_searchTab-container_1klck_1",
+  "searchTab-input": "_searchTab-input_1klck_5",
   search: search$1
 };
 const iconoirSearch = (props) => /* @__PURE__ */ jsx("svg", {
@@ -7142,22 +7134,22 @@ const ExternalMetricForm = ({
     })]
   });
 };
-const container$d = "_container_1b6ua_1";
-const wrapper$3 = "_wrapper_1b6ua_9";
-const label$3 = "_label_1b6ua_17";
-const floatingLabel = "_floatingLabel_1b6ua_25";
-const clientText = "_clientText_1b6ua_33";
-const normalText = "_normalText_1b6ua_41";
-const dropdown$1 = "_dropdown_1b6ua_49";
-const options = "_options_1b6ua_57";
-const checkedOption = "_checkedOption_1b6ua_65";
-const option = "_option_1b6ua_57";
-const icon$1 = "_icon_1b6ua_81";
-const text$2 = "_text_1b6ua_89";
-const floatingText = "_floatingText_1b6ua_97";
-const search = "_search_1b6ua_105";
-const loadMore = "_loadMore_1b6ua_113";
-const loadMoreIcon = "_loadMoreIcon_1b6ua_121";
+const container$d = "_container_q0qrl_1";
+const wrapper$3 = "_wrapper_q0qrl_5";
+const label$3 = "_label_q0qrl_9";
+const floatingLabel = "_floatingLabel_q0qrl_13";
+const clientText = "_clientText_q0qrl_17";
+const normalText = "_normalText_q0qrl_21";
+const dropdown$1 = "_dropdown_q0qrl_25";
+const options = "_options_q0qrl_29";
+const checkedOption = "_checkedOption_q0qrl_33";
+const option = "_option_q0qrl_29";
+const icon$1 = "_icon_q0qrl_41";
+const text$2 = "_text_q0qrl_45";
+const floatingText = "_floatingText_q0qrl_49";
+const search = "_search_q0qrl_53";
+const loadMore = "_loadMore_q0qrl_57";
+const loadMoreIcon = "_loadMoreIcon_q0qrl_61";
 var styles$u = {
   container: container$d,
   wrapper: wrapper$3,
@@ -8002,6 +7994,7 @@ const MultiFloatingDropDown = React__default.memo(({
   options: options2,
   isDisabled,
   children: children2,
+  labelDesign,
   isSearchEnabled
 }) => {
   const [isShow, setIsShow] = useState(false);
@@ -8018,7 +8011,7 @@ const MultiFloatingDropDown = React__default.memo(({
     children: [label2 ? /* @__PURE__ */ jsx(Text, {
       variant: "span",
       styleClass: labelVariant === "floating" ? "custom" : "font-14",
-      className: `${styles$u.label} ${labelVariant === "floating" ? "absolute left-2 top-1 text-xs" : ""}`,
+      className: `${styles$u.label} ${labelVariant === "floating" ? styles$u.floatingLabel : ""} ${labelDesign === "client" ? styles$u.clientText : styles$u.normalText} `,
       children: label2
     }) : null, /* @__PURE__ */ jsxs(Button, {
       type: "button",
@@ -8029,7 +8022,7 @@ const MultiFloatingDropDown = React__default.memo(({
       children: [/* @__PURE__ */ jsx(Text, {
         variant: "p",
         styleClass: "font-14",
-        className: labelVariant === "floating" ? "mt-2.5" : "",
+        className: labelVariant === "floating" ? styles$u.floatingText : "",
         children: "Select 1 or more option"
       }), /* @__PURE__ */ jsx(materialSymbolsKeyboardArrowDown, {})]
     }), isShow && !isDisabled && /* @__PURE__ */ jsxs("div", {
@@ -80461,7 +80454,14 @@ const FunnelChart = ({
   const option2 = {
     tooltip: {
       trigger: "item",
-      formatter: "{b} : {c}",
+      formatter: customSettings.showConversionRate ? (context) => {
+        var _a2, _b2;
+        let percent = 100;
+        if (context.dataIndex > 0) {
+          percent = (((_a2 = funnelData[context.dataIndex]) == null ? void 0 : _a2.value) || 0) / (((_b2 = funnelData[context.dataIndex - 1]) == null ? void 0 : _b2.value) || 1) * 100;
+        }
+        return `${context.name}: ${percent.toFixed(0)}%`;
+      } : customSettings.showLabelValues ? "{b}: {c}" : customSettings.labelFormat || "{b}",
       backgroundColor: "black",
       textStyle: {
         color: "white"
@@ -80498,12 +80498,19 @@ const FunnelChart = ({
       max: 100,
       minSize: "0%",
       maxSize: "100%",
-      sort: "descending",
+      sort: "none",
       gap: 3,
       label: {
         show: labelSettings.show,
         position: labelSettings.position,
-        formatter: customSettings.showLabelValues ? "{b} : {c}" : "{b}"
+        formatter: customSettings.showConversionRate ? (context) => {
+          var _a2, _b2;
+          let percent = 100;
+          if (context.dataIndex > 0) {
+            percent = (((_a2 = funnelData[context.dataIndex]) == null ? void 0 : _a2.value) || 0) / (((_b2 = funnelData[context.dataIndex - 1]) == null ? void 0 : _b2.value) || 1) * 100;
+          }
+          return `${context.name}: ${percent.toFixed(0)}%`;
+        } : customSettings.showLabelValues ? "{b}: {c}" : customSettings.labelFormat || "{b}"
       },
       labelLine: {
         length: 10,
@@ -86146,10 +86153,10 @@ const leave$1 = "_leave_1qflp_65";
 const leaveFrom$1 = "_leaveFrom_1qflp_73";
 const leaveTo$1 = "_leaveTo_1qflp_81";
 const center$1 = "_center_1qflp_89";
-const top$1 = "_top_1qflp_97";
-const bottom$2 = "_bottom_1qflp_105";
-const left$1 = "_left_1qflp_113";
-const right$1 = "_right_1qflp_121";
+const top$2 = "_top_1qflp_97";
+const bottom$3 = "_bottom_1qflp_105";
+const left$2 = "_left_1qflp_113";
+const right$2 = "_right_1qflp_121";
 var styles$o = {
   container: container$a,
   popover: popover$1,
@@ -86163,10 +86170,10 @@ var styles$o = {
   leaveFrom: leaveFrom$1,
   leaveTo: leaveTo$1,
   center: center$1,
-  top: top$1,
-  bottom: bottom$2,
-  left: left$1,
-  right: right$1,
+  top: top$2,
+  bottom: bottom$3,
+  left: left$2,
+  right: right$2,
   "left-top-end": "_left-top-end_1qflp_129",
   "right-top-end": "_right-top-end_1qflp_137",
   "left-bottom-end": "_left-bottom-end_1qflp_145",
@@ -86532,21 +86539,42 @@ const GlobalFilters = ({
     })
   });
 };
-const container$8 = "_container_1sd6f_1";
-const tooltip$1 = "_tooltip_1sd6f_7";
+const container$8 = "_container_nbkwy_1";
+const tooltip$1 = "_tooltip_nbkwy_9";
+const top$1 = "_top_nbkwy_25";
+const bottom$2 = "_bottom_nbkwy_33";
+const left$1 = "_left_nbkwy_41";
+const right$1 = "_right_nbkwy_49";
 var styles$m = {
   container: container$8,
-  tooltip: tooltip$1
+  tooltip: tooltip$1,
+  top: top$1,
+  bottom: bottom$2,
+  left: left$1,
+  right: right$1,
+  "left-top-end": "_left-top-end_nbkwy_57",
+  "right-top-end": "_right-top-end_nbkwy_65",
+  "left-bottom-end": "_left-bottom-end_nbkwy_73",
+  "right-bottom-end": "_right-bottom-end_nbkwy_81",
+  "top-left": "_top-left_nbkwy_89",
+  "top-right": "_top-right_nbkwy_97",
+  "bottom-left": "_bottom-left_nbkwy_105",
+  "bottom-right": "_bottom-right_nbkwy_113",
+  "left-top": "_left-top_nbkwy_57",
+  "left-bottom": "_left-bottom_nbkwy_73",
+  "right-top": "_right-top_nbkwy_65",
+  "right-bottom": "_right-bottom_nbkwy_81"
 };
 const Tooltip = ({
   children: children2,
   content: content2,
-  className = ""
+  className = "",
+  position: position2 = "bottom"
 }) => {
   return /* @__PURE__ */ jsxs("span", {
     className: `${styles$m.container} ${className}`,
     children: [content2, /* @__PURE__ */ jsx("span", {
-      className: styles$m.tooltip,
+      className: `${styles$m.tooltip} ${styles$m[position2]}`,
       children: children2
     })]
   });
@@ -86554,7 +86582,8 @@ const Tooltip = ({
 const InfoTooltip = ({
   children: children2,
   className,
-  iconClass
+  iconClass,
+  position: position2
 }) => {
   return /* @__PURE__ */ jsx(Tooltip, {
     className,
@@ -86562,16 +86591,17 @@ const InfoTooltip = ({
       name: "info-icon",
       className: iconClass
     }),
+    position: position2,
     children: children2
   });
 };
 var styles$l = {
-  "header-container": "_header-container_1pbz4_1",
-  "btn-container": "_btn-container_1pbz4_9",
-  "back-btn": "_back-btn_1pbz4_17",
-  "sql-btn": "_sql-btn_1pbz4_25",
-  "save-btn": "_save-btn_1pbz4_33",
-  "save-btn-icon": "_save-btn-icon_1pbz4_41"
+  "header-container": "_header-container_t2r6v_1",
+  "btn-container": "_btn-container_t2r6v_5",
+  "back-btn": "_back-btn_t2r6v_9",
+  "sql-btn": "_sql-btn_t2r6v_13",
+  "save-btn": "_save-btn_t2r6v_17",
+  "save-btn-icon": "_save-btn-icon_t2r6v_21"
 };
 const Header = ({
   setShowMetricCreateModal,
@@ -86624,20 +86654,20 @@ const Header = ({
   });
 };
 var styles$k = {
-  "create-btn": "_create-btn_zxqu9_1",
-  "modal-container": "_modal-container_zxqu9_9",
-  "query-modal": "_query-modal_zxqu9_17"
+  "create-btn": "_create-btn_ihjk8_1",
+  "modal-container": "_modal-container_ihjk8_5",
+  "query-modal": "_query-modal_ihjk8_9"
 };
-const container$7 = "_container_u2z1d_1";
-const header$3 = "_header_u2z1d_9";
-const wrapper$2 = "_wrapper_u2z1d_17";
-const column = "_column_u2z1d_33";
-const columnText$1 = "_columnText_u2z1d_41";
+const container$7 = "_container_1q2ss_1";
+const header$3 = "_header_1q2ss_5";
+const wrapper$2 = "_wrapper_1q2ss_9";
+const column = "_column_1q2ss_17";
+const columnText$1 = "_columnText_1q2ss_21";
 var styles$j = {
   container: container$7,
   header: header$3,
   wrapper: wrapper$2,
-  "col-container": "_col-container_u2z1d_25",
+  "col-container": "_col-container_1q2ss_13",
   column,
   columnText: columnText$1
 };
@@ -86686,24 +86716,25 @@ const Dataset = ({
     })]
   });
 };
-const container$6 = "_container_j5bye_1";
-const header$2 = "_header_j5bye_7";
-const tab$2 = "_tab_j5bye_13";
-const tabText$1 = "_tabText_j5bye_19";
-const tabHeading = "_tabHeading_j5bye_25";
-const form = "_form_j5bye_31";
-const inputWrapper = "_inputWrapper_j5bye_37";
-const input$1 = "_input_j5bye_37";
-const selectWrapper = "_selectWrapper_j5bye_49";
-const select = "_select_j5bye_49";
-const label$1 = "_label_j5bye_61";
-const series = "_series_j5bye_67";
-const legendWrapper = "_legendWrapper_j5bye_73";
-const seriesWrapper = "_seriesWrapper_j5bye_79";
-const valueLabelWrapper = "_valueLabelWrapper_j5bye_85";
-const singleCheckBox = "_singleCheckBox_j5bye_91";
-const seriesCheck = "_seriesCheck_j5bye_97";
-const seriesCheckContainer = "_seriesCheckContainer_j5bye_103";
+const container$6 = "_container_1pfol_1";
+const header$2 = "_header_1pfol_7";
+const tab$2 = "_tab_1pfol_13";
+const tabText$1 = "_tabText_1pfol_19";
+const tabHeading = "_tabHeading_1pfol_25";
+const form = "_form_1pfol_31";
+const inputWrapper = "_inputWrapper_1pfol_37";
+const input$1 = "_input_1pfol_37";
+const selectWrapper = "_selectWrapper_1pfol_49";
+const select = "_select_1pfol_49";
+const label$1 = "_label_1pfol_61";
+const labelFormatTooltip = "_labelFormatTooltip_1pfol_67";
+const series = "_series_1pfol_73";
+const legendWrapper = "_legendWrapper_1pfol_79";
+const seriesWrapper = "_seriesWrapper_1pfol_85";
+const valueLabelWrapper = "_valueLabelWrapper_1pfol_91";
+const singleCheckBox = "_singleCheckBox_1pfol_97";
+const seriesCheck = "_seriesCheck_1pfol_103";
+const seriesCheckContainer = "_seriesCheckContainer_1pfol_109";
 var styles$i = {
   container: container$6,
   header: header$2,
@@ -86716,6 +86747,7 @@ var styles$i = {
   selectWrapper,
   select,
   label: label$1,
+  labelFormatTooltip,
   series,
   legendWrapper,
   seriesWrapper,
@@ -87145,14 +87177,41 @@ const ChartConfigure = ({
                   }))
                 })
               })]
-            }), chartType2 === "funnel" && /* @__PURE__ */ jsx(InputField, {
-              type: "checkbox",
-              label: "Show labels with values",
-              checked: customSettings.showLabelValues,
-              onChange: (e2) => setCustomSettings((settings2) => ({
-                ...settings2,
-                showLabelValues: e2.target.checked
-              }))
+            }), chartType2 === "funnel" && /* @__PURE__ */ jsxs(Fragment, {
+              children: [/* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show labels with values",
+                checked: customSettings.showLabelValues,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  showLabelValues: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsx(InputField, {
+                type: "checkbox",
+                label: "Show Conversion Rate",
+                checked: customSettings.showConversionRate,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  showConversionRate: e2.target.checked
+                }))
+              }), /* @__PURE__ */ jsx(InputField, {
+                type: "text",
+                label: "Label Format",
+                icon: /* @__PURE__ */ jsx("span", {
+                  className: styles$i.labelFormatTooltip,
+                  children: /* @__PURE__ */ jsx(InfoTooltip, {
+                    position: "left-top-end",
+                    children: `Please use {b} to show the label name, {c} to show the label value. 
+ Note: Only works if the above options are not selected.`
+                  })
+                }),
+                placeholder: "{b}",
+                value: customSettings.labelFormat,
+                onChange: (e2) => setCustomSettings((settings2) => ({
+                  ...settings2,
+                  labelFormat: e2.target.value
+                }))
+              })]
             }), chartType2 !== "pie" && chartType2 !== "doughnut" && chartType2 !== "funnel" && chartType2 !== "gauge" && chartType2 !== "sankey" && chartType2 !== "singleValue" && chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
               children: [/* @__PURE__ */ jsxs("div", {
                 className: styles$i.seriesWrapper,
@@ -88018,10 +88077,10 @@ const ChartTab = ({
     })]
   });
 };
-const container$5 = "_container_wjdaz_1";
-const wrapper$1 = "_wrapper_wjdaz_9";
-const text = "_text_wjdaz_17";
-const table$2 = "_table_wjdaz_23";
+const container$5 = "_container_yjeiv_1";
+const wrapper$1 = "_wrapper_yjeiv_5";
+const text = "_text_yjeiv_9";
+const table$2 = "_table_yjeiv_12";
 var styles$e = {
   container: container$5,
   wrapper: wrapper$1,
@@ -88054,16 +88113,16 @@ const InputTables = ({
     })
   });
 };
-const container$4 = "_container_127xg_1";
-const header$1 = "_header_127xg_9";
-const tabButton$1 = "_tabButton_127xg_31";
-const selectedTab = "_selectedTab_127xg_37";
-const table$1 = "_table_127xg_43";
+const container$4 = "_container_38zl3_1";
+const header$1 = "_header_38zl3_5";
+const tabButton$1 = "_tabButton_38zl3_16";
+const selectedTab = "_selectedTab_38zl3_19";
+const table$1 = "_table_38zl3_22";
 var styles$d = {
   container: container$4,
   header: header$1,
-  "text-container": "_text-container_127xg_17",
-  "btn-container": "_btn-container_127xg_25",
+  "text-container": "_text-container_38zl3_9",
+  "btn-container": "_btn-container_38zl3_13",
   tabButton: tabButton$1,
   selectedTab,
   table: table$1
@@ -88144,17 +88203,17 @@ const TableTab = ({
     })]
   });
 };
-const mainContainerUpdate = "_mainContainerUpdate_o2f8j_7";
-const wrapper = "_wrapper_o2f8j_23";
-const updateWrapper = "_updateWrapper_o2f8j_29";
-const updateWrapperContent = "_updateWrapperContent_o2f8j_35";
-const searchCommand = "_searchCommand_o2f8j_41";
-const tabButton = "_tabButton_o2f8j_47";
-const tabActive = "_tabActive_o2f8j_53";
+const mainContainerUpdate = "_mainContainerUpdate_19iy1_4";
+const wrapper = "_wrapper_19iy1_12";
+const updateWrapper = "_updateWrapper_19iy1_15";
+const updateWrapperContent = "_updateWrapperContent_19iy1_18";
+const searchCommand = "_searchCommand_19iy1_21";
+const tabButton = "_tabButton_19iy1_24";
+const tabActive = "_tabActive_19iy1_27";
 var styles$c = {
-  "main-container": "_main-container_o2f8j_1",
+  "main-container": "_main-container_19iy1_1",
   mainContainerUpdate,
-  "outputTab-header": "_outputTab-header_o2f8j_15",
+  "outputTab-header": "_outputTab-header_19iy1_8",
   wrapper,
   updateWrapper,
   updateWrapperContent,
@@ -88291,30 +88350,30 @@ const MetricOutput = ({
     })]
   });
 };
-const fieldValueIcon = "_fieldValueIcon_fl6kw_49";
-const fieldAddBtnIcon = "_fieldAddBtnIcon_fl6kw_65";
-const group = "_group_fl6kw_1";
-const tooltipWrapper = "_tooltipWrapper_fl6kw_89";
-const tooltip = "_tooltip_fl6kw_89";
-const dropdown = "_dropdown_fl6kw_113";
-const filterDropdown = "_filterDropdown_fl6kw_121";
-const filterValues = "_filterValues_fl6kw_129";
-const columnText = "_columnText_fl6kw_137";
-const disabled = "_disabled_fl6kw_145";
-const checkIcon = "_checkIcon_fl6kw_153";
-const generateButton = "_generateButton_fl6kw_161";
+const fieldValueIcon = "_fieldValueIcon_z8ldj_25";
+const fieldAddBtnIcon = "_fieldAddBtnIcon_z8ldj_33";
+const group = "_group_z8ldj_1";
+const tooltipWrapper = "_tooltipWrapper_z8ldj_45";
+const tooltip = "_tooltip_z8ldj_45";
+const dropdown = "_dropdown_z8ldj_57";
+const filterDropdown = "_filterDropdown_z8ldj_61";
+const filterValues = "_filterValues_z8ldj_65";
+const columnText = "_columnText_z8ldj_69";
+const disabled = "_disabled_z8ldj_73";
+const checkIcon = "_checkIcon_z8ldj_77";
+const generateButton = "_generateButton_z8ldj_81";
 var styles$b = {
-  "form-container": "_form-container_fl6kw_1",
-  "field-container": "_field-container_fl6kw_9",
-  "field-label": "_field-label_fl6kw_17",
-  "field-wrapper": "_field-wrapper_fl6kw_25",
-  "field-inner-container": "_field-inner-container_fl6kw_33",
-  "field-value": "_field-value_fl6kw_41",
+  "form-container": "_form-container_z8ldj_1",
+  "field-container": "_field-container_z8ldj_5",
+  "field-label": "_field-label_z8ldj_9",
+  "field-wrapper": "_field-wrapper_z8ldj_13",
+  "field-inner-container": "_field-inner-container_z8ldj_17",
+  "field-value": "_field-value_z8ldj_21",
   fieldValueIcon,
-  "field-add-btn": "_field-add-btn_fl6kw_57",
+  "field-add-btn": "_field-add-btn_z8ldj_29",
   fieldAddBtnIcon,
-  "field-value-container": "_field-value-container_fl6kw_73",
-  "field-prompt": "_field-prompt_fl6kw_81",
+  "field-value-container": "_field-value-container_z8ldj_37",
+  "field-prompt": "_field-prompt_z8ldj_41",
   group,
   tooltipWrapper,
   tooltip,
@@ -89515,10 +89574,10 @@ const MetricForm = ({
     })]
   });
 };
-const container$2 = "_container_1v000_1";
-const header = "_header_1v000_9";
-const enableGroupBy = "_enableGroupBy_1v000_15";
-const enableGroupButton = "_enableGroupButton_1v000_21";
+const container$2 = "_container_rofqe_1";
+const header = "_header_rofqe_5";
+const enableGroupBy = "_enableGroupBy_rofqe_8";
+const enableGroupButton = "_enableGroupButton_rofqe_11";
 var styles$9 = {
   container: container$2,
   header,
@@ -95317,8 +95376,8 @@ const ChartImageDownloadButton = ({
     }), text2]
   });
 };
-const metricFilter = "_metricFilter_1xge8_1";
-const customContainer = "_customContainer_1xge8_7";
+const metricFilter = "_metricFilter_k2gef_1";
+const customContainer = "_customContainer_k2gef_4";
 var styles$5 = {
   metricFilter,
   customContainer
@@ -95341,8 +95400,8 @@ const MetricFilterDropDown = ({
           label: o2
         })),
         onChange: (options2) => onChangeFilterValue(rlsConditions[0].name, options2 == null ? void 0 : options2[0].value, void 0, options2),
-        labelVariant: "static",
-        labelDesign: "client"
+        labelDesign: "client",
+        label: rlsConditions[0].name
       })
     }) : /* @__PURE__ */ jsx("div", {
       className: styles$5.metricFilter,
@@ -95359,9 +95418,8 @@ const MetricFilterDropDown = ({
         companyId,
         isSearchEnabled: true,
         autoSelected: Array.isArray(rlsConditions[0].value) && !rlsConditions[0].value.length,
-        labelVariant: "static",
         labelDesign: "client",
-        label: " "
+        label: rlsConditions[0].name
       })
     }) : /* @__PURE__ */ jsx("div", {
       className: styles$5.metricFilter,
@@ -95422,24 +95480,24 @@ const MetricFilterDropDown = ({
     }) : void 0
   });
 };
-const container$1 = "_container_a6fvx_1";
-const popover = "_popover_a6fvx_9";
-const button = "_button_a6fvx_17";
-const buttonOpen = "_buttonOpen_a6fvx_25";
-const menu = "_menu_a6fvx_33";
-const enter = "_enter_a6fvx_41";
-const enterFrom = "_enterFrom_a6fvx_49";
-const enterTo = "_enterTo_a6fvx_57";
-const leave = "_leave_a6fvx_65";
-const leaveFrom = "_leaveFrom_a6fvx_73";
-const leaveTo = "_leaveTo_a6fvx_81";
-const center = "_center_a6fvx_89";
-const top = "_top_a6fvx_97";
-const bottom = "_bottom_a6fvx_105";
-const left = "_left_a6fvx_113";
-const right = "_right_a6fvx_121";
-const chartOptionBtn = "_chartOptionBtn_a6fvx_225";
-const chartpopup = "_chartpopup_a6fvx_233";
+const container$1 = "_container_14i90_1";
+const popover = "_popover_14i90_5";
+const button = "_button_14i90_9";
+const buttonOpen = "_buttonOpen_14i90_13";
+const menu = "_menu_14i90_17";
+const enter = "_enter_14i90_21";
+const enterFrom = "_enterFrom_14i90_25";
+const enterTo = "_enterTo_14i90_29";
+const leave = "_leave_14i90_33";
+const leaveFrom = "_leaveFrom_14i90_37";
+const leaveTo = "_leaveTo_14i90_41";
+const center = "_center_14i90_45";
+const top = "_top_14i90_49";
+const bottom = "_bottom_14i90_53";
+const left = "_left_14i90_57";
+const right = "_right_14i90_61";
+const chartOptionBtn = "_chartOptionBtn_14i90_113";
+const chartpopup = "_chartpopup_14i90_117";
 var styles$4 = {
   container: container$1,
   popover,
@@ -95457,23 +95515,23 @@ var styles$4 = {
   bottom,
   left,
   right,
-  "left-top-end": "_left-top-end_a6fvx_129",
-  "right-top-end": "_right-top-end_a6fvx_137",
-  "left-bottom-end": "_left-bottom-end_a6fvx_145",
-  "right-bottom-end": "_right-bottom-end_a6fvx_153",
-  "top-left": "_top-left_a6fvx_161",
-  "top-right": "_top-right_a6fvx_169",
-  "bottom-left": "_bottom-left_a6fvx_177",
-  "bottom-right": "_bottom-right_a6fvx_185",
-  "left-top": "_left-top_a6fvx_129",
-  "left-bottom": "_left-bottom_a6fvx_145",
-  "right-top": "_right-top_a6fvx_137",
-  "right-bottom": "_right-bottom_a6fvx_153",
+  "left-top-end": "_left-top-end_14i90_65",
+  "right-top-end": "_right-top-end_14i90_69",
+  "left-bottom-end": "_left-bottom-end_14i90_73",
+  "right-bottom-end": "_right-bottom-end_14i90_77",
+  "top-left": "_top-left_14i90_81",
+  "top-right": "_top-right_14i90_85",
+  "bottom-left": "_bottom-left_14i90_89",
+  "bottom-right": "_bottom-right_14i90_93",
+  "left-top": "_left-top_14i90_65",
+  "left-bottom": "_left-bottom_14i90_73",
+  "right-top": "_right-top_14i90_69",
+  "right-bottom": "_right-bottom_14i90_77",
   chartOptionBtn,
   chartpopup
 };
-const fullscreen = "_fullscreen_19jec_1";
-const loading = "_loading_19jec_9";
+const fullscreen = "_fullscreen_1gpy3_1";
+const loading = "_loading_1gpy3_5";
 var styles$3 = {
   fullscreen,
   loading
@@ -95734,8 +95792,8 @@ const asEmail = {
   }
 };
 var styles$2 = {
-  "dbc-container": "_dbc-container_nmp4f_1",
-  "active-dimension": "_active-dimension_nmp4f_9"
+  "dbc-container": "_dbc-container_1dw7c_1",
+  "active-dimension": "_active-dimension_1dw7c_5"
 };
 const DrillBreadCrumb = ({
   dimensions,
@@ -96400,7 +96458,7 @@ const SingleValueCard = ({
   const chartData = [{
     value: singleValueData2[0]
   }];
-  const onChangeFilterValue = (name, value, customValue) => {
+  const onChangeFilterValue = (name, value, customValue, stringValues) => {
     if (customValue) {
       setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
         ...rls,
@@ -96410,6 +96468,11 @@ const SingleValueCard = ({
           ...customValue
         } : option2)
       } : rls));
+    } else if (stringValues) {
+      setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
+        ...rls,
+        value: stringValues.map((v4) => v4.value)
+      } : rls));
     } else {
       setRlsConditions((prev) => prev.map((rls) => rls.name === name ? {
         ...rls,
@@ -96442,61 +96505,11 @@ const SingleValueCard = ({
           })]
         }), /* @__PURE__ */ jsxs("div", {
           className: styles$6.features,
-          children: [!!rlsConditions.length && (rlsConditions[0].datatype !== "date" ? /* @__PURE__ */ jsx("div", {
-            className: styles$6.metricFilter,
-            children: /* @__PURE__ */ jsx(FloatingDropDown, {
-              label: rlsConditions[0].name,
-              selectedOption: {
-                value: rlsConditions[0].value || rlsConditions[0].options[0],
-                label: rlsConditions[0].value || rlsConditions[0].options[0]
-              },
-              options: rlsConditions[0].options.map((o2) => ({
-                value: o2,
-                label: o2
-              })),
-              onChange: (option2) => onChangeFilterValue(rlsConditions[0].name, option2.value)
-            })
-          }) : /* @__PURE__ */ jsx("div", {
-            className: styles$6.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
-            })
-          })), (onEdit || onArchive) && /* @__PURE__ */ jsxs(PopoverMenu, {
+          children: [/* @__PURE__ */ jsx(MetricFilterDropDown, {
+            rlsConditions,
+            onChangeFilterValue,
+            companyId: metricItem == null ? void 0 : metricItem.companyId
+          }), (onEdit || onArchive) && /* @__PURE__ */ jsxs(PopoverMenu, {
             buttonClass: styles$6.popup,
             button: /* @__PURE__ */ jsx(Icons, {
               name: "more-icon",