@contractspec/example.analytics-dashboard 3.7.6 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/README.md +64 -271
  2. package/dist/browser/dashboard.feature.js +592 -0
  3. package/dist/browser/events.js +1 -1
  4. package/dist/browser/index.js +1171 -627
  5. package/dist/browser/ui/AnalyticsDashboard.js +826 -194
  6. package/dist/browser/ui/AnalyticsDashboard.widgets.js +94 -0
  7. package/dist/browser/ui/AnalyticsQueriesTable.js +99 -0
  8. package/dist/browser/ui/hooks/index.js +594 -3
  9. package/dist/browser/ui/hooks/useAnalyticsData.js +594 -3
  10. package/dist/browser/ui/index.js +964 -440
  11. package/dist/browser/ui/renderers/analytics.markdown.js +620 -138
  12. package/dist/browser/ui/renderers/index.js +620 -138
  13. package/dist/browser/visualizations/catalog.js +457 -0
  14. package/dist/browser/visualizations/index.js +611 -0
  15. package/dist/browser/visualizations/specs.breakdown.js +140 -0
  16. package/dist/browser/visualizations/specs.performance.js +198 -0
  17. package/dist/browser/visualizations/widgets.js +595 -0
  18. package/dist/dashboard/index.d.ts +3 -3
  19. package/dist/dashboard.feature.js +592 -0
  20. package/dist/events.js +1 -1
  21. package/dist/index.d.ts +4 -3
  22. package/dist/index.js +1171 -627
  23. package/dist/node/dashboard.feature.js +592 -0
  24. package/dist/node/events.js +1 -1
  25. package/dist/node/index.js +1171 -627
  26. package/dist/node/ui/AnalyticsDashboard.js +826 -194
  27. package/dist/node/ui/AnalyticsDashboard.widgets.js +94 -0
  28. package/dist/node/ui/AnalyticsQueriesTable.js +99 -0
  29. package/dist/node/ui/hooks/index.js +594 -3
  30. package/dist/node/ui/hooks/useAnalyticsData.js +594 -3
  31. package/dist/node/ui/index.js +964 -440
  32. package/dist/node/ui/renderers/analytics.markdown.js +620 -138
  33. package/dist/node/ui/renderers/index.js +620 -138
  34. package/dist/node/visualizations/catalog.js +457 -0
  35. package/dist/node/visualizations/index.js +611 -0
  36. package/dist/node/visualizations/specs.breakdown.js +140 -0
  37. package/dist/node/visualizations/specs.performance.js +198 -0
  38. package/dist/node/visualizations/widgets.js +595 -0
  39. package/dist/query/index.d.ts +1 -1
  40. package/dist/query-engine/index.d.ts +1 -1
  41. package/dist/ui/AnalyticsDashboard.js +826 -194
  42. package/dist/ui/AnalyticsDashboard.widgets.d.ts +5 -0
  43. package/dist/ui/AnalyticsDashboard.widgets.js +95 -0
  44. package/dist/ui/AnalyticsQueriesTable.d.ts +4 -0
  45. package/dist/ui/AnalyticsQueriesTable.js +100 -0
  46. package/dist/ui/hooks/index.d.ts +1 -1
  47. package/dist/ui/hooks/index.js +594 -3
  48. package/dist/ui/hooks/useAnalyticsData.js +594 -3
  49. package/dist/ui/index.d.ts +1 -1
  50. package/dist/ui/index.js +964 -440
  51. package/dist/ui/renderers/analytics.markdown.d.ts +0 -9
  52. package/dist/ui/renderers/analytics.markdown.js +620 -138
  53. package/dist/ui/renderers/index.js +620 -138
  54. package/dist/visualizations/catalog.d.ts +9 -0
  55. package/dist/visualizations/catalog.js +458 -0
  56. package/dist/visualizations/index.d.ts +4 -0
  57. package/dist/visualizations/index.js +612 -0
  58. package/dist/visualizations/specs.breakdown.d.ts +4 -0
  59. package/dist/visualizations/specs.breakdown.js +141 -0
  60. package/dist/visualizations/specs.performance.d.ts +5 -0
  61. package/dist/visualizations/specs.performance.js +199 -0
  62. package/dist/visualizations/widgets.d.ts +24 -0
  63. package/dist/visualizations/widgets.js +596 -0
  64. package/dist/visualizations/widgets.test.d.ts +1 -0
  65. package/package.json +105 -7
package/README.md CHANGED
@@ -1,281 +1,74 @@
1
1
  # @contractspec/example.analytics-dashboard
2
2
 
3
- Website: https://contractspec.io/
3
+ Website: https://contractspec.io
4
4
 
5
+ **Analytics Dashboard example with widgets and query engine for ContractSpec.**
5
6
 
6
- > Analytics Dashboard Example - Comprehensive data visualization and reporting solution
7
+ ## What This Demonstrates
7
8
 
8
- ## Overview
9
+ - Dashboard feature with presentation, schema, enum, and test-spec.
10
+ - Query engine with typed operations and handlers.
11
+ - PostHog datasource adapter.
12
+ - React UI with hooks, renderers, and markdown output.
13
+ - Event definitions for analytics tracking.
14
+ - Seeders for demo data.
9
15
 
10
- This example demonstrates a full-featured analytics and dashboarding system built with ContractSpec, showcasing:
16
+ ## Running Locally
11
17
 
12
- - **Customizable Dashboards** - Drag-and-drop widget layouts
13
- - **Visual Query Builder** - Build queries without writing SQL
14
- - **Multiple Widget Types** - Charts, metrics, tables, maps
15
- - **Scheduled Reports** - Automated report generation and delivery
16
- - **Public Sharing** - Share dashboards with external stakeholders
17
-
18
- ## Entities
19
-
20
- ### Dashboard
21
-
22
- Main container for widgets and visualizations.
23
-
24
- | Field | Type | Description |
25
- |-------|------|-------------|
26
- | id | string | Unique identifier |
27
- | organizationId | string | Organization owner |
28
- | name | string | Dashboard name |
29
- | slug | string | URL-friendly identifier |
30
- | description | string? | Dashboard description |
31
- | status | DashboardStatus | DRAFT, PUBLISHED, ARCHIVED |
32
- | refreshInterval | RefreshInterval | Auto-refresh frequency |
33
- | defaultDateRange | TimeRange | Default time filter |
34
- | isPublic | boolean | Public visibility |
35
- | shareToken | string? | Public access token |
36
-
37
- ### Widget
38
-
39
- Individual visualization component on a dashboard.
40
-
41
- | Field | Type | Description |
42
- |-------|------|-------------|
43
- | id | string | Unique identifier |
44
- | dashboardId | string | Parent dashboard |
45
- | name | string | Widget title |
46
- | type | WidgetType | LINE_CHART, BAR_CHART, PIE_CHART, METRIC, TABLE, etc. |
47
- | gridX, gridY | number | Grid position |
48
- | gridWidth, gridHeight | number | Grid dimensions |
49
- | queryId | string? | Linked query |
50
- | config | JSON | Widget-specific configuration |
51
-
52
- ### Query
53
-
54
- Reusable data query definition.
55
-
56
- | Field | Type | Description |
57
- |-------|------|-------------|
58
- | id | string | Unique identifier |
59
- | name | string | Query name |
60
- | type | QueryType | SQL, METRIC, AGGREGATION, CUSTOM |
61
- | definition | JSON | Query definition |
62
- | sql | string? | Raw SQL for SQL type |
63
- | metricIds | string[] | Metrics for METRIC type |
64
- | cacheTtlSeconds | number | Cache duration |
65
- | isShared | boolean | Shared across org |
66
-
67
- ### Report
68
-
69
- Scheduled report definition.
70
-
71
- | Field | Type | Description |
72
- |-------|------|-------------|
73
- | id | string | Unique identifier |
74
- | dashboardId | string | Source dashboard |
75
- | name | string | Report name |
76
- | schedule | string | Cron expression |
77
- | format | ReportFormat | PDF, PNG, CSV |
78
- | recipients | string[] | Email addresses |
79
- | lastRunAt | DateTime? | Last execution time |
80
-
81
- ## Contracts
82
-
83
- ### Dashboard Management
84
-
85
- ```typescript
86
- // Create a new dashboard
87
- CreateDashboardContract
88
- Input: { name, slug, description?, refreshInterval? }
89
- Output: Dashboard
90
-
91
- // Add widget to dashboard
92
- AddWidgetContract
93
- Input: { dashboardId, name, type, gridX?, gridY?, queryId?, config? }
94
- Output: Widget
95
-
96
- // Get dashboard with widgets
97
- GetDashboardContract
98
- Input: { dashboardId? | slug? | shareToken? }
99
- Output: Dashboard (with widgets)
100
-
101
- // List user's dashboards
102
- ListDashboardsContract
103
- Input: { status?, search?, limit?, offset? }
104
- Output: { dashboards, total }
105
- ```
106
-
107
- ### Query Management
108
-
109
- ```typescript
110
- // Create a query
111
- CreateQueryContract
112
- Input: { name, type, definition, sql?, metricIds?, cacheTtlSeconds? }
113
- Output: Query
114
-
115
- // Execute query
116
- ExecuteQueryContract
117
- Input: { queryId, parameters?, dateRange?, filters?, forceRefresh? }
118
- Output: { data, columns, rowCount, executionTimeMs, cached }
119
- ```
120
-
121
- ## Events
122
-
123
- | Event | Description |
124
- |-------|-------------|
125
- | `analytics.dashboard.created` | Dashboard created |
126
- | `analytics.dashboard.published` | Dashboard published |
127
- | `analytics.widget.added` | Widget added to dashboard |
128
- | `analytics.query.created` | Query created |
129
- | `analytics.query.executed` | Query executed |
130
- | `analytics.dashboard.viewed` | Dashboard viewed |
131
- | `analytics.report.generated` | Scheduled report generated |
132
-
133
- ## Widget Types
134
-
135
- - **Line Chart** - Time series data
136
- - **Bar Chart** - Categorical comparisons
137
- - **Pie Chart** - Part-to-whole relationships
138
- - **Area Chart** - Stacked time series
139
- - **Scatter Plot** - Correlation analysis
140
- - **Metric** - Single KPI display
141
- - **Table** - Tabular data
142
- - **Heatmap** - Density visualization
143
- - **Funnel** - Conversion analysis
144
- - **Map** - Geographic data
145
- - **Text** - Markdown content
146
- - **Embed** - External iframe
147
-
148
- ## Query Types
149
-
150
- ### Metric Query
151
-
152
- Query usage metrics from the metering system.
153
-
154
- ```json
155
- {
156
- "type": "METRIC",
157
- "metricIds": ["active_users", "api_calls", "storage_used"]
158
- }
159
- ```
160
-
161
- ### Aggregation Query
162
-
163
- Build aggregations with measures and dimensions.
164
-
165
- ```json
166
- {
167
- "type": "AGGREGATION",
168
- "source": "events",
169
- "measures": [
170
- { "name": "total_count", "field": "id", "aggregation": "COUNT" }
171
- ],
172
- "dimensions": [
173
- { "name": "date", "field": "created_at", "type": "TIME", "granularity": "DAY" }
174
- ],
175
- "filters": [
176
- { "field": "event_type", "operator": "eq", "value": "page_view" }
177
- ]
178
- }
179
- ```
180
-
181
- ### SQL Query
182
-
183
- Write custom SQL (requires feature flag).
184
-
185
- ```json
186
- {
187
- "type": "SQL",
188
- "sql": "SELECT date_trunc('day', created_at) as day, count(*) FROM events GROUP BY 1"
189
- }
190
- ```
18
+ From `packages/examples/analytics-dashboard`:
19
+ - `bun run dev`
20
+ - `bun run build`
21
+ - `bun run typecheck`
191
22
 
192
23
  ## Usage
193
24
 
194
- ```typescript
195
- import {
196
- AnalyticsDashboardFeature,
197
- CreateDashboardContract,
198
- AddWidgetContract,
199
- createQueryEngine,
200
- } from '@contractspec/example.analytics-dashboard';
201
-
202
- // Create a dashboard
203
- const dashboard = await execute(CreateDashboardContract, {
204
- name: 'Sales Overview',
205
- slug: 'sales-overview',
206
- description: 'Key sales metrics and trends',
207
- refreshInterval: 'FIFTEEN_MINUTES',
208
- });
209
-
210
- // Add a metric widget
211
- const widget = await execute(AddWidgetContract, {
212
- dashboardId: dashboard.id,
213
- name: 'Total Revenue',
214
- type: 'METRIC',
215
- gridX: 0,
216
- gridY: 0,
217
- gridWidth: 3,
218
- gridHeight: 2,
219
- queryId: revenueQueryId,
220
- config: {
221
- format: 'currency',
222
- prefix: '$',
223
- showChange: true,
224
- },
225
- });
226
-
227
- // Execute a query
228
- const queryEngine = createQueryEngine();
229
- const result = await queryEngine.execute(
230
- { type: 'METRIC', metricIds: ['daily_revenue'] },
231
- { dateRange: { start: new Date('2024-01-01'), end: new Date() } }
232
- );
233
- ```
234
-
235
- ## Dependencies
236
-
237
- - `@contractspec/lib.schema` - Entity definitions
238
- - `@contractspec/lib.contracts-spec` - Contract definitions
239
- - `@contractspec/lib.identity-rbac` - Access control
240
- - `@contractspec/lib.metering` - Usage metrics integration
241
- - `@contractspec/module.audit-trail` - Change tracking
242
- - `@contractspec/module.notifications` - Report delivery
243
-
244
- ## Feature Flags
245
-
246
- | Flag | Description | Default |
247
- |------|-------------|---------|
248
- | `ANALYTICS_SQL_QUERIES` | Enable SQL query support | false |
249
- | `ANALYTICS_SCHEDULED_REPORTS` | Enable scheduled reports | true |
250
- | `ANALYTICS_PUBLIC_DASHBOARDS` | Allow public sharing | false |
251
- | `ANALYTICS_ADVANCED_WIDGETS` | Enable maps, funnels | true |
252
- | `ANALYTICS_QUERY_CACHING` | Enable result caching | true |
253
-
254
- ## Permissions
255
-
256
- | Permission | Description | Default Roles |
257
- |------------|-------------|---------------|
258
- | `dashboard:view` | View dashboards | viewer, analyst, admin |
259
- | `dashboard:create` | Create dashboards | analyst, admin |
260
- | `dashboard:edit` | Edit dashboards | analyst, admin |
261
- | `dashboard:delete` | Delete dashboards | admin |
262
- | `dashboard:share` | Share externally | analyst, admin |
263
- | `query:create` | Create queries | analyst, admin |
264
- | `query:execute` | Execute queries | viewer, analyst, admin |
265
- | `report:schedule` | Schedule reports | analyst, admin |
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
25
+ Use `@contractspec/example.analytics-dashboard` as a reference implementation, or import its exported surfaces into a workspace that composes ContractSpec examples and bundles.
26
+
27
+ ## Architecture
28
+
29
+ - `src/dashboard` is part of the package's public or composition surface.
30
+ - `src/dashboard.feature.ts` defines a feature entrypoint.
31
+ - `src/datasource` is part of the package's public or composition surface.
32
+ - `src/docs/` contains docblocks and documentation-facing exports.
33
+ - `src/events.ts` is package-level event definitions.
34
+ - `src/example.ts` is the runnable example entrypoint.
35
+ - `src/handlers/` contains handlers or demo adapters wired to contract surfaces.
36
+
37
+ ## Public Entry Points
38
+
39
+ - Export `.` resolves through `./src/index.ts`.
40
+ - Export `./dashboard` resolves through `./src/dashboard/index.ts`.
41
+ - Export `./dashboard.feature` resolves through `./src/dashboard.feature.ts`.
42
+ - Export `./dashboard/dashboard.enum` resolves through `./src/dashboard/dashboard.enum.ts`.
43
+ - Export `./dashboard/dashboard.operation` resolves through `./src/dashboard/dashboard.operation.ts`.
44
+ - Export `./dashboard/dashboard.presentation` resolves through `./src/dashboard/dashboard.presentation.ts`.
45
+ - Export `./dashboard/dashboard.schema` resolves through `./src/dashboard/dashboard.schema.ts`.
46
+ - Export `./dashboard/dashboard.test-spec` resolves through `./src/dashboard/dashboard.test-spec.ts`.
47
+ - Export `./datasource/posthog-datasource` resolves through `./src/datasource/posthog-datasource.ts`.
48
+ - Export `./docs` resolves through `./src/docs/index.ts`.
49
+ - The package publishes 37 total export subpaths; keep docs aligned with `package.json`.
50
+
51
+ ## Local Commands
52
+
53
+ - `bun run dev` — contractspec-bun-build dev
54
+ - `bun run build` — bun run prebuild && bun run build:bundle && bun run build:types
55
+ - `bun run lint` — bun lint:fix
56
+ - `bun run lint:check` — biome check .
57
+ - `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
58
+ - `bun run typecheck` — tsc --noEmit
59
+ - `bun run publish:pkg` — bun publish --tolerate-republish --ignore-scripts --verbose
60
+ - `bun run publish:pkg:canary` — bun publish:pkg --tag canary
61
+ - `bun run clean` rimraf dist .turbo
62
+ - `bun run build:bundle` contractspec-bun-build transpile
63
+ - `bun run build:types` — contractspec-bun-build types
64
+ - `bun run prebuild` — contractspec-bun-build prebuild
65
+
66
+ ## Recent Updates
67
+
68
+ - Replace eslint+prettier by biomejs to optimize speed.
69
+ - Add data visualization capabilities.
70
+ - Missing contract layers.
71
+
72
+ ## Notes
73
+
74
+ - Works alongside `@contractspec/lib.contracts-integrations`, `@contractspec/lib.contracts-spec`, `@contractspec/lib.design-system`, `@contractspec/lib.example-shared-ui`, `@contractspec/lib.runtime-sandbox`, ...