@sentio/ui-dashboard 0.1.2 → 0.2.0

package/dist/index.js

@@ -31,8 +31,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AggregateInput: () => AggregateInput,
+  AreaIcon: () => AreaIcon_default,
   ArgumentInput: () => ArgumentInput,
   ArgumentType: () => ArgumentType,
+  BarGuageIcon: () => BarGuageIcon_default,
+  BarIcon: () => BarIcon_default,
+  ChartLegend: () => ChartLegend,
   EventsFunctionCategories: () => EventsFunctionCategories,
   EventsFunctionMap: () => EventsFunctionMap,
   FunctionInput: () => FunctionInput,
@@ -41,8 +45,19 @@ __export(index_exports, {
   FunctionsPanel: () => FunctionsPanel,
   LabelSearchProvider: () => LabelSearchProvider,
   LabelsInput: () => LabelsInput,
+  LineIcon: () => LineIcon_default,
+  PieIcon: () => PieIcon_default,
+  QueryValueIcon: () => QueryValueIcon_default,
+  ReactEChartsBase: () => ReactEChartsBase,
+  RefreshButton: () => RefreshButton,
+  RefreshContext: () => RefreshContext,
+  ScatterIcon: () => ScatterIcon_default,
   SystemLabels: () => SystemLabels,
+  TableIcon: () => TableIcon_default,
   isAggrOrRollupFunction: () => isAggrOrRollupFunction,
+  sentioColors: () => sentioColors,
+  sentioTheme: () => sentioTheme,
+  sentioThemeDark: () => sentioThemeDark,
   sortMetricByName: () => sortMetricByName,
   useLabelSearch: () => useLabelSearch,
   useLabelSearchContext: () => useLabelSearchContext
@@ -728,7 +743,7 @@ function FunctionInput({ value, onChange }) {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-px w-2.5 self-center bg-border-color" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-border-color h-px w-2.5 self-center" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Popover, { className: "relative", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_react4.Popover.Button,
@@ -783,7 +798,7 @@ function Functions({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: functions.map((f, fi) => {
     const def = FunctionMap[f.name];
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-px w-2.5 self-center bg-border-color" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "bg-border-color h-px w-2.5 self-center" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
@@ -1052,11 +1067,1908 @@ function LabelsInput({
     }
   );
 }
+
+// src/charts/EchartsBase.tsx
+var import_react12 = require("react");
+var import_renderers = require("echarts/renderers");
+var import_core2 = require("echarts/core");
+var import_charts = require("echarts/charts");
+var import_components = require("echarts/components");
+var import_react_resize_detector = require("react-resize-detector");
+var import_ui_core6 = require("@sentio/ui-core");
+
+// src/charts/ChartLegend.tsx
+var import_react10 = require("react");
+
+// src/common/Tooltip.tsx
+var import_react8 = require("react");
+var import_react9 = require("@floating-ui/react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Tooltip({ referenceElement, text }) {
+  const { x, y, refs, strategy } = (0, import_react9.useFloating)({
+    placement: "bottom",
+    middleware: [(0, import_react9.shift)()]
+  });
+  (0, import_react8.useEffect)(() => {
+    if (referenceElement) refs.setReference(referenceElement);
+  }, [refs, referenceElement]);
+  if (!referenceElement || !text) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: "z-tooltip pointer-events-none rounded-md bg-black/70 px-2 py-1 text-white backdrop-opacity-60",
+      style: {
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0
+      },
+      children: text
+    }
+  ) });
+}
+
+// src/charts/ChartLegend.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var COLOR_UNSELECTED = "#dddddd";
+var ChartLegend = ({
+  legend,
+  legendSelected,
+  returnedSeries,
+  totalSeries,
+  onRendered,
+  chartHandle
+}) => {
+  const rootRef = (0, import_react10.useRef)(null);
+  const [tooltipText, setTooltipText] = (0, import_react10.useState)("");
+  const [tooltipReferenceElement, setTooltipReferenceElement] = (0, import_react10.useState)();
+  (0, import_react10.useEffect)(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    const offsetHeight = rootRef?.current?.parentElement?.offsetHeight || 0;
+    chartHandle?.resize({
+      height: offsetHeight - rootRef.current.offsetHeight
+    });
+    onRendered(true);
+  }, [chartHandle, onRendered]);
+  const onToggleLegend = (0, import_react10.useCallback)(
+    (event, name, _seriesIndex) => {
+      if (event.altKey) {
+        legend.forEach((n) => {
+          chartHandle?.toggleLegend(n, n === name);
+        });
+        return;
+      }
+      chartHandle?.toggleLegend(name);
+    },
+    [chartHandle, legendSelected]
+  );
+  const highlightSeries = (0, import_react10.useCallback)(
+    (index) => {
+      chartHandle?.highlightSeries({ seriesIndex: index });
+    },
+    [chartHandle]
+  );
+  const unhighlightSeries = (0, import_react10.useCallback)(() => {
+    chartHandle?.highlightSeries(void 0);
+  }, [chartHandle]);
+  const onToggleAll = (0, import_react10.useCallback)(
+    (legend2, legendSelected2, chartHandle2) => {
+      const allSelected = legend2.every((name) => legendSelected2[name]);
+      legend2.forEach((name) => {
+        chartHandle2?.toggleLegend(name, !allSelected);
+      });
+    },
+    [legend, legendSelected, chartHandle]
+  );
+  const list = legend.map((name, index) => {
+    const selected = legendSelected[name] || legendSelected[name] === void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: "flex cursor-pointer items-center gap-0.5 whitespace-nowrap",
+        "data-tip": name,
+        onClick: (event) => onToggleLegend(event, name, index),
+        onDoubleClick: (event) => {
+          onToggleAll(legend, legendSelected, chartHandle);
+        },
+        onMouseEnter: (e) => {
+          if (legendSelected[name] !== false) {
+            highlightSeries(index);
+          }
+          setTooltipReferenceElement(e.currentTarget);
+          setTooltipText(name);
+        },
+        onMouseLeave: () => {
+          unhighlightSeries();
+          setTooltipReferenceElement(void 0);
+          setTooltipText("");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              className: "rounded-xs h-2.5 w-2.5",
+              style: {
+                backgroundColor: selected ? chartHandle?.getSeriesColor({ seriesName: name }) : COLOR_UNSELECTED
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "span",
+            {
+              className: "truncate text-xs",
+              style: {
+                maxWidth: "12em",
+                color: selected ? void 0 : COLOR_UNSELECTED
+              },
+              children: name
+            }
+          )
+        ]
+      },
+      name + index
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: "text-text-foreground-secondary flex max-h-10 flex-wrap gap-x-3 gap-y-1 overflow-y-auto px-2 text-[13px] leading-[18px]",
+      children: [
+        list,
+        returnedSeries && totalSeries && returnedSeries < totalSeries ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "font-semibold", style: { color: "#6B7280" }, children: [
+          "showing ",
+          returnedSeries,
+          " of ",
+          totalSeries,
+          " series"
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip, { referenceElement: tooltipReferenceElement, text: tooltipText })
+      ]
+    }
+  );
+};
+
+// src/utils/is-mobile.ts
+function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+}
+
+// src/charts/theme/register.ts
+var import_core = require("echarts/core");
+
+// src/charts/theme/sentio-colors.ts
+var sentioColors = {
+  light: {
+    classic: [
+      "#5470f0",
+      "#47c9d9",
+      "#de5f94",
+      "#e4bc4f",
+      "#4cb275",
+      "#77aeef",
+      "#9368dd",
+      "#e46d6d",
+      "#f1904e"
+    ],
+    purple: [
+      "#5b0fa6",
+      "#6d11c9",
+      "#8617e8",
+      "#9b35e9",
+      "#a855f7",
+      "#b67af2",
+      "#7a6bff",
+      "#5b7cff",
+      "#3e82f6"
+    ]
+  },
+  dark: {
+    classic: [
+      "#6c8aff",
+      "#74dfe6",
+      "#ff75b0",
+      "#f1cf66",
+      "#67c88f",
+      "#95c6ff",
+      "#b189ff",
+      "#f28787",
+      "#ffad67"
+    ],
+    purple: [
+      "#3f0a78",
+      "#5310a0",
+      "#6816c7",
+      "#7c2ee6",
+      "#9451f4",
+      "#a874f8",
+      "#6d63f6",
+      "#5b7cff",
+      "#4794ff"
+    ]
+  }
+};
+
+// src/charts/theme/sentio-theme.ts
+var sansFontFamily = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+var textSecondaryLight = "#625d75";
+var textSecondaryDark = "#b7b4c7";
+var sentioTheme = {
+  color: sentioColors.light.classic,
+  backgroundColor: "rgba(0,0,0,0)",
+  textStyle: {
+    fontSize: 11,
+    fontFamily: sansFontFamily,
+    color: textSecondaryLight
+  },
+  title: {
+    textStyle: {
+      color: textSecondaryLight
+    },
+    subtextStyle: {
+      color: textSecondaryLight
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  bar: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    },
+    label: {
+      textBorderWidth: 0,
+      textBorderColor: "transparent"
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: "#eb5454",
+      color0: "#47b262",
+      borderColor: "#eb5454",
+      borderColor0: "#47b262",
+      borderWidth: 1
+    }
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    },
+    lineStyle: {
+      width: 1,
+      color: "#aaaaaa"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false,
+    color: [
+      "#2e71db",
+      "#8dc869",
+      "#ffdc2d",
+      "#f05a4d",
+      "#56bce5",
+      "#73ba46",
+      "#fe9f05",
+      "#a452d7",
+      "#a65a8b"
+    ],
+    label: {
+      color: "#ebeff3"
+    }
+  },
+  map: {
+    itemStyle: {
+      areaColor: "#eee",
+      borderColor: "#444",
+      borderWidth: 0.5
+    },
+    label: {
+      color: "#000"
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255,215,0,0.8)",
+        borderColor: "#444",
+        borderWidth: 1
+      },
+      label: {
+        color: "rgb(100,0,0)"
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "#eee",
+      borderColor: "#444",
+      borderWidth: 0.5
+    },
+    label: {
+      color: "#000"
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255,215,0,0.8)",
+        borderColor: "#444",
+        borderWidth: 1
+      },
+      label: {
+        color: "rgb(100,0,0)"
+      }
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        // matches CSS --border-color in light mode (rgb(235,239,243))
+        color: "#EBEFF3"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#EBEFF3"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryLight,
+      fontWeight: "normal"
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#E0E6F1"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryLight
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryLight
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryLight,
+      fontWeight: "normal"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(228, 232, 237, 0.3)"
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryLight
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryLight
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryLight
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: "rgba(89, 93, 97, 0.8)"
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        // matches CSS --border-color in light mode (rgb(235,239,243))
+        color: "#EBEFF3"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#EBEFF3"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryLight
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#E0E6F1"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "#999999"
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "#666666"
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: textSecondaryLight,
+      fontSize: 10
+    },
+    pageIconColor: "#4E5969",
+    pageIconInactiveColor: "#C9CDD4",
+    pageTextStyle: {
+      color: textSecondaryLight
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: "#e0e0e0",
+        width: 1
+      },
+      crossStyle: {
+        color: "#e0e0e0",
+        width: 1
+      }
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: "#dae1f5",
+      width: 2
+    },
+    itemStyle: {
+      color: "#a4b1d7",
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: "#a4b1d7",
+      borderColor: "#a4b1d7",
+      borderWidth: 1
+    },
+    checkpointStyle: {
+      color: "#316bf3",
+      borderColor: "#ffffff"
+    },
+    label: {
+      color: "#a4b1d7"
+    },
+    emphasis: {
+      itemStyle: {
+        color: "#ffffff"
+      },
+      controlStyle: {
+        color: "#a4b1d7",
+        borderColor: "#a4b1d7",
+        borderWidth: 1
+      },
+      label: {
+        color: "#a4b1d7"
+      }
+    }
+  },
+  visualMap: {
+    color: ["#bf444c", "#d88273", "#f6efa6"]
+  },
+  dataZoom: {
+    handleSize: "undefined%",
+    textStyle: {}
+  },
+  markPoint: {
+    label: {
+      color: "#ebeff3"
+    },
+    emphasis: {
+      label: {
+        color: "#ebeff3"
+      }
+    }
+  }
+};
+var sentioThemeDark = {
+  color: sentioColors.dark.classic,
+  backgroundColor: "rgba(0,0,0,0)",
+  textStyle: {
+    fontSize: 11,
+    fontFamily: sansFontFamily,
+    textBorderWidth: 0,
+    textBorderColor: "transparent",
+    color: textSecondaryDark
+  },
+  title: {
+    textStyle: {
+      color: textSecondaryDark
+    },
+    subtextStyle: {
+      color: textSecondaryDark
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  bar: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "transparent"
+    },
+    label: {
+      textBorderWidth: 0,
+      textBorderColor: "transparent",
+      color: textSecondaryDark
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: "#eb5454",
+      color0: "#47b262",
+      borderColor: "#eb5454",
+      borderColor0: "#47b262",
+      borderWidth: 1
+    }
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    },
+    lineStyle: {
+      width: 1,
+      color: "#aaaaaa"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false,
+    color: [
+      "#2e71db",
+      "#a8d58d",
+      "#ffe355",
+      "#f05a4d",
+      "#56bce5",
+      "#73ba46",
+      "#ff9f05",
+      "#ad56e2",
+      "#e97ec2"
+    ],
+    label: {
+      color: "#ebeff3"
+    }
+  },
+  map: {
+    itemStyle: {
+      areaColor: "#eee",
+      borderColor: "#444",
+      borderWidth: 0.5
+    },
+    label: {
+      color: "#000"
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255,215,0,0.8)",
+        borderColor: "#444",
+        borderWidth: 1
+      },
+      label: {
+        color: "rgb(100,0,0)"
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "#eee",
+      borderColor: "#444",
+      borderWidth: 0.5
+    },
+    label: {
+      color: "#000"
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "rgba(255,215,0,0.8)",
+        borderColor: "#444",
+        borderWidth: 1
+      },
+      label: {
+        color: "rgb(100,0,0)"
+      }
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        // matches CSS --border-color in dark mode (gray-100 = rgb(66,66,72))
+        color: "#424248"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#424248"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryDark,
+      fontWeight: "normal"
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#E0E6F1"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryDark
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryDark
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryDark
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        // softer gridline on the new dark canvas — barely visible
+        color: "rgba(255, 255, 255, 0.05)",
+        width: 1,
+        opacity: 0.4
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryDark
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: textSecondaryDark
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryDark,
+      fontWeight: "normal"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        // softer gridline on the new dark canvas
+        color: ["rgba(255, 255, 255, 0.05)"],
+        width: 1,
+        opacity: 0.4
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        // matches CSS --border-color in dark mode (gray-100 = rgb(66,66,72))
+        color: "#424248"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#424248"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: textSecondaryDark
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ["#5d6165"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.2)", "rgba(210,219,238,0.2)"]
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "#999999"
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "#666666"
+      }
+    }
+  },
+  legend: {
+    textStyle: {
+      color: textSecondaryDark
+    },
+    pageIconColor: "#909399",
+    pageIconInactiveColor: "#606266",
+    pageTextStyle: {
+      color: textSecondaryDark
+    }
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: "#e0e0e0",
+        width: 1
+      },
+      crossStyle: {
+        color: "#e0e0e0",
+        width: 1
+      }
+    },
+    backgroundColor: "#202020",
+    textStyle: {
+      color: textSecondaryDark
+    }
+  },
+  timeline: {
+    lineStyle: {
+      color: "#dae1f5",
+      width: 2
+    },
+    itemStyle: {
+      color: "#a4b1d7",
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: "#a4b1d7",
+      borderColor: "#a4b1d7",
+      borderWidth: 1
+    },
+    checkpointStyle: {
+      color: "#316bf3",
+      borderColor: "#ffffff"
+    },
+    label: {
+      color: "#a4b1d7"
+    },
+    emphasis: {
+      itemStyle: {
+        color: "#ffffff"
+      },
+      controlStyle: {
+        color: "#a4b1d7",
+        borderColor: "#a4b1d7",
+        borderWidth: 1
+      },
+      label: {
+        color: "#a4b1d7"
+      }
+    }
+  },
+  visualMap: {
+    color: ["#bf444c", "#d88273", "#f6efa6"]
+  },
+  dataZoom: {
+    handleSize: "undefined%",
+    textStyle: {}
+  },
+  markPoint: {
+    label: {
+      color: "#ebeff3"
+    },
+    emphasis: {
+      label: {
+        color: "#ebeff3"
+      }
+    }
+  }
+};
+
+// src/charts/theme/register.ts
+var registered = false;
+function registerSentioTheme() {
+  if (registered) return;
+  registered = true;
+  (0, import_core.registerTheme)("sentio", sentioTheme);
+  (0, import_core.registerTheme)("sentio-dark", sentioThemeDark);
+}
+
+// src/utils/use-dark-mode.ts
+var import_react11 = require("react");
+var DarkModeListener = class _DarkModeListener {
+  constructor() {
+    this.isDarkMode = false;
+    this.listeners = [];
+    this.init();
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new _DarkModeListener();
+    }
+    return this._instance;
+  }
+  addListener(listener) {
+    this.listeners.push(listener);
+  }
+  removeListener(listener) {
+    this.listeners = this.listeners.filter((l) => l !== listener);
+  }
+  get darkMode() {
+    return this.isDarkMode;
+  }
+  _sync(theme = "system") {
+    let isDarkMode = false;
+    if (theme === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      isDarkMode = mediaQuery.matches;
+      localStorage.setItem("theme", "system");
+    } else if (theme === "light") {
+      isDarkMode = false;
+      localStorage.removeItem("theme");
+    } else {
+      isDarkMode = theme === "dark";
+      localStorage.setItem("theme", "dark");
+    }
+    this.isDarkMode = isDarkMode;
+    document.body.classList.remove("light", "dark");
+    document.body.classList.add(isDarkMode ? "dark" : "light");
+    this.listeners.forEach((listener) => listener(isDarkMode));
+  }
+  toggleDarkMode() {
+    this.isDarkMode = document.body.classList.contains("dark");
+    this._sync(this.isDarkMode ? "light" : "dark");
+  }
+  setDarkMode(value) {
+    this._sync(value);
+  }
+  init() {
+    this.isDarkMode = document.body.classList.contains("dark");
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "class") {
+          const isDarkMode = document.body.classList.contains("dark");
+          if (this.isDarkMode !== isDarkMode) {
+            this.isDarkMode = isDarkMode;
+            this.listeners.forEach((listener) => listener(isDarkMode));
+          }
+        }
+      }
+    });
+    const config = {
+      attributes: true,
+      // Observe attribute changes
+      attributeFilter: ["class"]
+      // Only observe changes to the 'class' attribute
+    };
+    observer.observe(document.body, config);
+  }
+};
+var useDarkMode = (defaultValue = false) => {
+  const [isDarkMode, setIsDarkMode] = (0, import_react11.useState)(defaultValue);
+  (0, import_react11.useEffect)(() => {
+    const instance = DarkModeListener.instance;
+    setIsDarkMode(instance.darkMode);
+    instance.addListener(setIsDarkMode);
+  }, []);
+  return isDarkMode;
+};
+
+// src/charts/EchartsBase.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+(0, import_core2.use)([
+  import_components.LegendComponent,
+  import_charts.PieChart,
+  import_charts.LineChart,
+  import_charts.ScatterChart,
+  import_components.MarkLineComponent,
+  import_components.MarkAreaComponent,
+  import_charts.BarChart,
+  import_charts.SankeyChart,
+  import_components.GridComponent,
+  import_components.TooltipComponent,
+  import_components.BrushComponent,
+  import_components.TitleComponent,
+  import_components.ToolboxComponent,
+  // A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset.
+  import_components.DataZoomComponent,
+  // Used in Line Graph Charts
+  import_renderers.CanvasRenderer,
+  // If you only need to use the canvas rendering mode, the bundle will not include the SVGRenderer module, which is not needed.
+  import_components.GraphicComponent,
+  import_renderers.SVGRenderer,
+  import_components.VisualMapComponent
+]);
+registerSentioTheme();
+var ReactEChartsBaseComponent = ({
+  group,
+  option,
+  style,
+  settings,
+  loading,
+  theme: _theme,
+  // minHeight,
+  returnedSeries,
+  totalSeries,
+  onSelect,
+  noLegend,
+  onZoom,
+  onClick,
+  onSeriesEvent,
+  onInitChart
+}, forwardedRef) => {
+  const isDarkMode = useDarkMode();
+  const theme = _theme || (isDarkMode ? "sentio-dark" : "sentio");
+  const [legendSelected, setLegendSelected] = (0, import_react12.useState)(
+    {}
+  );
+  const [chart, setChart] = (0, import_react12.useState)();
+  const echartInstanceRef = (0, import_react12.useRef)();
+  const [legendRendered, setLegendRendered] = (0, import_react12.useState)(false);
+  const chartRender = "canvas";
+  const frameRef = (0, import_react12.useRef)(null);
+  const chartHandle = (0, import_react12.useMemo)(() => {
+    return {
+      getEChart: () => echartInstanceRef.current,
+      highlightSeries(highlighted) {
+        const chart2 = echartInstanceRef.current;
+        if (chart2) {
+          const { series: s } = chart2.getOption();
+          const series = s;
+          if (highlighted) {
+            for (let i = 0; i < series.length; i++) {
+              const s2 = series[i];
+              if (s2.id == highlighted.seriesId || highlighted.seriesIndex == i) {
+                s2.lineStyle = s2.lineStyle || {};
+                s2.lineStyle.opacity = 1;
+              } else {
+                s2.lineStyle = s2.lineStyle || {};
+                s2.lineStyle.opacity = 0.2;
+              }
+            }
+          } else {
+            series.forEach((s2) => {
+              s2.lineStyle = s2.lineStyle || {};
+              s2.lineStyle.opacity = 1;
+            });
+          }
+          chart2.setOption({ series });
+        }
+      },
+      getSeriesColor(s) {
+        const chart2 = echartInstanceRef.current;
+        if (chart2) {
+          try {
+            const { series: optionSeries } = chart2.getOption();
+            const seriesList = optionSeries || [];
+            let resolvedIndex = s.seriesIndex;
+            if ((resolvedIndex == null || resolvedIndex < 0) && s.seriesId) {
+              resolvedIndex = seriesList.findIndex(
+                (serie) => serie.id === s.seriesId
+              );
+            }
+            if ((resolvedIndex == null || resolvedIndex < 0) && s.seriesName) {
+              resolvedIndex = seriesList.findIndex(
+                (serie) => serie.name === s.seriesName
+              );
+            }
+            if (resolvedIndex != null && resolvedIndex >= 0 && resolvedIndex < seriesList.length) {
+              return chart2.getVisual(
+                { seriesIndex: resolvedIndex },
+                "color"
+              );
+            }
+            return void 0;
+          } catch (e) {
+          }
+        }
+      },
+      getFrame() {
+        return frameRef.current;
+      },
+      toggleLegend(name, selected) {
+        const chart2 = echartInstanceRef.current;
+        if (selected == null) {
+          chart2?.dispatchAction({
+            type: "legendToggleSelect",
+            name
+          });
+        } else {
+          chart2?.dispatchAction({
+            type: selected ? "legendSelect" : "legendUnSelect",
+            name
+          });
+        }
+      },
+      getSeries(seriesId) {
+        const chart2 = echartInstanceRef.current;
+        if (chart2) {
+          const { series: s } = chart2.getOption();
+          const series = s;
+          return series?.find((s2) => s2.id == seriesId);
+        }
+      },
+      resize: (size) => {
+        const chart2 = echartInstanceRef.current;
+        chart2?.resize(size);
+      }
+    };
+  }, []);
+  (0, import_react12.useImperativeHandle)(forwardedRef, () => {
+    return chartHandle;
+  }, [chartHandle]);
+  const onResize = (0, import_react12.useCallback)(({ width, height }) => {
+    const chart2 = echartInstanceRef.current;
+    chart2?.resize({
+      width: width ?? void 0,
+      height: height ?? void 0
+    });
+  }, []);
+  const {
+    // width,
+    // height,
+    ref: chartRef
+  } = (0, import_react_resize_detector.useResizeDetector)({
+    onResize,
+    refreshMode: "throttle",
+    refreshRate: 100
+  });
+  (0, import_react12.useEffect)(() => {
+    let instance;
+    const containerNode = frameRef.current?.querySelector(".echart-container");
+    if (containerNode) {
+      instance = (0, import_core2.init)(containerNode, theme, {
+        renderer: chartRender,
+        locale: "EN"
+      });
+      echartInstanceRef.current = instance;
+      setChart(instance);
+    }
+    return () => {
+      echartInstanceRef.current = void 0;
+      instance?.dispose();
+    };
+  }, [theme, chartRender]);
+  (0, import_react12.useEffect)(() => {
+    if (!chart || chart.isDisposed()) {
+      return;
+    }
+    chart.on("legendselected", (event) => {
+      setLegendSelected(event.selected);
+    });
+    chart.on("legendunselected", (event) => {
+      setLegendSelected(event.selected);
+    });
+    chart.on("legendselectchanged", (event) => {
+      setLegendSelected(event.selected);
+    });
+    chart.on("brushEnd", (params) => {
+      const areas = params.areas[0];
+      if (areas) {
+        const start = areas.coordRange[0];
+        const end = areas.coordRange[1];
+        onSelect && onSelect(start, end);
+      }
+    });
+    if (onZoom) {
+      chart.on("dataZoom", (params) => {
+        onZoom(params.start, params.end);
+      });
+    }
+    return () => {
+      if (chart.isDisposed()) return;
+      chart.off("legendselectchanged");
+      chart.off("brushEnd");
+      chart.off("dataZoom");
+    };
+  }, [chart, onSelect, onZoom]);
+  (0, import_react12.useEffect)(() => {
+    if (!chart || chart.isDisposed() || !onClick) {
+      return;
+    }
+    chart.getZr()?.on("click", (params) => {
+      const pointInPixel = [params.offsetX, params.offsetY];
+      const pointInGrid = chart.convertFromPixel("grid", pointInPixel);
+      onClick(pointInGrid, params);
+    });
+    if (onSeriesEvent) {
+      chart.on("click", "series", (params) => {
+        onSeriesEvent?.("click", params);
+      });
+      chart.on("mouseover", "series", (params) => {
+        onSeriesEvent?.("mouseover", params);
+      });
+      chart.on("mouseout", "series", (params) => {
+        onSeriesEvent?.("mouseout", params);
+      });
+    }
+    return () => {
+      if (chart.isDisposed()) return;
+      chart.getZr()?.off("click");
+      if (onSeriesEvent) {
+        chart.off("click");
+        chart.off("mouseout");
+        chart.off("mouseover");
+      }
+    };
+  }, [chart, onClick, onSeriesEvent, onInitChart]);
+  const processedOption = (0, import_react12.useMemo)(() => {
+    if (!option) return option;
+    const processedOpt = { ...option };
+    const graphicElements = [];
+    let hasYAxisName = false;
+    let hasXAxisName = false;
+    const textColor = isDarkMode ? "#A6A6A6" : "#6E7079";
+    const createAxisNameElement = (name, isYAxis, axisIndex = 0) => {
+      const baseStyle = {
+        text: name,
+        fontSize: 11,
+        fontFamily: sansFontFamily,
+        fontWeight: 600,
+        fill: textColor,
+        textAlign: "center",
+        textVerticalAlign: "middle"
+      };
+      if (isYAxis) {
+        return {
+          type: "text",
+          left: axisIndex === 0 ? 8 : "right",
+          top: "middle",
+          rotation: Math.PI / 2,
+          style: baseStyle,
+          z: 100,
+          silent: true
+        };
+      } else {
+        return {
+          type: "text",
+          left: "center",
+          bottom: axisIndex === 0 ? 8 : "top",
+          style: baseStyle,
+          z: 100,
+          silent: true
+        };
+      }
+    };
+    const processAxisName = (axisConfig, isYAxis, axisIndex = 0) => {
+      if (axisConfig && typeof axisConfig === "object" && axisConfig.name) {
+        if (isYAxis) {
+          hasYAxisName = true;
+        } else {
+          hasXAxisName = true;
+        }
+        const { name, ...restAxis } = axisConfig;
+        const graphicElement = createAxisNameElement(name, isYAxis, axisIndex);
+        graphicElements.push(graphicElement);
+        return restAxis;
+      }
+      return axisConfig;
+    };
+    const processAxisArray = (axisOption, isYAxis) => {
+      if (!axisOption) return axisOption;
+      if (Array.isArray(axisOption)) {
+        return axisOption.map(
+          (axis, index) => processAxisName(axis, isYAxis, index)
+        );
+      } else {
+        return processAxisName(axisOption, isYAxis, 0);
+      }
+    };
+    processedOpt.yAxis = processAxisArray(option.yAxis, true);
+    processedOpt.xAxis = processAxisArray(option.xAxis, false);
+    if (hasYAxisName || hasXAxisName) {
+      const originalGrid = processedOpt.grid || {};
+      const adjustGridSpacing = (gridItem) => ({
+        ...gridItem,
+        left: hasYAxisName ? typeof gridItem.left === "number" ? gridItem.left + 20 : 32 : gridItem.left,
+        bottom: hasXAxisName ? typeof gridItem.bottom === "number" ? gridItem.bottom + 20 : 28 : gridItem.bottom
+      });
+      processedOpt.grid = Array.isArray(originalGrid) ? originalGrid.map(adjustGridSpacing) : adjustGridSpacing(originalGrid);
+    }
+    if (graphicElements.length > 0) {
+      const existingGraphic = processedOpt.graphic;
+      if (existingGraphic) {
+        processedOpt.graphic = Array.isArray(existingGraphic) ? [...existingGraphic, ...graphicElements] : [existingGraphic, ...graphicElements];
+      } else {
+        processedOpt.graphic = graphicElements;
+      }
+    }
+    return processedOpt;
+  }, [option, isDarkMode]);
+  (0, import_react12.useEffect)(() => {
+    if (!chart || chart.isDisposed()) {
+      return;
+    }
+    try {
+      chart.setOption(
+        {
+          ...processedOption,
+          legend: {
+            ...processedOption.legend,
+            // Persist legend selected state between re-render.
+            ...legendSelected ? { selected: legendSelected } : {}
+          }
+        },
+        { ...settings, notMerge: true }
+      );
+    } catch (e) {
+      console.error("echarts set option failed", e, processedOption);
+    }
+    onInitChart?.(chart);
+    if (!isMobile()) {
+      chart.dispatchAction({
+        type: "brush",
+        command: "clear",
+        areas: []
+      });
+      chart.dispatchAction({
+        type: "takeGlobalCursor",
+        key: "brush",
+        brushOption: {
+          brushType: "lineX",
+          brushMode: "single"
+        }
+      });
+    }
+  }, [
+    chart,
+    processedOption,
+    settings,
+    theme,
+    onSelect,
+    legendSelected,
+    onInitChart
+  ]);
+  (0, import_react12.useEffect)(() => {
+    if (loading) {
+      setLegendRendered(false);
+    }
+  }, [loading]);
+  (0, import_react12.useEffect)(() => {
+    if (chart && !chart.isDisposed()) {
+      chart.group = group || "";
+    }
+  }, [chart, group]);
+  const onMouseDown = (0, import_react12.useCallback)(
+    (event) => {
+      if (event.button !== 0 && chartRef.current) {
+        chartRef.current.querySelector(chartRender)?.dispatchEvent(
+          new MouseEvent("mouseup", event)
+        );
+      }
+    },
+    [chartRef, chartRender]
+  );
+  const legends = noLegend ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: chart && !loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    ChartLegend,
+    {
+      legend: option?.legend?.data || [],
+      chartHandle,
+      legendSelected,
+      returnedSeries,
+      totalSeries,
+      onRendered: setLegendRendered
+    }
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: "relative mb-1 grid h-full",
+      style: { gridTemplateRows: "1fr max-content", height: "270px", ...style },
+      onMouseDown,
+      ref: frameRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            ref: chartRef,
+            className: "echart-container min-h-0 w-full min-w-0"
+          }
+        ),
+        legends,
+        loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_ui_core6.BarLoading,
+          {
+            className: "bg-default-bg absolute w-full",
+            hint: "Loading",
+            width: 100
+          }
+        )
+      ]
+    }
+  );
+};
+var ReactEChartsBase = (0, import_react12.forwardRef)(ReactEChartsBaseComponent);
+
+// src/charts/RefreshContext.tsx
+var import_react13 = require("react");
+var import_ui_core7 = require("@sentio/ui-core");
+var import_io = require("react-icons/io");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var RefreshContext = (0, import_react13.createContext)({});
+var RefreshButton = (props) => {
+  const { refresh, isRefreshing } = (0, import_react13.useContext)(RefreshContext);
+  if (!refresh) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "grid items-center justify-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_ui_core7.Button,
+    {
+      size: "sm",
+      role: "text",
+      onClick: (evt) => {
+        evt.preventDefault();
+        refresh();
+      },
+      processing: isRefreshing,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_io.IoMdRefresh, {}),
+      className: "text-text-foreground-secondary!",
+      ...props,
+      children: "Retry"
+    }
+  ) });
+};
+
+// src/charts/icons/LineIcon.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SvgIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { clipPath: "url(#clip0_1774_9563)", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "path",
+        {
+          d: "M12.6191 13.1249H1.35352C1.21672 13.1249 1.10049 13.0771 1.00483 12.9814C0.909161 12.8857 0.861328 12.7695 0.861328 12.6327V1.35352C0.861328 1.21672 0.909161 1.10049 1.00483 1.00483C1.10049 0.909161 1.21672 0.861328 1.35352 0.861328C1.49031 0.861328 1.60654 0.909161 1.7022 1.00483C1.79787 1.10049 1.8457 1.21672 1.8457 1.35352V12.1405H12.6191C12.7559 12.1405 12.8722 12.1883 12.9678 12.284C13.0635 12.3797 13.1113 12.4959 13.1113 12.6327C13.1113 12.7695 13.0635 12.8857 12.9678 12.9814C12.8722 13.0771 12.7559 13.1249 12.6191 13.1249ZM5.26345 10.1582C5.0902 10.1582 4.95341 10.0853 4.85308 9.93945L2.7067 6.52127C2.63379 6.40285 2.61104 6.27758 2.63845 6.14545C2.66587 6.01333 2.73645 5.91081 2.8502 5.83789C2.96395 5.76497 3.08704 5.74222 3.21945 5.76964C3.35187 5.79706 3.45439 5.86545 3.52702 5.97483L5.05827 8.46333L5.68739 6.04352C5.72385 5.89768 5.81047 5.79283 5.94727 5.72895L8.43576 4.52583C8.55418 4.47099 8.67274 4.45962 8.79145 4.4917C8.91016 4.52379 9.00583 4.59437 9.07845 4.70345L10.3227 6.72689L12.155 1.21702C12.2005 1.08927 12.2826 0.993599 12.4013 0.930016C12.52 0.866432 12.6431 0.857245 12.7705 0.902453C12.898 0.947661 12.9936 1.02977 13.0575 1.14877C13.1214 1.26777 13.1306 1.39085 13.0851 1.51802L10.9247 8.03939C10.8608 8.24006 10.724 8.35177 10.5143 8.37452C10.3046 8.39727 10.1451 8.32202 10.0357 8.14877L8.46333 5.60558L6.59039 6.50814L5.74252 9.78939C5.68768 9.9991 5.55556 10.1177 5.34614 10.1451C5.31872 10.1541 5.29131 10.1586 5.26389 10.1586L5.26345 10.1582Z",
+          fill: "currentColor"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("clipPath", { id: "clip0_1774_9563", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var LineIcon_default = SvgIcon;
+
+// src/charts/icons/AreaIcon.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SvgIcon2 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { clipPath: "url(#clip0_1774_9545)", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "path",
+        {
+          d: "M12.6193 13.1249H1.35364C1.21685 13.1249 1.10062 13.0771 1.00495 12.9814C0.909284 12.8857 0.86145 12.7695 0.86145 12.6327V1.35352C0.86145 1.21672 0.909284 1.10049 1.00495 1.00483C1.10062 0.909161 1.21685 0.861328 1.35364 0.861328C1.49043 0.861328 1.60666 0.909161 1.70233 1.00483C1.79799 1.10049 1.84583 1.21672 1.84583 1.35352V12.1405H12.6193C12.7561 12.1405 12.8723 12.1883 12.968 12.284C13.0636 12.3797 13.1115 12.4959 13.1115 12.6327C13.1115 12.7695 13.0636 12.8857 12.968 12.9814C12.8723 13.0771 12.7561 13.1249 12.6193 13.1249ZM2.62501 10.9374L4.22451 8.08008C4.26097 8.0162 4.31566 7.97289 4.38858 7.95014C4.46149 7.92739 4.53441 7.92972 4.60733 7.95714L6.12501 8.66808L7.73851 6.33008C7.83885 6.19329 7.96193 6.16135 8.10776 6.23427L9.61189 6.99989L11.7994 3.56814C11.8633 3.46781 11.9521 3.43368 12.0658 3.46577C12.1796 3.49785 12.2366 3.5731 12.2369 3.69152V10.8009C12.2369 10.9467 12.1845 11.072 12.0798 11.1767C11.9751 11.2814 11.8498 11.3338 11.704 11.3338H2.87176C2.77143 11.3338 2.69399 11.2905 2.63945 11.2038C2.58491 11.1172 2.58039 11.0284 2.62589 10.9374H2.62501Z",
+          fill: "currentColor"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("clipPath", { id: "clip0_1774_9545", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var AreaIcon_default = SvgIcon2;
+
+// src/charts/icons/BarIcon.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SvgIcon3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "path",
+      {
+        d: "M2.12791 1.5625V12.4375C2.12791 12.5938 2.07311 12.7267 1.96349 12.836C1.85387 12.9453 1.7207 13 1.56396 13C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375V1.5625C1 1.40617 1.05481 1.27333 1.16442 1.164C1.27404 1.05467 1.40722 1 1.56396 1C1.7207 1 1.85387 1.05467 1.96349 1.164C2.07311 1.27333 2.12791 1.40617 2.12791 1.5625ZM1.56396 11.875H12.436C12.5928 11.875 12.726 11.9297 12.8356 12.039C12.9452 12.1483 13 12.2812 13 12.4375C13 12.5938 12.9452 12.7267 12.8356 12.836C12.726 12.9453 12.5928 13 12.436 13H1.56396C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375C1 12.2812 1.05481 12.1483 1.16442 12.039C1.27404 11.9297 1.40722 11.875 1.56396 11.875ZM5.12014 4.578V10.375C5.12014 10.5313 5.06534 10.6642 4.95572 10.7735C4.8461 10.8828 4.71293 10.9375 4.55619 10.9375C4.39945 10.9375 4.26627 10.8828 4.15665 10.7735C4.04704 10.6642 3.99223 10.5313 3.99223 10.375V4.578C3.99223 4.42167 4.04704 4.28883 4.15665 4.1795C4.26627 4.07017 4.39945 4.0155 4.55619 4.0155C4.71293 4.0155 4.8461 4.07017 4.95572 4.1795C5.06534 4.28883 5.12014 4.42167 5.12014 4.578ZM11.1196 2.5465V10.3745C11.1196 10.5308 11.0648 10.6637 10.9552 10.773C10.8456 10.8823 10.7124 10.937 10.5557 10.937C10.3989 10.937 10.2658 10.8823 10.1562 10.773C10.0465 10.6637 9.99173 10.5308 9.99173 10.3745V2.5465C9.99173 2.39017 10.0465 2.25733 10.1562 2.148C10.2658 2.03867 10.3989 1.984 10.5557 1.984C10.7124 1.984 10.8456 2.03867 10.9552 2.148C11.0648 2.25733 11.1196 2.39017 11.1196 2.5465ZM8.11187 6.5465V10.3745C8.11187 10.5308 8.05706 10.6637 7.94745 10.773C7.83783 10.8823 7.70465 10.937 7.54792 10.937C7.39118 10.937 7.258 10.8823 7.14838 10.773C7.03877 10.6637 6.98396 10.5308 6.98396 10.3745V6.5465C6.98396 6.39017 7.03877 6.25733 7.14838 6.148C7.258 6.03867 7.39118 5.984 7.54792 5.984C7.69429 5.984 7.8248 6.03867 7.93943 6.148C8.05406 6.25733 8.11154 6.39017 8.11187 6.5465Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var BarIcon_default = SvgIcon3;
+
+// src/charts/icons/BarGuageIcon.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var SvgIcon4 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "currentColor",
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "path",
+        {
+          d: "M2.12791 1.5625V12.4375C2.12791 12.5938 2.07311 12.7267 1.96349 12.836C1.85387 12.9453 1.7207 13 1.56396 13C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375V1.5625C1 1.40617 1.05481 1.27333 1.16442 1.164C1.27404 1.05467 1.40722 1 1.56396 1C1.7207 1 1.85387 1.05467 1.96349 1.164C2.07311 1.27333 2.12791 1.40617 2.12791 1.5625ZM1.56396 11.875H12.436C12.5928 11.875 12.726 11.9297 12.8356 12.039C12.9452 12.1483 13 12.2812 13 12.4375C13 12.5938 12.9452 12.7267 12.8356 12.836C12.726 12.9453 12.5928 13 12.436 13H1.56396C1.40722 13 1.27404 12.9453 1.16442 12.836C1.05481 12.7267 1 12.5938 1 12.4375C1 12.2812 1.05481 12.1483 1.16442 12.039C1.27404 11.9297 1.40722 11.875 1.56396 11.875Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "path",
+        {
+          d: "M3.64159 4.02495H9.43859C9.59493 4.02495 9.72776 3.97014 9.83709 3.86052C9.94643 3.75091 10.0011 3.61773 10.0011 3.46099C10.0011 3.30425 9.94643 3.17108 9.83709 3.06146C9.72776 2.95184 9.59493 2.89703 9.43859 2.89703L3.64159 2.89703C3.48526 2.89703 3.35243 2.95184 3.24309 3.06146C3.13376 3.17108 3.07909 3.30425 3.07909 3.46099C3.07909 3.61773 3.13376 3.75091 3.24309 3.86052C3.35243 3.97014 3.48526 4.02495 3.64159 4.02495Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "path",
+        {
+          d: "M3.64209 10.0244H11.4701C11.6264 10.0244 11.7593 9.96964 11.8686 9.86002C11.9779 9.7504 12.0326 9.61723 12.0326 9.46049C12.0326 9.30375 11.9779 9.17057 11.8686 9.06096C11.7593 8.95134 11.6264 8.89653 11.4701 8.89653H3.64209C3.48576 8.89653 3.35293 8.95134 3.24359 9.06096C3.13426 9.17057 3.07959 9.30375 3.07959 9.46049C3.07959 9.61723 3.13426 9.7504 3.24359 9.86002C3.35293 9.96964 3.48576 10.0244 3.64209 10.0244Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "path",
+        {
+          d: "M3.64209 7.01668L7.47009 7.01668C7.62643 7.01634 7.75926 6.95886 7.86859 6.84423C7.97793 6.7296 8.03259 6.5991 8.03259 6.45272C8.03259 6.29598 7.97793 6.1628 7.86859 6.05319C7.75926 5.94357 7.62643 5.88876 7.47009 5.88876H3.64209C3.48576 5.88876 3.35293 5.94357 3.24359 6.05319C3.13426 6.1628 3.07959 6.29598 3.07959 6.45272C3.07959 6.60946 3.13426 6.74263 3.24359 6.85225C3.35293 6.96187 3.48576 7.01668 3.64209 7.01668Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+var BarGuageIcon_default = SvgIcon4;
+
+// src/charts/icons/PieIcon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SvgIcon5 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { clipPath: "url(#clip0_28267_7202)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "path",
+          {
+            d: "M5.83329 1.86662C4.92079 2.07816 4.08149 2.52998 3.40247 3.17523C2.72345 3.82048 2.22942 4.63564 1.97164 5.53618C1.71386 6.43671 1.70171 7.38982 1.93644 8.29663C2.17118 9.20345 2.64426 10.0309 3.30661 10.6933C3.96896 11.3556 4.79646 11.8287 5.70327 12.0635C6.61009 12.2982 7.56319 12.286 8.46373 12.0283C9.36426 11.7705 10.1794 11.2765 10.8247 10.5974C11.4699 9.91841 11.9217 9.07912 12.1333 8.16662C12.1333 8.01191 12.0718 7.86353 11.9624 7.75414C11.853 7.64474 11.7047 7.58328 11.55 7.58328H7.58329C7.27387 7.58328 6.97713 7.46037 6.75833 7.24157C6.53954 7.02278 6.41662 6.72604 6.41662 6.41662V2.33328C6.40938 2.26417 6.38848 2.19719 6.35515 2.13621C6.32182 2.07524 6.27671 2.02149 6.22245 1.97808C6.16819 1.93467 6.10585 1.90247 6.03905 1.88333C5.97224 1.8642 5.90231 1.85852 5.83329 1.86662Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "path",
+          {
+            d: "M8.75 2.04175C9.49067 2.30255 10.1634 2.72617 10.7187 3.28142C11.2739 3.83668 11.6975 4.50941 11.9583 5.25008H9.33333C9.17862 5.25008 9.03025 5.18862 8.92085 5.07923C8.81146 4.96983 8.75 4.82146 8.75 4.66675V2.04175Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("clipPath", { id: "clip0_28267_7202", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var PieIcon_default = SvgIcon5;
+
+// src/charts/icons/QueryValueIcon.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SvgIcon6 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("g", { clipPath: "url(#clip0_3670_4424)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M11.5 1.5H2.5C1.67157 1.5 1 2.11561 1 2.875V11.125C1 11.8844 1.67157 12.5 2.5 12.5H11.5C12.3284 12.5 13 11.8844 13 11.125V2.875C13 2.11561 12.3284 1.5 11.5 1.5Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M7.98188 5.77273H6.39097L5.75461 5.13636L6.39097 4.5H7.98188L8.61824 5.13636L7.98188 5.77273Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M7.98188 11.5H6.39097L5.75461 10.8637L6.39097 10.2273H7.98188L8.61824 10.8637L7.98188 11.5Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M8.30005 9.90907V6.09089L8.93641 5.45453L9.57278 6.09089V9.90907L8.93641 10.5454L8.30005 9.90907Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M4.80005 9.90907V6.09089L5.43641 5.45453L6.07278 6.09089V9.90907L5.43641 10.5454L4.80005 9.90907Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "path",
+          {
+            d: "M1 3.5L13 3.5",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("clipPath", { id: "clip0_3670_4424", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var QueryValueIcon_default = SvgIcon6;
+
+// src/charts/icons/ScatterIcon.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SvgIcon7 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { clipPath: "url(#clip0_28248_7302)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M1.75 1.75V12.25H12.25",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M4.66663 8.75879V8.76754",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M9.33337 9.34204V9.35079",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M4.66663 4.10083V4.10958",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M7 6.43408V6.44283",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "path",
+          {
+            d: "M11.0834 6.43408V6.44283",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("clipPath", { id: "clip0_28248_7302", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var ScatterIcon_default = SvgIcon7;
+
+// src/charts/icons/TableIcon.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var SvgIcon8 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("g", { clipPath: "url(#clip0_3670_4416)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M11.5 2H2.5C1.67157 2 1 2.55964 1 3.25V10.75C1 11.4404 1.67157 12 2.5 12H11.5C12.3284 12 13 11.4404 13 10.75V3.25C13 2.55964 12.3284 2 11.5 2Z",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M1 5L13 5",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "path",
+          {
+            d: "M6 2L6 12",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("clipPath", { id: "clip0_3670_4416", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var TableIcon_default = SvgIcon8;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AggregateInput,
+  AreaIcon,
   ArgumentInput,
   ArgumentType,
+  BarGuageIcon,
+  BarIcon,
+  ChartLegend,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
@@ -1065,8 +2977,19 @@ function LabelsInput({
   FunctionsPanel,
   LabelSearchProvider,
   LabelsInput,
+  LineIcon,
+  PieIcon,
+  QueryValueIcon,
+  ReactEChartsBase,
+  RefreshButton,
+  RefreshContext,
+  ScatterIcon,
   SystemLabels,
+  TableIcon,
   isAggrOrRollupFunction,
+  sentioColors,
+  sentioTheme,
+  sentioThemeDark,
   sortMetricByName,
   useLabelSearch,
   useLabelSearchContext