@databrainhq/plugin 0.9.13 → 0.9.15

package/dist/index.es.js

@@ -2533,14 +2533,13 @@ const floatingCreateButtonIcon = "_floatingCreateButtonIcon_12kmo_399";
 const floatingButton = "_floatingButton_12kmo_407";
 const staticContainer = "_staticContainer_12kmo_415";
 const floatingContainer = "_floatingContainer_12kmo_423";
-const filterButton = "_filterButton_12kmo_439";
+const filterButton$1 = "_filterButton_12kmo_439";
 const filterText$1 = "_filterText_12kmo_447";
-const filterLength = "_filterLength_12kmo_455";
+const filterLength$1 = "_filterLength_12kmo_455";
 var styles$M = {
   container: container$i,
   "static": "_static_12kmo_415",
   fixed,
-  "ml-[40px]": "_ml-[40px]_12kmo_1",
   inline,
   flex,
   table: table$3,
@@ -2549,7 +2548,6 @@ var styles$M = {
   hidden,
   "h-[10%]": "_h-[10%]_12kmo_1",
   "w-full": "_w-full_12kmo_1",
-  "w-[400px]": "_w-[400px]_12kmo_1",
   transform,
   resize,
   truncate,
@@ -2573,9 +2571,9 @@ var styles$M = {
   floatingButton,
   staticContainer,
   floatingContainer,
-  filterButton,
+  filterButton: filterButton$1,
   filterText: filterText$1,
-  filterLength,
+  filterLength: filterLength$1,
   "hover:cursor-pointer": "_hover:cursor-pointer_12kmo_1",
   "hover:cursor-text": "_hover:cursor-text_12kmo_1",
   "disabled:cursor-text": "_disabled:cursor-text_12kmo_1",
@@ -6488,27 +6486,99 @@ const TextAreaField = ({
     })]
   });
 };
-const group$1 = "_group_13otg_1";
-const button$8 = "_button_13otg_9";
-const checkbox = "_checkbox_13otg_17";
-const enabled = "_enabled_13otg_43";
-const notenabled = "_notenabled_13otg_59";
-const label$4 = "_label_13otg_75";
-const labelActive = "_labelActive_13otg_83";
-const labelInactive = "_labelInactive_13otg_91";
+const Switch = ({
+  name,
+  styles: styles2,
+  placeholder,
+  enabled: enabled2
+}) => {
+  return /* @__PURE__ */ jsxs("label", {
+    htmlFor: name,
+    className: `${styles2.button}`,
+    children: [Array.isArray(placeholder) && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${!enabled2 ? styles2.labelActive : styles2.labelInactive}`,
+        children: placeholder[0]
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${enabled2 ? styles2.enabled : styles2.notenabled}`
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 ? styles2.labelActive : styles2.labelInactive}`,
+        children: placeholder[1]
+      })]
+    }), typeof placeholder === "string" && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${enabled2 ? styles2.enabled : styles2.notenabled}`
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 ? styles2.labelActive : styles2.labelInactive}`,
+        children: placeholder
+      })]
+    }), !Array.isArray(placeholder) && typeof placeholder !== "string" && /* @__PURE__ */ jsx("span", {
+      className: ` ${styles2.switch} ${enabled2 ? styles2.enabled : styles2.notenabled}`
+    })]
+  });
+};
+const group$1 = "_group_2xttg_1";
+const button$8 = "_button_2xttg_9";
+const toggleWidth = "_toggleWidth_2xttg_15";
+const checkbox = "_checkbox_2xttg_23";
+const enabled = "_enabled_2xttg_49";
+const notenabled = "_notenabled_2xttg_65";
+const toggle = "_toggle_2xttg_15";
+const label$4 = "_label_2xttg_89";
+const labelActive = "_labelActive_2xttg_97";
+const labelInactive = "_labelInactive_2xttg_105";
+const toggleInactive = "_toggleInactive_2xttg_113";
 var styles$B = {
   group: group$1,
   button: button$8,
+  toggleWidth,
   checkbox,
-  "switch": "_switch_13otg_25",
+  "switch": "_switch_2xttg_31",
   enabled,
   notenabled,
+  toggle,
   label: label$4,
   labelActive,
-  labelInactive
+  labelInactive,
+  toggleInactive
+};
+const Toggle = ({
+  name,
+  styles: styles2,
+  placeholder,
+  enabled: enabled2
+}) => {
+  return /* @__PURE__ */ jsxs("label", {
+    htmlFor: name,
+    className: `${styles2.button} ${styles2.toggleWidth}`,
+    children: [Array.isArray(placeholder) && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 && styles2.toggleInactive}`,
+        children: placeholder[0]
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${styles2.toggle} ${enabled2 ? styles2.enabled : styles2.notenabled}
+          `
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 || styles2.toggleInactive}`,
+        children: placeholder[1]
+      })]
+    }), typeof placeholder === "string" && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.switch} ${styles2.toggle} ${enabled2 ? styles2.enabled : styles2.notenabled}
+          `
+      }), /* @__PURE__ */ jsx("span", {
+        className: ` ${styles2.label} ${enabled2 || styles2.labelInactive}`,
+        children: placeholder
+      })]
+    }), !Array.isArray(placeholder) && typeof placeholder !== "string" && /* @__PURE__ */ jsx("span", {
+      className: ` ${styles2.switch} ${styles2.toggle} ${enabled2 ? styles2.enabled : styles2.notenabled}
+       `
+    })]
+  });
 };
 const ToggleButton = ({
   enabled: enabled2,
+  variant = "switch",
   onChange,
   label: label2,
   className = "",
@@ -6532,18 +6602,16 @@ const ToggleButton = ({
         target
       }) => onChange == null ? void 0 : onChange(target.checked),
       className: styles$B.checkbox
-    }), /* @__PURE__ */ jsxs("label", {
-      htmlFor: name,
-      className: styles$B.button,
-      children: [/* @__PURE__ */ jsx("span", {
-        className: `${styles$B.switch} ${enabled2 ? styles$B.enabled : styles$B.notenabled}`
-      }), placeholder ? /* @__PURE__ */ jsx("span", {
-        className: `
-          ${styles$B.label}
-          ${enabled2 ? styles$B.labelActive : styles$B.labelInactive}
-        `,
-        children: placeholder
-      }) : null]
+    }), variant === "toggle" && /* @__PURE__ */ jsx(Toggle, {
+      name,
+      styles: styles$B,
+      placeholder,
+      enabled: enabled2
+    }), variant === "switch" && /* @__PURE__ */ jsx(Switch, {
+      name,
+      styles: styles$B,
+      placeholder,
+      enabled: enabled2
     })]
   });
 };
@@ -79572,7 +79640,9 @@ const AreaChart = ({
   backGroundColor,
   customSettings,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const option2 = {
@@ -79675,12 +79745,14 @@ const AreaChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       }
     })
@@ -79696,7 +79768,9 @@ const BarChart = ({
   margins,
   customSettings,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -79801,12 +79875,14 @@ const BarChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       }
     })
@@ -79821,7 +79897,9 @@ const ComboChart = ({
   backGroundColor,
   customSettings,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const choice = ["bar", "line"];
@@ -79950,12 +80028,14 @@ const ComboChart = ({
       ref: chartRef,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       }
     })
@@ -79970,7 +80050,9 @@ const LineChart = ({
   colors: colors2,
   customSettings,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -80069,12 +80151,14 @@ const LineChart = ({
       ref: chartRef,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       }
     })
@@ -80087,7 +80171,9 @@ const PieChart = ({
   labelSettings,
   chartRef,
   colors: colors2,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2, _c2, _d;
   if (((_b2 = (_a2 = data == null ? void 0 : data.datasets[0]) == null ? void 0 : _a2.data) == null ? void 0 : _b2.length) > 1) {
@@ -80173,12 +80259,12 @@ const PieChart = ({
         option: option22,
         onEvents: {
           click: (params) => {
-            if (handleChartRightClick)
-              handleChartRightClick(params);
+            handleChartClick2(params);
+            drilldown2 == null ? void 0 : drilldown2();
           },
           contextmenu: (params) => {
-            if (handleChartRightClick)
-              handleChartRightClick(params);
+            handleChartClick2(params);
+            setShowChartPopup(true);
           }
         },
         ref: chartRef
@@ -80248,12 +80334,14 @@ const PieChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -80269,7 +80357,9 @@ const RowChart = ({
   colors: colors2,
   backGroundColor,
   customSettings,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const option2 = {
@@ -80372,12 +80462,14 @@ const RowChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -80395,7 +80487,9 @@ const ScatterChart = ({
   isEnableGroupBy,
   backGroundColor,
   customSettings,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const option2 = {
@@ -80492,12 +80586,14 @@ const ScatterChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -80513,7 +80609,9 @@ const WaterFallChart = ({
   colors: colors2,
   backGroundColor,
   customSettings,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -80613,12 +80711,14 @@ const WaterFallChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -80632,7 +80732,9 @@ const FunnelChart = ({
   labelSettings,
   colors: colors2,
   chartRef,
-  handleChartRightClick,
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2,
   customSettings
 }) => {
   const option2 = {
@@ -80724,12 +80826,14 @@ const FunnelChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -80745,7 +80849,9 @@ const BubbleChart = ({
   colors: colors2,
   customSettings,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const modifiedData = [];
@@ -80869,12 +80975,14 @@ const BubbleChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       }
     })
@@ -80887,7 +80995,9 @@ const DoughnutChart = ({
   labelSettings,
   colors: colors2,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2, _c2;
   if (((_a2 = data == null ? void 0 : data.labels) == null ? void 0 : _a2.length) > 1) {
@@ -80969,10 +81079,12 @@ const DoughnutChart = ({
         option: option22,
         onEvents: {
           click: (params) => {
-            handleChartRightClick(params);
+            handleChartClick2(params);
+            drilldown2 == null ? void 0 : drilldown2();
           },
           contextmenu: (params) => {
-            handleChartRightClick(params);
+            handleChartClick2(params);
+            setShowChartPopup(true);
           }
         },
         ref: chartRef
@@ -81040,12 +81152,14 @@ const DoughnutChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -81062,7 +81176,9 @@ const SteppedAreaChart = ({
   colors: colors2,
   backGroundColor,
   customSettings,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const choice = ["start", "middle", "end"];
@@ -81163,12 +81279,14 @@ const SteppedAreaChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -81185,7 +81303,9 @@ const Histogram = ({
   colors: colors2,
   backGroundColor,
   customSettings,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -81280,12 +81400,14 @@ const Histogram = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -81298,7 +81420,9 @@ const GaugeChart = ({
   legendSettings,
   colors: colors2,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   const newGuageData = Array.isArray(gaugeData) ? gaugeData : [];
   const total = newGuageData.reduce((sum2, item) => {
@@ -81391,12 +81515,14 @@ const GaugeChart = ({
     option: option2,
     onEvents: {
       click: (params) => {
-        if (handleChartRightClick)
-          handleChartRightClick(params);
+        if (handleChartClick2)
+          handleChartClick2(params);
+        drilldown2 == null ? void 0 : drilldown2();
       },
       contextmenu: (params) => {
-        if (handleChartRightClick)
-          handleChartRightClick(params);
+        if (handleChartClick2)
+          handleChartClick2(params);
+        setShowChartPopup(true);
       }
     },
     ref: chartRef
@@ -81408,7 +81534,9 @@ const SankeyChart = ({
   chartRef,
   colors: colors2,
   backGroundColor,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2, _c2;
   const allValues = [];
@@ -81483,12 +81611,14 @@ const SankeyChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -81505,7 +81635,9 @@ const StackedBarChart = ({
   colors: colors2,
   backGroundColor,
   customSettings,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2, _b2;
   const customData = useMemo(() => {
@@ -81627,13 +81759,15 @@ const StackedBarChart = ({
       },
       option: option2,
       onEvents: {
-        click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+        cclick: (params) => {
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       },
       ref: chartRef
@@ -81937,7 +82071,9 @@ const BoxPlot = ({
   colors: colors2,
   customSettings,
   chartRef,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  setShowChartPopup,
+  drilldown: drilldown2
 }) => {
   var _a2;
   const modifiedData = [];
@@ -82055,12 +82191,14 @@ const BoxPlot = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          drilldown2 == null ? void 0 : drilldown2();
         },
         contextmenu: (params) => {
-          if (handleChartRightClick)
-            handleChartRightClick(params);
+          if (handleChartClick2)
+            handleChartClick2(params);
+          setShowChartPopup(true);
         }
       }
     })
@@ -86135,7 +86273,9 @@ const MetricChart = ({
   tableSettings,
   chartRef,
   tableName,
-  handleChartRightClick
+  handleChartClick: handleChartClick2,
+  drilldown: drilldown2,
+  setShowChartPopup
 }) => {
   var _a2, _b2, _c2, _d, _e2, _f;
   if (chartType2 === CHART_TYPES.line) {
@@ -86148,7 +86288,9 @@ const MetricChart = ({
       axisSettings,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.stepped) {
@@ -86164,7 +86306,9 @@ const MetricChart = ({
       colors: colors2,
       backGroundColor,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.bar) {
@@ -86178,7 +86322,9 @@ const MetricChart = ({
       customSettings,
       margins,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.stack) {
@@ -86193,7 +86339,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.histogram) {
@@ -86208,7 +86356,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.bubble) {
@@ -86223,7 +86373,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.scatter) {
@@ -86238,7 +86390,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.row) {
@@ -86252,7 +86406,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.area) {
@@ -86270,7 +86426,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.combo) {
@@ -86289,7 +86447,9 @@ const MetricChart = ({
       colors: colors2,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.pie) {
@@ -86301,7 +86461,9 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.doughnut) {
@@ -86313,7 +86475,9 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.waterfall) {
@@ -86342,7 +86506,9 @@ const MetricChart = ({
       backGroundColor,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.funnel) {
@@ -86353,8 +86519,10 @@ const MetricChart = ({
       labelSettings,
       colors: colors2,
       chartRef,
-      handleChartRightClick,
-      customSettings
+      handleChartClick: handleChartClick2,
+      customSettings,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.gauge) {
@@ -86380,7 +86548,9 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.sankey) {
@@ -86393,7 +86563,9 @@ const MetricChart = ({
       colors: colors2,
       backGroundColor,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.singleValue) {
@@ -86416,7 +86588,9 @@ const MetricChart = ({
       colors: colors2,
       customSettings,
       chartRef,
-      handleChartRightClick
+      handleChartClick: handleChartClick2,
+      drilldown: drilldown2,
+      setShowChartPopup
     });
   }
   if (chartType2 === CHART_TYPES.table) {
@@ -86467,7 +86641,9 @@ const FullScreenChart = ({
           routeType: "internal"
         },
         chartRef: chart.chartRef,
-        handleChartRightClick: chart.handleChartRightClick
+        handleChartClick: chart.handleChartClick,
+        drilldown: chart.drilldown,
+        setShowChartPopup: chart.setShowChartPopup
       })
     })
   });
@@ -86704,38 +86880,41 @@ const FilterField = ({
     })
   });
 };
-const container$9 = "_container_550f5_1";
-const form$1 = "_form_550f5_7";
-const filterHeader = "_filterHeader_550f5_13";
-const titleContent = "_titleContent_550f5_19";
-const title = "_title_550f5_19";
-const buttons = "_buttons_550f5_31";
-const apply = "_apply_550f5_37";
-const applyIcon = "_applyIcon_550f5_43";
-const reset = "_reset_550f5_49";
-const filterFields = "_filterFields_550f5_55";
-const AddFilter$1 = "_AddFilter_550f5_61";
-const filterDropdown$1 = "_filterDropdown_550f5_67";
-const filters = "_filters_550f5_73";
-const filterItem = "_filterItem_550f5_79";
-const filterItemOperator = "_filterItemOperator_550f5_85";
-const remove = "_remove_550f5_91";
-const filterCol = "_filterCol_550f5_97";
-const filterText = "_filterText_550f5_103";
-const smallText = "_smallText_550f5_109";
-const numberField = "_numberField_550f5_117";
-const numberFieldWrapper = "_numberFieldWrapper_550f5_125";
-const numberFieldLabel = "_numberFieldLabel_550f5_133";
-const numberFieldLabelText = "_numberFieldLabelText_550f5_141";
-const numberFieldLabelSelectText = "_numberFieldLabelSelectText_550f5_149";
-const numberFieldButtonClass = "_numberFieldButtonClass_550f5_157";
-const numberFieldLabelMenuClass = "_numberFieldLabelMenuClass_550f5_165";
-const checkedOption$1 = "_checkedOption_550f5_173";
-const option = "_option_550f5_181";
-const addFilterMenu = "_addFilterMenu_550f5_189";
-const appliedFilterTag = "_appliedFilterTag_550f5_197";
-const appliedfilters = "_appliedfilters_550f5_205";
-const textBold = "_textBold_550f5_213";
+const container$9 = "_container_158ok_1";
+const form$1 = "_form_158ok_7";
+const filterHeader = "_filterHeader_158ok_13";
+const titleContent = "_titleContent_158ok_19";
+const title = "_title_158ok_19";
+const buttons = "_buttons_158ok_31";
+const apply = "_apply_158ok_37";
+const applyIcon = "_applyIcon_158ok_43";
+const reset = "_reset_158ok_49";
+const filterFields = "_filterFields_158ok_55";
+const AddFilter$1 = "_AddFilter_158ok_61";
+const filterDropdown$1 = "_filterDropdown_158ok_67";
+const filters = "_filters_158ok_73";
+const filterItem = "_filterItem_158ok_79";
+const filterItemOperator = "_filterItemOperator_158ok_85";
+const remove = "_remove_158ok_91";
+const filterCol = "_filterCol_158ok_97";
+const filterText = "_filterText_158ok_103";
+const smallText = "_smallText_158ok_109";
+const numberField = "_numberField_158ok_117";
+const numberFieldWrapper = "_numberFieldWrapper_158ok_125";
+const numberFieldLabel = "_numberFieldLabel_158ok_133";
+const numberFieldLabelText = "_numberFieldLabelText_158ok_141";
+const numberFieldLabelSelectText = "_numberFieldLabelSelectText_158ok_149";
+const numberFieldButtonClass = "_numberFieldButtonClass_158ok_157";
+const numberFieldLabelMenuClass = "_numberFieldLabelMenuClass_158ok_165";
+const checkedOption$1 = "_checkedOption_158ok_173";
+const option = "_option_158ok_181";
+const addFilterMenu = "_addFilterMenu_158ok_189";
+const appliedFilterTag = "_appliedFilterTag_158ok_197";
+const appliedfilters = "_appliedfilters_158ok_205";
+const textBold = "_textBold_158ok_213";
+const filterButton = "_filterButton_158ok_221";
+const filterBtnText = "_filterBtnText_158ok_229";
+const filterLength = "_filterLength_158ok_237";
 var styles$s = {
   container: container$9,
   form: form$1,
@@ -86768,7 +86947,10 @@ var styles$s = {
   addFilterMenu,
   appliedFilterTag,
   appliedfilters,
-  textBold
+  textBold,
+  filterButton,
+  filterBtnText,
+  filterLength
 };
 const NumberFilterField = ({
   setAppliedFilters,
@@ -86903,6 +87085,48 @@ const AddFilter = ({
     })
   });
 };
+const AppliedFilter = ({
+  appliedFilter,
+  setAppliedFilters,
+  onChangeFilters
+}) => {
+  return /* @__PURE__ */ jsx("div", {
+    className: styles$s.appliedfilters,
+    children: appliedFilter.map((filter2) => /* @__PURE__ */ jsxs("div", {
+      className: styles$s.appliedFilterTag,
+      children: [/* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        className: styles$s.textBold,
+        children: filter2.column
+      }), /* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        children: "is"
+      }), filter2.as !== "string" && filter2.as !== "boolean" && filter2.as !== "default" && /* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        children: "between"
+      }), /* @__PURE__ */ jsx(Text, {
+        variant: "p",
+        styleClass: "font-14",
+        className: styles$s.textBold,
+        children: Array.isArray(filter2.value) ? filter2.as === "string" ? filter2.value.join(", ") : filter2.value.join(" & ") : typeof filter2.value === "string" && filter2.as === "number" ? filter2.value.replace("AND", "&") : typeof filter2.value === "string" && filter2.as === "date" ? filter2.value.split(" ").slice(2).join(" ").replace("AND", "&") : filter2.value
+      }), /* @__PURE__ */ jsx(Button, {
+        variant: "secondary",
+        type: "button",
+        onClick: () => {
+          setAppliedFilters((prev) => prev.filter((a4) => a4.column !== filter2.column));
+          const filterColumns = appliedFilter.filter((c3) => c3.column !== filter2.column);
+          onChangeFilters(filterColumns);
+        },
+        children: /* @__PURE__ */ jsx(Icons, {
+          name: "close-icon"
+        })
+      })]
+    }))
+  });
+};
 const groupArray = (array, key) => {
   return array.reduce((acc, item) => {
     const group2 = item[key];
@@ -95218,20 +95442,22 @@ var zt = function(t3) {
   } }]), a4;
 }(), $t = "input", Gt = "navigate";
 var reactDatepicker = "";
-const datePickerContainer = "_datePickerContainer_1dons_1";
-const buttonWrapper = "_buttonWrapper_1dons_9";
-const datePickerCalendarWrapper = "_datePickerCalendarWrapper_1dons_17";
-const label$1 = "_label_1dons_25";
-const text = "_text_1dons_31";
-const button$4 = "_button_1dons_9";
-const datePickerCalContainer = "_datePickerCalContainer_1dons_43";
-const datePickerOptionsWrapper = "_datePickerOptionsWrapper_1dons_49";
-const datePickerOption = "_datePickerOption_1dons_49";
-const datePickerCalendar = "_datePickerCalendar_1dons_17";
-const datePickerCalendarHeader = "_datePickerCalendarHeader_1dons_73";
-const checkedOption = "_checkedOption_1dons_81";
-const datePickerCalFooter = "_datePickerCalFooter_1dons_89";
-const dayClassName = "_dayClassName_1dons_97";
+const datePickerContainer = "_datePickerContainer_14m8h_1";
+const buttonWrapper = "_buttonWrapper_14m8h_9";
+const datePickerCalendarWrapper = "_datePickerCalendarWrapper_14m8h_17";
+const label$1 = "_label_14m8h_25";
+const text = "_text_14m8h_33";
+const button$4 = "_button_14m8h_9";
+const datePickerCalContainer = "_datePickerCalContainer_14m8h_49";
+const datePickerOptionsWrapper = "_datePickerOptionsWrapper_14m8h_57";
+const datePickerOption = "_datePickerOption_14m8h_57";
+const datePickerCalendar = "_datePickerCalendar_14m8h_17";
+const datePickerCalendarHeader = "_datePickerCalendarHeader_14m8h_97";
+const checkedOption = "_checkedOption_14m8h_105";
+const datePickerCalFooter = "_datePickerCalFooter_14m8h_113";
+const dayClassName = "_dayClassName_14m8h_121";
+const datePickerSelectedWrapper = "_datePickerSelectedWrapper_14m8h_129";
+const datePickerSelectedDate = "_datePickerSelectedDate_14m8h_137";
 var styles$r = {
   datePickerContainer,
   buttonWrapper,
@@ -95246,7 +95472,9 @@ var styles$r = {
   datePickerCalendarHeader,
   checkedOption,
   datePickerCalFooter,
-  dayClassName
+  dayClassName,
+  datePickerSelectedWrapper,
+  datePickerSelectedDate
 };
 const options = [{
   type: "day",
@@ -95402,6 +95630,9 @@ const DateRangePicker = ({
             className: styles$r.datePickerCalendarWrapper,
             children: [/* @__PURE__ */ jsx(zt, {
               selected: startDate,
+              startDate,
+              selectsStart: true,
+              endDate,
               onChange: (date) => {
                 const startDateFormat = date.toISOString().slice(0, 10);
                 const endDateFormat = endDate == null ? void 0 : endDate.toISOString().slice(0, 10);
@@ -95413,6 +95644,9 @@ const DateRangePicker = ({
               calendarClassName: styles$r.datePickerCalendar
             }), /* @__PURE__ */ jsx(zt, {
               selected: endDate,
+              startDate,
+              endDate,
+              selectsEnd: true,
               onChange: (date) => {
                 const startDateFormat = startDate == null ? void 0 : startDate.toISOString().slice(0, 10);
                 const endDateFormat = date.toISOString().slice(0, 10);
@@ -95420,13 +95654,37 @@ const DateRangePicker = ({
                 setEndDate(date);
               },
               calendarClassName: styles$r.datePickerCalendar,
-              className: styles$r.datePickerCalendarHeader,
               open: true,
               inline: true
             })]
-          }), /* @__PURE__ */ jsx("div", {
+          }), /* @__PURE__ */ jsxs("div", {
             className: styles$r.datePickerCalFooter,
-            children: /* @__PURE__ */ jsx(Button, {
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: styles$r.datePickerSelectedWrapper,
+              children: [/* @__PURE__ */ jsxs(Text, {
+                variant: "p",
+                styleClass: "font-14",
+                className: styles$r.datePickerSelectedDate,
+                children: [/* @__PURE__ */ jsx("span", {
+                  children: (startDate == null ? void 0 : startDate.getDate()) || "D"
+                }), "/", " ", /* @__PURE__ */ jsx("span", {
+                  children: (startDate == null ? void 0 : startDate.getMonth()) || "M"
+                }), " /", " ", /* @__PURE__ */ jsx("span", {
+                  children: (startDate == null ? void 0 : startDate.getFullYear()) || "Y"
+                })]
+              }), "-", /* @__PURE__ */ jsxs(Text, {
+                variant: "p",
+                styleClass: "font-14",
+                className: styles$r.datePickerSelectedDate,
+                children: [/* @__PURE__ */ jsx("span", {
+                  children: (endDate == null ? void 0 : endDate.getDay()) || "D"
+                }), "/", " ", /* @__PURE__ */ jsx("span", {
+                  children: (endDate == null ? void 0 : endDate.getMonth()) || "M"
+                }), " /", " ", /* @__PURE__ */ jsx("span", {
+                  children: (endDate == null ? void 0 : endDate.getFullYear()) || "Y"
+                })]
+              })]
+            }), /* @__PURE__ */ jsx(Button, {
               variant: "primary",
               type: "button",
               size: "small",
@@ -95435,7 +95693,7 @@ const DateRangePicker = ({
                 return (_a2 = datePickerRef.current) == null ? void 0 : _a2.click();
               },
               children: "Save"
-            })
+            })]
           })]
         })]
       })
@@ -95464,21 +95722,22 @@ const GlobalFilters = ({
   onApply,
   companyId,
   renderAdditionalHeaderContent,
-  externalDashboardId,
-  appliedfilters: appliedfilters2,
-  setAppliedFilters
+  externalDashboardId
 }) => {
+  const [appliedfilters2, setAppliedFilters] = useState([]);
+  const globalFilterRef = useRef(null);
   const [filterList, setFilterList] = useState([]);
   const resetFilters = () => {
+    var _a2;
     setAppliedFilters([]);
     onApply({
       tableName: "",
       filters: []
     });
+    (_a2 = globalFilterRef.current) == null ? void 0 : _a2.click();
   };
-  const handleSubmit = (e3) => {
-    e3.preventDefault();
-    const filterColumns = appliedfilters2.map((field2) => {
+  const onChangeFilters = (updatedFilters) => {
+    const filterColumns = updatedFilters.map((field2) => {
       const col = {
         column: field2.column,
         operator: field2.operator,
@@ -95501,6 +95760,12 @@ const GlobalFilters = ({
       filters: filterColumns
     });
   };
+  const handleSubmit = (e3) => {
+    var _a2;
+    e3.preventDefault();
+    onChangeFilters(appliedfilters2);
+    (_a2 = globalFilterRef.current) == null ? void 0 : _a2.click();
+  };
   const getSelectedOption = useCallback((col, type3) => {
     var _a2;
     const colValue = ((_a2 = appliedfilters2.find((filter2) => filter2.column === col)) == null ? void 0 : _a2.value) || "";
@@ -95547,148 +95812,183 @@ const GlobalFilters = ({
   useEffect(() => {
     if (filters2[0].columns.length) {
       setFilterList(filters2[0].columns.filter((col) => col.isDefault));
+    } else {
+      setAppliedFilters([]);
+      onApply({
+        tableName: filters2[0].tableName,
+        filters: []
+      });
     }
   }, [filters2]);
+  useEffect(() => {
+    setAppliedFilters([]);
+    onApply({
+      tableName: filters2[0].tableName,
+      filters: []
+    });
+  }, [externalDashboardId]);
   return /* @__PURE__ */ jsx(Fragment, {
-    children: (data == null ? void 0 : data.companyIntegrations.length) && !isLoading && /* @__PURE__ */ jsx("div", {
-      className: styles$s.container,
-      children: /* @__PURE__ */ jsxs("form", {
-        className: styles$s.form,
-        onSubmit: handleSubmit,
-        onReset: resetFilters,
-        children: [/* @__PURE__ */ jsx("div", {
-          className: styles$s.filterHeader,
-          children: /* @__PURE__ */ jsxs("div", {
-            className: styles$s.titleContent,
-            children: [/* @__PURE__ */ jsx(Text, {
-              variant: "p",
-              styleClass: "primary",
-              className: styles$s.title,
-              children: "Filters"
-            }), renderAdditionalHeaderContent ? renderAdditionalHeaderContent() : null]
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$s.filterFields,
-          children: filterList.map((col) => {
-            var _a2, _b2;
-            return /* @__PURE__ */ jsx(Fragment, {
+    children: (data == null ? void 0 : data.companyIntegrations.length) && !isLoading && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(PopoverMenu, {
+        button: /* @__PURE__ */ jsxs("div", {
+          className: styles$s.filterButton,
+          ref: globalFilterRef,
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$s.filterBtnText,
+            children: [/* @__PURE__ */ jsx(Icons, {
+              name: "filter-icon"
+            }), " Filters"]
+          }), appliedfilters2.length === 0 ? null : /* @__PURE__ */ jsx("span", {
+            className: styles$s.filterLength,
+            children: appliedfilters2.length
+          })]
+        }),
+        position: "bottom-left",
+        children: /* @__PURE__ */ jsx("div", {
+          className: styles$s.container,
+          children: /* @__PURE__ */ jsxs("form", {
+            className: styles$s.form,
+            onSubmit: handleSubmit,
+            onReset: resetFilters,
+            children: [/* @__PURE__ */ jsx("div", {
+              className: styles$s.filterHeader,
               children: /* @__PURE__ */ jsxs("div", {
-                className: styles$s.filterDropdown,
-                children: [col.as === "date" && /* @__PURE__ */ jsx(Fragment, {
-                  children: /* @__PURE__ */ jsx(DateRangePicker, {
-                    label: col.label || col.name,
-                    defaultValues: (_a2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _a2.defaultValues,
-                    onChange: (option2) => {
-                      if (option2)
-                        setAppliedFilters((prev) => {
-                          const isTimeStamp = col.as.toLowerCase() !== "date";
-                          const value = getTimeFilterValue({
-                            timeGrainValue: option2.value,
-                            isTimeStamp,
-                            col: getColumnString(col.name),
-                            database: integrationName
-                          });
-                          const field2 = {
-                            column: col.name,
-                            operator: "=",
-                            value,
-                            as: col.as,
-                            defaultValues: option2
-                          };
-                          const index2 = prev.findIndex((f2) => f2.column === col.name);
-                          if (index2 === -1)
-                            return [...prev, field2];
-                          const updated = [...prev];
-                          updated[index2] = field2;
-                          return updated;
-                        });
-                    }
+                className: styles$s.titleContent,
+                children: [/* @__PURE__ */ jsx(Text, {
+                  variant: "p",
+                  styleClass: "primary",
+                  className: styles$s.title,
+                  children: "Filters"
+                }), renderAdditionalHeaderContent ? renderAdditionalHeaderContent() : null]
+              })
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$s.filterFields,
+              children: filterList.map((col) => {
+                var _a2, _b2;
+                return /* @__PURE__ */ jsx(Fragment, {
+                  children: /* @__PURE__ */ jsxs("div", {
+                    className: styles$s.filterDropdown,
+                    children: [col.as === "date" && /* @__PURE__ */ jsx(Fragment, {
+                      children: /* @__PURE__ */ jsx(DateRangePicker, {
+                        label: col.label || col.name,
+                        defaultValues: (_a2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _a2.defaultValues,
+                        onChange: (option2) => {
+                          if (option2)
+                            setAppliedFilters((prev) => {
+                              const isTimeStamp = col.as.toLowerCase() !== "date";
+                              const value = getTimeFilterValue({
+                                timeGrainValue: option2.value,
+                                isTimeStamp,
+                                col: getColumnString(col.name),
+                                database: integrationName
+                              });
+                              const field2 = {
+                                column: col.name,
+                                operator: "=",
+                                value,
+                                as: col.as,
+                                defaultValues: option2
+                              };
+                              const index2 = prev.findIndex((f2) => f2.column === col.name);
+                              if (index2 === -1)
+                                return [...prev, field2];
+                              const updated = [...prev];
+                              updated[index2] = field2;
+                              return updated;
+                            });
+                        }
+                      })
+                    }), col.as === "number" && /* @__PURE__ */ jsx(NumberFilterField, {
+                      setAppliedFilters,
+                      column: col,
+                      defaultValues: (_b2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _b2.defaultValues
+                    }), col.as === "string" && /* @__PURE__ */ jsx(MultiFilterDropdown, {
+                      filter: {
+                        tableName: filters2[0].tableName,
+                        columnName: col.name
+                      },
+                      companyId,
+                      selectedOptions: getSelectedOption(col.name, "string") || [],
+                      autoSelected: false,
+                      onChange: (options2) => setAppliedFilters((prev) => {
+                        const field2 = {
+                          column: col.name,
+                          operator: "IN",
+                          value: options2.map((v4) => v4.value),
+                          as: col.as
+                        };
+                        const index2 = prev.findIndex((f2) => f2.column === col.name);
+                        if (index2 === -1)
+                          return [...prev, field2];
+                        const updated = [...prev];
+                        updated[index2] = field2;
+                        return updated;
+                      }),
+                      isSearchEnabled: true,
+                      integrationId,
+                      integrationName,
+                      label: col.label || col.name
+                    }), col.as === "default" || col.as === "boolean" ? /* @__PURE__ */ jsx(FilterDropDown, {
+                      filter: {
+                        tableName: filters2[0].tableName,
+                        columnName: col.name
+                      },
+                      companyId,
+                      selectedOption: getSelectedOption(col.name, "boolean"),
+                      autoSelected: false,
+                      onChange: (option2) => setAppliedFilters((prev) => {
+                        const field2 = {
+                          column: col.name,
+                          operator: "=",
+                          value: option2.value,
+                          as: col.as
+                        };
+                        const index2 = prev.findIndex((f2) => f2.column === col.name);
+                        if (index2 === -1)
+                          return [...prev, field2];
+                        const updated = [...prev];
+                        updated[index2] = field2;
+                        return updated;
+                      }),
+                      isSearchEnabled: true,
+                      integrationId,
+                      integrationName,
+                      label: col.label || col.name
+                    }) : null]
                   })
-                }), col.as === "number" && /* @__PURE__ */ jsx(NumberFilterField, {
-                  setAppliedFilters,
-                  column: col,
-                  defaultValues: (_b2 = appliedfilters2.find((filter2) => filter2.column === col.name)) == null ? void 0 : _b2.defaultValues
-                }), col.as === "string" && /* @__PURE__ */ jsx(MultiFilterDropdown, {
-                  filter: {
-                    tableName: filters2[0].tableName,
-                    columnName: col.name
-                  },
-                  companyId,
-                  selectedOptions: getSelectedOption(col.name, "string") || [],
-                  autoSelected: false,
-                  onChange: (options2) => setAppliedFilters((prev) => {
-                    const field2 = {
-                      column: col.name,
-                      operator: "IN",
-                      value: options2.map((v4) => v4.value),
-                      as: col.as
-                    };
-                    const index2 = prev.findIndex((f2) => f2.column === col.name);
-                    if (index2 === -1)
-                      return [...prev, field2];
-                    const updated = [...prev];
-                    updated[index2] = field2;
-                    return updated;
-                  }),
-                  isSearchEnabled: true,
-                  integrationId,
-                  integrationName,
-                  label: col.label || col.name
-                }), col.as === "default" || col.as === "boolean" ? /* @__PURE__ */ jsx(FilterDropDown, {
-                  filter: {
-                    tableName: filters2[0].tableName,
-                    columnName: col.name
-                  },
-                  companyId,
-                  selectedOption: getSelectedOption(col.name, "boolean"),
-                  autoSelected: false,
-                  onChange: (option2) => setAppliedFilters((prev) => {
-                    const field2 = {
-                      column: col.name,
-                      operator: "=",
-                      value: option2.value,
-                      as: col.as
-                    };
-                    const index2 = prev.findIndex((f2) => f2.column === col.name);
-                    if (index2 === -1)
-                      return [...prev, field2];
-                    const updated = [...prev];
-                    updated[index2] = field2;
-                    return updated;
-                  }),
-                  isSearchEnabled: true,
-                  integrationId,
-                  integrationName,
-                  label: col.label || col.name
-                }) : null]
+                });
               })
-            });
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$s.AddFilter,
-          children: /* @__PURE__ */ jsx(AddFilter, {
-            columnList: filters2[0].columns.filter((col) => !col.isDefault),
-            setFilterList,
-            filterList
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$s.AddFilter,
+              children: /* @__PURE__ */ jsx(AddFilter, {
+                columnList: filters2[0].columns.filter((col) => !col.isDefault),
+                setFilterList,
+                filterList
+              })
+            }), /* @__PURE__ */ jsxs("div", {
+              className: styles$s.buttons,
+              children: [/* @__PURE__ */ jsxs(Button, {
+                type: "reset",
+                variant: "secondary",
+                className: styles$s.reset,
+                children: [/* @__PURE__ */ jsx(Icons, {
+                  name: "reset-icon",
+                  className: styles$s.applyIcon
+                }), " ", "Reset Filters"]
+              }), /* @__PURE__ */ jsx(Button, {
+                type: "submit",
+                variant: "primary",
+                className: styles$s.apply,
+                children: "Apply"
+              })]
+            })]
           })
-        }), /* @__PURE__ */ jsxs("div", {
-          className: styles$s.buttons,
-          children: [/* @__PURE__ */ jsxs(Button, {
-            type: "reset",
-            variant: "secondary",
-            className: styles$s.reset,
-            children: [/* @__PURE__ */ jsx(Icons, {
-              name: "reset-icon",
-              className: styles$s.applyIcon
-            }), " Reset Filters"]
-          }), /* @__PURE__ */ jsx(Button, {
-            type: "submit",
-            variant: "primary",
-            className: styles$s.apply,
-            children: "Apply"
-          })]
-        })]
-      })
+        })
+      }), /* @__PURE__ */ jsx(AppliedFilter, {
+        appliedFilter: appliedfilters2,
+        setAppliedFilters,
+        onChangeFilters: (updatedFilters) => onChangeFilters(updatedFilters)
+      })]
     })
   });
 };
@@ -97076,7 +97376,7 @@ const ChartTab = ({
             tableSettings,
             chartRef,
             tableName,
-            handleChartRightClick
+            handleChartClick: handleChartRightClick
           }), chartPopupChild]
         }) : /* @__PURE__ */ jsxs("div", {
           className: styles$j.metricChartEmpty,
@@ -97132,7 +97432,7 @@ const ChartTab = ({
           routeType: "internal"
         },
         chartRef,
-        handleChartRightClick
+        handleChartClick: handleChartRightClick
       }
     })]
   });
@@ -130166,60 +130466,60 @@ var styles$b = {
   "alt-container": "_alt-container_170un_49",
   fullscreen: fullscreen$2
 };
-const cardContainer = "_cardContainer_pprak_1";
-const listHeader = "_listHeader_pprak_9";
-const metricName = "_metricName_pprak_17";
-const metricTitle = "_metricTitle_pprak_25";
-const metricDescription = "_metricDescription_pprak_33";
-const popup = "_popup_pprak_41";
-const metricFilter$1 = "_metricFilter_pprak_49";
-const popupIcon = "_popupIcon_pprak_57";
-const popupMenu = "_popupMenu_pprak_65";
-const popupItem = "_popupItem_pprak_73";
-const popupItemIcon = "_popupItemIcon_pprak_81";
-const csvBtn = "_csvBtn_pprak_89";
-const deleteBtn = "_deleteBtn_pprak_97";
-const metricData = "_metricData_pprak_105";
-const metricTable = "_metricTable_pprak_113";
-const singleValueData = "_singleValueData_pprak_121";
-const singleValue = "_singleValue_pprak_121";
-const noData = "_noData_pprak_137";
-const noDataContent = "_noDataContent_pprak_145";
-const noDataText = "_noDataText_pprak_153";
-const loading$1 = "_loading_pprak_161";
-const features = "_features_pprak_169";
-const fullscreen$1 = "_fullscreen_pprak_177";
-const deleteModal = "_deleteModal_pprak_185";
-const cancelBtn = "_cancelBtn_pprak_193";
-const warningIcon = "_warningIcon_pprak_201";
-const downloadCsv = "_downloadCsv_pprak_209";
-const downloadCsvWrapper = "_downloadCsvWrapper_pprak_217";
-const downloadCsvHeader = "_downloadCsvHeader_pprak_225";
-const downloadCsvFooter = "_downloadCsvFooter_pprak_233";
-const downloadCsvCancelBtn = "_downloadCsvCancelBtn_pprak_241";
-const downloadCsvDisableBtn = "_downloadCsvDisableBtn_pprak_247";
-const downloadCsvNote = "_downloadCsvNote_pprak_253";
-const downloadCsvExpiredNote = "_downloadCsvExpiredNote_pprak_261";
-const downloadCsvNoteText = "_downloadCsvNoteText_pprak_267";
-const downloadCsvSuccessNote = "_downloadCsvSuccessNote_pprak_273";
-const downloadCsvSuccessText = "_downloadCsvSuccessText_pprak_279";
-const downloadUrlTimeline = "_downloadUrlTimeline_pprak_301";
-const timeLineItem = "_timeLineItem_pprak_309";
-const timeLineActiveIcon = "_timeLineActiveIcon_pprak_317";
-const timeLineIcon = "_timeLineIcon_pprak_325";
-const timeLineItemline = "_timeLineItemline_pprak_333";
-const downloadCsvLoading = "_downloadCsvLoading_pprak_341";
-const downloadCsvLoadingIcon = "_downloadCsvLoadingIcon_pprak_349";
-const downloadCsvLoadingText = "_downloadCsvLoadingText_pprak_357";
-const timeLineCheckedIcon = "_timeLineCheckedIcon_pprak_365";
-const timeLineCheckedIconWrapper = "_timeLineCheckedIconWrapper_pprak_373";
-const downloadCsvBackBtnWrapper = "_downloadCsvBackBtnWrapper_pprak_381";
-const downloadCsvBackBtnText = "_downloadCsvBackBtnText_pprak_389";
-const downloadCsvHeaderText = "_downloadCsvHeaderText_pprak_411";
-const downloadCsvTabContainer = "_downloadCsvTabContainer_pprak_419";
-const downloadCsvActiveTab = "_downloadCsvActiveTab_pprak_427";
-const downloadCsvTab = "_downloadCsvTab_pprak_419";
-const downloadCsvActiveTabText = "_downloadCsvActiveTabText_pprak_443";
+const cardContainer = "_cardContainer_sacr7_1";
+const listHeader = "_listHeader_sacr7_9";
+const metricName = "_metricName_sacr7_17";
+const metricTitle = "_metricTitle_sacr7_25";
+const metricDescription = "_metricDescription_sacr7_33";
+const popup = "_popup_sacr7_41";
+const metricFilter$1 = "_metricFilter_sacr7_49";
+const popupIcon = "_popupIcon_sacr7_57";
+const popupMenu = "_popupMenu_sacr7_65";
+const popupItem = "_popupItem_sacr7_73";
+const popupItemIcon = "_popupItemIcon_sacr7_81";
+const csvBtn = "_csvBtn_sacr7_89";
+const deleteBtn = "_deleteBtn_sacr7_97";
+const metricData = "_metricData_sacr7_105";
+const metricTable = "_metricTable_sacr7_113";
+const singleValueData = "_singleValueData_sacr7_121";
+const singleValue = "_singleValue_sacr7_121";
+const noData = "_noData_sacr7_137";
+const noDataContent = "_noDataContent_sacr7_145";
+const noDataText = "_noDataText_sacr7_153";
+const loading$1 = "_loading_sacr7_161";
+const features = "_features_sacr7_169";
+const fullscreen$1 = "_fullscreen_sacr7_177";
+const deleteModal = "_deleteModal_sacr7_185";
+const cancelBtn = "_cancelBtn_sacr7_193";
+const warningIcon = "_warningIcon_sacr7_201";
+const downloadCsv = "_downloadCsv_sacr7_209";
+const downloadCsvWrapper = "_downloadCsvWrapper_sacr7_217";
+const downloadCsvHeader = "_downloadCsvHeader_sacr7_225";
+const downloadCsvFooter = "_downloadCsvFooter_sacr7_233";
+const downloadCsvCancelBtn = "_downloadCsvCancelBtn_sacr7_241";
+const downloadCsvDisableBtn = "_downloadCsvDisableBtn_sacr7_247";
+const downloadCsvNote = "_downloadCsvNote_sacr7_253";
+const downloadCsvExpiredNote = "_downloadCsvExpiredNote_sacr7_261";
+const downloadCsvNoteText = "_downloadCsvNoteText_sacr7_267";
+const downloadCsvSuccessNote = "_downloadCsvSuccessNote_sacr7_273";
+const downloadCsvSuccessText = "_downloadCsvSuccessText_sacr7_279";
+const downloadUrlTimeline = "_downloadUrlTimeline_sacr7_301";
+const timeLineItem = "_timeLineItem_sacr7_309";
+const timeLineActiveIcon = "_timeLineActiveIcon_sacr7_317";
+const timeLineIcon = "_timeLineIcon_sacr7_325";
+const timeLineItemline = "_timeLineItemline_sacr7_333";
+const downloadCsvLoading = "_downloadCsvLoading_sacr7_341";
+const downloadCsvLoadingIcon = "_downloadCsvLoadingIcon_sacr7_349";
+const downloadCsvLoadingText = "_downloadCsvLoadingText_sacr7_357";
+const timeLineCheckedIcon = "_timeLineCheckedIcon_sacr7_365";
+const timeLineCheckedIconWrapper = "_timeLineCheckedIconWrapper_sacr7_373";
+const downloadCsvBackBtnWrapper = "_downloadCsvBackBtnWrapper_sacr7_381";
+const downloadCsvBackBtnText = "_downloadCsvBackBtnText_sacr7_389";
+const downloadCsvHeaderText = "_downloadCsvHeaderText_sacr7_411";
+const downloadCsvTabContainer = "_downloadCsvTabContainer_sacr7_419";
+const downloadCsvActiveTab = "_downloadCsvActiveTab_sacr7_427";
+const downloadCsvTab = "_downloadCsvTab_sacr7_419";
+const downloadCsvActiveTabText = "_downloadCsvActiveTabText_sacr7_443";
 var styles$a = {
   cardContainer,
   listHeader,
@@ -130258,8 +130558,8 @@ var styles$a = {
   downloadCsvNoteText,
   downloadCsvSuccessNote,
   downloadCsvSuccessText,
-  "tab-border-bottom": "_tab-border-bottom_pprak_285",
-  "download-info-text": "_download-info-text_pprak_293",
+  "tab-border-bottom": "_tab-border-bottom_sacr7_285",
+  "download-info-text": "_download-info-text_sacr7_293",
   downloadUrlTimeline,
   timeLineItem,
   timeLineActiveIcon,
@@ -130574,16 +130874,6 @@ const evaLayersFill = (props) => /* @__PURE__ */ jsx("svg", {
     })
   })
 });
-const fluentMdl2DrillDown = (props) => /* @__PURE__ */ jsx("svg", {
-  viewBox: "0 0 2048 2048",
-  width: "1.2em",
-  height: "1.2em",
-  ...props,
-  children: /* @__PURE__ */ jsx("path", {
-    fill: "currentColor",
-    d: "M1024 0q141 0 272 36t245 103t207 160t160 208t103 245t37 272q0 141-36 272t-103 245t-160 207t-208 160t-245 103t-272 37q-141 0-272-36t-245-103t-207-160t-160-208t-103-244t-37-273q0-141 36-272t103-245t160-207t208-160T751 37t273-37zm0 1920q123 0 237-32t214-90t182-141t140-181t91-214t32-238q0-123-32-237t-90-214t-141-182t-181-140t-214-91t-238-32q-123 0-237 32t-214 90t-182 141t-140 181t-91 214t-32 238q0 123 32 237t90 214t141 182t181 140t214 91t238 32zm531-1005l90 90l-620 622l-622-622l90-90l467 467V384h129v997l466-466z"
-  })
-});
 const mdiExternalLink = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
   width: "1.2em",
@@ -130603,7 +130893,6 @@ const ChartPopup = ({
   value,
   columnName,
   getUnderlyingData,
-  drilldown: drilldown2,
   clickBehaviourConfigs
 }) => {
   const [isShowUnderlyingData, setShowUnderlyingData] = useState(false);
@@ -130644,18 +130933,6 @@ const ChartPopup = ({
                 styleClass: "font-14",
                 children: "View underlying data"
               })]
-            }), drilldown2 && /* @__PURE__ */ jsxs(Button, {
-              variant: "custom",
-              type: "button",
-              className: styles$8.chartOptionBtn,
-              onClick: () => drilldown2(),
-              children: [/* @__PURE__ */ jsx(fluentMdl2DrillDown, {
-                className: styles$8.popupItemIcon
-              }), /* @__PURE__ */ jsx(Text, {
-                variant: "p",
-                styleClass: "font-14",
-                children: "Drill Down"
-              })]
             }), clickBehaviourConfigs.isEnable && /* @__PURE__ */ jsxs(Button, {
               variant: "custom",
               type: "button",
@@ -130942,12 +131219,13 @@ const MetricCard = ({
   };
   const [isShowChartPopup, setShowChartPopup] = useState(false);
   const [chartParams, setChartParams] = useState();
-  const handleChartRightClick = (params) => {
+  const handleChartClick2 = (params) => {
     if (rlsConditions.length && rlsConditions[0].datatype === "date") {
       return;
     }
+    if (params.event)
+      params.event.event.preventDefault();
     setChartParams(params);
-    setShowChartPopup(true);
   };
   const {
     getUnderlyingData
@@ -131033,7 +131311,7 @@ const MetricCard = ({
                 enableSaveAs: true,
                 chartClickConfig: clickBehaviourConfigs.chart,
                 chartRef,
-                handleChartRightClick
+                handleChartClick: handleChartClick2
               }),
               children: [/* @__PURE__ */ jsx(Icons, {
                 name: "fullscreen-icon",
@@ -131127,7 +131405,6 @@ const MetricCard = ({
           value: chartParams == null ? void 0 : chartParams.name,
           columnName,
           getUnderlyingData,
-          drilldown: (drillDownSettings == null ? void 0 : drillDownSettings.isEnableGroupBy) ? onDrillDown : void 0,
           clickBehaviourConfigs: clickBehaviourConfigs.chart
         }), (dataDb == null ? void 0 : dataDb.length) ? /* @__PURE__ */ jsx(MetricChart, {
           labels: labels2,
@@ -131150,7 +131427,9 @@ const MetricCard = ({
           backGroundColor,
           chartClickConfig: clickBehaviourConfigs.chart,
           chartRef,
-          handleChartRightClick
+          handleChartClick: handleChartClick2,
+          drilldown: (drillDownSettings == null ? void 0 : drillDownSettings.isEnableGroupBy) ? onDrillDown : void 0,
+          setShowChartPopup
         }) : null]
       })]
     })
@@ -132613,65 +132892,6 @@ const MetricTable = ({
     })]
   });
 };
-const AppliedFilter = ({
-  appliedFilter,
-  setAppliedFilters,
-  onRemove
-}) => {
-  return /* @__PURE__ */ jsx("div", {
-    className: styles$s.appliedfilters,
-    children: appliedFilter.map((filter2) => /* @__PURE__ */ jsxs("div", {
-      className: styles$s.appliedFilterTag,
-      children: [/* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        className: styles$s.textBold,
-        children: filter2.column
-      }), /* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        children: "is"
-      }), filter2.as !== "string" && filter2.as !== "boolean" && filter2.as !== "default" && /* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        children: "between"
-      }), /* @__PURE__ */ jsx(Text, {
-        variant: "p",
-        styleClass: "font-14",
-        className: styles$s.textBold,
-        children: Array.isArray(filter2.value) ? filter2.as === "string" ? filter2.value.join(", ") : filter2.value.join(" & ") : typeof filter2.value === "string" && filter2.as === "number" ? filter2.value.replace("AND", "&") : typeof filter2.value === "string" && filter2.as === "date" ? filter2.value.split(" ").slice(2).join(" ").replace("AND", "&") : filter2.value
-      }), /* @__PURE__ */ jsx(Button, {
-        variant: "secondary",
-        type: "button",
-        onClick: () => {
-          setAppliedFilters((prev) => prev.filter((a4) => a4.column !== filter2.column));
-          const filterColumns = appliedFilter.filter((c3) => c3.column !== filter2.column).map((field2) => {
-            const col = {
-              column: field2.column,
-              operator: field2.operator,
-              as: field2.as
-            };
-            const formattedValue = field2.as === "date" || field2.as === "number" ? field2.value : getFormattedFilterValue({
-              operator: field2.operator,
-              value: field2.value
-            });
-            if (formattedValue != null) {
-              Object.assign(col, {
-                ...col,
-                value: formattedValue
-              });
-            }
-            return col;
-          });
-          onRemove(filterColumns);
-        },
-        children: /* @__PURE__ */ jsx(Icons, {
-          name: "close-icon"
-        })
-      })]
-    }))
-  });
-};
 var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Button,
@@ -133329,7 +133549,6 @@ const EmbeddedDashboard = e__default.memo(({
     data,
     isLoading
   } = useDashboardContext();
-  const [appliedfilters2, setAppliedFilters] = useState([]);
   const [isShowMetricCreateModal, setShowMetricCreateModal] = useState(false);
   const [globalFilters, setGlobalFilters] = useState({
     tableName: "",
@@ -133351,7 +133570,6 @@ const EmbeddedDashboard = e__default.memo(({
     return [adminThemeData == null ? void 0 : adminThemeData.themes[0], colors2];
   }, [adminThemeData == null ? void 0 : adminThemeData.themes[0]]);
   useApplyAdminTheme(adminTheme);
-  const globalFilterRef = useRef(null);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
       className: styles$M["embedDashboard-container"],
@@ -133392,46 +133610,13 @@ const EmbeddedDashboard = e__default.memo(({
           })]
         }), /* @__PURE__ */ jsxs("div", {
           className: styles$M["embedDashboard-wrapper"],
-          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsx(PopoverMenu, {
-              button: /* @__PURE__ */ jsxs("div", {
-                className: styles$M.filterButton,
-                ref: globalFilterRef,
-                children: [/* @__PURE__ */ jsxs("div", {
-                  className: styles$M.filterText,
-                  children: [/* @__PURE__ */ jsx(Icons, {
-                    name: "filter-icon"
-                  }), " Filters"]
-                }), appliedfilters2.length === 0 ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx("span", {
-                  className: styles$M.filterLength,
-                  children: appliedfilters2.length
-                })]
-              }),
-              menuClass: "w-[400px] ml-[40px]",
-              position: "bottom-left",
-              children: /* @__PURE__ */ jsx(GlobalFilters, {
-                companyId: data.companyId,
-                externalDashboardId: data.externalDashboard.id,
-                filters: data.externalDashboard.filters,
-                onApply: (values) => {
-                  var _a3;
-                  setGlobalFilters(values);
-                  (_a3 = globalFilterRef.current) == null ? void 0 : _a3.click();
-                },
-                appliedfilters: appliedfilters2,
-                setAppliedFilters
-              })
-            }), /* @__PURE__ */ jsx(AppliedFilter, {
-              appliedFilter: appliedfilters2,
-              setAppliedFilters,
-              onRemove: (filters2) => {
-                var _a3, _b3;
-                return setGlobalFilters({
-                  tableName: (_b3 = (_a3 = data.externalDashboard) == null ? void 0 : _a3.filters) == null ? void 0 : _b3[0].tableName,
-                  filters: filters2
-                });
-              }
-            })]
+          children: [data.externalDashboard.filters.length ? /* @__PURE__ */ jsx(GlobalFilters, {
+            companyId: data.companyId,
+            externalDashboardId: data.externalDashboard.id,
+            filters: data.externalDashboard.filters,
+            onApply: (values) => {
+              setGlobalFilters(values);
+            }
           }) : null, /* @__PURE__ */ jsx(ExternalMetricList, {
             client: data.clientId,
             isLiveMode: data.isLiveMode,