@databrainhq/plugin 0.7.5 → 0.7.7

package/dist/index.es.js

@@ -2545,6 +2545,7 @@ var styles$C = {
   grid,
   hidden,
   "h-screen": "_h-screen_1hfou_1",
+  "h-[10%]": "_h-[10%]_1hfou_1",
   "w-screen": "_w-screen_1hfou_1",
   "w-full": "_w-full_1hfou_1",
   transform,
@@ -2570,7 +2571,10 @@ var styles$C = {
   floatingButton,
   floatingButtonIcon,
   staticContainer,
-  floatingContainer
+  floatingContainer,
+  "hover:cursor-pointer": "_hover:cursor-pointer_1hfou_1",
+  "hover:cursor-text": "_hover:cursor-text_1hfou_1",
+  "disabled:cursor-text": "_disabled:cursor-text_1hfou_1"
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getAugmentedNamespace(n2) {
@@ -8025,6 +8029,7 @@ const EmbeddedDashboardMetricsDocument = `
       companyIntegration {
         name
       }
+      clickActions
     }
   }
 }
@@ -79534,6 +79539,46 @@ var EChartsReact = function(_super) {
   }
   return EChartsReact2;
 }(EChartsReactCore);
+const handleRoute = (routeType, route) => {
+  if (routeType === "external") {
+    window.open(route, "_blank");
+  } else {
+    window.location.replace(route);
+  }
+};
+const handleCardClick = (clickActionsConfig, metricId, id2) => {
+  const { card } = clickActionsConfig;
+  switch (true) {
+    case !card.isEnable:
+      return;
+    case card.dynamic === "metricId": {
+      const metricRoute = card.route.replace("{{metric.metricId}}", metricId);
+      handleRoute(card.routeType, metricRoute);
+      break;
+    }
+    case card.dynamic === "uuid": {
+      const uuidRoute = card.route.replace("{{metric.uuid}}", id2);
+      handleRoute(card.routeType, uuidRoute);
+      break;
+    }
+    case card.dynamic === "none": {
+      handleRoute(card.routeType, card.route);
+      break;
+    }
+    default:
+      console.warn("Unhandled click behaviour configuration");
+      break;
+  }
+};
+const handleChartClick = (clickActionsConfig, value) => {
+  if (clickActionsConfig.isEnable) {
+    const navigateRoute = clickActionsConfig.route.replace(
+      "{{value}}",
+      `${value}`.replace(/"/g, "")
+    );
+    handleRoute(clickActionsConfig.routeType, navigateRoute);
+  }
+};
 const AreaChart = ({
   data: data2,
   margins,
@@ -79545,7 +79590,8 @@ const AreaChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const option2 = {
@@ -79649,7 +79695,13 @@ const AreaChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79674,7 +79726,8 @@ const BarChart = ({
   labelSettings,
   axisSettings,
   margins,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -79780,7 +79833,13 @@ const BarChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79805,7 +79864,8 @@ const ComboChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const choice = ["bar", "line"];
@@ -79934,7 +79994,13 @@ const ComboChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79959,7 +80025,8 @@ const LineChart = ({
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -80068,7 +80135,7 @@ const LineChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          updateGroup(params.name);
+          handleChartClick(chartClickConfig, params.name);
         }
       }
     })]
@@ -80082,7 +80149,8 @@ const PieChart = ({
   enableSaveAs,
   colors: colors2,
   updateGroup,
-  isEnableGroupBy
+  isEnableGroupBy,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2;
   if (((_b2 = (_a2 = data2 == null ? void 0 : data2.datasets[0]) == null ? void 0 : _a2.data) == null ? void 0 : _b2.length) > 1) {
@@ -80184,7 +80252,13 @@ const PieChart = ({
             width: "100%",
             height: "100%"
           },
-          option: option22
+          option: option22,
+          onEvents: {
+            click: (params) => {
+              var _a3;
+              handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+            }
+          }
         })
       })]
     });
@@ -80268,7 +80342,13 @@ const PieChart = ({
             width: "100%",
             height: "100%"
           },
-          option: option2
+          option: option2,
+          onEvents: {
+            click: (params) => {
+              var _a3;
+              handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+            }
+          }
         })
       })]
     })
@@ -80284,7 +80364,8 @@ const RowChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const option2 = {
@@ -80389,7 +80470,13 @@ const RowChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80415,7 +80502,8 @@ const ScatterChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const option2 = {
@@ -80514,7 +80602,13 @@ const ScatterChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80539,7 +80633,8 @@ const WaterFallChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -80641,7 +80736,13 @@ const WaterFallChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80661,7 +80762,8 @@ const FunnelChart = ({
   margins,
   legendSettings,
   labelSettings,
-  colors: colors2
+  colors: colors2,
+  chartClickConfig
 }) => {
   const option2 = {
     tooltip: {
@@ -80734,7 +80836,13 @@ const FunnelChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a2;
+          handleChartClick(chartClickConfig, ((_a2 = params == null ? void 0 : params.name) == null ? void 0 : _a2.split(" ").join("_")) || "undefined");
+        }
+      }
     })
   });
 };
@@ -80748,7 +80856,8 @@ const BubbleChart = ({
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const modifiedData = [];
@@ -80872,7 +80981,13 @@ const BubbleChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80895,7 +81010,8 @@ const DoughnutChart = ({
   enableSaveAs,
   colors: colors2,
   updateGroup,
-  isEnableGroupBy
+  isEnableGroupBy,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   if (((_a2 = data2 == null ? void 0 : data2.labels) == null ? void 0 : _a2.length) > 1) {
@@ -81056,7 +81172,13 @@ const DoughnutChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -81082,7 +81204,8 @@ const SteppedAreaChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const choice = ["start", "middle", "end"];
@@ -81185,7 +81308,13 @@ const SteppedAreaChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -81211,7 +81340,8 @@ const Histogram = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -81308,7 +81438,13 @@ const Histogram = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -81328,7 +81464,8 @@ const GaugeChart = ({
   margins,
   legendSettings,
   enableSaveAs,
-  colors: colors2
+  colors: colors2,
+  chartClickConfig
 }) => {
   const newGuageData = Array.isArray(gaugeData) ? gaugeData : [];
   const total = newGuageData.reduce((sum2, item) => {
@@ -81423,7 +81560,13 @@ const GaugeChart = ({
       width: "100%",
       height: "113%"
     },
-    option: option2
+    option: option2,
+    onEvents: {
+      click: (params) => {
+        var _a2;
+        handleChartClick(chartClickConfig, ((_a2 = params == null ? void 0 : params.name) == null ? void 0 : _a2.split(" ").join("_")) || "undefined");
+      }
+    }
   });
 };
 const SankeyChart = ({
@@ -81431,7 +81574,8 @@ const SankeyChart = ({
   margins,
   enableSaveAs,
   colors: colors2,
-  backGroundColor
+  backGroundColor,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2;
   const allValues = [];
@@ -81508,7 +81652,13 @@ const SankeyChart = ({
         width: "100%",
         height: "100%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     })
   });
 };
@@ -81523,7 +81673,8 @@ const StackedBarChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -81629,7 +81780,13 @@ const StackedBarChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -81644,9 +81801,9 @@ const StackedBarChart = ({
     })]
   });
 };
-const container$g = "_container_hxsc7_1";
-const label$5 = "_label_hxsc7_7";
-const sync = "_sync_hxsc7_13";
+const container$g = "_container_w4vgp_1";
+const label$5 = "_label_w4vgp_7";
+const sync = "_sync_w4vgp_13";
 var styles$x = {
   container: container$g,
   label: label$5,
@@ -81654,7 +81811,8 @@ var styles$x = {
 };
 const SingleValueChart = ({
   data: data2,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2, _d;
   const subHeaderFont = {
@@ -81663,36 +81821,37 @@ const SingleValueChart = ({
   const valueFont = {
     fontSize: `${customSettings.fontSize}px` || "30px"
   };
+  const hover = chartClickConfig.isEnable ? "hover:cursor-pointer" : "hover:cursor-text";
   const comaFormatter = new Intl.NumberFormat();
   const adaptiveFormatter = (val, decimal) => {
-    let value = "";
+    let value2 = "";
     if (decimal) {
       switch (parseInt(val, 10).toString().length) {
         case 1:
         case 2:
         case 3:
-          value = val;
+          value2 = val;
           break;
         case 4:
-          value = `${val.toString().slice(0, 1)}.${val.toString().slice(1, 3)}k`;
+          value2 = `${val.toString().slice(0, 1)}.${val.toString().slice(1, 3)}k`;
           break;
         case 5:
-          value = `${val.toString().slice(0, 2)}.${val.toString().slice(2, 4)}k`;
+          value2 = `${val.toString().slice(0, 2)}.${val.toString().slice(2, 4)}k`;
           break;
         case 6:
-          value = `${val.toString().slice(0, 3)}.${val.toString().slice(3, 5)}k`;
+          value2 = `${val.toString().slice(0, 3)}.${val.toString().slice(3, 5)}k`;
           break;
         case 7:
-          value = `${val.toString().slice(0, 1)}.${val.toString().slice(1, 3)}M`;
+          value2 = `${val.toString().slice(0, 1)}.${val.toString().slice(1, 3)}M`;
           break;
         case 8:
-          value = `${val.toString().slice(0, 2)}.${val.toString().slice(2, 4)}M`;
+          value2 = `${val.toString().slice(0, 2)}.${val.toString().slice(2, 4)}M`;
           break;
         case 9:
-          value = `${val.toString().slice(0, 3)}.${val.toString().slice(3, 5)}M`;
+          value2 = `${val.toString().slice(0, 3)}.${val.toString().slice(3, 5)}M`;
           break;
         case 10:
-          value = `${val.toString().slice(0, 1)}.${val.toString().slice(1, 3)}B`;
+          value2 = `${val.toString().slice(0, 1)}.${val.toString().slice(1, 3)}B`;
           break;
       }
     } else {
@@ -81700,32 +81859,32 @@ const SingleValueChart = ({
         case 1:
         case 2:
         case 3:
-          value = val;
+          value2 = val;
           break;
         case 4:
-          value = `${val.toString().slice(0, 1)}k`;
+          value2 = `${val.toString().slice(0, 1)}k`;
           break;
         case 5:
-          value = `${val.toString().slice(0, 2)}k`;
+          value2 = `${val.toString().slice(0, 2)}k`;
           break;
         case 6:
-          value = `${val.toString().slice(0, 3)}k`;
+          value2 = `${val.toString().slice(0, 3)}k`;
           break;
         case 7:
-          value = `${val.toString().slice(0, 1)}M`;
+          value2 = `${val.toString().slice(0, 1)}M`;
           break;
         case 8:
-          value = `${val.toString().slice(0, 2)}M`;
+          value2 = `${val.toString().slice(0, 2)}M`;
           break;
         case 9:
-          value = `${val.toString().slice(0, 3)}M`;
+          value2 = `${val.toString().slice(0, 3)}M`;
           break;
         case 10:
-          value = `${val.toString().slice(0, 1)}B`;
+          value2 = `${val.toString().slice(0, 1)}B`;
           break;
       }
     }
-    return value;
+    return value2;
   };
   const formattedData = (val, formatter) => {
     switch (formatter) {
@@ -81733,8 +81892,8 @@ const SingleValueChart = ({
         return val;
       case "3s":
       case "adaptive": {
-        const value = adaptiveFormatter(val, true);
-        return value;
+        const value2 = adaptiveFormatter(val, true);
+        return value2;
       }
       case "d": {
         const n2 = parseInt(val, 10);
@@ -81745,89 +81904,89 @@ const SingleValueChart = ({
         for (let i2 = 1; i2 < val.toString().length; i2 += 1) {
           num += 0;
         }
-        const value = adaptiveFormatter(num, false);
-        return value;
+        const value2 = adaptiveFormatter(num, false);
+        return value2;
       }
       case "1f": {
         const num = parseFloat(val.toFixed(1));
-        const value = comaFormatter.format(num);
+        const value2 = comaFormatter.format(num);
         if (val.toString().includes(".")) {
-          return value;
+          return value2;
         }
-        return `${value}.${Array(2).join("0")}`;
+        return `${value2}.${Array(2).join("0")}`;
       }
       case "2f": {
         const num = parseFloat(val.toFixed(2));
-        const value = comaFormatter.format(num);
+        const value2 = comaFormatter.format(num);
         if (val.toString().includes(".")) {
           const arr = val.toString().split(".");
           if (arr[1].length > 1) {
-            return value;
+            return value2;
           }
-          return `${value}.${Array(2).join("0")}`;
+          return `${value2}.${Array(2).join("0")}`;
         }
-        return `${value}.${Array(3).join("0")}`;
+        return `${value2}.${Array(3).join("0")}`;
       }
       case "3f": {
         const num = parseFloat(val.toFixed(3));
-        const value = comaFormatter.format(num);
+        const value2 = comaFormatter.format(num);
         if (val.toString().includes(".")) {
           const arr = val.toString().split(".");
           if (arr[1].length > 1) {
-            return value;
+            return value2;
           }
-          return `${value}.${Array(3).join("0")}`;
+          return `${value2}.${Array(3).join("0")}`;
         }
-        return `${value}.${Array(4).join("0")}`;
+        return `${value2}.${Array(4).join("0")}`;
       }
       case "+": {
         return `+${comaFormatter.format(val)}`;
       }
       case "$": {
         const num = parseFloat(val.toFixed(2));
-        const value = comaFormatter.format(num);
+        const value2 = comaFormatter.format(num);
         if (val.toString().includes(".")) {
           const arr = val.toString().split(".");
           if (arr[1].length > 1) {
-            return `$${value}`;
+            return `$${value2}`;
           }
-          return `$${value}.${Array(2).join("0")}`;
+          return `$${value2}.${Array(2).join("0")}`;
         }
-        return `$${value}.${Array(3).join("0")}`;
+        return `$${value2}.${Array(3).join("0")}`;
       }
       case "1%": {
         const num = val * 100;
-        const value = comaFormatter.format(num);
+        const value2 = comaFormatter.format(num);
         if (val.toString().includes(".")) {
-          return `${value}%`;
+          return `${value2}%`;
         }
-        return `${value}.${Array(2).join("0")}%`;
+        return `${value2}.${Array(2).join("0")}%`;
       }
       case "2%": {
         const num = val * 100;
         const num2 = parseFloat(val.toFixed(2));
-        const value = comaFormatter.format(num2);
+        const value2 = comaFormatter.format(num2);
         if (num.toString().includes(".")) {
           const arr = val.toString().split(".");
           if (arr[1].length > 1) {
-            return `${value}%`;
+            return `${value2}%`;
           }
-          return `${value}.${Array(2).join("0")}`;
+          return `${value2}.${Array(2).join("0")}`;
         }
-        return `${value}.${Array(3).join("0")}%`;
+        return `${value2}.${Array(3).join("0")}%`;
       }
       case "3%": {
         const num = val * 100;
         const num2 = parseFloat(val.toFixed(3));
-        const value = comaFormatter.format(num2);
+        const value2 = comaFormatter.format(num2);
         if (num.toString().includes(".")) {
           const arr = val.toString().split(".");
           if (arr[1].length > 1) {
-            return `${value}%`;
+            return `${value2}%`;
           }
-          return `${value}.${Array(3).join("0")}`;
+          return `${value2}.${Array(3).join("0")}`;
         }
-        return `${value}.${Array(4).join("0")}%`;
+        return `${value2}.${Array(4).join("0")}%`;
       }
       case "ms1": {
         const seconds = Math.floor(val / 1e3);
@@ -81887,15 +82046,23 @@ const SingleValueChart = ({
         return val;
     }
   };
+  const value = ((_a2 = data2[0]) == null ? void 0 : _a2.value) && ((_b2 = data2[0]) == null ? void 0 : _b2.value.toString().length) > 16 ? dateFormatter((_c2 = data2[0]) == null ? void 0 : _c2.value, customSettings.dateFormatter) : formattedData((_d = data2[0]) == null ? void 0 : _d.value, customSettings.numberFormatter);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$x.container,
     children: [/* @__PURE__ */ jsx("div", {
       style: valueFont,
+      onClick: () => {
+        handleChartClick(chartClickConfig, value || "");
+      },
+      className: hover,
       children: (data2 == null ? void 0 : data2.length) && /* @__PURE__ */ jsx(Fragment, {
-        children: ((_a2 = data2[0]) == null ? void 0 : _a2.value) && ((_b2 = data2[0]) == null ? void 0 : _b2.value.toString().length) > 16 ? dateFormatter((_c2 = data2[0]) == null ? void 0 : _c2.value, customSettings.dateFormatter) : formattedData((_d = data2[0]) == null ? void 0 : _d.value, customSettings.numberFormatter)
+        children: value
       })
     }), /* @__PURE__ */ jsx("div", {
       style: subHeaderFont,
+      onClick: () => {
+        handleChartClick(chartClickConfig, customSettings.displayText || "");
+      },
       children: customSettings.subHeaderShow && customSettings.displayText
     })]
   });
@@ -81907,7 +82074,8 @@ const BoxPlot = ({
   axisSettings,
   enableSaveAs,
   colors: colors2,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const modifiedData = [];
@@ -82026,22 +82194,28 @@ const BoxPlot = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      onEvents: {
+        click: (params) => {
+          var _a3;
+          handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
+        }
+      }
     })
   });
 };
-const tableSection = "_tableSection_20k3k_1";
-const tableContainer = "_tableContainer_20k3k_5";
-const tableDiv = "_tableDiv_20k3k_9";
-const table$4 = "_table_20k3k_1";
-const tableHead$1 = "_tableHead_20k3k_17";
-const tableHeadColHash = "_tableHeadColHash_20k3k_21";
-const tableCol = "_tableCol_20k3k_25";
-const tableColLabel = "_tableColLabel_20k3k_29";
-const data = "_data_20k3k_33";
-const tableBodyColHash = "_tableBodyColHash_20k3k_37";
-const tableBodyColHashLabel = "_tableBodyColHashLabel_20k3k_41";
-const noData$1 = "_noData_20k3k_53";
+const tableSection = "_tableSection_rwcfo_1";
+const tableContainer = "_tableContainer_rwcfo_5";
+const tableDiv = "_tableDiv_rwcfo_9";
+const table$4 = "_table_rwcfo_1";
+const tableHead$1 = "_tableHead_rwcfo_17";
+const tableHeadColHash = "_tableHeadColHash_rwcfo_21";
+const tableCol = "_tableCol_rwcfo_25";
+const tableColLabel = "_tableColLabel_rwcfo_29";
+const data = "_data_rwcfo_33";
+const tableBodyColHash = "_tableBodyColHash_rwcfo_37";
+const tableBodyColHashLabel = "_tableBodyColHashLabel_rwcfo_41";
+const noData$1 = "_noData_rwcfo_53";
 var style$1 = {
   tableSection,
   tableContainer,
@@ -82054,8 +82228,8 @@ var style$1 = {
   data,
   tableBodyColHash,
   tableBodyColHashLabel,
-  "table-loader-container": "_table-loader-container_20k3k_45",
-  "table-error-message": "_table-error-message_20k3k_49",
+  "table-loader-container": "_table-loader-container_rwcfo_45",
+  "table-error-message": "_table-error-message_rwcfo_49",
   noData: noData$1
 };
 var classnames = { exports: {} };
@@ -82147,8 +82321,42 @@ const Text = ({
     children: children2
   });
 };
+var styles$v = {
+  "btn-primary": "_btn-primary_1h5ze_1",
+  "btn-secondary": "_btn-secondary_1h5ze_5",
+  "btn-reject": "_btn-reject_1h5ze_9",
+  "btn-outlined": "_btn-outlined_1h5ze_14",
+  "btn-tertiary": "_btn-tertiary_1h5ze_18",
+  "btn-default": "_btn-default_1h5ze_22",
+  "btn-large": "_btn-large_1h5ze_25",
+  "btn-small": "_btn-small_1h5ze_28",
+  "btn-xs": "_btn-xs_1h5ze_31",
+  "btn-medium": "_btn-medium_1h5ze_34",
+  "btn-11rem": "_btn-11rem_1h5ze_38"
+};
+const Button = ({
+  isDisabled = false,
+  type: type3 = "button",
+  className,
+  children: children2 = "",
+  variant = "primary",
+  size = "none",
+  onClick,
+  title: title2
+}) => {
+  const btnClasses = classNames(className, styles$v[`btn-${variant}`], size === "none" ? null : styles$v[`btn-${size}`]);
+  return /* @__PURE__ */ jsx("button", {
+    type: type3,
+    className: variant === "custom" ? className : btnClasses,
+    onClick,
+    disabled: isDisabled,
+    title: title2,
+    children: children2
+  });
+};
 const TableChart = ({
-  data: data2
+  data: data2,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2;
   let k = 0;
@@ -82212,11 +82420,13 @@ const TableChart = ({
                   return /* @__PURE__ */ jsx(Fragment, {
                     children: /* @__PURE__ */ jsx("td", {
                       className: style$1.tableCol,
-                      children: /* @__PURE__ */ jsx(Text, {
-                        styleClass: "font-14",
-                        variant: "p",
+                      children: /* @__PURE__ */ jsx(Button, {
+                        variant: "custom",
+                        type: "button",
                         className: style$1.tableColLabel,
-                        children: d2
+                        isDisabled: !chartClickConfig.isEnable,
+                        onClick: () => handleChartClick(chartClickConfig, JSON.stringify(d2)),
+                        children: JSON.stringify(d2)
                       })
                     }, d2 + index2)
                   });
@@ -82245,7 +82455,8 @@ const MetricChart = ({
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  backGroundColor
+  backGroundColor,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2, _d;
   if (chartType2 === CHART_TYPES.line) {
@@ -82258,7 +82469,8 @@ const MetricChart = ({
       customSettings,
       enableSaveAs,
       updateGroup,
-      isEnableGroupBy
+      isEnableGroupBy,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.stepped) {
@@ -82274,7 +82486,8 @@ const MetricChart = ({
       colors: colors2,
       updateGroup,
       isEnableGroupBy,
-      backGroundColor
+      backGroundColor,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.bar) {
@@ -82288,7 +82501,8 @@ const MetricChart = ({
       labelSettings,
       axisSettings,
       customSettings,
-      margins
+      margins,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.stack) {
@@ -82303,7 +82517,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.histogram) {
@@ -82318,7 +82533,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.bubble) {
@@ -82333,7 +82549,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.scatter) {
@@ -82348,7 +82565,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.row) {
@@ -82362,7 +82580,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.area) {
@@ -82380,7 +82599,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.combo) {
@@ -82400,7 +82620,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.pie) {
@@ -82412,7 +82633,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       updateGroup,
-      isEnableGroupBy
+      isEnableGroupBy,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.doughnut) {
@@ -82424,7 +82646,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       updateGroup,
-      isEnableGroupBy
+      isEnableGroupBy,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.waterfall) {
@@ -82453,7 +82676,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.funnel) {
@@ -82462,7 +82686,8 @@ const MetricChart = ({
       margins,
       legendSettings,
       labelSettings,
-      colors: colors2
+      colors: colors2,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.gauge) {
@@ -82472,7 +82697,8 @@ const MetricChart = ({
       legendSettings,
       labelSettings,
       enableSaveAs,
-      colors: colors2
+      colors: colors2,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.sankey) {
@@ -82483,7 +82709,8 @@ const MetricChart = ({
       labelSettings,
       enableSaveAs,
       colors: colors2,
-      backGroundColor
+      backGroundColor,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.singleValue) {
@@ -82491,7 +82718,8 @@ const MetricChart = ({
       data: singleValueData2,
       margins,
       labelSettings,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.boxplot) {
@@ -82503,7 +82731,8 @@ const MetricChart = ({
       axisSettings,
       enableSaveAs,
       colors: colors2,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.table) {
@@ -82511,7 +82740,8 @@ const MetricChart = ({
       data: data2,
       margins,
       legendSettings,
-      labelSettings
+      labelSettings,
+      chartClickConfig
     });
   }
   return /* @__PURE__ */ jsx("div", {
@@ -82519,39 +82749,6 @@ const MetricChart = ({
     children: "No chart selected"
   });
 };
-var styles$v = {
-  "btn-primary": "_btn-primary_1h5ze_1",
-  "btn-secondary": "_btn-secondary_1h5ze_5",
-  "btn-reject": "_btn-reject_1h5ze_9",
-  "btn-outlined": "_btn-outlined_1h5ze_14",
-  "btn-tertiary": "_btn-tertiary_1h5ze_18",
-  "btn-default": "_btn-default_1h5ze_22",
-  "btn-large": "_btn-large_1h5ze_25",
-  "btn-small": "_btn-small_1h5ze_28",
-  "btn-xs": "_btn-xs_1h5ze_31",
-  "btn-medium": "_btn-medium_1h5ze_34",
-  "btn-11rem": "_btn-11rem_1h5ze_38"
-};
-const Button = ({
-  isDisabled = false,
-  type: type3 = "button",
-  className,
-  children: children2 = "",
-  variant = "primary",
-  size = "none",
-  onClick,
-  title: title2
-}) => {
-  const btnClasses = classNames(className, styles$v[`btn-${variant}`], size === "none" ? null : styles$v[`btn-${size}`]);
-  return /* @__PURE__ */ jsx("button", {
-    type: type3,
-    className: variant === "custom" ? className : btnClasses,
-    onClick,
-    disabled: isDisabled,
-    title: title2,
-    children: children2
-  });
-};
 const mdiDotsVertical = (props) => /* @__PURE__ */ jsx("svg", {
   viewBox: "0 0 24 24",
   width: "1.2em",
@@ -86457,6 +86654,22 @@ const MetricCard = ({
   const [singleValue2, setSingleValue] = useState("");
   const [dataDb, setData] = useState([]);
   const [rlsConditions, setRlsConditions] = useState([]);
+  const [clickBehaviourConfigs, setClickBehaviourConfigs] = useState({
+    card: {
+      isEnable: false,
+      baseUrl: "",
+      dynamic: "none",
+      route: "",
+      routeType: "internal"
+    },
+    chart: {
+      isEnable: false,
+      baseUrl: "",
+      dynamic: "{{value}}",
+      route: "/{{value}}",
+      routeType: "internal"
+    }
+  });
   const {
     data: metricdata,
     isLoading: isQueryLoading
@@ -86547,6 +86760,22 @@ const MetricCard = ({
     setSelectedGroupBy(metricItem == null ? void 0 : metricItem.selectedGroupBy);
     setGroupBy(metricItem == null ? void 0 : metricItem.groupBy);
     setRlsConditions((metricItem == null ? void 0 : metricItem.rlsConditions) || []);
+    setClickBehaviourConfigs(metricItem.clickActions || {
+      card: {
+        isEnable: false,
+        baseUrl: "",
+        dynamic: "none",
+        route: "",
+        routeType: "internal"
+      },
+      chart: {
+        isEnable: false,
+        baseUrl: "",
+        dynamic: "{{value}}",
+        route: "/{{value}}",
+        routeType: "internal"
+      }
+    });
   }, [metricItem]);
   useEffect(() => {
     setData(queryData != null ? queryData : []);
@@ -86628,7 +86857,14 @@ const MetricCard = ({
           variant: "h3",
           styleClass: "primary",
           className: styles$z.metricName,
-          children: [renderHeaderName ? renderHeaderName(metricItem.name) : metricItem.name, metricItem.description && /* @__PURE__ */ jsx("span", {
+          children: [renderHeaderName ? renderHeaderName(metricItem.name) : /* @__PURE__ */ jsx(Button, {
+            type: "button",
+            variant: "custom",
+            isDisabled: !clickBehaviourConfigs.card.isEnable,
+            className: "disabled:cursor-text",
+            onClick: () => handleCardClick(clickBehaviourConfigs, metricItem.metricId, metricItem.id),
+            children: metricItem.name
+          }), metricItem.description && /* @__PURE__ */ jsx("span", {
             className: styles$z.metricDescription,
             children: metricItem.description
           })]
@@ -86668,7 +86904,8 @@ const MetricCard = ({
                 axisSettings,
                 customSettings,
                 backGroundColor,
-                enableSaveAs: true
+                enableSaveAs: true,
+                chartClickConfig: clickBehaviourConfigs.chart
               }),
               children: [/* @__PURE__ */ jsx(ggMinimize, {}), " Enter Fullscreen"]
             }), /* @__PURE__ */ jsx(CsvDownloadButton, {
@@ -86723,7 +86960,8 @@ const MetricCard = ({
           updateGroup,
           isEnableGroupBy,
           customSettings,
-          backGroundColor
+          backGroundColor,
+          chartClickConfig: clickBehaviourConfigs.chart
         }) : null]
       })]
     })
@@ -86752,6 +86990,22 @@ const SingleValueCard = ({
   const [singleValue2, setSingleValue] = useState("");
   const [dataDb, setData] = useState([]);
   const [rlsConditions, setRlsConditions] = useState([]);
+  const [clickBehaviourConfigs, setClickBehaviourConfigs] = useState({
+    card: {
+      isEnable: false,
+      baseUrl: "",
+      dynamic: "none",
+      route: "",
+      routeType: "internal"
+    },
+    chart: {
+      isEnable: false,
+      baseUrl: "",
+      dynamic: "{{value}}",
+      route: "/{{value}}",
+      routeType: "internal"
+    }
+  });
   const [customSettings, setCustomSettings] = useState({
     hideSplitLines: "none",
     hideAxisLines: "none",
@@ -86800,6 +87054,22 @@ const SingleValueCard = ({
       dateFormatter: "none",
       numberFormatter: "original"
     });
+    setClickBehaviourConfigs(metricItem.clickActions || {
+      card: {
+        isEnable: false,
+        baseUrl: "",
+        dynamic: "none",
+        route: "",
+        routeType: "internal"
+      },
+      chart: {
+        isEnable: false,
+        baseUrl: "",
+        dynamic: "{{value}}",
+        route: "/{{value}}",
+        routeType: "internal"
+      }
+    });
   }, [metricItem]);
   useEffect(() => {
     setData(queryData != null ? queryData : []);
@@ -86822,7 +87092,14 @@ const SingleValueCard = ({
           variant: "h3",
           styleClass: "primary",
           className: styles$z.metricName,
-          children: [renderHeaderName ? renderHeaderName(metricItem.name) : metricItem.name, metricItem.description && /* @__PURE__ */ jsx("span", {
+          children: [renderHeaderName ? renderHeaderName(metricItem.name) : /* @__PURE__ */ jsx(Button, {
+            type: "button",
+            variant: "custom",
+            isDisabled: !clickBehaviourConfigs.card.isEnable,
+            className: "disabled:cursor-text",
+            onClick: () => handleCardClick(clickBehaviourConfigs, metricItem.metricId, metricItem.id),
+            children: metricItem.name
+          }), metricItem.description && /* @__PURE__ */ jsx("span", {
             className: styles$z.metricDescription,
             children: metricItem.description
           })]
@@ -86848,7 +87125,8 @@ const SingleValueCard = ({
         }) : /* @__PURE__ */ jsx(Fragment, {
           children: singleValueData2.length ? /* @__PURE__ */ jsx(SingleValueChart, {
             data: chartData,
-            customSettings
+            customSettings,
+            chartClickConfig: clickBehaviourConfigs.chart
           }) : /* @__PURE__ */ jsx("div", {
             className: styles$z.noData,
             children: /* @__PURE__ */ jsxs("div", {
@@ -86975,7 +87253,14 @@ const FullScreenChart = ({
         axisSettings: chart.axisSettings,
         backGroundColor: chart.backGroundColor,
         enableSaveAs: true,
-        customSettings: chart.customSettings
+        customSettings: chart.customSettings,
+        chartClickConfig: {
+          isEnable: false,
+          baseUrl: "",
+          dynamic: "{{value}}",
+          route: "/{{value}}",
+          routeType: "internal"
+        }
       })
     })
   });
@@ -87350,23 +87635,23 @@ const Dataset = ({
     })]
   });
 };
-const container$a = "_container_3ro5s_1";
-const header$2 = "_header_3ro5s_7";
-const headerText = "_headerText_3ro5s_13";
-const tab$2 = "_tab_3ro5s_19";
-const tabText$1 = "_tabText_3ro5s_25";
-const tabHeading = "_tabHeading_3ro5s_31";
-const form$3 = "_form_3ro5s_37";
-const inputWrapper = "_inputWrapper_3ro5s_43";
-const input = "_input_3ro5s_43";
-const selectWrapper = "_selectWrapper_3ro5s_55";
-const select = "_select_3ro5s_55";
-const label$2 = "_label_3ro5s_67";
-const series = "_series_3ro5s_73";
-const legendWrapper = "_legendWrapper_3ro5s_79";
-const seriesWrapper = "_seriesWrapper_3ro5s_85";
-const valueLabelWrapper = "_valueLabelWrapper_3ro5s_91";
-const singleCheckBox = "_singleCheckBox_3ro5s_97";
+const container$a = "_container_1cslw_1";
+const header$2 = "_header_1cslw_7";
+const headerText = "_headerText_1cslw_13";
+const tab$2 = "_tab_1cslw_19";
+const tabText$1 = "_tabText_1cslw_25";
+const tabHeading = "_tabHeading_1cslw_31";
+const form$3 = "_form_1cslw_37";
+const inputWrapper = "_inputWrapper_1cslw_43";
+const input = "_input_1cslw_43";
+const selectWrapper = "_selectWrapper_1cslw_55";
+const select = "_select_1cslw_55";
+const label$2 = "_label_1cslw_67";
+const series = "_series_1cslw_73";
+const legendWrapper = "_legendWrapper_1cslw_79";
+const seriesWrapper = "_seriesWrapper_1cslw_85";
+const valueLabelWrapper = "_valueLabelWrapper_1cslw_91";
+const singleCheckBox = "_singleCheckBox_1cslw_97";
 var styles$i = {
   container: container$a,
   header: header$2,
@@ -87487,12 +87772,15 @@ const ChartConfigure = ({
   const [activeTab2, setActiveTab] = useState("Margins");
   return /* @__PURE__ */ jsxs("div", {
     className: styles$i.container,
-    children: [/* @__PURE__ */ jsx(Tab, {
-      options: chartType2 !== "single value" ? TabList : singleValueTabs,
-      activeTab: activeTab2,
-      setActiveTab,
-      className: styles$i.tab,
-      tabText: styles$i.tabText
+    children: [/* @__PURE__ */ jsx("div", {
+      className: "h-[10%]",
+      children: /* @__PURE__ */ jsx(Tab, {
+        options: chartType2 !== "single value" ? TabList : singleValueTabs,
+        activeTab: activeTab2,
+        setActiveTab,
+        className: styles$i.tab,
+        tabText: styles$i.tabText
+      })
     }), /* @__PURE__ */ jsxs("form", {
       className: styles$i.form,
       children: [activeTab2 === "Margins" && /* @__PURE__ */ jsxs("div", {
@@ -88028,22 +88316,22 @@ const ChartConfigure = ({
     })]
   });
 };
-const chartButtonContainer$1 = "_chartButtonContainer_6600c_17";
-const tabContainer = "_tabContainer_6600c_25";
-const tab = "_tab_6600c_25";
-const tabText = "_tabText_6600c_41";
-const chartButtons$1 = "_chartButtons_6600c_49";
-const chartButton$1 = "_chartButton_6600c_1";
-const chartButtonSelected = "_chartButtonSelected_6600c_65";
-const chartTypesButton = "_chartTypesButton_6600c_73";
-const button$2 = "_button_6600c_81";
-const propertyButton = "_propertyButton_6600c_89";
-const settings = "_settings_6600c_9";
-const crossIcon = "_crossIcon_6600c_105";
+const chartButtonContainer$1 = "_chartButtonContainer_mrrhu_1";
+const tabContainer = "_tabContainer_mrrhu_23";
+const tab = "_tab_mrrhu_23";
+const tabText = "_tabText_mrrhu_39";
+const chartButtons$1 = "_chartButtons_mrrhu_47";
+const chartButton$1 = "_chartButton_mrrhu_1";
+const chartButtonSelected = "_chartButtonSelected_mrrhu_63";
+const chartTypesButton = "_chartTypesButton_mrrhu_71";
+const button$2 = "_button_mrrhu_79";
+const propertyButton = "_propertyButton_mrrhu_87";
+const settings = "_settings_mrrhu_15";
+const crossIcon = "_crossIcon_mrrhu_103";
 var styles$f = {
-  "chartButton-header": "_chartButton-header_6600c_1",
-  "settingsTab-header-control": "_settingsTab-header-control_6600c_9",
   chartButtonContainer: chartButtonContainer$1,
+  "chartButton-header": "_chartButton-header_mrrhu_7",
+  "settingsTab-header-control": "_settingsTab-header-control_mrrhu_15",
   tabContainer,
   tab,
   tabText,
@@ -88070,20 +88358,20 @@ const SelectField = ({
     name: yAxisValue ? yAxisValue : value
   });
 };
-const chartOptions = "_chartOptions_jdb8o_1";
-const chartOption = "_chartOption_jdb8o_1";
-const chartOptionBtn = "_chartOptionBtn_jdb8o_13";
-const chartOptionText = "_chartOptionText_jdb8o_19";
-const container$8 = "_container_jdb8o_25";
-const field$1 = "_field_jdb8o_31";
-const fieldText = "_fieldText_jdb8o_37";
-const doneBtn = "_doneBtn_jdb8o_43";
-const measureText = "_measureText_jdb8o_49";
-const singleValueMeasure = "_singleValueMeasure_jdb8o_55";
-const plus = "_plus_jdb8o_61";
-const plusIcon = "_plusIcon_jdb8o_67";
-const form$2 = "_form_jdb8o_73";
-const chartType = "_chartType_jdb8o_79";
+const chartOptions = "_chartOptions_yt3j5_1";
+const chartOption = "_chartOption_yt3j5_1";
+const chartOptionBtn = "_chartOptionBtn_yt3j5_13";
+const chartOptionText = "_chartOptionText_yt3j5_19";
+const container$8 = "_container_yt3j5_25";
+const field$1 = "_field_yt3j5_31";
+const fieldText = "_fieldText_yt3j5_37";
+const doneBtn = "_doneBtn_yt3j5_43";
+const measureText = "_measureText_yt3j5_49";
+const singleValueMeasure = "_singleValueMeasure_yt3j5_55";
+const plus = "_plus_yt3j5_61";
+const plusIcon = "_plusIcon_yt3j5_67";
+const form$2 = "_form_yt3j5_73";
+const chartType = "_chartType_yt3j5_79";
 var styles$e = {
   chartOptions,
   chartOption,
@@ -88838,35 +89126,35 @@ const ChartSettings = ({
     })]
   });
 };
-const searchCommand$1 = "_searchCommand_1jfcs_9";
-const chartText = "_chartText_1jfcs_25";
-const charts = "_charts_1jfcs_33";
-const metricChart = "_metricChart_1jfcs_41";
-const metricChartEmpty = "_metricChartEmpty_1jfcs_49";
-const fullQuery = "_fullQuery_1jfcs_73";
-const noQuery = "_noQuery_1jfcs_81";
-const chartButtonContainer = "_chartButtonContainer_1jfcs_105";
-const searchWrapper = "_searchWrapper_1jfcs_113";
-const searchIcon = "_searchIcon_1jfcs_121";
-const chartConfigure = "_chartConfigure_1jfcs_129";
-const chartSettings = "_chartSettings_1jfcs_137";
-const labels = "_labels_1jfcs_145";
-const chartButtons = "_chartButtons_1jfcs_153";
-const chartButton = "_chartButton_1jfcs_97";
+const searchCommand$1 = "_searchCommand_x33uc_9";
+const chartText = "_chartText_x33uc_25";
+const charts = "_charts_x33uc_33";
+const metricChart = "_metricChart_x33uc_41";
+const metricChartEmpty = "_metricChartEmpty_x33uc_49";
+const fullQuery = "_fullQuery_x33uc_73";
+const noQuery = "_noQuery_x33uc_81";
+const chartButtonContainer = "_chartButtonContainer_x33uc_105";
+const searchWrapper = "_searchWrapper_x33uc_113";
+const searchIcon = "_searchIcon_x33uc_121";
+const chartConfigure = "_chartConfigure_x33uc_129";
+const chartSettings = "_chartSettings_x33uc_137";
+const labels = "_labels_x33uc_145";
+const chartButtons = "_chartButtons_x33uc_153";
+const chartButton = "_chartButton_x33uc_97";
 var styles$d = {
-  "outputTab-header": "_outputTab-header_1jfcs_1",
+  "outputTab-header": "_outputTab-header_x33uc_1",
   searchCommand: searchCommand$1,
-  "chartTab-container": "_chartTab-container_1jfcs_17",
+  "chartTab-container": "_chartTab-container_x33uc_17",
   chartText,
   charts,
   metricChart,
   metricChartEmpty,
-  "chartTab-wrapper": "_chartTab-wrapper_1jfcs_57",
-  "chartTab-wrapper-head": "_chartTab-wrapper-head_1jfcs_65",
+  "chartTab-wrapper": "_chartTab-wrapper_x33uc_57",
+  "chartTab-wrapper-head": "_chartTab-wrapper-head_x33uc_65",
   fullQuery,
   noQuery,
-  "tableTab-header": "_tableTab-header_1jfcs_89",
-  "chartButton-header": "_chartButton-header_1jfcs_97",
+  "tableTab-header": "_tableTab-header_x33uc_89",
+  "chartButton-header": "_chartButton-header_x33uc_97",
   chartButtonContainer,
   searchWrapper,
   searchIcon,
@@ -88971,11 +89259,14 @@ const ChartTab = ({
       })]
     }), !!(data2 == null ? void 0 : data2.length) && !isLoading && /* @__PURE__ */ jsxs("div", {
       className: styles$d.metricChart,
-      children: [/* @__PURE__ */ jsx(Text, {
-        styleClass: "primary",
-        variant: "p",
-        className: "",
-        children: "Preview"
+      children: [/* @__PURE__ */ jsx("div", {
+        className: "h-[10%]",
+        children: /* @__PURE__ */ jsx(Text, {
+          styleClass: "primary",
+          variant: "p",
+          className: "",
+          children: "Preview"
+        })
       }), /* @__PURE__ */ jsxs("div", {
         className: styles$d["chartTab-wrapper"],
         children: [/* @__PURE__ */ jsxs("div", {
@@ -89053,6 +89344,13 @@ const ChartTab = ({
             backGroundColor,
             updateGroup,
             isEnableGroupBy,
+            chartClickConfig: {
+              isEnable: false,
+              baseUrl: "",
+              dynamic: "{{value}}",
+              route: "/{{value}}",
+              routeType: "internal"
+            },
             enableSaveAs: true
           })
         }) : /* @__PURE__ */ jsxs("div", {
@@ -89098,7 +89396,14 @@ const ChartTab = ({
         axisSettings,
         customSettings,
         backGroundColor,
-        enableSaveAs: true
+        enableSaveAs: true,
+        chartClickConfig: {
+          isEnable: false,
+          baseUrl: "",
+          dynamic: "{{value}}",
+          route: "/{{value}}",
+          routeType: "internal"
+        }
       }
     })]
   });