@contractspec/example.analytics-dashboard 3.7.6 → 3.9.2

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,188 @@
+// src/ui/AnalyticsQueriesTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var QUERY_TYPE_COLORS = {
+  SQL: "default",
+  METRIC: "secondary",
+  AGGREGATION: "secondary",
+  CUSTOM: "outline"
+};
+function formatJson(value) {
+  return JSON.stringify(value, null, 2);
+}
+function AnalyticsQueriesTable({ queries }) {
+  const controller = useContractTable({
+    data: queries,
+    columns: [
+      {
+        id: "query",
+        header: "Query",
+        label: "Query",
+        accessor: (query) => query.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-xs",
+              children: [
+                "Updated ",
+                item.updatedAt.toLocaleDateString()
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "description",
+        header: "Description",
+        label: "Description",
+        accessor: (query) => query.description ?? "",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV(Text, {
+          className: "line-clamp-2 text-muted-foreground text-sm",
+          children: String(value || "No description")
+        }, undefined, false, undefined, this),
+        size: 300,
+        minSize: 220,
+        canSort: false,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "type",
+        header: "Type",
+        label: "Type",
+        accessorKey: "type",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV(Badge, {
+          variant: QUERY_TYPE_COLORS[String(value)],
+          children: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "cacheTtlSeconds",
+        header: "Cache TTL",
+        label: "Cache TTL",
+        accessorKey: "cacheTtlSeconds",
+        cell: ({ value }) => `${String(value)}s`,
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "isShared",
+        header: "Shared",
+        label: "Shared",
+        accessorKey: "isShared",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV(Badge, {
+          variant: value ? "default" : "outline",
+          children: value ? "Shared" : "Private"
+        }, undefined, false, undefined, this),
+        size: 140,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { description: false },
+      columnPinning: { left: ["query"], right: [] }
+    },
+    renderExpandedContent: (query) => /* @__PURE__ */ jsxDEV(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Description"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: query.description ?? "No description"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        query.sql ? /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "SQL"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("pre", {
+              className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+              children: query.sql
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this) : null,
+        /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Definition"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("pre", {
+              className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+              children: formatJson(query.definition)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV(DataTable, {
+    controller,
+    title: "Saved Queries",
+    description: "Client-mode table using the shared ContractSpec controller and renderer.",
+    toolbar: /* @__PURE__ */ jsxDEV(HStack, {
+      gap: "sm",
+      className: "flex-wrap",
+      children: [
+        /* @__PURE__ */ jsxDEV(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.length,
+            " queries"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.filter((query) => query.isShared).length,
+            " shared"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No queries saved"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  AnalyticsQueriesTable
+};