@databrainhq/plugin 0.7.21 → 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 = [
@@ -81582,7 +81559,7 @@ const MetricChart = ({
   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,
@@ -81828,8 +81805,22 @@ const MetricChart = ({
     });
   }
   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,
@@ -82507,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,
@@ -82606,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,
@@ -82810,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,
@@ -82821,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)
@@ -82839,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)
@@ -82868,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)
@@ -82879,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)
@@ -82890,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)
@@ -82901,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)
@@ -83127,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,
@@ -83145,7 +83134,7 @@ const ChartConfigure = ({
                       ...m2,
                       barRadius: parseInt(e2.target.value, 10)
                     })),
-                    defaultValue: customSettings.barRadius
+                    value: customSettings.barRadius
                   })]
                 })]
               }) : null]
@@ -83165,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,
@@ -83201,7 +83190,7 @@ const ChartConfigure = ({
                     ...m2,
                     displayText: e2.target.value
                   })),
-                  defaultValue: customSettings.displayText
+                  value: customSettings.displayText
                 })]
               }), /* @__PURE__ */ jsxs("div", {
                 className: styles$e.seriesWrapper,
@@ -83217,7 +83206,7 @@ const ChartConfigure = ({
                     ...m2,
                     subHeaderFontSize: parseInt(e2.target.value, 10)
                   })),
-                  defaultValue: customSettings.subHeaderFontSize
+                  value: customSettings.subHeaderFontSize
                 })]
               })]
             }), /* @__PURE__ */ jsxs("div", {
@@ -83391,6 +83380,7 @@ const ChartSettings = ({
   data: data2,
   setXAxis,
   setYAxisList,
+  yAxisList,
   xAxis,
   setMeasure,
   setStep,
@@ -83480,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, {
@@ -83489,6 +83480,7 @@ const ChartSettings = ({
               data: data2,
               setXAxis,
               xAxis,
+              yAxisList,
               setYAxisList,
               chartType: chartType2,
               setStep,
@@ -83608,6 +83600,7 @@ const ChartTab = ({
   data: data2,
   setXAxis,
   setYAxisList,
+  yAxisList,
   xAxis,
   setMeasure,
   setStep,
@@ -83725,6 +83718,7 @@ const ChartTab = ({
             data: data2,
             setXAxis,
             setYAxisList,
+            yAxisList,
             xAxis,
             setMeasure,
             setStep,
@@ -84174,6 +84168,7 @@ const MetricOutput = ({
   setChartType,
   setXAxis,
   setYAxisList,
+  yAxisList,
   xAxis,
   setMeasure,
   setStep,
@@ -84248,6 +84243,7 @@ const MetricOutput = ({
         setChartType,
         setXAxis,
         setYAxisList,
+        yAxisList,
         xAxis,
         setMeasure,
         setStep,
@@ -85869,6 +85865,7 @@ const EmbeddedMetricCreation = ({
           setChartType,
           setXAxis,
           setYAxisList,
+          yAxisList,
           xAxis,
           setMeasure,
           setStep,