@databrainhq/plugin 0.15.19 → 0.15.20

package/dist/webcomponents.es.js

@@ -2197,7 +2197,7 @@ const DEFAULT_CHART_SETTINGS = {
     show: false,
     position: "hidden",
     showDimension: false,
-    truncateLabelValue: 14,
+    truncateLabelValue: 22,
     showLabelLine: false,
     isEnableValueSummation: false,
     truncateLabel: true,
@@ -97447,15 +97447,104 @@ const addPrefixAndSuffix = (val, prefix = "", suffix = "") => {
   return `${prefix}${val}${suffix}`;
 };
 const dataZoomFormatter = (chartZoom) => {
+  const isZoomXaxis = (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "x" || (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "xy";
+  const isZoomYaxis = (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "y" || (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "xy";
+  const commonConfig = {
+    borderColor: "transparent",
+    backgroundColor: "#EEEEEE",
+    fillerColor: "#5C5C5C",
+    handleIcon: "path://M-9.5,0a9.5,9.5,0,1,1,19,0a9.5,9.5,0,1,1,-19,0z",
+    handleSize: 12,
+    handleStyle: {
+      color: "#ffffff",
+      borderColor: "#5C5C5C",
+      borderWidth: 1,
+      shadowBlur: 2,
+      shadowColor: "rgba(0, 0, 0, 0.1)",
+      shadowOffsetX: 1,
+      shadowOffsetY: 1
+    },
+    moveHandleStyle: {
+      color: "#F4F4F4"
+    },
+    selectedDataBackground: {
+      lineStyle: {
+        color: "transparent"
+      },
+      areaStyle: {
+        color: "rgba(220, 220, 220, 0.2)"
+      }
+    },
+    emphasis: {
+      handleSize: 16,
+      handleStyle: {
+        borderColor: "#5C5C5C",
+        color: "#F4F4F4"
+      }
+    },
+    dataBackground: {
+      lineStyle: {
+        color: "transparent"
+      },
+      areaStyle: {
+        color: "transparent"
+      }
+    },
+    brushSelect: false,
+    zoomLock: false,
+    preventDefaultMouseMove: false,
+    textStyle: {
+      color: "rgba(0, 0, 0, 0.6)"
+    },
+    rangeMode: ["value", "value"]
+  };
+  const verticalSliderConfig = {
+    type: "slider",
+    yAxis: [0],
+    show: chartZoom == null ? void 0 : chartZoom.isZoomEnabled,
+    startValue: 0,
+    orient: "vertical",
+    endValue: 5,
+    width: 8,
+    left: 25,
+    ...commonConfig
+  };
+  const horizontalSliderConfig = {
+    type: "slider",
+    xAxis: [0],
+    show: chartZoom == null ? void 0 : chartZoom.isZoomEnabled,
+    startValue: 0,
+    orient: "horizontal",
+    endValue: 20,
+    height: 8,
+    bottom: 10,
+    ...commonConfig
+  };
+  const insideZoomConfigX = {
+    type: "inside",
+    xAxisIndex: isZoomXaxis ? [0] : "none",
+    yAxisIndex: "none",
+    start: 0,
+    startValue: 0,
+    endValue: isZoomXaxis ? 20 : void 0,
+    disabled: !(chartZoom == null ? void 0 : chartZoom.isZoomEnabled),
+    zoomOnMouseWheel: (chartZoom == null ? void 0 : chartZoom.zoomOnMouseWheel) || "ctrl"
+  };
+  const insideZoomConfigY = {
+    type: "inside",
+    xAxisIndex: "none",
+    yAxisIndex: isZoomYaxis ? [0] : "none",
+    start: 0,
+    startValue: 0,
+    endValue: isZoomYaxis ? 5 : void 0,
+    disabled: !(chartZoom == null ? void 0 : chartZoom.isZoomEnabled),
+    zoomOnMouseWheel: (chartZoom == null ? void 0 : chartZoom.zoomOnMouseWheel) || "ctrl"
+  };
   return [
-    {
-      type: "inside",
-      xAxisIndex: (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "x" || (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "xy" ? [0] : "none",
-      yAxisIndex: (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "y" || (chartZoom == null ? void 0 : chartZoom.zoomAxis) === "xy" ? [0] : "none",
-      start: 0,
-      disabled: !(chartZoom == null ? void 0 : chartZoom.isZoomEnabled),
-      zoomOnMouseWheel: (chartZoom == null ? void 0 : chartZoom.zoomOnMouseWheel) || "ctrl"
-    }
+    isZoomXaxis && insideZoomConfigX,
+    isZoomYaxis && insideZoomConfigY,
+    isZoomXaxis && horizontalSliderConfig,
+    isZoomYaxis && verticalSliderConfig
   ];
 };
 const findLegendPosition = (val) => {
@@ -97541,6 +97630,7 @@ const getLegendData = ({
   const datasets = getDatasets(datasetsParams);
   switch (chartOptions2.chartType) {
     case CHART_TYPES.line:
+    case CHART_TYPES.area:
       return chartOptions2.isMultiDimension && chartOptions2.seriesField !== "ungrouped" ? (_q = getSeriesData$2(seriesDataParams)) == null ? void 0 : _q.map(
         (d3) => `${d3.name}` || "line"
       ) : datasets == null ? void 0 : datasets.map((val) => {
@@ -97559,7 +97649,6 @@ const getLegendData = ({
         var _a3;
         return ((_a3 = chartOptions2 == null ? void 0 : chartOptions2.customSettings) == null ? void 0 : _a3.showFullStacked) ? `percentage of ${val.label}` : val.label;
       });
-    case CHART_TYPES.area:
     case CHART_TYPES.stackedArea:
     case CHART_TYPES.boxplot:
     case CHART_TYPES.bubble:
@@ -97760,8 +97849,9 @@ const getChartOptions = ({
     seriesType: ((_P = chartOptions2.yAxisList) == null ? void 0 : _P.map((column2) => ({ column: column2, type: "bar" }))) || [],
     ...chartOptions2.timeSeriesSettings
   };
+  const colorArr = [...gradientArr || [], ...colorPalette2 || []];
   const option3 = {
-    ...(colors2 == null ? void 0 : colors2.length) || gradientArr.length ? { color: [...gradientArr || [], ...colorPalette2 || []] } : {}
+    ...(colors2 == null ? void 0 : colors2.length) || gradientArr.length ? { color: colorArr } : {}
   };
   const customData = (() => {
     const datasets = getDatasets({ ...getChartAttributesArgs });
@@ -98593,6 +98683,18 @@ const getChartOptions = ({
         (_Jb = getDatasets({ ...getChartAttributesArgs })) == null ? void 0 : _Jb.map(
           (obj) => Object.assign(obj, { fill: true })
         );
+        const xAxisData = getXaxisData$1({
+          data: finalData,
+          isGroupBy,
+          xAxis,
+          isGroupXAxis: !!(chartOptions2 == null ? void 0 : chartOptions2.isGroupXAxis)
+        });
+        const legendData = getChartLengendData({
+          groupByColumnUniqueValue,
+          isGroupBy,
+          isShowPercentageFullStack,
+          yAxisList
+        });
         Object.assign(option3, {
           ...option3,
           ...defaultOptions2,
@@ -98627,16 +98729,13 @@ const getChartOptions = ({
           },
           legend: {
             ...chartLegendSettings,
-            data: getLegendData({
-              chartOptions: chartOptions2,
-              data
-            })
+            data: legendData
           },
           xAxis: [
             {
               type: "category",
               boundaryGap: false,
-              data: getLabels({ ...getChartAttributesArgs }),
+              data: xAxisData,
               ...horizontalAxisSettings,
               axisLabel: {
                 ...horizontalAxisLabelSettings,
@@ -98714,36 +98813,47 @@ const getChartOptions = ({
               }
             }
           ],
-          series: (_Mb = getDatasets({ ...getChartAttributesArgs })) == null ? void 0 : _Mb.map(
-            (item) => {
-              var _a3, _b3, _c3;
-              return {
-                data: item.data,
-                type: "line",
-                name: item.label,
-                areaStyle: {},
-                emphasis: {
-                  focus: "series"
-                },
-                ...labelFormatting(),
-                label: {
-                  show: !!((_a3 = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _a3.position) || labelSettings.show,
-                  position: ((_b3 = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _b3.position) || labelSettings.position,
-                  formatter(d3) {
-                    return addPrefixAndSuffix(
-                      numberFormatter(d3.data, customSettings.numberFormatter),
-                      customSettings.labelPrefix,
-                      customSettings.labelSuffix
-                    );
-                  }
-                },
-                showBackground: backGroundColor.show,
-                backgroundStyle: {
-                  color: ((_c3 = chartOptions2.customSettings) == null ? void 0 : _c3.isShowBarGradient) ? barGradient : "rgba(180, 180, 180, 0.2)"
+          series: (_Mb = getChartDataset({
+            data: finalData,
+            groupByColumnUniqueValue,
+            isGroupBy,
+            isShowPercentageFullStack,
+            seriesField,
+            xAxis,
+            xAxisData,
+            yAxisList,
+            groupXAxis: {
+              isGroupXAxis: !!(chartOptions2 == null ? void 0 : chartOptions2.isGroupXAxis),
+              Aggregate: "SUM"
+            }
+          })) == null ? void 0 : _Mb.map((item) => {
+            var _a3, _b3, _c3;
+            return {
+              data: item.data,
+              type: "line",
+              name: item.label,
+              areaStyle: {},
+              emphasis: {
+                focus: "series"
+              },
+              ...labelFormatting(),
+              label: {
+                show: !!((_a3 = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _a3.position) || labelSettings.show,
+                position: ((_b3 = chartAppearance == null ? void 0 : chartAppearance.chartLabel) == null ? void 0 : _b3.position) || labelSettings.position,
+                formatter(d3) {
+                  return addPrefixAndSuffix(
+                    numberFormatter(d3.data, customSettings.numberFormatter),
+                    customSettings.labelPrefix,
+                    customSettings.labelSuffix
+                  );
                 }
-              };
-            }
-          )
+              },
+              showBackground: backGroundColor.show,
+              backgroundStyle: {
+                color: ((_c3 = chartOptions2.customSettings) == null ? void 0 : _c3.isShowBarGradient) ? barGradient : "rgba(180, 180, 180, 0.2)"
+              }
+            };
+          })
         });
         break;
       }
@@ -99281,7 +99391,7 @@ const getChartOptions = ({
                   axisLine: {
                     show: ((_d2 = chartAppearance == null ? void 0 : chartAppearance.verticalAxis) == null ? void 0 : _d2.hideAxisLines) ? !((_e3 = chartAppearance == null ? void 0 : chartAppearance.verticalAxis) == null ? void 0 : _e3.hideAxisLines) : !((_f2 = chartOptions2.customSettings) == null ? void 0 : _f2.hideYAxisLines),
                     lineStyle: {
-                      color: colors2 == null ? void 0 : colors2[chartOptions2.comboBarList.length + index2]
+                      color: colorArr == null ? void 0 : colorArr[chartOptions2.comboBarList.length + index2]
                     }
                   },
                   axisLabel: {
@@ -99354,7 +99464,7 @@ const getChartOptions = ({
               axisLine: {
                 show: ((_d2 = chartAppearance == null ? void 0 : chartAppearance.verticalAxis) == null ? void 0 : _d2.hideAxisLines) ? (_e3 = chartAppearance == null ? void 0 : chartAppearance.verticalAxis) == null ? void 0 : _e3.hideAxisLines : !((_f2 = chartOptions2.customSettings) == null ? void 0 : _f2.hideYAxisLines),
                 lineStyle: {
-                  color: colors2 == null ? void 0 : colors2[index2]
+                  color: colorArr == null ? void 0 : colorArr[index2]
                 }
               },
               axisLabel: {
@@ -150202,9 +150312,14 @@ const useMetricCard = ({
   isFrontendApp,
   guestToken,
   encryptedClientId,
-  workspaceId
+  workspaceId,
+  metricStore,
+  setMetricStore,
+  summarizeMetricMutation
 }) => {
   var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w;
+  const [elementSummary, setElementSummary] = useState("");
+  const [isLoadingSummary, setLoadingSummary] = useState(false);
   const containerRef = useRef(null);
   const [tableLimit, setTableLimit] = useState({
     limit: 10,
@@ -151107,7 +151222,68 @@ const useMetricCard = ({
     (_r = chartSettings2.timeSeriesSettings) == null ? void 0 : _r.seriesType[0],
     (_s = chartSettings2.timeSeriesSettings) == null ? void 0 : _s.groupBySettings.fillXAxis
   ]);
+  useEffect(() => {
+    if (isQueryLoading) {
+      setMetricStore == null ? void 0 : setMetricStore((prevMap) => {
+        const newMap = new Map(prevMap);
+        newMap.set(metric2.id, {
+          data: [],
+          isLoading: isQueryLoading
+        });
+        return newMap;
+      });
+    }
+    if (!!(metricdata == null ? void 0 : metricdata.data) && !!metricStore) {
+      setMetricStore == null ? void 0 : setMetricStore((prevMap) => {
+        const newMap = new Map(prevMap);
+        newMap.set(metric2.id, {
+          data: metricdata == null ? void 0 : metricdata.data,
+          isLoading: isQueryLoading
+        });
+        return newMap;
+      });
+    }
+  }, [metricdata == null ? void 0 : metricdata.data, isQueryLoading]);
+  const isMetricListLoading = () => {
+    var _a3, _b3, _c3;
+    const metricListLoading = ((_c3 = (_b3 = (_a3 = metric2 == null ? void 0 : metric2.elementSettings) == null ? void 0 : _a3.summary) == null ? void 0 : _b3.metricList) == null ? void 0 : _c3.map(
+      (m4) => {
+        var _a4;
+        return (_a4 = metricStore == null ? void 0 : metricStore.get(m4 == null ? void 0 : m4.value)) == null ? void 0 : _a4.isLoading;
+      }
+    )) || [];
+    return metricListLoading.some((m4) => m4 === true);
+  };
+  useEffect(() => {
+    var _a3, _b3, _c3, _d2, _e3, _f2, _g2;
+    if (!!((_b3 = (_a3 = metric2 == null ? void 0 : metric2.elementSettings) == null ? void 0 : _a3.summary) == null ? void 0 : _b3.metricList) && Boolean(metricStore == null ? void 0 : metricStore.get(metric2.id))) {
+      if (!isMetricListLoading()) {
+        setElementSummary("");
+        setLoadingSummary(() => true);
+        summarizeMetricMutation == null ? void 0 : summarizeMetricMutation.mutate(
+          {
+            metricData: (_e3 = (_d2 = (_c3 = metric2 == null ? void 0 : metric2.elementSettings) == null ? void 0 : _c3.summary) == null ? void 0 : _d2.metricList) == null ? void 0 : _e3.map(
+              (m4) => metricStore == null ? void 0 : metricStore.get(m4 == null ? void 0 : m4.value)
+            ),
+            summaryPrompt: (_g2 = (_f2 = metric2 == null ? void 0 : metric2.elementSettings) == null ? void 0 : _f2.summary) == null ? void 0 : _g2.summaryPrompt
+          },
+          {
+            onSuccess: (data) => {
+              setLoadingSummary((prev) => false);
+              setElementSummary(data.summary);
+            },
+            onSettled: () => {
+              setLoadingSummary((prev) => false);
+            }
+          }
+        );
+      }
+    }
+  }, [metric2 == null ? void 0 : metric2.elementSettings, isMetricListLoading()]);
   return {
+    elementSummary,
+    isLoadingSummary,
+    isMetricListLoading,
     onDrillLevelClick,
     onDrillDown,
     handleChartClick,
@@ -214649,7 +214825,7 @@ const Modal = ({
       onMouseDown: handleMouseDownClick,
       onMouseUp: handleMouseUpClick,
       ref: modalRef,
-      style: { zIndex },
+      style: zIndex ? { zIndex } : {},
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
@@ -215169,7 +215345,10 @@ const NoDataLoading = React__default.memo(
     ] });
   }
 );
-const ElementCard = ({ elementSettings }) => {
+const ElementCard = ({
+  elementSettings = { text: "", targetWord: "", link: "" },
+  elementSummary = ""
+}) => {
   const redirectToAnotherPage = () => {
     const url = elementSettings.link || "";
     if (elementSettings.isOpenInNewTab) {
@@ -215209,7 +215388,13 @@ const ElementCard = ({ elementSettings }) => {
       {
         className: "ql-editor dbn-w-full dbn-h-full",
         onClick: elementSettings.link ? redirectToAnotherPage : void 0,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dbn-w-full dbn-h-full", dangerouslySetInnerHTML: { __html: text2 } })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "dbn-prose dbn-w-full dbn-h-full",
+            dangerouslySetInnerHTML: { __html: elementSummary || text2 }
+          }
+        )
       }
     );
   };
@@ -215399,9 +215584,12 @@ const MetricCard = ({
   isShadowDisableOnHover,
   isAllowedToSeeUnderlyingData,
   noDataImg,
-  metricCardColor
+  metricCardColor,
+  metricStore,
+  setMetricStore,
+  summarizeMetricMutation
 }) => {
-  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja;
+  var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea;
   const globalFilters = useMemo(() => {
     var _a3;
     return {
@@ -215465,8 +215653,12 @@ const MetricCard = ({
     isInavlidForSort,
     onAddComparison,
     groupedRlsConditions,
-    dataMartRelationships
+    dataMartRelationships,
+    elementSummary,
+    isLoadingSummary
   } = useMetricCard({
+    metricStore,
+    setMetricStore,
     metric: metricItem,
     clientId: client2,
     globalFilters,
@@ -215481,7 +215673,8 @@ const MetricCard = ({
     isFrontendApp,
     guestToken,
     encryptedClientId: encryptedClient,
-    workspaceId
+    workspaceId,
+    summarizeMetricMutation
   });
   const [isShowFullScreen, setShowFullScreen] = useState(false);
   const [hoveredCard, setHoveredCard] = useState("");
@@ -215755,10 +215948,8 @@ const MetricCard = ({
                       children: ((_t2 = chartSettings2 == null ? void 0 : chartSettings2.metricCardSettings) == null ? void 0 : _t2.isDisableTitle) ? hoveredCard === (metricItem == null ? void 0 : metricItem.id) ? renderHeaderName(metricItem.name) : null : renderHeaderName(metricItem.name)
                     }
                   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: ((_u = chartSettings2 == null ? void 0 : chartSettings2.metricCardSettings) == null ? void 0 : _u.isDisableTitle) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    Button,
+                    "div",
                     {
-                      variant: "popover",
-                      type: "button",
                       onClick: () => {
                         var _a3, _b3;
                         if (metricItem.isMetric) {
@@ -215772,10 +215963,10 @@ const MetricCard = ({
                             onMaximize == null ? void 0 : onMaximize(metricItem, param, appFilters);
                         }
                       },
-                      disabled: isDisableCardClick,
                       className: `${styles$x.metricTitle} dbn-metric-card-title ${!onMaximize && !((_w = (_v = metricItem == null ? void 0 : metricItem.clickActions) == null ? void 0 : _v.card) == null ? void 0 : _w.isEnable) ? "dbn-cursor-auto" : ""} ${((_x = chartSettings2 == null ? void 0 : chartSettings2.metricCardSettings) == null ? void 0 : _x.isEnableTitleWrap) ? styles$x.textWrap : styles$x.truncate}`,
                       style: {
-                        textAlign: ((_y = metricItem == null ? void 0 : metricItem.elementSettings) == null ? void 0 : _y.titleAlignment) || "left"
+                        textAlign: ((_y = metricItem == null ? void 0 : metricItem.elementSettings) == null ? void 0 : _y.titleAlignment) || "left",
+                        pointerEvents: isDisableCardClick ? "none" : void 0
                       },
                       children: metricItem.name
                     }
@@ -216348,17 +216539,7 @@ const MetricCard = ({
                         onMaximize: disableActions || !onMaximize ? void 0 : () => {
                           onMaximize == null ? void 0 : onMaximize(metricItem, param, appFilters);
                         },
-                        chartOptions: ((_U = (_T = chartSettingOptions.customSettings) == null ? void 0 : _T.chartZoom) == null ? void 0 : _U.isZoomEnabled) ? {
-                          ...chartSettingOptions,
-                          customSettings: {
-                            ...chartSettingOptions.customSettings,
-                            chartZoom: {
-                              ...(_V = chartSettingOptions.customSettings) == null ? void 0 : _V.chartZoom,
-                              zoomAxis: isEnableZoom ? (_X = (_W = chartSettingOptions.customSettings) == null ? void 0 : _W.chartZoom) == null ? void 0 : _X.zoomAxis : "none",
-                              zoomOnMouseWheel: false
-                            }
-                          }
-                        } : chartSettingOptions,
+                        chartOptions: chartSettingOptions,
                         events: disableActions ? void 0 : {
                           click: (params, rowFilters) => {
                             var _a3, _b3, _c3, _d2, _e3, _f2, _g2;
@@ -216419,8 +216600,15 @@ const MetricCard = ({
               ]
             }
           ),
-          !metricItem.isMetric && !(chartSettings2 == null ? void 0 : chartSettings2.chartType) && ((_Z = (_Y = metricItem == null ? void 0 : metricItem.elementSettings) == null ? void 0 : _Y.textBox) == null ? void 0 : _Z.text) && !isQueryLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(ElementCard, { elementSettings: (__ = metricItem == null ? void 0 : metricItem.elementSettings) == null ? void 0 : __.textBox }) : null,
-          ((_$ = downloadMetrics == null ? void 0 : downloadMetrics.find((m4) => m4.id === (metricItem == null ? void 0 : metricItem.id))) == null ? void 0 : _$.isInProgress) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { text: "Download is in progress", variant: "primary" }) : null,
+          !metricItem.isMetric && !(chartSettings2 == null ? void 0 : chartSettings2.chartType) && !!(((_U = (_T = metricItem == null ? void 0 : metricItem.elementSettings) == null ? void 0 : _T.textBox) == null ? void 0 : _U.text) || elementSummary) && !isQueryLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ElementCard,
+            {
+              elementSettings: (_V = metricItem == null ? void 0 : metricItem.elementSettings) == null ? void 0 : _V.textBox,
+              elementSummary
+            }
+          ) : null,
+          isLoadingSummary ? /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonLoader, { height: "full" }) : null,
+          ((_W = downloadMetrics == null ? void 0 : downloadMetrics.find((m4) => m4.id === (metricItem == null ? void 0 : metricItem.id))) == null ? void 0 : _W.isInProgress) ? /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { text: "Download is in progress", variant: "primary" }) : null,
           onMaximize && (metricItem == null ? void 0 : metricItem.isMetric) && !disableActions && isShowFullScreen && !(chartSettings2.chartType === CHART_TYPES.table) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
@@ -216445,14 +216633,14 @@ const MetricCard = ({
         ]
       }
     ),
-    ((_aa = Object.keys(appearanceOptions || {})) == null ? void 0 : _aa.length) && [BOTTOM_LEFT, BOTTOM_RIGHT].includes(
+    ((_X = Object.keys(appearanceOptions || {})) == null ? void 0 : _X.length) && [BOTTOM_LEFT, BOTTOM_RIGHT].includes(
       (appearanceOptions == null ? void 0 : appearanceOptions.appearanceOptionsPosition) || ""
     ) ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
         className: `dbn-w-full dbn-flex dbn-flex-wrap dbn-gap-4 ${(appearanceOptions == null ? void 0 : appearanceOptions.appearanceOptionsPosition) === BOTTOM_LEFT ? "dbn-justify-start" : "dbn-justify-end"}`,
         children: [
-          ((_ba = appearanceOptions == null ? void 0 : appearanceOptions.cumulativeBar) == null ? void 0 : _ba.isEnabled) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "dbn-flex dbn-gap-1 dbn-items-center", children: [
+          ((_Y = appearanceOptions == null ? void 0 : appearanceOptions.cumulativeBar) == null ? void 0 : _Y.isEnabled) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "dbn-flex dbn-gap-1 dbn-items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               InfoTooltip,
               {
@@ -216463,7 +216651,7 @@ const MetricCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               Switch,
               {
-                enabled: (_ca = chartSettings2.customSettings) == null ? void 0 : _ca.cumulativeBar,
+                enabled: (_Z = chartSettings2.customSettings) == null ? void 0 : _Z.cumulativeBar,
                 name: "cumulative",
                 onChange: () => setChartSettings((prev) => {
                   var _a3;
@@ -216475,11 +216663,11 @@ const MetricCard = ({
                     }
                   };
                 }),
-                placeholder: ((_da = appearanceOptions == null ? void 0 : appearanceOptions.cumulativeBar) == null ? void 0 : _da.label) || "Cumulative"
+                placeholder: ((__ = appearanceOptions == null ? void 0 : appearanceOptions.cumulativeBar) == null ? void 0 : __.label) || "Cumulative"
               }
             )
           ] }) : null,
-          ((_ea = appearanceOptions == null ? void 0 : appearanceOptions.dynamicBehaviour) == null ? void 0 : _ea.isEnabled) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "dbn-flex dbn-gap-1 dbn-items-center", children: [
+          ((_$ = appearanceOptions == null ? void 0 : appearanceOptions.dynamicBehaviour) == null ? void 0 : _$.isEnabled) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "dbn-flex dbn-gap-1 dbn-items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               InfoTooltip,
               {
@@ -216490,7 +216678,7 @@ const MetricCard = ({
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               Switch,
               {
-                enabled: (_fa = chartSettings2.customSettings) == null ? void 0 : _fa.showDynamicBehaviour,
+                enabled: (_aa = chartSettings2.customSettings) == null ? void 0 : _aa.showDynamicBehaviour,
                 name: "dynamic",
                 onChange: () => setChartSettings((prev) => {
                   var _a3;
@@ -216502,11 +216690,11 @@ const MetricCard = ({
                     }
                   };
                 }),
-                placeholder: ((_ga = appearanceOptions == null ? void 0 : appearanceOptions.dynamicBehaviour) == null ? void 0 : _ga.label) || "Dynamic"
+                placeholder: ((_ba = appearanceOptions == null ? void 0 : appearanceOptions.dynamicBehaviour) == null ? void 0 : _ba.label) || "Dynamic"
               }
             )
           ] }) : null,
-          ((_ha = appearanceOptions == null ? void 0 : appearanceOptions.stackedBars) == null ? void 0 : _ha.isEnabled) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "dbn-flex dbn-gap-1 dbn-items-center", children: [
+          ((_ca = appearanceOptions == null ? void 0 : appearanceOptions.stackedBars) == null ? void 0 : _ca.isEnabled) ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "dbn-flex dbn-gap-1 dbn-items-center", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               InfoTooltip,
               {
@@ -216518,7 +216706,7 @@ const MetricCard = ({
               Switch,
               {
                 name: "full stacked",
-                enabled: (_ia = chartSettings2.customSettings) == null ? void 0 : _ia.showFullStacked,
+                enabled: (_da = chartSettings2.customSettings) == null ? void 0 : _da.showFullStacked,
                 onChange: () => setChartSettings((prev) => {
                   var _a3;
                   return {
@@ -216529,7 +216717,7 @@ const MetricCard = ({
                     }
                   };
                 }),
-                placeholder: ((_ja = appearanceOptions == null ? void 0 : appearanceOptions.stackedBars) == null ? void 0 : _ja.label) || "100% stacked bars"
+                placeholder: ((_ea = appearanceOptions == null ? void 0 : appearanceOptions.stackedBars) == null ? void 0 : _ea.label) || "100% stacked bars"
               }
             )
           ] }) : null
@@ -219380,9 +219568,10 @@ const Chart = React__default.memo(
     chartAppearance,
     metricCardColor
   }) => {
-    var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j;
+    var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     const [geoJsonData, setGeoJsonData] = useState();
     const chartRef = useRef(null);
+    const [zoomOptions, setZoomOptions] = useState();
     const options2 = useMemo(() => {
       let dataObj = data;
       if (sortOrder === ASCE) {
@@ -219454,6 +219643,19 @@ const Chart = React__default.memo(
         }
       }
     }, [chartOptions2.chartType]);
+    useEffect(() => {
+      var _a3, _b3;
+      if ((_b3 = (_a3 = chartOptions2.customSettings) == null ? void 0 : _a3.chartZoom) == null ? void 0 : _b3.isZoomEnabled) {
+        setZoomOptions({
+          ...options2,
+          grid: {
+            ...options2 == null ? void 0 : options2.grid,
+            left: 50,
+            bottom: 30
+          }
+        });
+      }
+    }, [(_b2 = (_a2 = chartOptions2.customSettings) == null ? void 0 : _a2.chartZoom) == null ? void 0 : _b2.isZoomEnabled]);
     useEffect(() => {
       var _a3;
       if (((_a3 = chartOptions2.customSettings) == null ? void 0 : _a3.showDynamicBehaviour) && chartOptions2.chartType)
@@ -219609,7 +219811,7 @@ const Chart = React__default.memo(
           className,
           stackCols: chartOptions2.stackTableCols || [],
           colors: options2.colors,
-          showLabels: (_a2 = chartOptions2.customSettings) == null ? void 0 : _a2.showStackLabels
+          showLabels: (_c2 = chartOptions2.customSettings) == null ? void 0 : _c2.showStackLabels
         }
       );
     }
@@ -219652,14 +219854,14 @@ const Chart = React__default.memo(
         PivotTableV2,
         {
           props: {
-            columns: ((_b2 = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _b2.headers) || [],
+            columns: ((_d = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _d.headers) || [],
             data,
-            rows: ((_c2 = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _c2.dimensions) || [],
-            values: ((_d = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _d.measures) || [],
-            headerSettings: (_e2 = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _e2.headerSettings,
-            measures: ((_f = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _f.aggregates) || [],
-            isEnableStripedRows: (_g = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _g.isEnableStripedRows,
-            dimensions: ((_h = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _h.dims) || [],
+            rows: ((_e2 = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _e2.dimensions) || [],
+            values: ((_f = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _f.measures) || [],
+            headerSettings: (_g = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _g.headerSettings,
+            measures: ((_h = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _h.aggregates) || [],
+            isEnableStripedRows: (_i = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _i.isEnableStripedRows,
+            dimensions: ((_j = options2 == null ? void 0 : options2.pivotTableSettings2) == null ? void 0 : _j.dims) || [],
             onDrillPivotTable,
             pivotDrillState
           }
@@ -219672,7 +219874,7 @@ const Chart = React__default.memo(
       CHART_TYPES.area,
       CHART_TYPES.stackedArea,
       CHART_TYPES.timeSeries
-    ].includes(chartOptions2.chartType) && ((_i = chartOptions2.customSettings) == null ? void 0 : _i.showDynamicBehaviour)) {
+    ].includes(chartOptions2.chartType) && ((_k = chartOptions2.customSettings) == null ? void 0 : _k.showDynamicBehaviour)) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         EChartsReact,
         {
@@ -219725,7 +219927,7 @@ const Chart = React__default.memo(
             GaugeLegend,
             {
               data: options2 == null ? void 0 : options2.legendData,
-              legendPosition: (_j = chartOptions2 == null ? void 0 : chartOptions2.legendSettings) == null ? void 0 : _j.position
+              legendPosition: (_l = chartOptions2 == null ? void 0 : chartOptions2.legendSettings) == null ? void 0 : _l.position
             }
           ) : null,
           chartOptions2.chartType === CHART_TYPES.worldMap ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -219748,7 +219950,7 @@ const Chart = React__default.memo(
                 height: hasDecreasedHeight && (chartHeight2 || 0) >= 6 ? "100px" : hasDecreasedHeight && !chartHeight2 ? "40%" : "100%"
               },
               ...config,
-              option: { ...options2, animation: isShowAnimation },
+              option: ((_n = (_m = chartOptions2.customSettings) == null ? void 0 : _m.chartZoom) == null ? void 0 : _n.isZoomEnabled) ? { ...zoomOptions, animation: isShowAnimation } : { ...options2, animation: isShowAnimation },
               className,
               onEvents: events,
               notMerge: true
@@ -242142,13 +242344,12 @@ const ManageMetricMenu = ({
     workspaceId,
     chartAppearance,
     colors: colors2,
-    theme: theme2,
-    customContent
+    isOpenModal,
+    setOpenModal
   }
 }) => {
   const [checkedMetrics, setCheckedMetrics] = useState([]);
   const [searchKeyword, setSearchKeyword] = useState("");
-  const [isOpenModal, setOpenModal] = useState(false);
   useEffect(() => {
     if (metricList == null ? void 0 : metricList.length) {
       const publishedMetrics = metricList == null ? void 0 : metricList.filter(
@@ -242198,231 +242399,217 @@ const ManageMetricMenu = ({
     },
     [metricList, searchKeyword]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "tertiary",
-        title: "manage metrics",
-        onClick: () => setOpenModal(true),
-        style: theme2,
-        className: styles.manageButton,
-        leftIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icons, { name: "chart" }),
-        children: customContent ? customContent() : "Manage Metrics"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Modal,
-      {
-        isOpen: isOpenModal,
-        onClose: () => setOpenModal(false),
-        headerTitle: "Manage Metrics",
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { className: styles.manageMetricContainer, direction: "col", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              SearchTab,
-              {
-                setSearchKeyword,
-                className: "dbn-w-full"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Flex,
-              {
-                direction: "row",
-                className: "dbn-overflow-y-auto dbn-gap-2 dbn-flex-wrap dbn-h-full",
-                children: [
-                  filteredUnCheckedList.map((metric2) => {
-                    const isChecked = checkedMetrics == null ? void 0 : checkedMetrics.includes(metric2 == null ? void 0 : metric2.id);
-                    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: `${styles.manageMetricCard} ${isChecked ? "dbn-border-primary" : ""}`,
-                        onClick: () => {
-                          if (isChecked) {
-                            setCheckedMetrics(
-                              (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
-                            );
-                          } else {
-                            setCheckedMetrics((prev) => [
-                              ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
-                              metric2 == null ? void 0 : metric2.id
-                            ]);
-                          }
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                            Flex,
-                            {
-                              direction: "row",
-                              className: "dbn-justify-between dbn-items-center",
-                              children: [
-                                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dbn-w-[90%] dbn-truncate", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                  Text,
-                                  {
-                                    variant: "heading-sm",
-                                    color: "primary",
-                                    display: "inline-truncate",
-                                    children: metric2 == null ? void 0 : metric2.name
-                                  }
-                                ) }),
-                                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                  Checkbox,
-                                  {
-                                    checked: isChecked,
-                                    onChange: ({ target: { checked } }) => {
-                                      if (checked) {
-                                        setCheckedMetrics((prev) => [
-                                          ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
-                                          metric2 == null ? void 0 : metric2.id
-                                        ]);
-                                      } else {
-                                        setCheckedMetrics(
-                                          (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
-                                        );
-                                      }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Modal,
+    {
+      isOpen: isOpenModal,
+      onClose: () => setOpenModal(false),
+      headerTitle: "Manage Metrics",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Flex, { className: styles.manageMetricContainer, direction: "col", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SearchTab,
+            {
+              setSearchKeyword,
+              className: "dbn-w-full"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Flex,
+            {
+              direction: "row",
+              className: "dbn-overflow-y-auto dbn-gap-2 dbn-flex-wrap dbn-h-full",
+              children: [
+                filteredUnCheckedList.map((metric2) => {
+                  const isChecked = checkedMetrics == null ? void 0 : checkedMetrics.includes(metric2 == null ? void 0 : metric2.id);
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: `${styles.manageMetricCard} ${isChecked ? "dbn-border-primary" : ""}`,
+                      onClick: () => {
+                        if (isChecked) {
+                          setCheckedMetrics(
+                            (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
+                          );
+                        } else {
+                          setCheckedMetrics((prev) => [
+                            ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
+                            metric2 == null ? void 0 : metric2.id
+                          ]);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          Flex,
+                          {
+                            direction: "row",
+                            className: "dbn-justify-between dbn-items-center",
+                            children: [
+                              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dbn-w-[90%] dbn-truncate", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                Text,
+                                {
+                                  variant: "heading-sm",
+                                  color: "primary",
+                                  display: "inline-truncate",
+                                  children: metric2 == null ? void 0 : metric2.name
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                Checkbox,
+                                {
+                                  checked: isChecked,
+                                  onChange: ({ target: { checked } }) => {
+                                    if (checked) {
+                                      setCheckedMetrics((prev) => [
+                                        ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
+                                        metric2 == null ? void 0 : metric2.id
+                                      ]);
+                                    } else {
+                                      setCheckedMetrics(
+                                        (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
+                                      );
                                     }
                                   }
-                                )
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "div",
-                            {
-                              className: "dbn-w-full dbn-h-[90%]",
-                              id: metric2.id,
-                              style: { pointerEvents: "none" },
-                              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                ManageMetricCard,
-                                {
-                                  chartAppearance,
-                                  workspaceId,
-                                  guestToken: token,
-                                  isFrontendApp: false,
-                                  metricItem: metric2,
-                                  client: client2,
-                                  colors: colors2,
-                                  companyTenancyType
                                 }
                               )
-                            },
-                            metric2.id
-                          )
-                        ]
-                      }
-                    );
-                  }),
-                  filteredCheckedList.map((metric2) => {
-                    const isChecked = checkedMetrics == null ? void 0 : checkedMetrics.includes(metric2 == null ? void 0 : metric2.id);
-                    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "div",
-                      {
-                        className: `${styles.manageMetricCard} ${isChecked ? "dbn-border-primary" : ""}`,
-                        onClick: () => {
-                          if (isChecked) {
-                            setCheckedMetrics(
-                              (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
-                            );
-                          } else {
-                            setCheckedMetrics((prev) => [
-                              ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
-                              metric2 == null ? void 0 : metric2.id
-                            ]);
+                            ]
                           }
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                            Flex,
-                            {
-                              direction: "row",
-                              className: "dbn-justify-between dbn-items-center",
-                              children: [
-                                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dbn-w-[90%] dbn-truncate", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                  Text,
-                                  {
-                                    variant: "heading-sm",
-                                    color: "primary",
-                                    display: "inline-truncate",
-                                    children: metric2 == null ? void 0 : metric2.name
-                                  }
-                                ) }),
-                                /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                  Checkbox,
-                                  {
-                                    checked: isChecked,
-                                    onChange: ({ target: { checked } }) => {
-                                      if (checked) {
-                                        setCheckedMetrics((prev) => [
-                                          ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
-                                          metric2 == null ? void 0 : metric2.id
-                                        ]);
-                                      } else {
-                                        setCheckedMetrics(
-                                          (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
-                                        );
-                                      }
+                        ),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "div",
+                          {
+                            className: "dbn-w-full dbn-h-[90%]",
+                            id: metric2.id,
+                            style: { pointerEvents: "none" },
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                              ManageMetricCard,
+                              {
+                                chartAppearance,
+                                workspaceId,
+                                guestToken: token,
+                                isFrontendApp: false,
+                                metricItem: metric2,
+                                client: client2,
+                                colors: colors2,
+                                companyTenancyType
+                              }
+                            )
+                          },
+                          metric2.id
+                        )
+                      ]
+                    }
+                  );
+                }),
+                filteredCheckedList.map((metric2) => {
+                  const isChecked = checkedMetrics == null ? void 0 : checkedMetrics.includes(metric2 == null ? void 0 : metric2.id);
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: `${styles.manageMetricCard} ${isChecked ? "dbn-border-primary" : ""}`,
+                      onClick: () => {
+                        if (isChecked) {
+                          setCheckedMetrics(
+                            (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
+                          );
+                        } else {
+                          setCheckedMetrics((prev) => [
+                            ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
+                            metric2 == null ? void 0 : metric2.id
+                          ]);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                          Flex,
+                          {
+                            direction: "row",
+                            className: "dbn-justify-between dbn-items-center",
+                            children: [
+                              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "dbn-w-[90%] dbn-truncate", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                Text,
+                                {
+                                  variant: "heading-sm",
+                                  color: "primary",
+                                  display: "inline-truncate",
+                                  children: metric2 == null ? void 0 : metric2.name
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                                Checkbox,
+                                {
+                                  checked: isChecked,
+                                  onChange: ({ target: { checked } }) => {
+                                    if (checked) {
+                                      setCheckedMetrics((prev) => [
+                                        ...prev == null ? void 0 : prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id)),
+                                        metric2 == null ? void 0 : metric2.id
+                                      ]);
+                                    } else {
+                                      setCheckedMetrics(
+                                        (prev) => prev.filter((m4) => m4 !== (metric2 == null ? void 0 : metric2.id))
+                                      );
                                     }
                                   }
-                                )
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            "div",
-                            {
-                              className: "dbn-w-full dbn-h-[90%]",
-                              id: metric2.id,
-                              style: { pointerEvents: "none" },
-                              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                                ManageMetricCard,
-                                {
-                                  chartAppearance,
-                                  workspaceId,
-                                  guestToken: token,
-                                  isFrontendApp: false,
-                                  metricItem: metric2,
-                                  client: client2,
-                                  colors: colors2,
-                                  companyTenancyType
                                 }
                               )
-                            },
-                            metric2.id
-                          )
-                        ]
-                      }
-                    );
-                  })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalFooter, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "tab", onClick: () => setOpenModal(false), children: "Discard" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Button,
-              {
-                variant: "primary",
-                onClick: () => {
-                  var _a2;
-                  const archiveMetrics = (_a2 = metricList == null ? void 0 : metricList.filter(
-                    (metric2) => {
-                      var _a3;
-                      return !checkedMetrics.includes(metric2 == null ? void 0 : metric2.id) && !((_a3 = metric2 == null ? void 0 : metric2.clientArchivedMetrics) == null ? void 0 : _a3.length);
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "div",
+                          {
+                            className: "dbn-w-full dbn-h-[90%]",
+                            id: metric2.id,
+                            style: { pointerEvents: "none" },
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                              ManageMetricCard,
+                              {
+                                chartAppearance,
+                                workspaceId,
+                                guestToken: token,
+                                isFrontendApp: false,
+                                metricItem: metric2,
+                                client: client2,
+                                colors: colors2,
+                                companyTenancyType
+                              }
+                            )
+                          },
+                          metric2.id
+                        )
+                      ]
                     }
-                  )) == null ? void 0 : _a2.map((metric2) => metric2 == null ? void 0 : metric2.id);
-                  onSaveManageMetrics(checkedMetrics, archiveMetrics);
-                },
-                isDisabled: isLoading || !(metricList == null ? void 0 : metricList.length),
-                children: "Save"
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+                  );
+                })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(ModalFooter, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "tab", onClick: () => setOpenModal(false), children: "Discard" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "primary",
+              onClick: () => {
+                var _a2;
+                const archiveMetrics = (_a2 = metricList == null ? void 0 : metricList.filter(
+                  (metric2) => {
+                    var _a3;
+                    return !checkedMetrics.includes(metric2 == null ? void 0 : metric2.id) && !((_a3 = metric2 == null ? void 0 : metric2.clientArchivedMetrics) == null ? void 0 : _a3.length);
+                  }
+                )) == null ? void 0 : _a2.map((metric2) => metric2 == null ? void 0 : metric2.id);
+                onSaveManageMetrics(checkedMetrics, archiveMetrics);
+              },
+              isDisabled: isLoading || !(metricList == null ? void 0 : metricList.length),
+              children: "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
 };
 const checkInlineStyle = (style2) => {
   var _a2, _b2, _c2, _d;
@@ -242445,7 +242632,7 @@ const EmbeddedDashboard = React__default.memo(
     noDataImg,
     customContent
   }) => {
-    var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z, _A, _B;
+    var _a2, _b2, _c2, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t2, _u, _v, _w, _x, _y, _z;
     const [url, setUrl] = useState(window.location.search);
     const [filterUrl, setFilterUrl] = useState(window.location.search);
     const { data, isLoading, error: error2 } = useDashboardContext();
@@ -242453,6 +242640,7 @@ const EmbeddedDashboard = React__default.memo(
     const [isShowMetricCreateModal2, setShowMetricCreateModal] = useState(false);
     const [dataLimit, setDataLimit] = useState(0);
     const [isShowLoader, setShowLoader] = useState(false);
+    const [isOpenManageModal, setOpenManageModal] = useState(false);
     const [isShowGenerateMetricModal, setShowGenerateMetricModal] = useState(false);
     const [isSearchMetricModal, setSearchGenerateMetricModal] = useState(false);
     const [selectedFilterVal, setSelectedFilterVal] = useState([]);
@@ -242962,19 +243150,15 @@ const EmbeddedDashboard = React__default.memo(
                           !(options2 == null ? void 0 : options2.disableManageMetrics) && data.isAllowedManageMetrics && !!((_o = data.externalDashboardMetrics) == null ? void 0 : _o.length) && (!(theme2 == null ? void 0 : theme2.manageMetricsStyle) || (theme2 == null ? void 0 : theme2.manageMetricsStyle) && !checkInlineStyle(
                             theme2 == null ? void 0 : theme2.manageMetricsStyle
                           )) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "hover:dbn-bg-gray-3 dbn-rounded-md", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                            ManageMetricMenu,
+                            Button,
                             {
-                              props: {
-                                metricList,
-                                token,
-                                client: data.clientId,
-                                companyTenancyType: data.companyTenancyType,
-                                workspaceId: (_p = data.workspace) == null ? void 0 : _p.id,
-                                chartAppearance: options2 == null ? void 0 : options2.chartAppearance,
-                                colors: (options2 == null ? void 0 : options2.chartColors) ?? adminThemeChartColors,
-                                theme: theme2 == null ? void 0 : theme2.manageMetricsStyle,
-                                customContent
-                              }
+                              variant: "tertiary",
+                              title: "manage metrics",
+                              onClick: () => setOpenManageModal(true),
+                              style: theme2 == null ? void 0 : theme2.manageMetricsStyle,
+                              className: styles$1b.manageButton,
+                              leftIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(Icons, { name: "chart" }),
+                              children: customContent ? customContent() : "Manage Metrics"
                             }
                           ) })
                         ] })
@@ -243005,7 +243189,7 @@ const EmbeddedDashboard = React__default.memo(
                           chartColors: (options2 == null ? void 0 : options2.chartColors) ?? adminThemeChartColors,
                           isShowMetricCreateModal: isShowMetricCreateModal2,
                           setShowMetricCreateModal,
-                          workspaceId: (_q = data.workspace) == null ? void 0 : _q.id,
+                          workspaceId: (_p = data.workspace) == null ? void 0 : _p.id,
                           userProvidedDashboardId: data.externalDashboard.externalDashboardId
                         }
                       ) })
@@ -243033,7 +243217,7 @@ const EmbeddedDashboard = React__default.memo(
                           chartColors: (options2 == null ? void 0 : options2.chartColors) ?? adminThemeChartColors,
                           isShowMetricCreateModal: isShowGenerateMetricModal,
                           setShowMetricCreateModal: setShowGenerateMetricModal,
-                          workspaceId: (_r = data.workspace) == null ? void 0 : _r.id,
+                          workspaceId: (_q = data.workspace) == null ? void 0 : _q.id,
                           userProvidedDashboardId: data.externalDashboard.externalDashboardId
                         }
                       ) })
@@ -243057,7 +243241,7 @@ const EmbeddedDashboard = React__default.memo(
                             dashboardId: data.externalDashboard.id,
                             dashboardIds: [data.externalDashboard.id],
                             token,
-                            workspaceId: (_s = data.workspace) == null ? void 0 : _s.id,
+                            workspaceId: (_r = data.workspace) == null ? void 0 : _r.id,
                             themeChartColors: (options2 == null ? void 0 : options2.chartColors) ?? adminThemeChartColors,
                             setSearchGenerateMetricModal,
                             clientId: data.clientId
@@ -243076,8 +243260,8 @@ const EmbeddedDashboard = React__default.memo(
                   isEndUserApp: true,
                   clientColumnType: data.clientColumnType,
                   hideDatePickerOptions: (options2 == null ? void 0 : options2.hideDatePickerOptions) || [],
-                  filterIconColor: (_t2 = theme2 == null ? void 0 : theme2.button) == null ? void 0 : _t2.secondaryText,
-                  filterButtonBgColor: (_u = theme2 == null ? void 0 : theme2.button) == null ? void 0 : _u.secondary,
+                  filterIconColor: (_s = theme2 == null ? void 0 : theme2.button) == null ? void 0 : _s.secondaryText,
+                  filterButtonBgColor: (_t2 = theme2 == null ? void 0 : theme2.button) == null ? void 0 : _t2.secondary,
                   tenancyLevel: data.companyTenancyType,
                   appliedFilterPairs: filterPairs,
                   filters: filters2,
@@ -243087,7 +243271,7 @@ const EmbeddedDashboard = React__default.memo(
                   theme: dropdownTheme,
                   internal: {
                     isInternal: true,
-                    workspaceId: (_v = data.workspace) == null ? void 0 : _v.id
+                    workspaceId: (_u = data.workspace) == null ? void 0 : _u.id
                   },
                   setSelectedFilterVal,
                   clientId: data.clientId,
@@ -243110,12 +243294,12 @@ const EmbeddedDashboard = React__default.memo(
                   noDataImg,
                   shouldFitFullScreen: options2 == null ? void 0 : options2.shouldFitFullScreen,
                   isEnableMetricSummary: data == null ? void 0 : data.isEnableMetricSummary,
-                  metricCardColor: ((_w = applicableTheme == null ? void 0 : applicableTheme.dashboard) == null ? void 0 : _w.metricCardColor) || "",
+                  metricCardColor: ((_v = applicableTheme == null ? void 0 : applicableTheme.dashboard) == null ? void 0 : _v.metricCardColor) || "",
                   isShadowDisableOnHover: isDisableShadowOnHover,
                   isDisableMetricLoader: options2 == null ? void 0 : options2.disableMetricLoader,
                   chartAppearance: options2 == null ? void 0 : options2.chartAppearance,
                   clientColumnType: data.clientColumnType,
-                  workspaceId: (_x = data.workspace) == null ? void 0 : _x.id,
+                  workspaceId: (_w = data.workspace) == null ? void 0 : _w.id,
                   isEditLayoutEnabled: editLayout == null ? void 0 : editLayout.isEnabled,
                   gridMargin,
                   token,
@@ -243135,7 +243319,7 @@ const EmbeddedDashboard = React__default.memo(
                   isAllowedToDeleteMetrics: !(options2 == null ? void 0 : options2.disableMetricDeletion) && data.isAllowedToDeleteMetrics,
                   isAllowedToUpdateMetrics: !(options2 == null ? void 0 : options2.disableMetricUpdation) && data.isAllowedToUpdateMetrics,
                   isAllowedToChangeLayout: !(options2 == null ? void 0 : options2.disableLayoutCustomization) && data.isAllowedToChangeLayout && editLayout.isEnabled,
-                  isAllowedToSeeUnderlyingData: ((_y = options2 == null ? void 0 : options2.disableUnderlyingData) == null ? void 0 : _y.toString()) ? !(options2 == null ? void 0 : options2.disableUnderlyingData) : data == null ? void 0 : data.isShowUnderlyingData,
+                  isAllowedToSeeUnderlyingData: ((_x = options2 == null ? void 0 : options2.disableUnderlyingData) == null ? void 0 : _x.toString()) ? !(options2 == null ? void 0 : options2.disableUnderlyingData) : data == null ? void 0 : data.isShowUnderlyingData,
                   externalDashboardMetrics: data.externalDashboardMetrics,
                   isMetricListLoading: isLoading,
                   globalFilters,
@@ -243156,7 +243340,7 @@ const EmbeddedDashboard = React__default.memo(
                   hideDatePickerOptions: options2 == null ? void 0 : options2.hideDatePickerOptions
                 }
               ),
-              !(options2 == null ? void 0 : options2.disableManageMetrics) && data.isAllowedManageMetrics && ((_z = data.externalDashboardMetrics) == null ? void 0 : _z.length) && (theme2 == null ? void 0 : theme2.manageMetricsStyle) && checkInlineStyle(theme2 == null ? void 0 : theme2.manageMetricsStyle) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
                 ManageMetricMenu,
                 {
                   props: {
@@ -243164,18 +243348,18 @@ const EmbeddedDashboard = React__default.memo(
                     token,
                     client: data.clientId,
                     companyTenancyType: data.companyTenancyType,
-                    workspaceId: (_A = data.workspace) == null ? void 0 : _A.id,
+                    workspaceId: (_y = data.workspace) == null ? void 0 : _y.id,
                     chartAppearance: options2 == null ? void 0 : options2.chartAppearance,
                     colors: (options2 == null ? void 0 : options2.chartColors) ?? adminThemeChartColors,
-                    theme: theme2 == null ? void 0 : theme2.manageMetricsStyle,
-                    customContent
+                    isOpenModal: isOpenManageModal,
+                    setOpenModal: setOpenManageModal
                   }
                 }
               )
             ] })
           ] }),
           isLoading && !(options2 == null ? void 0 : options2.disableMainLoader) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1b["alt-container"], children: /* @__PURE__ */ jsxRuntimeExports.jsx(Loader$1, {}) }),
-          !isLoading && !((_B = data == null ? void 0 : data.externalDashboard) == null ? void 0 : _B.id) && error2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1b["alt-container"], children: (error2 === "TOKEN_EXPIRED" ? (customMessages == null ? void 0 : customMessages.tokenExpiry) || "Expired Token!" : error2) || "Invalid token or Dashboard id" })
+          !isLoading && !((_z = data == null ? void 0 : data.externalDashboard) == null ? void 0 : _z.id) && error2 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1b["alt-container"], children: (error2 === "TOKEN_EXPIRED" ? (customMessages == null ? void 0 : customMessages.tokenExpiry) || "Expired Token!" : error2) || "Invalid token or Dashboard id" })
         ]
       }
     ) });