@databrainhq/plugin 0.7.5 → 0.7.6

package/dist/index.es.js

@@ -2570,7 +2570,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 +8028,7 @@ const EmbeddedDashboardMetricsDocument = `
       companyIntegration {
         name
       }
+      clickActions
     }
   }
 }
@@ -79534,6 +79538,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 +79589,8 @@ const AreaChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const option2 = {
@@ -79649,7 +79694,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 +79725,8 @@ const BarChart = ({
   labelSettings,
   axisSettings,
   margins,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -79780,7 +79832,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 +79863,8 @@ const ComboChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const choice = ["bar", "line"];
@@ -79934,7 +79993,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 +80024,8 @@ const LineChart = ({
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -80068,7 +80134,7 @@ const LineChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          updateGroup(params.name);
+          handleChartClick(chartClickConfig, params.name);
         }
       }
     })]
@@ -80082,7 +80148,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 +80251,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 +80341,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 +80363,8 @@ const RowChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const option2 = {
@@ -80389,7 +80469,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 +80501,8 @@ const ScatterChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const option2 = {
@@ -80514,7 +80601,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 +80632,8 @@ const WaterFallChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -80641,7 +80735,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 +80761,8 @@ const FunnelChart = ({
   margins,
   legendSettings,
   labelSettings,
-  colors: colors2
+  colors: colors2,
+  chartClickConfig
 }) => {
   const option2 = {
     tooltip: {
@@ -80734,7 +80835,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 +80855,8 @@ const BubbleChart = ({
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const modifiedData = [];
@@ -80872,7 +80980,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 +81009,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 +81171,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 +81203,8 @@ const SteppedAreaChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const choice = ["start", "middle", "end"];
@@ -81185,7 +81307,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 +81339,8 @@ const Histogram = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -81308,7 +81437,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 +81463,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 +81559,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 +81573,8 @@ const SankeyChart = ({
   margins,
   enableSaveAs,
   colors: colors2,
-  backGroundColor
+  backGroundColor,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2;
   const allValues = [];
@@ -81508,7 +81651,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 +81672,8 @@ const StackedBarChart = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -81629,7 +81779,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 +81800,9 @@ const StackedBarChart = ({
     })]
   });
 };
-const container$g = "_container_hxsc7_1";
-const label$5 = "_label_hxsc7_7";
-const sync = "_sync_hxsc7_13";
+const container$g = "_container_1vqip_1";
+const label$5 = "_label_1vqip_7";
+const sync = "_sync_1vqip_13";
 var styles$x = {
   container: container$g,
   label: label$5,
@@ -81654,7 +81810,8 @@ var styles$x = {
 };
 const SingleValueChart = ({
   data: data2,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2, _d;
   const subHeaderFont = {
@@ -81663,36 +81820,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 +81858,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 +81891,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 +81903,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 +82045,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 +82073,8 @@ const BoxPlot = ({
   axisSettings,
   enableSaveAs,
   colors: colors2,
-  customSettings
+  customSettings,
+  chartClickConfig
 }) => {
   var _a2;
   const modifiedData = [];
@@ -82026,22 +82193,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_tcrid_1";
+const tableContainer = "_tableContainer_tcrid_5";
+const tableDiv = "_tableDiv_tcrid_9";
+const table$4 = "_table_tcrid_1";
+const tableHead$1 = "_tableHead_tcrid_17";
+const tableHeadColHash = "_tableHeadColHash_tcrid_21";
+const tableCol = "_tableCol_tcrid_25";
+const tableColLabel = "_tableColLabel_tcrid_29";
+const data = "_data_tcrid_33";
+const tableBodyColHash = "_tableBodyColHash_tcrid_37";
+const tableBodyColHashLabel = "_tableBodyColHashLabel_tcrid_41";
+const noData$1 = "_noData_tcrid_53";
 var style$1 = {
   tableSection,
   tableContainer,
@@ -82054,8 +82227,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_tcrid_45",
+  "table-error-message": "_table-error-message_tcrid_49",
   noData: noData$1
 };
 var classnames = { exports: {} };
@@ -82147,8 +82320,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 +82419,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 +82454,8 @@ const MetricChart = ({
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  backGroundColor
+  backGroundColor,
+  chartClickConfig
 }) => {
   var _a2, _b2, _c2, _d;
   if (chartType2 === CHART_TYPES.line) {
@@ -82258,7 +82468,8 @@ const MetricChart = ({
       customSettings,
       enableSaveAs,
       updateGroup,
-      isEnableGroupBy
+      isEnableGroupBy,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.stepped) {
@@ -82274,7 +82485,8 @@ const MetricChart = ({
       colors: colors2,
       updateGroup,
       isEnableGroupBy,
-      backGroundColor
+      backGroundColor,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.bar) {
@@ -82288,7 +82500,8 @@ const MetricChart = ({
       labelSettings,
       axisSettings,
       customSettings,
-      margins
+      margins,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.stack) {
@@ -82303,7 +82516,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.histogram) {
@@ -82318,7 +82532,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.bubble) {
@@ -82333,7 +82548,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.scatter) {
@@ -82348,7 +82564,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.row) {
@@ -82362,7 +82579,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.area) {
@@ -82380,7 +82598,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.combo) {
@@ -82400,7 +82619,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.pie) {
@@ -82412,7 +82632,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       updateGroup,
-      isEnableGroupBy
+      isEnableGroupBy,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.doughnut) {
@@ -82424,7 +82645,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       updateGroup,
-      isEnableGroupBy
+      isEnableGroupBy,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.waterfall) {
@@ -82453,7 +82675,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.funnel) {
@@ -82462,7 +82685,8 @@ const MetricChart = ({
       margins,
       legendSettings,
       labelSettings,
-      colors: colors2
+      colors: colors2,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.gauge) {
@@ -82472,7 +82696,8 @@ const MetricChart = ({
       legendSettings,
       labelSettings,
       enableSaveAs,
-      colors: colors2
+      colors: colors2,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.sankey) {
@@ -82483,7 +82708,8 @@ const MetricChart = ({
       labelSettings,
       enableSaveAs,
       colors: colors2,
-      backGroundColor
+      backGroundColor,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.singleValue) {
@@ -82491,7 +82717,8 @@ const MetricChart = ({
       data: singleValueData2,
       margins,
       labelSettings,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.boxplot) {
@@ -82503,7 +82730,8 @@ const MetricChart = ({
       axisSettings,
       enableSaveAs,
       colors: colors2,
-      customSettings
+      customSettings,
+      chartClickConfig
     });
   }
   if (chartType2 === CHART_TYPES.table) {
@@ -82511,7 +82739,8 @@ const MetricChart = ({
       data: data2,
       margins,
       legendSettings,
-      labelSettings
+      labelSettings,
+      chartClickConfig
     });
   }
   return /* @__PURE__ */ jsx("div", {
@@ -82519,39 +82748,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 +86653,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 +86759,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 +86856,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 +86903,8 @@ const MetricCard = ({
                 axisSettings,
                 customSettings,
                 backGroundColor,
-                enableSaveAs: true
+                enableSaveAs: true,
+                chartClickConfig: clickBehaviourConfigs.chart
               }),
               children: [/* @__PURE__ */ jsx(ggMinimize, {}), " Enter Fullscreen"]
             }), /* @__PURE__ */ jsx(CsvDownloadButton, {
@@ -86723,7 +86959,8 @@ const MetricCard = ({
           updateGroup,
           isEnableGroupBy,
           customSettings,
-          backGroundColor
+          backGroundColor,
+          chartClickConfig: clickBehaviourConfigs.chart
         }) : null]
       })]
     })
@@ -86752,6 +86989,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 +87053,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 +87091,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 +87124,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 +87252,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"
+        }
       })
     })
   });
@@ -89053,6 +89337,13 @@ const ChartTab = ({
             backGroundColor,
             updateGroup,
             isEnableGroupBy,
+            chartClickConfig: {
+              isEnable: false,
+              baseUrl: "",
+              dynamic: "{{value}}",
+              route: "/{{value}}",
+              routeType: "internal"
+            },
             enableSaveAs: true
           })
         }) : /* @__PURE__ */ jsxs("div", {
@@ -89098,7 +89389,14 @@ const ChartTab = ({
         axisSettings,
         customSettings,
         backGroundColor,
-        enableSaveAs: true
+        enableSaveAs: true,
+        chartClickConfig: {
+          isEnable: false,
+          baseUrl: "",
+          dynamic: "{{value}}",
+          route: "/{{value}}",
+          routeType: "internal"
+        }
       }
     })]
   });