@sentio/ui-dashboard 0.3.6 → 0.3.8

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   ChartTooltip: () => ChartTooltip,
   ChartTypeButtonGroup: () => ChartTypeButtonGroup,
   DEFAULT_HIGHLIGHT_KEY: () => DEFAULT_HIGHLIGHT_KEY,
+  DashboardRefresh: () => DashboardRefresh,
   DataControls: () => DataControls,
   EditDashboardDialog: () => EditDashboardDialog,
   EditGroupDialog: () => EditGroupDialog,
@@ -62,6 +63,7 @@ __export(index_exports, {
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
   QueryValueChart: () => QueryValueChart,
+  QueryValueControls: () => QueryValueControls,
   QueryValueIcon: () => QueryValueIcon_default,
   ReactEChartsBase: () => ReactEChartsBase,
   RefreshButton: () => RefreshButton,
@@ -69,9 +71,12 @@ __export(index_exports, {
   ScatterChartTooltip: () => ScatterChartTooltip,
   ScatterControls: () => ScatterControls,
   ScatterIcon: () => ScatterIcon_default,
+  SeriesControls: () => SeriesControls,
+  ShareDashboardDialog: () => ShareDashboardDialog,
   SystemLabels: () => SystemLabels,
   TableControls: () => TableControls,
   TableIcon: () => TableIcon_default,
+  TimeRangeOverride: () => TimeRangeOverride,
   TimeSeriesChart: () => TimeSeriesChart,
   ValueControls: () => ValueControls,
   ValueFormatters: () => ValueFormatters,
@@ -82,8 +87,10 @@ __export(index_exports, {
   defaultBarGaugeConfig: () => defaultConfig2,
   defaultDataConfig: () => defaultConfig5,
   defaultPieConfig: () => defaultConfig,
+  defaultQueryValueConfig: () => defaultConfig9,
   defaultScatterConfig: () => defaultConfig6,
   defaultTableConfig: () => defaultConfig7,
+  defaultTimeRangeOverrideConfig: () => defaultConfig8,
   defaultValueConfig: () => defaultConfig3,
   defaultValueControlsConfig: () => defaultConfig4,
   getDefaultValueConfig: () => getDefaultValueConfig,
@@ -4125,6 +4132,29 @@ function timeBefore(time, duration2, asStart = true) {
     return t.subtract(durationValue, import_ui_core11.TimeUnitShortNames[duration2.unit]);
   }
 }
+function fromTimeLike(tl) {
+  if (!tl) {
+    return void 0;
+  }
+  if (tl.relativeTime) {
+    const value = tl.relativeTime.value || 0;
+    return {
+      value: Math.abs(value),
+      unit: tl.relativeTime.unit,
+      sign: value < 0 ? -1 : 1
+    };
+  }
+  return import_dayjs4.default.unix(parseInt(tl.absoluteTime || ""));
+}
+function toTimeLike(t) {
+  if (import_dayjs4.default.isDayjs(t)) {
+    return { absoluteTime: `${t.unix()}` };
+  }
+  const rt = t;
+  return {
+    relativeTime: { unit: rt.unit, value: rt.sign * rt.value, align: rt.align }
+  };
+}
 
 // src/charts/TimeSeriesChart.tsx
 var import_ui_core15 = require("@sentio/ui-core");
@@ -7160,6 +7190,591 @@ function EditGroupDialog({
     }
   );
 }
+
+// src/dashboard/DashboardRefresh.tsx
+var import_dayjs6 = __toESM(require("dayjs"));
+var import_relativeTime = __toESM(require("dayjs/plugin/relativeTime"));
+var import_updateLocale = __toESM(require("dayjs/plugin/updateLocale"));
+var import_ui_core30 = require("@sentio/ui-core");
+var import_react27 = require("react");
+var import_io2 = require("react-icons/io");
+var import_en = __toESM(require("dayjs/locale/en"));
+var import_jsx_runtime42 = require("react/jsx-runtime");
+import_dayjs6.default.extend(import_relativeTime.default);
+import_dayjs6.default.extend(import_updateLocale.default);
+import_dayjs6.default.locale("en.short", {
+  ...import_en.default,
+  relativeTime: {
+    // relative time format strings, keep %s %d as the same
+    future: "in %s",
+    past: "%s ago",
+    s: "<1s",
+    m: "1min",
+    mm: "%dmin",
+    h: "1h",
+    hh: "%dh",
+    d: "1d",
+    dd: "%dd",
+    M: "1m",
+    MM: "%dm",
+    y: "1y",
+    yy: "%dy"
+  }
+});
+import_dayjs6.default.locale("en");
+var DashboardRefresh = ({ stats, onRefresh }) => {
+  const timeRef = (0, import_react27.useRef)(null);
+  const [fetching, setFetching] = (0, import_react27.useState)(false);
+  const [currentColor, setCurrentColor] = (0, import_react27.useState)("text-[#4CAF1D] border-[#4CAF1D] border" /* NORMAL */);
+  (0, import_react27.useEffect)(() => {
+    const updateFn = () => {
+      if (!stats || !stats.computedAt) return;
+      const computedAt = (0, import_dayjs6.default)(stats.computedAt).locale("en.short");
+      timeRef.current.textContent = computedAt.fromNow(true);
+      if (computedAt.isBefore((0, import_dayjs6.default)().subtract(1, "hour"))) {
+        setCurrentColor("text-[#D98200] border-[#D98200] border" /* WARNNING */);
+      } else {
+        setCurrentColor("text-[#4CAF1D] border-[#4CAF1D] border" /* NORMAL */);
+      }
+    };
+    updateFn();
+    const interval = setInterval(() => {
+      updateFn();
+    }, 1e3);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [stats]);
+  const onClick = (0, import_react27.useCallback)(() => {
+    setFetching((prevState) => {
+      if (prevState) return prevState;
+      onRefresh().finally(() => {
+        setFetching(false);
+      });
+      return true;
+    });
+  }, [onRefresh]);
+  (0, import_react27.useEffect)(() => {
+    if (typeof window == "object") {
+      window.addEventListener("refresh_all", onClick);
+      return () => {
+        window.removeEventListener("refresh_all", onClick);
+      };
+    }
+  }, []);
+  const showReload = fetching || stats?.isRefreshing;
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "div",
+    {
+      className: (0, import_ui_core30.classNames)(
+        "group/refresh relative ml-1 flex items-center gap-1 rounded-sm py-px pl-1 text-xs transition-all",
+        currentColor,
+        showReload ? "pr-5" : "pr-1.5 hover:pr-5"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "cursor-default text-[10px]", ref: timeRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "button",
+          {
+            onClick,
+            className: (0, import_ui_core30.classNames)(
+              "absolute right-1",
+              showReload ? "block" : "hidden group-hover/refresh:block"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              import_io2.IoMdRefresh,
+              {
+                className: (0, import_ui_core30.classNames)(
+                  "h-3.5 w-3.5",
+                  showReload ? "animate-spin" : ""
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/dashboard/ShareDashboardDialog.tsx
+var import_react28 = require("react");
+var import_ui_core31 = require("@sentio/ui-core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var ShareDashboardDialog = ({
+  open,
+  initData,
+  onUnshare,
+  onClose,
+  onConfigChange,
+  startTime,
+  endTime,
+  tz
+}) => {
+  const [isReadonly, setIsReadonly] = (0, import_react28.useState)(
+    initData?.config?.isReadonly ?? false
+  );
+  const [hideModifiers, setHideModifiers] = (0, import_react28.useState)(
+    initData?.config?.hideModifiers ?? false
+  );
+  const linkText = (0, import_react28.useMemo)(() => {
+    if (initData?.id) {
+      let timeSuffix = startTime && endTime ? `?from=${encodeURIComponent((0, import_ui_core31.dateTimeToString)(startTime))}&to=${encodeURIComponent((0, import_ui_core31.dateTimeToString)(endTime))}&tz=${tz}` : "";
+      if (tz) {
+        timeSuffix += `&tz=${tz}`;
+      }
+      return `${location.origin}/share/${initData?.id}${timeSuffix}`;
+    }
+    return "";
+  }, [initData?.id, startTime, endTime]);
+  const handleConfigChange = (newIsReadonly, newHideModifiers) => {
+    const config = {
+      isReadonly: newIsReadonly,
+      hideModifiers: newHideModifiers
+    };
+    onConfigChange?.(config);
+  };
+  const handleReadonlyChange = (checked) => {
+    setIsReadonly(checked);
+    handleConfigChange(checked, hideModifiers);
+  };
+  const handleHideModifiersChange = (checked) => {
+    setHideModifiers(checked);
+    handleConfigChange(isReadonly, checked);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    import_ui_core31.BaseDialog,
+    {
+      title: "Sharing: ON",
+      open,
+      onCancel: () => {
+        onUnshare?.();
+        onClose();
+      },
+      cancelText: "Revoke URL",
+      cancelProps: {
+        status: "danger"
+      },
+      okText: "Done",
+      onOk: () => {
+        onClose();
+      },
+      onClose,
+      buttonsClassName: "justify-between",
+      footerBorder: false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mx-4 my-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex overflow-hidden rounded-md border  pl-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-ilabel font-ilabel text-text-foreground flex-1 grow truncate leading-8", children: linkText }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "group cursor-pointer border-l  bg-gray-200 px-2 py-1 hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_ui_core31.CopyButton,
+            {
+              text: linkText,
+              size: 18,
+              className: "text-text-foreground group-hover:text-primary h-4 w-4 align-middle"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground-secondary mt-2 text-[11px]", children: "Anyone with the link can access this dashboard. You can revoke the link at any time." }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mt-4 space-y-3 border-t pt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground text-sm font-medium", children: "Access Settings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_ui_core31.Checkbox,
+                {
+                  checked: isReadonly,
+                  onChange: handleReadonlyChange,
+                  label: "Panel read-only access"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Viewers can only view the dashboard without entering panel edit mode or copy configuration." })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_ui_core31.Checkbox,
+                {
+                  checked: hideModifiers,
+                  onChange: handleHideModifiersChange,
+                  label: "Hide controls"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "text-text-foreground-secondary ml-6 text-xs", children: "Hide panel creator and modifier for viewers" })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/dashboard/TimeRangeOverride.tsx
+var import_lodash14 = require("lodash");
+var import_immer15 = require("immer");
+var import_ui_core32 = require("@sentio/ui-core");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var defaultConfig8 = {
+  enabled: false
+};
+function TimeRangeOverride({
+  config,
+  onChange,
+  globalStartTime,
+  globalEndTime,
+  globalTz,
+  onSetGlobalTimeRange
+}) {
+  config = (0, import_lodash14.defaults)(config || {}, defaultConfig8);
+  const setEnabled = (enabled) => {
+    config && onChange(
+      (0, import_immer15.produce)(config, (draft) => {
+        draft.enabled = enabled;
+        if (enabled) {
+          draft.timeRange = {
+            start: toTimeLike(globalStartTime),
+            end: toTimeLike(globalEndTime),
+            step: draft.timeRange?.step,
+            interval: draft.timeRange?.interval,
+            timezone: draft.timeRange?.timezone
+          };
+        }
+      })
+    );
+  };
+  function onTimeRangeChange(start, end, tz) {
+    if (config?.enabled) {
+      onChange(
+        (0, import_immer15.produce)(config, (draft) => {
+          draft.timeRange = {
+            start: toTimeLike(start),
+            end: toTimeLike(end),
+            timezone: tz,
+            step: draft.timeRange?.step,
+            interval: draft.timeRange?.interval
+          };
+        })
+      );
+    } else {
+      onSetGlobalTimeRange(start, end, tz);
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      import_ui_core32.Switch,
+      {
+        checked: config.enabled || false,
+        onChange: setEnabled,
+        label: "Override Global Time"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      import_ui_core32.TimeRangePicker,
+      {
+        startTime: config.enabled ? fromTimeLike(config.timeRange?.start) : globalStartTime,
+        endTime: config.enabled ? fromTimeLike(config.timeRange?.end) : globalEndTime,
+        tz: config.enabled ? config.timeRange?.timezone || globalTz : globalTz,
+        onChange: onTimeRangeChange
+      }
+    )
+  ] });
+}
+
+// src/dashboard/SeriesControls.tsx
+var import_react29 = require("react");
+var import_ui_core33 = require("@sentio/ui-core");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_lu10 = require("react-icons/lu");
+var import_lodash15 = require("lodash");
+var import_react30 = require("@headlessui/react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var seriesChartTypes = [
+  {
+    value: "default",
+    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lu10.LuMountainSnow, { className: "mr-2 h-4 w-4" }),
+      "Default"
+    ] })
+  },
+  {
+    value: "LINE",
+    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LineIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Line"
+    ] })
+  },
+  {
+    value: "BAR",
+    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(BarIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Bar"
+    ] })
+  },
+  {
+    value: "AREA",
+    label: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Area"
+    ] })
+  }
+];
+var SeriesControls = ({
+  config,
+  setSeriesConfig,
+  series,
+  enabled
+}) => {
+  const parentRef = (0, import_react29.useRef)(null);
+  const [isDisclosureOpen, setIsDisclosureOpen] = (0, import_react29.useState)(true);
+  const shouldVirtualize = series.length > 10;
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: shouldVirtualize && isDisclosureOpen ? series.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    overscan: 5
+    // Render 5 extra items outside viewport for smooth scrolling
+  });
+  (0, import_react29.useLayoutEffect)(() => {
+    if (isDisclosureOpen && shouldVirtualize && parentRef.current) {
+      const timeoutId = setTimeout(() => {
+        virtualizer.measure();
+      }, 10);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [isDisclosureOpen, shouldVirtualize, virtualizer]);
+  const handleSeriesTypeChange = (seriesName, selectedType) => {
+    const currentSeriesConfig = config?.seriesConfig || { series: {} };
+    if (selectedType === "default") {
+      const newSeriesConfig2 = (0, import_lodash15.cloneDeep)(currentSeriesConfig);
+      if (newSeriesConfig2.series && newSeriesConfig2.series[seriesName]) {
+        delete newSeriesConfig2.series[seriesName];
+      }
+      setSeriesConfig(newSeriesConfig2);
+      return;
+    }
+    const newSeriesConfig = {
+      ...currentSeriesConfig,
+      series: {
+        ...currentSeriesConfig.series,
+        [seriesName]: { type: selectedType }
+      }
+    };
+    setSeriesConfig(newSeriesConfig);
+  };
+  const handleReset = () => {
+    setSeriesConfig({ series: {} });
+  };
+  const renderSeriesItem = (seriesName) => {
+    const currentType = config?.seriesConfig?.series?.[seriesName]?.type || "default";
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      "div",
+      {
+        className: "text-icontent inline-flex h-8 w-full basis-0 px-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex shrink items-center rounded-l-md border border-r-0 px-2 font-medium sm:min-w-[160px]", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "truncate", title: seriesName, children: seriesName }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "sm:text-icontent bg-sentio-gray-100 dark:bg-sentio-gray-200 border-main inline-flex items-center whitespace-nowrap border border-r-0 px-2", children: "Show as" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-40", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_ui_core33.Select,
+            {
+              options: seriesChartTypes,
+              value: currentType,
+              onChange: (selectedType) => handleSeriesTypeChange(seriesName, selectedType),
+              className: "focus:border-primary-500 sm:text-icontent border-main h-full rounded-r-md border",
+              buttonClassName: "border-none! h-full!",
+              placeholder: "Select chart type",
+              asLayer: true
+            }
+          ) })
+        ]
+      },
+      seriesName
+    );
+  };
+  if (!enabled) {
+    return null;
+  }
+  const titleWithReset = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex w-full items-center justify-between pr-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: `Series (${series.length})` }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleReset();
+        },
+        className: "rounded-sm bg-gray-200 px-2 py-1 text-xs transition-colors hover:bg-gray-300",
+        title: "Reset all series to default",
+        children: "Reset"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react30.Disclosure, { defaultOpen: true, children: ({ open }) => {
+    (0, import_react29.useEffect)(() => {
+      setIsDisclosureOpen(open);
+    }, [open]);
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "bg-default-bg w-full rounded-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        import_react30.Disclosure.Button,
+        {
+          className: (0, import_ui_core33.classNames)(
+            open ? "rounded-t" : "rounded-sm",
+            "focus-visible:ring-primary-500/75 text-ilabel font-ilabel text-text-foreground hover:bg-sentio-gray-100 dark:hover:bg-sentio-gray-400 focus:outline-hidden focus-visible:ring-3 flex w-full px-2 py-1.5 text-left"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              import_lu10.LuChevronRight,
+              {
+                className: (0, import_ui_core33.classNames)(
+                  open ? "rotate-90 transform" : "",
+                  "mr-1 h-5 w-5 self-center transition-all"
+                )
+              }
+            ),
+            titleWithReset
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react30.Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
+        // Virtualized rendering for large lists - only render when open
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            ref: parentRef,
+            className: "text-icontent h-[200px] overflow-auto",
+            style: {
+              contain: "strict"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "div",
+              {
+                style: {
+                  height: `${virtualizer?.getTotalSize() ?? 0}px`,
+                  width: "100%",
+                  position: "relative"
+                },
+                children: virtualizer?.getVirtualItems().map((virtualItem) => {
+                  const seriesName = series[virtualItem.index];
+                  if (!seriesName) return null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: `${virtualItem.size}px`,
+                        transform: `translateY(${virtualItem.start}px)`
+                      },
+                      children: renderSeriesItem(seriesName)
+                    },
+                    virtualItem.key
+                  );
+                })
+              }
+            )
+          }
+        )
+      ) : (
+        // Normal rendering for small lists
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-icontent flex max-h-[200px] flex-col gap-2 overflow-y-auto", children: series.map((seriesName) => renderSeriesItem(seriesName)) })
+      ) })
+    ] });
+  } });
+};
+
+// src/dashboard/QueryValueControls.tsx
+var import_immer16 = require("immer");
+var import_lodash16 = require("lodash");
+var import_ui_core34 = require("@sentio/ui-core");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var defaultConfig9 = {
+  calculation: "LAST",
+  colorTheme: {
+    themeType: "Gray"
+  },
+  showBackgroundChart: false
+};
+var CalculationItems4 = [
+  { label: "Last", value: "LAST" },
+  { label: "First", value: "FIRST" },
+  { label: "Total", value: "TOTAL" },
+  { label: "Mean", value: "MEAN" },
+  { label: "Max", value: "MAX" },
+  { label: "Min", value: "MIN" }
+];
+function QueryValueControls({
+  config,
+  defaultOpen,
+  onChange,
+  renderColorSelect
+}) {
+  config = (0, import_lodash16.defaults)(config, defaultConfig9);
+  function onCalculationChange(cal) {
+    config && onChange((0, import_immer16.produce)(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onSeriesCalculationChange(cal) {
+    config && onChange((0, import_immer16.produce)(config, (draft) => void (draft.seriesCalculation = cal)));
+  }
+  function onSelectColor(c) {
+    config && onChange(
+      (0, import_immer16.produce)(config, (draft) => {
+        draft.colorTheme = c.value;
+      })
+    );
+  }
+  function toggleShowBackgroundChart() {
+    config && onChange(
+      (0, import_immer16.produce)(config, (draft) => {
+        draft.showBackgroundChart = !draft.showBackgroundChart;
+      })
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_ui_core34.DisclosurePanel,
+    {
+      title: "Query Value Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "shadow-xs flex h-8 rounded-md", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md border bg-gray-50 px-3", children: "For each series, calculate the" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "select",
+            {
+              value: config?.calculation,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border border-x-0 py-0.5 pl-4 pr-7",
+              onChange: (e) => onCalculationChange(e.target.value),
+              children: CalculationItems4.map((d) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: d.value, children: d.label }, d.value))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap border bg-gray-50 px-3", children: "value, then show the" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "select",
+            {
+              value: config?.seriesCalculation,
+              className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center border border-x-0 py-0.5 pl-4 pr-7",
+              onChange: (e) => onSeriesCalculationChange(e.target.value),
+              children: CalculationItems4.map((d) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("option", { value: d.value, children: d.label }, d.value))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel border-main text-text-foreground inline-flex items-center whitespace-nowrap rounded-r-md border bg-gray-50 px-3", children: "value of multiple series" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "focus-within:ring-primary-500 shadow-xs border-main flex h-8 divide-x divide-gray-300 rounded-md border focus-within:border-transparent focus-within:ring-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "sm:text-ilabel text-text-foreground inline-flex items-center whitespace-nowrap rounded-l-md bg-gray-50 px-3", children: "Color Theme" }),
+          renderColorSelect(config?.colorTheme, onSelectColor)
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          import_ui_core34.Checkbox,
+          {
+            checked: config?.showBackgroundChart,
+            onChange: toggleShowBackgroundChart,
+            label: "Show Background Chart"
+          }
+        )
+      ] })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AggregateInput,
@@ -7174,6 +7789,7 @@ function EditGroupDialog({
   ChartTooltip,
   ChartTypeButtonGroup,
   DEFAULT_HIGHLIGHT_KEY,
+  DashboardRefresh,
   DataControls,
   EditDashboardDialog,
   EditGroupDialog,
@@ -7194,6 +7810,7 @@ function EditGroupDialog({
   PieChartControls,
   PieIcon,
   QueryValueChart,
+  QueryValueControls,
   QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,
@@ -7201,9 +7818,12 @@ function EditGroupDialog({
   ScatterChartTooltip,
   ScatterControls,
   ScatterIcon,
+  SeriesControls,
+  ShareDashboardDialog,
   SystemLabels,
   TableControls,
   TableIcon,
+  TimeRangeOverride,
   TimeSeriesChart,
   ValueControls,
   ValueFormatters,
@@ -7214,8 +7834,10 @@ function EditGroupDialog({
   defaultBarGaugeConfig,
   defaultDataConfig,
   defaultPieConfig,
+  defaultQueryValueConfig,
   defaultScatterConfig,
   defaultTableConfig,
+  defaultTimeRangeOverrideConfig,
   defaultValueConfig,
   defaultValueControlsConfig,
   getDefaultValueConfig,