@sentio/ui-dashboard 0.1.2 → 0.2.1

package/dist/index.mjs

@@ -677,7 +677,7 @@ function FunctionInput({ value, onChange }) {
       }
     ),
     /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ jsx4("div", { className: "h-px w-2.5 self-center bg-border-color" }),
+      /* @__PURE__ */ jsx4("div", { className: "bg-border-color h-px w-2.5 self-center" }),
       /* @__PURE__ */ jsx4(Popover, { className: "relative", children: ({ open }) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsxs3(
           Popover.Button,
@@ -732,7 +732,7 @@ function Functions({
   return /* @__PURE__ */ jsx4(Fragment2, { children: functions.map((f, fi) => {
     const def = FunctionMap[f.name];
     return /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center", children: [
-      /* @__PURE__ */ jsx4("div", { className: "h-px w-2.5 self-center bg-border-color" }),
+      /* @__PURE__ */ jsx4("div", { className: "bg-border-color h-px w-2.5 self-center" }),
       /* @__PURE__ */ jsxs3(
         "div",
         {
@@ -1001,20 +1001,2340 @@ function LabelsInput({
     }
   );
 }
+
+// src/charts/EchartsBase.tsx
+import {
+  useEffect as useEffect5,
+  useCallback as useCallback3,
+  useState as useState6,
+  useImperativeHandle,
+  forwardRef,
+  useRef as useRef3,
+  useMemo as useMemo4
+} from "react";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
+import { init, use } from "echarts/core";
+import {
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  SankeyChart
+} from "echarts/charts";
+import {
+  LegendComponent,
+  GridComponent,
+  TooltipComponent,
+  ToolboxComponent,
+  TitleComponent,
+  DataZoomComponent,
+  BrushComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  GraphicComponent,
+  VisualMapComponent
+} from "echarts/components";
+import { useResizeDetector } from "react-resize-detector";
+import { BarLoading } from "@sentio/ui-core";
+
+// src/charts/ChartLegend.tsx
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+
+// src/common/Tooltip.tsx
+import { useEffect as useEffect2 } from "react";
+import { useFloating as useFloating2, FloatingPortal, shift } from "@floating-ui/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Tooltip({ referenceElement, text }) {
+  const { x, y, refs, strategy } = useFloating2({
+    placement: "bottom",
+    middleware: [shift()]
+  });
+  useEffect2(() => {
+    if (referenceElement) refs.setReference(referenceElement);
+  }, [refs, referenceElement]);
+  if (!referenceElement || !text) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(FloatingPortal, { children: /* @__PURE__ */ jsx7(
+    "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
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var COLOR_UNSELECTED = "#dddddd";
+var ChartLegend = ({
+  legend,
+  legendSelected,
+  returnedSeries,
+  totalSeries,
+  onRendered,
+  chartHandle
+}) => {
+  const rootRef = useRef2(null);
+  const [tooltipText, setTooltipText] = useState4("");
+  const [tooltipReferenceElement, setTooltipReferenceElement] = useState4();
+  useEffect3(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    const offsetHeight = rootRef?.current?.parentElement?.offsetHeight || 0;
+    chartHandle?.resize({
+      height: offsetHeight - rootRef.current.offsetHeight
+    });
+    onRendered(true);
+  }, [chartHandle, onRendered]);
+  const onToggleLegend = useCallback(
+    (event, name, _seriesIndex) => {
+      if (event.altKey) {
+        legend.forEach((n) => {
+          chartHandle?.toggleLegend(n, n === name);
+        });
+        return;
+      }
+      chartHandle?.toggleLegend(name);
+    },
+    [chartHandle, legendSelected]
+  );
+  const highlightSeries = useCallback(
+    (index) => {
+      chartHandle?.highlightSeries({ seriesIndex: index });
+    },
+    [chartHandle]
+  );
+  const unhighlightSeries = useCallback(() => {
+    chartHandle?.highlightSeries(void 0);
+  }, [chartHandle]);
+  const onToggleAll = 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__ */ jsxs5(
+      "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__ */ jsx8(
+            "span",
+            {
+              className: "rounded-xs h-2.5 w-2.5",
+              style: {
+                backgroundColor: selected ? chartHandle?.getSeriesColor({ seriesName: name }) : COLOR_UNSELECTED
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: "truncate text-xs",
+              style: {
+                maxWidth: "12em",
+                color: selected ? void 0 : COLOR_UNSELECTED
+              },
+              children: name
+            }
+          )
+        ]
+      },
+      name + index
+    );
+  });
+  return /* @__PURE__ */ jsxs5(
+    "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__ */ jsxs5("div", { className: "font-semibold", style: { color: "#6B7280" }, children: [
+          "showing ",
+          returnedSeries,
+          " of ",
+          totalSeries,
+          " series"
+        ] }) : null,
+        /* @__PURE__ */ jsx8(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
+import { registerTheme } from "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;
+  registerTheme("sentio", sentioTheme);
+  registerTheme("sentio-dark", sentioThemeDark);
+}
+
+// src/utils/use-dark-mode.ts
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState5 } from "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] = useState5(defaultValue);
+  useEffect4(() => {
+    const instance = DarkModeListener.instance;
+    setIsDarkMode(instance.darkMode);
+    instance.addListener(setIsDarkMode);
+  }, []);
+  return isDarkMode;
+};
+
+// src/charts/EchartsBase.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+use([
+  LegendComponent,
+  PieChart,
+  LineChart,
+  ScatterChart,
+  MarkLineComponent,
+  MarkAreaComponent,
+  BarChart,
+  SankeyChart,
+  GridComponent,
+  TooltipComponent,
+  BrushComponent,
+  TitleComponent,
+  ToolboxComponent,
+  // A group of utility tools, which includes export, data view, dynamic type switching, data area zooming, and reset.
+  DataZoomComponent,
+  // Used in Line Graph Charts
+  CanvasRenderer,
+  // If you only need to use the canvas rendering mode, the bundle will not include the SVGRenderer module, which is not needed.
+  GraphicComponent,
+  SVGRenderer,
+  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] = useState6(
+    {}
+  );
+  const [chart, setChart] = useState6();
+  const echartInstanceRef = useRef3();
+  const [legendRendered, setLegendRendered] = useState6(false);
+  const chartRender = "canvas";
+  const frameRef = useRef3(null);
+  const chartHandle = useMemo4(() => {
+    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);
+      }
+    };
+  }, []);
+  useImperativeHandle(forwardedRef, () => {
+    return chartHandle;
+  }, [chartHandle]);
+  const onResize = useCallback3(({ width, height }) => {
+    const chart2 = echartInstanceRef.current;
+    chart2?.resize({
+      width: width ?? void 0,
+      height: height ?? void 0
+    });
+  }, []);
+  const {
+    // width,
+    // height,
+    ref: chartRef
+  } = useResizeDetector({
+    onResize,
+    refreshMode: "throttle",
+    refreshRate: 100
+  });
+  useEffect5(() => {
+    let instance;
+    const containerNode = frameRef.current?.querySelector(".echart-container");
+    if (containerNode) {
+      instance = init(containerNode, theme, {
+        renderer: chartRender,
+        locale: "EN"
+      });
+      echartInstanceRef.current = instance;
+      setChart(instance);
+    }
+    return () => {
+      echartInstanceRef.current = void 0;
+      instance?.dispose();
+    };
+  }, [theme, chartRender]);
+  useEffect5(() => {
+    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]);
+  useEffect5(() => {
+    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 = useMemo4(() => {
+    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]);
+  useEffect5(() => {
+    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
+  ]);
+  useEffect5(() => {
+    if (loading) {
+      setLegendRendered(false);
+    }
+  }, [loading]);
+  useEffect5(() => {
+    if (chart && !chart.isDisposed()) {
+      chart.group = group || "";
+    }
+  }, [chart, group]);
+  const onMouseDown = useCallback3(
+    (event) => {
+      if (event.button !== 0 && chartRef.current) {
+        chartRef.current.querySelector(chartRender)?.dispatchEvent(
+          new MouseEvent("mouseup", event)
+        );
+      }
+    },
+    [chartRef, chartRender]
+  );
+  const legends = noLegend ? null : /* @__PURE__ */ jsx9(Fragment4, { children: chart && !loading && /* @__PURE__ */ jsx9(
+    ChartLegend,
+    {
+      legend: option?.legend?.data || [],
+      chartHandle,
+      legendSelected,
+      returnedSeries,
+      totalSeries,
+      onRendered: setLegendRendered
+    }
+  ) });
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "relative mb-1 grid h-full",
+      style: { gridTemplateRows: "1fr max-content", height: "270px", ...style },
+      onMouseDown,
+      ref: frameRef,
+      children: [
+        /* @__PURE__ */ jsx9(
+          "div",
+          {
+            ref: chartRef,
+            className: "echart-container min-h-0 w-full min-w-0"
+          }
+        ),
+        legends,
+        loading && /* @__PURE__ */ jsx9(
+          BarLoading,
+          {
+            className: "bg-default-bg absolute w-full",
+            hint: "Loading",
+            width: 100
+          }
+        )
+      ]
+    }
+  );
+};
+var ReactEChartsBase = forwardRef(ReactEChartsBaseComponent);
+
+// src/charts/RefreshContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { Button as NewButton } from "@sentio/ui-core";
+import { IoMdRefresh } from "react-icons/io";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var RefreshContext = createContext2({});
+var RefreshButton = (props) => {
+  const { refresh, isRefreshing } = useContext2(RefreshContext);
+  if (!refresh) return null;
+  return /* @__PURE__ */ jsx10("div", { className: "grid items-center justify-items-center", children: /* @__PURE__ */ jsx10(
+    NewButton,
+    {
+      size: "sm",
+      role: "text",
+      onClick: (evt) => {
+        evt.preventDefault();
+        refresh();
+      },
+      processing: isRefreshing,
+      icon: /* @__PURE__ */ jsx10(IoMdRefresh, {}),
+      className: "text-text-foreground-secondary!",
+      ...props,
+      children: "Retry"
+    }
+  ) });
+};
+
+// src/charts/options/LineControls.tsx
+import { produce as produce4 } from "immer";
+import {
+  DisclosurePanel,
+  NewButtonGroup as ButtonGroup,
+  Checkbox
+} from "@sentio/ui-core";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var lineStyles = [
+  { label: "Solid", value: "Solid" },
+  { label: "Dotted", value: "Dotted" }
+];
+var LineControls = ({ config, defaultOpen, onChange }) => {
+  const setStyle = (style) => {
+    onChange(
+      produce4(config || {}, (draft) => {
+        draft.style = style;
+      })
+    );
+  };
+  const setSmooth = (smooth) => {
+    onChange(
+      produce4(config || {}, (draft) => {
+        draft.smooth = smooth;
+      })
+    );
+  };
+  return /* @__PURE__ */ jsx11(
+    DisclosurePanel,
+    {
+      title: "Line style",
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx11(
+          ButtonGroup,
+          {
+            buttons: lineStyles,
+            value: config?.style || "Solid",
+            onChange: setStyle
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Checkbox,
+          {
+            label: "Smooth Curves",
+            checked: config?.smooth,
+            onChange: setSmooth
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/charts/options/LabelControls.tsx
+import { useEffect as useEffect6, useMemo as useMemo5 } from "react";
+import { produce as produce5 } from "immer";
+import { Button as NewButton2, DisclosurePanel as DisclosurePanel2, HelpIcon as HelpIcon2 } from "@sentio/ui-core";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var initialConfig = {
+  columns: [],
+  alias: ""
+};
+var LabelControls = ({ config, setConfig, defaultOpen }) => {
+  useEffect6(() => {
+    if (config?.columns && config.columns.length > 0 && !config.alias) {
+      const aliasParts = [];
+      config.columns.forEach((colConfig) => {
+        if (!colConfig.name) return;
+        if (colConfig.showLabel === false && colConfig.showValue === false) {
+        } else if (colConfig.showValue === false) {
+          aliasParts.push(colConfig.name);
+        } else {
+          aliasParts.push(`{{${colConfig.name}}}`);
+        }
+      });
+      if (aliasParts.length > 0) {
+        const migratedAlias = aliasParts.join(", ");
+        setConfig(
+          produce5(config, (draft) => {
+            draft.alias = migratedAlias;
+            draft.columns = [];
+          })
+        );
+      }
+    }
+  }, [config, setConfig]);
+  const onAliasChanged = (alias) => {
+    setConfig(
+      produce5(config ?? initialConfig, (draft) => {
+        draft.alias = alias;
+      })
+    );
+  };
+  const _defaultOpen = useMemo5(() => {
+    if (defaultOpen) {
+      return true;
+    }
+    return config?.alias !== "" || config?.columns && config.columns.length > 0;
+  }, [config, defaultOpen]);
+  return /* @__PURE__ */ jsx12(
+    DisclosurePanel2,
+    {
+      title: "Label Controls",
+      defaultOpen: _defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ jsxs8("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__ */ jsx12(
+              HelpIcon2,
+              {
+                text: /* @__PURE__ */ jsxs8("div", { className: "text-icontent text-text-foreground", children: [
+                  /* @__PURE__ */ jsx12("div", { children: "Series name override or template." }),
+                  /* @__PURE__ */ jsxs8("div", { children: [
+                    "Ex.",
+                    " ",
+                    /* @__PURE__ */ jsx12("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
+                    " ",
+                    "will be replaced with the value of the contract label."
+                  ] })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              type: "text",
+              value: config?.alias || "",
+              onChange: (e) => onAliasChanged(e.target.value),
+              placeholder: "Enter alias...",
+              className: "focus:border-primary-500 sm:text-icontent border-main inline-flex w-64 items-center rounded-r-md border px-2"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx12(
+          NewButton2,
+          {
+            type: "button",
+            role: "link",
+            onClick: () => {
+              setConfig(initialConfig);
+            },
+            children: "Reset"
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// src/charts/options/PieChartControls.tsx
+import { produce as produce6 } from "immer";
+import { defaults } from "lodash";
+import {
+  Checkbox as Checkbox2,
+  DisclosurePanel as DisclosurePanel3,
+  NewButtonGroup as ButtonGroup2
+} from "@sentio/ui-core";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var defaultConfig = {
+  pieType: "Pie",
+  calculation: "LAST",
+  showPercent: true,
+  showValue: true,
+  absValue: false
+};
+var CalculationItems = [
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+var PieTypeItems = [
+  { label: "Pie", value: "Pie" },
+  { label: "Donut", value: "Donut" }
+];
+function PieChartControls({ config, defaultOpen, onChange }) {
+  config = defaults(config, defaultConfig);
+  function onCalculationChange(cal) {
+    config && onChange(produce6(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onPieTypeChange(pieType) {
+    config && onChange(produce6(config, (draft) => void (draft.pieType = pieType)));
+  }
+  function toggle(field, value) {
+    config && onChange(
+      produce6(config, (draft) => {
+        draft[field] = value;
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx13(
+    DisclosurePanel3,
+    {
+      title: "Pie Chart Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx13("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ jsx13(
+          ButtonGroup2,
+          {
+            small: true,
+            buttons: PieTypeItems,
+            value: config.pieType,
+            onChange: onPieTypeChange
+          }
+        ) }),
+        /* @__PURE__ */ jsxs9("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ jsx13("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md  border bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ jsx13(
+            "select",
+            {
+              value: config.calculation,
+              className: "sm:text-ilabel text-text-foreground border-main inline-flex items-center rounded-r-md border  border-l-0   pl-4 pr-7",
+              onChange: (e) => onCalculationChange(e.target.value),
+              children: CalculationItems.map((d) => {
+                return /* @__PURE__ */ jsx13("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx13(
+          Checkbox2,
+          {
+            checked: config?.showValue,
+            onChange: (v) => toggle("showValue", v),
+            label: "Show value",
+            labelClassName: "whitespace-nowrap"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          Checkbox2,
+          {
+            checked: config?.showPercent,
+            onChange: (v) => toggle("showPercent", v),
+            label: "Show percent",
+            labelClassName: "whitespace-nowrap"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          Checkbox2,
+          {
+            checked: config?.absValue,
+            onChange: (v) => toggle("absValue", v),
+            label: "Use absolute values",
+            labelClassName: "whitespace-nowrap"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/charts/options/BarGaugeControls.tsx
+import { produce as produce7 } from "immer";
+import { defaults as defaults2 } from "lodash";
+import { DisclosurePanel as DisclosurePanel4 } from "@sentio/ui-core";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var defaultConfig2 = {
+  direction: "HORIZONTAL",
+  calculation: "LAST",
+  sort: {
+    sortBy: "ByName",
+    orderDesc: true
+  }
+};
+var directionItems = [
+  { label: "Horizontal", value: "HORIZONTAL" },
+  { label: "Vertical", value: "VERTICAL" }
+];
+var CalculationItems2 = [
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+var sortByItems = [
+  { label: "Name", value: "ByName" },
+  { label: "Value", value: "ByValue" }
+];
+var orderItems = [
+  { label: "Ascendant", value: "false" },
+  { label: "Descendant", value: "true" }
+];
+function BarGaugeControls({ config, defaultOpen, onChange }) {
+  config = defaults2(config, defaultConfig2);
+  function onCalculationChange(cal) {
+    config && onChange(produce7(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onDirectionChange(dir) {
+    config && onChange(produce7(config, (draft) => void (draft.direction = dir)));
+  }
+  function onOrderChange(orderDesc) {
+    config && onChange(
+      produce7(config, (draft) => {
+        draft.sort = draft.sort || {};
+        draft.sort.orderDesc = orderDesc;
+      })
+    );
+  }
+  function onSortByChange(sortBy2) {
+    config && onChange(
+      produce7(config, (draft) => {
+        draft.sort = draft.sort || {};
+        draft.sort.sortBy = sortBy2;
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx14(
+    DisclosurePanel4,
+    {
+      title: "Bar Gauge Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "shadow-xs  flex rounded-md", children: [
+          /* @__PURE__ */ jsx14("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md  border bg-gray-50 px-3 ", children: "Direction" }),
+          /* @__PURE__ */ jsx14(
+            "select",
+            {
+              value: config.direction,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center rounded-r-md border  border-l-0   pl-4 pr-7",
+              onChange: (e) => onDirectionChange(e.target.value),
+              children: directionItems.map((d) => {
+                return /* @__PURE__ */ jsx14("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ jsx14("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md  border bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ jsx14(
+            "select",
+            {
+              value: config.calculation,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center rounded-r-md border  border-l-0   pl-4 pr-7",
+              onChange: (e) => onCalculationChange(e.target.value),
+              children: CalculationItems2.map((d) => {
+                return /* @__PURE__ */ jsx14("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ jsx14("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border bg-gray-50 px-3", children: "Sort by" }),
+          /* @__PURE__ */ jsx14(
+            "select",
+            {
+              value: config?.sort?.sortBy,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border    border-l-0   pl-4 pr-7",
+              onChange: (e) => onSortByChange(e.target.value),
+              children: sortByItems.map((d) => {
+                return /* @__PURE__ */ jsx14("option", { value: d.value, children: d.label }, d.value);
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "select",
+            {
+              value: config?.sort?.orderDesc + "",
+              className: "sm:text-ilabel border-main text-text-foreground 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__ */ jsx14("option", { value: d.value + "", children: d.label }, d.label);
+              })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/charts/icons/LineIcon.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var SvgIcon = ({ className }) => /* @__PURE__ */ jsxs11(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsx15("g", { clipPath: "url(#clip0_1774_9563)", children: /* @__PURE__ */ jsx15(
+        "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__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_1774_9563", children: /* @__PURE__ */ jsx15("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var LineIcon_default = SvgIcon;
+
+// src/charts/icons/AreaIcon.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var SvgIcon2 = ({ className }) => /* @__PURE__ */ jsxs12(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsx16("g", { clipPath: "url(#clip0_1774_9545)", children: /* @__PURE__ */ jsx16(
+        "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__ */ jsx16("defs", { children: /* @__PURE__ */ jsx16("clipPath", { id: "clip0_1774_9545", children: /* @__PURE__ */ jsx16("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var AreaIcon_default = SvgIcon2;
+
+// src/charts/icons/BarIcon.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var SvgIcon3 = ({ className }) => /* @__PURE__ */ jsx17(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: /* @__PURE__ */ jsx17(
+      "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
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var SvgIcon4 = ({ className }) => /* @__PURE__ */ jsxs13(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "currentColor",
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx18(
+        "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__ */ jsx18(
+        "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__ */ jsx18(
+        "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__ */ jsx18(
+        "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
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var SvgIcon5 = ({ className }) => /* @__PURE__ */ jsxs14(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsxs14("g", { clipPath: "url(#clip0_28267_7202)", children: [
+        /* @__PURE__ */ jsx19(
+          "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__ */ jsx19(
+          "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__ */ jsx19("defs", { children: /* @__PURE__ */ jsx19("clipPath", { id: "clip0_28267_7202", children: /* @__PURE__ */ jsx19("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var PieIcon_default = SvgIcon5;
+
+// src/charts/icons/QueryValueIcon.tsx
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+var SvgIcon6 = ({ className }) => /* @__PURE__ */ jsxs15(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsxs15("g", { clipPath: "url(#clip0_3670_4424)", children: [
+        /* @__PURE__ */ jsx20(
+          "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__ */ jsx20(
+          "path",
+          {
+            d: "M7.98188 5.77273H6.39097L5.75461 5.13636L6.39097 4.5H7.98188L8.61824 5.13636L7.98188 5.77273Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M7.98188 11.5H6.39097L5.75461 10.8637L6.39097 10.2273H7.98188L8.61824 10.8637L7.98188 11.5Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M8.30005 9.90907V6.09089L8.93641 5.45453L9.57278 6.09089V9.90907L8.93641 10.5454L8.30005 9.90907Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M4.80005 9.90907V6.09089L5.43641 5.45453L6.07278 6.09089V9.90907L5.43641 10.5454L4.80005 9.90907Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "path",
+          {
+            d: "M1 3.5L13 3.5",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx20("defs", { children: /* @__PURE__ */ jsx20("clipPath", { id: "clip0_3670_4424", children: /* @__PURE__ */ jsx20("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var QueryValueIcon_default = SvgIcon6;
+
+// src/charts/icons/ScatterIcon.tsx
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var SvgIcon7 = ({ className }) => /* @__PURE__ */ jsxs16(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsxs16("g", { clipPath: "url(#clip0_28248_7302)", children: [
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M1.75 1.75V12.25H12.25",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M4.66663 8.75879V8.76754",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M9.33337 9.34204V9.35079",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M4.66663 4.10083V4.10958",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M7 6.43408V6.44283",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "path",
+          {
+            d: "M11.0834 6.43408V6.44283",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx21("defs", { children: /* @__PURE__ */ jsx21("clipPath", { id: "clip0_28248_7302", children: /* @__PURE__ */ jsx21("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var ScatterIcon_default = SvgIcon7;
+
+// src/charts/icons/TableIcon.tsx
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+var SvgIcon8 = ({ className }) => /* @__PURE__ */ jsxs17(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className,
+    children: [
+      /* @__PURE__ */ jsxs17("g", { clipPath: "url(#clip0_3670_4416)", children: [
+        /* @__PURE__ */ jsx22(
+          "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__ */ jsx22(
+          "path",
+          {
+            d: "M1 5L13 5",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "path",
+          {
+            d: "M6 2L6 12",
+            stroke: "currentColor",
+            strokeWidth: "1.16667",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx22("defs", { children: /* @__PURE__ */ jsx22("clipPath", { id: "clip0_3670_4416", children: /* @__PURE__ */ jsx22("rect", { width: "14", height: "14", fill: "white" }) }) })
+    ]
+  }
+);
+var TableIcon_default = SvgIcon8;
 export {
   AggregateInput,
+  AreaIcon_default as AreaIcon,
   ArgumentInput,
   ArgumentType,
+  BarGaugeControls,
+  BarGuageIcon_default as BarGuageIcon,
+  BarIcon_default as BarIcon,
+  ChartLegend,
   EventsFunctionCategories,
   EventsFunctionMap,
   FunctionInput,
   FunctionMap,
   FunctionsCategories,
   FunctionsPanel,
+  LabelControls,
   LabelSearchProvider,
   LabelsInput,
+  LineControls,
+  LineIcon_default as LineIcon,
+  PieChartControls,
+  PieIcon_default as PieIcon,
+  QueryValueIcon_default as QueryValueIcon,
+  ReactEChartsBase,
+  RefreshButton,
+  RefreshContext,
+  ScatterIcon_default as ScatterIcon,
   SystemLabels,
+  TableIcon_default as TableIcon,
+  defaultConfig2 as defaultBarGaugeConfig,
+  defaultConfig as defaultPieConfig,
   isAggrOrRollupFunction,
+  sentioColors,
+  sentioTheme,
+  sentioThemeDark,
   sortMetricByName,
   useLabelSearch,
   useLabelSearchContext