@sentio/ui-dashboard 0.2.9 → 0.3.0

package/dist/index.mjs

@@ -3913,14 +3913,1504 @@ var QueryValueChart = forwardRef4(
 );
 QueryValueChart.displayName = "QueryValueChart";
 
+// src/charts/TimeSeriesChart.tsx
+import {
+  forwardRef as forwardRef5,
+  useCallback as useCallback4,
+  useEffect as useEffect8,
+  useMemo as useMemo9,
+  useRef as useRef4,
+  useState as useState10
+} from "react";
+import dayjs5 from "dayjs";
+
+// src/charts/series-utils.ts
+import dayjs3 from "dayjs";
+import duration from "dayjs/plugin/duration";
+import utc3 from "dayjs/plugin/utc";
+import timezone3 from "dayjs/plugin/timezone";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+dayjs3.extend(duration);
+dayjs3.extend(utc3);
+dayjs3.extend(timezone3);
+dayjs3.extend(quarterOfYear);
+dayjs3.extend(localizedFormat);
+var TimeUnitShortNames = {
+  s: "seconds",
+  m: "minutes",
+  h: "hours",
+  d: "days",
+  w: "weeks",
+  M: "months",
+  y: "years"
+};
+function dateRangeOfSeries(series) {
+  let min = /* @__PURE__ */ new Date();
+  let max = /* @__PURE__ */ new Date(0);
+  for (const s of series) {
+    if (s.data.length > 0) {
+      const dmin = s.data[0][0] || min;
+      const dmax = s.data[s.data.length - 1][0] || max;
+      if (dmin < min) min = dmin;
+      if (dmax > max) max = dmax;
+    }
+  }
+  return [min, max];
+}
+function durationToSeconds(d) {
+  if (!d) return 0;
+  return dayjs3.duration(Number(d.value) || 0, d.unit).asSeconds();
+}
+function parseDuration(s) {
+  const m = s.match(/(\d+)([a-z]+)/i);
+  if (m) {
+    const [, value, unit] = m;
+    return { value: parseInt(value), unit: TimeUnitShortNames[unit] };
+  }
+  return { value: 0, unit: "second" };
+}
+function roundInterval(diff) {
+  switch (true) {
+    case diff <= dayjs3.duration(15, "minute").asMilliseconds():
+      return "10s";
+    case diff <= dayjs3.duration(1, "day").asMilliseconds():
+      return "1m";
+    case diff <= dayjs3.duration(30, "day").asMilliseconds():
+      return "1h";
+    case diff <= dayjs3.duration(2, "years").asMilliseconds():
+      return "1d";
+    case diff <= dayjs3.duration(10, "years").asMilliseconds():
+    default:
+      return "7d";
+  }
+}
+function calculateStepByDate(start, end) {
+  return parseDuration(roundInterval(end.getTime() - start.getTime()));
+}
+function shiftTimezone(time, tz) {
+  const origin = dayjs3.isDayjs(time) ? time : dayjs3(time);
+  if (!tz) return origin.toDate();
+  const offset = origin.tz(tz).utcOffset() - origin.utcOffset();
+  return origin.add(offset, "minute").toDate();
+}
+var formatTime = (time, tz, interval) => {
+  const d = dayjs3(shiftTimezone(time, tz));
+  switch (interval?.unit) {
+    case "s":
+      return d.format("HH:mm:ss");
+    case "m":
+      return d.format("DD HH:mm");
+    case "h":
+      return d.format("MM-DD HH:mm");
+    case "d":
+    case "w":
+      return d.format("YYYY-MM-DD");
+    case "M":
+      return interval.value === 3 ? `${d.format("YYYY")}-Q${d.quarter()}` : d.format("YYYY-MMM");
+    default:
+      return d.format("lll");
+  }
+};
+
+// src/charts/time-utils.ts
+import dayjs4 from "dayjs";
+import {
+  toDayjs,
+  isRelativeTime,
+  now,
+  TimeUnitShortNames as TimeUnitShortNames2
+} from "@sentio/ui-core";
+function alignTime(time, step, tz, align = "start") {
+  try {
+    const d = toDayjs(time);
+    const seconds = durationToSeconds(step);
+    const tzOffset = (tz ? d.tz(tz).utcOffset() : 0) * 60;
+    const offset = (d.unix() + tzOffset) % seconds;
+    if (offset === 0) {
+      return time;
+    }
+    return align == "start" ? d.subtract(offset, "second") : d.add(seconds - offset, "second");
+  } catch (e) {
+    console.error(e);
+    return time;
+  }
+}
+function timeBefore(time, duration2, asStart = true) {
+  const durationValue = Number(duration2.value);
+  if (isRelativeTime(time)) {
+    const rt = time;
+    if (rt.unit == null || time == now) {
+      return {
+        sign: -1,
+        unit: TimeUnitShortNames2[duration2.unit],
+        value: durationValue
+      };
+    }
+    if (rt.align) {
+      const t2 = toDayjs(rt, asStart);
+      return t2.subtract(durationValue, TimeUnitShortNames2[duration2.unit]);
+    }
+    const t = toDayjs(time);
+    const nt = t.subtract(durationValue, TimeUnitShortNames2[duration2.unit]);
+    const unit = "days";
+    const value = nt.diff(dayjs4(), unit);
+    return { sign: value < 0 ? -1 : 1, unit, value: Math.abs(value) };
+  } else {
+    const t = toDayjs(time);
+    return t.subtract(durationValue, TimeUnitShortNames2[duration2.unit]);
+  }
+}
+
+// src/charts/TimeSeriesChart.tsx
+import {
+  toDayjs as toDayjs2,
+  fromNumber,
+  classNames as classNames8,
+  PopupMenuButton
+} from "@sentio/ui-core";
+
+// src/charts/options/YaxisControls.tsx
+import { defaults } from "lodash";
+import { Button, Checkbox, DisclosurePanel } from "@sentio/ui-core";
+
+// src/charts/options/controls-ui.tsx
+import { classNames as classNames7 } from "@sentio/ui-core";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var AddonLabel = ({
+  className,
+  children
+}) => /* @__PURE__ */ jsx25(
+  "span",
+  {
+    className: classNames7(
+      "sm:text-icontent border-main inline-flex items-center whitespace-nowrap bg-gray-50",
+      className
+    ),
+    children
+  }
+);
+
+// src/charts/options/YaxisControls.tsx
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+var initialConfig = {
+  yAxis: {
+    min: "",
+    max: "",
+    scale: true,
+    stack: ""
+  }
+};
+function YaxisControls({
+  yAxis,
+  setYAxis,
+  defaultOpen,
+  columnSelect,
+  supportSetName = true,
+  supportSetMinMax = true,
+  supportStackSeries = true,
+  supportAlwaysShowZero = true,
+  supportReset = true,
+  panelTitle = "Y-Axis Controls"
+}) {
+  yAxis = defaults(yAxis || {}, initialConfig.yAxis);
+  const onChangeInput = (field) => (event) => {
+    const { value } = event.target;
+    setYAxis({
+      ...yAxis,
+      [field]: value || void 0,
+      scale: field == "min" && value > "0" ? true : yAxis?.scale
+    });
+  };
+  const onToggleZero = (checked) => {
+    setYAxis({ ...yAxis, scale: !checked, min: checked ? "" : yAxis?.min });
+  };
+  const onClickResetYAxis = () => {
+    setYAxis(initialConfig.yAxis);
+  };
+  const onToggleStack = (checked) => {
+    setYAxis({ ...yAxis, stacked: checked ? "samesign" : "" });
+  };
+  const minMaxLabelCls = "inline-flex items-center border border-r-0 sm:text-icontent border-main  bg-gray-50 px-2 rounded-l-md";
+  const minMaxInputCls = "border focus:border-primary-500 rounded-r-md sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30";
+  return /* @__PURE__ */ jsx26(
+    DisclosurePanel,
+    {
+      title: panelTitle,
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs16("div", { className: "text-icontent flex flex-wrap gap-[10px]", children: [
+        supportSetName && /* @__PURE__ */ jsxs16("label", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx26(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Name" }),
+          /* @__PURE__ */ jsx26(
+            "input",
+            {
+              type: "text",
+              className: "focus:border-primary-500 sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 w-40 rounded-r-md border",
+              value: yAxis?.name,
+              placeholder: "Axis Name",
+              onChange: onChangeInput("name")
+            }
+          )
+        ] }),
+        columnSelect && /* @__PURE__ */ jsxs16("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx26(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Column" }),
+          columnSelect
+        ] }),
+        supportSetMinMax && /* @__PURE__ */ jsxs16(Fragment8, { children: [
+          /* @__PURE__ */ jsxs16("label", { className: "inline-flex h-8", children: [
+            /* @__PURE__ */ jsx26("span", { className: minMaxLabelCls, children: "Min" }),
+            /* @__PURE__ */ jsx26(
+              "input",
+              {
+                type: "text",
+                className: minMaxInputCls,
+                style: { width: "10em" },
+                value: yAxis.min,
+                placeholder: "Auto",
+                onChange: onChangeInput("min")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs16("label", { className: "inline-flex h-8", children: [
+            /* @__PURE__ */ jsx26("span", { className: minMaxLabelCls, children: "Max" }),
+            /* @__PURE__ */ jsx26(
+              "input",
+              {
+                type: "text",
+                className: minMaxInputCls,
+                style: { width: "10em" },
+                value: yAxis.max,
+                placeholder: "Auto",
+                onChange: onChangeInput("max")
+              }
+            )
+          ] })
+        ] }),
+        supportStackSeries && /* @__PURE__ */ jsx26(
+          Checkbox,
+          {
+            checked: !!yAxis?.stacked,
+            onChange: onToggleStack,
+            label: "Stack series"
+          }
+        ),
+        supportAlwaysShowZero && /* @__PURE__ */ jsx26(
+          Checkbox,
+          {
+            checked: !yAxis.scale,
+            onChange: onToggleZero,
+            label: "Always show zero"
+          }
+        ),
+        supportReset && /* @__PURE__ */ jsx26(Button, { type: "button", role: "link", onClick: onClickResetYAxis, children: "Reset" })
+      ] })
+    }
+  );
+}
+
+// src/charts/options/XaxisControls.tsx
+import {
+  Button as Button2,
+  DisclosurePanel as DisclosurePanel2,
+  PopoverTooltip,
+  Select
+} from "@sentio/ui-core";
+import { LuInfo } from "react-icons/lu";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var TypeSelect = Select;
+var SortSelect = Select;
+var OrderSelect = Select;
+var sortByItems = [
+  { label: "Name", value: "ByName" },
+  { label: "Value", value: "ByValue" }
+];
+var orderItems = [
+  { label: "Ascendant", value: false },
+  { label: "Descendant", value: true }
+];
+var XAxisControls = ({
+  xAxis,
+  setXAxis,
+  defaultOpen,
+  columnSelect,
+  columnIsNonTime,
+  panelTitle = "X-Axis Controls",
+  supportName = true,
+  supportSort,
+  supportSetType
+}) => {
+  const onChangeInput = (field) => (event) => {
+    const { value } = event.target;
+    setXAxis({ ...xAxis, [field]: value || void 0 });
+  };
+  const onClickResetXAxis = () => {
+    setXAxis(void 0);
+  };
+  const isXAixsNoneTime = xAxis && xAxis.column && columnIsNonTime;
+  return /* @__PURE__ */ jsx27(
+    DisclosurePanel2,
+    {
+      title: panelTitle,
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs17("div", { className: "text-icontent flex flex-wrap gap-[10px]", children: [
+        supportName && /* @__PURE__ */ jsxs17("label", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx27(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Name" }),
+          /* @__PURE__ */ jsx27(
+            "input",
+            {
+              type: "text",
+              className: "sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 w-40 rounded-r-md",
+              value: xAxis?.name,
+              placeholder: "Axis Name",
+              onChange: onChangeInput("name")
+            }
+          )
+        ] }),
+        supportSetType && /* @__PURE__ */ jsxs17("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsxs17("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2", children: [
+            "X-Axis Type",
+            " ",
+            /* @__PURE__ */ jsx27(
+              PopoverTooltip,
+              {
+                strategy: "fixed",
+                hideArrow: true,
+                placementOption: "bottom",
+                text: /* @__PURE__ */ jsxs17("div", { className: "text-text-foreground max-w-[300px] p-2", children: [
+                  /* @__PURE__ */ jsx27("span", { className: "font-medium", children: "Discrete axis" }),
+                  " displays",
+                  " ",
+                  /* @__PURE__ */ jsx27("span", { className: "text-primary-600", children: "discrete values evenly" }),
+                  ", while ",
+                  /* @__PURE__ */ jsx27("span", { className: "font-medium", children: "Continuous axis" }),
+                  " ",
+                  "shows",
+                  " ",
+                  /* @__PURE__ */ jsx27("span", { className: "text-primary-600", children: "continuous time series" }),
+                  " ",
+                  "and",
+                  " ",
+                  /* @__PURE__ */ jsx27("span", { className: "text-primary-600", children: "auto-fills missing time points" })
+                ] }),
+                children: /* @__PURE__ */ jsx27(LuInfo, { className: "text-text-foreground-secondary h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx27(
+            TypeSelect,
+            {
+              className: "h-8 w-40",
+              buttonClassName: "h-full border-main rounded-l-none items-center inline-flex items-center",
+              value: xAxis?.type || "time",
+              onChange: (val) => {
+                setXAxis({ ...xAxis, type: val });
+              },
+              options: [
+                { label: "Continuous", value: "time" },
+                { label: "Discrete", value: "category" }
+              ]
+            }
+          )
+        ] }),
+        columnSelect && /* @__PURE__ */ jsxs17("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx27(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Column" }),
+          columnSelect
+        ] }),
+        supportSort && isXAixsNoneTime && /* @__PURE__ */ jsxs17("span", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx27(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Sort By" }),
+          /* @__PURE__ */ jsx27(
+            SortSelect,
+            {
+              className: "h-8 w-20 leading-8",
+              buttonClassName: "h-full border-main rounded-none inline-flex items-center",
+              options: sortByItems,
+              value: xAxis?.sort?.sortBy,
+              onChange: (value) => {
+                setXAxis({
+                  ...xAxis,
+                  sort: { ...xAxis?.sort, sortBy: value }
+                });
+              },
+              placeholder: "Sort By"
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            OrderSelect,
+            {
+              className: "h-8 w-40 leading-8",
+              buttonClassName: "h-full border-l-0 border-main rounded-l-none inline-flex items-center",
+              options: orderItems,
+              value: xAxis?.sort?.orderDesc,
+              onChange: (value) => {
+                setXAxis({
+                  ...xAxis,
+                  sort: { ...xAxis?.sort, orderDesc: value }
+                });
+              },
+              placeholder: "Sort Order"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx27(
+          Button2,
+          {
+            type: "button",
+            role: "link",
+            onClick: onClickResetXAxis,
+            className: "h-8",
+            children: "Reset"
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/charts/TimeSeriesChart.tsx
+import ReactDOMServer from "react-dom/server";
+import { isArray, isEqual as isEqual3, isNumber as isNumber3, uniq } from "lodash";
+import {
+  flip,
+  FloatingOverlay,
+  FloatingPortal as FloatingPortal2,
+  shift as shift2,
+  useFloating as useFloating3
+} from "@floating-ui/react";
+import { useBoolean } from "@sentio/ui-core";
+import { LuChevronDown as LuChevronDown2 } from "react-icons/lu";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var NumberFormat = (o) => new Intl.NumberFormat("en-US", o);
+function roundByDPR(value) {
+  const dpr = window.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+function onClickPreventDefault(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+var closestNumber = (arr, needle) => {
+  return arr?.reduce(
+    (a, b) => Math.abs(b - needle) < Math.abs(a - needle) ? b : a
+  );
+};
+var initialConfig2 = {
+  xAxis: {
+    type: "category",
+    min: "",
+    max: "",
+    scale: true,
+    name: "",
+    column: ""
+  },
+  yAxis: {
+    min: "",
+    max: "",
+    scale: true
+  }
+};
+var createYAxisResult = (min, max, scale, name) => {
+  const result = { min, max, scale };
+  if (name) {
+    result.name = name;
+  }
+  return result;
+};
+var calculateMargin = (value, isMin) => {
+  if (isMin) {
+    return value >= 0 ? Math.max(0, value * 0.9) : value * 1.1;
+  } else {
+    return value >= 0 ? value * 1.1 : value * 0.9;
+  }
+};
+var yAxisToChartOption = (option, markLines = [], values) => {
+  const { min, max, scale, name } = option || {};
+  const hasValidMin = min !== void 0 && min !== "";
+  const hasValidMax = max !== void 0 && max !== "";
+  const optionMin = hasValidMin ? parseFloat(min) || min : void 0;
+  const optionMax = hasValidMax ? parseFloat(max) || max : void 0;
+  if (hasValidMin && hasValidMax) {
+    return createYAxisResult(optionMin, optionMax, scale, name);
+  }
+  const lineValues = markLines.map((m) => m.value).filter(
+    (v) => v !== void 0 && v !== 0 && v !== "0"
+  );
+  if (lineValues.length === 0 && !hasValidMin && !hasValidMax) {
+    return createYAxisResult(void 0, void 0, scale, name);
+  }
+  const allValues = [...lineValues];
+  if (values) {
+    const valueSet = /* @__PURE__ */ new Set();
+    values.forEach((series) => {
+      series.data.forEach((point) => {
+        const value = point[1];
+        if (isNumber3(value)) {
+          valueSet.add(value);
+        }
+      });
+    });
+    valueSet.forEach((value) => {
+      allValues.push(value);
+    });
+  }
+  let finalMin = optionMin;
+  let finalMax = optionMax;
+  if (allValues.length > 0) {
+    if (!hasValidMin) {
+      const minValue = allValues.reduce(
+        (min2, current) => Math.min(min2, current),
+        Infinity
+      );
+      finalMin = calculateMargin(minValue, true);
+    }
+    if (!hasValidMax) {
+      const maxValue = allValues.reduce(
+        (max2, current) => Math.max(max2, current),
+        -Infinity
+      );
+      finalMax = calculateMargin(maxValue, false);
+    }
+  }
+  return createYAxisResult(finalMin, finalMax, scale, name);
+};
+var getEventName = (name) => {
+  let eventName = name.split("-")[0].trim();
+  if (eventName.toLowerCase() === "all events") {
+    eventName = void 0;
+  }
+  return eventName;
+};
+var DARK_AREA_FILL_OPACITY = 0.35;
+var applyDarkAreaOpacity = (series) => {
+  if (series.length <= 1) {
+    return series;
+  }
+  return series.map((s) => {
+    if (!s?.areaStyle) {
+      return s;
+    }
+    const existing = typeof s.areaStyle.opacity === "number" ? s.areaStyle.opacity : 0.7;
+    return {
+      ...s,
+      areaStyle: {
+        ...s.areaStyle,
+        opacity: Math.min(existing, DARK_AREA_FILL_OPACITY)
+      }
+    };
+  });
+};
+var fixTimeSeries = (series) => {
+  try {
+    if (!series?.length) {
+      return;
+    }
+    const isValidDateSeries = series.every(
+      (s) => s.data?.every((point) => {
+        const date = point?.[0];
+        return date instanceof Date && !isNaN(date.getTime());
+      })
+    );
+    if (!isValidDateSeries || series.length < 2 || uniq(series.map((s) => s.data?.length)).length === 1) {
+      return;
+    }
+    const timeIndex = [];
+    const dataIndexes = new Array(series.length).fill(0);
+    while (dataIndexes.some((d, index) => d < (series[index]?.data?.length || 0))) {
+      const times = dataIndexes.map((d, index) => {
+        const date = series[index]?.data?.[d]?.[0];
+        return date instanceof Date && !isNaN(date.getTime()) ? date.getTime() : Infinity;
+      });
+      const minTime = Math.min(...times);
+      if (!isFinite(minTime)) {
+        break;
+      }
+      const newDate = new Date(minTime);
+      if (isNaN(newDate.getTime())) {
+        break;
+      }
+      timeIndex.push(newDate);
+      dataIndexes.forEach((d, index) => {
+        const date = series[index]?.data?.[d]?.[0];
+        if (date instanceof Date && !isNaN(date.getTime()) && date.getTime() === minTime) {
+          dataIndexes[index]++;
+        }
+      });
+    }
+    series.forEach((s) => {
+      if (!s?.data) return;
+      const data = s.data;
+      const fixedData = [];
+      let index = 0;
+      timeIndex.forEach((t) => {
+        if (data[index]?.[0] instanceof Date && !isNaN(data[index][0].getTime()) && isEqual3(data[index][0], t)) {
+          fixedData.push(data[index]);
+          index++;
+        } else {
+          fixedData.push([t, null]);
+        }
+      });
+      s.data = fixedData;
+    });
+  } catch (error) {
+    console.warn("Error in fixTimeSeries:", error);
+  }
+};
+var TimeSeriesChart = forwardRef5(
+  (props, ref) => {
+    const yAxisRef = useRef4(null);
+    const {
+      group,
+      title,
+      startTime,
+      endTime,
+      tz,
+      minHeight,
+      onSelectTimeRange,
+      loading,
+      controls,
+      config,
+      markAreas,
+      markLines,
+      onChangeConfig,
+      style,
+      chartType,
+      allowClick,
+      sourceType,
+      getEventNameById,
+      noLegend: _noLegend = false,
+      onInitChart,
+      nonXAxis,
+      // injected
+      series: seriesProp,
+      compareSeries: compareSeriesProp,
+      legend: legendProp,
+      numberFormatter,
+      overlay,
+      templateVariableKeys: _templateVariableKeys,
+      seriesToMetricLabels,
+      eventNameMap,
+      eventsQueryMap,
+      onViewLogs,
+      onViewUsers,
+      viewLogDisabled: viewLogDisabledProp,
+      viewUsersDisabled: viewUsersDisabledProp,
+      returnedSeries,
+      totalSeries
+    } = props;
+    void _templateVariableKeys;
+    const seriesToMetricLabelsRef = useMemo9(
+      () => seriesToMetricLabels ?? [],
+      [seriesToMetricLabels]
+    );
+    const eventNameMapRef = useMemo9(
+      () => eventNameMap ?? /* @__PURE__ */ new Map(),
+      [eventNameMap]
+    );
+    const eventsQueryMapRef = useMemo9(
+      () => eventsQueryMap ?? /* @__PURE__ */ new Map(),
+      [eventsQueryMap]
+    );
+    const [yAxis, setYAxis] = useState10(config?.yAxis || initialConfig2.yAxis);
+    const [xAxis, setXAxis] = useState10(config?.xAxis || initialConfig2.xAxis);
+    const [maximumSignificantDigits, setMaximumSignificantDigits] = useState10(3);
+    const isDarkMode = useDarkMode();
+    const minRef = useRef4(0);
+    const maxRef = useRef4(0);
+    const getSymbolSize = useCallback4(
+      (value) => {
+        const val = value[2] || 0;
+        return normalize(
+          val,
+          minRef.current,
+          maxRef.current,
+          config?.scatterConfig?.minSize,
+          config?.scatterConfig?.maxSize
+        );
+      },
+      [config?.scatterConfig?.minSize, config?.scatterConfig?.maxSize]
+    );
+    useEffect8(() => {
+      setYAxis(config?.yAxis || initialConfig2.yAxis);
+    }, [config]);
+    const legend = useMemo9(() => legendProp || [], [legendProp]);
+    const series = useMemo9(() => {
+      const result = (seriesProp || []).map((s) => ({ ...s }));
+      computeMarkLines(result, markLines || []);
+      computeMarksAreas(result, markAreas || []);
+      if (config?.yAxis?.stacked) {
+        fixTimeSeries(result);
+        result.forEach((s) => {
+          if (config?.seriesConfig && config.seriesConfig.series?.[s.name]) {
+            return;
+          }
+          s.stack = "Total";
+          s.stackStrategy = config?.yAxis?.stacked;
+        });
+      }
+      if (config?.lineConfig) {
+        result.forEach((s) => {
+          s.lineStyle = {
+            ...s.lineStyle,
+            type: config?.lineConfig?.style?.toLowerCase() || "solid"
+          };
+          if (config?.lineConfig?.smooth) {
+            s.smooth = true;
+          }
+        });
+      }
+      if (chartType === "SCATTER") {
+        result.forEach((s) => {
+          const min = s.data?.reduce((min2, p) => {
+            const val = p[2] || 0;
+            return Math.min(min2, val);
+          }, Infinity);
+          const max = s.data?.reduce((max2, p) => {
+            const val = p[2] || 0;
+            return Math.max(max2, val);
+          }, -Infinity);
+          minRef.current = min;
+          maxRef.current = max;
+          s.symbolSize = getSymbolSize;
+        });
+      }
+      if (allowClick) {
+        result.forEach((serie) => {
+          serie.emphasis = serie.type === "bar" ? {
+            itemStyle: {
+              shadowColor: "rgba(0, 0, 0, 0.3)",
+              shadowBlur: 10
+            }
+          } : {
+            scale: 1.5
+          };
+        });
+      }
+      return result;
+    }, [
+      seriesProp,
+      markAreas,
+      markLines,
+      chartType,
+      config?.yAxis,
+      config?.lineConfig,
+      config?.seriesConfig,
+      allowClick,
+      getSymbolSize
+    ]);
+    useEffect8(() => {
+      setMaximumSignificantDigits(3);
+    }, [seriesProp]);
+    const compareSeries = useMemo9(() => {
+      if (!compareSeriesProp?.length) {
+        return [];
+      }
+      const result = compareSeriesProp.map((s) => ({ ...s }));
+      for (const s of result) {
+        s.lineStyle = {
+          ...s.lineStyle,
+          type: "dashed"
+        };
+        s.itemStyle = {
+          ...s.itemStyle,
+          color: "rgba(120, 120, 120, 0.3)"
+        };
+        s.xAxisIndex = 1;
+        if (chartType === "SCATTER") {
+          s.symbolSize = getSymbolSize;
+        }
+      }
+      return result;
+    }, [compareSeriesProp, chartType, getSymbolSize]);
+    const NF = NumberFormat({ notation: "compact", maximumSignificantDigits });
+    const NF_LARGE = NumberFormat({ notation: "scientific" });
+    const seriesIdToYAxisName = overlay?.seriesIdToYAxisName ?? /* @__PURE__ */ new Map();
+    const overlaySeriesIdToFormatter = overlay?.overlaySeriesIdToFormatter ?? /* @__PURE__ */ new Map();
+    const applyOverlaySeries = overlay?.applyOverlaySeries ?? ((options2) => options2);
+    const setYAxisWrap = (yAxis2) => {
+      setYAxis(yAxis2);
+      onChangeConfig?.({ ...config, yAxis: yAxis2 });
+    };
+    let yAxisLabel;
+    const [start, end] = useMemo9(() => {
+      const [dataStart, dataEnd] = dateRangeOfSeries(series);
+      const selectStart = startTime && toDayjs2(startTime, true).toDate();
+      const selectEnd = endTime && toDayjs2(endTime, false).toDate();
+      const selStart = selectStart ? shiftTimezone(selectStart, tz) : void 0;
+      const selEnd = selectEnd ? shiftTimezone(selectEnd, tz) : void 0;
+      const start2 = dataStart && selStart ? dataStart.getTime() < selStart.getTime() ? dataStart : selStart : selStart;
+      const end2 = dataEnd && selEnd ? dataEnd.getTime() > selEnd.getTime() ? dataEnd : selEnd : selEnd;
+      return [start2, end2];
+    }, [series, startTime, endTime]);
+    const xLabelFormatter = useMemo9(() => {
+      return config?.xAxis?.type === "category" ? (value) => {
+        const date = shiftTimezone(value, tz);
+        let interval = config?.timeRangeOverride?.timeRange?.interval;
+        if (!interval && start && end) {
+          interval = calculateStepByDate(start, end);
+        }
+        return formatTime(date, tz, interval);
+      } : void 0;
+    }, [
+      config?.xAxis?.type,
+      config?.timeRangeOverride?.timeRange,
+      tz,
+      start,
+      end
+    ]);
+    const tooltipParmsRef = useRef4({});
+    const getSeriesContext = useCallback4(
+      (seriesId, seriesIndex) => {
+        const params = tooltipParmsRef.current?.data;
+        if (!params || !seriesToMetricLabelsRef) {
+          return null;
+        }
+        let value;
+        let idx;
+        if (Array.isArray(params)) {
+          const param = params.find(
+            (p) => p.seriesId === seriesId || p.seriesIndex === seriesIndex
+          );
+          if (!param) return null;
+          value = param.value;
+          idx = param.seriesIndex;
+        } else {
+          value = params.value;
+          idx = seriesIndex;
+        }
+        if (!value) return null;
+        const {
+          labels = {},
+          name = "",
+          id
+        } = seriesToMetricLabelsRef[idx] || {};
+        const isEventSeries = eventNameMapRef.has(id) || sourceType === "ANALYTICS";
+        let eventName;
+        if (sourceType === "ANALYTICS") {
+          try {
+            const _eventName = getEventNameById?.(id);
+            eventName = _eventName == void 0 ? getEventName(name) : _eventName;
+          } catch {
+          }
+        } else if (eventNameMapRef.has(id)) {
+          eventName = eventNameMapRef.get(id) || void 0;
+        }
+        const query = eventsQueryMapRef.get(id);
+        return {
+          value,
+          labels,
+          name,
+          id,
+          isEventSeries,
+          eventName,
+          query
+        };
+      },
+      [
+        seriesToMetricLabelsRef,
+        eventNameMapRef,
+        eventsQueryMapRef,
+        sourceType,
+        getEventNameById
+      ]
+    );
+    const handleViewLogs = useCallback4(
+      (seriesId, seriesIndex) => {
+        const ctx = getSeriesContext(seriesId, seriesIndex);
+        if (!ctx) return;
+        onViewLogs?.(ctx);
+      },
+      [getSeriesContext, onViewLogs]
+    );
+    const handleViewUsers = useCallback4(
+      (seriesId, seriesIndex) => {
+        const ctx = getSeriesContext(seriesId, seriesIndex);
+        if (!ctx) return;
+        onViewUsers?.(ctx);
+      },
+      [getSeriesContext, onViewUsers]
+    );
+    const getViewLogDisabled = useCallback4(
+      (seriesId, seriesIndex) => {
+        const ctx = getSeriesContext(seriesId, seriesIndex);
+        return viewLogDisabledProp?.(ctx) ?? false;
+      },
+      [getSeriesContext, viewLogDisabledProp]
+    );
+    const getViewUsersDisabled = useCallback4(
+      (seriesId, seriesIndex) => {
+        const ctx = getSeriesContext(seriesId, seriesIndex);
+        return viewUsersDisabledProp?.(ctx) ?? false;
+      },
+      [getSeriesContext, viewUsersDisabledProp]
+    );
+    const tooltipFormatter = useCallback4(
+      (params) => {
+        const paramsArray = Array.isArray(params) ? params : [params];
+        if (allowClick) {
+          yAxisRef.current = paramsArray.map((param) => ({
+            value: param.value,
+            seriesIndex: param.seriesIndex,
+            seriesName: param.seriesName
+          }));
+        }
+        let title2 = void 0;
+        if (nonXAxis) {
+          const value = paramsArray?.[0]?.data?.[0];
+          title2 = `${config?.xAxis?.column ? `${config?.xAxis?.column}:` : ""} ${value}`;
+        } else if (xLabelFormatter) {
+          const value = paramsArray?.[0]?.data?.[0];
+          title2 = xLabelFormatter(value);
+        }
+        const annotatedParams = paramsArray.map((param) => {
+          const yAxisName = seriesIdToYAxisName.get(param.seriesId);
+          if (yAxisName) {
+            return { ...param, seriesName: `${param.seriesName}(${yAxisName})` };
+          }
+          return param;
+        });
+        const parmas = {
+          data: chartType === "SCATTER" ? params : annotatedParams,
+          title: title2,
+          highlightSeriesId: global.highlightSeriesId,
+          compareTimeDuration: config?.timeRangeOverride?.compareTime?.ago,
+          numberFormatter: (value, seriesId) => {
+            const seriesFormatter = seriesId ? overlaySeriesIdToFormatter.get(seriesId) : void 0;
+            if (seriesFormatter) {
+              return seriesFormatter(value);
+            }
+            return numberFormatter(value);
+          },
+          showTotal: config?.valueConfig?.tooltipTotal,
+          // Gate on the outward props existing (same as the original gating on the
+          // handlers existing): no handler → button doesn't render.
+          onViewLogs: onViewLogs ? handleViewLogs : void 0,
+          viewLogDisabled: onViewLogs ? getViewLogDisabled : void 0,
+          onViewUsers: onViewUsers ? handleViewUsers : void 0,
+          viewUsersDisabled: onViewUsers ? getViewUsersDisabled : void 0,
+          sizeTitle: config?.scatterConfig?.symbolSize
+        };
+        tooltipParmsRef.current = parmas;
+        if (chartType === "SCATTER") {
+          return ReactDOMServer.renderToString(
+            /* @__PURE__ */ jsx28(
+              ScatterChartTooltip,
+              {
+                ...parmas,
+                onViewLogs: void 0,
+                viewLogDisabled: void 0,
+                onViewUsers: void 0,
+                viewUsersDisabled: void 0,
+                sizeTitle: config?.scatterConfig?.symbolSize
+              }
+            )
+          );
+        } else {
+          return ReactDOMServer.renderToString(
+            /* @__PURE__ */ jsx28(
+              ChartTooltip,
+              {
+                ...parmas,
+                onViewLogs: void 0,
+                viewLogDisabled: void 0,
+                onViewUsers: void 0,
+                viewUsersDisabled: void 0
+              }
+            )
+          );
+        }
+      },
+      [
+        allowClick,
+        numberFormatter,
+        overlaySeriesIdToFormatter,
+        config,
+        nonXAxis,
+        chartType,
+        xLabelFormatter,
+        onViewLogs,
+        handleViewLogs,
+        getViewLogDisabled,
+        onViewUsers,
+        handleViewUsers,
+        getViewUsersDisabled,
+        seriesIdToYAxisName
+      ]
+    );
+    const [active, setActive] = useState10(false);
+    const onSelect = useCallback4(
+      (start2, end2) => {
+        if (onSelectTimeRange && active) {
+          let startTime2 = fromNumber(start2);
+          let endTime2 = fromNumber(end2);
+          const interval = config?.timeRangeOverride?.timeRange?.interval;
+          if (interval) {
+            startTime2 = alignTime(startTime2, interval, tz, "start");
+            endTime2 = alignTime(endTime2, interval, tz, "end");
+          }
+          onSelectTimeRange(startTime2, endTime2);
+        }
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [onSelectTimeRange, active]
+    );
+    const allowBrush = useMemo9(() => {
+      if (nonXAxis) {
+        return false;
+      }
+      if (onSelectTimeRange && startTime && endTime) {
+        const interval = config?.timeRangeOverride?.timeRange?.interval;
+        const diff = toDayjs2(endTime).diff(toDayjs2(startTime), "seconds");
+        return interval ? diff > durationToSeconds(interval) : true;
+      }
+      return false;
+    }, [
+      config?.timeRangeOverride?.timeRange,
+      startTime,
+      endTime,
+      onSelectTimeRange,
+      nonXAxis
+    ]);
+    const xAxisData = useMemo9(() => {
+      if (nonXAxis) {
+        return [
+          {
+            type: "category",
+            axisLabel: {
+              hideOverlap: true,
+              fontSize: 11
+            },
+            name: config?.xAxis?.name
+          }
+        ];
+      }
+      const ret = [
+        {
+          type: config?.xAxis?.type || "time",
+          min: config?.xAxis?.type === "category" ? void 0 : start,
+          max: config?.xAxis?.type === "category" ? void 0 : end,
+          axisLabel: {
+            hideOverlap: true,
+            fontSize: 11,
+            formatter: xLabelFormatter
+          },
+          axisTick: {
+            show: false
+          }
+        }
+      ];
+      if (config?.xAxis?.name) {
+        ret[0].name = config?.xAxis?.name;
+      }
+      if (config?.timeRangeOverride?.compareTime?.ago) {
+        const d = config?.timeRangeOverride?.compareTime?.ago;
+        const compareStart = toDayjs2(timeBefore(dayjs5(start), d, true)).toDate();
+        const compareEnd = toDayjs2(timeBefore(dayjs5(end), d, false)).toDate();
+        ret.push({
+          show: false,
+          type: config?.xAxis?.type || "time",
+          min: config?.xAxis?.type === "category" ? void 0 : compareStart,
+          max: config?.xAxis?.type === "category" ? void 0 : compareEnd,
+          axisLabel: {
+            hideOverlap: true,
+            fontSize: 11,
+            formatter: xLabelFormatter
+          }
+        });
+      }
+      return ret;
+    }, [
+      config?.timeRangeOverride?.compareTime,
+      start,
+      end,
+      nonXAxis,
+      config?.xAxis,
+      xLabelFormatter
+    ]);
+    const options = useMemo9(() => {
+      const primarySeries = xAxisData.length == 2 ? [...series, ...compareSeries] : series;
+      const primaryYAxis = {
+        type: "value",
+        axisLabel: {
+          formatter: function(value) {
+            if (value == yAxisLabel && maximumSignificantDigits < 21) {
+              setMaximumSignificantDigits(maximumSignificantDigits + 1);
+            }
+            yAxisLabel = value;
+            if (value > 1e21) {
+              return NF_LARGE.format(value);
+            }
+            return NF.format(value);
+          },
+          margin: chartType === "SCATTER" ? config?.scatterConfig?.maxSize ? config.scatterConfig.maxSize : 30 : 4
+        },
+        ...yAxisToChartOption(
+          yAxis,
+          markLines,
+          primarySeries
+        )
+      };
+      const baseOptions = {
+        title: {
+          text: title
+        },
+        grid: {
+          top: title ? 48 : 16,
+          right: chartType === "SCATTER" ? 16 : 8,
+          bottom: 8,
+          left: chartType === "SCATTER" ? 20 : 12,
+          containLabel: true
+        },
+        xAxis: xAxisData,
+        dataZoom: {
+          type: "inside",
+          zoomLock: true
+        },
+        legend: {
+          data: legend,
+          top: -1e4,
+          left: -1e4
+        },
+        brush: allowBrush ? {
+          xAxisIndex: 0
+        } : void 0,
+        toolbox: {
+          show: false
+        },
+        yAxis: primaryYAxis,
+        animation: false,
+        series: primarySeries,
+        tooltip: {
+          trigger: chartType === "SCATTER" ? "item" : "axis",
+          confine: true,
+          textStyle: {
+            fontSize: 14,
+            fontFamily: sansFontFamily
+          },
+          extraCssText: "max-width: 75%; max-height: 50vh; overflow-y: auto; padding: 10px 0; background-color: rgba(var(--text-background)); border-color: rgba(var(--border-color));",
+          formatter: tooltipFormatter
+        },
+        visualMap: chartType === "SCATTER" && config?.scatterConfig?.color && sentioColors.dark[config.scatterConfig.color] ? {
+          dimension: 2,
+          min: minRef.current,
+          max: maxRef.current,
+          show: false,
+          inRange: {
+            color: isDarkMode ? sentioColors.dark[config.scatterConfig.color] : sentioColors.light[config.scatterConfig.color]
+          }
+        } : void 0
+      };
+      const finalOptions = applyOverlaySeries(baseOptions);
+      if (isDarkMode && Array.isArray(finalOptions.series)) {
+        finalOptions.series = applyDarkAreaOpacity(
+          finalOptions.series
+        );
+      }
+      return finalOptions;
+    }, [
+      title,
+      xAxisData,
+      legend,
+      allowBrush,
+      yAxis,
+      series,
+      compareSeries,
+      applyOverlaySeries,
+      tooltipFormatter,
+      maximumSignificantDigits,
+      xAxis,
+      chartType,
+      isDarkMode
+    ]);
+    const {
+      value: isOpen,
+      setFalse: setClose,
+      setTrue: setOpen
+    } = useBoolean(false);
+    const clickEventParamsRef = useRef4(null);
+    const [selectedSeriesIndex, setSelectedSeriesIndex] = useState10(0);
+    const chartPositionRef = useRef4(null);
+    const { x, y, strategy, refs } = useFloating3({
+      open: isOpen,
+      placement: "right",
+      middleware: [flip(), shift2()]
+    });
+    const onClick = useCallback4(
+      (params, rawParams) => {
+        if (!params) {
+          setClose();
+          return;
+        }
+        const baseBoundingRect = chartPositionRef.current?.getBoundingClientRect();
+        if (params.event) {
+          const { event } = params;
+          clickEventParamsRef.current = params;
+          const targetBoundRect = event.target.getBoundingRect();
+          refs.setPositionReference({
+            getBoundingClientRect: () => {
+              return {
+                x: event.offsetX + (baseBoundingRect?.x ?? 0),
+                y: event.offsetY + (baseBoundingRect?.y ?? 0),
+                width: targetBoundRect.width,
+                height: targetBoundRect.height,
+                top: event.offsetY + (baseBoundingRect?.top ?? 0),
+                right: event.offsetX + (baseBoundingRect?.right ?? 0),
+                bottom: event.offsetY + (baseBoundingRect?.bottom ?? 0),
+                left: event.offsetX + (baseBoundingRect?.left ?? 0)
+              };
+            }
+          });
+        } else if (isArray(params)) {
+          const targetValue = closestNumber(
+            yAxisRef.current?.map((item) => item.value[1]),
+            params[1]
+          );
+          clickEventParamsRef.current = yAxisRef.current?.find(
+            (item) => item.value[1] === targetValue
+          );
+          refs.setPositionReference({
+            getBoundingClientRect: () => {
+              return {
+                x: rawParams.offsetX + (baseBoundingRect?.x ?? 0),
+                y: rawParams.offsetY + (baseBoundingRect?.y ?? 0),
+                width: 10,
+                height: 10,
+                top: rawParams.offsetY + (baseBoundingRect?.top ?? 0),
+                right: rawParams.offsetX + (baseBoundingRect?.right ?? 0),
+                bottom: rawParams.offsetY + (baseBoundingRect?.bottom ?? 0),
+                left: rawParams.offsetX + (baseBoundingRect?.left ?? 0)
+              };
+            }
+          });
+        }
+        setOpen();
+      },
+      [refs, setClose, setOpen]
+    );
+    const onSeriesEvent = useCallback4((event, params) => {
+      switch (event) {
+        case "click":
+          setSelectedSeriesIndex(params.seriesIndex);
+          break;
+        case "mouseover":
+          ;
+          global.highlightSeriesId = params.seriesId;
+          document.querySelectorAll(`.series_${params.seriesId}`).forEach((node) => {
+            node.classList.add("highlighted");
+          });
+          break;
+        case "mouseout":
+          const previousSeriesId = global.highlightSeriesId;
+          if (previousSeriesId) {
+            document.querySelectorAll(`.series_${previousSeriesId}`).forEach((node) => {
+              node.classList.remove("highlighted");
+            });
+          }
+          ;
+          global.highlightSeriesId = "";
+      }
+    }, []);
+    const onSelectSeries = useCallback4(
+      (seriesIndex) => {
+        clickEventParamsRef.current = {
+          seriesIndex,
+          seriesName: series[seriesIndex].name
+        };
+        if (yAxisRef.current[seriesIndex]?.value) {
+          clickEventParamsRef.current.value = yAxisRef.current[seriesIndex].value;
+        }
+        setSelectedSeriesIndex(seriesIndex);
+      },
+      [series, setSelectedSeriesIndex]
+    );
+    const switchSeries = useMemo9(() => {
+      const items = [
+        series.map((serie, index) => ({
+          label: serie.name || "",
+          key: `${index}`
+        }))
+      ];
+      return /* @__PURE__ */ jsx28(
+        PopupMenuButton,
+        {
+          onSelect: (d) => onSelectSeries(parseInt(d, 10)),
+          items,
+          buttonIcon: (open) => /* @__PURE__ */ jsx28(
+            "span",
+            {
+              className: classNames8(
+                "text-primary-100",
+                "hover:bg-primary-200/80 inline-block cursor-pointer rounded-md px-1 py-0.5",
+                open ? "bg-primary-200/80" : ""
+              ),
+              children: /* @__PURE__ */ jsx28(LuChevronDown2, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          portal: false,
+          placement: "bottom-end",
+          itemsClassName: "max-h-[50vh] overflow-y-auto"
+        }
+      );
+    }, [series]);
+    void switchSeries;
+    void selectedSeriesIndex;
+    const noLegend = useMemo9(() => {
+      if (chartType === "SCATTER" && series.length === 1) {
+        return true;
+      }
+      return _noLegend;
+    }, [_noLegend, chartType, series?.length]);
+    console.log("options", options);
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        className: "h-full w-full",
+        onMouseOver: () => {
+          setActive(true);
+        },
+        onMouseOut: () => {
+          setActive(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx28(
+            ReactEChartsBase,
+            {
+              ref,
+              loading,
+              group,
+              option: options,
+              minHeight,
+              returnedSeries,
+              totalSeries,
+              onSelect,
+              onClick: allowClick ? onClick : void 0,
+              style,
+              onSeriesEvent,
+              noLegend,
+              onInitChart
+            }
+          ),
+          controls && nonXAxis && /* @__PURE__ */ jsx28(XAxisControls, { xAxis, setXAxis, defaultOpen: true }),
+          controls && /* @__PURE__ */ jsx28(YaxisControls, { yAxis, setYAxis: setYAxisWrap }),
+          /* @__PURE__ */ jsx28("div", { className: "absolute left-0 top-0", ref: chartPositionRef }),
+          isOpen && allowClick && /* @__PURE__ */ jsx28(FloatingPortal2, { children: /* @__PURE__ */ jsx28(FloatingOverlay, { className: "z-50 bg-gray-100/20", onClick: setClose, children: /* @__PURE__ */ jsx28(
+            "div",
+            {
+              ref: refs.setFloating,
+              className: "border-border-color bg-default-bg min-w-64 absolute w-fit divide-y rounded-md border pb-2 shadow-sm",
+              style: {
+                position: strategy,
+                top: 0,
+                left: 0,
+                transform: `translate(${roundByDPR(x || 0)}px,${roundByDPR(y || 0)}px)`
+              },
+              onClick: onClickPreventDefault,
+              children: /* @__PURE__ */ jsx28("div", { className: "text-text-foreground max-h-80 max-w-[50vw] overflow-y-auto py-2 text-sm", children: chartType === "SCATTER" ? /* @__PURE__ */ jsx28(ScatterChartTooltip, { ...tooltipParmsRef.current, isFixed: true }) : /* @__PURE__ */ jsx28(ChartTooltip, { ...tooltipParmsRef.current, isFixed: true }) })
+            }
+          ) }) })
+        ]
+      }
+    );
+  }
+);
+TimeSeriesChart.displayName = "TimeSeriesChart";
+function computeMarkLines(series, markLines) {
+  if (markLines && markLines.length > 0 && series.length > 0) {
+    series[0] = {
+      ...series[0],
+      markLine: {
+        symbol: [],
+        data: markLines.map((area) => {
+          if (area.from || area.to) {
+            return [
+              {
+                name: "threshold",
+                xAxis: area.from,
+                yAxis: area.value ?? "min",
+                symbol: "react",
+                symbolSize: [20, 1],
+                symbolOffset: [area.below ? -10 : 10, 0],
+                label: {
+                  formatter: `${area.label}`,
+                  position: area.below ? "insideMiddleBottom" : "insideMiddleTop",
+                  color: area.color || "#ff0000"
+                },
+                lineStyle: {
+                  color: area.color || "#ff0000"
+                }
+              },
+              {
+                symbol: "rect",
+                symbolSize: [20, 1],
+                symbolOffset: [area.below ? 10 : -10, 0],
+                xAxis: area.to ? area.to : void 0,
+                yAxis: area.value ?? "max"
+              }
+            ];
+          } else {
+            return {
+              name: "threshold",
+              yAxis: area.value,
+              symbol: "react",
+              symbolSize: [20, 1],
+              symbolOffset: [area.below ? -10 : 10, 0],
+              label: {
+                formatter: `${area.label}`,
+                position: area.below ? "insideStartBottom" : "insideStartTop",
+                color: area.color || "#ff0000"
+              },
+              lineStyle: {
+                color: area.color || "#ff0000"
+              }
+            };
+          }
+        })
+      }
+    };
+  }
+}
+function computeMarksAreas(series, markAreas) {
+  if (markAreas && markAreas.length > 0 && series.length > 0) {
+    series[0].markArea = {
+      itemStyle: {
+        color: markAreas[0].color || "rgba(255, 173, 177, 0.4)"
+      }
+    };
+    series[0].markArea.data = markAreas.map((markArea) => {
+      return [
+        {
+          xAxis: markArea.from ? markArea.from : void 0
+        },
+        {
+          xAxis: markArea.to ? markArea.to : void 0
+        }
+      ];
+    });
+  }
+}
+var MIN_SIZE = 5;
+var MAX_SIZE = 30;
+var LEVELS = 10;
+function normalize(value, min, max, minSize = MIN_SIZE, maxSize = MAX_SIZE) {
+  if (max === min) return MIN_SIZE;
+  if (value <= min) return minSize;
+  if (value >= max) return maxSize;
+  const range = max - min;
+  const levelRange = range / LEVELS;
+  const sizeIncrement = (maxSize - minSize) / (LEVELS - 1);
+  const level = Math.floor((value - min) / levelRange);
+  const clampedLevel = Math.min(level, LEVELS - 1);
+  return minSize + clampedLevel * sizeIncrement;
+}
+
 // src/charts/options/LineControls.tsx
 import { produce as produce4 } from "immer";
 import {
-  DisclosurePanel,
+  DisclosurePanel as DisclosurePanel3,
   NewButtonGroup as ButtonGroup2,
-  Checkbox
+  Checkbox as Checkbox2
 } from "@sentio/ui-core";
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var lineStyles = [
   { label: "Solid", value: "Solid" },
   { label: "Dotted", value: "Dotted" }
@@ -3940,13 +5430,13 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
       })
     );
   };
-  return /* @__PURE__ */ jsx25(
-    DisclosurePanel,
+  return /* @__PURE__ */ jsx29(
+    DisclosurePanel3,
     {
       title: "Line style",
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx29(
           ButtonGroup2,
           {
             buttons: lineStyles,
@@ -3955,8 +5445,8 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
             small: true
           }
         ),
-        /* @__PURE__ */ jsx25(
-          Checkbox,
+        /* @__PURE__ */ jsx29(
+          Checkbox2,
           {
             label: "Smooth Curves",
             checked: config?.smooth,
@@ -3969,16 +5459,16 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
 };
 
 // src/charts/options/LabelControls.tsx
-import { useEffect as useEffect8, useMemo as useMemo9 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo10 } from "react";
 import { produce as produce5 } from "immer";
-import { Button as NewButton2, DisclosurePanel as DisclosurePanel2, HelpIcon as HelpIcon2 } from "@sentio/ui-core";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
-var initialConfig = {
+import { Button as NewButton2, DisclosurePanel as DisclosurePanel4, HelpIcon as HelpIcon2 } from "@sentio/ui-core";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+var initialConfig3 = {
   columns: [],
   alias: ""
 };
 var LabelControls = ({ config, setConfig, defaultOpen }) => {
-  useEffect8(() => {
+  useEffect9(() => {
     if (config?.columns && config.columns.length > 0 && !config.alias) {
       const aliasParts = [];
       config.columns.forEach((colConfig) => {
@@ -4003,36 +5493,36 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
   }, [config, setConfig]);
   const onAliasChanged = (alias) => {
     setConfig(
-      produce5(config ?? initialConfig, (draft) => {
+      produce5(config ?? initialConfig3, (draft) => {
         draft.alias = alias;
       })
     );
   };
-  const _defaultOpen = useMemo9(() => {
+  const _defaultOpen = useMemo10(() => {
     if (defaultOpen) {
       return true;
     }
     return config?.alias !== "" || config?.columns && config.columns.length > 0;
   }, [config, defaultOpen]);
-  return /* @__PURE__ */ jsx26(
-    DisclosurePanel2,
+  return /* @__PURE__ */ jsx30(
+    DisclosurePanel4,
     {
       title: "Label Controls",
       defaultOpen: _defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs17("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsxs17("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: [
+      children: /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs20("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsxs20("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__ */ jsx26(
+            /* @__PURE__ */ jsx30(
               HelpIcon2,
               {
-                text: /* @__PURE__ */ jsxs17("div", { className: "text-icontent text-text-foreground", children: [
-                  /* @__PURE__ */ jsx26("div", { children: "Series name override or template." }),
-                  /* @__PURE__ */ jsxs17("div", { children: [
+                text: /* @__PURE__ */ jsxs20("div", { className: "text-icontent text-text-foreground", children: [
+                  /* @__PURE__ */ jsx30("div", { children: "Series name override or template." }),
+                  /* @__PURE__ */ jsxs20("div", { children: [
                     "Ex.",
                     " ",
-                    /* @__PURE__ */ jsx26("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
+                    /* @__PURE__ */ jsx30("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
                     " ",
                     "will be replaced with the value of the contract label."
                   ] })
@@ -4040,7 +5530,7 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx30(
             "input",
             {
               type: "text",
@@ -4051,13 +5541,13 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx30(
           NewButton2,
           {
             type: "button",
             role: "link",
             onClick: () => {
-              setConfig(initialConfig);
+              setConfig(initialConfig3);
             },
             children: "Reset"
           }
@@ -4069,13 +5559,13 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
 
 // src/charts/options/PieChartControls.tsx
 import { produce as produce6 } from "immer";
-import { defaults } from "lodash";
+import { defaults as defaults3 } from "lodash";
 import {
-  Checkbox as Checkbox2,
-  DisclosurePanel as DisclosurePanel3,
+  Checkbox as Checkbox3,
+  DisclosurePanel as DisclosurePanel5,
   NewButtonGroup as ButtonGroup3
 } from "@sentio/ui-core";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var defaultConfig = {
   pieType: "Pie",
   calculation: "LAST",
@@ -4096,7 +5586,7 @@ var PieTypeItems = [
   { label: "Donut", value: "Donut" }
 ];
 function PieChartControls({ config, defaultOpen, onChange }) {
-  config = defaults(config, defaultConfig);
+  config = defaults3(config, defaultConfig);
   function onCalculationChange(cal) {
     config && onChange(produce6(config, (draft) => void (draft.calculation = cal)));
   }
@@ -4110,14 +5600,14 @@ function PieChartControls({ config, defaultOpen, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ jsx27(
-    DisclosurePanel3,
+  return /* @__PURE__ */ jsx31(
+    DisclosurePanel5,
     {
       title: "Pie Chart Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx27("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx31("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ jsx31(
           ButtonGroup3,
           {
             small: true,
@@ -4126,22 +5616,22 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             onChange: onPieTypeChange
           }
         ) }),
-        /* @__PURE__ */ jsxs18("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ jsx27("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__ */ jsx27(
+        /* @__PURE__ */ jsxs21("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ jsx31("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__ */ jsx31(
             "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__ */ jsx27("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ jsx31("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx27(
-          Checkbox2,
+        /* @__PURE__ */ jsx31(
+          Checkbox3,
           {
             checked: config?.showValue,
             onChange: (v) => toggle("showValue", v),
@@ -4149,8 +5639,8 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ jsx27(
-          Checkbox2,
+        /* @__PURE__ */ jsx31(
+          Checkbox3,
           {
             checked: config?.showPercent,
             onChange: (v) => toggle("showPercent", v),
@@ -4158,8 +5648,8 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ jsx27(
-          Checkbox2,
+        /* @__PURE__ */ jsx31(
+          Checkbox3,
           {
             checked: config?.absValue,
             onChange: (v) => toggle("absValue", v),
@@ -4174,9 +5664,9 @@ function PieChartControls({ config, defaultOpen, onChange }) {
 
 // src/charts/options/BarGaugeControls.tsx
 import { produce as produce7 } from "immer";
-import { defaults as defaults2 } from "lodash";
-import { DisclosurePanel as DisclosurePanel4 } from "@sentio/ui-core";
-import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { defaults as defaults4 } from "lodash";
+import { DisclosurePanel as DisclosurePanel6 } from "@sentio/ui-core";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var defaultConfig2 = {
   direction: "HORIZONTAL",
   calculation: "LAST",
@@ -4197,16 +5687,16 @@ var CalculationItems2 = [
   { label: "Max", value: "MAX" },
   { label: "Min", value: "MIN" }
 ];
-var sortByItems = [
+var sortByItems2 = [
   { label: "Name", value: "ByName" },
   { label: "Value", value: "ByValue" }
 ];
-var orderItems = [
+var orderItems2 = [
   { label: "Ascendant", value: "false" },
   { label: "Descendant", value: "true" }
 ];
 function BarGaugeControls({ config, defaultOpen, onChange }) {
-  config = defaults2(config, defaultConfig2);
+  config = defaults4(config, defaultConfig2);
   function onCalculationChange(cal) {
     config && onChange(produce7(config, (draft) => void (draft.calculation = cal)));
   }
@@ -4229,62 +5719,62 @@ function BarGaugeControls({ config, defaultOpen, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ jsx28(
-    DisclosurePanel4,
+  return /* @__PURE__ */ jsx32(
+    DisclosurePanel6,
     {
       title: "Bar Gauge Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxs19("div", { className: "shadow-xs  flex rounded-md", children: [
-          /* @__PURE__ */ jsx28("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__ */ jsx28(
+      children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs22("div", { className: "shadow-xs  flex rounded-md", children: [
+          /* @__PURE__ */ jsx32("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__ */ jsx32(
             "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__ */ jsx28("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ jsx32("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ jsx28("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__ */ jsx28(
+        /* @__PURE__ */ jsxs22("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ jsx32("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__ */ jsx32(
             "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__ */ jsx28("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ jsx32("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs19("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ jsx28("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__ */ jsx28(
+        /* @__PURE__ */ jsxs22("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ jsx32("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__ */ jsx32(
             "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__ */ jsx28("option", { value: d.value, children: d.label }, d.value);
+              children: sortByItems2.map((d) => {
+                return /* @__PURE__ */ jsx32("option", { value: d.value, children: d.label }, d.value);
               })
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx32(
             "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__ */ jsx28("option", { value: d.value + "", children: d.label }, d.label);
+              children: orderItems2.map((d) => {
+                return /* @__PURE__ */ jsx32("option", { value: d.value + "", children: d.label }, d.label);
               })
             }
           )
@@ -4296,30 +5786,13 @@ function BarGaugeControls({ config, defaultOpen, onChange }) {
 
 // src/charts/options/ValueOptions.tsx
 import { produce as produce9 } from "immer";
-import { ComboInput, classNames as classNames9 } from "@sentio/ui-core";
-
-// src/charts/options/controls-ui.tsx
-import { classNames as classNames7 } from "@sentio/ui-core";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var AddonLabel = ({
-  className,
-  children
-}) => /* @__PURE__ */ jsx29(
-  "span",
-  {
-    className: classNames7(
-      "sm:text-icontent border-main inline-flex items-center whitespace-nowrap bg-gray-50",
-      className
-    ),
-    children
-  }
-);
+import { ComboInput, classNames as classNames10 } from "@sentio/ui-core";
 
 // src/charts/options/ValueStringMapping.tsx
 import { LuPlus, LuTrash2 } from "react-icons/lu";
-import { Button, classNames as classNames8 } from "@sentio/ui-core";
+import { Button as Button3, classNames as classNames9 } from "@sentio/ui-core";
 import { produce as produce8 } from "immer";
-import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 var operators = {
   ">": "greater than",
   ">=": "greater or equal",
@@ -4329,17 +5802,17 @@ var operators = {
   "<=": "less or equal"
 };
 var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ jsx30("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ jsxs20("div", { className: "flex h-full w-full items-center", children: [
-    /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx33("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ jsxs23("div", { className: "flex h-full w-full items-center", children: [
+    /* @__PURE__ */ jsx33(
       "div",
       {
-        className: classNames8(
+        className: classNames9(
           "w-px bg-gray-300",
           isLast ? "h-1/2 self-start" : index === 0 ? "h-full self-end" : "h-full"
         )
       }
     ),
-    /* @__PURE__ */ jsx30("div", { className: "h-px w-3 bg-gray-300" })
+    /* @__PURE__ */ jsx33("div", { className: "h-px w-3 bg-gray-300" })
   ] }) });
 };
 function ValueStringMapping({ rules, onChange }) {
@@ -4370,31 +5843,31 @@ function ValueStringMapping({ rules, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ jsxs20("div", { className: "flex w-full flex-col rounded-md py-2", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex w-full flex-col rounded-md py-2", children: [
     (rules || []).map((rule, index) => {
       const isLast = index === (rules || []).length - 1;
-      return /* @__PURE__ */ jsxs20(
+      return /* @__PURE__ */ jsxs23(
         "div",
         {
           className: "text-text-foreground flex h-10 items-center py-1",
           children: [
             renderTreeLine(index, isLast),
-            /* @__PURE__ */ jsx30("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx33("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ jsx33(
               "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__ */ jsxs20("option", { value: op, children: [
+                  return /* @__PURE__ */ jsxs23("option", { value: op, children: [
                     "is ",
                     display
                   ] }, op);
                 })
               }
             ),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx33(
               "input",
               {
                 type: "text",
@@ -4408,8 +5881,8 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx30("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx33("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
+            /* @__PURE__ */ jsx33(
               "input",
               {
                 type: "text",
@@ -4423,14 +5896,14 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx33(
               "button",
               {
                 type: "button",
                 className: "mx-2",
                 "aria-label": "remove",
                 onClick: () => removeRule(index),
-                children: /* @__PURE__ */ jsx30(
+                children: /* @__PURE__ */ jsx33(
                   LuTrash2,
                   {
                     className: "icon text-text-foreground-disabled",
@@ -4444,8 +5917,8 @@ function ValueStringMapping({ rules, onChange }) {
         index
       );
     }),
-    /* @__PURE__ */ jsxs20(
-      Button,
+    /* @__PURE__ */ jsxs23(
+      Button3,
       {
         type: "button",
         role: "secondary",
@@ -4453,7 +5926,7 @@ function ValueStringMapping({ rules, onChange }) {
         "aria-label": "remove",
         onClick: addRule,
         children: [
-          /* @__PURE__ */ jsx30(LuPlus, { className: classNames8("h-4 w-4"), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx33(LuPlus, { className: classNames9("h-4 w-4"), "aria-hidden": "true" }),
           "Add Formatting Rule"
         ]
       }
@@ -4462,7 +5935,7 @@ function ValueStringMapping({ rules, onChange }) {
 }
 
 // src/charts/options/ValueOptions.tsx
-import { Fragment as Fragment8, jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var ValueFormatters = [
   { label: "Number", value: "NumberFormatter" },
   { label: "Date", value: "DateFormatter" },
@@ -4491,7 +5964,7 @@ var CurrencySymbols = [
 var AddonLabel2 = ({
   className,
   children
-}) => /* @__PURE__ */ jsx31(AddonLabel, { className: classNames9("px-3", className), children });
+}) => /* @__PURE__ */ jsx34(AddonLabel, { className: classNames10("px-3", className), children });
 var ValueOptions = ({
   config,
   onChange,
@@ -4558,9 +6031,9 @@ var ValueOptions = ({
   function numberAddons(style) {
     switch (style) {
       case "None":
-        return /* @__PURE__ */ jsxs21(Fragment8, { children: [
-          /* @__PURE__ */ jsx31(AddonLabel2, { className: "border border-l-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+          /* @__PURE__ */ jsx34(AddonLabel2, { className: "border border-l-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ jsx34(
             "input",
             {
               disabled: true,
@@ -4571,9 +6044,9 @@ var ValueOptions = ({
         ] });
       case "Percent":
       case "Standard":
-        return /* @__PURE__ */ jsxs21(Fragment8, { children: [
-          /* @__PURE__ */ jsx31(AddonLabel2, { className: "border border-x-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+          /* @__PURE__ */ jsx34(AddonLabel2, { className: "border border-x-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ jsx34(
             "input",
             {
               type: "number",
@@ -4587,9 +6060,9 @@ var ValueOptions = ({
           )
         ] });
       case "Currency":
-        return /* @__PURE__ */ jsxs21(Fragment8, { children: [
-          /* @__PURE__ */ jsx31(AddonLabel2, { className: "border border-r-0", children: "Symbol" }),
-          /* @__PURE__ */ jsx31("div", { className: "w-28 ", children: /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+          /* @__PURE__ */ jsx34(AddonLabel2, { className: "border border-r-0", children: "Symbol" }),
+          /* @__PURE__ */ jsx34("div", { className: "w-28 ", children: /* @__PURE__ */ jsx34(
             ComboInput,
             {
               onChange: onChangeSymbol,
@@ -4602,8 +6075,8 @@ var ValueOptions = ({
               value: config?.currencySymbol
             }
           ) }),
-          /* @__PURE__ */ jsx31(AddonLabel2, { className: "border", children: "Precision" }),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx34(AddonLabel2, { className: "border", children: "Precision" }),
+          /* @__PURE__ */ jsx34(
             "input",
             {
               type: "number",
@@ -4618,9 +6091,9 @@ var ValueOptions = ({
           )
         ] });
       default:
-        return /* @__PURE__ */ jsxs21(Fragment8, { children: [
-          /* @__PURE__ */ jsx31(AddonLabel2, { className: "border border-x-0", children: "Max significant digits" }),
-          /* @__PURE__ */ jsx31(
+        return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+          /* @__PURE__ */ jsx34(AddonLabel2, { className: "border border-x-0", children: "Max significant digits" }),
+          /* @__PURE__ */ jsx34(
             "input",
             {
               type: "number",
@@ -4635,62 +6108,62 @@ var ValueOptions = ({
         ] });
     }
   }
-  return /* @__PURE__ */ jsxs21(Fragment8, { children: [
-    /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsxs21("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx31(AddonLabel2, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
-      /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs24(Fragment9, { children: [
+    /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsxs24("div", { className: "flex", children: [
+      /* @__PURE__ */ jsx34(AddonLabel2, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
+      /* @__PURE__ */ jsx34(
         "select",
         {
           value: config.valueFormatter,
-          className: classNames9(
+          className: classNames10(
             "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__ */ jsx31("option", { value: d.value, children: d.label }, d.value);
+            return /* @__PURE__ */ jsx34("option", { value: d.value, children: d.label }, d.value);
           })
         }
       ),
-      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ jsxs21(Fragment8, { children: [
-        /* @__PURE__ */ jsx31(AddonLabel2, { className: "border border-l-0 border-r-0", children: "Style" }),
-        /* @__PURE__ */ jsxs21(
+      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ jsxs24(Fragment9, { children: [
+        /* @__PURE__ */ jsx34(AddonLabel2, { className: "border border-l-0 border-r-0", children: "Style" }),
+        /* @__PURE__ */ jsxs24(
           "select",
           {
             value: config.style,
             className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1 pl-4 pr-7 focus:ring-0",
             onChange: (e) => onStyleChange(e.target.value),
             children: [
-              /* @__PURE__ */ jsx31("option", { value: "None", children: "None" }),
-              /* @__PURE__ */ jsx31("option", { value: "Compact", children: "Compact" }),
-              /* @__PURE__ */ jsx31("option", { value: "Standard", children: "Standard" }),
-              /* @__PURE__ */ jsx31("option", { value: "Scientific", children: "Scientific" }),
-              /* @__PURE__ */ jsx31("option", { value: "Percent", children: "Percent" }),
-              /* @__PURE__ */ jsx31("option", { value: "Currency", children: "Currency" })
+              /* @__PURE__ */ jsx34("option", { value: "None", children: "None" }),
+              /* @__PURE__ */ jsx34("option", { value: "Compact", children: "Compact" }),
+              /* @__PURE__ */ jsx34("option", { value: "Standard", children: "Standard" }),
+              /* @__PURE__ */ jsx34("option", { value: "Scientific", children: "Scientific" }),
+              /* @__PURE__ */ jsx34("option", { value: "Percent", children: "Percent" }),
+              /* @__PURE__ */ jsx34("option", { value: "Currency", children: "Currency" })
             ]
           }
         ),
         config.style && numberAddons(config.style)
       ] }),
-      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ jsxs21(Fragment8, { children: [
-        /* @__PURE__ */ jsx31(AddonLabel2, { className: "border border-l-0", children: "Date format" }),
-        /* @__PURE__ */ jsx31(
+      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ jsxs24(Fragment9, { children: [
+        /* @__PURE__ */ jsx34(AddonLabel2, { className: "border border-l-0", children: "Date format" }),
+        /* @__PURE__ */ jsx34(
           "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__ */ jsx31("option", { value: d.value, children: d.label }, d.value);
+              return /* @__PURE__ */ jsx34("option", { value: d.value, children: d.label }, d.value);
             })
           }
         )
       ] })
     ] }) }),
-    (showPrefix || showSuffix) && /* @__PURE__ */ jsx31("div", { children: /* @__PURE__ */ jsxs21("div", { className: "mt-2 flex items-center gap-4", children: [
-      showPrefix && /* @__PURE__ */ jsxs21("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__ */ jsx31("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
-        /* @__PURE__ */ jsx31(
+    (showPrefix || showSuffix) && /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsxs24("div", { className: "mt-2 flex items-center gap-4", children: [
+      showPrefix && /* @__PURE__ */ jsxs24("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__ */ jsx34("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             type: "text",
@@ -4701,9 +6174,9 @@ var ValueOptions = ({
           }
         )
       ] }),
-      showSuffix && /* @__PURE__ */ jsxs21("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__ */ jsx31("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
-        /* @__PURE__ */ jsx31(
+      showSuffix && /* @__PURE__ */ jsxs24("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__ */ jsx34("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             type: "text",
@@ -4715,7 +6188,7 @@ var ValueOptions = ({
         )
       ] })
     ] }) }),
-    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ jsx31(
+    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ jsx34(
       ValueStringMapping,
       {
         rules: config.mappingRules || [],
@@ -4726,10 +6199,10 @@ var ValueOptions = ({
 };
 
 // src/charts/options/ValueControls.tsx
-import { defaults as defaults3 } from "lodash";
-import { Checkbox as Checkbox3, DisclosurePanel as DisclosurePanel5 } from "@sentio/ui-core";
+import { defaults as defaults5 } from "lodash";
+import { Checkbox as Checkbox4, DisclosurePanel as DisclosurePanel7 } from "@sentio/ui-core";
 import { produce as produce10 } from "immer";
-import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var defaultConfig4 = {
   valueFormatter: "NumberFormatter",
   showValueLabel: false,
@@ -4747,7 +6220,7 @@ var ValueControls = ({
   showPrefix,
   showSuffix
 }) => {
-  config = defaults3(config || {}, defaultConfig4);
+  config = defaults5(config || {}, defaultConfig4);
   function toggleShowValueLabel(checked) {
     config && onChange(
       produce10(config, (draft) => void (draft.showValueLabel = checked))
@@ -4756,14 +6229,14 @@ var ValueControls = ({
   function toggleTooltipTotal(checked) {
     config && onChange(produce10(config, (draft) => void (draft.tooltipTotal = checked)));
   }
-  return /* @__PURE__ */ jsxs22(
-    DisclosurePanel5,
+  return /* @__PURE__ */ jsxs25(
+    DisclosurePanel7,
     {
       title: "Value Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx35(
           ValueOptions,
           {
             onChange,
@@ -4773,17 +6246,17 @@ var ValueControls = ({
             showSuffix
           }
         ),
-        /* @__PURE__ */ jsxs22("div", { className: "mt-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx32(
-            Checkbox3,
+        /* @__PURE__ */ jsxs25("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx35(
+            Checkbox4,
             {
               checked: config?.showValueLabel,
               onChange: toggleShowValueLabel,
               label: "Show value label"
             }
           ),
-          /* @__PURE__ */ jsx32(
-            Checkbox3,
+          /* @__PURE__ */ jsx35(
+            Checkbox4,
             {
               checked: config?.tooltipTotal,
               onChange: toggleTooltipTotal,
@@ -4796,290 +6269,11 @@ var ValueControls = ({
   );
 };
 
-// src/charts/options/YaxisControls.tsx
-import { defaults as defaults4 } from "lodash";
-import { Button as Button2, Checkbox as Checkbox4, DisclosurePanel as DisclosurePanel6 } from "@sentio/ui-core";
-import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
-var initialConfig2 = {
-  yAxis: {
-    min: "",
-    max: "",
-    scale: true,
-    stack: ""
-  }
-};
-function YaxisControls({
-  yAxis,
-  setYAxis,
-  defaultOpen,
-  columnSelect,
-  supportSetName = true,
-  supportSetMinMax = true,
-  supportStackSeries = true,
-  supportAlwaysShowZero = true,
-  supportReset = true,
-  panelTitle = "Y-Axis Controls"
-}) {
-  yAxis = defaults4(yAxis || {}, initialConfig2.yAxis);
-  const onChangeInput = (field) => (event) => {
-    const { value } = event.target;
-    setYAxis({
-      ...yAxis,
-      [field]: value || void 0,
-      scale: field == "min" && value > "0" ? true : yAxis?.scale
-    });
-  };
-  const onToggleZero = (checked) => {
-    setYAxis({ ...yAxis, scale: !checked, min: checked ? "" : yAxis?.min });
-  };
-  const onClickResetYAxis = () => {
-    setYAxis(initialConfig2.yAxis);
-  };
-  const onToggleStack = (checked) => {
-    setYAxis({ ...yAxis, stacked: checked ? "samesign" : "" });
-  };
-  const minMaxLabelCls = "inline-flex items-center border border-r-0 sm:text-icontent border-main  bg-gray-50 px-2 rounded-l-md";
-  const minMaxInputCls = "border focus:border-primary-500 rounded-r-md sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30";
-  return /* @__PURE__ */ jsx33(
-    DisclosurePanel6,
-    {
-      title: panelTitle,
-      defaultOpen,
-      containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs23("div", { className: "text-icontent flex flex-wrap gap-[10px]", children: [
-        supportSetName && /* @__PURE__ */ jsxs23("label", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx33(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Name" }),
-          /* @__PURE__ */ jsx33(
-            "input",
-            {
-              type: "text",
-              className: "focus:border-primary-500 sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 w-40 rounded-r-md border",
-              value: yAxis?.name,
-              placeholder: "Axis Name",
-              onChange: onChangeInput("name")
-            }
-          )
-        ] }),
-        columnSelect && /* @__PURE__ */ jsxs23("span", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx33(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Column" }),
-          columnSelect
-        ] }),
-        supportSetMinMax && /* @__PURE__ */ jsxs23(Fragment9, { children: [
-          /* @__PURE__ */ jsxs23("label", { className: "inline-flex h-8", children: [
-            /* @__PURE__ */ jsx33("span", { className: minMaxLabelCls, children: "Min" }),
-            /* @__PURE__ */ jsx33(
-              "input",
-              {
-                type: "text",
-                className: minMaxInputCls,
-                style: { width: "10em" },
-                value: yAxis.min,
-                placeholder: "Auto",
-                onChange: onChangeInput("min")
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs23("label", { className: "inline-flex h-8", children: [
-            /* @__PURE__ */ jsx33("span", { className: minMaxLabelCls, children: "Max" }),
-            /* @__PURE__ */ jsx33(
-              "input",
-              {
-                type: "text",
-                className: minMaxInputCls,
-                style: { width: "10em" },
-                value: yAxis.max,
-                placeholder: "Auto",
-                onChange: onChangeInput("max")
-              }
-            )
-          ] })
-        ] }),
-        supportStackSeries && /* @__PURE__ */ jsx33(
-          Checkbox4,
-          {
-            checked: !!yAxis?.stacked,
-            onChange: onToggleStack,
-            label: "Stack series"
-          }
-        ),
-        supportAlwaysShowZero && /* @__PURE__ */ jsx33(
-          Checkbox4,
-          {
-            checked: !yAxis.scale,
-            onChange: onToggleZero,
-            label: "Always show zero"
-          }
-        ),
-        supportReset && /* @__PURE__ */ jsx33(Button2, { type: "button", role: "link", onClick: onClickResetYAxis, children: "Reset" })
-      ] })
-    }
-  );
-}
-
-// src/charts/options/XaxisControls.tsx
-import {
-  Button as Button3,
-  DisclosurePanel as DisclosurePanel7,
-  PopoverTooltip,
-  Select
-} from "@sentio/ui-core";
-import { LuInfo } from "react-icons/lu";
-import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
-var TypeSelect = Select;
-var SortSelect = Select;
-var OrderSelect = Select;
-var sortByItems2 = [
-  { label: "Name", value: "ByName" },
-  { label: "Value", value: "ByValue" }
-];
-var orderItems2 = [
-  { label: "Ascendant", value: false },
-  { label: "Descendant", value: true }
-];
-var XAxisControls = ({
-  xAxis,
-  setXAxis,
-  defaultOpen,
-  columnSelect,
-  columnIsNonTime,
-  panelTitle = "X-Axis Controls",
-  supportName = true,
-  supportSort,
-  supportSetType
-}) => {
-  const onChangeInput = (field) => (event) => {
-    const { value } = event.target;
-    setXAxis({ ...xAxis, [field]: value || void 0 });
-  };
-  const onClickResetXAxis = () => {
-    setXAxis(void 0);
-  };
-  const isXAixsNoneTime = xAxis && xAxis.column && columnIsNonTime;
-  return /* @__PURE__ */ jsx34(
-    DisclosurePanel7,
-    {
-      title: panelTitle,
-      defaultOpen,
-      containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs24("div", { className: "text-icontent flex flex-wrap gap-[10px]", children: [
-        supportName && /* @__PURE__ */ jsxs24("label", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx34(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Name" }),
-          /* @__PURE__ */ jsx34(
-            "input",
-            {
-              type: "text",
-              className: "sm:text-icontent border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 w-40 rounded-r-md",
-              value: xAxis?.name,
-              placeholder: "Axis Name",
-              onChange: onChangeInput("name")
-            }
-          )
-        ] }),
-        supportSetType && /* @__PURE__ */ jsxs24("span", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsxs24("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2", children: [
-            "X-Axis Type",
-            " ",
-            /* @__PURE__ */ jsx34(
-              PopoverTooltip,
-              {
-                strategy: "fixed",
-                hideArrow: true,
-                placementOption: "bottom",
-                text: /* @__PURE__ */ jsxs24("div", { className: "text-text-foreground max-w-[300px] p-2", children: [
-                  /* @__PURE__ */ jsx34("span", { className: "font-medium", children: "Discrete axis" }),
-                  " displays",
-                  " ",
-                  /* @__PURE__ */ jsx34("span", { className: "text-primary-600", children: "discrete values evenly" }),
-                  ", while ",
-                  /* @__PURE__ */ jsx34("span", { className: "font-medium", children: "Continuous axis" }),
-                  " ",
-                  "shows",
-                  " ",
-                  /* @__PURE__ */ jsx34("span", { className: "text-primary-600", children: "continuous time series" }),
-                  " ",
-                  "and",
-                  " ",
-                  /* @__PURE__ */ jsx34("span", { className: "text-primary-600", children: "auto-fills missing time points" })
-                ] }),
-                children: /* @__PURE__ */ jsx34(LuInfo, { className: "text-text-foreground-secondary h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx34(
-            TypeSelect,
-            {
-              className: "h-8 w-40",
-              buttonClassName: "h-full border-main rounded-l-none items-center inline-flex items-center",
-              value: xAxis?.type || "time",
-              onChange: (val) => {
-                setXAxis({ ...xAxis, type: val });
-              },
-              options: [
-                { label: "Continuous", value: "time" },
-                { label: "Discrete", value: "category" }
-              ]
-            }
-          )
-        ] }),
-        columnSelect && /* @__PURE__ */ jsxs24("span", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx34(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Column" }),
-          columnSelect
-        ] }),
-        supportSort && isXAixsNoneTime && /* @__PURE__ */ jsxs24("span", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx34(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Sort By" }),
-          /* @__PURE__ */ jsx34(
-            SortSelect,
-            {
-              className: "h-8 w-20 leading-8",
-              buttonClassName: "h-full border-main rounded-none inline-flex items-center",
-              options: sortByItems2,
-              value: xAxis?.sort?.sortBy,
-              onChange: (value) => {
-                setXAxis({
-                  ...xAxis,
-                  sort: { ...xAxis?.sort, sortBy: value }
-                });
-              },
-              placeholder: "Sort By"
-            }
-          ),
-          /* @__PURE__ */ jsx34(
-            OrderSelect,
-            {
-              className: "h-8 w-40 leading-8",
-              buttonClassName: "h-full border-l-0 border-main rounded-l-none inline-flex items-center",
-              options: orderItems2,
-              value: xAxis?.sort?.orderDesc,
-              onChange: (value) => {
-                setXAxis({
-                  ...xAxis,
-                  sort: { ...xAxis?.sort, orderDesc: value }
-                });
-              },
-              placeholder: "Sort Order"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx34(
-          Button3,
-          {
-            type: "button",
-            role: "link",
-            onClick: onClickResetXAxis,
-            className: "h-8",
-            children: "Reset"
-          }
-        )
-      ] })
-    }
-  );
-};
-
 // src/charts/options/MarkerControls.tsx
 import { produce as produce11 } from "immer";
 import { LuMinus, LuPlus as LuPlus2 } from "react-icons/lu";
 import { Button as Button4, DisclosurePanel as DisclosurePanel8 } from "@sentio/ui-core";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 var labelCls = "inline-flex items-center border border-r-0 sm:text-icontent border-main  bg-gray-50 px-2 rounded-l-md";
 var inputCls = "border focus:border-primary-500 rounded-r-md sm:text-icontent border-main w-28 hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30";
 function MarkerInput({
@@ -5096,25 +6290,25 @@ function MarkerInput({
       })
     );
   };
-  return /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-[10px]", children: [
-    /* @__PURE__ */ jsxs25("label", { className: "inline-flex h-8", children: [
-      /* @__PURE__ */ jsxs25("span", { className: labelCls, children: [
-        /* @__PURE__ */ jsx35("span", { className: "pr-2", children: label }),
-        /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-[10px]", children: [
+    /* @__PURE__ */ jsxs26("label", { className: "inline-flex h-8", children: [
+      /* @__PURE__ */ jsxs26("span", { className: labelCls, children: [
+        /* @__PURE__ */ jsx36("span", { className: "pr-2", children: label }),
+        /* @__PURE__ */ jsxs26(
           "select",
           {
             className: "sm:text-ilabel border-main text-text-foreground inline-flex h-full items-center border border-b-0 border-t-0 bg-gray-50 p-0 pl-4 pr-7 focus:border-transparent focus:ring-inset",
             value: marker.type,
             onChange: (e) => _onChange("type", e.target.value),
             children: [
-              /* @__PURE__ */ jsx35("option", { value: "LINE", children: "horizontal line" }),
-              /* @__PURE__ */ jsx35("option", { value: "LINEX", children: "vertical line" })
+              /* @__PURE__ */ jsx36("option", { value: "LINE", children: "horizontal line" }),
+              /* @__PURE__ */ jsx36("option", { value: "LINEX", children: "vertical line" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx35("span", { className: "pl-2", children: "at" })
+        /* @__PURE__ */ jsx36("span", { className: "pl-2", children: "at" })
       ] }),
-      marker.type === "LINEX" ? /* @__PURE__ */ jsx35(
+      marker.type === "LINEX" ? /* @__PURE__ */ jsx36(
         "input",
         {
           className: inputCls,
@@ -5123,7 +6317,7 @@ function MarkerInput({
           placeholder: "YYYY-MM-DD",
           onChange: (e) => _onChange("valueX", e.target.value)
         }
-      ) : /* @__PURE__ */ jsx35(
+      ) : /* @__PURE__ */ jsx36(
         "input",
         {
           className: inputCls,
@@ -5133,11 +6327,11 @@ function MarkerInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs25("label", { className: "inline-flex h-8", children: [
-      /* @__PURE__ */ jsx35("span", { className: labelCls, children: "Color" }),
-      /* @__PURE__ */ jsxs25("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx35("div", { className: "absolute inset-0 flex w-8 items-center justify-center", children: /* @__PURE__ */ jsx35("div", { className: "h-4 w-4", style: { background: marker.color } }) }),
-        /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsxs26("label", { className: "inline-flex h-8", children: [
+      /* @__PURE__ */ jsx36("span", { className: labelCls, children: "Color" }),
+      /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 flex w-8 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "h-4 w-4", style: { background: marker.color } }) }),
+        /* @__PURE__ */ jsx36(
           "input",
           {
             className: inputCls + " pl-8",
@@ -5148,9 +6342,9 @@ function MarkerInput({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs25("label", { className: "inline-flex h-8", children: [
-      /* @__PURE__ */ jsx35("span", { className: labelCls, children: "Label" }),
-      /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsxs26("label", { className: "inline-flex h-8", children: [
+      /* @__PURE__ */ jsx36("span", { className: labelCls, children: "Label" }),
+      /* @__PURE__ */ jsx36(
         "input",
         {
           className: inputCls,
@@ -5160,14 +6354,14 @@ function MarkerInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
         className: "ml-2 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-gray-800 hover:bg-red-600",
         "aria-label": "Remove marker",
         onClick: onRemove,
-        children: /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx36(
           LuMinus,
           {
             className: "dark:text-default-bg h-3 w-3 text-white",
@@ -5202,14 +6396,14 @@ function MarkerControls({ markers, onChange }) {
       })
     );
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     DisclosurePanel8,
     {
       title: "Markers",
       containerClassName: "w-full bg-default-bg",
       defaultOpen: true,
-      children: /* @__PURE__ */ jsxs25("div", { className: "space-y-2", children: [
-        _markers.map((marker, index) => /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+        _markers.map((marker, index) => /* @__PURE__ */ jsx36(
           MarkerInput,
           {
             marker,
@@ -5219,8 +6413,8 @@ function MarkerControls({ markers, onChange }) {
           },
           index
         )),
-        /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsxs25(Button4, { type: "button", onClick: onAdd, children: [
-          /* @__PURE__ */ jsx35(LuPlus2, { className: "h-4 w-4", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsxs26(Button4, { type: "button", onClick: onAdd, children: [
+          /* @__PURE__ */ jsx36(LuPlus2, { className: "h-4 w-4", "aria-hidden": "true" }),
           "Add Marker"
         ] }) })
       ] })
@@ -5230,9 +6424,9 @@ function MarkerControls({ markers, onChange }) {
 
 // src/charts/options/DataControls.tsx
 import { produce as produce12 } from "immer";
-import { defaults as defaults5 } from "lodash";
+import { defaults as defaults6 } from "lodash";
 import { DisclosurePanel as DisclosurePanel9 } from "@sentio/ui-core";
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
 var defaultConfig5 = {
   seriesLimit: void 0
 };
@@ -5242,7 +6436,7 @@ function DataControls({
   chartConfig,
   defaultSeriesLimit = 20
 }) {
-  const config = defaults5(chartConfig?.dataConfig, defaultConfig5);
+  const config = defaults6(chartConfig?.dataConfig, defaultConfig5);
   const currentSeriesLimit = config?.seriesLimit || chartConfig?.tableConfig?.rowLimit;
   function onSeriesLimitChange(e) {
     const value = parseInt(e.target.value);
@@ -5260,15 +6454,15 @@ function DataControls({
       e.preventDefault();
     }
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     DisclosurePanel9,
     {
       title: "Data Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs26("div", { className: "flex h-8", children: [
-        /* @__PURE__ */ jsx36(AddonLabel, { className: "rounded-l-md border border-r-0 px-3", children: "Max Series Limit" }),
-        /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsxs27("div", { className: "flex h-8", children: [
+        /* @__PURE__ */ jsx37(AddonLabel, { className: "rounded-l-md border border-r-0 px-3", children: "Max Series Limit" }),
+        /* @__PURE__ */ jsx37(
           "input",
           {
             type: "number",
@@ -5287,10 +6481,10 @@ function DataControls({
 
 // src/charts/options/ScatterControls.tsx
 import { produce as produce13 } from "immer";
-import { defaults as defaults6 } from "lodash";
-import { useCallback as useCallback4 } from "react";
+import { defaults as defaults7 } from "lodash";
+import { useCallback as useCallback5 } from "react";
 import { DisclosurePanel as DisclosurePanel10 } from "@sentio/ui-core";
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
 var defaultConfig6 = {
   minSize: 5,
   maxSize: 30
@@ -5302,57 +6496,57 @@ function ScatterControls({
   columnSelect,
   colorPicker
 }) {
-  config = defaults6(config, defaultConfig6);
-  const onSymbolSizeColumnChange = useCallback4(
+  config = defaults7(config, defaultConfig6);
+  const onSymbolSizeColumnChange = useCallback5(
     (column) => {
       config && onChange(produce13(config, (draft) => void (draft.symbolSize = column)));
     },
     [config, onChange]
   );
-  const onSymbolColorChange = useCallback4(
+  const onSymbolColorChange = useCallback5(
     (color) => {
       config && onChange(produce13(config, (draft) => void (draft.color = color)));
     },
     [config, onChange]
   );
-  const onMinSizeChange = useCallback4(
+  const onMinSizeChange = useCallback5(
     (event) => {
       const value = parseInt(event.target.value) || 5;
       config && onChange(produce13(config, (draft) => void (draft.minSize = value)));
     },
     [config, onChange]
   );
-  const onMaxSizeChange = useCallback4(
+  const onMaxSizeChange = useCallback5(
     (event) => {
       const value = parseInt(event.target.value) || 50;
       config && onChange(produce13(config, (draft) => void (draft.maxSize = value)));
     },
     [config, onChange]
   );
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     DisclosurePanel10,
     {
       title: "Scatter Chart Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-4", children: [
-        columnSelect && /* @__PURE__ */ jsxs27("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx37(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Size By Column" }),
+      children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-4", children: [
+        columnSelect && /* @__PURE__ */ jsxs28("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx38(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Size By Column" }),
           columnSelect({
             value: config.symbolSize,
             onChange: onSymbolSizeColumnChange
           })
         ] }),
-        colorPicker && /* @__PURE__ */ jsxs27("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx37(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Size Color Mapping" }),
+        colorPicker && /* @__PURE__ */ jsxs28("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx38(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Size Color Mapping" }),
           colorPicker({
             value: config.color,
             onChange: onSymbolColorChange
           })
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx37(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Min Size" }),
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs28("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx38(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Min Size" }),
+          /* @__PURE__ */ jsx38(
             "input",
             {
               name: "minSize",
@@ -5365,9 +6559,9 @@ function ScatterControls({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs27("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ jsx37(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Max Size" }),
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs28("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsx38(AddonLabel, { className: "rounded-l-md border border-r-0 px-2", children: "Max Size" }),
+          /* @__PURE__ */ jsx38(
             "input",
             {
               name: "maxSize",
@@ -5422,6 +6616,7 @@ export {
   ScatterIcon_default as ScatterIcon,
   SystemLabels,
   TableIcon_default as TableIcon,
+  TimeSeriesChart,
   ValueControls,
   ValueFormatters,
   ValueOptions,