@sentio/ui-dashboard 0.2.7 → 0.2.8

package/dist/index.js

@@ -41,6 +41,7 @@ __export(index_exports, {
   ChartLegend: () => ChartLegend,
   ChartTooltip: () => ChartTooltip,
   ChartTypeButtonGroup: () => ChartTypeButtonGroup,
+  DataControls: () => DataControls,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
   FunctionInput: () => FunctionInput,
@@ -52,6 +53,7 @@ __export(index_exports, {
   LabelsInput: () => LabelsInput,
   LineControls: () => LineControls,
   LineIcon: () => LineIcon_default,
+  MarkerControls: () => MarkerControls,
   PieChart: () => PieChart2,
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
@@ -61,6 +63,7 @@ __export(index_exports, {
   RefreshButton: () => RefreshButton,
   RefreshContext: () => RefreshContext,
   ScatterChartTooltip: () => ScatterChartTooltip,
+  ScatterControls: () => ScatterControls,
   ScatterIcon: () => ScatterIcon_default,
   SystemLabels: () => SystemLabels,
   TableIcon: () => TableIcon_default,
@@ -68,8 +71,12 @@ __export(index_exports, {
   ValueFormatters: () => ValueFormatters,
   ValueOptions: () => ValueOptions,
   ValueStringMapping: () => ValueStringMapping,
+  XAxisControls: () => XAxisControls,
+  YaxisControls: () => YaxisControls,
   defaultBarGaugeConfig: () => defaultConfig2,
+  defaultDataConfig: () => defaultConfig5,
   defaultPieConfig: () => defaultConfig,
+  defaultScatterConfig: () => defaultConfig6,
   defaultValueConfig: () => defaultConfig3,
   defaultValueControlsConfig: () => defaultConfig4,
   isAggrOrRollupFunction: () => isAggrOrRollupFunction,
@@ -4346,13 +4353,30 @@ function BarGaugeControls({ config, defaultOpen, onChange }) {
 
 // src/charts/options/ValueOptions.tsx
 var import_immer9 = require("immer");
-var import_ui_core16 = require("@sentio/ui-core");
+var import_ui_core17 = require("@sentio/ui-core");
+
+// src/charts/options/controls-ui.tsx
+var import_ui_core15 = require("@sentio/ui-core");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var AddonLabel = ({
+  className,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  "span",
+  {
+    className: (0, import_ui_core15.classNames)(
+      "sm:text-icontent border-main inline-flex items-center whitespace-nowrap bg-gray-50",
+      className
+    ),
+    children
+  }
+);
 
 // src/charts/options/ValueStringMapping.tsx
 var import_lu5 = require("react-icons/lu");
-var import_ui_core15 = require("@sentio/ui-core");
+var import_ui_core16 = require("@sentio/ui-core");
 var import_immer8 = require("immer");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var operators = {
   ">": "greater than",
   ">=": "greater or equal",
@@ -4362,17 +4386,17 @@ var operators = {
   "<=": "less or equal"
 };
 var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex h-full w-full items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex h-full w-full items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
-        className: (0, import_ui_core15.classNames)(
+        className: (0, import_ui_core16.classNames)(
           "w-px bg-gray-300",
           isLast ? "h-1/2 self-start" : index === 0 ? "h-full self-end" : "h-full"
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-px w-3 bg-gray-300" })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-px w-3 bg-gray-300" })
   ] }) });
 };
 function ValueStringMapping({ rules, onChange }) {
@@ -4403,31 +4427,31 @@ function ValueStringMapping({ rules, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
     (rules || []).map((rule, index) => {
       const isLast = index === (rules || []).length - 1;
-      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
         "div",
         {
           className: "text-text-foreground flex h-10 items-center py-1",
           children: [
             renderTreeLine(index, isLast),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "select",
               {
                 value: rule.comparison,
                 onChange: (e) => changeRule(index, "comparison", e.target.value),
                 className: "rounded-r-0 sm:text-ilabel border-main text-text-foreground focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 inline-flex h-full items-center rounded-l-md border border-r-0 bg-gray-50 py-1 pl-4 pr-7",
                 children: Object.entries(operators).map(([op, display]) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("option", { value: op, children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("option", { value: op, children: [
                     "is ",
                     display
                   ] }, op);
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "input",
               {
                 type: "text",
@@ -4441,8 +4465,8 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "input",
               {
                 type: "text",
@@ -4456,14 +4480,14 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "button",
               {
                 type: "button",
                 className: "mx-2",
                 "aria-label": "remove",
                 onClick: () => removeRule(index),
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   import_lu5.LuTrash2,
                   {
                     className: "icon text-text-foreground-disabled",
@@ -4477,8 +4501,8 @@ function ValueStringMapping({ rules, onChange }) {
         index
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      import_ui_core15.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      import_ui_core16.Button,
       {
         type: "button",
         role: "secondary",
@@ -4486,7 +4510,7 @@ function ValueStringMapping({ rules, onChange }) {
         "aria-label": "remove",
         onClick: addRule,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lu5.LuPlus, { className: (0, import_ui_core15.classNames)("h-4 w-4"), "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lu5.LuPlus, { className: (0, import_ui_core16.classNames)("h-4 w-4"), "aria-hidden": "true" }),
           "Add Formatting Rule"
         ]
       }
@@ -4495,7 +4519,7 @@ function ValueStringMapping({ rules, onChange }) {
 }
 
 // src/charts/options/ValueOptions.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var ValueFormatters = [
   { label: "Number", value: "NumberFormatter" },
   { label: "Date", value: "DateFormatter" },
@@ -4521,19 +4545,10 @@ var CurrencySymbols = [
   { label: "BTC", value: "\u0243" },
   { label: "ETH", value: "\u039E" }
 ];
-var AddonLabel = ({
+var AddonLabel2 = ({
   className,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  "span",
-  {
-    className: (0, import_ui_core16.classNames)(
-      "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap bg-gray-50 px-3",
-      className
-    ),
-    children
-  }
-);
+}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel, { className: (0, import_ui_core17.classNames)("px-3", className), children });
 var ValueOptions = ({
   config,
   onChange,
@@ -4600,9 +4615,9 @@ var ValueOptions = ({
   function numberAddons(style) {
     switch (style) {
       case "None":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border border-l-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "input",
             {
               disabled: true,
@@ -4613,9 +4628,9 @@ var ValueOptions = ({
         ] });
       case "Percent":
       case "Standard":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border border-x-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "input",
             {
               type: "number",
@@ -4629,10 +4644,10 @@ var ValueOptions = ({
           )
         ] });
       case "Currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_ui_core16.ComboInput,
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border border-r-0", children: "Symbol" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            import_ui_core17.ComboInput,
             {
               onChange: onChangeSymbol,
               options: CurrencySymbols.map((s) => s.value),
@@ -4644,8 +4659,8 @@ var ValueOptions = ({
               value: config?.currencySymbol
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border", children: "Precision" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border", children: "Precision" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "input",
             {
               type: "number",
@@ -4660,9 +4675,9 @@ var ValueOptions = ({
           )
         ] });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border border-x-0", children: "Max significant digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "input",
             {
               type: "number",
@@ -4677,62 +4692,62 @@ var ValueOptions = ({
         ] });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "select",
         {
           value: config.valueFormatter,
-          className: (0, import_ui_core16.classNames)(
+          className: (0, import_ui_core17.classNames)(
             "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1.5 pl-4 pr-7 focus:ring-0",
             config.valueFormatter == "StringFormatter" ? "rounded-r-md" : ""
           ),
           onChange: (e) => onChangeFormatter(e.target.value),
           children: formatters.map((d) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: d.value, children: d.label }, d.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: d.value, children: d.label }, d.value);
           })
         }
       ),
-      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border border-l-0 border-r-0", children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
           "select",
           {
             value: config.style,
             className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1 pl-4 pr-7 focus:ring-0",
             onChange: (e) => onStyleChange(e.target.value),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "None", children: "None" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Compact", children: "Compact" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Standard", children: "Standard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Scientific", children: "Scientific" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Percent", children: "Percent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Currency", children: "Currency" })
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "None", children: "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "Compact", children: "Compact" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "Standard", children: "Standard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "Scientific", children: "Scientific" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "Percent", children: "Percent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: "Currency", children: "Currency" })
             ]
           }
         ),
         config.style && numberAddons(config.style)
       ] }),
-      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AddonLabel2, { className: "border border-l-0", children: "Date format" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "select",
           {
             value: config.dateFormat,
             className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center rounded-r-md border  border-l-0  py-1  pl-4 pr-7",
             onChange: (e) => onChangeDateFormat(e.target.value),
             children: dateFormats.map((d) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: d.value, children: d.label }, d.value);
+              return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("option", { value: d.value, children: d.label }, d.value);
             })
           }
         )
       ] })
     ] }) }),
-    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
-      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
+      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "input",
           {
             type: "text",
@@ -4743,9 +4758,9 @@ var ValueOptions = ({
           }
         )
       ] }),
-      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "input",
           {
             type: "text",
@@ -4757,7 +4772,7 @@ var ValueOptions = ({
         )
       ] })
     ] }) }),
-    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ValueStringMapping,
       {
         rules: config.mappingRules || [],
@@ -4769,9 +4784,9 @@ var ValueOptions = ({
 
 // src/charts/options/ValueControls.tsx
 var import_lodash7 = require("lodash");
-var import_ui_core17 = require("@sentio/ui-core");
+var import_ui_core18 = require("@sentio/ui-core");
 var import_immer10 = require("immer");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var defaultConfig4 = {
   valueFormatter: "NumberFormatter",
   showValueLabel: false,
@@ -4798,14 +4813,14 @@ var ValueControls = ({
   function toggleTooltipTotal(checked) {
     config && onChange((0, import_immer10.produce)(config, (draft) => void (draft.tooltipTotal = checked)));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-    import_ui_core17.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_ui_core18.DisclosurePanel,
     {
       title: "Value Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           ValueOptions,
           {
             onChange,
@@ -4815,17 +4830,17 @@ var ValueControls = ({
             showSuffix
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            import_ui_core17.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_ui_core18.Checkbox,
             {
               checked: config?.showValueLabel,
               onChange: toggleShowValueLabel,
               label: "Show value label"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-            import_ui_core17.Checkbox,
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_ui_core18.Checkbox,
             {
               checked: config?.tooltipTotal,
               onChange: toggleTooltipTotal,
@@ -4837,6 +4852,590 @@ var ValueControls = ({
     }
   );
 };
+
+// src/charts/options/YaxisControls.tsx
+var import_lodash8 = require("lodash");
+var import_ui_core19 = require("@sentio/ui-core");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var initialConfig2 = {
+  yAxis: {
+    min: "",
+    max: "",
+    scale: true,
+    stack: ""
+  }
+};
+function YaxisControls({
+  yAxis,
+  setYAxis,
+  defaultOpen,
+  columnSelect,
+  supportSetName = true,
+  supportSetMinMax = true,
+  supportStackSeries = true,
+  supportAlwaysShowZero = true,
+  supportReset = true,
+  panelTitle = "Y-Axis Controls"
+}) {
+  yAxis = (0, import_lodash8.defaults)(yAxis || {}, initialConfig2.yAxis);
+  const onChangeInput = (field) => (event) => {
+    const { value } = event.target;
+    setYAxis({
+      ...yAxis,
+      [field]: value || void 0,
+      scale: field == "min" && value > "0" ? true : yAxis?.scale
+    });
+  };
+  const onToggleZero = (checked) => {
+    setYAxis({ ...yAxis, scale: !checked, min: checked ? "" : yAxis?.min });
+  };
+  const onClickResetYAxis = () => {
+    setYAxis(initialConfig2.yAxis);
+  };
+  const onToggleStack = (checked) => {
+    setYAxis({ ...yAxis, stacked: checked ? "samesign" : "" });
+  };
+  const minMaxLabelCls = "inline-flex items-center border border-r-0 sm:text-icontent border-main  bg-gray-50 px-2 rounded-l-md";
+  const minMaxInputCls = "border focus:border-primary-500 rounded-r-md sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30";
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    import_ui_core19.DisclosurePanel,
+    {
+      title: panelTitle,
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "text-icontent flex flex-wrap gap-[10px]", children: [
+        supportSetName && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "input",
+            {
+              type: "text",
+              className: "focus:border-primary-500 sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 w-40 rounded-r-md border",
+              value: yAxis?.name,
+              placeholder: "Axis Name",
+              onChange: onChangeInput("name")
+            }
+          )
+        ] }),
+        columnSelect && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(AddonLabel, { className: "rounded-l-md border px-2", children: "Column" }),
+          columnSelect
+        ] }),
+        supportSetMinMax && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "inline-flex h-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: minMaxLabelCls, children: "Min" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "input",
+              {
+                type: "text",
+                className: minMaxInputCls,
+                style: { width: "10em" },
+                value: yAxis.min,
+                placeholder: "Auto",
+                onChange: onChangeInput("min")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "inline-flex h-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: minMaxLabelCls, children: "Max" }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              "input",
+              {
+                type: "text",
+                className: minMaxInputCls,
+                style: { width: "10em" },
+                value: yAxis.max,
+                placeholder: "Auto",
+                onChange: onChangeInput("max")
+              }
+            )
+          ] })
+        ] }),
+        supportStackSeries && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_ui_core19.Checkbox,
+          {
+            checked: !!yAxis?.stacked,
+            onChange: onToggleStack,
+            label: "Stack series"
+          }
+        ),
+        supportAlwaysShowZero && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          import_ui_core19.Checkbox,
+          {
+            checked: !yAxis.scale,
+            onChange: onToggleZero,
+            label: "Always show zero"
+          }
+        ),
+        supportReset && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_ui_core19.Button, { type: "button", role: "link", onClick: onClickResetYAxis, children: "Reset" })
+      ] })
+    }
+  );
+}
+
+// src/charts/options/XaxisControls.tsx
+var import_ui_core20 = require("@sentio/ui-core");
+var import_lu6 = require("react-icons/lu");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var TypeSelect = import_ui_core20.Select;
+var SortSelect = import_ui_core20.Select;
+var OrderSelect = import_ui_core20.Select;
+var sortByItems2 = [
+  { label: "Name", value: "ByName" },
+  { label: "Value", value: "ByValue" }
+];
+var orderItems2 = [
+  { label: "Ascendant", value: false },
+  { label: "Descendant", value: true }
+];
+var XAxisControls = ({
+  xAxis,
+  setXAxis,
+  defaultOpen,
+  columnSelect,
+  columnIsNonTime,
+  panelTitle = "X-Axis Controls",
+  supportName = true,
+  supportSort,
+  supportSetType
+}) => {
+  const onChangeInput = (field) => (event) => {
+    const { value } = event.target;
+    setXAxis({ ...xAxis, [field]: value || void 0 });
+  };
+  const onClickResetXAxis = () => {
+    setXAxis(void 0);
+  };
+  const isXAixsNoneTime = xAxis && xAxis.column && columnIsNonTime;
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_ui_core20.DisclosurePanel,
+    {
+      title: panelTitle,
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "text-icontent flex flex-wrap gap-[10px]", children: [
+        supportName && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "input",
+            {
+              type: "text",
+              className: "sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 w-40 rounded-r-md",
+              value: xAxis?.name,
+              placeholder: "Axis Name",
+              onChange: onChangeInput("name")
+            }
+          )
+        ] }),
+        supportSetType && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2", children: [
+            "X-Axis Type",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              import_ui_core20.PopoverTooltip,
+              {
+                strategy: "fixed",
+                hideArrow: true,
+                placementOption: "bottom",
+                text: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "text-text-foreground max-w-[300px] p-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-medium", children: "Discrete axis" }),
+                  " displays",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-primary-600", children: "discrete values evenly" }),
+                  ", while ",
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-medium", children: "Continuous axis" }),
+                  " ",
+                  "shows",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-primary-600", children: "continuous time series" }),
+                  " ",
+                  "and",
+                  " ",
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-primary-600", children: "auto-fills missing time points" })
+                ] }),
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lu6.LuInfo, { className: "text-text-foreground-secondary h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            TypeSelect,
+            {
+              className: "h-8 w-40",
+              buttonClassName: "h-full border-main rounded-l-none items-center inline-flex items-center",
+              value: xAxis?.type || "time",
+              onChange: (val) => {
+                setXAxis({ ...xAxis, type: val });
+              },
+              options: [
+                { label: "Continuous", value: "time" },
+                { label: "Discrete", value: "category" }
+              ]
+            }
+          )
+        ] }),
+        columnSelect && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AddonLabel, { className: "rounded-l-md border px-2", children: "Column" }),
+          columnSelect
+        ] }),
+        supportSort && isXAixsNoneTime && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Sort By" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            SortSelect,
+            {
+              className: "h-8 w-20 leading-8",
+              buttonClassName: "h-full border-main rounded-none inline-flex items-center",
+              options: sortByItems2,
+              value: xAxis?.sort?.sortBy,
+              onChange: (value) => {
+                setXAxis({
+                  ...xAxis,
+                  sort: { ...xAxis?.sort, sortBy: value }
+                });
+              },
+              placeholder: "Sort By"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            OrderSelect,
+            {
+              className: "h-8 w-40 leading-8",
+              buttonClassName: "h-full border-l-0 border-main rounded-l-none inline-flex items-center",
+              options: orderItems2,
+              value: xAxis?.sort?.orderDesc,
+              onChange: (value) => {
+                setXAxis({
+                  ...xAxis,
+                  sort: { ...xAxis?.sort, orderDesc: value }
+                });
+              },
+              placeholder: "Sort Order"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          import_ui_core20.Button,
+          {
+            type: "button",
+            role: "link",
+            onClick: onClickResetXAxis,
+            className: "h-8",
+            children: "Reset"
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/charts/options/MarkerControls.tsx
+var import_immer11 = require("immer");
+var import_lu7 = require("react-icons/lu");
+var import_ui_core21 = require("@sentio/ui-core");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var labelCls = "inline-flex items-center border border-r-0 sm:text-icontent border-main  bg-gray-50 px-2 rounded-l-md";
+var inputCls = "border focus:border-primary-500 rounded-r-md sm:text-icontent border-main w-28 hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30";
+function MarkerInput({
+  marker,
+  label,
+  onChange,
+  onRemove
+}) {
+  const _onChange = (field, value) => {
+    onChange(
+      (0, import_immer11.produce)(marker, (draft) => {
+        ;
+        draft[field] = value;
+      })
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-[10px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "inline-flex h-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: labelCls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pr-2", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          "select",
+          {
+            className: "sm:text-ilabel border-main text-text-foreground inline-flex h-full items-center border border-b-0 border-t-0 bg-gray-50 p-0 pl-4 pr-7 focus:border-transparent focus:ring-inset",
+            value: marker.type,
+            onChange: (e) => _onChange("type", e.target.value),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: "LINE", children: "horizontal line" }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: "LINEX", children: "vertical line" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pl-2", children: "at" })
+      ] }),
+      marker.type === "LINEX" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "input",
+        {
+          className: inputCls,
+          type: "text",
+          value: marker.valueX,
+          placeholder: "YYYY-MM-DD",
+          onChange: (e) => _onChange("valueX", e.target.value)
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "input",
+        {
+          className: inputCls,
+          type: "text",
+          value: marker.value,
+          onChange: (e) => _onChange("value", e.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "inline-flex h-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: labelCls, children: "Color" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute inset-0 flex w-8 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-4 w-4", style: { background: marker.color } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "input",
+          {
+            className: inputCls + " pl-8",
+            type: "text",
+            value: marker.color,
+            onChange: (e) => _onChange("color", e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "inline-flex h-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: labelCls, children: "Label" }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        "input",
+        {
+          className: inputCls,
+          type: "text",
+          value: marker.label,
+          onChange: (e) => _onChange("label", e.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "ml-2 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-gray-800 hover:bg-red-600",
+        "aria-label": "Remove marker",
+        onClick: onRemove,
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          import_lu7.LuMinus,
+          {
+            className: "dark:text-default-bg h-3 w-3 text-white",
+            "aria-hidden": "true"
+          }
+        )
+      }
+    )
+  ] });
+}
+var DEFAULT_MARKER = { value: 0, color: "#ff0000", label: "" };
+function MarkerControls({ markers, onChange }) {
+  const _markers = markers?.length ? markers : [];
+  const onAdd = () => {
+    onChange(
+      (0, import_immer11.produce)(_markers, (draft) => {
+        draft.push(DEFAULT_MARKER);
+      })
+    );
+  };
+  const onRemove = (index) => {
+    onChange(
+      (0, import_immer11.produce)(_markers, (draft) => {
+        draft.splice(index, 1);
+      })
+    );
+  };
+  const _onChange = (index, marker) => {
+    onChange(
+      (0, import_immer11.produce)(_markers, (draft) => {
+        draft[index] = marker;
+      })
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_ui_core21.DisclosurePanel,
+    {
+      title: "Markers",
+      containerClassName: "w-full bg-default-bg",
+      defaultOpen: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "space-y-2", children: [
+        _markers.map((marker, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          MarkerInput,
+          {
+            marker,
+            label: String.fromCharCode(65 + index % 26),
+            onChange: (v) => _onChange(index, v),
+            onRemove: () => onRemove(index)
+          },
+          index
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_ui_core21.Button, { type: "button", onClick: onAdd, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lu7.LuPlus, { className: "h-4 w-4", "aria-hidden": "true" }),
+          "Add Marker"
+        ] }) })
+      ] })
+    }
+  );
+}
+
+// src/charts/options/DataControls.tsx
+var import_immer12 = require("immer");
+var import_lodash9 = require("lodash");
+var import_ui_core22 = require("@sentio/ui-core");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var defaultConfig5 = {
+  seriesLimit: void 0
+};
+function DataControls({
+  defaultOpen,
+  onChange,
+  chartConfig,
+  defaultSeriesLimit = 20
+}) {
+  const config = (0, import_lodash9.defaults)(chartConfig?.dataConfig, defaultConfig5);
+  const currentSeriesLimit = config?.seriesLimit || chartConfig?.tableConfig?.rowLimit;
+  function onSeriesLimitChange(e) {
+    const value = parseInt(e.target.value);
+    if (value > 1e3) {
+      return;
+    }
+    config && onChange(
+      (0, import_immer12.produce)(config, (draft) => {
+        draft.seriesLimit = value;
+      })
+    );
+  }
+  function onKeyDown(e) {
+    if (!/[0-9]/.test(e.key) && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(e.key)) {
+      e.preventDefault();
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_ui_core22.DisclosurePanel,
+    {
+      title: "Data Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-8", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-3", children: "Max Series Limit" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "input",
+          {
+            type: "number",
+            max: 1e3,
+            min: 20,
+            className: "text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 mr-1 w-32 rounded-r-md",
+            value: currentSeriesLimit ?? defaultSeriesLimit,
+            onChange: onSeriesLimitChange,
+            onKeyDown
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/charts/options/ScatterControls.tsx
+var import_immer13 = require("immer");
+var import_lodash10 = require("lodash");
+var import_react21 = require("react");
+var import_ui_core23 = require("@sentio/ui-core");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var defaultConfig6 = {
+  minSize: 5,
+  maxSize: 30
+};
+function ScatterControls({
+  config,
+  defaultOpen,
+  onChange,
+  columnSelect,
+  colorPicker
+}) {
+  config = (0, import_lodash10.defaults)(config, defaultConfig6);
+  const onSymbolSizeColumnChange = (0, import_react21.useCallback)(
+    (column) => {
+      config && onChange((0, import_immer13.produce)(config, (draft) => void (draft.symbolSize = column)));
+    },
+    [config, onChange]
+  );
+  const onSymbolColorChange = (0, import_react21.useCallback)(
+    (color) => {
+      config && onChange((0, import_immer13.produce)(config, (draft) => void (draft.color = color)));
+    },
+    [config, onChange]
+  );
+  const onMinSizeChange = (0, import_react21.useCallback)(
+    (event) => {
+      const value = parseInt(event.target.value) || 5;
+      config && onChange((0, import_immer13.produce)(config, (draft) => void (draft.minSize = value)));
+    },
+    [config, onChange]
+  );
+  const onMaxSizeChange = (0, import_react21.useCallback)(
+    (event) => {
+      const value = parseInt(event.target.value) || 50;
+      config && onChange((0, import_immer13.produce)(config, (draft) => void (draft.maxSize = value)));
+    },
+    [config, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_ui_core23.DisclosurePanel,
+    {
+      title: "Scatter Chart Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-4", children: [
+        columnSelect && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Size By Column" }),
+          columnSelect({
+            value: config.symbolSize,
+            onChange: onSymbolSizeColumnChange
+          })
+        ] }),
+        colorPicker && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Size Color Mapping" }),
+          colorPicker({
+            value: config.color,
+            onChange: onSymbolColorChange
+          })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Min Size" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "input",
+            {
+              name: "minSize",
+              type: "number",
+              className: "focus:ring-primary-600/30 focus:border-primary-600 border-main text-icontent focus:ring-3 h-8 w-24 rounded-r-md border px-2",
+              value: config.minSize || 5,
+              onChange: onMinSizeChange,
+              min: "1",
+              max: "60"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Max Size" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            "input",
+            {
+              name: "maxSize",
+              type: "number",
+              className: "focus:ring-primary-600/30 focus:border-primary-600 border-main focus:ring-3 h-8 w-24 rounded-r-md border px-2 text-sm",
+              value: config.maxSize || 30,
+              onChange: onMaxSizeChange,
+              min: "1",
+              max: "60"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AggregateInput,
@@ -4850,6 +5449,7 @@ var ValueControls = ({
   ChartLegend,
   ChartTooltip,
   ChartTypeButtonGroup,
+  DataControls,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
@@ -4861,6 +5461,7 @@ var ValueControls = ({
   LabelsInput,
   LineControls,
   LineIcon,
+  MarkerControls,
   PieChart,
   PieChartControls,
   PieIcon,
@@ -4870,6 +5471,7 @@ var ValueControls = ({
   RefreshButton,
   RefreshContext,
   ScatterChartTooltip,
+  ScatterControls,
   ScatterIcon,
   SystemLabels,
   TableIcon,
@@ -4877,8 +5479,12 @@ var ValueControls = ({
   ValueFormatters,
   ValueOptions,
   ValueStringMapping,
+  XAxisControls,
+  YaxisControls,
   defaultBarGaugeConfig,
+  defaultDataConfig,
   defaultPieConfig,
+  defaultScatterConfig,
   defaultValueConfig,
   defaultValueControlsConfig,
   isAggrOrRollupFunction,