@sentio/ui-dashboard 0.2.4 → 0.2.6

package/dist/index.js

@@ -38,6 +38,7 @@ __export(index_exports, {
   BarGuageIcon: () => BarGuageIcon_default,
   BarIcon: () => BarIcon_default,
   ChartLegend: () => ChartLegend,
+  ChartTooltip: () => ChartTooltip,
   ChartTypeButtonGroup: () => ChartTypeButtonGroup,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
@@ -50,12 +51,14 @@ __export(index_exports, {
   LabelsInput: () => LabelsInput,
   LineControls: () => LineControls,
   LineIcon: () => LineIcon_default,
+  PieChart: () => PieChart2,
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
   QueryValueIcon: () => QueryValueIcon_default,
   ReactEChartsBase: () => ReactEChartsBase,
   RefreshButton: () => RefreshButton,
   RefreshContext: () => RefreshContext,
+  ScatterChartTooltip: () => ScatterChartTooltip,
   ScatterIcon: () => ScatterIcon_default,
   SystemLabels: () => SystemLabels,
   TableIcon: () => TableIcon_default,
@@ -3042,10 +3045,688 @@ var ChartTypeButtonGroup = ({
   ) });
 };
 
-// src/charts/options/LineControls.tsx
-var import_immer4 = require("immer");
+// src/charts/ChartTooltip.tsx
+var import_react15 = require("react");
+var import_dayjs = __toESM(require("dayjs"));
+var import_utc = __toESM(require("dayjs/plugin/utc"));
+var import_timezone = __toESM(require("dayjs/plugin/timezone"));
+var import_lodash3 = require("lodash");
+var import_bigdecimal = __toESM(require("@sentio/bigdecimal"));
+var import_lu3 = require("react-icons/lu");
 var import_ui_core9 = require("@sentio/ui-core");
+
+// src/charts/duration.ts
+var longUnits = {
+  s: "seconds",
+  m: "minutes",
+  h: "hours",
+  d: "days",
+  w: "weeks",
+  M: "months",
+  y: "years"
+};
+function durationToLongString(d) {
+  const u = longUnits[d.unit ?? ""] ?? "";
+  return Number(d.value) === 1 ? u.replace(/s$/, "") : u;
+}
+
+// src/charts/ChartTooltip.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+import_dayjs.default.extend(import_utc.default);
+import_dayjs.default.extend(import_timezone.default);
+function isValidValue(value, includeZero) {
+  if (includeZero) {
+    return Number.isFinite(value);
+  } else {
+    return Number.isFinite(value) && value !== 0;
+  }
+}
+function ChartTooltip({
+  data,
+  numberFormatter,
+  compareTimeDuration,
+  highlightSeriesId,
+  title,
+  showTotal,
+  onViewLogs,
+  viewLogDisabled,
+  onViewUsers,
+  viewUsersDisabled,
+  isFixed
+}) {
+  const {
+    series,
+    hasCompare,
+    hasCurrent,
+    currentTime,
+    compareTime,
+    markers,
+    compareMarkers,
+    total,
+    compareTotal
+  } = (0, import_react15.useMemo)(() => {
+    const params = (0, import_lodash3.sortBy)(data, (p) => -p.value[1]);
+    const hasCompare2 = (0, import_lodash3.some)(
+      params,
+      (param) => param.seriesId.endsWith("_compare")
+    );
+    const seriesData = {};
+    const markers2 = {};
+    const compareMarkers2 = {};
+    let currentTime2;
+    let compareTime2;
+    let total2 = new import_bigdecimal.default(0);
+    let compareTotal2 = new import_bigdecimal.default(0);
+    for (const p of params) {
+      const { marker, seriesName, value, seriesId } = p;
+      if (seriesId.endsWith("_compare")) {
+        const id = seriesId.replace("_compare", "");
+        compareMarkers2[id] = marker;
+        if (compareTime2 === void 0) {
+          compareTime2 = (0, import_dayjs.default)(value[0]);
+        }
+        if (isValidValue(value[1], hasCompare2)) {
+          seriesData[id] = {
+            seriesId: id,
+            ...seriesData[id],
+            compareValue: value[1],
+            compareTime: value[0],
+            seriesName
+          };
+          compareTotal2 = compareTotal2.plus(value[1]);
+        }
+      } else {
+        markers2[seriesId] = marker;
+        if (currentTime2 === void 0) {
+          currentTime2 = (0, import_dayjs.default)(value[0]);
+        }
+        if (isValidValue(value[1], hasCompare2)) {
+          seriesData[seriesId] = {
+            seriesId,
+            ...seriesData[seriesId],
+            time: value[0],
+            value: value[1],
+            seriesName
+          };
+          total2 = total2.plus(value[1]);
+        }
+      }
+    }
+    const series2 = (0, import_lodash3.sortBy)(Object.values(seriesData), (s) => -s.value);
+    const hasCurrent2 = series2[0]?.value !== void 0;
+    if (compareTimeDuration && compareTime2 && !currentTime2) {
+      currentTime2 = compareTime2.add(
+        Number(compareTimeDuration.value),
+        compareTimeDuration.unit
+      );
+    }
+    return {
+      series: series2,
+      hasCompare: hasCompare2,
+      currentTime: currentTime2,
+      compareTime: compareTime2,
+      hasCurrent: hasCurrent2,
+      markers: markers2,
+      compareMarkers: compareMarkers2,
+      total: total2,
+      compareTotal: compareTotal2
+    };
+  }, [data]);
+  const renderRow = (p, idx) => {
+    const { seriesName, compareValue, value, seriesId } = p;
+    const highlighted = seriesId === highlightSeriesId;
+    const marker = markers[seriesId];
+    const diff = hasCompare && hasCurrent && compareValue != null && value != null ? new import_bigdecimal.default(value).minus(compareValue).div(compareValue).toNumber() : void 0;
+    const showViewLogs = onViewLogs && !viewLogDisabled?.(seriesId, idx);
+    const showViewUsers = onViewUsers && !viewUsersDisabled?.(seriesId, idx);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item series-name text-text-foreground inline-flex items-center overflow-hidden",
+            "group",
+            highlighted ? "highlighted" : ""
+          ),
+          style: { minWidth: "4rem" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { dangerouslySetInnerHTML: { __html: marker || "" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "truncate", children: seriesName }),
+            showViewLogs && isFixed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onViewLogs(seriesId, idx);
+                },
+                title: "View logs",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu3.LuList, { className: "h-4 w-4" })
+              }
+            ),
+            showViewUsers && isFixed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "button",
+              {
+                className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onViewUsers(seriesId, idx);
+                },
+                title: "View users",
+                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lu3.LuCircleUserRound, { className: "h-4 w-4" })
+              }
+            ),
+            isFixed && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_ui_core9.CopyButton,
+              {
+                size: 16,
+                text: seriesName,
+                className: "invisible ml-1 group-hover:visible"
+              }
+            )
+          ]
+        },
+        idx
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item min-w-16 flex items-center truncate pl-1 text-right font-semibold",
+            highlighted ? "highlighted" : ""
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: hasCurrent ? numberFormatter(value, seriesId) : "-" }),
+            diff !== void 0 && Number.isFinite(diff) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "span",
+              {
+                className: (0, import_ui_core9.classNames)(
+                  "ml-1 text-xs",
+                  diff > 0 ? "text-green-500" : "text-red"
+                ),
+                children: [
+                  diff > 0 ? "+" : "",
+                  (diff * 100).toFixed(2),
+                  "%"
+                ]
+              }
+            )
+          ]
+        },
+        `${idx}-value`
+      )
+    ] }, idx);
+  };
+  const renderCompareRow = (p, idx) => {
+    const { seriesName, compareValue, seriesId } = p;
+    const highlighted = seriesId === highlightSeriesId;
+    const compareMarker = compareMarkers[seriesId];
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item sentio-tooltip-compare-item series-name text-text-foreground-secondary truncate",
+            highlighted ? "highlighted" : ""
+          ),
+          style: { minWidth: "4rem" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              "span",
+              {
+                dangerouslySetInnerHTML: { __html: compareMarker || "" }
+              }
+            ),
+            seriesName
+          ]
+        },
+        idx
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          className: (0, import_ui_core9.classNames)(
+            "sentio-tooltip-item min-w-16 text-text-foreground-secondary truncate pl-1 text-right font-semibold",
+            highlighted ? "highlighted" : ""
+          ),
+          children: (0, import_lodash3.isNumber)(compareValue) ? numberFormatter(compareValue, seriesId) : "-"
+        },
+        `${idx}-value`
+      )
+    ] }, idx);
+  };
+  const renderTotalRow = () => {
+    if (!showTotal || series.length < 2) return null;
+    const diff = hasCompare && hasCurrent && total && compareTotal ? total.minus(compareTotal).div(compareTotal).toNumber() : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border-border-color col-span-2 mt-1 flex items-center justify-between border-t pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sentio-tooltip-item series-name text-text-foreground truncate font-semibold", children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "sentio-tooltip-item min-w-16 flex items-center truncate pl-1 text-right font-semibold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: hasCurrent ? numberFormatter(total.toNumber()) : "-" }),
+        diff !== void 0 && Number.isFinite(diff) && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          "span",
+          {
+            className: (0, import_ui_core9.classNames)(
+              "ml-1 text-xs",
+              diff > 0 ? "text-green-500" : "text-red"
+            ),
+            children: [
+              diff > 0 ? "+" : "",
+              (diff * 100).toFixed(2),
+              "%"
+            ]
+          }
+        )
+      ] })
+    ] });
+  };
+  const renderCompareTotalRow = () => {
+    if (!showTotal || series.length < 2 || !hasCompare) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "border-border-color col-span-2 mt-1 flex items-center justify-between border-t pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sentio-tooltip-item sentio-tooltip-compare-item series-name text-text-foreground-secondary truncate font-semibold", children: "Total" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sentio-tooltip-item min-w-16 text-text-foreground-secondary truncate pl-1 text-right font-semibold", children: (0, import_lodash3.isNumber)(compareTotal) ? numberFormatter(compareTotal.toNumber()) : "-" })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_core9.classNames)("grid w-full px-2"),
+      style: { gridTemplateColumns: "1fr auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          {
+            className: (0, import_ui_core9.classNames)(
+              "pl-2",
+              "text-text-foreground-secondary col-span-2 text-left"
+            ),
+            children: title ?? currentTime?.format("YYYY-MM-DD HH:mm:ss")
+          }
+        ),
+        !series || series.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-text-foreground-secondary pl-2 text-sm", children: "No data available" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+          series.map((s, idx) => renderRow(s, idx)),
+          renderTotalRow(),
+          hasCompare && compareTimeDuration && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+              "div",
+              {
+                className: (0, import_ui_core9.classNames)(
+                  "mt-2 pl-2",
+                  "text-text-foreground-secondary col-span-2 text-left"
+                ),
+                children: [
+                  compareTime?.format("YYYY-MM-DD HH:mm:ss"),
+                  " (previous",
+                  " ",
+                  durationToLongString(compareTimeDuration),
+                  ")"
+                ]
+              }
+            ),
+            series.map((s, idx) => renderCompareRow(s, idx)),
+            renderCompareTotalRow()
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/charts/ScatterChartTooltip.tsx
+var import_react16 = require("react");
+var import_dayjs2 = __toESM(require("dayjs"));
+var import_utc2 = __toESM(require("dayjs/plugin/utc"));
+var import_timezone2 = __toESM(require("dayjs/plugin/timezone"));
+var import_lodash4 = require("lodash");
+var import_lu4 = require("react-icons/lu");
+var import_ui_core10 = require("@sentio/ui-core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+import_dayjs2.default.extend(import_utc2.default);
+import_dayjs2.default.extend(import_timezone2.default);
+function ScatterChartTooltip({
+  data,
+  numberFormatter,
+  highlightSeriesId,
+  title,
+  onViewLogs,
+  viewLogDisabled,
+  onViewUsers,
+  viewUsersDisabled,
+  isFixed,
+  sizeTitle = "Size"
+}) {
+  const { point, seriesName, seriesId, marker } = (0, import_react16.useMemo)(() => {
+    const param = Array.isArray(data) ? data[0] : data;
+    return {
+      point: param,
+      seriesName: param?.seriesName || "",
+      seriesId: param?.seriesId || "",
+      marker: param?.marker || ""
+    };
+  }, [data]);
+  if (!point || !point.value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-full px-2", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-text-foreground-secondary pl-2 text-sm", children: "No data available" }) });
+  }
+  const { value } = point;
+  const [xValue, yValue, sizeValue] = value;
+  const highlighted = seriesId === highlightSeriesId;
+  const showViewLogs = onViewLogs && !viewLogDisabled?.(seriesId, 0);
+  const showViewUsers = onViewUsers && !viewUsersDisabled?.(seriesId, 0);
+  const formatValue = (val) => {
+    if (val instanceof Date) {
+      return (0, import_dayjs2.default)(val).format("YYYY-MM-DD HH:mm:ss");
+    } else if ((0, import_lodash4.isNumber)(val)) {
+      return numberFormatter(val);
+    } else {
+      return String(val);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_core10.classNames)("grid w-full px-2"),
+      style: { gridTemplateColumns: "1fr auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            className: (0, import_ui_core10.classNames)(
+              "mb-2 pl-2",
+              "text-text-foreground-secondary col-span-2 text-left"
+            ),
+            children: title ?? (0, import_dayjs2.default)(xValue).format("YYYY-MM-DD HH:mm:ss")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          "div",
+          {
+            className: (0, import_ui_core10.classNames)(
+              "sentio-tooltip-item series-name text-text-foreground inline-flex items-center overflow-hidden",
+              "group",
+              highlighted ? "highlighted" : ""
+            ),
+            style: { minWidth: "4rem" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { dangerouslySetInnerHTML: { __html: marker || "" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "truncate", children: seriesName }),
+              showViewLogs && isFixed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "button",
+                {
+                  className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onViewLogs(seriesId, 0);
+                  },
+                  title: "View logs",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lu4.LuList, { className: "h-4 w-4" })
+                }
+              ),
+              showViewUsers && isFixed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                "button",
+                {
+                  className: "text-text-foreground/60 hover:text-text-foreground invisible ml-1 text-xs underline group-hover:visible",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onViewUsers(seriesId, 0);
+                  },
+                  title: "View users",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lu4.LuCircleUserRound, { className: "h-4 w-4" })
+                }
+              ),
+              isFixed && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                import_ui_core10.CopyButton,
+                {
+                  size: 16,
+                  text: seriesName,
+                  className: "invisible ml-1 group-hover:visible"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            className: (0, import_ui_core10.classNames)(
+              "sentio-tooltip-item min-w-16 flex items-center truncate pl-1 text-right font-semibold",
+              highlighted ? "highlighted" : ""
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: formatValue(yValue) })
+          }
+        ),
+        sizeValue !== void 0 && sizeValue !== null && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "border-border-color col-span-2 my-2 w-full border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "div",
+            {
+              className: "sentio-tooltip-item series-name text-text-foreground-secondary truncate",
+              style: { minWidth: "4rem" },
+              children: sizeTitle
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sentio-tooltip-item min-w-16 text-text-foreground-secondary truncate pl-1 text-right font-semibold", children: formatValue(sizeValue) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/charts/PieChart.tsx
+var import_react17 = require("react");
+var import_react_resize_detector3 = require("react-resize-detector");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var theresholdWidth = 480;
+var TOOLTIP_MIN_VIEWPORT_LEFT = 8;
+var TOOLTIP_MIN_VIEWPORT_RIGHT = 8;
+var PieChart2 = (0, import_react17.forwardRef)(
+  (props, ref) => {
+    const {
+      series,
+      valueFormatter,
+      config,
+      title,
+      minHeight,
+      loading,
+      style,
+      onInitChart
+    } = props;
+    const [options, setOptions] = (0, import_react17.useState)({});
+    const isDarkMode = useDarkMode();
+    const isMobile2 = isMobile();
+    const { width, ref: resizeRef } = (0, import_react_resize_detector3.useResizeDetector)({
+      refreshMode: "debounce",
+      refreshRate: 500,
+      handleHeight: false
+    });
+    const tooltipPosition = (point, _params, _dom, _rect, size) => {
+      const chartRect = resizeRef.current?.getBoundingClientRect();
+      const chartLeft = chartRect?.left ?? 0;
+      const winW = typeof window !== "undefined" ? window.innerWidth : size.viewSize[0];
+      const [w, h] = size.contentSize;
+      const minXInChart = TOOLTIP_MIN_VIEWPORT_LEFT - chartLeft;
+      const maxXInChart = winW - TOOLTIP_MIN_VIEWPORT_RIGHT - chartLeft - w;
+      let x = point[0] + 12;
+      if (x > maxXInChart) {
+        x = point[0] - w - 12;
+      }
+      if (x < minXInChart) x = minXInChart;
+      if (x > maxXInChart) x = maxXInChart;
+      const y = Math.max(0, point[1] - h / 2);
+      return [x, y];
+    };
+    (0, import_react17.useEffect)(() => {
+      const isHLegend = width && width < theresholdWidth;
+      const winW = typeof window !== "undefined" ? window.innerWidth : 1024;
+      const tooltipMaxWidth = Math.max(160, Math.min(280, winW - 48));
+      const tooltipExtraCss = isMobile2 ? `max-width: ${tooltipMaxWidth}px; white-space: normal; word-break: break-word; overflow-wrap: anywhere;` : "";
+      const d = [];
+      series.forEach((s) => {
+        if (s.data.length > 0 && s.data[0] && s.data[0][1] != null) {
+          const rawValue = s.data[0][1];
+          if (config?.pieConfig?.absValue) {
+            d.push({ name: s.name, value: Math.abs(rawValue) });
+          } else if (rawValue > 0) {
+            d.push({ name: s.name, value: rawValue });
+          }
+        }
+      });
+      const total = d.reduce((acc, cur) => acc + cur.value, 0);
+      d.sort((a, b) => {
+        const percentA = a.value / total * 100;
+        const percentB = b.value / total * 100;
+        return percentB - percentA;
+      });
+      const pieSeries = [
+        {
+          type: "pie",
+          radius: [config?.pieConfig?.pieType == "Donut" ? "40%" : 0, "70%"],
+          center: isHLegend ? ["50%", "50%"] : ["35%", "50%"],
+          label: { show: false },
+          labelLine: { length: 10, length2: 10, maxSurfaceAngle: 50 },
+          data: d
+        }
+      ];
+      const options2 = {
+        title: { text: title, left: 8 },
+        legend: isHLegend ? {
+          type: "scroll",
+          orient: "horizontal",
+          bottom: 12,
+          left: "center",
+          animation: true,
+          animationDurationUpdate: 300,
+          pageIconSize: [10, 8],
+          pageButtonItemGap: 2,
+          pageButtonGap: 4,
+          textStyle: {
+            width: width ? width * 0.4 : 100,
+            overflow: "truncate"
+          },
+          tooltip: {
+            show: true,
+            appendToBody: true,
+            extraCssText: tooltipExtraCss,
+            position: tooltipPosition,
+            formatter: function(params) {
+              const name = params.name;
+              const item = d.find((i) => i.name === name);
+              let ret = name;
+              if (config?.pieConfig?.showValue && item) {
+                ret += "<br/>" + valueFormatter(item.value);
+              }
+              if (config?.pieConfig?.showPercent && item) {
+                const percent = (item.value / d.reduce((acc, cur) => acc + cur.value, 0) * 100).toFixed(2);
+                ret += config.pieConfig.showValue ? ` \u2022 ${percent}%` : `
+${percent}%`;
+              }
+              return ret;
+            }
+          }
+        } : {
+          type: "scroll",
+          orient: "vertical",
+          right: 16,
+          top: title ? 48 : 8,
+          width: "35%",
+          animation: true,
+          animationDurationUpdate: 300,
+          tooltip: {
+            show: true,
+            appendToBody: true,
+            extraCssText: tooltipExtraCss,
+            position: tooltipPosition,
+            formatter: function(params) {
+              const name = params.name;
+              const item = d.find((i) => i.name === name);
+              let ret = name;
+              if (config?.pieConfig?.showValue && item) {
+                ret += "<br/>" + valueFormatter(item.value);
+              }
+              if (config?.pieConfig?.showPercent && item) {
+                const percent = (item.value / d.reduce((acc, cur) => acc + cur.value, 0) * 100).toFixed(2);
+                ret += config.pieConfig.showValue ? ` \u2022 ${percent}%` : `
+${percent}%`;
+              }
+              return ret;
+            }
+          },
+          icon: "roundRect",
+          itemWidth: 12,
+          itemHeight: 12,
+          itemGap: 6,
+          show: true,
+          pageIconSize: [8, 10],
+          pageButtonGap: 4,
+          pageButtonItemGap: 2,
+          pageIconColor: isDarkMode ? "#909399" : "#4E5969",
+          pageIconInactiveColor: isDarkMode ? "#606266" : "#C9CDD4",
+          textStyle: {
+            width: width ? width * 0.3 : "auto",
+            overflow: "truncate",
+            lineHeight: 16,
+            fontSize: 12,
+            rich: { value: { padding: [4, 0, 0, 0] } }
+          },
+          formatter: (name) => {
+            const item = d.find((i) => i.name === name);
+            let ret = name;
+            if (config?.pieConfig?.showValue && item) {
+              ret += "\n" + valueFormatter(item.value);
+            }
+            if (config?.pieConfig?.showPercent && item) {
+              const percent = (item.value / d.reduce((acc, cur) => acc + cur.value, 0) * 100).toFixed(2);
+              ret += config.pieConfig.showValue ? ` \u2022 ${percent}%` : `
+${percent}%`;
+            }
+            return ret;
+          }
+        },
+        tooltip: {
+          trigger: "item",
+          appendToBody: true,
+          extraCssText: tooltipExtraCss,
+          position: tooltipPosition,
+          formatter: ({ name, data, percent }) => {
+            let ret = `${name}`;
+            if (config?.pieConfig?.showValue) {
+              ret += "<br/>" + valueFormatter(data.value);
+            }
+            if (config?.pieConfig?.showPercent) {
+              ret += config.pieConfig.showValue ? ` (${percent}%)` : `
+${percent}%`;
+            }
+            return ret;
+          }
+        },
+        toolbox: { show: false },
+        animation: false,
+        series: pieSeries
+      };
+      setOptions(options2);
+    }, [series, config, valueFormatter, isDarkMode, isMobile2, width, title]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-full w-full", ref: resizeRef, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      ReactEChartsBase,
+      {
+        ref,
+        loading,
+        option: options,
+        minHeight,
+        style,
+        noLegend: true,
+        onInitChart
+      }
+    ) });
+  }
+);
+PieChart2.displayName = "PieChart";
+
+// src/charts/options/LineControls.tsx
+var import_immer4 = require("immer");
+var import_ui_core11 = require("@sentio/ui-core");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var lineStyles = [
   { label: "Solid", value: "Solid" },
   { label: "Dotted", value: "Dotted" }
@@ -3065,14 +3746,14 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_ui_core9.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_ui_core11.DisclosurePanel,
     {
       title: "Line style",
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_ui_core9.NewButtonGroup,
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_ui_core11.NewButtonGroup,
           {
             buttons: lineStyles,
             value: config?.style || "Solid",
@@ -3080,8 +3761,8 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
             small: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          import_ui_core9.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          import_ui_core11.Checkbox,
           {
             label: "Smooth Curves",
             checked: config?.smooth,
@@ -3094,16 +3775,16 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
 };
 
 // src/charts/options/LabelControls.tsx
-var import_react15 = require("react");
+var import_react18 = require("react");
 var import_immer5 = require("immer");
-var import_ui_core10 = require("@sentio/ui-core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_ui_core12 = require("@sentio/ui-core");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var initialConfig = {
   columns: [],
   alias: ""
 };
 var LabelControls = ({ config, setConfig, defaultOpen }) => {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (config?.columns && config.columns.length > 0 && !config.alias) {
       const aliasParts = [];
       config.columns.forEach((colConfig) => {
@@ -3133,31 +3814,31 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
       })
     );
   };
-  const _defaultOpen = (0, import_react15.useMemo)(() => {
+  const _defaultOpen = (0, import_react18.useMemo)(() => {
     if (defaultOpen) {
       return true;
     }
     return config?.alias !== "" || config?.columns && config.columns.length > 0;
   }, [config, defaultOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-    import_ui_core10.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_ui_core12.DisclosurePanel,
     {
       title: "Label Controls",
       defaultOpen: _defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2 font-medium", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2 font-medium", children: [
             "Label Alias",
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-              import_ui_core10.HelpIcon,
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              import_ui_core12.HelpIcon,
               {
-                text: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "text-icontent text-text-foreground", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: "Series name override or template." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                text: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-icontent text-text-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "Series name override or template." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
                     "Ex.",
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
                     " ",
                     "will be replaced with the value of the contract label."
                   ] })
@@ -3165,7 +3846,7 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "input",
             {
               type: "text",
@@ -3176,8 +3857,8 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-          import_ui_core10.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          import_ui_core12.Button,
           {
             type: "button",
             role: "link",
@@ -3194,9 +3875,9 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
 
 // src/charts/options/PieChartControls.tsx
 var import_immer6 = require("immer");
-var import_lodash3 = require("lodash");
-var import_ui_core11 = require("@sentio/ui-core");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_lodash5 = require("lodash");
+var import_ui_core13 = require("@sentio/ui-core");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var defaultConfig = {
   pieType: "Pie",
   calculation: "LAST",
@@ -3217,7 +3898,7 @@ var PieTypeItems = [
   { label: "Donut", value: "Donut" }
 ];
 function PieChartControls({ config, defaultOpen, onChange }) {
-  config = (0, import_lodash3.defaults)(config, defaultConfig);
+  config = (0, import_lodash5.defaults)(config, defaultConfig);
   function onCalculationChange(cal) {
     config && onChange((0, import_immer6.produce)(config, (draft) => void (draft.calculation = cal)));
   }
@@ -3231,15 +3912,15 @@ function PieChartControls({ config, defaultOpen, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_ui_core11.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_ui_core13.DisclosurePanel,
     {
       title: "Pie Chart Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_ui_core11.NewButtonGroup,
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.NewButtonGroup,
           {
             small: true,
             buttons: PieTypeItems,
@@ -3247,22 +3928,22 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             onChange: onPieTypeChange
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "select",
             {
               value: config.calculation,
               className: "sm:text-ilabel text-text-foreground border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
               onChange: (e) => onCalculationChange(e.target.value),
               children: CalculationItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_ui_core11.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.Checkbox,
           {
             checked: config?.showValue,
             onChange: (v) => toggle("showValue", v),
@@ -3270,8 +3951,8 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_ui_core11.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.Checkbox,
           {
             checked: config?.showPercent,
             onChange: (v) => toggle("showPercent", v),
@@ -3279,8 +3960,8 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          import_ui_core11.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_ui_core13.Checkbox,
           {
             checked: config?.absValue,
             onChange: (v) => toggle("absValue", v),
@@ -3295,9 +3976,9 @@ function PieChartControls({ config, defaultOpen, onChange }) {
 
 // src/charts/options/BarGaugeControls.tsx
 var import_immer7 = require("immer");
-var import_lodash4 = require("lodash");
-var import_ui_core12 = require("@sentio/ui-core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_lodash6 = require("lodash");
+var import_ui_core14 = require("@sentio/ui-core");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var defaultConfig2 = {
   direction: "HORIZONTAL",
   calculation: "LAST",
@@ -3327,7 +4008,7 @@ var orderItems = [
   { label: "Descendant", value: "true" }
 ];
 function BarGaugeControls({ config, defaultOpen, onChange }) {
-  config = (0, import_lodash4.defaults)(config, defaultConfig2);
+  config = (0, import_lodash6.defaults)(config, defaultConfig2);
   function onCalculationChange(cal) {
     config && onChange((0, import_immer7.produce)(config, (draft) => void (draft.calculation = cal)));
   }
@@ -3342,70 +4023,70 @@ function BarGaugeControls({ config, defaultOpen, onChange }) {
       })
     );
   }
-  function onSortByChange(sortBy2) {
+  function onSortByChange(sortBy3) {
     config && onChange(
       (0, import_immer7.produce)(config, (draft) => {
         draft.sort = draft.sort || {};
-        draft.sort.sortBy = sortBy2;
+        draft.sort.sortBy = sortBy3;
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-    import_ui_core12.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_ui_core14.DisclosurePanel,
     {
       title: "Bar Gauge Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "shadow-xs  flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Direction" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs  flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Direction" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "select",
             {
               value: config.direction,
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
               onChange: (e) => onDirectionChange(e.target.value),
               children: directionItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "select",
             {
               value: config.calculation,
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
               onChange: (e) => onCalculationChange(e.target.value),
               children: CalculationItems2.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Sort by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Sort by" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "select",
             {
               value: config?.sort?.sortBy,
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center border pl-4 pr-7",
               onChange: (e) => onSortByChange(e.target.value),
               children: sortByItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "select",
             {
               value: config?.sort?.orderDesc + "",
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border border-l-0 pl-4 pr-7",
               onChange: (e) => onOrderChange(e.target.value === "true"),
               children: orderItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: d.value + "", children: d.label }, d.label);
+                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value + "", children: d.label }, d.label);
               })
             }
           )
@@ -3417,13 +4098,13 @@ function BarGaugeControls({ config, defaultOpen, onChange }) {
 
 // src/charts/options/ValueOptions.tsx
 var import_immer9 = require("immer");
-var import_ui_core14 = require("@sentio/ui-core");
+var import_ui_core16 = require("@sentio/ui-core");
 
 // src/charts/options/ValueStringMapping.tsx
-var import_lu3 = require("react-icons/lu");
-var import_ui_core13 = require("@sentio/ui-core");
+var import_lu5 = require("react-icons/lu");
+var import_ui_core15 = require("@sentio/ui-core");
 var import_immer8 = require("immer");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var operators = {
   ">": "greater than",
   ">=": "greater or equal",
@@ -3433,17 +4114,17 @@ var operators = {
   "<=": "less or equal"
 };
 var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-full w-full items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex h-full w-full items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
-        className: (0, import_ui_core13.classNames)(
+        className: (0, import_ui_core15.classNames)(
           "w-px bg-gray-300",
           isLast ? "h-1/2 self-start" : index === 0 ? "h-full self-end" : "h-full"
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-px w-3 bg-gray-300" })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px w-3 bg-gray-300" })
   ] }) });
 };
 function ValueStringMapping({ rules, onChange }) {
@@ -3474,31 +4155,31 @@ function ValueStringMapping({ rules, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
     (rules || []).map((rule, index) => {
       const isLast = index === (rules || []).length - 1;
-      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
           className: "text-text-foreground flex h-10 items-center py-1",
           children: [
             renderTreeLine(index, isLast),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "select",
               {
                 value: rule.comparison,
                 onChange: (e) => changeRule(index, "comparison", e.target.value),
                 className: "rounded-r-0 sm:text-ilabel border-main text-text-foreground focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 inline-flex h-full items-center rounded-l-md border border-r-0 bg-gray-50 py-1 pl-4 pr-7",
                 children: Object.entries(operators).map(([op, display]) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("option", { value: op, children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("option", { value: op, children: [
                     "is ",
                     display
                   ] }, op);
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "input",
               {
                 type: "text",
@@ -3512,8 +4193,8 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "input",
               {
                 type: "text",
@@ -3527,15 +4208,15 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "button",
               {
                 type: "button",
                 className: "mx-2",
                 "aria-label": "remove",
                 onClick: () => removeRule(index),
-                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                  import_lu3.LuTrash2,
+                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  import_lu5.LuTrash2,
                   {
                     className: "icon text-text-foreground-disabled",
                     "aria-hidden": "true"
@@ -3548,8 +4229,8 @@ function ValueStringMapping({ rules, onChange }) {
         index
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-      import_ui_core13.Button,
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      import_ui_core15.Button,
       {
         type: "button",
         role: "secondary",
@@ -3557,7 +4238,7 @@ function ValueStringMapping({ rules, onChange }) {
         "aria-label": "remove",
         onClick: addRule,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lu3.LuPlus, { className: (0, import_ui_core13.classNames)("h-4 w-4"), "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lu5.LuPlus, { className: (0, import_ui_core15.classNames)("h-4 w-4"), "aria-hidden": "true" }),
           "Add Formatting Rule"
         ]
       }
@@ -3566,7 +4247,7 @@ function ValueStringMapping({ rules, onChange }) {
 }
 
 // src/charts/options/ValueOptions.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ValueFormatters = [
   { label: "Number", value: "NumberFormatter" },
   { label: "Date", value: "DateFormatter" },
@@ -3595,10 +4276,10 @@ var CurrencySymbols = [
 var AddonLabel = ({
   className,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   "span",
   {
-    className: (0, import_ui_core14.classNames)(
+    className: (0, import_ui_core16.classNames)(
       "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap bg-gray-50 px-3",
       className
     ),
@@ -3671,9 +4352,9 @@ var ValueOptions = ({
   function numberAddons(style) {
     switch (style) {
       case "None":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               disabled: true,
@@ -3684,9 +4365,9 @@ var ValueOptions = ({
         ] });
       case "Percent":
       case "Standard":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               type: "number",
@@ -3700,10 +4381,10 @@ var ValueOptions = ({
           )
         ] });
       case "Currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            import_ui_core14.ComboInput,
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            import_ui_core16.ComboInput,
             {
               onChange: onChangeSymbol,
               options: CurrencySymbols.map((s) => s.value),
@@ -3715,8 +4396,8 @@ var ValueOptions = ({
               value: config?.currencySymbol
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border", children: "Precision" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border", children: "Precision" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               type: "number",
@@ -3731,9 +4412,9 @@ var ValueOptions = ({
           )
         ] });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               type: "number",
@@ -3748,62 +4429,62 @@ var ValueOptions = ({
         ] });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "select",
         {
           value: config.valueFormatter,
-          className: (0, import_ui_core14.classNames)(
+          className: (0, import_ui_core16.classNames)(
             "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1.5 pl-4 pr-7 focus:ring-0",
             config.valueFormatter == "StringFormatter" ? "rounded-r-md" : ""
           ),
           onChange: (e) => onChangeFormatter(e.target.value),
           children: formatters.map((d) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: d.value, children: d.label }, d.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
           })
         }
       ),
-      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "select",
           {
             value: config.style,
             className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1 pl-4 pr-7 focus:ring-0",
             onChange: (e) => onStyleChange(e.target.value),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "None", children: "None" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "Compact", children: "Compact" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "Standard", children: "Standard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "Scientific", children: "Scientific" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "Percent", children: "Percent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: "Currency", children: "Currency" })
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "None", children: "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Compact", children: "Compact" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Standard", children: "Standard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Scientific", children: "Scientific" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Percent", children: "Percent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Currency", children: "Currency" })
             ]
           }
         ),
         config.style && numberAddons(config.style)
       ] }),
-      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "select",
           {
             value: config.dateFormat,
             className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center rounded-r-md border  border-l-0  py-1  pl-4 pr-7",
             onChange: (e) => onChangeDateFormat(e.target.value),
             children: dateFormats.map((d) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: d.value, children: d.label }, d.value);
+              return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
             })
           }
         )
       ] })
     ] }) }),
-    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
-      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
+      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             type: "text",
@@ -3814,9 +4495,9 @@ var ValueOptions = ({
           }
         )
       ] }),
-      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "input",
           {
             type: "text",
@@ -3828,7 +4509,7 @@ var ValueOptions = ({
         )
       ] })
     ] }) }),
-    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       ValueStringMapping,
       {
         rules: config.mappingRules || [],
@@ -3839,10 +4520,10 @@ var ValueOptions = ({
 };
 
 // src/charts/options/ValueControls.tsx
-var import_lodash5 = require("lodash");
-var import_ui_core15 = require("@sentio/ui-core");
+var import_lodash7 = require("lodash");
+var import_ui_core17 = require("@sentio/ui-core");
 var import_immer10 = require("immer");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var defaultConfig4 = {
   valueFormatter: "NumberFormatter",
   showValueLabel: false,
@@ -3860,7 +4541,7 @@ var ValueControls = ({
   showPrefix,
   showSuffix
 }) => {
-  config = (0, import_lodash5.defaults)(config || {}, defaultConfig4);
+  config = (0, import_lodash7.defaults)(config || {}, defaultConfig4);
   function toggleShowValueLabel(checked) {
     config && onChange(
       (0, import_immer10.produce)(config, (draft) => void (draft.showValueLabel = checked))
@@ -3869,14 +4550,14 @@ var ValueControls = ({
   function toggleTooltipTotal(checked) {
     config && onChange((0, import_immer10.produce)(config, (draft) => void (draft.tooltipTotal = checked)));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-    import_ui_core15.DisclosurePanel,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_ui_core17.DisclosurePanel,
     {
       title: "Value Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           ValueOptions,
           {
             onChange,
@@ -3886,17 +4567,17 @@ var ValueControls = ({
             showSuffix
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_ui_core15.Checkbox,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui_core17.Checkbox,
             {
               checked: config?.showValueLabel,
               onChange: toggleShowValueLabel,
               label: "Show value label"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            import_ui_core15.Checkbox,
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            import_ui_core17.Checkbox,
             {
               checked: config?.tooltipTotal,
               onChange: toggleTooltipTotal,
@@ -3918,6 +4599,7 @@ var ValueControls = ({
   BarGuageIcon,
   BarIcon,
   ChartLegend,
+  ChartTooltip,
   ChartTypeButtonGroup,
   EventsFunctionCategories,
   EventsFunctionMap,
@@ -3930,12 +4612,14 @@ var ValueControls = ({
   LabelsInput,
   LineControls,
   LineIcon,
+  PieChart,
   PieChartControls,
   PieIcon,
   QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,
   RefreshContext,
+  ScatterChartTooltip,
   ScatterIcon,
   SystemLabels,
   TableIcon,