@contractspec/example.analytics-dashboard 3.7.6 → 3.8.0

package/dist/browser/ui/AnalyticsDashboard.widgets.js

@@ -0,0 +1,94 @@
+// src/ui/AnalyticsDashboard.widgets.tsx
+import {
+  ComparisonView,
+  TimelineView,
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function AnalyticsWidgetBoard({
+  dashboardName,
+  widgets
+}) {
+  if (!widgets.length) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className: "rounded-lg border border-dashed p-10 text-center text-muted-foreground",
+      children: [
+        'No visualization widgets configured for "',
+        dashboardName,
+        '".'
+      ]
+    }, undefined, true, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    children: [
+      /* @__PURE__ */ jsxDEV("h3", {
+        className: "mb-4 font-semibold text-lg",
+        children: [
+          'Widgets in "',
+          dashboardName,
+          '"'
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VisualizationGrid, {
+        children: widgets.map((widget) => /* @__PURE__ */ jsxDEV("div", {
+          className: gridSpanClass(widget.gridWidth),
+          children: renderVisualizationWidget(widget)
+        }, widget.id, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function renderVisualizationWidget(widget) {
+  const footer = /* @__PURE__ */ jsxDEV("span", {
+    className: "text-muted-foreground text-xs",
+    children: [
+      "Position: (",
+      widget.gridX,
+      ", ",
+      widget.gridY,
+      ") • ",
+      widget.gridWidth,
+      "x",
+      widget.gridHeight
+    ]
+  }, undefined, true, undefined, this);
+  if (widget.layout === "comparison") {
+    return /* @__PURE__ */ jsxDEV(ComparisonView, {
+      description: widget.description,
+      items: widget.bindings.map((binding2) => ({ ...binding2, footer })),
+      title: widget.name
+    }, undefined, false, undefined, this);
+  }
+  if (widget.layout === "timeline") {
+    return /* @__PURE__ */ jsxDEV(TimelineView, {
+      description: widget.description,
+      items: widget.bindings.map((binding2) => ({ ...binding2, footer })),
+      title: widget.name
+    }, undefined, false, undefined, this);
+  }
+  const binding = widget.bindings[0];
+  if (!binding)
+    return null;
+  return /* @__PURE__ */ jsxDEV(VisualizationCard, {
+    data: binding.data,
+    description: widget.description ?? binding.description,
+    footer,
+    height: binding.height,
+    spec: binding.spec,
+    title: widget.name
+  }, undefined, false, undefined, this);
+}
+function gridSpanClass(gridWidth) {
+  if (gridWidth >= 12)
+    return "md:col-span-2 xl:col-span-3";
+  if (gridWidth >= 8)
+    return "xl:col-span-2";
+  if (gridWidth >= 6)
+    return "md:col-span-2";
+  return "";
+}
+export {
+  AnalyticsWidgetBoard
+};

package/dist/browser/ui/AnalyticsQueriesTable.js

@@ -0,0 +1,99 @@
+// src/ui/AnalyticsQueriesTable.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var QUERY_TYPE_COLORS = {
+  SQL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+  METRIC: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+  AGGREGATION: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
+  CUSTOM: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+};
+function AnalyticsQueriesTable({ queries }) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "rounded-lg border border-border",
+    children: /* @__PURE__ */ jsxDEV("table", {
+      className: "w-full",
+      children: [
+        /* @__PURE__ */ jsxDEV("thead", {
+          className: "border-border border-b bg-muted/30",
+          children: /* @__PURE__ */ jsxDEV("tr", {
+            children: [
+              /* @__PURE__ */ jsxDEV("th", {
+                className: "px-4 py-3 text-left font-medium text-sm",
+                children: "Query"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("th", {
+                className: "px-4 py-3 text-left font-medium text-sm",
+                children: "Type"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("th", {
+                className: "px-4 py-3 text-left font-medium text-sm",
+                children: "Cache TTL"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("th", {
+                className: "px-4 py-3 text-left font-medium text-sm",
+                children: "Shared"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("tbody", {
+          className: "divide-y divide-border",
+          children: [
+            queries.map((query) => /* @__PURE__ */ jsxDEV("tr", {
+              className: "hover:bg-muted/50",
+              children: [
+                /* @__PURE__ */ jsxDEV("td", {
+                  className: "px-4 py-3",
+                  children: [
+                    /* @__PURE__ */ jsxDEV("div", {
+                      className: "font-medium",
+                      children: query.name
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV("div", {
+                      className: "text-muted-foreground text-sm",
+                      children: query.description
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV("td", {
+                  className: "px-4 py-3",
+                  children: /* @__PURE__ */ jsxDEV("span", {
+                    className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${QUERY_TYPE_COLORS[query.type] ?? ""}`,
+                    children: query.type
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV("td", {
+                  className: "px-4 py-3 text-muted-foreground text-sm",
+                  children: [
+                    query.cacheTtlSeconds,
+                    "s"
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV("td", {
+                  className: "px-4 py-3",
+                  children: query.isShared ? /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-green-600 dark:text-green-400",
+                    children: "✓"
+                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-muted-foreground",
+                    children: "—"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, query.id, true, undefined, this)),
+            queries.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
+              children: /* @__PURE__ */ jsxDEV("td", {
+                colSpan: 4,
+                className: "px-4 py-8 text-center text-muted-foreground",
+                children: "No queries saved"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  AnalyticsQueriesTable
+};