@sentio/ui-dashboard 0.2.6 → 0.2.7

package/dist/index.js

@@ -34,6 +34,7 @@ __export(index_exports, {
   AreaIcon: () => AreaIcon_default,
   ArgumentInput: () => ArgumentInput,
   ArgumentType: () => ArgumentType,
+  BarGaugeChart: () => BarGaugeChart,
   BarGaugeControls: () => BarGaugeControls,
   BarGuageIcon: () => BarGuageIcon_default,
   BarIcon: () => BarIcon_default,
@@ -54,6 +55,7 @@ __export(index_exports, {
   PieChart: () => PieChart2,
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
+  QueryValueChart: () => QueryValueChart,
   QueryValueIcon: () => QueryValueIcon_default,
   ReactEChartsBase: () => ReactEChartsBase,
   RefreshButton: () => RefreshButton,
@@ -3723,10 +3725,256 @@ ${percent}%`;
 );
 PieChart2.displayName = "PieChart";
 
+// src/charts/BarGaugeChart.tsx
+var import_react18 = require("react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var compareOption = { numeric: true };
+var BarGaugeChart = (0, import_react18.forwardRef)(
+  (props, ref) => {
+    const {
+      series: input,
+      legend,
+      valueFormatter,
+      config,
+      title,
+      minHeight,
+      loading,
+      style,
+      onInitChart
+    } = props;
+    const [series, setSeries] = (0, import_react18.useState)([]);
+    const [xAxis, setXAxis] = (0, import_react18.useState)();
+    const [yAxis, setYAxis] = (0, import_react18.useState)();
+    const isVertical = config?.barGauge?.direction === "VERTICAL";
+    (0, import_react18.useEffect)(() => {
+      const tmpData = input.map((s) => {
+        const d = s.data && s.data[0];
+        return { name: s.name, value: d && d[1] };
+      });
+      const sort = config?.barGauge?.sort;
+      switch (sort?.sortBy) {
+        case "ByName":
+          tmpData.sort(
+            (a, b) => sort.orderDesc ? b.name.localeCompare(a.name, void 0, compareOption) : a.name.localeCompare(b.name, void 0, compareOption)
+          );
+          break;
+        case "ByValue":
+          tmpData.sort(
+            (a, b) => sort.orderDesc ? b.value - a.value : a.value - b.value
+          );
+          break;
+      }
+      const series2 = [
+        {
+          type: "bar",
+          data: tmpData.map((d) => d.value),
+          label: {
+            show: config?.valueConfig ? config.valueConfig.showValueLabel : false,
+            position: config?.barGauge?.direction == "VERTICAL" ? "top" : "right",
+            formatter: ({ value }) => valueFormatter(value)
+          }
+        }
+      ];
+      const seriesAxis = {
+        type: "category",
+        data: tmpData.map((s) => s.name),
+        axisLabel: config?.barGauge?.direction == "VERTICAL" ? { interval: 0, rotate: 30 } : {}
+      };
+      if (config?.xAxis?.name) {
+        seriesAxis.name = config?.xAxis?.name;
+        seriesAxis.nameLocation = "middle";
+        seriesAxis.nameGap = isVertical ? 45 : 60;
+      }
+      const valueAxis = {
+        type: "value",
+        axisLabel: (
+          // show dates on value-axis label is weird
+          config?.valueConfig?.valueFormatter == "DateFormatter" ? void 0 : { formatter: (v) => valueFormatter(v) }
+        )
+      };
+      let xAxis2, yAxis2;
+      switch (config?.barGauge?.direction) {
+        case "VERTICAL":
+          xAxis2 = seriesAxis;
+          yAxis2 = valueAxis;
+          break;
+        case "HORIZONTAL":
+        default:
+          xAxis2 = valueAxis;
+          yAxis2 = seriesAxis;
+      }
+      setSeries(series2);
+      setXAxis(xAxis2);
+      setYAxis(yAxis2);
+    }, [
+      input,
+      config?.barGauge?.calculation,
+      config?.barGauge?.sort,
+      config?.valueConfig?.showValueLabel,
+      config?.xAxis?.name,
+      isVertical,
+      valueFormatter
+    ]);
+    const dataZoom = (0, import_react18.useMemo)(() => {
+      if (config?.barGauge?.direction == "HORIZONTAL") {
+        return [
+          {
+            show: series[0]?.data.length > 15,
+            type: "slider",
+            yAxisIndex: 0,
+            zoomLock: true,
+            width: 8,
+            right: 10,
+            top: 5,
+            bottom: 30,
+            minValueSpan: 5,
+            maxValueSpan: 15,
+            orient: "vertical",
+            handleSize: 0,
+            showDetail: false,
+            brushSelect: false,
+            showDataShadow: false
+          },
+          {
+            type: "inside",
+            id: "insideY",
+            yAxisIndex: 0,
+            zoomOnMouseWheel: false,
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true
+          }
+        ];
+      } else {
+        return [
+          {
+            show: series[0]?.data.length > 25,
+            type: "slider",
+            xAxisIndex: 0,
+            zoomLock: true,
+            height: 8,
+            bottom: 5,
+            maxValueSpan: 25,
+            minValueSpan: 10,
+            handleSize: "0",
+            showDetail: false,
+            orient: "horizontal",
+            brushSelect: false,
+            showDataShadow: false
+          },
+          {
+            type: "inside",
+            id: "insideX",
+            xAxisIndex: 0,
+            zoomOnMouseWheel: false,
+            moveOnMouseMove: true,
+            moveOnMouseWheel: true
+          }
+        ];
+      }
+    }, [config, series]);
+    const options = {
+      title: { text: title },
+      grid: {
+        top: title ? 48 : 16,
+        right: 40,
+        bottom: isVertical && config?.xAxis?.name ? 40 : 16,
+        left: !isVertical && config?.xAxis?.name ? 40 : 16,
+        containLabel: true
+      },
+      xAxis,
+      legend: { data: legend, top: -1e4, left: -1e4 },
+      toolbox: { show: false },
+      yAxis,
+      dataZoom,
+      animation: false,
+      series,
+      tooltip: {
+        trigger: "axis",
+        confine: true,
+        extraCssText: "max-width: 50%; max-height: 50vh; overflow-y: auto;"
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ReactEChartsBase,
+      {
+        ref,
+        loading,
+        option: options,
+        minHeight,
+        style,
+        noLegend: true,
+        onInitChart
+      }
+    ) });
+  }
+);
+BarGaugeChart.displayName = "BarGaugeChart";
+
+// src/charts/QueryValueChart.tsx
+var import_react19 = require("react");
+var import_react_resize_detector4 = require("react-resize-detector");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var QueryValueChart = (0, import_react19.forwardRef)(
+  (props, ref) => {
+    const {
+      series,
+      valueText,
+      textColor,
+      backgroundColor,
+      minHeight,
+      loading,
+      style,
+      onInitChart
+    } = props;
+    const { width, height, ref: ref2 } = (0, import_react_resize_detector4.useResizeDetector)();
+    const fontSize = (0, import_react19.useMemo)(() => {
+      return Math.min(
+        (width || 0) / String(valueText).length,
+        (height || 0) / 1.5
+      );
+    }, [width, height, valueText]);
+    const options = {
+      backgroundColor,
+      grid: { top: 0, right: 0, bottom: 0, left: 0 },
+      toolbox: { show: false },
+      animation: false,
+      series,
+      xAxis: { type: "time", show: false },
+      yAxis: { type: "value", show: false },
+      legend: { show: false },
+      graphic: {
+        type: "text",
+        z: 100,
+        left: "center",
+        top: "middle",
+        style: {
+          text: valueText,
+          fontSize,
+          stroke: textColor,
+          fill: textColor
+        }
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-full w-full", ref: ref2, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      ReactEChartsBase,
+      {
+        ref,
+        loading,
+        option: options,
+        minHeight,
+        style,
+        noLegend: true,
+        onInitChart
+      }
+    ) }) });
+  }
+);
+QueryValueChart.displayName = "QueryValueChart";
+
 // src/charts/options/LineControls.tsx
 var import_immer4 = require("immer");
 var import_ui_core11 = require("@sentio/ui-core");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var lineStyles = [
   { label: "Solid", value: "Solid" },
   { label: "Dotted", value: "Dotted" }
@@ -3746,13 +3994,13 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
       })
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_ui_core11.DisclosurePanel,
     {
       title: "Line style",
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           import_ui_core11.NewButtonGroup,
           {
             buttons: lineStyles,
@@ -3761,7 +4009,7 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
             small: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           import_ui_core11.Checkbox,
           {
             label: "Smooth Curves",
@@ -3775,16 +4023,16 @@ var LineControls = ({ config, defaultOpen, onChange }) => {
 };
 
 // src/charts/options/LabelControls.tsx
-var import_react18 = require("react");
+var import_react20 = require("react");
 var import_immer5 = require("immer");
 var import_ui_core12 = require("@sentio/ui-core");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var initialConfig = {
   columns: [],
   alias: ""
 };
 var LabelControls = ({ config, setConfig, defaultOpen }) => {
-  (0, import_react18.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (config?.columns && config.columns.length > 0 && !config.alias) {
       const aliasParts = [];
       config.columns.forEach((colConfig) => {
@@ -3814,31 +4062,31 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
       })
     );
   };
-  const _defaultOpen = (0, import_react18.useMemo)(() => {
+  const _defaultOpen = (0, import_react20.useMemo)(() => {
     if (defaultOpen) {
       return true;
     }
     return config?.alias !== "" || config?.columns && config.columns.length > 0;
   }, [config, defaultOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     import_ui_core12.DisclosurePanel,
     {
       title: "Label Controls",
       defaultOpen: _defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "inline-flex h-8", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2 font-medium", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "inline-flex h-8", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "sm:text-icontent border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-2 font-medium", children: [
             "Label Alias",
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               import_ui_core12.HelpIcon,
               {
-                text: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "text-icontent text-text-foreground", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "Series name override or template." }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+                text: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "text-icontent text-text-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: "Series name override or template." }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
                     "Ex.",
                     " ",
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-primary mx-1 font-semibold italic", children: "{{contract}}" }),
                     " ",
                     "will be replaced with the value of the contract label."
                   ] })
@@ -3846,7 +4094,7 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "input",
             {
               type: "text",
@@ -3857,7 +4105,7 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           import_ui_core12.Button,
           {
             type: "button",
@@ -3877,7 +4125,7 @@ var LabelControls = ({ config, setConfig, defaultOpen }) => {
 var import_immer6 = require("immer");
 var import_lodash5 = require("lodash");
 var import_ui_core13 = require("@sentio/ui-core");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultConfig = {
   pieType: "Pie",
   calculation: "LAST",
@@ -3912,14 +4160,14 @@ function PieChartControls({ config, defaultOpen, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_ui_core13.DisclosurePanel,
     {
       title: "Pie Chart Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "shadow-xs flex rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_ui_core13.NewButtonGroup,
           {
             small: true,
@@ -3928,21 +4176,21 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             onChange: onPieTypeChange
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "select",
             {
               value: config.calculation,
               className: "sm:text-ilabel text-text-foreground border-main hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
               onChange: (e) => onCalculationChange(e.target.value),
               children: CalculationItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_ui_core13.Checkbox,
           {
             checked: config?.showValue,
@@ -3951,7 +4199,7 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_ui_core13.Checkbox,
           {
             checked: config?.showPercent,
@@ -3960,7 +4208,7 @@ function PieChartControls({ config, defaultOpen, onChange }) {
             labelClassName: "whitespace-nowrap"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           import_ui_core13.Checkbox,
           {
             checked: config?.absValue,
@@ -3978,7 +4226,7 @@ function PieChartControls({ config, defaultOpen, onChange }) {
 var import_immer7 = require("immer");
 var import_lodash6 = require("lodash");
 var import_ui_core14 = require("@sentio/ui-core");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultConfig2 = {
   direction: "HORIZONTAL",
   calculation: "LAST",
@@ -4031,62 +4279,62 @@ function BarGaugeControls({ config, defaultOpen, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_ui_core14.DisclosurePanel,
     {
       title: "Bar Gauge Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs  flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Direction" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "shadow-xs  flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Direction" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "select",
             {
               value: config.direction,
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
               onChange: (e) => onDirectionChange(e.target.value),
               children: directionItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3 ", children: "Calculation" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "select",
             {
               value: config.calculation,
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7",
               onChange: (e) => onCalculationChange(e.target.value),
               children: CalculationItems2.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Sort by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "shadow-xs flex rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sm:text-ilabel border-main inline-flex items-center whitespace-nowrap  rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Sort by" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "select",
             {
               value: config?.sort?.sortBy,
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center border pl-4 pr-7",
               onChange: (e) => onSortByChange(e.target.value),
               children: sortByItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value, children: d.label }, d.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
               })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "select",
             {
               value: config?.sort?.orderDesc + "",
               className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 focus:ring-3 focus:ring-primary-600/30 focus:border-primary-600 inline-flex items-center rounded-r-md border border-l-0 pl-4 pr-7",
               onChange: (e) => onOrderChange(e.target.value === "true"),
               children: orderItems.map((d) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: d.value + "", children: d.label }, d.label);
+                return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value + "", children: d.label }, d.label);
               })
             }
           )
@@ -4104,7 +4352,7 @@ var import_ui_core16 = require("@sentio/ui-core");
 var import_lu5 = require("react-icons/lu");
 var import_ui_core15 = require("@sentio/ui-core");
 var import_immer8 = require("immer");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var operators = {
   ">": "greater than",
   ">=": "greater or equal",
@@ -4114,8 +4362,8 @@ var operators = {
   "<=": "less or equal"
 };
 var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex h-full w-full items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex h-full w-full items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: (0, import_ui_core15.classNames)(
@@ -4124,7 +4372,7 @@ var renderTreeLine = (index, isLast) => {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "h-px w-3 bg-gray-300" })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-px w-3 bg-gray-300" })
   ] }) });
 };
 function ValueStringMapping({ rules, onChange }) {
@@ -4155,31 +4403,31 @@ function ValueStringMapping({ rules, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full flex-col rounded-md py-2", children: [
     (rules || []).map((rule, index) => {
       const isLast = index === (rules || []).length - 1;
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "div",
         {
           className: "text-text-foreground flex h-10 items-center py-1",
           children: [
             renderTreeLine(index, isLast),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "select",
               {
                 value: rule.comparison,
                 onChange: (e) => changeRule(index, "comparison", e.target.value),
                 className: "rounded-r-0 sm:text-ilabel border-main text-text-foreground focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 inline-flex h-full items-center rounded-l-md border border-r-0 bg-gray-50 py-1 pl-4 pr-7",
                 children: Object.entries(operators).map(([op, display]) => {
-                  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("option", { value: op, children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("option", { value: op, children: [
                     "is ",
                     display
                   ] }, op);
                 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "input",
               {
                 type: "text",
@@ -4193,8 +4441,8 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "input",
               {
                 type: "text",
@@ -4208,14 +4456,14 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "button",
               {
                 type: "button",
                 className: "mx-2",
                 "aria-label": "remove",
                 onClick: () => removeRule(index),
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   import_lu5.LuTrash2,
                   {
                     className: "icon text-text-foreground-disabled",
@@ -4229,7 +4477,7 @@ function ValueStringMapping({ rules, onChange }) {
         index
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       import_ui_core15.Button,
       {
         type: "button",
@@ -4238,7 +4486,7 @@ function ValueStringMapping({ rules, onChange }) {
         "aria-label": "remove",
         onClick: addRule,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lu5.LuPlus, { className: (0, import_ui_core15.classNames)("h-4 w-4"), "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lu5.LuPlus, { className: (0, import_ui_core15.classNames)("h-4 w-4"), "aria-hidden": "true" }),
           "Add Formatting Rule"
         ]
       }
@@ -4247,7 +4495,7 @@ function ValueStringMapping({ rules, onChange }) {
 }
 
 // src/charts/options/ValueOptions.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var ValueFormatters = [
   { label: "Number", value: "NumberFormatter" },
   { label: "Date", value: "DateFormatter" },
@@ -4276,7 +4524,7 @@ var CurrencySymbols = [
 var AddonLabel = ({
   className,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "span",
   {
     className: (0, import_ui_core16.classNames)(
@@ -4352,9 +4600,9 @@ var ValueOptions = ({
   function numberAddons(style) {
     switch (style) {
       case "None":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-l-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "input",
             {
               disabled: true,
@@ -4365,9 +4613,9 @@ var ValueOptions = ({
         ] });
       case "Percent":
       case "Standard":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-x-0", children: "Fraction Digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "input",
             {
               type: "number",
@@ -4381,9 +4629,9 @@ var ValueOptions = ({
           )
         ] });
       case "Currency":
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-r-0", children: "Symbol" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-28 ", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             import_ui_core16.ComboInput,
             {
               onChange: onChangeSymbol,
@@ -4396,8 +4644,8 @@ var ValueOptions = ({
               value: config?.currencySymbol
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border", children: "Precision" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border", children: "Precision" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "input",
             {
               type: "number",
@@ -4412,9 +4660,9 @@ var ValueOptions = ({
           )
         ] });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-x-0", children: "Max significant digits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "input",
             {
               type: "number",
@@ -4429,10 +4677,10 @@ var ValueOptions = ({
         ] });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "rounded-l-md border border-r-0", children: "Value formatter" }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "select",
         {
           value: config.valueFormatter,
@@ -4442,49 +4690,49 @@ var ValueOptions = ({
           ),
           onChange: (e) => onChangeFormatter(e.target.value),
           children: formatters.map((d) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: d.value, children: d.label }, d.value);
           })
         }
       ),
-      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      config.valueFormatter == "NumberFormatter" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-l-0 border-r-0", children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "select",
           {
             value: config.style,
             className: "sm:text-ilabel border-main text-text-foreground hover:border-primary-600 inline-flex items-center border py-1 pl-4 pr-7 focus:ring-0",
             onChange: (e) => onStyleChange(e.target.value),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "None", children: "None" }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Compact", children: "Compact" }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Standard", children: "Standard" }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Scientific", children: "Scientific" }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Percent", children: "Percent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: "Currency", children: "Currency" })
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "None", children: "None" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Compact", children: "Compact" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Standard", children: "Standard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Scientific", children: "Scientific" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Percent", children: "Percent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: "Currency", children: "Currency" })
             ]
           }
         ),
         config.style && numberAddons(config.style)
       ] }),
-      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      config.valueFormatter == "DateFormatter" && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonLabel, { className: "border border-l-0", children: "Date format" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "select",
           {
             value: config.dateFormat,
             className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center rounded-r-md border  border-l-0  py-1  pl-4 pr-7",
             onChange: (e) => onChangeDateFormat(e.target.value),
             children: dateFormats.map((d) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("option", { value: d.value, children: d.label }, d.value);
+              return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("option", { value: d.value, children: d.label }, d.value);
             })
           }
         )
       ] })
     ] }) }),
-    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
-      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    (showPrefix || showSuffix) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "mt-2 flex items-center gap-4", children: [
+      showPrefix && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Prefix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "input",
           {
             type: "text",
@@ -4495,9 +4743,9 @@ var ValueOptions = ({
           }
         )
       ] }),
-      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      showSuffix && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "border-main hover:border-primary-600 focus-within:border-primary-600 focus-within:ring-3 focus-within:ring-primary-500/30 text-icontent inline-flex items-center rounded-md border", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-7.5 leading-7.5 border-r px-3", children: "Suffix" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "input",
           {
             type: "text",
@@ -4509,7 +4757,7 @@ var ValueOptions = ({
         )
       ] })
     ] }) }),
-    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    config.valueFormatter == "StringFormatter" && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       ValueStringMapping,
       {
         rules: config.mappingRules || [],
@@ -4523,7 +4771,7 @@ var ValueOptions = ({
 var import_lodash7 = require("lodash");
 var import_ui_core17 = require("@sentio/ui-core");
 var import_immer10 = require("immer");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var defaultConfig4 = {
   valueFormatter: "NumberFormatter",
   showValueLabel: false,
@@ -4550,14 +4798,14 @@ var ValueControls = ({
   function toggleTooltipTotal(checked) {
     config && onChange((0, import_immer10.produce)(config, (draft) => void (draft.tooltipTotal = checked)));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     import_ui_core17.DisclosurePanel,
     {
       title: "Value Options",
       defaultOpen,
       containerClassName: "w-full bg-default-bg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           ValueOptions,
           {
             onChange,
@@ -4567,8 +4815,8 @@ var ValueControls = ({
             showSuffix
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_ui_core17.Checkbox,
             {
               checked: config?.showValueLabel,
@@ -4576,7 +4824,7 @@ var ValueControls = ({
               label: "Show value label"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_ui_core17.Checkbox,
             {
               checked: config?.tooltipTotal,
@@ -4595,6 +4843,7 @@ var ValueControls = ({
   AreaIcon,
   ArgumentInput,
   ArgumentType,
+  BarGaugeChart,
   BarGaugeControls,
   BarGuageIcon,
   BarIcon,
@@ -4615,6 +4864,7 @@ var ValueControls = ({
   PieChart,
   PieChartControls,
   PieIcon,
+  QueryValueChart,
   QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,