@databrainhq/plugin 0.7.1 → 0.7.2

package/dist/components/GlobalFilters/index.d.ts

@@ -5,6 +5,7 @@ declare type GlobalFiltersProps = {
     filters: FilterType[];
     companyId: string;
     onApply: (filters: MetricCardProps['globalFilters']) => void;
+    renderAdditionalHeaderContent?: () => JSX.Element;
 };
 export declare const GlobalFilters: React.FC<GlobalFiltersProps>;
 export {};

package/dist/components/InfoTooltip/index.d.ts

@@ -1,2 +1,8 @@
 import React, { PropsWithChildren } from 'react';
-export declare const InfoTooltip: React.FC<PropsWithChildren>;
+declare type TooltipProps = PropsWithChildren & {
+    content: JSX.Element;
+    className?: string;
+};
+export declare const Tooltip: React.FC<TooltipProps>;
+export declare const InfoTooltip: React.FC<Omit<TooltipProps, 'content'>>;
+export {};

package/dist/components/InputField/index.d.ts

@@ -1,25 +1,15 @@
 import { UseFormRegisterReturn } from 'react-hook-form';
 import React from 'react';
-interface Props {
-    id?: string;
-    value?: string;
-    name?: string;
-    placeholder?: string;
+interface Props extends React.HTMLProps<HTMLInputElement> {
     label?: string;
-    type: string;
-    onBlur?: () => void;
-    onFocus?: () => void;
-    onKeyDown?: () => void;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    labelVariant?: 'floating' | 'static';
     register?: UseFormRegisterReturn;
-    defaultValue?: string | number | readonly string[] | undefined;
     error?: any;
     icon?: any;
-    checked?: boolean;
     isDisabled?: boolean;
     labelClass?: string;
     inputClass?: string;
-    className?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const InputField: ({ id, name, value, placeholder, label, type, onBlur, onFocus, onChange, onKeyDown, defaultValue, register, error, icon, checked, isDisabled, labelClass, inputClass, className, }: Props) => JSX.Element;
+export declare const InputField: ({ type, register, error, icon, label, isDisabled, labelClass, inputClass, className, labelVariant, ...rest }: Props) => JSX.Element;
 export {};

package/dist/components/MetricCreation/components/MetricOutput/MetricOutput.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { MetricOutputProps } from '@/types/metricCreate';
-export declare const MetricOutput: ({ data, error, isLoading, labels, funnelData, chartType, datasets, setChartType, setXAxis, setYAxisList, xAxis, setMeasure, setStep, step, measure, setSankeyValues, sankeyData, previewTableDataList, singleValue, setSingleValue, singleValueData, setMargins, margins, legendSettings, setLegendSettings, labelSettings, setLabelSettings, axisSettings, setAxisSettings, customSettings, setCustomSettings, updateGroup, isEnableGroupBy, backGroundColor, setBackGroundColor, }: MetricOutputProps) => JSX.Element;
+export declare const MetricOutput: ({ data, error, isLoading, labels, funnelData, chartType, datasets, setChartType, setXAxis, setYAxisList, xAxis, setMeasure, setStep, step, measure, setSankeyValues, sankeyData, previewTableDataList, singleValue, setSingleValue, singleValueData, setMargins, margins, legendSettings, setLegendSettings, labelSettings, setLabelSettings, axisSettings, setAxisSettings, customSettings, setCustomSettings, updateGroup, isEnableGroupBy, backGroundColor, setBackGroundColor, moreTabs, }: MetricOutputProps) => JSX.Element;

package/dist/components/MetricList/components/MetricCard.d.ts

@@ -13,5 +13,6 @@ export declare type MetricCardProps = {
     colors?: string[];
     param?: any;
     companyTenancyType: string;
+    renderHeaderName?: (name: string) => JSX.Element;
 };
 export declare const MetricCard: React.FC<MetricCardProps>;

package/dist/index.es.js

@@ -7841,22 +7841,23 @@ var styles$A = {
   "noMetric-wrapper": "_noMetric-wrapper_1b506_25",
   "alt-container": "_alt-container_1b506_33"
 };
-const cardContainer = "_cardContainer_grkp6_1";
-const listHeader = "_listHeader_grkp6_9";
-const metricName = "_metricName_grkp6_17";
-const metricDescription = "_metricDescription_grkp6_25";
-const popup$1 = "_popup_grkp6_33";
-const popupIcon = "_popupIcon_grkp6_41";
-const popupMenu = "_popupMenu_grkp6_49";
-const popupItem = "_popupItem_grkp6_57";
-const csvBtn = "_csvBtn_grkp6_65";
-const csvIcon = "_csvIcon_grkp6_73";
-const metricData = "_metricData_grkp6_81";
-const singleValueData = "_singleValueData_grkp6_89";
-const singleValue = "_singleValue_grkp6_89";
-const noData$2 = "_noData_grkp6_105";
-const loading = "_loading_grkp6_113";
-const features$1 = "_features_grkp6_121";
+const cardContainer = "_cardContainer_18lqx_1";
+const listHeader = "_listHeader_18lqx_9";
+const metricName = "_metricName_18lqx_17";
+const metricDescription = "_metricDescription_18lqx_25";
+const popup$1 = "_popup_18lqx_33";
+const popupIcon = "_popupIcon_18lqx_41";
+const popupMenu = "_popupMenu_18lqx_49";
+const popupItem = "_popupItem_18lqx_57";
+const csvBtn = "_csvBtn_18lqx_65";
+const metricData = "_metricData_18lqx_73";
+const singleValueData = "_singleValueData_18lqx_81";
+const singleValue = "_singleValue_18lqx_81";
+const noData$2 = "_noData_18lqx_97";
+const noDataContent = "_noDataContent_18lqx_105";
+const noDataText = "_noDataText_18lqx_113";
+const loading = "_loading_18lqx_121";
+const features$1 = "_features_18lqx_129";
 var styles$z = {
   cardContainer,
   listHeader,
@@ -7867,17 +7868,18 @@ var styles$z = {
   popupMenu,
   popupItem,
   csvBtn,
-  csvIcon,
   metricData,
   singleValueData,
   singleValue,
   noData: noData$2,
+  noDataContent,
+  noDataText,
   loading,
   features: features$1
 };
 const fetcher = (query, variables, options2) => {
   return async () => {
-    const res = await fetch("https://backend.usedatabrain.com/v1/graphql", {
+    const res = await fetch("http://backend.usedatabrain.com/v1/graphql", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -8122,54 +8124,6 @@ const useQueryExternalMetricQuery = (variables, options2) => useQuery(
   fetcher(QueryExternalMetricDocument, variables),
   options2
 );
-var classnames = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-(function(module) {
-  (function() {
-    var hasOwn2 = {}.hasOwnProperty;
-    function classNames2() {
-      var classes = [];
-      for (var i2 = 0; i2 < arguments.length; i2++) {
-        var arg = arguments[i2];
-        if (!arg)
-          continue;
-        var argType = typeof arg;
-        if (argType === "string" || argType === "number") {
-          classes.push(arg);
-        } else if (Array.isArray(arg)) {
-          if (arg.length) {
-            var inner2 = classNames2.apply(null, arg);
-            if (inner2) {
-              classes.push(inner2);
-            }
-          }
-        } else if (argType === "object") {
-          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-            classes.push(arg.toString());
-            continue;
-          }
-          for (var key in arg) {
-            if (hasOwn2.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(" ");
-    }
-    if (module.exports) {
-      classNames2.default = classNames2;
-      module.exports = classNames2;
-    } else {
-      window.classNames = classNames2;
-    }
-  })();
-})(classnames);
-var classNames = classnames.exports;
 const csvlink = "_csvlink_azd6y_1";
 const noChart = "_noChart_azd6y_7";
 var styles$y = {
@@ -8390,14 +8344,18 @@ const objectArrayToCsvString = (array) => {
   const columns = [];
   const objSchema = array[0];
   const headers = Object.keys(objSchema);
-  columns.push(`S.No,${headers.join(",").toUpperCase()}`);
+  columns.push(`S.NO,${headers.join(",").toUpperCase()}`);
   array.forEach((rowObj, index2) => {
     const row2 = Object.values(rowObj).map((value2) => {
       if (typeof value2 === "number") {
         return value2;
       }
-      if (value2 == null ? void 0 : value2.includes(",")) {
-        return `"${value2}"`;
+      try {
+        if (value2 == null ? void 0 : value2.includes(",")) {
+          return `"${value2}"`;
+        }
+      } catch {
+        return value2;
       }
       return value2;
     });
@@ -8468,7 +8426,7 @@ const CsvDownloadButton = ({
   return /* @__PURE__ */ jsxs("a", {
     href: objectArrayToCsvString(data2),
     download: `${fileName}.csv`,
-    className: classNames(styles$y.csvlink, className),
+    className: className != null ? className : styles$y.csvlink,
     target: "_self",
     children: [/* @__PURE__ */ jsx(laFileDownload, {
       className: iconClass
@@ -81708,6 +81666,54 @@ var styles$x = {
   value,
   sync
 };
+var classnames = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(module) {
+  (function() {
+    var hasOwn2 = {}.hasOwnProperty;
+    function classNames2() {
+      var classes = [];
+      for (var i2 = 0; i2 < arguments.length; i2++) {
+        var arg = arguments[i2];
+        if (!arg)
+          continue;
+        var argType = typeof arg;
+        if (argType === "string" || argType === "number") {
+          classes.push(arg);
+        } else if (Array.isArray(arg)) {
+          if (arg.length) {
+            var inner2 = classNames2.apply(null, arg);
+            if (inner2) {
+              classes.push(inner2);
+            }
+          }
+        } else if (argType === "object") {
+          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+            classes.push(arg.toString());
+            continue;
+          }
+          for (var key in arg) {
+            if (hasOwn2.call(arg, key) && arg[key]) {
+              classes.push(key);
+            }
+          }
+        }
+      }
+      return classes.join(" ");
+    }
+    if (module.exports) {
+      classNames2.default = classNames2;
+      module.exports = classNames2;
+    } else {
+      window.classNames = classNames2;
+    }
+  })();
+})(classnames);
+var classNames = classnames.exports;
 const primary = "_primary_18yak_1";
 const secondary = "_secondary_18yak_5";
 const tertiary = "_tertiary_18yak_10";
@@ -82429,16 +82435,20 @@ var styles$u = {
   icon: icon$1,
   container: container$f
 };
-const label$4 = "_label_1eud5_1";
-const checkboxLabel = "_checkboxLabel_1eud5_13";
-const input$1 = "_input_1eud5_7";
-const checkboxField = "_checkboxField_1eud5_25";
-const inputWrapper$1 = "_inputWrapper_1eud5_33";
+const label$4 = "_label_9xvk4_1";
+const floatingLabel$1 = "_floatingLabel_9xvk4_7";
+const checkboxLabel = "_checkboxLabel_9xvk4_19";
+const input$1 = "_input_9xvk4_13";
+const floatingInput = "_floatingInput_9xvk4_31";
+const checkboxField = "_checkboxField_9xvk4_37";
+const inputWrapper$1 = "_inputWrapper_9xvk4_45";
 var styles$t = {
   label: label$4,
-  "inputField-container": "_inputField-container_1eud5_7",
+  floatingLabel: floatingLabel$1,
+  "inputField-container": "_inputField-container_9xvk4_13",
   checkboxLabel,
   input: input$1,
+  floatingInput,
   checkboxField,
   inputWrapper: inputWrapper$1
 };
@@ -82457,36 +82467,25 @@ const Error$1 = ({
   });
 };
 const InputField = ({
-  id: id2,
-  name,
-  value: value2,
-  placeholder = "",
-  label: label2,
   type: type3,
-  onBlur,
-  onFocus,
-  onChange,
-  onKeyDown,
-  defaultValue,
   register: register2,
   error: error2,
   icon: icon2,
-  checked,
+  label: label2,
   isDisabled,
   labelClass,
   inputClass,
-  className
+  className,
+  labelVariant = "static",
+  ...rest
 }) => {
   return type3 === "checkbox" ? /* @__PURE__ */ jsxs("div", {
     className: `${styles$t.checkboxField} ${className != null ? className : ""}`,
     children: [/* @__PURE__ */ jsx("input", {
+      ...rest,
       type: "checkbox",
-      name,
       className: inputClass,
-      onChange,
       ...register2,
-      defaultValue,
-      checked,
       disabled: isDisabled
     }), label2 ? /* @__PURE__ */ jsxs("label", {
       htmlFor: label2,
@@ -82497,22 +82496,14 @@ const InputField = ({
     className: `${styles$t["inputField-container"]} ${className != null ? className : ""}`,
     children: [label2 ? /* @__PURE__ */ jsx("label", {
       htmlFor: label2,
-      className: `${styles$t.label} ${labelClass}`,
+      className: `${styles$t.label} ${labelVariant === "floating" ? styles$t.floatingLabel : ""} ${labelClass}`,
       children: label2
     }) : null, /* @__PURE__ */ jsxs("div", {
       className: styles$t.inputWrapper,
       children: [/* @__PURE__ */ jsx("input", {
-        id: id2,
-        value: value2,
-        name,
+        ...rest,
         type: type3,
-        onFocus,
-        onBlur,
-        onChange,
-        onKeyDown,
-        className: `${styles$t.input} ${inputClass}`,
-        placeholder,
-        defaultValue,
+        className: `${styles$t.input} ${labelVariant === "floating" ? styles$t.floatingInput : ""} ${inputClass}`,
         ...register2,
         disabled: isDisabled
       }), icon2]
@@ -86225,6 +86216,7 @@ const MetricFilters = ({
     })
   });
 };
+var NoData = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6I2RhZGVkZjt9LmNscy03e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIxMC41LDIwMC44M2MuNC0uNjYuNjgtMS40LjgyLTIuMiwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguNDMtNC41Ni0yLjA5LTkuNjgtNi44Ni0xMC42Ni0uMDEsMC0uMDMsMC0uMDQsMC0yLjQtLjQ5LTUuMDItLjIyLTcuNDUtLjIyaC00NC4yMmMtLjUyLDAtMi4zMy0uMzEtMi43NywwbC0yNC4yOCwxNy4yMmgtNjEuNjFjLTMuOTcsMC02Ljk5LDMuNTYtNi4zNCw3LjQ3bDkuNzUsNTkuNDJjLjUxLDMuMTEsMy4yLDUuMzksNi4zNCw1LjM5aDExNy44NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIwNywxMTQuNDN2LTguNTRjMC0zLjU1LTIuODgtNi40My02LjQzLTYuNDNoLTE3LjE5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTAzLjQ3LDk5LjQ2aC0xNS4xMmMtMy41NSwwLTYuNDMsMi44OC02LjQzLDYuNDN2MjUuNDgiLz48Zz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxMTQuMTIiIHkxPSI5NC4wOCIgeDI9IjE0NC44NCIgeTI9Ijk0LjA4Ii8+PGc+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIxMTIuNjEiIHk9IjEwMi40MyIgd2lkdGg9IjE4Ljk3IiBoZWlnaHQ9IjMuMiIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTM3LjYxIiB5PSIxMDIuNDMiIHdpZHRoPSI4LjkiIGhlaWdodD0iMy4yIi8+PC9nPjwvZz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNjQuOTgsODEuNDZsLS4wOCwxNi4yOHMuMTUsMy4yNC4zLDMuNjIuNiwxLjUxLDEuMTMsMS44OCwxLjAyLjc5LDEuNzcsMS4wNi45NC40OSwyLjExLjQ5LDE4LjE3LjA0LDE4LjE3LjA0bC0yMy40MS0yMy4zN1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xODguNTEsMTA0LjkxdjkuNTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDMuNTMsMTMxLjM3di00NC45NWMwLTIuODQsMi4zLTUuMTUsNS4xNS01LjE1LDE4Ljc3LDAsMzcuNTQsMCw1Ni4zMSwwIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTY1LjAxLDgxLjI3djE4LjM1YzAsMi44NCwyLjMxLDUuMTUsNS4xNSw1LjE1aDE4LjM1cy0yMy41LTIzLjYyLTIzLjUtMjMuNVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMjQuOTYiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMzEuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xOTIuNTcsMTgzLjMzYzkuNjIsOS42MiwzMC4yOCwzMC4yOCwzMC4yOCwzMC4yOCwxLjE3LDEuMTcsMS4xNywzLjA3LDAsNC4yNHMtMy4wNywxLjE3LTQuMjQsMGMwLDAtMjAuNTgtMjAuNTgtMzAuMjItMzAuMjIiLz48Zz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNjguNjYsMTcwLjkzYy0uNzQsMC0xLjM0LjI0LTEuODEuNzItLjQ3LjQ4LS43MSwxLjA5LS43MSwxLjgzcy4yNCwxLjMyLjcxLDEuODFjLjQ3LjQ5LDEuMDcuNzQsMS44MS43NHMxLjM0LS4yNSwxLjgxLS43NGMuNDctLjQ5LjcxLTEuMS43MS0xLjgxcy0uMjQtMS4zNC0uNzEtMS44M2MtLjQ3LS40OC0xLjA4LS43Mi0xLjgxLS43MloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNzQuNjksMTUzLjc3Yy0uNjItMS4wMi0xLjQ5LTEuODItMi42LTIuNC0xLjEyLS41Ny0yLjQtLjg2LTMuODUtLjg2LTEuNjgsMC0zLjE3LjQtNC40NywxLjE5cy0yLjI5LDEuOTQtMi45OCwzLjQzbDIuNzYsMi4yOGMuNDYtMS4wNiwxLjA3LTEuODYsMS44NS0yLjQuNzctLjU0LDEuNjUtLjgxLDIuNjQtLjgxLjc2LDAsMS40MS4xNCwxLjk3LjQxLjU1LjI4Ljk4LjY3LDEuMjgsMS4xNy4zLjUxLjQ1LDEuMS40NSwxLjc5cy0uMTYsMS4yOS0uNDcsMS44MWMtLjMxLjUyLS43NS45Mi0xLjMxLDEuMjEtLjU2LjI5LTEuMjIuNDMtMS45OC40M2gtLjkzdjYuNjZoMy4yOGwuMjYtMy43M2MuNzEtLjI0LDEuMzctLjU1LDEuOTUtLjkzLjk5LS42NCwxLjc1LTEuNDUsMi4yOS0yLjQxLjU0LS45Ny44MS0yLjA3LjgxLTMuMzEsMC0xLjMzLS4zMS0yLjUxLS45My0zLjU0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im04NS41NSwyMDMuOTdjLjY4LDIuODksMy4yNiw0Ljk2LDYuMjYsNC45NmgxMTcuNzMiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMTUuMzcsMjA2LjA0Yy40Ny0uNzEuOC0xLjUyLjk1LTIuNCwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguMzktNC4xNi0xLjY4LTguNzktNS42Ny0xMC4zMSIvPjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIyMy41MSwxMjAuMDhzLjQ5LDEuNjIuNTMsMS43My4zMiwyLjQ0LjMyLDIuNDRsLS4wNCwxLjkxLTEuMzgsNy4xMy0zLjM5LDE5LjMxLTIuODksMTUuOTItMi45NiwxNi43Ni0yLjQ0LDEzLjE2LS45MiwyLjY1LDQuOTgsNS4xNS44NS0yLjE1LjgxLTQuMDYsMS40OC04LjMzLDIuODItMTUuNzEsMi4xNS0xMi4xMSwxLjk0LTExLjM2LDIuNzUtMTQuNzUuODgtNC42OS4yOC0yLjU4LjA3LTIuMTItLjYtMi43NS0xLjI0LTIuMzYtMS4wOS0xLjU5LTIuMDEtMS4zMS0uOTItLjI4WiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNyIgcG9pbnRzPSI4NS42OCAyMDMuOTMgMjA0LjU1IDIwMy44NCAyMDkuMzUgMjA4LjczIDE0OC40OCAyMDguODggOTAuOTUgMjA5LjAyIDg5LjUgMjA4LjY2IDg3Ljk4IDIwNy45MiA4Ni44MiAyMDYuNTggODYuMDEgMjA1LjAzIDg1LjY4IDIwMy45MyIvPjwvc3ZnPg==";
 const MetricCard = ({
   globalFilters = {
     tableName: "",
@@ -86235,7 +86227,8 @@ const MetricCard = ({
   client,
   colors: colors2,
   param,
-  companyTenancyType
+  companyTenancyType,
+  renderHeaderName
 }) => {
   var _a2;
   const filterValues2 = {};
@@ -86413,7 +86406,7 @@ const MetricCard = ({
           variant: "h3",
           styleClass: "primary",
           className: styles$z.metricName,
-          children: [metricItem.name, metricItem.description && /* @__PURE__ */ jsx("span", {
+          children: [renderHeaderName ? renderHeaderName(metricItem.name) : metricItem.name, metricItem.description && /* @__PURE__ */ jsx("span", {
             className: styles$z.metricDescription,
             children: metricItem.description
           })]
@@ -86435,7 +86428,7 @@ const MetricCard = ({
             position: "bottom-right",
             children: [/* @__PURE__ */ jsxs(Button, {
               type: "button",
-              variant: "secondary",
+              variant: "custom",
               className: styles$z.popupItem,
               onClick: () => onMaximize({
                 labels: labels2,
@@ -86460,7 +86453,6 @@ const MetricCard = ({
               data: dataDb,
               fileName: metricItem.name,
               className: `${styles$z.popupItem} ${styles$z.csvBtn}`,
-              iconClass: styles$z.csvIcon,
               text: "Save As CSV"
             })]
           })]
@@ -86469,7 +86461,18 @@ const MetricCard = ({
         className: styles$z.metricData,
         children: [!isQueryLoading && !dataDb.length ? /* @__PURE__ */ jsx("div", {
           className: styles$z.noData,
-          children: "No Data Available"
+          children: /* @__PURE__ */ jsxs("div", {
+            className: styles$z.noDataContent,
+            children: [/* @__PURE__ */ jsx("img", {
+              src: NoData,
+              alt: "",
+              width: "300px",
+              height: "300px"
+            }), /* @__PURE__ */ jsx("div", {
+              className: styles$z.noDataText,
+              children: "No Data Available"
+            })]
+          })
         }) : null, isQueryLoading && /* @__PURE__ */ jsx("div", {
           className: styles$z.loading,
           children: /* @__PURE__ */ jsx(eosIconsLoading, {
@@ -86512,7 +86515,8 @@ const SingleValueCard = ({
   metricItem,
   client,
   param,
-  companyTenancyType
+  companyTenancyType,
+  renderHeaderName
 }) => {
   var _a2;
   const filterValues2 = {};
@@ -86596,7 +86600,7 @@ const SingleValueCard = ({
           variant: "h3",
           styleClass: "primary",
           className: styles$z.metricName,
-          children: [metricItem.name, metricItem.description && /* @__PURE__ */ jsx("span", {
+          children: [renderHeaderName ? renderHeaderName(metricItem.name) : metricItem.name, metricItem.description && /* @__PURE__ */ jsx("span", {
             className: styles$z.metricDescription,
             children: metricItem.description
           })]
@@ -86625,7 +86629,21 @@ const SingleValueCard = ({
             variant: "p",
             className: styles$z.singleValue,
             children: valueLength > 3 ? convertedValue : singleValueData2[0]
-          }) : "No Data Available"
+          }) : /* @__PURE__ */ jsx("div", {
+            className: styles$z.noData,
+            children: /* @__PURE__ */ jsxs("div", {
+              className: styles$z.noDataContent,
+              children: [/* @__PURE__ */ jsx("img", {
+                src: NoData,
+                alt: "",
+                width: "300px",
+                height: "300px"
+              }), /* @__PURE__ */ jsx("div", {
+                className: styles$z.noDataText,
+                children: "No Data Available"
+              })]
+            })
+          })
         })
       })]
     })
@@ -87201,19 +87219,31 @@ const akarIconsInfo = (props) => /* @__PURE__ */ jsx("svg", {
     })]
   })
 });
-const InfoTooltip = ({
-  children: children2
+const Tooltip = ({
+  children: children2,
+  content: content2,
+  className = ""
 }) => {
   return /* @__PURE__ */ jsxs("span", {
-    className: styles$g.container,
-    children: [/* @__PURE__ */ jsx(akarIconsInfo, {
-      color: "#182C60"
-    }), /* @__PURE__ */ jsx("span", {
+    className: `${styles$g.container} ${className}`,
+    children: [content2, /* @__PURE__ */ jsx("span", {
       className: styles$g.tooltip,
       children: children2
     })]
   });
 };
+const InfoTooltip = ({
+  children: children2,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(Tooltip, {
+    className,
+    content: /* @__PURE__ */ jsx(akarIconsInfo, {
+      color: "#182C60"
+    }),
+    children: children2
+  });
+};
 const ChartConfigure = ({
   setMargins,
   margins,
@@ -89028,8 +89058,10 @@ const MetricOutput = ({
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
-  setBackGroundColor
+  setBackGroundColor,
+  moreTabs
 }) => {
+  var _a2;
   const [selectedTab2, setSelectedTab] = useState(TABLE_TAB);
   return /* @__PURE__ */ jsxs("div", {
     className: styles$8["main-container"],
@@ -89047,7 +89079,13 @@ const MetricOutput = ({
         className: `${styles$8.tabButton} ${selectedTab2 === CHART_TAB && styles$8.tabActive}`,
         onClick: () => setSelectedTab(CHART_TAB),
         children: [/* @__PURE__ */ jsx(phChartLineUpDuotone, {}), "Visualizations"]
-      })]
+      }), moreTabs == null ? void 0 : moreTabs.map((tabObj) => /* @__PURE__ */ jsx(Button, {
+        type: "button",
+        variant: "custom",
+        className: `${styles$8.tabButton} ${selectedTab2 === tabObj.name && styles$8.tabActive}`,
+        onClick: () => setSelectedTab(tabObj.name),
+        children: tabObj.tab
+      }, tabObj.name))]
     }), /* @__PURE__ */ jsxs("div", {
       className: styles$8.wrapper,
       children: [selectedTab2 === TABLE_TAB && /* @__PURE__ */ jsx(TableTab, {
@@ -89089,7 +89127,7 @@ const MetricOutput = ({
         isLoading,
         backGroundColor,
         setBackGroundColor
-      })]
+      }), (_a2 = moreTabs == null ? void 0 : moreTabs.find((tabObj) => tabObj.name === selectedTab2)) == null ? void 0 : _a2.tabContent]
     })]
   });
 };
@@ -89398,12 +89436,8 @@ const MetricForm = ({
         variant: "h1",
         styleClass: "custom",
         className: styles$7["field-label"],
-        children: ["Metric Creation", /* @__PURE__ */ jsxs("span", {
-          className: styles$7.tooltipWrapper,
-          children: [/* @__PURE__ */ jsx(akarIconsInfo, {}), /* @__PURE__ */ jsx("span", {
-            className: styles$7.tooltip,
-            children: "configure metric columns"
-          })]
+        children: ["Metric Creation", /* @__PURE__ */ jsx(InfoTooltip, {
+          children: "configure metric columns"
         })]
       }), /* @__PURE__ */ jsx("div", {
         className: styles$7["field-wrapper"],
@@ -89493,12 +89527,8 @@ const MetricForm = ({
         variant: "h1",
         styleClass: "custom",
         className: styles$7["field-label"],
-        children: ["Columns", /* @__PURE__ */ jsxs("span", {
-          className: styles$7.tooltipWrapper,
-          children: [/* @__PURE__ */ jsx(akarIconsInfo, {}), /* @__PURE__ */ jsx("span", {
-            className: styles$7.tooltip,
-            children: "select columns for raw records query"
-          })]
+        children: ["Columns", /* @__PURE__ */ jsx(InfoTooltip, {
+          children: "select columns for raw records query"
         })]
       }), /* @__PURE__ */ jsx("div", {
         className: styles$7["field-wrapper"],
@@ -90456,23 +90486,25 @@ const EmbeddedMetricCreation = ({
     })]
   });
 };
-const container$1 = "_container_150wy_1";
-const form = "_form_150wy_7";
-const filterHeader = "_filterHeader_150wy_13";
-const title = "_title_150wy_19";
-const buttons = "_buttons_150wy_25";
-const apply = "_apply_150wy_31";
-const applyIcon = "_applyIcon_150wy_37";
-const reset = "_reset_150wy_43";
-const filterFields = "_filterFields_150wy_49";
-const filters = "_filters_150wy_55";
-const filterItem = "_filterItem_150wy_61";
-const filterItemOperator = "_filterItemOperator_150wy_67";
-const remove = "_remove_150wy_73";
+const container$1 = "_container_i4dx9_1";
+const form = "_form_i4dx9_7";
+const filterHeader = "_filterHeader_i4dx9_13";
+const titleContent = "_titleContent_i4dx9_19";
+const title = "_title_i4dx9_19";
+const buttons = "_buttons_i4dx9_31";
+const apply = "_apply_i4dx9_37";
+const applyIcon = "_applyIcon_i4dx9_43";
+const reset = "_reset_i4dx9_49";
+const filterFields = "_filterFields_i4dx9_55";
+const filters = "_filters_i4dx9_61";
+const filterItem = "_filterItem_i4dx9_67";
+const filterItemOperator = "_filterItemOperator_i4dx9_73";
+const remove = "_remove_i4dx9_79";
 var styles$2 = {
   container: container$1,
   form,
   filterHeader,
+  titleContent,
   title,
   buttons,
   apply,
@@ -90764,7 +90796,8 @@ const getFormattedFilterValue = (obj) => {
 const GlobalFilters = ({
   filters: filters2,
   onApply,
-  companyId
+  companyId,
+  renderAdditionalHeaderContent
 }) => {
   const [appliedfilters, setAppliedFilters] = useState([]);
   const resetFilters = () => {
@@ -90807,11 +90840,14 @@ const GlobalFilters = ({
         onReset: resetFilters,
         children: [/* @__PURE__ */ jsxs("div", {
           className: styles$2.filterHeader,
-          children: [/* @__PURE__ */ jsx(Text, {
-            variant: "p",
-            styleClass: "primary",
-            className: styles$2.title,
-            children: "Filters:"
+          children: [/* @__PURE__ */ jsxs("div", {
+            className: styles$2.titleContent,
+            children: [/* @__PURE__ */ jsx(Text, {
+              variant: "p",
+              styleClass: "primary",
+              className: styles$2.title,
+              children: "Filters:"
+            }), renderAdditionalHeaderContent ? renderAdditionalHeaderContent() : null]
           }), /* @__PURE__ */ jsxs("div", {
             className: styles$2.buttons,
             children: [/* @__PURE__ */ jsxs(Button, {
@@ -91112,6 +91148,7 @@ var index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   isNullFilterOperator,
   FilterField,
   GlobalFilters,
+  Tooltip,
   InfoTooltip,
   InputField,
   CsvDownloadButton,