@databrainhq/plugin 0.7.20 → 0.7.22

package/dist/index.es.js

@@ -4139,6 +4139,42 @@ function useForm(props = {}) {
   _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
   return _formControl.current;
 }
+const chartOptions = "_chartOptions_ltlvy_1";
+const chartOption = "_chartOption_ltlvy_1";
+const chartOptionBtn = "_chartOptionBtn_ltlvy_13";
+const chartOptionText = "_chartOptionText_ltlvy_19";
+const chartOptionBtnSelected = "_chartOptionBtnSelected_ltlvy_25";
+const container$f = "_container_ltlvy_31";
+const field$1 = "_field_ltlvy_37";
+const fieldText = "_fieldText_ltlvy_43";
+const selectFieldContainer = "_selectFieldContainer_ltlvy_49";
+const selectField = "_selectField_ltlvy_49";
+const doneBtn = "_doneBtn_ltlvy_61";
+const measureText = "_measureText_ltlvy_67";
+const singleValueMeasure = "_singleValueMeasure_ltlvy_73";
+const plus = "_plus_ltlvy_79";
+const plusIcon = "_plusIcon_ltlvy_85";
+const form$3 = "_form_ltlvy_91";
+const chartType = "_chartType_ltlvy_97";
+var styles$A = {
+  chartOptions,
+  chartOption,
+  chartOptionBtn,
+  chartOptionText,
+  chartOptionBtnSelected,
+  container: container$f,
+  field: field$1,
+  fieldText,
+  selectFieldContainer,
+  selectField,
+  doneBtn,
+  measureText,
+  singleValueMeasure,
+  plus,
+  plusIcon,
+  form: form$3,
+  chartType
+};
 const e$3 = typeof window == "undefined" || typeof document == "undefined";
 let s$5 = e$3 ? useEffect : useLayoutEffect;
 function s$4(e2) {
@@ -4902,37 +4938,37 @@ let xe = "div", ne = S.RenderStrategy, re = C$2(function(e2, s2) {
   let n2 = useContext(F) !== null, m2 = s() !== null;
   return React__default.createElement(React__default.Fragment, null, !n2 && m2 ? React__default.createElement(q, { ref: s$12, ...e2 }) : React__default.createElement(re, { ref: s$12, ...e2 }));
 }), We = Object.assign(q, { Child: Pe, Root: q });
-const listBoxButton = "_listBoxButton_1mdwz_5";
-const selectedOptionText = "_selectedOptionText_1mdwz_17";
-const transitionDiv = "_transitionDiv_1mdwz_21";
-const listboxButtonWrapper = "_listboxButtonWrapper_1mdwz_25";
-const arrowicon = "_arrowicon_1mdwz_28";
-const leave$1 = "_leave_1mdwz_31";
-const leaveFrom$1 = "_leaveFrom_1mdwz_34";
-const leaveTo$1 = "_leaveTo_1mdwz_37";
-const notAvailable = "_notAvailable_1mdwz_40";
-const option$1 = "_option_1mdwz_43";
-const activeOption = "_activeOption_1mdwz_46";
-const optionSelected = "_optionSelected_1mdwz_49";
-const inactiveOption = "_inactiveOption_1mdwz_52";
-const optionLabel = "_optionLabel_1mdwz_55";
-const optionSubLabel = "_optionSubLabel_1mdwz_58";
-const selectedLabel = "_selectedLabel_1mdwz_61";
-const nonselectedLabel = "_nonselectedLabel_1mdwz_64";
-const check = "_check_1mdwz_67";
-const checkActive = "_checkActive_1mdwz_70";
-const checkInactive = "_checkInactive_1mdwz_73";
-const checkIcon$1 = "_checkIcon_1mdwz_76";
-const checkIconSelected = "_checkIconSelected_1mdwz_79";
-const checkIconUnselected = "_checkIconUnselected_1mdwz_82";
-const loadMore$1 = "_loadMore_1mdwz_85";
-const selectedList = "_selectedList_1mdwz_88";
-const selectedListItem = "_selectedListItem_1mdwz_91";
+const listBoxButton = "_listBoxButton_1xd0l_5";
+const selectedOptionText = "_selectedOptionText_1xd0l_17";
+const transitionDiv = "_transitionDiv_1xd0l_21";
+const listboxButtonWrapper = "_listboxButtonWrapper_1xd0l_25";
+const arrowicon = "_arrowicon_1xd0l_28";
+const leave$1 = "_leave_1xd0l_31";
+const leaveFrom$1 = "_leaveFrom_1xd0l_34";
+const leaveTo$1 = "_leaveTo_1xd0l_37";
+const notAvailable = "_notAvailable_1xd0l_40";
+const option$1 = "_option_1xd0l_43";
+const activeOption = "_activeOption_1xd0l_46";
+const optionSelected = "_optionSelected_1xd0l_49";
+const inactiveOption = "_inactiveOption_1xd0l_52";
+const optionLabel = "_optionLabel_1xd0l_55";
+const optionSubLabel = "_optionSubLabel_1xd0l_58";
+const selectedLabel = "_selectedLabel_1xd0l_61";
+const nonselectedLabel = "_nonselectedLabel_1xd0l_64";
+const check = "_check_1xd0l_67";
+const checkActive = "_checkActive_1xd0l_70";
+const checkInactive = "_checkInactive_1xd0l_73";
+const checkIcon$1 = "_checkIcon_1xd0l_76";
+const checkIconSelected = "_checkIconSelected_1xd0l_79";
+const checkIconUnselected = "_checkIconUnselected_1xd0l_82";
+const loadMore$1 = "_loadMore_1xd0l_85";
+const selectedList = "_selectedList_1xd0l_88";
+const selectedListItem = "_selectedListItem_1xd0l_91";
 var style$1 = {
-  "listBox-label": "_listBox-label_1mdwz_1",
-  "listBoxButton-container": "_listBoxButton-container_1mdwz_5",
+  "listBox-label": "_listBox-label_1xd0l_1",
+  "listBoxButton-container": "_listBoxButton-container_1xd0l_5",
   listBoxButton,
-  "listBox-option": "_listBox-option_1mdwz_13",
+  "listBox-option": "_listBox-option_1xd0l_13",
   selectedOptionText,
   transitionDiv,
   listboxButtonWrapper,
@@ -4962,7 +4998,7 @@ var style$1 = {
 const primary = "_primary_18yak_1";
 const secondary = "_secondary_18yak_5";
 const tertiary = "_tertiary_18yak_10";
-var styles$A = {
+var styles$z = {
   primary,
   secondary,
   tertiary,
@@ -4996,14 +5032,14 @@ const Text = ({
 }) => {
   const Tag = variants[variant];
   return /* @__PURE__ */ jsx(Tag, {
-    className: classnames(styleClass === "custom" ? null : `${styles$A[styleClass]}`, className),
+    className: classnames(styleClass === "custom" ? null : `${styles$z[styleClass]}`, className),
     onClick,
     style: style2,
     children: children2
   });
 };
 const search$1 = "_search_1klck_1";
-var styles$z = {
+var styles$y = {
   "searchTab-container": "_searchTab-container_1klck_1",
   "searchTab-input": "_searchTab-input_1klck_5",
   search: search$1
@@ -5035,13 +5071,13 @@ const SearchTab = ({
     setSearchKeyword(keyword == null ? void 0 : keyword.toLowerCase());
   }, [setSearchKeyword, watch, keyword]);
   return /* @__PURE__ */ jsxs("div", {
-    className: `${styles$z["searchTab-container"]} ${className}`,
+    className: `${styles$y["searchTab-container"]} ${className}`,
     children: [/* @__PURE__ */ jsx("input", {
       placeholder: "Search",
       ...register2("searchKeyword"),
-      className: styles$z["searchTab-input"]
+      className: styles$y["searchTab-input"]
     }), /* @__PURE__ */ jsx("div", {
-      className: styles$z.search,
+      className: styles$y.search,
       children: /* @__PURE__ */ jsx(iconoirSearch, {
         color: "#C7C7C7",
         width: "30px",
@@ -5181,9 +5217,7 @@ const Select = ({
 const HookSelect = ({
   control,
   name,
-  options: options2,
-  label: label2,
-  defaultValue: defaultValue2
+  ...rest
 }) => {
   return /* @__PURE__ */ jsx(Controller, {
     control,
@@ -5194,11 +5228,9 @@ const HookSelect = ({
         value
       }
     }) => /* @__PURE__ */ jsx(Select, {
+      ...rest,
       onChange,
-      value,
-      label: label2,
-      options: options2,
-      defaultValue: defaultValue2
+      value
     })
   });
 };
@@ -5333,7 +5365,7 @@ const MultiSelect = ({
           onClick,
           children: [/* @__PURE__ */ jsx("span", {
             className: style$1.selectedOptionText,
-            children: placeHolder || "Choose charts from list"
+            children: placeHolder || "Choose options from list"
           }), /* @__PURE__ */ jsx("span", {
             className: style$1.listBoxButton,
             children: /* @__PURE__ */ jsx(mdiChevronDown, {
@@ -5358,15 +5390,12 @@ const MultiSelect = ({
               className: ({
                 selected,
                 active
-              }) => `${style$1.option} ${selected || active ? style$1.optionSelected : ""}`,
+              }) => classnames(selected ? style$1.optionSelected : "", active ? style$1.activeOption : "", style$1.option),
               value: option2.value,
               children: ({
                 selected
               }) => /* @__PURE__ */ jsxs(Fragment, {
                 children: [/* @__PURE__ */ jsx("span", {
-                  className: `${style$1.optionLabel}`,
-                  children: option2.label
-                }), /* @__PURE__ */ jsx("span", {
                   className: style$1.check,
                   children: selected ? /* @__PURE__ */ jsx("div", {
                     className: style$1.checkIconSelected,
@@ -5376,6 +5405,9 @@ const MultiSelect = ({
                   }) : /* @__PURE__ */ jsx("div", {
                     className: style$1.checkIconUnselected
                   })
+                }), /* @__PURE__ */ jsx("span", {
+                  className: `${style$1.optionLabel}`,
+                  children: option2.label
                 })]
               })
             }, option2.value)), limit <= options2.length && /* @__PURE__ */ jsx(Button, {
@@ -5428,50 +5460,6 @@ const HookMultiSelect = ({
     })
   });
 };
-const SelectField = ({
-  value,
-  options: options2,
-  control
-}) => {
-  const [yAxisValue, setYAxisValue] = useState("");
-  return /* @__PURE__ */ jsx(HookSelect, {
-    control,
-    label: "",
-    options: options2,
-    onChange: setYAxisValue,
-    name: yAxisValue ? yAxisValue : value
-  });
-};
-const chartOptions = "_chartOptions_yt3j5_1";
-const chartOption = "_chartOption_yt3j5_1";
-const chartOptionBtn = "_chartOptionBtn_yt3j5_13";
-const chartOptionText = "_chartOptionText_yt3j5_19";
-const container$f = "_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$3 = "_form_yt3j5_73";
-const chartType = "_chartType_yt3j5_79";
-var styles$y = {
-  chartOptions,
-  chartOption,
-  chartOptionBtn,
-  chartOptionText,
-  container: container$f,
-  field: field$1,
-  fieldText,
-  doneBtn,
-  measureText,
-  singleValueMeasure,
-  plus,
-  plusIcon,
-  form: form$3,
-  chartType
-};
 const SOMETHING_WENT_WRONG = "something went wrong, please try again";
 const CHART_TYPES = {
   line: "line",
@@ -5523,29 +5511,11 @@ const DESTINATIONS = {
   BigQuery: "BigQuery",
   Postges: "Postgres"
 };
-const akarIconsCirclePlus = (props) => /* @__PURE__ */ jsx("svg", {
-  viewBox: "0 0 24 24",
-  width: "1.2em",
-  height: "1.2em",
-  ...props,
-  children: /* @__PURE__ */ jsxs("g", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    children: [/* @__PURE__ */ jsx("path", {
-      strokeLinecap: "round",
-      d: "M12 8v4m0 0v4m0-4h4m-4 0H8"
-    }), /* @__PURE__ */ jsx("circle", {
-      cx: 12,
-      cy: 12,
-      r: 10
-    })]
-  })
-});
 const ChartConfig = ({
   data: data2,
   setXAxis,
   xAxis,
+  yAxisList,
   setYAxisList,
   chartType: chartType2,
   setStep,
@@ -5565,29 +5535,22 @@ const ChartConfig = ({
     value: "NONE",
     label: "NONE"
   });
-  const [selectField, setSelectField] = useState([options2 == null ? void 0 : options2[0]]);
   const [source, setSource] = useState("");
   const [target, setTarget] = useState("");
   const [values, setValues] = useState("");
-  const [count2, setCount] = useState(1);
-  const [showAddButton, setShowAddButton] = useState("show");
-  const addSelectField = () => {
-    if (count2 < (options2 == null ? void 0 : options2.length)) {
-      const val = [...selectField, options2[count2]];
-      setSelectField(val);
-      if (count2 === options2.length - 1) {
-        setShowAddButton("hidden");
-      }
-    }
-    setCount(count2 + 1);
-  };
   const {
     handleSubmit,
-    control
+    control,
+    setValue
   } = useForm();
-  const onSubmitOptions = (yAxisdata) => {
-    const list = Object.values(yAxisdata);
-    setYAxisList(list.filter((item) => item !== void 0 && item !== "NONE"));
+  useEffect(() => {
+    if (!yAxisList)
+      return;
+    setValue("yAxisList", yAxisList);
+  }, []);
+  const onSubmitOptions = (fieldValues) => {
+    const list = fieldValues.yAxisList;
+    setYAxisList(list.filter((item) => item && item !== "NONE"));
     setSettingsShow(false);
   };
   const onSubmitSnakeyValues = () => {
@@ -5595,12 +5558,12 @@ const ChartConfig = ({
   };
   if (chartType2 === SANKEY) {
     return /* @__PURE__ */ jsxs("div", {
-      className: styles$y.container,
+      className: styles$A.container,
       children: [/* @__PURE__ */ jsxs("div", {
-        className: styles$y.field,
+        className: styles$A.field,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.fieldText,
+          className: styles$A.fieldText,
           variant: "h4",
           children: "Source"
         }), /* @__PURE__ */ jsx(Select, {
@@ -5610,10 +5573,10 @@ const ChartConfig = ({
           value: source
         })]
       }), /* @__PURE__ */ jsxs("div", {
-        className: styles$y.field,
+        className: styles$A.field,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.fieldText,
+          className: styles$A.fieldText,
           variant: "h4",
           children: "Target"
         }), /* @__PURE__ */ jsx(Select, {
@@ -5625,7 +5588,7 @@ const ChartConfig = ({
       }), /* @__PURE__ */ jsxs("div", {
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.fieldText,
+          className: styles$A.fieldText,
           variant: "h4",
           children: "Value"
         }), /* @__PURE__ */ jsx(Select, {
@@ -5638,7 +5601,7 @@ const ChartConfig = ({
         type: "submit",
         variant: "primary",
         size: "default",
-        className: styles$y.doneBtn,
+        className: styles$A.doneBtn,
         onClick: () => {
           onSubmitSnakeyValues();
           setSettingsShow(false);
@@ -5650,10 +5613,10 @@ const ChartConfig = ({
   if (chartType2 === DOUGHNUT) {
     return /* @__PURE__ */ jsx(Fragment, {
       children: !!(chartType2 === DOUGHNUT || PIE) && /* @__PURE__ */ jsxs("div", {
-        className: styles$y.container,
+        className: styles$A.container,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.field,
+          className: styles$A.field,
           variant: "h4",
           children: "Dimension"
         }), /* @__PURE__ */ jsx(Select, {
@@ -5663,27 +5626,22 @@ const ChartConfig = ({
           value: xAxis
         }), /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.measureText,
+          className: styles$A.measureText,
           variant: "h4",
           children: "Measure"
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$y.plus,
-          children: /* @__PURE__ */ jsx(akarIconsCirclePlus, {
-            className: `${styles$y.plusIcon} ${showAddButton}`,
-            onClick: () => addSelectField()
-          })
         }), /* @__PURE__ */ jsxs("form", {
           onSubmit: handleSubmit(onSubmitOptions),
-          className: styles$y.form,
-          children: [selectField.map((field2) => /* @__PURE__ */ jsx(SelectField, {
-            value: field2.value,
+          className: styles$A.form,
+          children: [/* @__PURE__ */ jsx(HookMultiSelect, {
+            name: "yAxisList",
             options: options2,
+            defaultValue: options2.map((option2) => option2.value),
             control
-          }, field2.value)), /* @__PURE__ */ jsx(Button, {
+          }), /* @__PURE__ */ jsx(Button, {
             type: "submit",
             variant: "primary",
             size: "default",
-            className: styles$y.doneBtn,
+            className: styles$A.doneBtn,
             children: "Done"
           })]
         })]
@@ -5691,12 +5649,12 @@ const ChartConfig = ({
     });
   }
   if (chartType2 === PIE) {
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: ["(", /* @__PURE__ */ jsxs("div", {
-        className: styles$y.container,
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: /* @__PURE__ */ jsxs("div", {
+        className: styles$A.container,
         children: [/* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.field,
+          className: styles$A.field,
           variant: "h4",
           children: "Dimension"
         }), /* @__PURE__ */ jsx(Select, {
@@ -5706,38 +5664,33 @@ const ChartConfig = ({
           value: xAxis
         }), /* @__PURE__ */ jsx(Text, {
           styleClass: "font-14",
-          className: styles$y.measureText,
+          className: styles$A.measureText,
           variant: "h4",
           children: "Measure"
-        }), /* @__PURE__ */ jsx("div", {
-          className: styles$y.plus,
-          children: /* @__PURE__ */ jsx(akarIconsCirclePlus, {
-            className: `${styles$y.plusIcon} ${showAddButton}`,
-            onClick: () => addSelectField()
-          })
         }), /* @__PURE__ */ jsxs("form", {
           onSubmit: handleSubmit(onSubmitOptions),
-          className: styles$y.form,
-          children: [selectField.map((field2) => /* @__PURE__ */ jsx(SelectField, {
-            value: field2.value,
+          className: styles$A.form,
+          children: [/* @__PURE__ */ jsx(HookMultiSelect, {
+            name: "yAxisList",
             options: options2,
+            defaultValue: options2.map((option2) => option2.value),
             control
-          }, field2.value)), /* @__PURE__ */ jsx(Button, {
+          }), /* @__PURE__ */ jsx(Button, {
             type: "submit",
             variant: "primary",
             size: "default",
-            className: styles$y.doneBtn,
+            className: styles$A.doneBtn,
             children: "Done"
           })]
         })]
-      }), ")"]
+      })
     });
   }
   if (chartType2 === "single value") {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(Text, {
         styleClass: "font-14",
-        className: `${styles$y.singleValueMeasure}`,
+        className: `${styles$A.singleValueMeasure}`,
         variant: "h4",
         children: "Measure"
       }), /* @__PURE__ */ jsx(Select, {
@@ -5749,7 +5702,7 @@ const ChartConfig = ({
         type: "button",
         variant: "primary",
         size: "default",
-        className: styles$y.doneBtn,
+        className: styles$A.doneBtn,
         onClick: () => setSettingsShow(false),
         children: "Done"
       })]
@@ -5757,11 +5710,11 @@ const ChartConfig = ({
   }
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs("div", {
-      className: styles$y.container,
+      className: styles$A.container,
       children: [chartType2 !== "gauge" && chartType2 !== BOXPLOT && chartType2 !== "table" && /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsxs(Text, {
           styleClass: "font-14",
-          className: styles$y.field,
+          className: styles$A.field,
           variant: "h4",
           children: [chartType2 !== "funnel" && chartType2 !== "row" && "X-axis", chartType2 === "funnel" && "Step", chartType2 === "row" && "Y-axis"]
         }), chartType2 === "funnel" ? /* @__PURE__ */ jsx(Select, {
@@ -5775,35 +5728,33 @@ const ChartConfig = ({
           onChange: setXAxis,
           value: xAxis
         })]
-      }), /* @__PURE__ */ jsxs("div", {
-        className: `${styles$y.chartType}
-            ${chartType2 !== "gauge" ? styles$y.measureText : ""}`,
-        children: [/* @__PURE__ */ jsxs(Text, {
+      }), /* @__PURE__ */ jsx("div", {
+        className: `${styles$A.chartType}
+            ${chartType2 !== "gauge" ? styles$A.measureText : ""}`,
+        children: /* @__PURE__ */ jsxs(Text, {
           styleClass: "font-14",
           variant: "h1",
-          className: styles$y.field,
+          className: styles$A.field,
           children: [chartType2 !== "funnel" && chartType2 !== "gauge" && chartType2 !== "row" && chartType2 !== "boxplot" && chartType2 !== "table" && "Y-axis", (chartType2 === "funnel" || chartType2 === "gauge" || chartType2 === "boxplot" || chartType2 === "table") && "Measure", chartType2 === "row" && "X-axis"]
-        }), chartType2 !== "funnel" && chartType2 !== "gauge" && /* @__PURE__ */ jsx(akarIconsCirclePlus, {
-          className: `${styles$y.plusIcon} ${showAddButton}`,
-          onClick: () => addSelectField()
-        })]
+        })
       }), /* @__PURE__ */ jsxs("form", {
         onSubmit: handleSubmit(onSubmitOptions),
-        className: styles$y.form,
+        className: styles$A.form,
         children: [chartType2 === "funnel" || chartType2 === "gauge" ? /* @__PURE__ */ jsx(Select, {
           label: "",
           options: options2,
           onChange: setMeasure,
           value: measure
-        }) : selectField.map((field2) => /* @__PURE__ */ jsx(SelectField, {
-          value: field2.value,
+        }) : /* @__PURE__ */ jsx(HookMultiSelect, {
+          name: "yAxisList",
           options: options2,
+          defaultValue: options2.map((option2) => option2.value),
           control
-        }, field2.value)), /* @__PURE__ */ jsx(Button, {
+        }), /* @__PURE__ */ jsx(Button, {
           type: "submit",
           variant: "primary",
           size: "default",
-          className: styles$y.doneBtn,
+          className: styles$A.doneBtn,
           children: "Done"
         })]
       })]
@@ -6033,6 +5984,7 @@ const materialSymbolsBackupTable = (props) => /* @__PURE__ */ jsx("svg", {
   })
 });
 const ChartModalOptions = ({
+  chartType: chartType2,
   setChartType
 }) => {
   const chartOptions2 = [{
@@ -6094,13 +6046,13 @@ const ChartModalOptions = ({
     icon: materialSymbolsBackupTable
   }];
   return /* @__PURE__ */ jsx("div", {
-    className: styles$y.chartOptions,
+    className: styles$A.chartOptions,
     children: chartOptions2.map((option2) => /* @__PURE__ */ jsxs("div", {
-      className: styles$y.chartOption,
+      className: styles$A.chartOption,
       children: [/* @__PURE__ */ jsx(Button, {
         type: "button",
         variant: "custom",
-        className: styles$y.chartOptionBtn,
+        className: chartType2 === option2.name.toLowerCase() ? styles$A.chartOptionBtnSelected : styles$A.chartOptionBtn,
         onClick: () => {
           setChartType(option2.name.toLowerCase());
         },
@@ -6113,13 +6065,27 @@ const ChartModalOptions = ({
         })
       }, option2.name), /* @__PURE__ */ jsx(Text, {
         variant: "p",
-        styleClass: "tertiary",
-        className: styles$y.chartOptionText,
+        styleClass: "custom",
+        className: styles$A.chartOptionText,
         children: option2.name
       })]
     }, option2.name))
   });
 };
+const SelectField = ({
+  value,
+  options: options2,
+  control
+}) => {
+  const [yAxisValue, setYAxisValue] = useState("");
+  return /* @__PURE__ */ jsx(HookSelect, {
+    control,
+    label: "",
+    options: options2,
+    onChange: setYAxisValue,
+    name: yAxisValue ? yAxisValue : value
+  });
+};
 const operatorList = [
   {
     value: "=",
@@ -7617,29 +7583,40 @@ const applyTheme = (theme2) => {
   const root = document.documentElement;
   if (theme2.colors)
     Object.entries(theme2.colors).forEach(([key, value]) => {
-      root.style.setProperty(`--databrainhq-plugin-color-${key}`, `${value}`);
+      if (key && value)
+        root.style.setProperty(`--databrainhq-plugin-color-${key}`, `${value}`);
     });
   if (theme2.border)
     Object.entries(theme2.border).forEach(([key, value]) => {
-      root.style.setProperty(`--databrainhq-plugin-border-${key}`, `${value}`);
+      if (key && value)
+        root.style.setProperty(
+          `--databrainhq-plugin-border-${key}`,
+          `${value}`
+        );
     });
   if (theme2.shadow)
     Object.entries(theme2.shadow).forEach(([key, value]) => {
-      root.style.setProperty(`--databrainhq-plugin-shadow-${key}`, `${value}`);
+      if (key && value)
+        root.style.setProperty(
+          `--databrainhq-plugin-shadow-${key}`,
+          `${value}`
+        );
     });
   if (theme2.typography)
     Object.entries(theme2.typography).forEach(([key, value]) => {
-      root.style.setProperty(
-        `--databrainhq-plugin-typography-${key}`,
-        `${value}`
-      );
+      if (key && value)
+        root.style.setProperty(
+          `--databrainhq-plugin-typography-${key}`,
+          `${value}`
+        );
     });
   if (theme2.breakpoint)
     Object.entries(theme2.breakpoint).forEach(([key, value]) => {
-      root.style.setProperty(
-        `--databrainhq-plugin-breakpoint-${key}`,
-        `${value}`
-      );
+      if (key && value)
+        root.style.setProperty(
+          `--databrainhq-plugin-breakpoint-${key}`,
+          `${value}`
+        );
     });
 };
 const colors = [
@@ -78859,22 +78836,17 @@ const AreaChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -78965,6 +78937,7 @@ const AreaChart = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [!isEnableGroupBy && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -78977,6 +78950,7 @@ const AreaChart = ({
         }
       }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -79001,16 +78975,12 @@ const BarChart = ({
   axisSettings,
   margins,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79103,6 +79073,7 @@ const BarChart = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [!isEnableGroupBy && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -79115,6 +79086,7 @@ const BarChart = ({
         }
       }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -79133,13 +79105,13 @@ const ComboChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   backGroundColor,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const choice = ["bar", "line"];
@@ -79156,11 +79128,6 @@ const ComboChart = ({
       color: colors2
     } : {},
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79269,6 +79236,7 @@ const ComboChart = ({
         height: "90%"
       },
       option: option2,
+      ref: chartRef,
       onEvents: {
         click: (params) => {
           var _a3;
@@ -79281,6 +79249,7 @@ const ComboChart = ({
         height: "90%"
       },
       option: option2,
+      ref: chartRef,
       onEvents: {
         click: (params) => {
           updateGroup(params.name);
@@ -79295,12 +79264,12 @@ const LineChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2, _b2;
   const option2 = {
@@ -79330,11 +79299,6 @@ const LineChart = ({
       containLabel: true
     },
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79400,7 +79364,14 @@ const LineChart = ({
         width: "100%",
         height: "90%"
       },
-      option: option2
+      option: option2,
+      ref: chartRef,
+      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%",
@@ -79409,9 +79380,10 @@ const LineChart = ({
       option: option2,
       onEvents: {
         click: (params) => {
-          handleChartClick(chartClickConfig, params.name);
+          updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -79420,7 +79392,7 @@ const PieChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79445,11 +79417,6 @@ const PieChart = ({
     });
     const option22 = {
       toolbox: {
-        feature: {
-          saveAsImage: enableSaveAs && {
-            name: "databrain"
-          }
-        },
         emphasis: {
           iconStyle: {
             borderColor: "#5865F6"
@@ -79518,7 +79485,8 @@ const PieChart = ({
             click: (params) => {
               updateGroup(params.name);
             }
-          }
+          },
+          ref: chartRef
         })
       }), !isEnableGroupBy && /* @__PURE__ */ jsx(Fragment, {
         children: /* @__PURE__ */ jsx(EChartsReact, {
@@ -79532,7 +79500,8 @@ const PieChart = ({
               var _a3;
               handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
             }
-          }
+          },
+          ref: chartRef
         })
       })]
     });
@@ -79545,11 +79514,6 @@ const PieChart = ({
   });
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79608,7 +79572,8 @@ const PieChart = ({
             click: (params) => {
               updateGroup(params.name);
             }
-          }
+          },
+          ref: chartRef
         })
       }), !isEnableGroupBy && /* @__PURE__ */ jsx(Fragment, {
         children: /* @__PURE__ */ jsx(EChartsReact, {
@@ -79622,7 +79587,8 @@ const PieChart = ({
               var _a3;
               handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
             }
-          }
+          },
+          ref: chartRef
         })
       })]
     })
@@ -79633,7 +79599,7 @@ const RowChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79644,11 +79610,6 @@ const RowChart = ({
   var _a2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79750,7 +79711,8 @@ const RowChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79761,7 +79723,8 @@ const RowChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -79771,7 +79734,7 @@ const ScatterChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79782,11 +79745,6 @@ const ScatterChart = ({
   var _a2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -79882,7 +79840,8 @@ const ScatterChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -79893,7 +79852,8 @@ const ScatterChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -79902,7 +79862,7 @@ const WaterFallChart = ({
   margins,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -79913,11 +79873,6 @@ const WaterFallChart = ({
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80016,7 +79971,8 @@ const WaterFallChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80027,7 +79983,8 @@ const WaterFallChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80037,7 +79994,8 @@ const FunnelChart = ({
   legendSettings,
   labelSettings,
   colors: colors2,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   const option2 = {
     tooltip: {
@@ -80116,7 +80074,8 @@ const FunnelChart = ({
           var _a2;
           handleChartClick(chartClickConfig, ((_a2 = params == null ? void 0 : params.name) == null ? void 0 : _a2.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     })
   });
 };
@@ -80126,12 +80085,12 @@ const BubbleChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const modifiedData = [];
@@ -80157,11 +80116,6 @@ const BubbleChart = ({
       color: colors2
     } : {},
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80251,6 +80205,7 @@ const BubbleChart = ({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [!isEnableGroupBy && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -80263,6 +80218,7 @@ const BubbleChart = ({
         }
       }
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -80281,11 +80237,11 @@ const DoughnutChart = ({
   margins,
   legendSettings,
   labelSettings,
-  enableSaveAs,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2, _b2;
   if (((_a2 = data2 == null ? void 0 : data2.labels) == null ? void 0 : _a2.length) > 1) {
@@ -80307,11 +80263,6 @@ const DoughnutChart = ({
     });
     const option22 = {
       toolbox: {
-        feature: {
-          saveAsImage: enableSaveAs && {
-            name: "databrain"
-          }
-        },
         emphasis: {
           iconStyle: {
             borderColor: "#5865F6"
@@ -80369,7 +80320,14 @@ const DoughnutChart = ({
           width: "100%",
           height: "90%"
         },
-        option: option22
+        option: option22,
+        ref: chartRef,
+        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%",
@@ -80380,7 +80338,8 @@ const DoughnutChart = ({
           click: (params) => {
             updateGroup(params.name);
           }
-        }
+        },
+        ref: chartRef
       })]
     });
   }
@@ -80392,11 +80351,6 @@ const DoughnutChart = ({
   });
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80452,7 +80406,8 @@ const DoughnutChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80463,7 +80418,8 @@ const DoughnutChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80473,7 +80429,7 @@ const SteppedAreaChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -80486,11 +80442,6 @@ const SteppedAreaChart = ({
   let k = 2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80588,7 +80539,8 @@ const SteppedAreaChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80599,7 +80551,8 @@ const SteppedAreaChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80609,7 +80562,7 @@ const Histogram = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -80620,11 +80573,6 @@ const Histogram = ({
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80718,7 +80666,8 @@ const Histogram = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -80729,7 +80678,8 @@ const Histogram = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -80737,9 +80687,9 @@ const GaugeChart = ({
   gaugeData,
   margins,
   legendSettings,
-  enableSaveAs,
   colors: colors2,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   const newGuageData = Array.isArray(gaugeData) ? gaugeData : [];
   const total = newGuageData.reduce((sum2, item) => {
@@ -80748,11 +80698,6 @@ const GaugeChart = ({
   const average = Math.floor(total / newGuageData.length);
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80840,13 +80785,14 @@ const GaugeChart = ({
         var _a2;
         handleChartClick(chartClickConfig, ((_a2 = params == null ? void 0 : params.name) == null ? void 0 : _a2.split(" ").join("_")) || "undefined");
       }
-    }
+    },
+    ref: chartRef
   });
 };
 const SankeyChart = ({
   data: data2,
   margins,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   backGroundColor,
   chartClickConfig
@@ -80873,11 +80819,6 @@ const SankeyChart = ({
   }
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -80932,7 +80873,8 @@ const SankeyChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     })
   });
 };
@@ -80942,7 +80884,7 @@ const StackedBarChart = ({
   legendSettings,
   labelSettings,
   axisSettings,
-  enableSaveAs,
+  chartRef,
   colors: colors2,
   updateGroup,
   isEnableGroupBy,
@@ -80953,11 +80895,6 @@ const StackedBarChart = ({
   var _a2, _b2;
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -81060,7 +80997,8 @@ const StackedBarChart = ({
           var _a3;
           handleChartClick(chartClickConfig, ((_a3 = params == null ? void 0 : params.name) == null ? void 0 : _a3.split(" ").join("_")) || "undefined");
         }
-      }
+      },
+      ref: chartRef
     }), isEnableGroupBy && updateGroup && /* @__PURE__ */ jsx(EChartsReact, {
       style: {
         width: "100%",
@@ -81071,7 +81009,8 @@ const StackedBarChart = ({
         click: (params) => {
           updateGroup(params.name);
         }
-      }
+      },
+      ref: chartRef
     })]
   });
 };
@@ -81357,10 +81296,10 @@ const BoxPlot = ({
   margins,
   legendSettings,
   axisSettings,
-  enableSaveAs,
   colors: colors2,
   customSettings,
-  chartClickConfig
+  chartClickConfig,
+  chartRef
 }) => {
   var _a2;
   const modifiedData = [];
@@ -81371,11 +81310,6 @@ const BoxPlot = ({
   });
   const option2 = {
     toolbox: {
-      feature: {
-        saveAsImage: enableSaveAs && {
-          name: "databrain"
-        }
-      },
       emphasis: {
         iconStyle: {
           borderColor: "#5865F6"
@@ -81475,6 +81409,7 @@ const BoxPlot = ({
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx(EChartsReact, {
+      ref: chartRef,
       style: {
         width: "100%",
         height: "90%"
@@ -81621,9 +81556,10 @@ const MetricChart = ({
   isEnableGroupBy,
   backGroundColor,
   chartClickConfig,
-  tableSettings
+  tableSettings,
+  chartRef
 }) => {
-  var _a2, _b2, _c2, _d;
+  var _a2, _b2, _c2, _d, _e, _f;
   if (chartType2 === CHART_TYPES.line) {
     return /* @__PURE__ */ jsx(LineChart, {
       data: data2,
@@ -81632,10 +81568,10 @@ const MetricChart = ({
       labelSettings,
       axisSettings,
       customSettings,
-      enableSaveAs,
       updateGroup,
       isEnableGroupBy,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.stepped) {
@@ -81652,7 +81588,8 @@ const MetricChart = ({
       updateGroup,
       isEnableGroupBy,
       backGroundColor,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.bar) {
@@ -81667,7 +81604,8 @@ const MetricChart = ({
       axisSettings,
       customSettings,
       margins,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.stack) {
@@ -81683,7 +81621,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.histogram) {
@@ -81699,7 +81638,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.bubble) {
@@ -81715,7 +81655,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.scatter) {
@@ -81731,7 +81672,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.row) {
@@ -81746,7 +81688,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.area) {
@@ -81765,7 +81708,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.combo) {
@@ -81786,7 +81730,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.pie) {
@@ -81799,7 +81744,8 @@ const MetricChart = ({
       colors: colors2,
       updateGroup,
       isEnableGroupBy,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.doughnut) {
@@ -81812,7 +81758,8 @@ const MetricChart = ({
       colors: colors2,
       updateGroup,
       isEnableGroupBy,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.waterfall) {
@@ -81842,7 +81789,8 @@ const MetricChart = ({
       isEnableGroupBy,
       backGroundColor,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.funnel) {
@@ -81852,18 +81800,34 @@ const MetricChart = ({
       legendSettings,
       labelSettings,
       colors: colors2,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.gauge) {
+    let modifiedData;
+    if ((_e = data2.datasets) == null ? void 0 : _e.length) {
+      const values = (_f = data2.datasets[0]) == null ? void 0 : _f.data;
+      const convertedData = [values == null ? void 0 : values[0]];
+      if (values == null ? void 0 : values.length)
+        for (let i = 1; i < values.length - 1; i++) {
+          convertedData.push(convertedData[i - 1] - values[i]);
+        }
+      convertedData.push(values == null ? void 0 : values[values.length - 1]);
+      modifiedData = {
+        labels: data2.labels,
+        datasets: [values, convertedData]
+      };
+    }
     return /* @__PURE__ */ jsx(GaugeChart, {
-      gaugeData: funnelData,
+      gaugeData: modifiedData,
       margins,
       legendSettings,
       labelSettings,
       enableSaveAs,
       colors: colors2,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.sankey) {
@@ -81875,7 +81839,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       backGroundColor,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.singleValue) {
@@ -81897,7 +81862,8 @@ const MetricChart = ({
       enableSaveAs,
       colors: colors2,
       customSettings,
-      chartClickConfig
+      chartClickConfig,
+      chartRef
     });
   }
   if (chartType2 === CHART_TYPES.table) {
@@ -81945,7 +81911,8 @@ const FullScreenChart = ({
           dynamic: "{{value}}",
           route: "/{{value}}",
           routeType: "internal"
-        }
+        },
+        chartRef: chart.chartRef
       })
     })
   });
@@ -82531,29 +82498,27 @@ const Dataset = ({
     })]
   });
 };
-const container$6 = "_container_1mqhp_1";
-const header$2 = "_header_1mqhp_7";
-const headerText = "_headerText_1mqhp_13";
-const tab$2 = "_tab_1mqhp_19";
-const tabText$1 = "_tabText_1mqhp_25";
-const tabHeading = "_tabHeading_1mqhp_31";
-const form = "_form_1mqhp_37";
-const inputWrapper = "_inputWrapper_1mqhp_43";
-const input$1 = "_input_1mqhp_43";
-const selectWrapper = "_selectWrapper_1mqhp_55";
-const select = "_select_1mqhp_55";
-const label$1 = "_label_1mqhp_67";
-const series = "_series_1mqhp_73";
-const legendWrapper = "_legendWrapper_1mqhp_79";
-const seriesWrapper = "_seriesWrapper_1mqhp_85";
-const valueLabelWrapper = "_valueLabelWrapper_1mqhp_91";
-const singleCheckBox = "_singleCheckBox_1mqhp_97";
-const seriesCheck = "_seriesCheck_1mqhp_103";
-const seriesCheckContainer = "_seriesCheckContainer_1mqhp_109";
+const container$6 = "_container_j5bye_1";
+const header$2 = "_header_j5bye_7";
+const tab$2 = "_tab_j5bye_13";
+const tabText$1 = "_tabText_j5bye_19";
+const tabHeading = "_tabHeading_j5bye_25";
+const form = "_form_j5bye_31";
+const inputWrapper = "_inputWrapper_j5bye_37";
+const input$1 = "_input_j5bye_37";
+const selectWrapper = "_selectWrapper_j5bye_49";
+const select = "_select_j5bye_49";
+const label$1 = "_label_j5bye_61";
+const series = "_series_j5bye_67";
+const legendWrapper = "_legendWrapper_j5bye_73";
+const seriesWrapper = "_seriesWrapper_j5bye_79";
+const valueLabelWrapper = "_valueLabelWrapper_j5bye_85";
+const singleCheckBox = "_singleCheckBox_j5bye_91";
+const seriesCheck = "_seriesCheck_j5bye_97";
+const seriesCheckContainer = "_seriesCheckContainer_j5bye_103";
 var styles$e = {
   container: container$6,
   header: header$2,
-  headerText,
   tab: tab$2,
   tabText: tabText$1,
   tabHeading,
@@ -82630,7 +82595,7 @@ const ChartConfigure = ({
     className: styles$e.container,
     children: [chartType2 === "table" && /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        className: "h-[10%]",
+        className: styles$e.header,
         children: /* @__PURE__ */ jsx(Tab, {
           options: tableTabs,
           activeTab: activeTab2,
@@ -82834,7 +82799,7 @@ const ChartConfigure = ({
                 ...m2,
                 marginTop: parseInt(e2.target.value, 10)
               })),
-              defaultValue: margins.marginTop
+              value: margins.marginTop
             })
           }), /* @__PURE__ */ jsx("div", {
             className: styles$e.input,
@@ -82845,14 +82810,14 @@ const ChartConfigure = ({
                 ...m2,
                 marginBottom: parseInt(e2.target.value, 10)
               })),
-              defaultValue: margins.marginBottom
+              value: margins.marginBottom
             })
           }), /* @__PURE__ */ jsx("div", {
             className: styles$e.input,
             children: /* @__PURE__ */ jsx(InputField, {
               type: "number",
               label: "Left",
-              defaultValue: margins.marginLeft,
+              value: margins.marginLeft,
               onChange: (e2) => setMargins((m2) => ({
                 ...m2,
                 marginLeft: parseInt(e2.target.value, 10)
@@ -82863,7 +82828,7 @@ const ChartConfigure = ({
             children: /* @__PURE__ */ jsx(InputField, {
               type: "number",
               label: "Right",
-              defaultValue: margins.marginRight,
+              value: margins.marginRight,
               onChange: (e2) => setMargins((m2) => ({
                 ...m2,
                 marginRight: parseInt(e2.target.value, 10)
@@ -82892,7 +82857,7 @@ const ChartConfigure = ({
                 children: /* @__PURE__ */ jsx(InputField, {
                   type: "number",
                   label: "Top",
-                  defaultValue: legendSettings.top,
+                  value: legendSettings.top,
                   onChange: (e2) => setLegendSettings((settings2) => ({
                     ...settings2,
                     top: parseInt(e2.target.value, 10)
@@ -82903,7 +82868,7 @@ const ChartConfigure = ({
                 children: /* @__PURE__ */ jsx(InputField, {
                   type: "number",
                   label: "Bottom",
-                  defaultValue: legendSettings.bottom,
+                  value: legendSettings.bottom,
                   onChange: (e2) => setLegendSettings((settings2) => ({
                     ...settings2,
                     bottom: parseInt(e2.target.value, 10)
@@ -82914,7 +82879,7 @@ const ChartConfigure = ({
                 children: /* @__PURE__ */ jsx(InputField, {
                   type: "number",
                   label: "Left",
-                  defaultValue: legendSettings.left,
+                  value: legendSettings.left,
                   onChange: (e2) => setLegendSettings((settings2) => ({
                     ...settings2,
                     left: parseInt(e2.target.value, 10)
@@ -82925,7 +82890,7 @@ const ChartConfigure = ({
                 children: /* @__PURE__ */ jsx(InputField, {
                   type: "number",
                   label: "Right",
-                  defaultValue: legendSettings.right,
+                  value: legendSettings.right,
                   onChange: (e2) => setLegendSettings((settings2) => ({
                     ...settings2,
                     right: parseInt(e2.target.value, 10)
@@ -83151,7 +83116,7 @@ const ChartConfigure = ({
                       ...m2,
                       barWidth: parseInt(e2.target.value, 10)
                     })),
-                    defaultValue: customSettings.barWidth
+                    value: customSettings.barWidth
                   })]
                 }), /* @__PURE__ */ jsxs("div", {
                   className: styles$e.seriesWrapper,
@@ -83169,7 +83134,7 @@ const ChartConfigure = ({
                       ...m2,
                       barRadius: parseInt(e2.target.value, 10)
                     })),
-                    defaultValue: customSettings.barRadius
+                    value: customSettings.barRadius
                   })]
                 })]
               }) : null]
@@ -83189,7 +83154,7 @@ const ChartConfigure = ({
                   ...m2,
                   fontSize: parseInt(e2.target.value, 10)
                 })),
-                defaultValue: customSettings.fontSize
+                value: customSettings.fontSize
               })]
             }), /* @__PURE__ */ jsxs("div", {
               className: styles$e.singleCheckBox,
@@ -83225,7 +83190,7 @@ const ChartConfigure = ({
                     ...m2,
                     displayText: e2.target.value
                   })),
-                  defaultValue: customSettings.displayText
+                  value: customSettings.displayText
                 })]
               }), /* @__PURE__ */ jsxs("div", {
                 className: styles$e.seriesWrapper,
@@ -83241,7 +83206,7 @@ const ChartConfigure = ({
                     ...m2,
                     subHeaderFontSize: parseInt(e2.target.value, 10)
                   })),
-                  defaultValue: customSettings.subHeaderFontSize
+                  value: customSettings.subHeaderFontSize
                 })]
               })]
             }), /* @__PURE__ */ jsxs("div", {
@@ -83415,6 +83380,7 @@ const ChartSettings = ({
   data: data2,
   setXAxis,
   setYAxisList,
+  yAxisList,
   xAxis,
   setMeasure,
   setStep,
@@ -83504,6 +83470,7 @@ const ChartSettings = ({
         }), activeTab2 === FIRST_TAB && /* @__PURE__ */ jsx("div", {
           className: styles$c.button,
           children: /* @__PURE__ */ jsx(ChartModalOptions, {
+            chartType: chartType2,
             setChartType
           })
         }), activeTab2 === SECOND_TAB && /* @__PURE__ */ jsx(Fragment, {
@@ -83513,6 +83480,7 @@ const ChartSettings = ({
               data: data2,
               setXAxis,
               xAxis,
+              yAxisList,
               setYAxisList,
               chartType: chartType2,
               setStep,
@@ -83632,6 +83600,7 @@ const ChartTab = ({
   data: data2,
   setXAxis,
   setYAxisList,
+  yAxisList,
   xAxis,
   setMeasure,
   setStep,
@@ -83662,6 +83631,7 @@ const ChartTab = ({
   setTableSettings
 }) => {
   var _a2, _b2, _c2, _d;
+  const chartRef = useRef(null);
   const {
     globalTheme
   } = useGlobalTheme();
@@ -83748,6 +83718,7 @@ const ChartTab = ({
             data: data2,
             setXAxis,
             setYAxisList,
+            yAxisList,
             xAxis,
             setMeasure,
             setStep,
@@ -83801,7 +83772,8 @@ const ChartTab = ({
               routeType: "internal"
             },
             enableSaveAs: true,
-            tableSettings
+            tableSettings,
+            chartRef
           })
         }) : /* @__PURE__ */ jsxs("div", {
           className: styles$b.metricChartEmpty,
@@ -83855,7 +83827,8 @@ const ChartTab = ({
           dynamic: "{{value}}",
           route: "/{{value}}",
           routeType: "internal"
-        }
+        },
+        chartRef
       }
     })]
   });
@@ -84195,6 +84168,7 @@ const MetricOutput = ({
   setChartType,
   setXAxis,
   setYAxisList,
+  yAxisList,
   xAxis,
   setMeasure,
   setStep,
@@ -84269,6 +84243,7 @@ const MetricOutput = ({
         setChartType,
         setXAxis,
         setYAxisList,
+        yAxisList,
         xAxis,
         setMeasure,
         setStep,
@@ -85890,6 +85865,7 @@ const EmbeddedMetricCreation = ({
           setChartType,
           setXAxis,
           setYAxisList,
+          yAxisList,
           xAxis,
           setMeasure,
           setStep,
@@ -91238,6 +91214,50 @@ var styles = {
   features
 };
 var NoData = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe3N0cm9rZTojMTgyYzYwO30uY2xzLTEsLmNscy0ye2ZpbGw6bm9uZTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fS5jbHMtM3tmaWxsOiM1ODY1ZjY7b3BhY2l0eTouMTt9LmNscy00e2ZpbGw6I2YyZjNmNDt9LmNscy01e2ZpbGw6I2MxYzdjOTt9LmNscy02e2ZpbGw6I2RhZGVkZjt9LmNscy03e2ZpbGw6IzE4MmM2MDt9LmNscy0ye3N0cm9rZTojNTg2NWY2O3N0cm9rZS13aWR0aDo0cHg7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIxMC41LDIwMC44M2MuNC0uNjYuNjgtMS40LjgyLTIuMiwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguNDMtNC41Ni0yLjA5LTkuNjgtNi44Ni0xMC42Ni0uMDEsMC0uMDMsMC0uMDQsMC0yLjQtLjQ5LTUuMDItLjIyLTcuNDUtLjIyaC00NC4yMmMtLjUyLDAtMi4zMy0uMzEtMi43NywwbC0yNC4yOCwxNy4yMmgtNjEuNjFjLTMuOTcsMC02Ljk5LDMuNTYtNi4zNCw3LjQ3bDkuNzUsNTkuNDJjLjUxLDMuMTEsMy4yLDUuMzksNi4zNCw1LjM5aDExNy44NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0ibTIwNywxMTQuNDN2LTguNTRjMC0zLjU1LTIuODgtNi40My02LjQzLTYuNDNoLTE3LjE5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTAzLjQ3LDk5LjQ2aC0xNS4xMmMtMy41NSwwLTYuNDMsMi44OC02LjQzLDYuNDN2MjUuNDgiLz48Zz48bGluZSBjbGFzcz0iY2xzLTIiIHgxPSIxMTQuMTIiIHkxPSI5NC4wOCIgeDI9IjE0NC44NCIgeTI9Ijk0LjA4Ii8+PGc+PHJlY3QgY2xhc3M9ImNscy02IiB4PSIxMTIuNjEiIHk9IjEwMi40MyIgd2lkdGg9IjE4Ljk3IiBoZWlnaHQ9IjMuMiIvPjxyZWN0IGNsYXNzPSJjbHMtNCIgeD0iMTM3LjYxIiB5PSIxMDIuNDMiIHdpZHRoPSI4LjkiIGhlaWdodD0iMy4yIi8+PC9nPjwvZz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Im0xNjQuOTgsODEuNDZsLS4wOCwxNi4yOHMuMTUsMy4yNC4zLDMuNjIuNiwxLjUxLDEuMTMsMS44OCwxLjAyLjc5LDEuNzcsMS4wNi45NC40OSwyLjExLjQ5LDE4LjE3LjA0LDE4LjE3LjA0bC0yMy40MS0yMy4zN1oiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xODguNTEsMTA0LjkxdjkuNTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xMDMuNTMsMTMxLjM3di00NC45NWMwLTIuODQsMi4zLTUuMTUsNS4xNS01LjE1LDE4Ljc3LDAsMzcuNTQsMCw1Ni4zMSwwIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJtMTY1LjAxLDgxLjI3djE4LjM1YzAsMi44NCwyLjMxLDUuMTUsNS4xNSw1LjE1aDE4LjM1cy0yMy41LTIzLjYyLTIzLjUtMjMuNVoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMjQuOTYiLz48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjE2OC4yMSIgY3k9IjE2My4yNyIgcj0iMzEuMjUiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xOTIuNTcsMTgzLjMzYzkuNjIsOS42MiwzMC4yOCwzMC4yOCwzMC4yOCwzMC4yOCwxLjE3LDEuMTcsMS4xNywzLjA3LDAsNC4yNHMtMy4wNywxLjE3LTQuMjQsMGMwLDAtMjAuNTgtMjAuNTgtMzAuMjItMzAuMjIiLz48Zz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNjguNjYsMTcwLjkzYy0uNzQsMC0xLjM0LjI0LTEuODEuNzItLjQ3LjQ4LS43MSwxLjA5LS43MSwxLjgzcy4yNCwxLjMyLjcxLDEuODFjLjQ3LjQ5LDEuMDcuNzQsMS44MS43NHMxLjM0LS4yNSwxLjgxLS43NGMuNDctLjQ5LjcxLTEuMS43MS0xLjgxcy0uMjQtMS4zNC0uNzEtMS44M2MtLjQ3LS40OC0xLjA4LS43Mi0xLjgxLS43MloiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Im0xNzQuNjksMTUzLjc3Yy0uNjItMS4wMi0xLjQ5LTEuODItMi42LTIuNC0xLjEyLS41Ny0yLjQtLjg2LTMuODUtLjg2LTEuNjgsMC0zLjE3LjQtNC40NywxLjE5cy0yLjI5LDEuOTQtMi45OCwzLjQzbDIuNzYsMi4yOGMuNDYtMS4wNiwxLjA3LTEuODYsMS44NS0yLjQuNzctLjU0LDEuNjUtLjgxLDIuNjQtLjgxLjc2LDAsMS40MS4xNCwxLjk3LjQxLjU1LjI4Ljk4LjY3LDEuMjgsMS4xNy4zLjUxLjQ1LDEuMS40NSwxLjc5cy0uMTYsMS4yOS0uNDcsMS44MWMtLjMxLjUyLS43NS45Mi0xLjMxLDEuMjEtLjU2LjI5LTEuMjIuNDMtMS45OC40M2gtLjkzdjYuNjZoMy4yOGwuMjYtMy43M2MuNzEtLjI0LDEuMzctLjU1LDEuOTUtLjkzLjk5LS42NCwxLjc1LTEuNDUsMi4yOS0yLjQxLjU0LS45Ny44MS0yLjA3LjgxLTMuMzEsMC0xLjMzLS4zMS0yLjUxLS45My0zLjU0WiIvPjwvZz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im04NS41NSwyMDMuOTdjLjY4LDIuODksMy4yNiw0Ljk2LDYuMjYsNC45NmgxMTcuNzMiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMTUuMzcsMjA2LjA0Yy40Ny0uNzEuOC0xLjUyLjk1LTIuNCwxLjU4LTguODcsMy4xNS0xNy43NSw0LjczLTI2LjYyLDIuMDMtMTEuNDQsNC4wNi0yMi44OCw2LjA5LTM0LjMyLjcyLTQuMDgsMS43Ny04LjI1LDIuMTYtMTIuMzguMzktNC4xNi0xLjY4LTguNzktNS42Ny0xMC4zMSIvPjxwYXRoIGNsYXNzPSJjbHMtNyIgZD0ibTIyMy41MSwxMjAuMDhzLjQ5LDEuNjIuNTMsMS43My4zMiwyLjQ0LjMyLDIuNDRsLS4wNCwxLjkxLTEuMzgsNy4xMy0zLjM5LDE5LjMxLTIuODksMTUuOTItMi45NiwxNi43Ni0yLjQ0LDEzLjE2LS45MiwyLjY1LDQuOTgsNS4xNS44NS0yLjE1LjgxLTQuMDYsMS40OC04LjMzLDIuODItMTUuNzEsMi4xNS0xMi4xMSwxLjk0LTExLjM2LDIuNzUtMTQuNzUuODgtNC42OS4yOC0yLjU4LjA3LTIuMTItLjYtMi43NS0xLjI0LTIuMzYtMS4wOS0xLjU5LTIuMDEtMS4zMS0uOTItLjI4WiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtNyIgcG9pbnRzPSI4NS42OCAyMDMuOTMgMjA0LjU1IDIwMy44NCAyMDkuMzUgMjA4LjczIDE0OC40OCAyMDguODggOTAuOTUgMjA5LjAyIDg5LjUgMjA4LjY2IDg3Ljk4IDIwNy45MiA4Ni44MiAyMDYuNTggODYuMDEgMjA1LjAzIDg1LjY4IDIwMy45MyIvPjwvc3ZnPg==";
+const handleSaveChartImage = (chartRef) => {
+  var _a2;
+  const chartInstance = (_a2 = chartRef.current) == null ? void 0 : _a2.getEchartsInstance();
+  if (chartInstance) {
+    const dataUrl = chartInstance.getConnectedDataURL({
+      type: "png",
+      pixelRatio: 2,
+      excludeComponents: ["toolbox"],
+      backgroundColor: "#fff"
+    });
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = "chart.png";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+};
+const uilImageDownload = (props) => /* @__PURE__ */ jsx("svg", {
+  viewBox: "0 0 24 24",
+  width: "1.2em",
+  height: "1.2em",
+  ...props,
+  children: /* @__PURE__ */ jsx("path", {
+    fill: "currentColor",
+    d: "M22.71 6.29a1 1 0 0 0-1.42 0L20 7.59V2a1 1 0 0 0-2 0v5.59l-1.29-1.3a1 1 0 0 0-1.42 1.42l3 3a1 1 0 0 0 .33.21a.94.94 0 0 0 .76 0a1 1 0 0 0 .33-.21l3-3a1 1 0 0 0 0-1.42ZM19 13a1 1 0 0 0-1 1v.38l-1.48-1.48a2.79 2.79 0 0 0-3.93 0l-.7.7l-2.48-2.48a2.85 2.85 0 0 0-3.93 0L4 12.6V7a1 1 0 0 1 1-1h8a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-5a1 1 0 0 0-1-1ZM5 20a1 1 0 0 1-1-1v-3.57l2.9-2.9a.79.79 0 0 1 1.09 0l3.17 3.17l4.3 4.3Zm13-1a.89.89 0 0 1-.18.53L13.31 15l.7-.7a.77.77 0 0 1 1.1 0L18 17.21Z"
+  })
+});
+const ChartImageDownloadButton = ({
+  className,
+  iconClass,
+  text: text2,
+  chartRef
+}) => {
+  return /* @__PURE__ */ jsxs(Button, {
+    variant: "custom",
+    type: "button",
+    onClick: () => handleSaveChartImage(chartRef),
+    className,
+    children: [/* @__PURE__ */ jsx(uilImageDownload, {
+      className: iconClass
+    }), text2]
+  });
+};
 const MetricCard = ({
   globalFilters = {
     tableName: "",
@@ -91252,6 +91272,7 @@ const MetricCard = ({
   renderHeaderName
 }) => {
   var _a2, _b2, _c2;
+  const chartRef = useRef(null);
   const {
     globalTheme
   } = useGlobalTheme();
@@ -91646,13 +91667,19 @@ const MetricCard = ({
                   backGroundColor,
                   tableSettings,
                   enableSaveAs: true,
-                  chartClickConfig: clickBehaviourConfigs.chart
+                  chartClickConfig: clickBehaviourConfigs.chart,
+                  chartRef
                 });
               },
               children: [/* @__PURE__ */ jsx(Icons, {
                 name: "fullscreen-icon",
                 className: styles.popupItemIcon
               }), "Enter Fullscreen"]
+            }), /* @__PURE__ */ jsx(ChartImageDownloadButton, {
+              text: "Save As PNG",
+              chartRef,
+              className: `${styles.popupItem} ${styles.csvBtn}`,
+              iconClass: styles.popupItemIcon
             }), /* @__PURE__ */ jsx(CsvDownloadButton, {
               data: dataDb,
               fileName: metricItem.name,
@@ -91708,7 +91735,8 @@ const MetricCard = ({
           isEnableGroupBy,
           customSettings,
           backGroundColor,
-          chartClickConfig: clickBehaviourConfigs.chart
+          chartClickConfig: clickBehaviourConfigs.chart,
+          chartRef
         }) : null]
       })]
     })