@sentio/ui-dashboard 0.3.7 → 0.3.8

package/dist/index.js

@@ -63,6 +63,7 @@ __export(index_exports, {
   PieChartControls: () => PieChartControls,
   PieIcon: () => PieIcon_default,
   QueryValueChart: () => QueryValueChart,
+  QueryValueControls: () => QueryValueControls,
   QueryValueIcon: () => QueryValueIcon_default,
   ReactEChartsBase: () => ReactEChartsBase,
   RefreshButton: () => RefreshButton,
@@ -70,10 +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,
@@ -84,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,
@@ -4127,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");
@@ -7378,6 +7406,375 @@ var ShareDashboardDialog = ({
     }
   );
 };
+
+// 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,
@@ -7413,6 +7810,7 @@ var ShareDashboardDialog = ({
   PieChartControls,
   PieIcon,
   QueryValueChart,
+  QueryValueControls,
   QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,
@@ -7420,10 +7818,12 @@ var ShareDashboardDialog = ({
   ScatterChartTooltip,
   ScatterControls,
   ScatterIcon,
+  SeriesControls,
   ShareDashboardDialog,
   SystemLabels,
   TableControls,
   TableIcon,
+  TimeRangeOverride,
   TimeSeriesChart,
   ValueControls,
   ValueFormatters,
@@ -7434,8 +7834,10 @@ var ShareDashboardDialog = ({
   defaultBarGaugeConfig,
   defaultDataConfig,
   defaultPieConfig,
+  defaultQueryValueConfig,
   defaultScatterConfig,
   defaultTableConfig,
+  defaultTimeRangeOverrideConfig,
   defaultValueConfig,
   defaultValueControlsConfig,
   getDefaultValueConfig,