@sentio/ui-dashboard 0.3.7 → 0.3.9

package/dist/index.mjs

@@ -4061,6 +4061,29 @@ function timeBefore(time, duration2, asStart = true) {
     return t.subtract(durationValue, TimeUnitShortNames2[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 dayjs4.unix(parseInt(tl.absoluteTime || ""));
+}
+function toTimeLike(t) {
+  if (dayjs4.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
 import {
@@ -7341,6 +7364,375 @@ var ShareDashboardDialog = ({
     }
   );
 };
+
+// src/dashboard/TimeRangeOverride.tsx
+import { defaults as defaults9 } from "lodash";
+import { produce as produce15 } from "immer";
+import { Switch, TimeRangePicker } from "@sentio/ui-core";
+import { jsx as jsx44, jsxs as jsxs34 } from "react/jsx-runtime";
+var defaultConfig8 = {
+  enabled: false
+};
+function TimeRangeOverride({
+  config,
+  onChange,
+  globalStartTime,
+  globalEndTime,
+  globalTz,
+  onSetGlobalTimeRange
+}) {
+  config = defaults9(config || {}, defaultConfig8);
+  const setEnabled = (enabled) => {
+    config && onChange(
+      produce15(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(
+        produce15(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__ */ jsxs34("div", { className: "flex flex-wrap items-center gap-4 p-2", children: [
+    /* @__PURE__ */ jsx44("div", { className: "flex items-center", children: /* @__PURE__ */ jsx44(
+      Switch,
+      {
+        checked: config.enabled || false,
+        onChange: setEnabled,
+        label: "Override Global Time"
+      }
+    ) }),
+    /* @__PURE__ */ jsx44(
+      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
+import { useEffect as useEffect13, useRef as useRef8, useState as useState15, useLayoutEffect } from "react";
+import { Select as Select3, classNames as classNames14 } from "@sentio/ui-core";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { LuChevronRight, LuMountainSnow } from "react-icons/lu";
+import { cloneDeep } from "lodash";
+import { Disclosure } from "@headlessui/react";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+var seriesChartTypes = [
+  {
+    value: "default",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(LuMountainSnow, { className: "mr-2 h-4 w-4" }),
+      "Default"
+    ] })
+  },
+  {
+    value: "LINE",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(LineIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Line"
+    ] })
+  },
+  {
+    value: "BAR",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(BarIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Bar"
+    ] })
+  },
+  {
+    value: "AREA",
+    label: /* @__PURE__ */ jsxs35("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx45(AreaIcon_default, { className: "mr-2 h-4 w-4" }),
+      "Area"
+    ] })
+  }
+];
+var SeriesControls = ({
+  config,
+  setSeriesConfig,
+  series,
+  enabled
+}) => {
+  const parentRef = useRef8(null);
+  const [isDisclosureOpen, setIsDisclosureOpen] = useState15(true);
+  const shouldVirtualize = series.length > 10;
+  const virtualizer = useVirtualizer({
+    count: shouldVirtualize && isDisclosureOpen ? series.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    overscan: 5
+    // Render 5 extra items outside viewport for smooth scrolling
+  });
+  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 = 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__ */ jsxs35(
+      "div",
+      {
+        className: "text-icontent inline-flex h-8 w-full basis-0 px-2",
+        children: [
+          /* @__PURE__ */ jsx45("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__ */ jsx45("span", { className: "truncate", title: seriesName, children: seriesName }) }),
+          /* @__PURE__ */ jsx45("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__ */ jsx45("div", { className: "w-40", children: /* @__PURE__ */ jsx45(
+            Select3,
+            {
+              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__ */ jsxs35("div", { className: "flex w-full items-center justify-between pr-2", children: [
+    /* @__PURE__ */ jsx45("span", { children: `Series (${series.length})` }),
+    /* @__PURE__ */ jsx45(
+      "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__ */ jsx45(Disclosure, { defaultOpen: true, children: ({ open }) => {
+    useEffect13(() => {
+      setIsDisclosureOpen(open);
+    }, [open]);
+    return /* @__PURE__ */ jsxs35("div", { className: "bg-default-bg w-full rounded-sm", children: [
+      /* @__PURE__ */ jsxs35(
+        Disclosure.Button,
+        {
+          className: classNames14(
+            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__ */ jsx45(
+              LuChevronRight,
+              {
+                className: classNames14(
+                  open ? "rotate-90 transform" : "",
+                  "mr-1 h-5 w-5 self-center transition-all"
+                )
+              }
+            ),
+            titleWithReset
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx45(Disclosure.Panel, { className: "p-2", children: shouldVirtualize && open ? (
+        // Virtualized rendering for large lists - only render when open
+        /* @__PURE__ */ jsx45(
+          "div",
+          {
+            ref: parentRef,
+            className: "text-icontent h-[200px] overflow-auto",
+            style: {
+              contain: "strict"
+            },
+            children: /* @__PURE__ */ jsx45(
+              "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__ */ jsx45(
+                    "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__ */ jsx45("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
+import { produce as produce16 } from "immer";
+import { defaults as defaults10 } from "lodash";
+import { Checkbox as Checkbox7, DisclosurePanel as DisclosurePanel12 } from "@sentio/ui-core";
+import { jsx as jsx46, jsxs as jsxs36 } from "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 = defaults10(config, defaultConfig9);
+  function onCalculationChange(cal) {
+    config && onChange(produce16(config, (draft) => void (draft.calculation = cal)));
+  }
+  function onSeriesCalculationChange(cal) {
+    config && onChange(produce16(config, (draft) => void (draft.seriesCalculation = cal)));
+  }
+  function onSelectColor(c) {
+    config && onChange(
+      produce16(config, (draft) => {
+        draft.colorTheme = c.value;
+      })
+    );
+  }
+  function toggleShowBackgroundChart() {
+    config && onChange(
+      produce16(config, (draft) => {
+        draft.showBackgroundChart = !draft.showBackgroundChart;
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx46(
+    DisclosurePanel12,
+    {
+      title: "Query Value Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "shadow-xs flex h-8 rounded-md", children: [
+          /* @__PURE__ */ jsx46("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__ */ jsx46(
+            "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__ */ jsx46("option", { value: d.value, children: d.label }, d.value))
+            }
+          ),
+          /* @__PURE__ */ jsx46("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__ */ jsx46(
+            "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__ */ jsx46("option", { value: d.value, children: d.label }, d.value))
+            }
+          ),
+          /* @__PURE__ */ jsx46("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__ */ jsxs36("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__ */ jsx46("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__ */ jsx46(
+          Checkbox7,
+          {
+            checked: config?.showBackgroundChart,
+            onChange: toggleShowBackgroundChart,
+            label: "Show Background Chart"
+          }
+        )
+      ] })
+    }
+  );
+}
 export {
   AggregateInput,
   AreaIcon_default as AreaIcon,
@@ -7375,6 +7767,7 @@ export {
   PieChartControls,
   PieIcon_default as PieIcon,
   QueryValueChart,
+  QueryValueControls,
   QueryValueIcon_default as QueryValueIcon,
   ReactEChartsBase,
   RefreshButton,
@@ -7382,10 +7775,12 @@ export {
   ScatterChartTooltip,
   ScatterControls,
   ScatterIcon_default as ScatterIcon,
+  SeriesControls,
   ShareDashboardDialog,
   SystemLabels,
   TableControls,
   TableIcon_default as TableIcon,
+  TimeRangeOverride,
   TimeSeriesChart,
   ValueControls,
   ValueFormatters,
@@ -7396,8 +7791,10 @@ export {
   defaultConfig2 as defaultBarGaugeConfig,
   defaultConfig5 as defaultDataConfig,
   defaultConfig as defaultPieConfig,
+  defaultConfig9 as defaultQueryValueConfig,
   defaultConfig6 as defaultScatterConfig,
   defaultConfig7 as defaultTableConfig,
+  defaultConfig8 as defaultTimeRangeOverrideConfig,
   defaultConfig3 as defaultValueConfig,
   defaultConfig4 as defaultValueControlsConfig,
   getDefaultValueConfig,