@sentio/ui-dashboard 0.3.1 → 0.3.4

package/dist/index.mjs

@@ -5801,7 +5801,7 @@ var operators = {
   "<=": "less or equal"
 };
 var renderTreeLine = (index, isLast) => {
-  return /* @__PURE__ */ jsx33("div", { className: "mr-2 flex h-12 w-3 flex-col items-center justify-center", children: /* @__PURE__ */ jsxs23("div", { className: "flex h-full w-full items-center", children: [
+  return /* @__PURE__ */ jsx33("div", { className: "mr-2 flex w-3 flex-col items-center justify-center", children: /* @__PURE__ */ jsxs23("div", { className: "flex h-full w-full items-center", children: [
     /* @__PURE__ */ jsx33(
       "div",
       {
@@ -5842,16 +5842,16 @@ function ValueStringMapping({ rules, onChange }) {
       })
     );
   }
-  return /* @__PURE__ */ jsxs23("div", { className: "flex w-full flex-col rounded-md py-2", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex w-full flex-col gap-2 rounded-md", children: [
     (rules || []).map((rule, index) => {
       const isLast = index === (rules || []).length - 1;
       return /* @__PURE__ */ jsxs23(
         "div",
         {
-          className: "text-text-foreground flex h-10 items-center py-1",
+          className: "text-text-foreground flex h-8 items-center",
           children: [
             renderTreeLine(index, isLast),
-            /* @__PURE__ */ jsx33("span", { className: "sm:text-ilabel  inline-flex h-full items-center pr-3 font-medium", children: "If value is" }),
+            /* @__PURE__ */ jsx33("span", { className: "sm:text-ilabel inline-flex h-full items-center pr-2 font-medium", children: "If value is" }),
             /* @__PURE__ */ jsx33(
               "select",
               {
@@ -5880,7 +5880,7 @@ function ValueStringMapping({ rules, onChange }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx33("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-3 font-medium", children: ", then show" }),
+            /* @__PURE__ */ jsx33("span", { className: "sm:text-ilabel  inline-flex h-full items-center  rounded-none px-2 font-medium", children: ", then show" }),
             /* @__PURE__ */ jsx33(
               "input",
               {
@@ -5899,16 +5899,10 @@ function ValueStringMapping({ rules, onChange }) {
               "button",
               {
                 type: "button",
-                className: "mx-2",
+                className: "text-text-foreground-disabled hover:text-primary-600 mx-2 cursor-pointer",
                 "aria-label": "remove",
                 onClick: () => removeRule(index),
-                children: /* @__PURE__ */ jsx33(
-                  LuTrash2,
-                  {
-                    className: "icon text-text-foreground-disabled",
-                    "aria-hidden": "true"
-                  }
-                )
+                children: /* @__PURE__ */ jsx33(LuTrash2, { className: "icon", "aria-hidden": "true" })
               }
             )
           ]
@@ -5916,18 +5910,16 @@ function ValueStringMapping({ rules, onChange }) {
         index
       );
     }),
-    /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx33(
       Button3,
       {
         type: "button",
         role: "secondary",
-        className: "mt-1 w-fit flex-none",
+        className: "w-fit flex-none py-1.5!",
         "aria-label": "remove",
         onClick: addRule,
-        children: [
-          /* @__PURE__ */ jsx33(LuPlus, { className: classNames9("h-4 w-4"), "aria-hidden": "true" }),
-          "Add Formatting Rule"
-        ]
+        icon: /* @__PURE__ */ jsx33(LuPlus, {}),
+        children: "Add Formatting Rule"
       }
     )
   ] });
@@ -6577,6 +6569,224 @@ function ScatterControls({
     }
   );
 }
+
+// src/charts/options/TableControls.tsx
+import { useMemo as useMemo11 } from "react";
+import { produce as produce14 } from "immer";
+import { defaults as defaults8 } from "lodash";
+import { Checkbox as Checkbox5, DisclosurePanel as DisclosurePanel11 } from "@sentio/ui-core";
+
+// src/charts/table-utils.ts
+import { startCase } from "lodash";
+var TEMPLATE_TOKEN = /{{([\s\S]+?)}}/g;
+function sanitizeLabels(labels) {
+  const result = {};
+  for (const k in labels) {
+    switch (k) {
+      case "contract_name":
+        result["contract"] = labels[k];
+        break;
+      case "contract_address":
+        result["address"] = labels[k];
+        break;
+    }
+    result[k] = labels[k];
+  }
+  return result;
+}
+function aliasTemplate(alias, labels) {
+  if (alias) {
+    try {
+      const safe = sanitizeLabels(labels);
+      return alias.replace(TEMPLATE_TOKEN, (_, m1) => {
+        const value = safe[m1.trim()];
+        return value == null ? `` : value;
+      });
+    } catch (e) {
+      return alias;
+    }
+  }
+}
+function escapeColumnId(id) {
+  return id.replace(/[\W_.]+/g, "_");
+}
+function getColumnNameId(labels, alias, displayName) {
+  const s = aliasTemplate(alias, labels) || startCase(displayName);
+  return { columnName: s, columnId: escapeColumnId(s) };
+}
+
+// src/charts/options/TableControls.tsx
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var defaultConfig7 = {
+  calculation: "LAST",
+  sortColumns: [],
+  showColumns: void 0,
+  columnWidths: {},
+  columnOrders: [],
+  showPlainData: false,
+  calculations: {},
+  valueConfigs: {}
+};
+function getDefaultValueConfig(type) {
+  switch (type) {
+    case "NUMBER":
+      return {
+        ...defaultConfig4,
+        valueFormatter: "NumberFormatter"
+      };
+    case "TIME":
+      return {
+        ...defaultConfig4,
+        valueFormatter: "DateFormatter"
+      };
+    default:
+      return {
+        ...defaultConfig4,
+        valueFormatter: "StringFormatter"
+      };
+  }
+}
+var CalculationItems3 = [
+  { label: "All", value: "ALL" },
+  { 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 TableControls({ config, defaultOpen, onChange, data }) {
+  config = defaults8({}, config, defaultConfig7);
+  function onCalculationChange(col, cal) {
+    config && onChange(
+      produce14(config, (draft) => {
+        if (col === "") {
+          delete draft.calculations;
+          draft.calculation = cal;
+        } else {
+          draft.calculations = draft.calculations || {};
+          draft.calculations[col] = cal;
+        }
+      })
+    );
+  }
+  function onValueConfigChange(col, valueConfig) {
+    config && onChange(
+      produce14(config, (draft) => {
+        draft.valueConfigs = draft.valueConfigs || {};
+        draft.valueConfigs[col] = valueConfig;
+      })
+    );
+  }
+  function onMapSeriesAsColumnsChange(checked) {
+    config && onChange(produce14(config, (draft) => void (draft.showPlainData = checked)));
+  }
+  const calculations = useMemo11(() => {
+    if (!config?.showPlainData) {
+      return CalculationItems3.filter((item) => item.value !== "ALL");
+    }
+    return CalculationItems3;
+  }, [config?.showPlainData]);
+  const isSql = data?.result !== void 0;
+  const columns = useMemo11(() => {
+    if (config?.showPlainData) {
+      return [];
+    }
+    const map = {};
+    if (isSql) {
+      const results = data?.result;
+      if (results) {
+        for (const [name, type] of Object.entries(results?.columnTypes || {})) {
+          map[name] = {
+            name,
+            type
+          };
+        }
+      }
+    } else {
+      const results = data?.results;
+      for (const r of results || []) {
+        for (const s of r?.matrix?.samples || []) {
+          const { columnId, columnName } = getColumnNameId(
+            s?.metric?.labels || {},
+            r.alias,
+            s.metric?.displayName
+          );
+          map[columnId] = {
+            name: columnName
+          };
+        }
+      }
+    }
+    return Object.keys(map).sort().map((k) => ({ columnId: k, column: map[k] }));
+  }, [data, config]);
+  return /* @__PURE__ */ jsxs29(
+    DisclosurePanel11,
+    {
+      title: "Table Options",
+      defaultOpen,
+      containerClassName: "w-full bg-default-bg",
+      children: [
+        !isSql && /* @__PURE__ */ jsxs29("div", { className: "min-h-8 flex items-center", children: [
+          /* @__PURE__ */ jsx39("div", { className: "w-48 px-2", children: /* @__PURE__ */ jsx39(
+            Checkbox5,
+            {
+              checked: config?.showPlainData,
+              onChange: onMapSeriesAsColumnsChange,
+              label: "Show plain data"
+            }
+          ) }),
+          config?.showPlainData && /* @__PURE__ */ jsxs29("div", { className: "flex", children: [
+            /* @__PURE__ */ jsx39("span", { className: "border-main sm:text-icontent inline-flex items-center rounded-l-md border border-r-0 bg-gray-50 px-3", children: "Calculation" }),
+            /* @__PURE__ */ jsx39(
+              "select",
+              {
+                value: config.calculation,
+                className: "border-main text-text-foreground sm:text-icontent focus:border-primary-600 hover:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7 focus:ring-0",
+                onChange: (e) => {
+                  onCalculationChange("", e.target.value);
+                },
+                children: calculations.map((d) => {
+                  return /* @__PURE__ */ jsx39("option", { value: d.value, children: d.label }, d.value);
+                })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx39("div", {})
+        ] }),
+        /* @__PURE__ */ jsx39("div", { className: "divide-border-color flex flex-col gap-2 divide-y", children: columns.map(({ columnId, column }) => /* @__PURE__ */ jsxs29("div", { className: "flex items-start pb-2", children: [
+          /* @__PURE__ */ jsx39("h4", { className: "text-text-foreground text-icontent leading-7.5 w-48 px-2 font-medium", children: column.name }),
+          /* @__PURE__ */ jsxs29("div", { className: "flex flex-1 flex-wrap items-start gap-2 rounded-md", children: [
+            !isSql && /* @__PURE__ */ jsxs29("div", { className: "flex", children: [
+              /* @__PURE__ */ jsx39("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__ */ jsx39(
+                "select",
+                {
+                  value: config?.calculations && config?.calculations[columnId] || "LAST",
+                  className: "border-main text-text-foreground sm:text-icontent focus:border-primary-600 hover:border-primary-600 inline-flex items-center rounded-r-md border pl-4 pr-7 focus:ring-0",
+                  onChange: (e) => onCalculationChange(
+                    columnId,
+                    e.target.value
+                  ),
+                  children: calculations.map((d) => {
+                    return /* @__PURE__ */ jsx39("option", { value: d.value, children: d.label }, d.value);
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx39(
+              ValueOptions,
+              {
+                onChange: (cfg) => onValueConfigChange(columnId, cfg),
+                config: config?.valueConfigs && config.valueConfigs[columnId] || getDefaultValueConfig(column.type)
+              }
+            )
+          ] })
+        ] }, columnId)) })
+      ]
+    }
+  );
+}
 export {
   AggregateInput,
   AreaIcon_default as AreaIcon,
@@ -6614,6 +6824,7 @@ export {
   ScatterControls,
   ScatterIcon_default as ScatterIcon,
   SystemLabels,
+  TableControls,
   TableIcon_default as TableIcon,
   TimeSeriesChart,
   ValueControls,
@@ -6626,8 +6837,10 @@ export {
   defaultConfig5 as defaultDataConfig,
   defaultConfig as defaultPieConfig,
   defaultConfig6 as defaultScatterConfig,
+  defaultConfig7 as defaultTableConfig,
   defaultConfig3 as defaultValueConfig,
   defaultConfig4 as defaultValueControlsConfig,
+  getDefaultValueConfig,
   isAggrOrRollupFunction,
   sentioColors,
   sentioTheme,