@sentio/ui-dashboard 0.2.3 → 0.2.6

package/dist/index.js

@@ -38,6 +38,8 @@ __export(index_exports, {
   BarGuageIcon: () => BarGuageIcon_default,
   BarIcon: () => BarIcon_default,
   ChartLegend: () => ChartLegend,
+  ChartTooltip: () => ChartTooltip,
+  ChartTypeButtonGroup: () => ChartTypeButtonGroup,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
   FunctionInput: () => FunctionInput,
@@ -49,12 +51,14 @@ __export(index_exports, {
   LabelsInput: () => LabelsInput,
   LineControls: () => LineControls,
   LineIcon: () => LineIcon_default,
+  PieChart: () => PieChart2,
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
   QueryValueIcon: () => QueryValueIcon_default,
   ReactEChartsBase: () => ReactEChartsBase,
   RefreshButton: () => RefreshButton,
   RefreshContext: () => RefreshContext,
+  ScatterChartTooltip: () => ScatterChartTooltip,
   ScatterIcon: () => ScatterIcon_default,
   SystemLabels: () => SystemLabels,
   TableIcon: () => TableIcon_default,
@@ -2618,1227 +2622,1973 @@ var RefreshButton = (props) => {
   ) });
 };
 
-// src/charts/options/LineControls.tsx
-var import_immer4 = require("immer");
+// src/charts/ChartTypeButtonGroup.tsx
+var import_react14 = require("react");
+var import_react_resize_detector2 = require("react-resize-detector");
 var import_ui_core8 = require("@sentio/ui-core");
+
+// src/charts/icons/BarGuageIcon.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var lineStyles = [
-  { label: "Solid", value: "Solid" },
-  { label: "Dotted", value: "Dotted" }
-];
-var LineControls = ({ config, defaultOpen, onChange }) => {
-  const setStyle = (style) => {
-    onChange(
-      (0, import_immer4.produce)(config || {}, (draft) => {
-        draft.style = style;
-      })
-    );
-  };
-  const setSmooth = (smooth) => {
-    onChange(
-      (0, import_immer4.produce)(config || {}, (draft) => {
-        draft.smooth = smooth;
-      })
-    );
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_ui_core8.DisclosurePanel,
-    {
-      title: "Line style",
-      containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_ui_core8.NewButtonGroup,
+var SvgIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "currentColor",
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M2.12791 1.5625V12.4375C2.12791 12.5938 2.07311 12.7267 1.96349 12.836C1.85387 12.9453 1.7207 13 1.56396 13C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375V1.5625C1 1.40617 1.05481 1.27333 1.16442 1.164C1.27404 1.05467 1.40722 1 1.56396 1C1.7207 1 1.85387 1.05467 1.96349 1.164C2.07311 1.27333 2.12791 1.40617 2.12791 1.5625ZM1.56396 11.875H12.436C12.5928 11.875 12.726 11.9297 12.8356 12.039C12.9452 12.1483 13 12.2812 13 12.4375C13 12.5938 12.9452 12.7267 12.8356 12.836C12.726 12.9453 12.5928 13 12.436 13H1.56396C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375C1 12.2812 1.05481 12.1483 1.16442 12.039C1.27404 11.9297 1.40722 11.875 1.56396 11.875Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M3.64159 4.02495H9.43859C9.59493 4.02495 9.72776 3.97014 9.83709 3.86052C9.94643 3.75091 10.0011 3.61773 10.0011 3.46099C10.0011 3.30425 9.94643 3.17108 9.83709 3.06146C9.72776 2.95184 9.59493 2.89703 9.43859 2.89703L3.64159 2.89703C3.48526 2.89703 3.35243 2.95184 3.24309 3.06146C3.13376 3.17108 3.07909 3.30425 3.07909 3.46099C3.07909 3.61773 3.13376 3.75091 3.24309 3.86052C3.35243 3.97014 3.48526 4.02495 3.64159 4.02495Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M3.64209 10.0244H11.4701C11.6264 10.0244 11.7593 9.96964 11.8686 9.86002C11.9779 9.7504 12.0326 9.61723 12.0326 9.46049C12.0326 9.30375 11.9779 9.17057 11.8686 9.06096C11.7593 8.95134 11.6264 8.89653 11.4701 8.89653H3.64209C3.48576 8.89653 3.35293 8.95134 3.24359 9.06096C3.13426 9.17057 3.07959 9.30375 3.07959 9.46049C3.07959 9.61723 3.13426 9.7504 3.24359 9.86002C3.35293 9.96964 3.48576 10.0244 3.64209 10.0244Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M3.64209 7.01668L7.47009 7.01668C7.62643 7.01634 7.75926 6.95886 7.86859 6.84423C7.97793 6.7296 8.03259 6.5991 8.03259 6.45272C8.03259 6.29598 7.97793 6.1628 7.86859 6.05319C7.75926 5.94357 7.62643 5.88876 7.47009 5.88876H3.64209C3.48576 5.88876 3.35293 5.94357 3.24359 6.05319C3.13426 6.1628 3.07959 6.29598 3.07959 6.45272C3.07959 6.60946 3.13426 6.74263 3.24359 6.85225C3.35293 6.96187 3.48576 7.01668 3.64209 7.01668Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+var BarGuageIcon_default = SvgIcon;
+
+// src/charts/icons/QueryValueIcon.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SvgIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("g", { clipPath: "url(#clip0_3670_4424)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
           {
-            buttons: lineStyles,
-            value: config?.style || "Solid",
-            onChange: setStyle,
-            small: true
+            d: "M11.5 1.5H2.5C1.67157 1.5 1 2.11561 1 2.875V11.125C1 11.8844 1.67157 12.5 2.5 12.5H11.5C12.3284 12.5 13 11.8844 13 11.125V2.875C13 2.11561 12.3284 1.5 11.5 1.5Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          import_ui_core8.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
           {
-            label: "Smooth Curves",
-            checked: config?.smooth,
-            onChange: setSmooth
+            d: "M7.98188 5.77273H6.39097L5.75461 5.13636L6.39097 4.5H7.98188L8.61824 5.13636L7.98188 5.77273Z",
+            fill: "currentColor"
           }
-        )
-      ] })
-    }
-  );
-};
-
-// src/charts/options/LabelControls.tsx
-var import_react14 = require("react");
-var import_immer5 = require("immer");
-var import_ui_core9 = require("@sentio/ui-core");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var initialConfig = {
-  columns: [],
-  alias: ""
-};
-var LabelControls = ({ config, setConfig, defaultOpen }) => {
-  (0, import_react14.useEffect)(() => {
-    if (config?.columns && config.columns.length > 0 && !config.alias) {
-      const aliasParts = [];
-      config.columns.forEach((colConfig) => {
-        if (!colConfig.name) return;
-        if (colConfig.showLabel === false && colConfig.showValue === false) {
-        } else if (colConfig.showValue === false) {
-          aliasParts.push(colConfig.name);
-        } else {
-          aliasParts.push(`{{${colConfig.name}}}`);
-        }
-      });
-      if (aliasParts.length > 0) {
-        const migratedAlias = aliasParts.join(", ");
-        setConfig(
-          (0, import_immer5.produce)(config, (draft) => {
-            draft.alias = migratedAlias;
-            draft.columns = [];
-          })
-        );
-      }
-    }
-  }, [config, setConfig]);
-  const onAliasChanged = (alias) => {
-    setConfig(
-      (0, import_immer5.produce)(config ?? initialConfig, (draft) => {
-        draft.alias = alias;
-      })
-    );
-  };
-  const _defaultOpen = (0, import_react14.useMemo)(() => {
-    if (defaultOpen) {
-      return true;
-    }
-    return config?.alias !== "" || config?.columns && config.columns.length > 0;
-  }, [config, defaultOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_ui_core9.DisclosurePanel,
-    {
-      title: "Label Controls",
-      defaultOpen: _defaultOpen,
-      containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2 font-medium", children: [
-            "Label Alias",
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              import_ui_core9.HelpIcon,
-              {
-                text: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "text-icontent text-text-foreground", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: "Series name override or template." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-                    "Ex.",
-                    " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
-                    " ",
-                    "will be replaced with the value of the contract label."
-                  ] })
-                ] })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "input",
-            {
-              type: "text",
-              value: config?.alias || "",
-              onChange: (e) => onAliasChanged(e.target.value),
-              placeholder: "Enter alias...",
-              className: "focus:border-primary-500 sm:text-icontent border-main inline-flex w-64 items-center rounded-r-md border px-2"
-            }
-          )
-        ] }),
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_ui_core9.Button,
+          "path",
           {
-            type: "button",
-            role: "link",
-            onClick: () => {
-              setConfig(initialConfig);
-            },
-            children: "Reset"
+            d: "M7.98188 11.5H6.39097L5.75461 10.8637L6.39097 10.2273H7.98188L8.61824 10.8637L7.98188 11.5Z",
+            fill: "currentColor"
           }
-        )
-      ] })
-    }
-  );
-};
-
-// src/charts/options/PieChartControls.tsx
-var import_immer6 = require("immer");
-var import_lodash3 = require("lodash");
-var import_ui_core10 = require("@sentio/ui-core");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var defaultConfig = {
-  pieType: "Pie",
-  calculation: "LAST",
-  showPercent: true,
-  showValue: true,
-  absValue: false
-};
-var CalculationItems = [
-  { label: "Last", value: "LAST" },
-  { label: "First", value: "FIRST" },
-  { label: "Total", value: "TOTAL" },
-  { label: "Mean", value: "MEAN" },
-  { label: "Max", value: "MAX" },
-  { label: "Min", value: "MIN" }
-];
-var PieTypeItems = [
-  { label: "Pie", value: "Pie" },
-  { label: "Donut", value: "Donut" }
-];
-function PieChartControls({ config, defaultOpen, onChange }) {
-  config = (0, import_lodash3.defaults)(config, defaultConfig);
-  function onCalculationChange(cal) {
-    config && onChange((0, import_immer6.produce)(config, (draft) => void (draft.calculation = cal)));
-  }
-  function onPieTypeChange(pieType) {
-    config && onChange((0, import_immer6.produce)(config, (draft) => void (draft.pieType = pieType)));
-  }
-  function toggle(field, value) {
-    config && onChange(
-      (0, import_immer6.produce)(config, (draft) => {
-        draft[field] = value;
-      })
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_ui_core10.DisclosurePanel,
-    {
-      title: "Pie Chart Options",
-      defaultOpen,
-      containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_ui_core10.NewButtonGroup,
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
           {
-            small: true,
-            buttons: PieTypeItems,
-            value: config.pieType,
-            onChange: onPieTypeChange
+            d: "M8.30005 9.90907V6.09089L8.93641 5.45453L9.57278 6.09089V9.90907L8.93641 10.5454L8.30005 9.90907Z",
+            fill: "currentColor"
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "select",
-            {
-              value: config.calculation,
-              className: "sm:text-ilabel text-text-foreground border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
-              onChange: (e) => onCalculationChange(e.target.value),
-              children: CalculationItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: d.value, children: d.label }, d.value);
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_ui_core10.Checkbox,
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
           {
-            checked: config?.showValue,
-            onChange: (v) => toggle("showValue", v),
-            label: "Show value",
-            labelClassName: "whitespace-nowrap"
+            d: "M4.80005 9.90907V6.09089L5.43641 5.45453L6.07278 6.09089V9.90907L5.43641 10.5454L4.80005 9.90907Z",
+            fill: "currentColor"
           }
         ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "path",
+          {
+            d: "M1 3.5L13 3.5",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("clipPath", { id: "clip0_3670_4424", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var QueryValueIcon_default = SvgIcon2;
+
+// src/charts/icons/TableIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SvgIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("g", { clipPath: "url(#clip0_3670_4416)", children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_ui_core10.Checkbox,
+          "path",
           {
-            checked: config?.showPercent,
-            onChange: (v) => toggle("showPercent", v),
-            label: "Show percent",
-            labelClassName: "whitespace-nowrap"
+            d: "M11.5 2H2.5C1.67157 2 1 2.55964 1 3.25V10.75C1 11.4404 1.67157 12 2.5 12H11.5C12.3284 12 13 11.4404 13 10.75V3.25C13 2.55964 12.3284 2 11.5 2Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_ui_core10.Checkbox,
+          "path",
           {
-            checked: config?.absValue,
-            onChange: (v) => toggle("absValue", v),
-            label: "Use absolute values",
-            labelClassName: "whitespace-nowrap"
+            d: "M1 5L13 5",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "path",
+          {
+            d: "M6 2L6 12",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
-      ] })
-    }
-  );
-}
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("clipPath", { id: "clip0_3670_4416", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var TableIcon_default = SvgIcon3;
 
-// src/charts/options/BarGaugeControls.tsx
-var import_immer7 = require("immer");
-var import_lodash4 = require("lodash");
-var import_ui_core11 = require("@sentio/ui-core");
+// src/charts/icons/AreaIcon.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var defaultConfig2 = {
-  direction: "HORIZONTAL",
-  calculation: "LAST",
-  sort: {
-    sortBy: "ByName",
-    orderDesc: true
-  }
-};
-var directionItems = [
-  { label: "Horizontal", value: "HORIZONTAL" },
-  { label: "Vertical", value: "VERTICAL" }
-];
-var CalculationItems2 = [
-  { label: "Last", value: "LAST" },
-  { label: "First", value: "FIRST" },
-  { label: "Total", value: "TOTAL" },
-  { label: "Mean", value: "MEAN" },
-  { label: "Max", value: "MAX" },
-  { label: "Min", value: "MIN" }
-];
-var sortByItems = [
-  { label: "Name", value: "ByName" },
-  { label: "Value", value: "ByValue" }
-];
-var orderItems = [
-  { label: "Ascendant", value: "false" },
-  { label: "Descendant", value: "true" }
-];
-function BarGaugeControls({ config, defaultOpen, onChange }) {
-  config = (0, import_lodash4.defaults)(config, defaultConfig2);
-  function onCalculationChange(cal) {
-    config && onChange((0, import_immer7.produce)(config, (draft) => void (draft.calculation = cal)));
-  }
-  function onDirectionChange(dir) {
-    config && onChange((0, import_immer7.produce)(config, (draft) => void (draft.direction = dir)));
-  }
-  function onOrderChange(orderDesc) {
-    config && onChange(
-      (0, import_immer7.produce)(config, (draft) => {
-        draft.sort = draft.sort || {};
-        draft.sort.orderDesc = orderDesc;
-      })
-    );
-  }
-  function onSortByChange(sortBy2) {
-    config && onChange(
-      (0, import_immer7.produce)(config, (draft) => {
-        draft.sort = draft.sort || {};
-        draft.sort.sortBy = sortBy2;
-      })
-    );
+var SvgIcon4 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("g", { clipPath: "url(#clip0_1774_9545)", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "path",
+        {
+          d: "M12.6193 13.1249H1.35364C1.21685 13.1249 1.10062 13.0771 1.00495 12.9814C0.909284 12.8857 0.86145 12.7695 0.86145 12.6327V1.35352C0.86145 1.21672 0.909284 1.10049 1.00495 1.00483C1.10062 0.909161 1.21685 0.861328 1.35364 0.861328C1.49043 0.861328 1.60666 0.909161 1.70233 1.00483C1.79799 1.10049 1.84583 1.21672 1.84583 1.35352V12.1405H12.6193C12.7561 12.1405 12.8723 12.1883 12.968 12.284C13.0636 12.3797 13.1115 12.4959 13.1115 12.6327C13.1115 12.7695 13.0636 12.8857 12.968 12.9814C12.8723 13.0771 12.7561 13.1249 12.6193 13.1249ZM2.62501 10.9374L4.22451 8.08008C4.26097 8.0162 4.31566 7.97289 4.38858 7.95014C4.46149 7.92739 4.53441 7.92972 4.60733 7.95714L6.12501 8.66808L7.73851 6.33008C7.83885 6.19329 7.96193 6.16135 8.10776 6.23427L9.61189 6.99989L11.7994 3.56814C11.8633 3.46781 11.9521 3.43368 12.0658 3.46577C12.1796 3.49785 12.2366 3.5731 12.2369 3.69152V10.8009C12.2369 10.9467 12.1845 11.072 12.0798 11.1767C11.9751 11.2814 11.8498 11.3338 11.704 11.3338H2.87176C2.77143 11.3338 2.69399 11.2905 2.63945 11.2038C2.58491 11.1172 2.58039 11.0284 2.62589 10.9374H2.62501Z",
+          fill: "currentColor"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("clipPath", { id: "clip0_1774_9545", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    import_ui_core11.DisclosurePanel,
-    {
-      title: "Bar Gauge Options",
-      defaultOpen,
-      containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "shadow-xs  flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Direction" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "select",
-            {
-              value: config.direction,
-              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
-              onChange: (e) => onDirectionChange(e.target.value),
-              children: directionItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: d.value, children: d.label }, d.value);
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "select",
-            {
-              value: config.calculation,
-              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
-              onChange: (e) => onCalculationChange(e.target.value),
-              children: CalculationItems2.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: d.value, children: d.label }, d.value);
-              })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Sort by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "select",
-            {
-              value: config?.sort?.sortBy,
-              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center border pl-4 pr-7",
-              onChange: (e) => onSortByChange(e.target.value),
-              children: sortByItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: d.value, children: d.label }, d.value);
-              })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            "select",
-            {
-              value: config?.sort?.orderDesc + "",
-              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border border-l-0 pl-4 pr-7",
-              onChange: (e) => onOrderChange(e.target.value === "true"),
-              children: orderItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: d.value + "", children: d.label }, d.label);
-              })
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-
-// src/charts/options/ValueOptions.tsx
-var import_immer9 = require("immer");
-var import_ui_core13 = require("@sentio/ui-core");
+);
+var AreaIcon_default = SvgIcon4;
 
-// src/charts/options/ValueStringMapping.tsx
-var import_lu3 = require("react-icons/lu");
-var import_ui_core12 = require("@sentio/ui-core");
-var import_immer8 = require("immer");
+// src/charts/icons/BarIcon.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var operators = {
-  ">": "greater than",
-  ">=": "greater or equal",
-  "==": "equal",
-  "!=": "not equal",
-  "<": "less than",
-  "<=": "less or equal"
-};
-var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex h-full w-full items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "div",
+var SvgIcon5 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "path",
       {
-        className: (0, import_ui_core12.classNames)(
-          "w-px bg-gray-300",
-          isLast ? "h-1/2 self-start" : index === 0 ? "h-full self-end" : "h-full"
-        )
+        d: "M2.12791 1.5625V12.4375C2.12791 12.5938 2.07311 12.7267 1.96349 12.836C1.85387 12.9453 1.7207 13 1.56396 13C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375V1.5625C1 1.40617 1.05481 1.27333 1.16442 1.164C1.27404 1.05467 1.40722 1 1.56396 1C1.7207 1 1.85387 1.05467 1.96349 1.164C2.07311 1.27333 2.12791 1.40617 2.12791 1.5625ZM1.56396 11.875H12.436C12.5928 11.875 12.726 11.9297 12.8356 12.039C12.9452 12.1483 13 12.2812 13 12.4375C13 12.5938 12.9452 12.7267 12.8356 12.836C12.726 12.9453 12.5928 13 12.436 13H1.56396C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375C1 12.2812 1.05481 12.1483 1.16442 12.039C1.27404 11.9297 1.40722 11.875 1.56396 11.875ZM5.12014 4.578V10.375C5.12014 10.5313 5.06534 10.6642 4.95572 10.7735C4.8461 10.8828 4.71293 10.9375 4.55619 10.9375C4.39945 10.9375 4.26627 10.8828 4.15665 10.7735C4.04704 10.6642 3.99223 10.5313 3.99223 10.375V4.578C3.99223 4.42167 4.04704 4.28883 4.15665 4.1795C4.26627 4.07017 4.39945 4.0155 4.55619 4.0155C4.71293 4.0155 4.8461 4.07017 4.95572 4.1795C5.06534 4.28883 5.12014 4.42167 5.12014 4.578ZM11.1196 2.5465V10.3745C11.1196 10.5308 11.0648 10.6637 10.9552 10.773C10.8456 10.8823 10.7124 10.937 10.5557 10.937C10.3989 10.937 10.2658 10.8823 10.1562 10.773C10.0465 10.6637 9.99173 10.5308 9.99173 10.3745V2.5465C9.99173 2.39017 10.0465 2.25733 10.1562 2.148C10.2658 2.03867 10.3989 1.984 10.5557 1.984C10.7124 1.984 10.8456 2.03867 10.9552 2.148C11.0648 2.25733 11.1196 2.39017 11.1196 2.5465ZM8.11187 6.5465V10.3745C8.11187 10.5308 8.05706 10.6637 7.94745 10.773C7.83783 10.8823 7.70465 10.937 7.54792 10.937C7.39118 10.937 7.258 10.8823 7.14838 10.773C7.03877 10.6637 6.98396 10.5308 6.98396 10.3745V6.5465C6.98396 6.39017 7.03877 6.25733 7.14838 6.148C7.258 6.03867 7.39118 5.984 7.54792 5.984C7.69429 5.984 7.8248 6.03867 7.93943 6.148C8.05406 6.25733 8.11154 6.39017 8.11187 6.5465Z",
+        fill: "currentColor"
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-px w-3 bg-gray-300" })
-  ] }) });
-};
-function ValueStringMapping({ rules, onChange }) {
-  const addRule = () => {
-    onChange(
-      (0, import_immer8.produce)(rules, (draft) => {
-        draft = draft || [];
-        draft.push({
-          comparison: "==",
-          value: 0,
-          text: ""
-        });
-      })
-    );
-  };
-  function removeRule(index) {
-    onChange(
-      (0, import_immer8.produce)(rules, (draft) => {
-        draft.splice(index, 1);
-      })
-    );
-  }
-  function changeRule(index, field, value) {
-    onChange(
-      (0, import_immer8.produce)(rules, (draft) => {
-        ;
-        draft[index][field] = value;
-      })
-    );
+    )
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)(
-        "div",
-        {
-          className: "text-text-foreground flex h-10 items-center py-1",
-          children: [
-            renderTreeLine(index, isLast),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)("option", { value: op, children: [
-                    "is ",
-                    display
-                  ] }, op);
-                })
+);
+var BarIcon_default = SvgIcon5;
+
+// src/charts/icons/LineIcon.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SvgIcon6 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("g", { clipPath: "url(#clip0_1774_9563)", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "path",
+        {
+          d: "M12.6191 13.1249H1.35352C1.21672 13.1249 1.10049 13.0771 1.00483 12.9814C0.909161 12.8857 0.861328 12.7695 0.861328 12.6327V1.35352C0.861328 1.21672 0.909161 1.10049 1.00483 1.00483C1.10049 0.909161 1.21672 0.861328 1.35352 0.861328C1.49031 0.861328 1.60654 0.909161 1.7022 1.00483C1.79787 1.10049 1.8457 1.21672 1.8457 1.35352V12.1405H12.6191C12.7559 12.1405 12.8722 12.1883 12.9678 12.284C13.0635 12.3797 13.1113 12.4959 13.1113 12.6327C13.1113 12.7695 13.0635 12.8857 12.9678 12.9814C12.8722 13.0771 12.7559 13.1249 12.6191 13.1249ZM5.26345 10.1582C5.0902 10.1582 4.95341 10.0853 4.85308 9.93945L2.7067 6.52127C2.63379 6.40285 2.61104 6.27758 2.63845 6.14545C2.66587 6.01333 2.73645 5.91081 2.8502 5.83789C2.96395 5.76497 3.08704 5.74222 3.21945 5.76964C3.35187 5.79706 3.45439 5.86545 3.52702 5.97483L5.05827 8.46333L5.68739 6.04352C5.72385 5.89768 5.81047 5.79283 5.94727 5.72895L8.43576 4.52583C8.55418 4.47099 8.67274 4.45962 8.79145 4.4917C8.91016 4.52379 9.00583 4.59437 9.07845 4.70345L10.3227 6.72689L12.155 1.21702C12.2005 1.08927 12.2826 0.993599 12.4013 0.930016C12.52 0.866432 12.6431 0.857245 12.7705 0.902453C12.898 0.947661 12.9936 1.02977 13.0575 1.14877C13.1214 1.26777 13.1306 1.39085 13.0851 1.51802L10.9247 8.03939C10.8608 8.24006 10.724 8.35177 10.5143 8.37452C10.3046 8.39727 10.1451 8.32202 10.0357 8.14877L8.46333 5.60558L6.59039 6.50814L5.74252 9.78939C5.68768 9.9991 5.55556 10.1177 5.34614 10.1451C5.31872 10.1541 5.29131 10.1586 5.26389 10.1586L5.26345 10.1582Z",
+          fill: "currentColor"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("clipPath", { id: "clip0_1774_9563", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var LineIcon_default = SvgIcon6;
+
+// src/charts/icons/PieIcon.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SvgIcon7 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_28267_7202)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M5.83329 1.86662C4.92079 2.07816 4.08149 2.52998 3.40247 3.17523C2.72345 3.82048 2.22942 4.63564 1.97164 5.53618C1.71386 6.43671 1.70171 7.38982 1.93644 8.29663C2.17118 9.20345 2.64426 10.0309 3.30661 10.6933C3.96896 11.3556 4.79646 11.8287 5.70327 12.0635C6.61009 12.2982 7.56319 12.286 8.46373 12.0283C9.36426 11.7705 10.1794 11.2765 10.8247 10.5974C11.4699 9.91841 11.9217 9.07912 12.1333 8.16662C12.1333 8.01191 12.0718 7.86353 11.9624 7.75414C11.853 7.64474 11.7047 7.58328 11.55 7.58328H7.58329C7.27387 7.58328 6.97713 7.46037 6.75833 7.24157C6.53954 7.02278 6.41662 6.72604 6.41662 6.41662V2.33328C6.40938 2.26417 6.38848 2.19719 6.35515 2.13621C6.32182 2.07524 6.27671 2.02149 6.22245 1.97808C6.16819 1.93467 6.10585 1.90247 6.03905 1.88333C5.97224 1.8642 5.90231 1.85852 5.83329 1.86662Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M8.75 2.04175C9.49067 2.30255 10.1634 2.72617 10.7187 3.28142C11.2739 3.83668 11.6975 4.50941 11.9583 5.25008H9.33333C9.17862 5.25008 9.03025 5.18862 8.92085 5.07923C8.81146 4.96983 8.75 4.82146 8.75 4.66675V2.04175Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_28267_7202", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var PieIcon_default = SvgIcon7;
+
+// src/charts/icons/ScatterIcon.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SvgIcon8 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { clipPath: "url(#clip0_28248_7302)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M1.75 1.75V12.25H12.25",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M4.66663 8.75879V8.76754",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M9.33337 9.34204V9.35079",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M4.66663 4.10083V4.10958",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M7 6.43408V6.44283",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M11.0834 6.43408V6.44283",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_28248_7302", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var ScatterIcon_default = SvgIcon8;
+
+// src/charts/ChartTypeButtonGroup.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var visuals = [
+  {
+    label: "Lines",
+    value: "LINE",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LineIcon_default, { className: "mr-1 h-4 w-4" })
+  },
+  { label: "Bars", value: "BAR", icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BarIcon_default, { className: "mr-1 h-4 w-4" }) },
+  {
+    label: "Areas",
+    value: "AREA",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AreaIcon_default, { className: "mr-1 h-4 w-4" })
+  },
+  {
+    label: "Bar Gauge",
+    value: "BAR_GAUGE",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BarGuageIcon_default, { className: "mr-1 h-4 w-4" })
+  },
+  {
+    label: "Scatter",
+    value: "SCATTER",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ScatterIcon_default, { className: "mr-1 h-4 w-4" })
+  },
+  {
+    label: "Query Value",
+    value: "QUERY_VALUE",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QueryValueIcon_default, { className: "mr-1 h-4 w-4" })
+  },
+  {
+    label: "Table",
+    value: "TABLE",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableIcon_default, { className: "mr-1 h-4 w-4" })
+  },
+  { label: "Pie", value: "PIE", icon: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PieIcon_default, { className: "mr-1 h-4 w-4" }) }
+];
+var ChartTypeButtonGroup = ({
+  value,
+  onChange,
+  small = false
+}) => {
+  const [hideLabel, setHideLabel] = (0, import_react14.useState)(small);
+  const { ref } = (0, import_react_resize_detector2.useResizeDetector)({
+    onResize: ({ width }) => {
+      if (width) {
+        setHideLabel(width < 800);
+      }
+    },
+    refreshMode: "throttle",
+    refreshRate: 100
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-full flex-1", ref, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_ui_core8.NewButtonGroup,
+    {
+      buttons: visuals,
+      value,
+      onChange,
+      small,
+      hideLabel
+    }
+  ) });
+};
+
+// src/charts/ChartTooltip.tsx
+var import_react15 = require("react");
+var import_dayjs = __toESM(require("dayjs"));
+var import_utc = __toESM(require("dayjs/plugin/utc"));
+var import_timezone = __toESM(require("dayjs/plugin/timezone"));
+var import_lodash3 = require("lodash");
+var import_bigdecimal = __toESM(require("@sentio/bigdecimal"));
+var import_lu3 = require("react-icons/lu");
+var import_ui_core9 = require("@sentio/ui-core");
+
+// src/charts/duration.ts
+var longUnits = {
+  s: "seconds",
+  m: "minutes",
+  h: "hours",
+  d: "days",
+  w: "weeks",
+  M: "months",
+  y: "years"
+};
+function durationToLongString(d) {
+  const u = longUnits[d.unit ?? ""] ?? "";
+  return Number(d.value) === 1 ? u.replace(/s$/, "") : u;
+}
+
+// src/charts/ChartTooltip.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+import_dayjs.default.extend(import_utc.default);
+import_dayjs.default.extend(import_timezone.default);
+function isValidValue(value, includeZero) {
+  if (includeZero) {
+    return Number.isFinite(value);
+  } else {
+    return Number.isFinite(value) && value !== 0;
+  }
+}
+function ChartTooltip({
+  data,
+  numberFormatter,
+  compareTimeDuration,
+  highlightSeriesId,
+  title,
+  showTotal,
+  onViewLogs,
+  viewLogDisabled,
+  onViewUsers,
+  viewUsersDisabled,
+  isFixed
+}) {
+  const {
+    series,
+    hasCompare,
+    hasCurrent,
+    currentTime,
+    compareTime,
+    markers,
+    compareMarkers,
+    total,
+    compareTotal
+  } = (0, import_react15.useMemo)(() => {
+    const params = (0, import_lodash3.sortBy)(data, (p) => -p.value[1]);
+    const hasCompare2 = (0, import_lodash3.some)(
+      params,
+      (param) => param.seriesId.endsWith("_compare")
+    );
+    const seriesData = {};
+    const markers2 = {};
+    const compareMarkers2 = {};
+    let currentTime2;
+    let compareTime2;
+    let total2 = new import_bigdecimal.default(0);
+    let compareTotal2 = new import_bigdecimal.default(0);
+    for (const p of params) {
+      const { marker, seriesName, value, seriesId } = p;
+      if (seriesId.endsWith("_compare")) {
+        const id = seriesId.replace("_compare", "");
+        compareMarkers2[id] = marker;
+        if (compareTime2 === void 0) {
+          compareTime2 = (0, import_dayjs.default)(value[0]);
+        }
+        if (isValidValue(value[1], hasCompare2)) {
+          seriesData[id] = {
+            seriesId: id,
+            ...seriesData[id],
+            compareValue: value[1],
+            compareTime: value[0],
+            seriesName
+          };
+          compareTotal2 = compareTotal2.plus(value[1]);
+        }
+      } else {
+        markers2[seriesId] = marker;
+        if (currentTime2 === void 0) {
+          currentTime2 = (0, import_dayjs.default)(value[0]);
+        }
+        if (isValidValue(value[1], hasCompare2)) {
+          seriesData[seriesId] = {
+            seriesId,
+            ...seriesData[seriesId],
+            time: value[0],
+            value: value[1],
+            seriesName
+          };
+          total2 = total2.plus(value[1]);
+        }
+      }
+    }
+    const series2 = (0, import_lodash3.sortBy)(Object.values(seriesData), (s) => -s.value);
+    const hasCurrent2 = series2[0]?.value !== void 0;
+    if (compareTimeDuration && compareTime2 && !currentTime2) {
+      currentTime2 = compareTime2.add(
+        Number(compareTimeDuration.value),
+        compareTimeDuration.unit
+      );
+    }
+    return {
+      series: series2,
+      hasCompare: hasCompare2,
+      currentTime: currentTime2,
+      compareTime: compareTime2,
+      hasCurrent: hasCurrent2,
+      markers: markers2,
+      compareMarkers: compareMarkers2,
+      total: total2,
+      compareTotal: compareTotal2
+    };
+  }, [data]);
+  const renderRow = (p, idx) => {
+    const { seriesName, compareValue, value, seriesId } = p;
+    const highlighted = seriesId === highlightSeriesId;
+    const marker = markers[seriesId];
+    const diff = hasCompare && hasCurrent && compareValue != null && value != null ? new import_bigdecimal.default(value).minus(compareValue).div(compareValue).toNumber() : void 0;
+    const showViewLogs = onViewLogs && !viewLogDisabled?.(seriesId, idx);
+    const showViewUsers = onViewUsers && !viewUsersDisabled?.(seriesId, idx);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item series-name text-text-foreground inline-flex items-center overflow-hidden",
+            "group",
+            highlighted ? "highlighted" : ""
+          ),
+          style: { minWidth: "4rem" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { dangerouslySetInnerHTML: { __html: marker || "" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: seriesName }),
+            showViewLogs && isFixed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onViewLogs(seriesId, idx);
+                },
+                title: "View logs",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu3.LuList, { className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "input",
+            showViewUsers && isFixed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
               {
-                type: "text",
-                name: "value",
-                id: "value",
-                className: "w-30 rounded-l-0 sm:text-ilabel border-main hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 block h-full rounded-r-md border px-2 py-1",
-                placeholder: "0",
-                value: rule.value,
-                onChange: (e) => {
-                  changeRule(index, "value", e.target.value);
-                }
+                className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onViewUsers(seriesId, idx);
+                },
+                title: "View users",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu3.LuCircleUserRound, { className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(
-              "input",
+            isFixed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_ui_core9.CopyButton,
               {
-                type: "text",
-                name: "text",
-                id: "text",
-                className: "sm:text-ilabel border-main hover:border-primary-600 focus:border-primary-600 focus:ring-3  focus:ring-primary-600/30 block h-full w-80 rounded-md px-2 py-1",
-                placeholder: "Display text (e.g. High, Low, Normal)",
-                value: rule.text,
-                onChange: (e) => {
-                  changeRule(index, "text", e.target.value);
-                }
+                size: 16,
+                text: seriesName,
+                className: "invisible ml-1 group-hover:visible"
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "button",
+            )
+          ]
+        },
+        idx
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item min-w-16 flex items-center truncate pl-1 text-right font-semibold",
+            highlighted ? "highlighted" : ""
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: hasCurrent ? numberFormatter(value, seriesId) : "-" }),
+            diff !== void 0 && Number.isFinite(diff) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "span",
               {
-                type: "button",
-                className: "mx-2",
-                "aria-label": "remove",
-                onClick: () => removeRule(index),
-                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  import_lu3.LuTrash2,
-                  {
-                    className: "icon text-text-foreground-disabled",
-                    "aria-hidden": "true"
-                  }
-                )
+                className: (0, import_ui_core9.classNames)(
+                  "ml-1 text-xs",
+                  diff > 0 ? "text-green-500" : "text-red"
+                ),
+                children: [
+                  diff > 0 ? "+" : "",
+                  (diff * 100).toFixed(2),
+                  "%"
+                ]
               }
             )
           ]
         },
-        index
-      );
-    }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      import_ui_core12.Button,
-      {
-        type: "button",
-        role: "secondary",
-        className: "mt-1 w-fit flex-none",
-        "aria-label": "remove",
-        onClick: addRule,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lu3.LuPlus, { className: (0, import_ui_core12.classNames)("h-4 w-4"), "aria-hidden": "true" }),
-          "Add Formatting Rule"
-        ]
-      }
-    )
-  ] });
-}
-
-// src/charts/options/ValueOptions.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ValueFormatters = [
-  { label: "Number", value: "NumberFormatter" },
-  { label: "Date", value: "DateFormatter" },
-  { label: "String", value: "StringFormatter" }
-];
-var defaultConfig3 = {
-  valueFormatter: "NumberFormatter",
-  showValueLabel: false,
-  maxSignificantDigits: 3,
-  dateFormat: "LLL",
-  mappingRules: [],
-  style: "None"
-};
-var dateFormats = [
-  { label: "Localized format", value: "LLL" },
-  { label: "ISO String", value: "YYYY-MM-DDTHH:mm:ss.sssZ" }
-];
-var CurrencySymbols = [
-  { label: "USD", value: "$" },
-  { label: "EUR", value: "\u20AC" },
-  { label: "GBP", value: "\xA3" },
-  { label: "CNY or JPY", value: "\xA5" },
-  { label: "BTC", value: "\u0243" },
-  { label: "ETH", value: "\u039E" }
-];
-var AddonLabel = ({
-  className,
-  children
-}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-  "span",
-  {
-    className: (0, import_ui_core13.classNames)(
-      "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap bg-gray-50 px-3",
-      className
-    ),
-    children
-  }
-);
-var ValueOptions = ({
-  config,
-  onChange,
-  formatters = ValueFormatters,
-  showPrefix,
-  showSuffix
-}) => {
-  function onChangeDateFormat(f) {
-    onChange((0, import_immer9.produce)(config, (draft) => void (draft.dateFormat = f)));
-  }
-  function onChangeFormatter(f) {
-    onChange((0, import_immer9.produce)(config, (draft) => void (draft.valueFormatter = f)));
-  }
-  function onChangeSymbol(symbol) {
-    onChange((0, import_immer9.produce)(config, (draft) => void (draft.currencySymbol = symbol)));
-  }
-  function onStyleChange(notation) {
-    onChange(
-      (0, import_immer9.produce)(config, (draft) => {
-        draft.style = notation;
-      })
-    );
-  }
-  function onDigitsChange(value, option) {
-    onChange(
-      (0, import_immer9.produce)(config, (draft) => {
-        const d = draft;
-        if (value) {
-          const maxSignificantDigits = parseInt(value);
-          if (maxSignificantDigits >= 0 && maxSignificantDigits <= 20) {
-            d[option] = maxSignificantDigits;
-          }
-        } else {
-          delete d[option];
-        }
-      })
-    );
-  }
-  function onMappingRulesChange(rules) {
-    onChange((0, import_immer9.produce)(config, (draft) => void (draft.mappingRules = rules)));
-  }
-  function onPrefixChange(value) {
-    onChange(
-      (0, import_immer9.produce)(config, (draft) => {
-        if (value) {
-          draft.prefix = value;
-        } else {
-          delete draft.prefix;
-        }
-      })
-    );
-  }
-  function onSuffixChange(value) {
-    onChange(
-      (0, import_immer9.produce)(config, (draft) => {
-        if (value) {
-          draft.suffix = value;
-        } else {
-          delete draft.suffix;
-        }
-      })
-    );
-  }
-  function numberAddons(style) {
-    switch (style) {
-      case "None":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "input",
-            {
-              disabled: true,
-              className: "focus:border-primary-500 sm:text-ilabel min-w-20  border-main rounded-r-md border border-l-0  py-1",
-              value: ""
-            }
-          )
-        ] });
-      case "Percent":
-      case "Standard":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "input",
-            {
-              type: "number",
-              min: 0,
-              max: 20,
-              className: "focus:border-primary-500 sm:text-ilabel min-w-20 border-main focus:ring-3 focus:ring-primary-600/30 hover:border-primary-600 rounded-r-md border py-1",
-              value: config.maxFractionDigits,
-              placeholder: "0-20",
-              onChange: (e) => onDigitsChange(e.target.value, "maxFractionDigits")
-            }
-          )
-        ] });
-      case "Currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_ui_core13.ComboInput,
-            {
-              onChange: onChangeSymbol,
-              options: CurrencySymbols.map((s) => s.value),
-              displayFn: (s) => {
-                const name = CurrencySymbols.find((c) => c.value === s)?.label;
-                return `${name} (${s})`;
-              },
-              placeholder: "$",
-              value: config?.currencySymbol
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border", children: "Precision" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "input",
-            {
-              type: "number",
-              min: 0,
-              max: 20,
-              className: "focus:border-primary-500 sm:text-ilabel min-w-20  border-main rounded-r-md border border-l-0  py-1",
-              value: config.precision,
-              defaultValue: 2,
-              placeholder: "0-20",
-              onChange: (e) => onDigitsChange(e.target.value, "precision")
-            }
-          )
-        ] });
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            "input",
-            {
-              type: "number",
-              min: 1,
-              max: 21,
-              className: "focus:border-primary-600 sm:text-ilabel min-w-20 border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 rounded-r-md border py-1",
-              value: config.maxSignificantDigits,
-              placeholder: "1-21",
-              onChange: (e) => onDigitsChange(e.target.value, "maxSignificantDigits")
-            }
-          )
-        ] });
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "select",
+        `${idx}-value`
+      )
+    ] }, idx);
+  };
+  const renderCompareRow = (p, idx) => {
+    const { seriesName, compareValue, seriesId } = p;
+    const highlighted = seriesId === highlightSeriesId;
+    const compareMarker = compareMarkers[seriesId];
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
         {
-          value: config.valueFormatter,
-          className: (0, import_ui_core13.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" : ""
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item sentio-tooltip-compare-item series-name text-text-foreground-secondary truncate",
+            highlighted ? "highlighted" : ""
           ),
-          onChange: (e) => onChangeFormatter(e.target.value),
-          children: formatters.map((d) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: d.value, children: d.label }, d.value);
-          })
-        }
+          style: { minWidth: "4rem" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "span",
+              {
+                dangerouslySetInnerHTML: { __html: compareMarker || "" }
+              }
+            ),
+            seriesName
+          ]
+        },
+        idx
       ),
-      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-          "select",
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item min-w-16 text-text-foreground-secondary truncate pl-1 text-right font-semibold",
+            highlighted ? "highlighted" : ""
+          ),
+          children: (0, import_lodash3.isNumber)(compareValue) ? numberFormatter(compareValue, seriesId) : "-"
+        },
+        `${idx}-value`
+      )
+    ] }, idx);
+  };
+  const renderTotalRow = () => {
+    if (!showTotal || series.length < 2) return null;
+    const diff = hasCompare && hasCurrent && total && compareTotal ? total.minus(compareTotal).div(compareTotal).toNumber() : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border-border-color col-span-2 mt-1 flex items-center justify-between border-t pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sentio-tooltip-item series-name text-text-foreground truncate font-semibold", children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "sentio-tooltip-item min-w-16 flex items-center truncate pl-1 text-right font-semibold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: hasCurrent ? numberFormatter(total.toNumber()) : "-" }),
+        diff !== void 0 && Number.isFinite(diff) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "span",
           {
-            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),
+            className: (0, import_ui_core9.classNames)(
+              "ml-1 text-xs",
+              diff > 0 ? "text-green-500" : "text-red"
+            ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "None", children: "None" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "Compact", children: "Compact" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "Standard", children: "Standard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "Scientific", children: "Scientific" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "Percent", children: "Percent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "Currency", children: "Currency" })
+              diff > 0 ? "+" : "",
+              (diff * 100).toFixed(2),
+              "%"
             ]
           }
-        ),
-        config.style && numberAddons(config.style)
-      ] }),
-      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("option", { value: d.value, children: d.label }, d.value);
-            })
-          }
         )
       ] })
-    ] }) }),
-    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
-      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "input",
+    ] });
+  };
+  const renderCompareTotalRow = () => {
+    if (!showTotal || series.length < 2 || !hasCompare) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border-border-color col-span-2 mt-1 flex items-center justify-between border-t pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sentio-tooltip-item sentio-tooltip-compare-item series-name text-text-foreground-secondary truncate font-semibold", children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sentio-tooltip-item min-w-16 text-text-foreground-secondary truncate pl-1 text-right font-semibold", children: (0, import_lodash3.isNumber)(compareTotal) ? numberFormatter(compareTotal.toNumber()) : "-" })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_core9.classNames)("grid w-full px-2"),
+      style: { gridTemplateColumns: "1fr auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
           {
-            type: "text",
-            className: "border-0 px-3 py-1.5 focus:ring-0",
-            value: config.prefix || "",
-            placeholder: "e.g., $, #",
-            onChange: (e) => onPrefixChange(e.target.value)
+            className: (0, import_ui_core9.classNames)(
+              "pl-2",
+              "text-text-foreground-secondary col-span-2 text-left"
+            ),
+            children: title ?? currentTime?.format("YYYY-MM-DD HH:mm:ss")
           }
-        )
-      ] }),
-      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "input",
+        ),
+        !series || series.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-text-foreground-secondary pl-2 text-sm", children: "No data available" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          series.map((s, idx) => renderRow(s, idx)),
+          renderTotalRow(),
+          hasCompare && compareTimeDuration && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "div",
+              {
+                className: (0, import_ui_core9.classNames)(
+                  "mt-2 pl-2",
+                  "text-text-foreground-secondary col-span-2 text-left"
+                ),
+                children: [
+                  compareTime?.format("YYYY-MM-DD HH:mm:ss"),
+                  " (previous",
+                  " ",
+                  durationToLongString(compareTimeDuration),
+                  ")"
+                ]
+              }
+            ),
+            series.map((s, idx) => renderCompareRow(s, idx)),
+            renderCompareTotalRow()
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/charts/ScatterChartTooltip.tsx
+var import_react16 = require("react");
+var import_dayjs2 = __toESM(require("dayjs"));
+var import_utc2 = __toESM(require("dayjs/plugin/utc"));
+var import_timezone2 = __toESM(require("dayjs/plugin/timezone"));
+var import_lodash4 = require("lodash");
+var import_lu4 = require("react-icons/lu");
+var import_ui_core10 = require("@sentio/ui-core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+import_dayjs2.default.extend(import_utc2.default);
+import_dayjs2.default.extend(import_timezone2.default);
+function ScatterChartTooltip({
+  data,
+  numberFormatter,
+  highlightSeriesId,
+  title,
+  onViewLogs,
+  viewLogDisabled,
+  onViewUsers,
+  viewUsersDisabled,
+  isFixed,
+  sizeTitle = "Size"
+}) {
+  const { point, seriesName, seriesId, marker } = (0, import_react16.useMemo)(() => {
+    const param = Array.isArray(data) ? data[0] : data;
+    return {
+      point: param,
+      seriesName: param?.seriesName || "",
+      seriesId: param?.seriesId || "",
+      marker: param?.marker || ""
+    };
+  }, [data]);
+  if (!point || !point.value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text-foreground-secondary pl-2 text-sm", children: "No data available" }) });
+  }
+  const { value } = point;
+  const [xValue, yValue, sizeValue] = value;
+  const highlighted = seriesId === highlightSeriesId;
+  const showViewLogs = onViewLogs && !viewLogDisabled?.(seriesId, 0);
+  const showViewUsers = onViewUsers && !viewUsersDisabled?.(seriesId, 0);
+  const formatValue = (val) => {
+    if (val instanceof Date) {
+      return (0, import_dayjs2.default)(val).format("YYYY-MM-DD HH:mm:ss");
+    } else if ((0, import_lodash4.isNumber)(val)) {
+      return numberFormatter(val);
+    } else {
+      return String(val);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_core10.classNames)("grid w-full px-2"),
+      style: { gridTemplateColumns: "1fr auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
           {
-            type: "text",
-            className: "min-w-32 border-0 px-3 py-1.5 focus:ring-0",
-            value: config.suffix || "",
-            placeholder: "e.g., %, USD, tokens",
-            onChange: (e) => onSuffixChange(e.target.value)
+            className: (0, import_ui_core10.classNames)(
+              "mb-2 pl-2",
+              "text-text-foreground-secondary col-span-2 text-left"
+            ),
+            children: title ?? (0, import_dayjs2.default)(xValue).format("YYYY-MM-DD HH:mm:ss")
           }
-        )
-      ] })
-    ] }) }),
-    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      ValueStringMapping,
-      {
-        rules: config.mappingRules || [],
-        onChange: onMappingRulesChange
-      }
-    )
-  ] });
-};
-
-// src/charts/options/ValueControls.tsx
-var import_lodash5 = require("lodash");
-var import_ui_core14 = require("@sentio/ui-core");
-var import_immer10 = require("immer");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var defaultConfig4 = {
-  valueFormatter: "NumberFormatter",
-  showValueLabel: false,
-  maxSignificantDigits: 3,
-  dateFormat: "LLL",
-  mappingRules: [],
-  style: "None",
-  maxFractionDigits: 2
-};
-var ValueControls = ({
-  config,
-  defaultOpen,
-  onChange,
-  formatters = ValueFormatters,
-  showPrefix,
-  showSuffix
-}) => {
-  config = (0, import_lodash5.defaults)(config || {}, defaultConfig4);
-  function toggleShowValueLabel(checked) {
-    config && onChange(
-      (0, import_immer10.produce)(config, (draft) => void (draft.showValueLabel = checked))
-    );
-  }
-  function toggleTooltipTotal(checked) {
-    config && onChange((0, import_immer10.produce)(config, (draft) => void (draft.tooltipTotal = checked)));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-    import_ui_core14.DisclosurePanel,
-    {
-      title: "Value Options",
-      defaultOpen,
-      containerClassName: "w-full bg-default-bg",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-          ValueOptions,
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
           {
-            onChange,
-            config,
-            formatters,
-            showPrefix,
-            showSuffix
+            className: (0, import_ui_core10.classNames)(
+              "sentio-tooltip-item series-name text-text-foreground inline-flex items-center overflow-hidden",
+              "group",
+              highlighted ? "highlighted" : ""
+            ),
+            style: { minWidth: "4rem" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { dangerouslySetInnerHTML: { __html: marker || "" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate", children: seriesName }),
+              showViewLogs && isFixed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "button",
+                {
+                  className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onViewLogs(seriesId, 0);
+                  },
+                  title: "View logs",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lu4.LuList, { className: "h-4 w-4" })
+                }
+              ),
+              showViewUsers && isFixed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "button",
+                {
+                  className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onViewUsers(seriesId, 0);
+                  },
+                  title: "View users",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lu4.LuCircleUserRound, { className: "h-4 w-4" })
+                }
+              ),
+              isFixed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_ui_core10.CopyButton,
+                {
+                  size: 16,
+                  text: seriesName,
+                  className: "invisible ml-1 group-hover:visible"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            className: (0, import_ui_core10.classNames)(
+              "sentio-tooltip-item min-w-16 flex items-center truncate pl-1 text-right font-semibold",
+              highlighted ? "highlighted" : ""
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: formatValue(yValue) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            import_ui_core14.Checkbox,
+        sizeValue !== void 0 && sizeValue !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-border-color col-span-2 my-2 w-full border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "div",
             {
-              checked: config?.showValueLabel,
-              onChange: toggleShowValueLabel,
-              label: "Show value label"
+              className: "sentio-tooltip-item series-name text-text-foreground-secondary truncate",
+              style: { minWidth: "4rem" },
+              children: sizeTitle
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            import_ui_core14.Checkbox,
-            {
-              checked: config?.tooltipTotal,
-              onChange: toggleTooltipTotal,
-              label: "Show total in tooltip"
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sentio-tooltip-item min-w-16 text-text-foreground-secondary truncate pl-1 text-right font-semibold", children: formatValue(sizeValue) })
         ] })
       ]
     }
   );
-};
+}
 
-// src/charts/icons/LineIcon.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var SvgIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("g", { clipPath: "url(#clip0_1774_9563)", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        "path",
-        {
-          d: "M12.6191 13.1249H1.35352C1.21672 13.1249 1.10049 13.0771 1.00483 12.9814C0.909161 12.8857 0.861328 12.7695 0.861328 12.6327V1.35352C0.861328 1.21672 0.909161 1.10049 1.00483 1.00483C1.10049 0.909161 1.21672 0.861328 1.35352 0.861328C1.49031 0.861328 1.60654 0.909161 1.7022 1.00483C1.79787 1.10049 1.8457 1.21672 1.8457 1.35352V12.1405H12.6191C12.7559 12.1405 12.8722 12.1883 12.9678 12.284C13.0635 12.3797 13.1113 12.4959 13.1113 12.6327C13.1113 12.7695 13.0635 12.8857 12.9678 12.9814C12.8722 13.0771 12.7559 13.1249 12.6191 13.1249ZM5.26345 10.1582C5.0902 10.1582 4.95341 10.0853 4.85308 9.93945L2.7067 6.52127C2.63379 6.40285 2.61104 6.27758 2.63845 6.14545C2.66587 6.01333 2.73645 5.91081 2.8502 5.83789C2.96395 5.76497 3.08704 5.74222 3.21945 5.76964C3.35187 5.79706 3.45439 5.86545 3.52702 5.97483L5.05827 8.46333L5.68739 6.04352C5.72385 5.89768 5.81047 5.79283 5.94727 5.72895L8.43576 4.52583C8.55418 4.47099 8.67274 4.45962 8.79145 4.4917C8.91016 4.52379 9.00583 4.59437 9.07845 4.70345L10.3227 6.72689L12.155 1.21702C12.2005 1.08927 12.2826 0.993599 12.4013 0.930016C12.52 0.866432 12.6431 0.857245 12.7705 0.902453C12.898 0.947661 12.9936 1.02977 13.0575 1.14877C13.1214 1.26777 13.1306 1.39085 13.0851 1.51802L10.9247 8.03939C10.8608 8.24006 10.724 8.35177 10.5143 8.37452C10.3046 8.39727 10.1451 8.32202 10.0357 8.14877L8.46333 5.60558L6.59039 6.50814L5.74252 9.78939C5.68768 9.9991 5.55556 10.1177 5.34614 10.1451C5.31872 10.1541 5.29131 10.1586 5.26389 10.1586L5.26345 10.1582Z",
-          fill: "currentColor"
+// src/charts/PieChart.tsx
+var import_react17 = require("react");
+var import_react_resize_detector3 = require("react-resize-detector");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var theresholdWidth = 480;
+var TOOLTIP_MIN_VIEWPORT_LEFT = 8;
+var TOOLTIP_MIN_VIEWPORT_RIGHT = 8;
+var PieChart2 = (0, import_react17.forwardRef)(
+  (props, ref) => {
+    const {
+      series,
+      valueFormatter,
+      config,
+      title,
+      minHeight,
+      loading,
+      style,
+      onInitChart
+    } = props;
+    const [options, setOptions] = (0, import_react17.useState)({});
+    const isDarkMode = useDarkMode();
+    const isMobile2 = isMobile();
+    const { width, ref: resizeRef } = (0, import_react_resize_detector3.useResizeDetector)({
+      refreshMode: "debounce",
+      refreshRate: 500,
+      handleHeight: false
+    });
+    const tooltipPosition = (point, _params, _dom, _rect, size) => {
+      const chartRect = resizeRef.current?.getBoundingClientRect();
+      const chartLeft = chartRect?.left ?? 0;
+      const winW = typeof window !== "undefined" ? window.innerWidth : size.viewSize[0];
+      const [w, h] = size.contentSize;
+      const minXInChart = TOOLTIP_MIN_VIEWPORT_LEFT - chartLeft;
+      const maxXInChart = winW - TOOLTIP_MIN_VIEWPORT_RIGHT - chartLeft - w;
+      let x = point[0] + 12;
+      if (x > maxXInChart) {
+        x = point[0] - w - 12;
+      }
+      if (x < minXInChart) x = minXInChart;
+      if (x > maxXInChart) x = maxXInChart;
+      const y = Math.max(0, point[1] - h / 2);
+      return [x, y];
+    };
+    (0, import_react17.useEffect)(() => {
+      const isHLegend = width && width < theresholdWidth;
+      const winW = typeof window !== "undefined" ? window.innerWidth : 1024;
+      const tooltipMaxWidth = Math.max(160, Math.min(280, winW - 48));
+      const tooltipExtraCss = isMobile2 ? `max-width: ${tooltipMaxWidth}px; white-space: normal; word-break: break-word; overflow-wrap: anywhere;` : "";
+      const d = [];
+      series.forEach((s) => {
+        if (s.data.length > 0 && s.data[0] && s.data[0][1] != null) {
+          const rawValue = s.data[0][1];
+          if (config?.pieConfig?.absValue) {
+            d.push({ name: s.name, value: Math.abs(rawValue) });
+          } else if (rawValue > 0) {
+            d.push({ name: s.name, value: rawValue });
+          }
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_1774_9563", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
-    ]
-  }
-);
-var LineIcon_default = SvgIcon;
-
-// src/charts/icons/AreaIcon.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var SvgIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("g", { clipPath: "url(#clip0_1774_9545)", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "path",
+      });
+      const total = d.reduce((acc, cur) => acc + cur.value, 0);
+      d.sort((a, b) => {
+        const percentA = a.value / total * 100;
+        const percentB = b.value / total * 100;
+        return percentB - percentA;
+      });
+      const pieSeries = [
         {
-          d: "M12.6193 13.1249H1.35364C1.21685 13.1249 1.10062 13.0771 1.00495 12.9814C0.909284 12.8857 0.86145 12.7695 0.86145 12.6327V1.35352C0.86145 1.21672 0.909284 1.10049 1.00495 1.00483C1.10062 0.909161 1.21685 0.861328 1.35364 0.861328C1.49043 0.861328 1.60666 0.909161 1.70233 1.00483C1.79799 1.10049 1.84583 1.21672 1.84583 1.35352V12.1405H12.6193C12.7561 12.1405 12.8723 12.1883 12.968 12.284C13.0636 12.3797 13.1115 12.4959 13.1115 12.6327C13.1115 12.7695 13.0636 12.8857 12.968 12.9814C12.8723 13.0771 12.7561 13.1249 12.6193 13.1249ZM2.62501 10.9374L4.22451 8.08008C4.26097 8.0162 4.31566 7.97289 4.38858 7.95014C4.46149 7.92739 4.53441 7.92972 4.60733 7.95714L6.12501 8.66808L7.73851 6.33008C7.83885 6.19329 7.96193 6.16135 8.10776 6.23427L9.61189 6.99989L11.7994 3.56814C11.8633 3.46781 11.9521 3.43368 12.0658 3.46577C12.1796 3.49785 12.2366 3.5731 12.2369 3.69152V10.8009C12.2369 10.9467 12.1845 11.072 12.0798 11.1767C11.9751 11.2814 11.8498 11.3338 11.704 11.3338H2.87176C2.77143 11.3338 2.69399 11.2905 2.63945 11.2038C2.58491 11.1172 2.58039 11.0284 2.62589 10.9374H2.62501Z",
-          fill: "currentColor"
+          type: "pie",
+          radius: [config?.pieConfig?.pieType == "Donut" ? "40%" : 0, "70%"],
+          center: isHLegend ? ["50%", "50%"] : ["35%", "50%"],
+          label: { show: false },
+          labelLine: { length: 10, length2: 10, maxSurfaceAngle: 50 },
+          data: d
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("clipPath", { id: "clip0_1774_9545", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
-    ]
-  }
-);
-var AreaIcon_default = SvgIcon2;
-
-// src/charts/icons/BarIcon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var SvgIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "path",
+      ];
+      const options2 = {
+        title: { text: title, left: 8 },
+        legend: isHLegend ? {
+          type: "scroll",
+          orient: "horizontal",
+          bottom: 12,
+          left: "center",
+          animation: true,
+          animationDurationUpdate: 300,
+          pageIconSize: [10, 8],
+          pageButtonItemGap: 2,
+          pageButtonGap: 4,
+          textStyle: {
+            width: width ? width * 0.4 : 100,
+            overflow: "truncate"
+          },
+          tooltip: {
+            show: true,
+            appendToBody: true,
+            extraCssText: tooltipExtraCss,
+            position: tooltipPosition,
+            formatter: function(params) {
+              const name = params.name;
+              const item = d.find((i) => i.name === name);
+              let ret = name;
+              if (config?.pieConfig?.showValue && item) {
+                ret += "<br/>" + valueFormatter(item.value);
+              }
+              if (config?.pieConfig?.showPercent && item) {
+                const percent = (item.value / d.reduce((acc, cur) => acc + cur.value, 0) * 100).toFixed(2);
+                ret += config.pieConfig.showValue ? ` \u2022 ${percent}%` : `
+${percent}%`;
+              }
+              return ret;
+            }
+          }
+        } : {
+          type: "scroll",
+          orient: "vertical",
+          right: 16,
+          top: title ? 48 : 8,
+          width: "35%",
+          animation: true,
+          animationDurationUpdate: 300,
+          tooltip: {
+            show: true,
+            appendToBody: true,
+            extraCssText: tooltipExtraCss,
+            position: tooltipPosition,
+            formatter: function(params) {
+              const name = params.name;
+              const item = d.find((i) => i.name === name);
+              let ret = name;
+              if (config?.pieConfig?.showValue && item) {
+                ret += "<br/>" + valueFormatter(item.value);
+              }
+              if (config?.pieConfig?.showPercent && item) {
+                const percent = (item.value / d.reduce((acc, cur) => acc + cur.value, 0) * 100).toFixed(2);
+                ret += config.pieConfig.showValue ? ` \u2022 ${percent}%` : `
+${percent}%`;
+              }
+              return ret;
+            }
+          },
+          icon: "roundRect",
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 6,
+          show: true,
+          pageIconSize: [8, 10],
+          pageButtonGap: 4,
+          pageButtonItemGap: 2,
+          pageIconColor: isDarkMode ? "#909399" : "#4E5969",
+          pageIconInactiveColor: isDarkMode ? "#606266" : "#C9CDD4",
+          textStyle: {
+            width: width ? width * 0.3 : "auto",
+            overflow: "truncate",
+            lineHeight: 16,
+            fontSize: 12,
+            rich: { value: { padding: [4, 0, 0, 0] } }
+          },
+          formatter: (name) => {
+            const item = d.find((i) => i.name === name);
+            let ret = name;
+            if (config?.pieConfig?.showValue && item) {
+              ret += "\n" + valueFormatter(item.value);
+            }
+            if (config?.pieConfig?.showPercent && item) {
+              const percent = (item.value / d.reduce((acc, cur) => acc + cur.value, 0) * 100).toFixed(2);
+              ret += config.pieConfig.showValue ? ` \u2022 ${percent}%` : `
+${percent}%`;
+            }
+            return ret;
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          appendToBody: true,
+          extraCssText: tooltipExtraCss,
+          position: tooltipPosition,
+          formatter: ({ name, data, percent }) => {
+            let ret = `${name}`;
+            if (config?.pieConfig?.showValue) {
+              ret += "<br/>" + valueFormatter(data.value);
+            }
+            if (config?.pieConfig?.showPercent) {
+              ret += config.pieConfig.showValue ? ` (${percent}%)` : `
+${percent}%`;
+            }
+            return ret;
+          }
+        },
+        toolbox: { show: false },
+        animation: false,
+        series: pieSeries
+      };
+      setOptions(options2);
+    }, [series, config, valueFormatter, isDarkMode, isMobile2, width, title]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full w-full", ref: resizeRef, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      ReactEChartsBase,
       {
-        d: "M2.12791 1.5625V12.4375C2.12791 12.5938 2.07311 12.7267 1.96349 12.836C1.85387 12.9453 1.7207 13 1.56396 13C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375V1.5625C1 1.40617 1.05481 1.27333 1.16442 1.164C1.27404 1.05467 1.40722 1 1.56396 1C1.7207 1 1.85387 1.05467 1.96349 1.164C2.07311 1.27333 2.12791 1.40617 2.12791 1.5625ZM1.56396 11.875H12.436C12.5928 11.875 12.726 11.9297 12.8356 12.039C12.9452 12.1483 13 12.2812 13 12.4375C13 12.5938 12.9452 12.7267 12.8356 12.836C12.726 12.9453 12.5928 13 12.436 13H1.56396C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375C1 12.2812 1.05481 12.1483 1.16442 12.039C1.27404 11.9297 1.40722 11.875 1.56396 11.875ZM5.12014 4.578V10.375C5.12014 10.5313 5.06534 10.6642 4.95572 10.7735C4.8461 10.8828 4.71293 10.9375 4.55619 10.9375C4.39945 10.9375 4.26627 10.8828 4.15665 10.7735C4.04704 10.6642 3.99223 10.5313 3.99223 10.375V4.578C3.99223 4.42167 4.04704 4.28883 4.15665 4.1795C4.26627 4.07017 4.39945 4.0155 4.55619 4.0155C4.71293 4.0155 4.8461 4.07017 4.95572 4.1795C5.06534 4.28883 5.12014 4.42167 5.12014 4.578ZM11.1196 2.5465V10.3745C11.1196 10.5308 11.0648 10.6637 10.9552 10.773C10.8456 10.8823 10.7124 10.937 10.5557 10.937C10.3989 10.937 10.2658 10.8823 10.1562 10.773C10.0465 10.6637 9.99173 10.5308 9.99173 10.3745V2.5465C9.99173 2.39017 10.0465 2.25733 10.1562 2.148C10.2658 2.03867 10.3989 1.984 10.5557 1.984C10.7124 1.984 10.8456 2.03867 10.9552 2.148C11.0648 2.25733 11.1196 2.39017 11.1196 2.5465ZM8.11187 6.5465V10.3745C8.11187 10.5308 8.05706 10.6637 7.94745 10.773C7.83783 10.8823 7.70465 10.937 7.54792 10.937C7.39118 10.937 7.258 10.8823 7.14838 10.773C7.03877 10.6637 6.98396 10.5308 6.98396 10.3745V6.5465C6.98396 6.39017 7.03877 6.25733 7.14838 6.148C7.258 6.03867 7.39118 5.984 7.54792 5.984C7.69429 5.984 7.8248 6.03867 7.93943 6.148C8.05406 6.25733 8.11154 6.39017 8.11187 6.5465Z",
-        fill: "currentColor"
+        ref,
+        loading,
+        option: options,
+        minHeight,
+        style,
+        noLegend: true,
+        onInitChart
       }
-    )
-  }
-);
-var BarIcon_default = SvgIcon3;
-
-// src/charts/icons/BarGuageIcon.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var SvgIcon4 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "currentColor",
-    className,
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        "path",
-        {
-          d: "M2.12791 1.5625V12.4375C2.12791 12.5938 2.07311 12.7267 1.96349 12.836C1.85387 12.9453 1.7207 13 1.56396 13C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375V1.5625C1 1.40617 1.05481 1.27333 1.16442 1.164C1.27404 1.05467 1.40722 1 1.56396 1C1.7207 1 1.85387 1.05467 1.96349 1.164C2.07311 1.27333 2.12791 1.40617 2.12791 1.5625ZM1.56396 11.875H12.436C12.5928 11.875 12.726 11.9297 12.8356 12.039C12.9452 12.1483 13 12.2812 13 12.4375C13 12.5938 12.9452 12.7267 12.8356 12.836C12.726 12.9453 12.5928 13 12.436 13H1.56396C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375C1 12.2812 1.05481 12.1483 1.16442 12.039C1.27404 11.9297 1.40722 11.875 1.56396 11.875Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        "path",
-        {
-          d: "M3.64159 4.02495H9.43859C9.59493 4.02495 9.72776 3.97014 9.83709 3.86052C9.94643 3.75091 10.0011 3.61773 10.0011 3.46099C10.0011 3.30425 9.94643 3.17108 9.83709 3.06146C9.72776 2.95184 9.59493 2.89703 9.43859 2.89703L3.64159 2.89703C3.48526 2.89703 3.35243 2.95184 3.24309 3.06146C3.13376 3.17108 3.07909 3.30425 3.07909 3.46099C3.07909 3.61773 3.13376 3.75091 3.24309 3.86052C3.35243 3.97014 3.48526 4.02495 3.64159 4.02495Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        "path",
-        {
-          d: "M3.64209 10.0244H11.4701C11.6264 10.0244 11.7593 9.96964 11.8686 9.86002C11.9779 9.7504 12.0326 9.61723 12.0326 9.46049C12.0326 9.30375 11.9779 9.17057 11.8686 9.06096C11.7593 8.95134 11.6264 8.89653 11.4701 8.89653H3.64209C3.48576 8.89653 3.35293 8.95134 3.24359 9.06096C3.13426 9.17057 3.07959 9.30375 3.07959 9.46049C3.07959 9.61723 3.13426 9.7504 3.24359 9.86002C3.35293 9.96964 3.48576 10.0244 3.64209 10.0244Z",
-          fill: "currentColor"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-        "path",
-        {
-          d: "M3.64209 7.01668L7.47009 7.01668C7.62643 7.01634 7.75926 6.95886 7.86859 6.84423C7.97793 6.7296 8.03259 6.5991 8.03259 6.45272C8.03259 6.29598 7.97793 6.1628 7.86859 6.05319C7.75926 5.94357 7.62643 5.88876 7.47009 5.88876H3.64209C3.48576 5.88876 3.35293 5.94357 3.24359 6.05319C3.13426 6.1628 3.07959 6.29598 3.07959 6.45272C3.07959 6.60946 3.13426 6.74263 3.24359 6.85225C3.35293 6.96187 3.48576 7.01668 3.64209 7.01668Z",
-          fill: "currentColor"
-        }
-      )
-    ]
+    ) });
   }
 );
-var BarGuageIcon_default = SvgIcon4;
+PieChart2.displayName = "PieChart";
 
-// src/charts/icons/PieIcon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var SvgIcon5 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("g", { clipPath: "url(#clip0_28267_7202)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          "path",
+// src/charts/options/LineControls.tsx
+var import_immer4 = require("immer");
+var import_ui_core11 = require("@sentio/ui-core");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var lineStyles = [
+  { label: "Solid", value: "Solid" },
+  { label: "Dotted", value: "Dotted" }
+];
+var LineControls = ({ config, defaultOpen, onChange }) => {
+  const setStyle = (style) => {
+    onChange(
+      (0, import_immer4.produce)(config || {}, (draft) => {
+        draft.style = style;
+      })
+    );
+  };
+  const setSmooth = (smooth) => {
+    onChange(
+      (0, import_immer4.produce)(config || {}, (draft) => {
+        draft.smooth = smooth;
+      })
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_ui_core11.DisclosurePanel,
+    {
+      title: "Line style",
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_ui_core11.NewButtonGroup,
           {
-            d: "M5.83329 1.86662C4.92079 2.07816 4.08149 2.52998 3.40247 3.17523C2.72345 3.82048 2.22942 4.63564 1.97164 5.53618C1.71386 6.43671 1.70171 7.38982 1.93644 8.29663C2.17118 9.20345 2.64426 10.0309 3.30661 10.6933C3.96896 11.3556 4.79646 11.8287 5.70327 12.0635C6.61009 12.2982 7.56319 12.286 8.46373 12.0283C9.36426 11.7705 10.1794 11.2765 10.8247 10.5974C11.4699 9.91841 11.9217 9.07912 12.1333 8.16662C12.1333 8.01191 12.0718 7.86353 11.9624 7.75414C11.853 7.64474 11.7047 7.58328 11.55 7.58328H7.58329C7.27387 7.58328 6.97713 7.46037 6.75833 7.24157C6.53954 7.02278 6.41662 6.72604 6.41662 6.41662V2.33328C6.40938 2.26417 6.38848 2.19719 6.35515 2.13621C6.32182 2.07524 6.27671 2.02149 6.22245 1.97808C6.16819 1.93467 6.10585 1.90247 6.03905 1.88333C5.97224 1.8642 5.90231 1.85852 5.83329 1.86662Z",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            buttons: lineStyles,
+            value: config?.style || "Solid",
+            onChange: setStyle,
+            small: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          "path",
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_ui_core11.Checkbox,
           {
-            d: "M8.75 2.04175C9.49067 2.30255 10.1634 2.72617 10.7187 3.28142C11.2739 3.83668 11.6975 4.50941 11.9583 5.25008H9.33333C9.17862 5.25008 9.03025 5.18862 8.92085 5.07923C8.81146 4.96983 8.75 4.82146 8.75 4.66675V2.04175Z",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            label: "Smooth Curves",
+            checked: config?.smooth,
+            onChange: setSmooth
           }
         )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("clipPath", { id: "clip0_28267_7202", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
-    ]
-  }
-);
-var PieIcon_default = SvgIcon5;
+      ] })
+    }
+  );
+};
 
-// src/charts/icons/QueryValueIcon.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var SvgIcon6 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    className,
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("g", { clipPath: "url(#clip0_3670_4424)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "path",
+// src/charts/options/LabelControls.tsx
+var import_react18 = require("react");
+var import_immer5 = require("immer");
+var import_ui_core12 = require("@sentio/ui-core");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var initialConfig = {
+  columns: [],
+  alias: ""
+};
+var LabelControls = ({ config, setConfig, defaultOpen }) => {
+  (0, import_react18.useEffect)(() => {
+    if (config?.columns && config.columns.length > 0 && !config.alias) {
+      const aliasParts = [];
+      config.columns.forEach((colConfig) => {
+        if (!colConfig.name) return;
+        if (colConfig.showLabel === false && colConfig.showValue === false) {
+        } else if (colConfig.showValue === false) {
+          aliasParts.push(colConfig.name);
+        } else {
+          aliasParts.push(`{{${colConfig.name}}}`);
+        }
+      });
+      if (aliasParts.length > 0) {
+        const migratedAlias = aliasParts.join(", ");
+        setConfig(
+          (0, import_immer5.produce)(config, (draft) => {
+            draft.alias = migratedAlias;
+            draft.columns = [];
+          })
+        );
+      }
+    }
+  }, [config, setConfig]);
+  const onAliasChanged = (alias) => {
+    setConfig(
+      (0, import_immer5.produce)(config ?? initialConfig, (draft) => {
+        draft.alias = alias;
+      })
+    );
+  };
+  const _defaultOpen = (0, import_react18.useMemo)(() => {
+    if (defaultOpen) {
+      return true;
+    }
+    return config?.alias !== "" || config?.columns && config.columns.length > 0;
+  }, [config, defaultOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_ui_core12.DisclosurePanel,
+    {
+      title: "Label Controls",
+      defaultOpen: _defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2 font-medium", children: [
+            "Label Alias",
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_ui_core12.HelpIcon,
+              {
+                text: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-icontent text-text-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "Series name override or template." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+                    "Ex.",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
+                    " ",
+                    "will be replaced with the value of the contract label."
+                  ] })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            "input",
+            {
+              type: "text",
+              value: config?.alias || "",
+              onChange: (e) => onAliasChanged(e.target.value),
+              placeholder: "Enter alias...",
+              className: "focus:border-primary-500 sm:text-icontent border-main inline-flex w-64 items-center rounded-r-md border px-2"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_ui_core12.Button,
           {
-            d: "M11.5 1.5H2.5C1.67157 1.5 1 2.11561 1 2.875V11.125C1 11.8844 1.67157 12.5 2.5 12.5H11.5C12.3284 12.5 13 11.8844 13 11.125V2.875C13 2.11561 12.3284 1.5 11.5 1.5Z",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            type: "button",
+            role: "link",
+            onClick: () => {
+              setConfig(initialConfig);
+            },
+            children: "Reset"
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "path",
+        )
+      ] })
+    }
+  );
+};
+
+// src/charts/options/PieChartControls.tsx
+var import_immer6 = require("immer");
+var import_lodash5 = require("lodash");
+var import_ui_core13 = require("@sentio/ui-core");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var defaultConfig = {
+  pieType: "Pie",
+  calculation: "LAST",
+  showPercent: true,
+  showValue: true,
+  absValue: false
+};
+var CalculationItems = [
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+var PieTypeItems = [
+  { label: "Pie", value: "Pie" },
+  { label: "Donut", value: "Donut" }
+];
+function PieChartControls({ config, defaultOpen, onChange }) {
+  config = (0, import_lodash5.defaults)(config, defaultConfig);
+  function onCalculationChange(cal) {
+    config && onChange((0, import_immer6.produce)(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onPieTypeChange(pieType) {
+    config && onChange((0, import_immer6.produce)(config, (draft) => void (draft.pieType = pieType)));
+  }
+  function toggle(field, value) {
+    config && onChange(
+      (0, import_immer6.produce)(config, (draft) => {
+        draft[field] = value;
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_ui_core13.DisclosurePanel,
+    {
+      title: "Pie Chart Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.NewButtonGroup,
           {
-            d: "M7.98188 5.77273H6.39097L5.75461 5.13636L6.39097 4.5H7.98188L8.61824 5.13636L7.98188 5.77273Z",
-            fill: "currentColor"
+            small: true,
+            buttons: PieTypeItems,
+            value: config.pieType,
+            onChange: onPieTypeChange
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "select",
+            {
+              value: config.calculation,
+              className: "sm:text-ilabel text-text-foreground border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
+              onChange: (e) => onCalculationChange(e.target.value),
+              children: CalculationItems.map((d) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.Checkbox,
+          {
+            checked: config?.showValue,
+            onChange: (v) => toggle("showValue", v),
+            label: "Show value",
+            labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "path",
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.Checkbox,
           {
-            d: "M7.98188 11.5H6.39097L5.75461 10.8637L6.39097 10.2273H7.98188L8.61824 10.8637L7.98188 11.5Z",
-            fill: "currentColor"
+            checked: config?.showPercent,
+            onChange: (v) => toggle("showPercent", v),
+            label: "Show percent",
+            labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "path",
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.Checkbox,
+          {
+            checked: config?.absValue,
+            onChange: (v) => toggle("absValue", v),
+            label: "Use absolute values",
+            labelClassName: "whitespace-nowrap"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/charts/options/BarGaugeControls.tsx
+var import_immer7 = require("immer");
+var import_lodash6 = require("lodash");
+var import_ui_core14 = require("@sentio/ui-core");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var defaultConfig2 = {
+  direction: "HORIZONTAL",
+  calculation: "LAST",
+  sort: {
+    sortBy: "ByName",
+    orderDesc: true
+  }
+};
+var directionItems = [
+  { label: "Horizontal", value: "HORIZONTAL" },
+  { label: "Vertical", value: "VERTICAL" }
+];
+var CalculationItems2 = [
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+var sortByItems = [
+  { label: "Name", value: "ByName" },
+  { label: "Value", value: "ByValue" }
+];
+var orderItems = [
+  { label: "Ascendant", value: "false" },
+  { label: "Descendant", value: "true" }
+];
+function BarGaugeControls({ config, defaultOpen, onChange }) {
+  config = (0, import_lodash6.defaults)(config, defaultConfig2);
+  function onCalculationChange(cal) {
+    config && onChange((0, import_immer7.produce)(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onDirectionChange(dir) {
+    config && onChange((0, import_immer7.produce)(config, (draft) => void (draft.direction = dir)));
+  }
+  function onOrderChange(orderDesc) {
+    config && onChange(
+      (0, import_immer7.produce)(config, (draft) => {
+        draft.sort = draft.sort || {};
+        draft.sort.orderDesc = orderDesc;
+      })
+    );
+  }
+  function onSortByChange(sortBy3) {
+    config && onChange(
+      (0, import_immer7.produce)(config, (draft) => {
+        draft.sort = draft.sort || {};
+        draft.sort.sortBy = sortBy3;
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_ui_core14.DisclosurePanel,
+    {
+      title: "Bar Gauge Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs  flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Direction" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "select",
+            {
+              value: config.direction,
+              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
+              onChange: (e) => onDirectionChange(e.target.value),
+              children: directionItems.map((d) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "select",
+            {
+              value: config.calculation,
+              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
+              onChange: (e) => onCalculationChange(e.target.value),
+              children: CalculationItems2.map((d) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Sort by" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "select",
+            {
+              value: config?.sort?.sortBy,
+              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center border pl-4 pr-7",
+              onChange: (e) => onSortByChange(e.target.value),
+              children: sortByItems.map((d) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "select",
+            {
+              value: config?.sort?.orderDesc + "",
+              className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border border-l-0 pl-4 pr-7",
+              onChange: (e) => onOrderChange(e.target.value === "true"),
+              children: orderItems.map((d) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value + "", children: d.label }, d.label);
+              })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/charts/options/ValueOptions.tsx
+var import_immer9 = require("immer");
+var import_ui_core16 = require("@sentio/ui-core");
+
+// src/charts/options/ValueStringMapping.tsx
+var import_lu5 = require("react-icons/lu");
+var import_ui_core15 = require("@sentio/ui-core");
+var import_immer8 = require("immer");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var operators = {
+  ">": "greater than",
+  ">=": "greater or equal",
+  "==": "equal",
+  "!=": "not equal",
+  "<": "less than",
+  "<=": "less or equal"
+};
+var renderTreeLine = (index, isLast) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex h-full w-full items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
+      {
+        className: (0, import_ui_core15.classNames)(
+          "w-px bg-gray-300",
+          isLast ? "h-1/2 self-start" : index === 0 ? "h-full self-end" : "h-full"
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px w-3 bg-gray-300" })
+  ] }) });
+};
+function ValueStringMapping({ rules, onChange }) {
+  const addRule = () => {
+    onChange(
+      (0, import_immer8.produce)(rules, (draft) => {
+        draft = draft || [];
+        draft.push({
+          comparison: "==",
+          value: 0,
+          text: ""
+        });
+      })
+    );
+  };
+  function removeRule(index) {
+    onChange(
+      (0, import_immer8.produce)(rules, (draft) => {
+        draft.splice(index, 1);
+      })
+    );
+  }
+  function changeRule(index, field, value) {
+    onChange(
+      (0, import_immer8.produce)(rules, (draft) => {
+        ;
+        draft[index][field] = value;
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)(
+        "div",
+        {
+          className: "text-text-foreground flex h-10 items-center py-1",
+          children: [
+            renderTreeLine(index, isLast),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("option", { value: op, children: [
+                    "is ",
+                    display
+                  ] }, op);
+                })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "input",
+              {
+                type: "text",
+                name: "value",
+                id: "value",
+                className: "w-30 rounded-l-0 sm:text-ilabel border-main hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 block h-full rounded-r-md border px-2 py-1",
+                placeholder: "0",
+                value: rule.value,
+                onChange: (e) => {
+                  changeRule(index, "value", e.target.value);
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsx)(
+              "input",
+              {
+                type: "text",
+                name: "text",
+                id: "text",
+                className: "sm:text-ilabel border-main hover:border-primary-600 focus:border-primary-600 focus:ring-3  focus:ring-primary-600/30 block h-full w-80 rounded-md px-2 py-1",
+                placeholder: "Display text (e.g. High, Low, Normal)",
+                value: rule.text,
+                onChange: (e) => {
+                  changeRule(index, "text", e.target.value);
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "mx-2",
+                "aria-label": "remove",
+                onClick: () => removeRule(index),
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_lu5.LuTrash2,
+                  {
+                    className: "icon text-text-foreground-disabled",
+                    "aria-hidden": "true"
+                  }
+                )
+              }
+            )
+          ]
+        },
+        index
+      );
+    }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      import_ui_core15.Button,
+      {
+        type: "button",
+        role: "secondary",
+        className: "mt-1 w-fit flex-none",
+        "aria-label": "remove",
+        onClick: addRule,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lu5.LuPlus, { className: (0, import_ui_core15.classNames)("h-4 w-4"), "aria-hidden": "true" }),
+          "Add Formatting Rule"
+        ]
+      }
+    )
+  ] });
+}
+
+// src/charts/options/ValueOptions.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ValueFormatters = [
+  { label: "Number", value: "NumberFormatter" },
+  { label: "Date", value: "DateFormatter" },
+  { label: "String", value: "StringFormatter" }
+];
+var defaultConfig3 = {
+  valueFormatter: "NumberFormatter",
+  showValueLabel: false,
+  maxSignificantDigits: 3,
+  dateFormat: "LLL",
+  mappingRules: [],
+  style: "None"
+};
+var dateFormats = [
+  { label: "Localized format", value: "LLL" },
+  { label: "ISO String", value: "YYYY-MM-DDTHH:mm:ss.sssZ" }
+];
+var CurrencySymbols = [
+  { label: "USD", value: "$" },
+  { label: "EUR", value: "\u20AC" },
+  { label: "GBP", value: "\xA3" },
+  { label: "CNY or JPY", value: "\xA5" },
+  { label: "BTC", value: "\u0243" },
+  { label: "ETH", value: "\u039E" }
+];
+var AddonLabel = ({
+  className,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.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
+  }
+);
+var ValueOptions = ({
+  config,
+  onChange,
+  formatters = ValueFormatters,
+  showPrefix,
+  showSuffix
+}) => {
+  function onChangeDateFormat(f) {
+    onChange((0, import_immer9.produce)(config, (draft) => void (draft.dateFormat = f)));
+  }
+  function onChangeFormatter(f) {
+    onChange((0, import_immer9.produce)(config, (draft) => void (draft.valueFormatter = f)));
+  }
+  function onChangeSymbol(symbol) {
+    onChange((0, import_immer9.produce)(config, (draft) => void (draft.currencySymbol = symbol)));
+  }
+  function onStyleChange(notation) {
+    onChange(
+      (0, import_immer9.produce)(config, (draft) => {
+        draft.style = notation;
+      })
+    );
+  }
+  function onDigitsChange(value, option) {
+    onChange(
+      (0, import_immer9.produce)(config, (draft) => {
+        const d = draft;
+        if (value) {
+          const maxSignificantDigits = parseInt(value);
+          if (maxSignificantDigits >= 0 && maxSignificantDigits <= 20) {
+            d[option] = maxSignificantDigits;
+          }
+        } else {
+          delete d[option];
+        }
+      })
+    );
+  }
+  function onMappingRulesChange(rules) {
+    onChange((0, import_immer9.produce)(config, (draft) => void (draft.mappingRules = rules)));
+  }
+  function onPrefixChange(value) {
+    onChange(
+      (0, import_immer9.produce)(config, (draft) => {
+        if (value) {
+          draft.prefix = value;
+        } else {
+          delete draft.prefix;
+        }
+      })
+    );
+  }
+  function onSuffixChange(value) {
+    onChange(
+      (0, import_immer9.produce)(config, (draft) => {
+        if (value) {
+          draft.suffix = value;
+        } else {
+          delete draft.suffix;
+        }
+      })
+    );
+  }
+  function numberAddons(style) {
+    switch (style) {
+      case "None":
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "input",
+            {
+              disabled: true,
+              className: "focus:border-primary-500 sm:text-ilabel min-w-20  border-main rounded-r-md border border-l-0  py-1",
+              value: ""
+            }
+          )
+        ] });
+      case "Percent":
+      case "Standard":
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 20,
+              className: "focus:border-primary-500 sm:text-ilabel min-w-20 border-main focus:ring-3 focus:ring-primary-600/30 hover:border-primary-600 rounded-r-md border py-1",
+              value: config.maxFractionDigits,
+              placeholder: "0-20",
+              onChange: (e) => onDigitsChange(e.target.value, "maxFractionDigits")
+            }
+          )
+        ] });
+      case "Currency":
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            import_ui_core16.ComboInput,
+            {
+              onChange: onChangeSymbol,
+              options: CurrencySymbols.map((s) => s.value),
+              displayFn: (s) => {
+                const name = CurrencySymbols.find((c) => c.value === s)?.label;
+                return `${name} (${s})`;
+              },
+              placeholder: "$",
+              value: config?.currencySymbol
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border", children: "Precision" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 20,
+              className: "focus:border-primary-500 sm:text-ilabel min-w-20  border-main rounded-r-md border border-l-0  py-1",
+              value: config.precision,
+              defaultValue: 2,
+              placeholder: "0-20",
+              onChange: (e) => onDigitsChange(e.target.value, "precision")
+            }
+          )
+        ] });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            "input",
+            {
+              type: "number",
+              min: 1,
+              max: 21,
+              className: "focus:border-primary-600 sm:text-ilabel min-w-20 border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 rounded-r-md border py-1",
+              value: config.maxSignificantDigits,
+              placeholder: "1-21",
+              onChange: (e) => onDigitsChange(e.target.value, "maxSignificantDigits")
+            }
+          )
+        ] });
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "select",
+        {
+          value: config.valueFormatter,
+          className: (0, import_ui_core16.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_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
+          })
+        }
+      ),
+      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "select",
           {
-            d: "M8.30005 9.90907V6.09089L8.93641 5.45453L9.57278 6.09089V9.90907L8.93641 10.5454L8.30005 9.90907Z",
-            fill: "currentColor"
+            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_runtime28.jsx)("option", { value: "None", children: "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Compact", children: "Compact" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Standard", children: "Standard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Scientific", children: "Scientific" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Percent", children: "Percent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Currency", children: "Currency" })
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "path",
+        config.style && numberAddons(config.style)
+      ] }),
+      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "select",
           {
-            d: "M4.80005 9.90907V6.09089L5.43641 5.45453L6.07278 6.09089V9.90907L5.43641 10.5454L4.80005 9.90907Z",
-            fill: "currentColor"
+            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_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
+            })
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          "path",
+        )
+      ] })
+    ] }) }),
+    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
+      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "input",
           {
-            d: "M1 3.5L13 3.5",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            type: "text",
+            className: "border-0 px-3 py-1.5 focus:ring-0",
+            value: config.prefix || "",
+            placeholder: "e.g., $, #",
+            onChange: (e) => onPrefixChange(e.target.value)
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("clipPath", { id: "clip0_3670_4424", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
-    ]
-  }
-);
-var QueryValueIcon_default = SvgIcon6;
-
-// src/charts/icons/ScatterIcon.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var SvgIcon7 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("g", { clipPath: "url(#clip0_28248_7302)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "path",
-          {
-            d: "M1.75 1.75V12.25H12.25",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "path",
-          {
-            d: "M4.66663 8.75879V8.76754",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "path",
-          {
-            d: "M9.33337 9.34204V9.35079",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "path",
-          {
-            d: "M4.66663 4.10083V4.10958",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "path",
-          {
-            d: "M7 6.43408V6.44283",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-          "path",
+      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          "input",
           {
-            d: "M11.0834 6.43408V6.44283",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            type: "text",
+            className: "min-w-32 border-0 px-3 py-1.5 focus:ring-0",
+            value: config.suffix || "",
+            placeholder: "e.g., %, USD, tokens",
+            onChange: (e) => onSuffixChange(e.target.value)
           }
         )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("clipPath", { id: "clip0_28248_7302", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
-    ]
-  }
-);
-var ScatterIcon_default = SvgIcon7;
+      ] })
+    ] }) }),
+    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      ValueStringMapping,
+      {
+        rules: config.mappingRules || [],
+        onChange: onMappingRulesChange
+      }
+    )
+  ] });
+};
 
-// src/charts/icons/TableIcon.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var SvgIcon8 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("g", { clipPath: "url(#clip0_3670_4416)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "path",
-          {
-            d: "M11.5 2H2.5C1.67157 2 1 2.55964 1 3.25V10.75C1 11.4404 1.67157 12 2.5 12H11.5C12.3284 12 13 11.4404 13 10.75V3.25C13 2.55964 12.3284 2 11.5 2Z",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "path",
+// src/charts/options/ValueControls.tsx
+var import_lodash7 = require("lodash");
+var import_ui_core17 = require("@sentio/ui-core");
+var import_immer10 = require("immer");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var defaultConfig4 = {
+  valueFormatter: "NumberFormatter",
+  showValueLabel: false,
+  maxSignificantDigits: 3,
+  dateFormat: "LLL",
+  mappingRules: [],
+  style: "None",
+  maxFractionDigits: 2
+};
+var ValueControls = ({
+  config,
+  defaultOpen,
+  onChange,
+  formatters = ValueFormatters,
+  showPrefix,
+  showSuffix
+}) => {
+  config = (0, import_lodash7.defaults)(config || {}, defaultConfig4);
+  function toggleShowValueLabel(checked) {
+    config && onChange(
+      (0, import_immer10.produce)(config, (draft) => void (draft.showValueLabel = checked))
+    );
+  }
+  function toggleTooltipTotal(checked) {
+    config && onChange((0, import_immer10.produce)(config, (draft) => void (draft.tooltipTotal = checked)));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_ui_core17.DisclosurePanel,
+    {
+      title: "Value Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          ValueOptions,
           {
-            d: "M1 5L13 5",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            onChange,
+            config,
+            formatters,
+            showPrefix,
+            showSuffix
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          "path",
-          {
-            d: "M6 2L6 12",
-            stroke: "currentColor",
-            strokeWidth: "1.16667",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("clipPath", { id: "clip0_3670_4416", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
-    ]
-  }
-);
-var TableIcon_default = SvgIcon8;
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui_core17.Checkbox,
+            {
+              checked: config?.showValueLabel,
+              onChange: toggleShowValueLabel,
+              label: "Show value label"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui_core17.Checkbox,
+            {
+              checked: config?.tooltipTotal,
+              onChange: toggleTooltipTotal,
+              label: "Show total in tooltip"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AggregateInput,
@@ -3849,6 +4599,8 @@ var TableIcon_default = SvgIcon8;
   BarGuageIcon,
   BarIcon,
   ChartLegend,
+  ChartTooltip,
+  ChartTypeButtonGroup,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
@@ -3860,12 +4612,14 @@ var TableIcon_default = SvgIcon8;
   LabelsInput,
   LineControls,
   LineIcon,
+  PieChart,
   PieChartControls,
   PieIcon,
   QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,
   RefreshContext,
+  ScatterChartTooltip,
   ScatterIcon,
   SystemLabels,
   TableIcon,