@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.
- package/README.md +64 -271
- package/dist/browser/dashboard.feature.js +592 -0
- package/dist/browser/events.js +1 -1
- package/dist/browser/index.js +1171 -627
- package/dist/browser/ui/AnalyticsDashboard.js +826 -194
- package/dist/browser/ui/AnalyticsDashboard.widgets.js +94 -0
- package/dist/browser/ui/AnalyticsQueriesTable.js +99 -0
- package/dist/browser/ui/hooks/index.js +594 -3
- package/dist/browser/ui/hooks/useAnalyticsData.js +594 -3
- package/dist/browser/ui/index.js +964 -440
- package/dist/browser/ui/renderers/analytics.markdown.js +620 -138
- package/dist/browser/ui/renderers/index.js +620 -138
- package/dist/browser/visualizations/catalog.js +457 -0
- package/dist/browser/visualizations/index.js +611 -0
- package/dist/browser/visualizations/specs.breakdown.js +140 -0
- package/dist/browser/visualizations/specs.performance.js +198 -0
- package/dist/browser/visualizations/widgets.js +595 -0
- package/dist/dashboard/index.d.ts +3 -3
- package/dist/dashboard.feature.js +592 -0
- package/dist/events.js +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.js +1171 -627
- package/dist/node/dashboard.feature.js +592 -0
- package/dist/node/events.js +1 -1
- package/dist/node/index.js +1171 -627
- package/dist/node/ui/AnalyticsDashboard.js +826 -194
- package/dist/node/ui/AnalyticsDashboard.widgets.js +94 -0
- package/dist/node/ui/AnalyticsQueriesTable.js +99 -0
- package/dist/node/ui/hooks/index.js +594 -3
- package/dist/node/ui/hooks/useAnalyticsData.js +594 -3
- package/dist/node/ui/index.js +964 -440
- package/dist/node/ui/renderers/analytics.markdown.js +620 -138
- package/dist/node/ui/renderers/index.js +620 -138
- package/dist/node/visualizations/catalog.js +457 -0
- package/dist/node/visualizations/index.js +611 -0
- package/dist/node/visualizations/specs.breakdown.js +140 -0
- package/dist/node/visualizations/specs.performance.js +198 -0
- package/dist/node/visualizations/widgets.js +595 -0
- package/dist/query/index.d.ts +1 -1
- package/dist/query-engine/index.d.ts +1 -1
- package/dist/ui/AnalyticsDashboard.js +826 -194
- package/dist/ui/AnalyticsDashboard.widgets.d.ts +5 -0
- package/dist/ui/AnalyticsDashboard.widgets.js +95 -0
- package/dist/ui/AnalyticsQueriesTable.d.ts +4 -0
- package/dist/ui/AnalyticsQueriesTable.js +100 -0
- package/dist/ui/hooks/index.d.ts +1 -1
- package/dist/ui/hooks/index.js +594 -3
- package/dist/ui/hooks/useAnalyticsData.js +594 -3
- package/dist/ui/index.d.ts +1 -1
- package/dist/ui/index.js +964 -440
- package/dist/ui/renderers/analytics.markdown.d.ts +0 -9
- package/dist/ui/renderers/analytics.markdown.js +620 -138
- package/dist/ui/renderers/index.js +620 -138
- package/dist/visualizations/catalog.d.ts +9 -0
- package/dist/visualizations/catalog.js +458 -0
- package/dist/visualizations/index.d.ts +4 -0
- package/dist/visualizations/index.js +612 -0
- package/dist/visualizations/specs.breakdown.d.ts +4 -0
- package/dist/visualizations/specs.breakdown.js +141 -0
- package/dist/visualizations/specs.performance.d.ts +5 -0
- package/dist/visualizations/specs.performance.js +199 -0
- package/dist/visualizations/widgets.d.ts +24 -0
- package/dist/visualizations/widgets.js +596 -0
- package/dist/visualizations/widgets.test.d.ts +1 -0
- 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
|
-
|
|
7
|
+
## What This Demonstrates
|
|
7
8
|
|
|
8
|
-
|
|
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
|
-
|
|
16
|
+
## Running Locally
|
|
11
17
|
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
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
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
##
|
|
236
|
-
|
|
237
|
-
-
|
|
238
|
-
-
|
|
239
|
-
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
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`, ...
|