@bonnard/cli 0.2.14 → 0.2.16
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 +2 -2
- package/dist/bin/bon.mjs +173 -2
- package/dist/docs/topics/sdk.apexcharts.md +281 -0
- package/dist/docs/topics/sdk.authentication.md +130 -0
- package/dist/docs/topics/sdk.browser.md +181 -0
- package/dist/docs/topics/sdk.chartjs.md +327 -0
- package/dist/docs/topics/sdk.echarts.md +297 -0
- package/dist/docs/topics/sdk.md +95 -0
- package/dist/docs/topics/sdk.query-reference.md +307 -0
- package/dist/templates/claude/skills/bonnard-build-dashboard/SKILL.md +107 -0
- package/dist/templates/claude/skills/bonnard-get-started/SKILL.md +1 -1
- package/dist/templates/claude/skills/bonnard-metabase-migrate/SKILL.md +1 -1
- package/dist/templates/cursor/rules/bonnard-build-dashboard.mdc +106 -0
- package/dist/templates/cursor/rules/bonnard-get-started.mdc +1 -1
- package/dist/templates/cursor/rules/bonnard-metabase-migrate.mdc +1 -1
- package/dist/templates/shared/bonnard.md +6 -1
- package/package.json +2 -2
- package/dist/docs/topics/dashboards.components.md +0 -227
- package/dist/docs/topics/dashboards.examples.md +0 -270
- package/dist/docs/topics/dashboards.inputs.md +0 -173
- package/dist/docs/topics/dashboards.md +0 -115
- package/dist/docs/topics/dashboards.queries.md +0 -112
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
# Examples
|
|
2
|
-
|
|
3
|
-
> Complete dashboard examples showing common patterns.
|
|
4
|
-
|
|
5
|
-
## Revenue Overview Dashboard
|
|
6
|
-
|
|
7
|
-
The most common dashboard pattern: KPI cards at the top for at-a-glance metrics, a time series chart for trends, and a bar chart with data table for category breakdown.
|
|
8
|
-
|
|
9
|
-
```markdown
|
|
10
|
-
---
|
|
11
|
-
title: Revenue Overview
|
|
12
|
-
description: Monthly revenue trends and breakdowns
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
# Revenue Overview
|
|
16
|
-
|
|
17
|
-
` ``query total_revenue
|
|
18
|
-
measures: [orders.total_revenue]
|
|
19
|
-
` ``
|
|
20
|
-
|
|
21
|
-
` ``query order_count
|
|
22
|
-
measures: [orders.count]
|
|
23
|
-
` ``
|
|
24
|
-
|
|
25
|
-
` ``query avg_order
|
|
26
|
-
measures: [orders.avg_order_value]
|
|
27
|
-
` ``
|
|
28
|
-
|
|
29
|
-
<Grid cols="3">
|
|
30
|
-
<BigValue data={total_revenue} value="orders.total_revenue" title="Total Revenue" />
|
|
31
|
-
<BigValue data={order_count} value="orders.count" title="Orders" />
|
|
32
|
-
<BigValue data={avg_order} value="orders.avg_order_value" title="Avg Order" />
|
|
33
|
-
</Grid>
|
|
34
|
-
|
|
35
|
-
## Monthly Trend
|
|
36
|
-
|
|
37
|
-
` ``query monthly_revenue
|
|
38
|
-
measures: [orders.total_revenue]
|
|
39
|
-
timeDimension:
|
|
40
|
-
dimension: orders.created_at
|
|
41
|
-
granularity: month
|
|
42
|
-
dateRange: [2025-01-01, 2025-12-31]
|
|
43
|
-
` ``
|
|
44
|
-
|
|
45
|
-
<LineChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" title="Monthly Revenue" />
|
|
46
|
-
|
|
47
|
-
## By Category
|
|
48
|
-
|
|
49
|
-
` ``query by_category
|
|
50
|
-
measures: [orders.total_revenue, orders.count]
|
|
51
|
-
dimensions: [orders.category]
|
|
52
|
-
orderBy:
|
|
53
|
-
orders.total_revenue: desc
|
|
54
|
-
` ``
|
|
55
|
-
|
|
56
|
-
<BarChart data={by_category} x="orders.category" y="orders.total_revenue" title="Revenue by Category" />
|
|
57
|
-
<DataTable data={by_category} />
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
## Sales Pipeline Dashboard
|
|
61
|
-
|
|
62
|
-
A status-focused dashboard using a pie chart for proportional breakdown, a horizontal bar chart for ranking, and filters to drill into a specific segment.
|
|
63
|
-
|
|
64
|
-
```markdown
|
|
65
|
-
---
|
|
66
|
-
title: Sales Pipeline
|
|
67
|
-
description: Order status breakdown and city analysis
|
|
68
|
-
---
|
|
69
|
-
|
|
70
|
-
# Sales Pipeline
|
|
71
|
-
|
|
72
|
-
` ``query by_status
|
|
73
|
-
measures: [orders.count]
|
|
74
|
-
dimensions: [orders.status]
|
|
75
|
-
` ``
|
|
76
|
-
|
|
77
|
-
<PieChart data={by_status} name="orders.status" value="orders.count" title="Order Status" />
|
|
78
|
-
|
|
79
|
-
## Top Cities
|
|
80
|
-
|
|
81
|
-
` ``query top_cities
|
|
82
|
-
measures: [orders.total_revenue, orders.count]
|
|
83
|
-
dimensions: [orders.city]
|
|
84
|
-
orderBy:
|
|
85
|
-
orders.total_revenue: desc
|
|
86
|
-
limit: 10
|
|
87
|
-
` ``
|
|
88
|
-
|
|
89
|
-
<BarChart data={top_cities} x="orders.city" y="orders.total_revenue" horizontal />
|
|
90
|
-
<DataTable data={top_cities} />
|
|
91
|
-
|
|
92
|
-
## Completed Orders Over Time
|
|
93
|
-
|
|
94
|
-
` ``query completed_trend
|
|
95
|
-
measures: [orders.total_revenue]
|
|
96
|
-
timeDimension:
|
|
97
|
-
dimension: orders.created_at
|
|
98
|
-
granularity: week
|
|
99
|
-
dateRange: [2025-01-01, 2025-06-30]
|
|
100
|
-
filters:
|
|
101
|
-
- dimension: orders.status
|
|
102
|
-
operator: equals
|
|
103
|
-
values: [completed]
|
|
104
|
-
` ``
|
|
105
|
-
|
|
106
|
-
<AreaChart data={completed_trend} x="orders.created_at" y="orders.total_revenue" title="Completed Order Revenue" />
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Multi-Series Dashboard
|
|
110
|
-
|
|
111
|
-
When you need to compare segments side-by-side, use the `series` prop to split data by a dimension into colored segments. This example shows stacked bars, grouped bars, multi-line, and stacked area — all from the same data.
|
|
112
|
-
|
|
113
|
-
```markdown
|
|
114
|
-
---
|
|
115
|
-
title: Revenue by Channel
|
|
116
|
-
description: Multi-series charts showing revenue breakdown by sales channel
|
|
117
|
-
---
|
|
118
|
-
|
|
119
|
-
# Revenue by Channel
|
|
120
|
-
|
|
121
|
-
` ``query revenue_by_channel
|
|
122
|
-
measures: [orders.total_revenue]
|
|
123
|
-
dimensions: [orders.channel]
|
|
124
|
-
timeDimension:
|
|
125
|
-
dimension: orders.created_at
|
|
126
|
-
granularity: month
|
|
127
|
-
dateRange: [2025-01-01, 2025-12-31]
|
|
128
|
-
` ``
|
|
129
|
-
|
|
130
|
-
## Stacked Bar (default)
|
|
131
|
-
|
|
132
|
-
<BarChart data={revenue_by_channel} x="orders.created_at" y="orders.total_revenue" series="orders.channel" title="Revenue by Channel" />
|
|
133
|
-
|
|
134
|
-
## Grouped Bar
|
|
135
|
-
|
|
136
|
-
<BarChart data={revenue_by_channel} x="orders.created_at" y="orders.total_revenue" series="orders.channel" type="grouped" title="Revenue by Channel (Grouped)" />
|
|
137
|
-
|
|
138
|
-
## Multi-Line
|
|
139
|
-
|
|
140
|
-
` ``query trend
|
|
141
|
-
measures: [orders.total_revenue, orders.count]
|
|
142
|
-
timeDimension:
|
|
143
|
-
dimension: orders.created_at
|
|
144
|
-
granularity: month
|
|
145
|
-
dateRange: [2025-01-01, 2025-12-31]
|
|
146
|
-
` ``
|
|
147
|
-
|
|
148
|
-
<LineChart data={trend} x="orders.created_at" y="orders.total_revenue,orders.count" title="Revenue vs Orders" />
|
|
149
|
-
|
|
150
|
-
## Stacked Area by Channel
|
|
151
|
-
|
|
152
|
-
<AreaChart data={revenue_by_channel} x="orders.created_at" y="orders.total_revenue" series="orders.channel" type="stacked" title="Revenue by Channel" />
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
## Formatted Dashboard
|
|
156
|
-
|
|
157
|
-
Use format presets to display currencies, percentages, and number styles consistently across KPIs, charts, and tables.
|
|
158
|
-
|
|
159
|
-
```markdown
|
|
160
|
-
---
|
|
161
|
-
title: Sales Performance
|
|
162
|
-
description: Formatted revenue metrics and trends
|
|
163
|
-
---
|
|
164
|
-
|
|
165
|
-
# Sales Performance
|
|
166
|
-
|
|
167
|
-
` ``query totals
|
|
168
|
-
measures: [orders.total_revenue, orders.count, orders.avg_order_value]
|
|
169
|
-
` ``
|
|
170
|
-
|
|
171
|
-
<Grid cols="3">
|
|
172
|
-
<BigValue data={totals} value="orders.total_revenue" title="Revenue" fmt="eur2" />
|
|
173
|
-
<BigValue data={totals} value="orders.count" title="Orders" fmt="num0" />
|
|
174
|
-
<BigValue data={totals} value="orders.avg_order_value" title="Avg Order" fmt="eur2" />
|
|
175
|
-
</Grid>
|
|
176
|
-
|
|
177
|
-
## Revenue Trend
|
|
178
|
-
|
|
179
|
-
` ``query monthly
|
|
180
|
-
measures: [orders.total_revenue]
|
|
181
|
-
timeDimension:
|
|
182
|
-
dimension: orders.created_at
|
|
183
|
-
granularity: month
|
|
184
|
-
dateRange: [2025-01-01, 2025-12-31]
|
|
185
|
-
` ``
|
|
186
|
-
|
|
187
|
-
<LineChart data={monthly} x="orders.created_at" y="orders.total_revenue" title="Monthly Revenue" yFmt="eur" />
|
|
188
|
-
|
|
189
|
-
## Detail Table
|
|
190
|
-
|
|
191
|
-
` ``query details
|
|
192
|
-
measures: [orders.total_revenue, orders.count]
|
|
193
|
-
dimensions: [orders.category]
|
|
194
|
-
orderBy:
|
|
195
|
-
orders.total_revenue: desc
|
|
196
|
-
` ``
|
|
197
|
-
|
|
198
|
-
<DataTable data={details} fmt="orders.total_revenue:eur2,orders.count:num0" />
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
## Interactive Dashboard
|
|
202
|
-
|
|
203
|
-
Combine a DateRange picker and Dropdown filter to let viewers explore the data. Filter state syncs to the URL, so shared links preserve the exact filtered view.
|
|
204
|
-
|
|
205
|
-
```markdown
|
|
206
|
-
---
|
|
207
|
-
title: Interactive Sales
|
|
208
|
-
description: Sales dashboard with date and channel filters
|
|
209
|
-
---
|
|
210
|
-
|
|
211
|
-
# Interactive Sales
|
|
212
|
-
|
|
213
|
-
<DateRange name="period" default="last-6-months" label="Time Period" />
|
|
214
|
-
<Dropdown name="channel" dimension="orders.channel" data={channels} queries="trend,by_city" label="Channel" />
|
|
215
|
-
|
|
216
|
-
` ``query channels
|
|
217
|
-
dimensions: [orders.channel]
|
|
218
|
-
` ``
|
|
219
|
-
|
|
220
|
-
` ``query kpis
|
|
221
|
-
measures: [orders.total_revenue, orders.count]
|
|
222
|
-
` ``
|
|
223
|
-
|
|
224
|
-
<Grid cols="2">
|
|
225
|
-
<BigValue data={kpis} value="orders.total_revenue" title="Revenue" fmt="eur2" />
|
|
226
|
-
<BigValue data={kpis} value="orders.count" title="Orders" fmt="num0" />
|
|
227
|
-
</Grid>
|
|
228
|
-
|
|
229
|
-
## Revenue Trend
|
|
230
|
-
|
|
231
|
-
` ``query trend
|
|
232
|
-
measures: [orders.total_revenue]
|
|
233
|
-
timeDimension:
|
|
234
|
-
dimension: orders.created_at
|
|
235
|
-
granularity: month
|
|
236
|
-
` ``
|
|
237
|
-
|
|
238
|
-
<LineChart data={trend} x="orders.created_at" y="orders.total_revenue" title="Monthly Revenue" yFmt="eur" />
|
|
239
|
-
|
|
240
|
-
## By City
|
|
241
|
-
|
|
242
|
-
` ``query by_city
|
|
243
|
-
measures: [orders.total_revenue]
|
|
244
|
-
dimensions: [orders.city]
|
|
245
|
-
orderBy:
|
|
246
|
-
orders.total_revenue: desc
|
|
247
|
-
limit: 10
|
|
248
|
-
` ``
|
|
249
|
-
|
|
250
|
-
<BarChart data={by_city} x="orders.city" y="orders.total_revenue" title="Top Cities" yFmt="eur" />
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
The `<DateRange>` automatically applies to all queries with a `timeDimension` (here: `trend`). The `<Dropdown>` filters `trend` and `by_city` by channel. The `channels` query populates the dropdown and is never filtered by it.
|
|
254
|
-
|
|
255
|
-
## Tips
|
|
256
|
-
|
|
257
|
-
- **Start with KPIs**: Use `BigValue` in a `Grid` at the top for key metrics
|
|
258
|
-
- **One query per chart**: Each component gets its own query — keep them focused
|
|
259
|
-
- **Use views**: Prefer view names over cube names when available
|
|
260
|
-
- **Name queries descriptively**: `monthly_revenue` is better than `q1`
|
|
261
|
-
- **Limit large datasets**: Add `limit` to dimension queries to avoid oversized charts
|
|
262
|
-
- **Time series**: Always use `timeDimension` with `granularity` for time-based charts
|
|
263
|
-
- **Multi-series**: Use `series="cube.column"` to split data by a dimension. For bars, default is stacked; use `type="grouped"` for side-by-side
|
|
264
|
-
- **Multiple y columns**: Use comma-separated values like `y="orders.revenue,orders.cases"` to show multiple measures on one chart
|
|
265
|
-
|
|
266
|
-
## See Also
|
|
267
|
-
|
|
268
|
-
- [Dashboards](dashboards) — overview and deployment
|
|
269
|
-
- [Queries](dashboards.queries) — query syntax and properties
|
|
270
|
-
- [Components](dashboards.components) — chart and display components
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
# Inputs
|
|
2
|
-
|
|
3
|
-
> Interactive filter inputs for dashboards — date range pickers and dropdown selectors.
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
Inputs add interactivity to dashboards. They render as a filter bar above the charts and re-execute queries when values change. Inspired by Evidence.dev's inputs pattern, adapted for the Cube semantic layer.
|
|
8
|
-
|
|
9
|
-
Two input types are available:
|
|
10
|
-
|
|
11
|
-
- **DateRange** — preset date range picker that overrides `timeDimension.dateRange`
|
|
12
|
-
- **Dropdown** — dimension value selector that adds/replaces filters
|
|
13
|
-
|
|
14
|
-
## DateRange
|
|
15
|
-
|
|
16
|
-
Renders a date range preset picker. When changed, overrides `timeDimension.dateRange` on targeted queries.
|
|
17
|
-
|
|
18
|
-
```markdown
|
|
19
|
-
<DateRange name="period" default="last-6-months" label="Time Period" />
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### Props
|
|
23
|
-
|
|
24
|
-
| Prop | Type | Required | Description |
|
|
25
|
-
|------|------|----------|-------------|
|
|
26
|
-
| `name` | string | Yes | Unique input name |
|
|
27
|
-
| `default` | preset key | No | Initial preset (default: `last-6-months`) |
|
|
28
|
-
| `label` | string | No | Label shown above the picker |
|
|
29
|
-
| `queries` | string | No | Comma-separated query names to target |
|
|
30
|
-
|
|
31
|
-
### Targeting
|
|
32
|
-
|
|
33
|
-
Targeting lets you control which queries a filter affects — useful when some charts should stay fixed while others respond to filter changes.
|
|
34
|
-
|
|
35
|
-
- **No `queries` prop** — applies to ALL queries that have a `timeDimension`
|
|
36
|
-
- **With `queries` prop** — only applies to the listed queries
|
|
37
|
-
|
|
38
|
-
### Presets
|
|
39
|
-
|
|
40
|
-
| Key | Label |
|
|
41
|
-
|-----|-------|
|
|
42
|
-
| `last-7-days` | Last 7 Days |
|
|
43
|
-
| `last-30-days` | Last 30 Days |
|
|
44
|
-
| `last-3-months` | Last 3 Months |
|
|
45
|
-
| `last-6-months` | Last 6 Months |
|
|
46
|
-
| `last-12-months` | Last 12 Months |
|
|
47
|
-
| `month-to-date` | Month to Date |
|
|
48
|
-
| `year-to-date` | Year to Date |
|
|
49
|
-
| `last-year` | Last Year |
|
|
50
|
-
| `all-time` | All Time |
|
|
51
|
-
|
|
52
|
-
## Dropdown
|
|
53
|
-
|
|
54
|
-
Renders a dropdown selector populated from a query's dimension values. Adds a filter on the specified dimension to targeted queries.
|
|
55
|
-
|
|
56
|
-
```markdown
|
|
57
|
-
<Dropdown name="channel" dimension="orders.channel" data={channels} queries="main,trend" label="Channel" />
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
### Props
|
|
61
|
-
|
|
62
|
-
| Prop | Type | Required | Description |
|
|
63
|
-
|------|------|----------|-------------|
|
|
64
|
-
| `name` | string | Yes | Unique input name |
|
|
65
|
-
| `dimension` | string | Yes | Dimension to filter on |
|
|
66
|
-
| `data` | query ref | Yes | Query that provides the dropdown options |
|
|
67
|
-
| `queries` | string | Yes | Comma-separated query names to filter |
|
|
68
|
-
| `label` | string | No | Label shown above the dropdown |
|
|
69
|
-
| `default` | string | No | Initial selected value (default: All) |
|
|
70
|
-
|
|
71
|
-
### Behavior
|
|
72
|
-
|
|
73
|
-
- Always includes an "All" option that removes the filter
|
|
74
|
-
- The dropdown's own `data` query is never filtered by itself (prevents circular dependencies)
|
|
75
|
-
- `queries` is required — the dropdown only filters explicitly listed queries
|
|
76
|
-
|
|
77
|
-
## Examples
|
|
78
|
-
|
|
79
|
-
### DateRange only
|
|
80
|
-
|
|
81
|
-
```markdown
|
|
82
|
-
---
|
|
83
|
-
title: Revenue Trends
|
|
84
|
-
---
|
|
85
|
-
|
|
86
|
-
<DateRange name="period" default="last-6-months" label="Time Period" />
|
|
87
|
-
|
|
88
|
-
` ``query monthly_revenue
|
|
89
|
-
measures: [orders.total_revenue]
|
|
90
|
-
timeDimension:
|
|
91
|
-
dimension: orders.created_at
|
|
92
|
-
granularity: month
|
|
93
|
-
` ``
|
|
94
|
-
|
|
95
|
-
<LineChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" />
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
The DateRange automatically applies to `monthly_revenue` because it has a `timeDimension`. No hardcoded `dateRange` needed in the query.
|
|
99
|
-
|
|
100
|
-
### Dropdown with query binding
|
|
101
|
-
|
|
102
|
-
```markdown
|
|
103
|
-
---
|
|
104
|
-
title: Sales by Channel
|
|
105
|
-
---
|
|
106
|
-
|
|
107
|
-
` ``query channels
|
|
108
|
-
dimensions: [orders.channel]
|
|
109
|
-
` ``
|
|
110
|
-
|
|
111
|
-
<Dropdown name="ch" dimension="orders.channel" data={channels} queries="main" label="Channel" />
|
|
112
|
-
|
|
113
|
-
` ``query main
|
|
114
|
-
measures: [orders.total_revenue]
|
|
115
|
-
dimensions: [orders.city]
|
|
116
|
-
` ``
|
|
117
|
-
|
|
118
|
-
<BarChart data={main} x="orders.city" y="orders.total_revenue" />
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### Combined inputs
|
|
122
|
-
|
|
123
|
-
```markdown
|
|
124
|
-
---
|
|
125
|
-
title: Sales Dashboard
|
|
126
|
-
---
|
|
127
|
-
|
|
128
|
-
<DateRange name="period" default="last-6-months" label="Time Period" />
|
|
129
|
-
<Dropdown name="channel" dimension="orders.channel" data={channels} queries="trend,by_city" label="Channel" />
|
|
130
|
-
|
|
131
|
-
` ``query channels
|
|
132
|
-
dimensions: [orders.channel]
|
|
133
|
-
` ``
|
|
134
|
-
|
|
135
|
-
` ``query trend
|
|
136
|
-
measures: [orders.total_revenue]
|
|
137
|
-
timeDimension:
|
|
138
|
-
dimension: orders.created_at
|
|
139
|
-
granularity: month
|
|
140
|
-
` ``
|
|
141
|
-
|
|
142
|
-
<LineChart data={trend} x="orders.created_at" y="orders.total_revenue" />
|
|
143
|
-
|
|
144
|
-
` ``query by_city
|
|
145
|
-
measures: [orders.total_revenue]
|
|
146
|
-
dimensions: [orders.city]
|
|
147
|
-
` ``
|
|
148
|
-
|
|
149
|
-
<BarChart data={by_city} x="orders.city" y="orders.total_revenue" />
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
Both inputs work together: the DateRange scopes the time window on `trend` (which has a timeDimension), and the Dropdown filters both `trend` and `by_city` by channel.
|
|
153
|
-
|
|
154
|
-
## Shareable URLs
|
|
155
|
-
|
|
156
|
-
Input values automatically sync to URL query params. When a user changes a filter, the URL updates to reflect the current state — for example:
|
|
157
|
-
|
|
158
|
-
```
|
|
159
|
-
/dashboards/sales?period=last-30-days&channel=Online
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
- **Default values are omitted** from the URL for clean links
|
|
163
|
-
- **Sharing a URL** preserves the current filter state — recipients see exactly the same filtered view
|
|
164
|
-
- **Refreshing the page** restores the active filters from the URL
|
|
165
|
-
- The **Copy Link** button in the dashboard header copies the full URL including filter params
|
|
166
|
-
|
|
167
|
-
DateRange inputs store the preset key (e.g. `last-30-days`), so shared URLs stay relative to today. Dropdown inputs store the selected value string.
|
|
168
|
-
|
|
169
|
-
## See Also
|
|
170
|
-
|
|
171
|
-
- [Dashboards](dashboards) — overview and deployment
|
|
172
|
-
- [Components](dashboards.components) — chart and display components
|
|
173
|
-
- [Examples](dashboards.examples) — complete dashboard examples
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
# Dashboards
|
|
2
|
-
|
|
3
|
-
> Build interactive dashboards from markdown with embedded semantic layer queries.
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
Dashboards let your team track key metrics without leaving the Bonnard app. Define queries once in markdown, deploy them, and every viewer gets live, governed data — no separate BI tool needed. Filters, formatting, and layout are all declared in the same file.
|
|
8
|
-
|
|
9
|
-
A dashboard is a markdown file with YAML frontmatter, query blocks, and chart components. Write it as a `.md` file, deploy with `bon dashboard deploy`, and view it in the Bonnard web app.
|
|
10
|
-
|
|
11
|
-
## Format
|
|
12
|
-
|
|
13
|
-
A dashboard file has three parts:
|
|
14
|
-
|
|
15
|
-
1. **Frontmatter** — YAML metadata between `---` delimiters
|
|
16
|
-
2. **Query blocks** — Named data queries in ` ```query ` code fences
|
|
17
|
-
3. **Content** — Markdown text and chart component tags
|
|
18
|
-
|
|
19
|
-
## Minimal Example
|
|
20
|
-
|
|
21
|
-
```markdown
|
|
22
|
-
---
|
|
23
|
-
title: Order Summary
|
|
24
|
-
description: Key metrics for the orders pipeline
|
|
25
|
-
---
|
|
26
|
-
|
|
27
|
-
# Order Summary
|
|
28
|
-
|
|
29
|
-
` ``query order_count
|
|
30
|
-
measures: [orders.count]
|
|
31
|
-
` ``
|
|
32
|
-
|
|
33
|
-
<BigValue data={order_count} value="orders.count" title="Total Orders" />
|
|
34
|
-
|
|
35
|
-
` ``query by_status
|
|
36
|
-
measures: [orders.count]
|
|
37
|
-
dimensions: [orders.status]
|
|
38
|
-
` ``
|
|
39
|
-
|
|
40
|
-
<BarChart data={by_status} x="orders.status" y="orders.count" />
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## Frontmatter
|
|
44
|
-
|
|
45
|
-
The YAML frontmatter is required and must include `title`:
|
|
46
|
-
|
|
47
|
-
```yaml
|
|
48
|
-
---
|
|
49
|
-
title: Revenue Dashboard # Required
|
|
50
|
-
description: Monthly trends # Optional
|
|
51
|
-
slug: revenue-dashboard # Optional (derived from title if omitted)
|
|
52
|
-
---
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
| Field | Required | Description |
|
|
56
|
-
|-------|----------|-------------|
|
|
57
|
-
| `title` | Yes | Dashboard title displayed in the viewer and listings |
|
|
58
|
-
| `description` | No | Short description shown in dashboard listings |
|
|
59
|
-
| `slug` | No | URL-safe identifier. Auto-derived from title if omitted |
|
|
60
|
-
|
|
61
|
-
## Deployment
|
|
62
|
-
|
|
63
|
-
Deploy from the command line or via MCP tools. Each deploy auto-versions the dashboard so you can roll back if needed.
|
|
64
|
-
|
|
65
|
-
```bash
|
|
66
|
-
# Deploy a single dashboard
|
|
67
|
-
bon dashboard deploy revenue.md
|
|
68
|
-
|
|
69
|
-
# Deploy all dashboards in a directory
|
|
70
|
-
bon dashboard deploy dashboards/
|
|
71
|
-
|
|
72
|
-
# List deployed dashboards
|
|
73
|
-
bon dashboard list
|
|
74
|
-
|
|
75
|
-
# Remove a dashboard
|
|
76
|
-
bon dashboard remove revenue-dashboard
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
Via MCP tools, agents can use `deploy_dashboard` with the markdown content as a string.
|
|
80
|
-
|
|
81
|
-
## Versioning
|
|
82
|
-
|
|
83
|
-
Every deployment auto-increments the version number and saves a snapshot. You can view version history and restore previous versions:
|
|
84
|
-
|
|
85
|
-
```bash
|
|
86
|
-
# Via MCP tools:
|
|
87
|
-
# get_dashboard with version parameter to fetch a specific version
|
|
88
|
-
# deploy_dashboard with slug + restore_version to roll back
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
Restoring a version creates a new version (e.g. restoring v2 from v5 creates v6 with v2's content). Version history is never deleted — only `remove_dashboard` deletes all history.
|
|
92
|
-
|
|
93
|
-
## Sharing
|
|
94
|
-
|
|
95
|
-
Dashboard viewers include a **Share** menu in the header with:
|
|
96
|
-
|
|
97
|
-
- **Copy link** — copies the current URL including any active filter state
|
|
98
|
-
- **Print to PDF** — opens the browser print dialog for PDF export
|
|
99
|
-
|
|
100
|
-
Filter state (DateRange presets, Dropdown selections) is encoded in URL query params, so shared links preserve the exact filtered view the sender was looking at.
|
|
101
|
-
|
|
102
|
-
## Governance
|
|
103
|
-
|
|
104
|
-
Dashboard queries respect the same governance policies as all other queries. When a user views a dashboard:
|
|
105
|
-
|
|
106
|
-
- **View-level access** — users only see data from views their governance groups allow
|
|
107
|
-
- **Row-level filtering** — user attributes (e.g. region, department) automatically filter query results
|
|
108
|
-
- All org members see the same dashboard list, but may see different data depending on their governance context
|
|
109
|
-
|
|
110
|
-
## See Also
|
|
111
|
-
|
|
112
|
-
- [Queries](dashboards.queries) — query syntax and properties
|
|
113
|
-
- [Components](dashboards.components) — chart and display components
|
|
114
|
-
- [Inputs](dashboards.inputs) — interactive filters
|
|
115
|
-
- [Examples](dashboards.examples) — complete dashboard examples
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
# Queries
|
|
2
|
-
|
|
3
|
-
> Define data queries in dashboard markdown using YAML code fences.
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
Each query fetches data from your semantic layer and makes it available to chart components. Queries use the same measures and dimensions defined in your cubes and views — field names stay consistent whether you're querying from a dashboard, MCP, or the API.
|
|
8
|
-
|
|
9
|
-
Query blocks have a unique name and map to a `QueryOptions` shape. Components reference them using `data={query_name}`. All field names must be fully qualified with the cube or view name (e.g. `orders.count`, `orders.created_at`).
|
|
10
|
-
|
|
11
|
-
## Syntax
|
|
12
|
-
|
|
13
|
-
Query blocks use fenced code with the `query` language tag followed by a name:
|
|
14
|
-
|
|
15
|
-
````markdown
|
|
16
|
-
```query revenue_trend
|
|
17
|
-
measures: [orders.total_revenue]
|
|
18
|
-
timeDimension:
|
|
19
|
-
dimension: orders.created_at
|
|
20
|
-
granularity: month
|
|
21
|
-
dateRange: [2025-01-01, 2025-12-31]
|
|
22
|
-
```
|
|
23
|
-
````
|
|
24
|
-
|
|
25
|
-
## Query Properties
|
|
26
|
-
|
|
27
|
-
| Property | Type | Required | Description |
|
|
28
|
-
|----------|------|----------|-------------|
|
|
29
|
-
| `measures` | string[] | No | Fully qualified measures to aggregate (e.g. `[orders.count, orders.total_revenue]`) |
|
|
30
|
-
| `dimensions` | string[] | No | Fully qualified dimensions to group by (e.g. `[orders.status, orders.city]`) |
|
|
31
|
-
| `filters` | Filter[] | No | Row-level filters |
|
|
32
|
-
| `timeDimension` | object | No | Time-based grouping and date range |
|
|
33
|
-
| `orderBy` | object | No | Sort specification (e.g. `{orders.total_revenue: desc}`) |
|
|
34
|
-
| `limit` | number | No | Maximum rows to return |
|
|
35
|
-
|
|
36
|
-
### timeDimension
|
|
37
|
-
|
|
38
|
-
| Property | Type | Required | Description |
|
|
39
|
-
|----------|------|----------|-------------|
|
|
40
|
-
| `dimension` | string | Yes | Fully qualified time dimension name (e.g. `orders.created_at`) |
|
|
41
|
-
| `granularity` | string | No | `day`, `week`, `month`, `quarter`, or `year` |
|
|
42
|
-
| `dateRange` | string[] | No | `[start, end]` in `YYYY-MM-DD` format |
|
|
43
|
-
|
|
44
|
-
### filters
|
|
45
|
-
|
|
46
|
-
Each filter is an object with:
|
|
47
|
-
|
|
48
|
-
| Property | Type | Description |
|
|
49
|
-
|----------|------|-------------|
|
|
50
|
-
| `dimension` | string | Dimension to filter on |
|
|
51
|
-
| `operator` | string | `equals`, `notEquals`, `contains`, `gt`, `gte`, `lt`, `lte` |
|
|
52
|
-
| `values` | array | Values to filter by |
|
|
53
|
-
|
|
54
|
-
## Examples
|
|
55
|
-
|
|
56
|
-
### Simple aggregation
|
|
57
|
-
|
|
58
|
-
````markdown
|
|
59
|
-
```query total_orders
|
|
60
|
-
measures: [orders.count]
|
|
61
|
-
```
|
|
62
|
-
````
|
|
63
|
-
|
|
64
|
-
### Grouped by dimension
|
|
65
|
-
|
|
66
|
-
````markdown
|
|
67
|
-
```query revenue_by_city
|
|
68
|
-
measures: [orders.total_revenue]
|
|
69
|
-
dimensions: [orders.city]
|
|
70
|
-
orderBy:
|
|
71
|
-
orders.total_revenue: desc
|
|
72
|
-
limit: 10
|
|
73
|
-
```
|
|
74
|
-
````
|
|
75
|
-
|
|
76
|
-
### Time series
|
|
77
|
-
|
|
78
|
-
````markdown
|
|
79
|
-
```query monthly_revenue
|
|
80
|
-
measures: [orders.total_revenue]
|
|
81
|
-
timeDimension:
|
|
82
|
-
dimension: orders.created_at
|
|
83
|
-
granularity: month
|
|
84
|
-
dateRange: [2025-01-01, 2025-12-31]
|
|
85
|
-
```
|
|
86
|
-
````
|
|
87
|
-
|
|
88
|
-
### With filters
|
|
89
|
-
|
|
90
|
-
````markdown
|
|
91
|
-
```query completed_orders
|
|
92
|
-
measures: [orders.count, orders.total_revenue]
|
|
93
|
-
dimensions: [orders.category]
|
|
94
|
-
filters:
|
|
95
|
-
- dimension: orders.status
|
|
96
|
-
operator: equals
|
|
97
|
-
values: [completed]
|
|
98
|
-
```
|
|
99
|
-
````
|
|
100
|
-
|
|
101
|
-
## Rules
|
|
102
|
-
|
|
103
|
-
- Query names must be valid identifiers (letters, numbers, `_`, `$`)
|
|
104
|
-
- Query names must be unique within a dashboard
|
|
105
|
-
- All field names must be fully qualified with the cube or view name (e.g. `orders.count`, not `count`)
|
|
106
|
-
- Components reference queries by name: `data={query_name}`
|
|
107
|
-
|
|
108
|
-
## See Also
|
|
109
|
-
|
|
110
|
-
- [Components](dashboards.components) — chart and display components
|
|
111
|
-
- [Dashboards](dashboards) — overview and deployment
|
|
112
|
-
- [Querying](querying) — query format reference
|