-
Notifications
You must be signed in to change notification settings - Fork 513
docs: Document Custom Dashboards feature for AI-powered data visualization #1279
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: dev
Are you sure you want to change the base?
Changes from all commits
094414c
002b774
a3dfe32
1adea0f
4429d30
5a03b74
e8c94c3
2ba0f80
7812bb6
58a046f
0a9f169
da728f2
c178937
01e31d2
eac1890
6330cb2
2cbb082
a06aa05
16445cc
9ff1e2e
14cf734
0835f1d
ae4948d
129c935
8315962
3447411
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -8,11 +8,12 @@ The Analytics app gives you direct access to your project's analytics dataset in | |||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Overview | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Analytics is organized into three areas in the dashboard: | ||||||||||||||||||||||
| Analytics is organized into four areas in the dashboard: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| - **Tables**: Browse event rows with sorting, search, and incremental loading | ||||||||||||||||||||||
| - **Queries**: Run and save reusable ClickHouse SQL queries | ||||||||||||||||||||||
| - **Replays**: Watch session replays and filter by user, team, duration, activity window, and click count | ||||||||||||||||||||||
| - **Dashboards**: Build custom data visualizations using natural language | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## How Analytics Works | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
|
@@ -25,6 +26,7 @@ flowchart LR | |||||||||||||||||||||
| C --> D[Tables view] | ||||||||||||||||||||||
| C --> E[SQL query runner] | ||||||||||||||||||||||
| C --> F[Session replay UI] | ||||||||||||||||||||||
| C --> G[Custom dashboards] | ||||||||||||||||||||||
| `} /> | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### What Gets Tracked | ||||||||||||||||||||||
|
|
@@ -111,9 +113,42 @@ export const stackClientApp = new StackClientApp({ | |||||||||||||||||||||
|
|
||||||||||||||||||||||
| `maskAllInputs` defaults to `true`, so form fields are masked unless you explicitly disable it. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Custom Dashboards | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Custom Dashboards let you build data visualizations using natural language. Describe what you want to see, and AI generates an interactive dashboard with charts, metrics, and tables. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### Creating a Dashboard | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| 1. Go to **Dashboards** in the sidebar | ||||||||||||||||||||||
| 2. Click **New Dashboard** or use the command palette (Cmd+K / Ctrl+K) | ||||||||||||||||||||||
| 3. Describe what you want to visualize (e.g., "Show me user signups over the last 30 days with a breakdown by authentication method") | ||||||||||||||||||||||
| 4. The AI generates an interactive dashboard | ||||||||||||||||||||||
|
Comment on lines
+122
to
+125
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The documented creation flow skips a required step. In
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### Dashboard Features | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Custom dashboards support: | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| - **Metric cards**: key numbers like total users, signups, or conversion rates | ||||||||||||||||||||||
| - **Charts**: trends and distributions using bar charts, line charts, and more | ||||||||||||||||||||||
| - **Tables**: detailed data rows with sorting and filtering | ||||||||||||||||||||||
| - **Navigation**: links to other dashboard pages like Users or Teams | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ### Editing Dashboards | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| 1. Open the dashboard you want to edit | ||||||||||||||||||||||
| 2. Click the **Edit** button | ||||||||||||||||||||||
| 3. Describe your changes in the chat panel (e.g., "Add a pie chart showing user distribution by country") | ||||||||||||||||||||||
| 4. The AI updates the dashboard while preserving parts you didn't change | ||||||||||||||||||||||
| 5. Click **Done** when finished | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
|
Comment on lines
+138
to
+143
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The editing steps reference clicking an Edit button (step 2) and a Done button (step 5), but neither exists as a fixed UI element in the dashboard detail page. Looking at
The steps should be updated to reflect the actual interaction model:
Suggested change
|
||||||||||||||||||||||
| Dashboards are automatically saved to your project. View and manage all saved dashboards from the **Dashboards** page. | ||||||||||||||||||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
The documentation states "Dashboards are automatically saved to your project," but the actual implementation requires an explicit save action. In
Suggested change
|
||||||||||||||||||||||
|
|
||||||||||||||||||||||
| Use custom dashboards when you need quick, tailored visualizations without writing SQL. | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| ## Best Practices | ||||||||||||||||||||||
|
|
||||||||||||||||||||||
| 1. **Use Tables for quick incident triage**: the Tables UI is the fastest way to inspect recent `events` rows without writing SQL. | ||||||||||||||||||||||
| 2. **Use Queries for repeatable analysis**: save important SQL in folders, and scope queries with filters/`LIMIT` so they stay within result and timeout limits. | ||||||||||||||||||||||
| 3. **Use Replays for behavioral debugging**: start from an event pattern, then inspect matching session replays to understand what users actually did. | ||||||||||||||||||||||
| 4. **Keep replay privacy defaults on**: leave `maskAllInputs` enabled unless you have a specific reason and a data-handling policy for unmasked inputs. | ||||||||||||||||||||||
| 4. **Use Custom Dashboards for quick visualizations**: describe what you want in plain language to generate charts and metrics without writing code. | ||||||||||||||||||||||
| 5. **Keep replay privacy defaults on**: leave `maskAllInputs` enabled unless you have a specific reason and a data-handling policy for unmasked inputs. | ||||||||||||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Citation: Custom Dashboards feature introduced in this PR. Based on the implementation in
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/and the AI prompts inapps/backend/src/lib/ai/prompts.tswhich describe the dashboard creation workflow with metric cards, charts, tables, and navigation capabilities.View source