@bonnard/cli 0.2.7 → 0.2.9

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025-present Bonnard (meal-inc)
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -2,24 +2,26 @@
2
2
 
3
3
  The Bonnard CLI (`bon`) takes you from zero to a deployed semantic layer in minutes. Define metrics in YAML, validate locally, deploy, and query — from your terminal or AI coding agent.
4
4
 
5
- ## Install
6
-
7
- ```bash
8
- npm install -g @bonnard/cli
9
- ```
10
-
11
- Requires Node.js 20+.
5
+ **Open source** — [view source on GitHub](https://github.com/meal-inc/bonnard-cli)
12
6
 
13
7
  ## Quick start
14
8
 
15
9
  ```bash
16
- bon init # Create project structure + agent templates
10
+ npx @bonnard/cli init # Create project structure + agent templates
17
11
  bon datasource add --demo # Add demo dataset (no warehouse needed)
18
12
  bon validate # Check syntax
19
13
  bon login # Authenticate with Bonnard
20
14
  bon deploy -m "Initial deploy" # Deploy to Bonnard
21
15
  ```
22
16
 
17
+ No install needed — `npx` runs the CLI directly. Or install globally for shorter commands:
18
+
19
+ ```bash
20
+ npm install -g @bonnard/cli
21
+ ```
22
+
23
+ Requires Node.js 20+.
24
+
23
25
  ## Commands
24
26
 
25
27
  | Command | Description |
package/dist/bin/bon.mjs CHANGED
@@ -12,9 +12,9 @@ import crypto from "node:crypto";
12
12
  import { execFileSync } from "node:child_process";
13
13
  import { encode } from "@toon-format/toon";
14
14
 
15
- //#region rolldown:runtime
15
+ //#region \0rolldown/runtime.js
16
16
  var __defProp = Object.defineProperty;
17
- var __exportAll = (all, symbols) => {
17
+ var __exportAll = (all, no_symbols) => {
18
18
  let target = {};
19
19
  for (var name in all) {
20
20
  __defProp(target, name, {
@@ -22,7 +22,7 @@ var __exportAll = (all, symbols) => {
22
22
  enumerable: true
23
23
  });
24
24
  }
25
- if (symbols) {
25
+ if (!no_symbols) {
26
26
  __defProp(target, Symbol.toStringTag, { value: "Module" });
27
27
  }
28
28
  return target;
@@ -4,6 +4,22 @@
4
4
 
5
5
  The Bonnard CLI (`bon`) takes you from zero to a deployed semantic layer in minutes. Initialize a project, connect your warehouse, define metrics in YAML, validate locally, and deploy — all from your terminal or your AI coding agent.
6
6
 
7
+ ## Install
8
+
9
+ Run directly with `npx` — no install needed:
10
+
11
+ ```bash
12
+ npx @bonnard/cli init
13
+ ```
14
+
15
+ Or install globally for shorter commands:
16
+
17
+ ```bash
18
+ npm install -g @bonnard/cli
19
+ ```
20
+
21
+ Requires Node.js 20+.
22
+
7
23
  ## Agent-ready from the start
8
24
 
9
25
  `bon init` generates context files for your AI coding tools automatically:
@@ -1,4 +1,4 @@
1
- # dashboards.components
1
+ # Components
2
2
 
3
3
  > Chart and display components for rendering query results in dashboards.
4
4
 
@@ -6,6 +6,15 @@
6
6
 
7
7
  Components are self-closing HTML-style tags that render query results as charts, tables, or KPI cards. Each component takes a `data` prop referencing a named query.
8
8
 
9
+ Choose the component that best fits your data:
10
+
11
+ - **BigValue** — single KPI number (total revenue, order count)
12
+ - **LineChart** — trends over time
13
+ - **BarChart** — comparing categories (vertical or horizontal)
14
+ - **AreaChart** — cumulative or stacked trends
15
+ - **PieChart** — proportional breakdown (best with 5-7 slices)
16
+ - **DataTable** — detailed rows for drilling into data
17
+
9
18
  ## Syntax
10
19
 
11
20
  ```markdown
@@ -32,53 +41,68 @@ Displays a single KPI metric as a large number.
32
41
  | `data` | query ref | Yes | Query name (should return a single row) |
33
42
  | `value` | string | Yes | Measure field name to display |
34
43
  | `title` | string | No | Label above the value |
44
+ | `fmt` | string | No | Format preset or Excel code (e.g. `fmt="eur2"`, `fmt="$#,##0.00"`) |
35
45
 
36
46
  ### LineChart
37
47
 
38
- Renders a line chart, typically for time series.
48
+ Renders a line chart, typically for time series. Supports multiple y columns and series splitting.
39
49
 
40
50
  ```markdown
41
51
  <LineChart data={monthly_revenue} x="created_at" y="total_revenue" title="Revenue Trend" />
52
+ <LineChart data={trend} x="date" y="revenue,cases" />
53
+ <LineChart data={revenue_by_type} x="created_at" y="total_revenue" series="type" />
42
54
  ```
43
55
 
44
56
  | Prop | Type | Required | Description |
45
57
  |------|------|----------|-------------|
46
58
  | `data` | query ref | Yes | Query name |
47
59
  | `x` | string | Yes | Field for x-axis (typically a time dimension) |
48
- | `y` | string | Yes | Field for y-axis (typically a measure) |
60
+ | `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="revenue,cases"`) |
49
61
  | `title` | string | No | Chart title |
62
+ | `series` | string | No | Column to split data into separate colored lines |
63
+ | `type` | string | No | `"stacked"` for stacked lines (default: no stacking) |
64
+ | `yFmt` | string | No | Format preset or Excel code for tooltip values (e.g. `yFmt="eur2"`) |
50
65
 
51
66
  ### BarChart
52
67
 
53
- Renders a vertical bar chart. Add `horizontal` for horizontal bars.
68
+ Renders a vertical bar chart. Add `horizontal` for horizontal bars. Supports multi-series with stacked or grouped display.
54
69
 
55
70
  ```markdown
56
71
  <BarChart data={revenue_by_city} x="city" y="total_revenue" />
57
72
  <BarChart data={revenue_by_city} x="city" y="total_revenue" horizontal />
73
+ <BarChart data={revenue_by_type} x="month" y="total_revenue" series="type" />
74
+ <BarChart data={revenue_by_type} x="month" y="total_revenue" series="type" type="grouped" />
58
75
  ```
59
76
 
60
77
  | Prop | Type | Required | Description |
61
78
  |------|------|----------|-------------|
62
79
  | `data` | query ref | Yes | Query name |
63
80
  | `x` | string | Yes | Field for category axis |
64
- | `y` | string | Yes | Field for value axis |
81
+ | `y` | string | Yes | Field(s) for value axis. Comma-separated for multiple (e.g. `y="revenue,cases"`) |
65
82
  | `title` | string | No | Chart title |
66
83
  | `horizontal` | boolean | No | Render as horizontal bar chart |
84
+ | `series` | string | No | Column to split data into separate colored bars |
85
+ | `type` | string | No | `"stacked"` (default) or `"grouped"` for multi-series display |
86
+ | `yFmt` | string | No | Format preset or Excel code for tooltip values (e.g. `yFmt="usd"`) |
67
87
 
68
88
  ### AreaChart
69
89
 
70
- Renders a filled area chart.
90
+ Renders a filled area chart. Supports series splitting and stacked areas.
71
91
 
72
92
  ```markdown
73
93
  <AreaChart data={monthly_revenue} x="created_at" y="total_revenue" />
94
+ <AreaChart data={revenue_by_source} x="created_at" y="total_revenue" series="source" type="stacked" />
74
95
  ```
75
96
 
76
97
  | Prop | Type | Required | Description |
77
98
  |------|------|----------|-------------|
78
99
  | `data` | query ref | Yes | Query name |
79
100
  | `x` | string | Yes | Field for x-axis |
80
- | `y` | string | Yes | Field for y-axis |
101
+ | `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="revenue,cases"`) |
81
102
  | `title` | string | No | Chart title |
103
+ | `series` | string | No | Column to split data into separate colored areas |
104
+ | `type` | string | No | `"stacked"` for stacked areas (default: no stacking) |
105
+ | `yFmt` | string | No | Format preset or Excel code for tooltip values (e.g. `yFmt="pct1"`) |
82
106
 
83
107
  ### PieChart
84
108
 
@@ -97,11 +121,13 @@ Renders a pie/donut chart.
97
121
 
98
122
  ### DataTable
99
123
 
100
- Renders query results as a table.
124
+ Renders query results as a sortable, paginated table. Click any column header to sort ascending/descending.
101
125
 
102
126
  ```markdown
103
127
  <DataTable data={top_products} />
104
128
  <DataTable data={top_products} columns="name,revenue,count" />
129
+ <DataTable data={top_products} rows="25" />
130
+ <DataTable data={top_products} rows="all" />
105
131
  ```
106
132
 
107
133
  | Prop | Type | Required | Description |
@@ -109,8 +135,28 @@ Renders query results as a table.
109
135
  | `data` | query ref | Yes | Query name |
110
136
  | `columns` | string | No | Comma-separated list of columns to show (default: all) |
111
137
  | `title` | string | No | Table title |
138
+ | `fmt` | string | No | Column format map: `fmt="revenue:eur2,date:shortdate"` |
139
+ | `rows` | string | No | Rows per page. Default `10`. Use `rows="all"` to disable pagination. |
140
+
141
+ **Sorting:** Click a column header to sort ascending. Click again to sort descending. Null values always sort to the end. Numbers sort numerically, strings sort case-insensitively.
142
+
143
+ **Formatting:** Numbers right-align with tabular figures. Dates auto-detect and won't wrap. Use `fmt` for explicit formatting per column.
144
+
145
+ ## Layout
146
+
147
+ ### Auto BigValue Grouping
148
+
149
+ Consecutive `<BigValue>` components are automatically wrapped in a responsive grid — no `<Grid>` tag needed:
150
+
151
+ ```markdown
152
+ <BigValue data={total_revenue} value="total_revenue" title="Revenue" />
153
+ <BigValue data={order_count} value="count" title="Orders" />
154
+ <BigValue data={avg_order} value="avg_order_value" title="Avg Order" />
155
+ ```
156
+
157
+ This renders as a 3-column row. The grid auto-sizes up to 4 columns based on the number of consecutive BigValues. For more control, use an explicit `<Grid>` tag.
112
158
 
113
- ## Layout: Grid
159
+ ### Grid
114
160
 
115
161
  Wrap components in a `<Grid>` tag to arrange them in columns:
116
162
 
@@ -126,12 +172,56 @@ Wrap components in a `<Grid>` tag to arrange them in columns:
126
172
  |------|------|---------|-------------|
127
173
  | `cols` | string | `"2"` | Number of columns in the grid |
128
174
 
175
+ ## Formatting
176
+
177
+ Values are auto-formatted by default — numbers get locale grouping (1,234.56), dates display as "13 Jan 2025", and nulls show as "—". Override with named presets for common currencies and percentages, or use raw Excel format codes for full control.
178
+
179
+ ### Format Presets
180
+
181
+ | Preset | Excel code | Example output |
182
+ |--------|-----------|---------------|
183
+ | `num0` | `#,##0` | 1,234 |
184
+ | `num1` | `#,##0.0` | 1,234.6 |
185
+ | `num2` | `#,##0.00` | 1,234.56 |
186
+ | `usd` | `$#,##0` | $1,234 |
187
+ | `usd2` | `$#,##0.00` | $1,234.56 |
188
+ | `eur` | `#,##0 "€"` | 1,234 € |
189
+ | `eur2` | `#,##0.00 "€"` | 1,234.56 € |
190
+ | `gbp` | `£#,##0` | £1,234 |
191
+ | `gbp2` | `£#,##0.00` | £1,234.56 |
192
+ | `chf` | `"CHF "#,##0` | CHF 1,234 |
193
+ | `chf2` | `"CHF "#,##0.00` | CHF 1,234.56 |
194
+ | `pct` | `0%` | 45% |
195
+ | `pct1` | `0.0%` | 45.1% |
196
+ | `pct2` | `0.00%` | 45.12% |
197
+ | `shortdate` | `d mmm yyyy` | 13 Jan 2025 |
198
+ | `longdate` | `d mmmm yyyy` | 13 January 2025 |
199
+ | `monthyear` | `mmm yyyy` | Jan 2025 |
200
+
201
+ Any string that isn't a preset name is treated as a raw Excel format code (ECMA-376). For example: `fmt="revenue:$#,##0.00"`.
202
+
203
+ Note: Percentage presets (`pct`, `pct1`, `pct2`) multiply by 100 per Excel convention — 0.45 displays as "45%".
204
+
205
+ ### Usage Examples
206
+
207
+ ```markdown
208
+ <!-- BigValue with currency -->
209
+ <BigValue data={total_revenue} value="total_revenue" title="Revenue" fmt="eur2" />
210
+
211
+ <!-- DataTable with per-column formatting -->
212
+ <DataTable data={sales} fmt="total_revenue:usd2,created_at:shortdate,margin:pct1" />
213
+
214
+ <!-- Chart with formatted tooltips -->
215
+ <BarChart data={monthly} x="month" y="revenue" yFmt="usd" />
216
+ <LineChart data={trend} x="date" y="growth" yFmt="pct1" />
217
+ ```
218
+
129
219
  ## Field Names
130
220
 
131
221
  Component field names (e.g. `x="city"`, `value="total_revenue"`) use the **unqualified** measure or dimension name — the same names defined in your cube. For example, if your cube has `measures: [{ name: total_revenue, ... }]`, use `value="total_revenue"`.
132
222
 
133
223
  ## See Also
134
224
 
135
- - dashboards.queries
136
- - dashboards.examples
137
- - dashboards
225
+ - [Queries](dashboards.queries) — query syntax and properties
226
+ - [Examples](dashboards.examples) — complete dashboard examples
227
+ - [Dashboards](dashboards) — overview and deployment
@@ -1,10 +1,10 @@
1
- # dashboards.examples
1
+ # Examples
2
2
 
3
3
  > Complete dashboard examples showing common patterns.
4
4
 
5
5
  ## Revenue Overview Dashboard
6
6
 
7
- A KPI + trend + breakdown dashboard:
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
8
 
9
9
  ```markdown
10
10
  ---
@@ -64,7 +64,7 @@ orderBy:
64
64
 
65
65
  ## Sales Pipeline Dashboard
66
66
 
67
- Filtered data with pie chart:
67
+ 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.
68
68
 
69
69
  ```markdown
70
70
  ---
@@ -114,6 +114,161 @@ filters:
114
114
  <AreaChart data={completed_trend} x="created_at" y="total_revenue" title="Completed Order Revenue" />
115
115
  ```
116
116
 
117
+ ## Multi-Series Dashboard
118
+
119
+ 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.
120
+
121
+ ```markdown
122
+ ---
123
+ title: Revenue by Channel
124
+ description: Multi-series charts showing revenue breakdown by sales channel
125
+ ---
126
+
127
+ # Revenue by Channel
128
+
129
+ ` ``query revenue_by_channel
130
+ cube: orders
131
+ measures: [total_revenue]
132
+ dimensions: [channel]
133
+ timeDimension:
134
+ dimension: created_at
135
+ granularity: month
136
+ dateRange: [2025-01-01, 2025-12-31]
137
+ ` ``
138
+
139
+ ## Stacked Bar (default)
140
+
141
+ <BarChart data={revenue_by_channel} x="created_at" y="total_revenue" series="channel" title="Revenue by Channel" />
142
+
143
+ ## Grouped Bar
144
+
145
+ <BarChart data={revenue_by_channel} x="created_at" y="total_revenue" series="channel" type="grouped" title="Revenue by Channel (Grouped)" />
146
+
147
+ ## Multi-Line
148
+
149
+ ` ``query trend
150
+ cube: orders
151
+ measures: [total_revenue, count]
152
+ timeDimension:
153
+ dimension: created_at
154
+ granularity: month
155
+ dateRange: [2025-01-01, 2025-12-31]
156
+ ` ``
157
+
158
+ <LineChart data={trend} x="created_at" y="total_revenue,count" title="Revenue vs Orders" />
159
+
160
+ ## Stacked Area by Channel
161
+
162
+ <AreaChart data={revenue_by_channel} x="created_at" y="total_revenue" series="channel" type="stacked" title="Revenue by Channel" />
163
+ ```
164
+
165
+ ## Formatted Dashboard
166
+
167
+ Use format presets to display currencies, percentages, and number styles consistently across KPIs, charts, and tables.
168
+
169
+ ```markdown
170
+ ---
171
+ title: Sales Performance
172
+ description: Formatted revenue metrics and trends
173
+ ---
174
+
175
+ # Sales Performance
176
+
177
+ ` ``query totals
178
+ cube: orders
179
+ measures: [total_revenue, count, avg_order_value]
180
+ ` ``
181
+
182
+ <Grid cols="3">
183
+ <BigValue data={totals} value="total_revenue" title="Revenue" fmt="eur2" />
184
+ <BigValue data={totals} value="count" title="Orders" fmt="num0" />
185
+ <BigValue data={totals} value="avg_order_value" title="Avg Order" fmt="eur2" />
186
+ </Grid>
187
+
188
+ ## Revenue Trend
189
+
190
+ ` ``query monthly
191
+ cube: orders
192
+ measures: [total_revenue]
193
+ timeDimension:
194
+ dimension: created_at
195
+ granularity: month
196
+ dateRange: [2025-01-01, 2025-12-31]
197
+ ` ``
198
+
199
+ <LineChart data={monthly} x="created_at" y="total_revenue" title="Monthly Revenue" yFmt="eur" />
200
+
201
+ ## Detail Table
202
+
203
+ ` ``query details
204
+ cube: orders
205
+ measures: [total_revenue, count]
206
+ dimensions: [category]
207
+ orderBy:
208
+ total_revenue: desc
209
+ ` ``
210
+
211
+ <DataTable data={details} fmt="total_revenue:eur2,count:num0" />
212
+ ```
213
+
214
+ ## Interactive Dashboard
215
+
216
+ 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.
217
+
218
+ ```markdown
219
+ ---
220
+ title: Interactive Sales
221
+ description: Sales dashboard with date and channel filters
222
+ ---
223
+
224
+ # Interactive Sales
225
+
226
+ <DateRange name="period" default="last-6-months" label="Time Period" />
227
+ <Dropdown name="channel" dimension="channel" data={channels} queries="trend,by_city" label="Channel" />
228
+
229
+ ` ``query channels
230
+ cube: orders
231
+ dimensions: [channel]
232
+ ` ``
233
+
234
+ ` ``query kpis
235
+ cube: orders
236
+ measures: [total_revenue, count]
237
+ ` ``
238
+
239
+ <Grid cols="2">
240
+ <BigValue data={kpis} value="total_revenue" title="Revenue" fmt="eur2" />
241
+ <BigValue data={kpis} value="count" title="Orders" fmt="num0" />
242
+ </Grid>
243
+
244
+ ## Revenue Trend
245
+
246
+ ` ``query trend
247
+ cube: orders
248
+ measures: [total_revenue]
249
+ timeDimension:
250
+ dimension: created_at
251
+ granularity: month
252
+ ` ``
253
+
254
+ <LineChart data={trend} x="created_at" y="total_revenue" title="Monthly Revenue" yFmt="eur" />
255
+
256
+ ## By City
257
+
258
+ ` ``query by_city
259
+ cube: orders
260
+ measures: [total_revenue]
261
+ dimensions: [city]
262
+ orderBy:
263
+ total_revenue: desc
264
+ limit: 10
265
+ ` ``
266
+
267
+ <BarChart data={by_city} x="city" y="total_revenue" title="Top Cities" yFmt="eur" />
268
+ ```
269
+
270
+ 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.
271
+
117
272
  ## Tips
118
273
 
119
274
  - **Start with KPIs**: Use `BigValue` in a `Grid` at the top for key metrics
@@ -122,9 +277,11 @@ filters:
122
277
  - **Name queries descriptively**: `monthly_revenue` is better than `q1`
123
278
  - **Limit large datasets**: Add `limit` to dimension queries to avoid oversized charts
124
279
  - **Time series**: Always use `timeDimension` with `granularity` for time-based charts
280
+ - **Multi-series**: Use `series="column"` to split data by a dimension. For bars, default is stacked; use `type="grouped"` for side-by-side
281
+ - **Multiple y columns**: Use comma-separated values like `y="revenue,cases"` to show multiple measures on one chart
125
282
 
126
283
  ## See Also
127
284
 
128
- - dashboards
129
- - dashboards.queries
130
- - dashboards.components
285
+ - [Dashboards](dashboards) — overview and deployment
286
+ - [Queries](dashboards.queries) — query syntax and properties
287
+ - [Components](dashboards.components) — chart and display components
@@ -0,0 +1,179 @@
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="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
+ cube: orders
90
+ measures: [total_revenue]
91
+ timeDimension:
92
+ dimension: created_at
93
+ granularity: month
94
+ ` ``
95
+
96
+ <LineChart data={monthly_revenue} x="created_at" y="total_revenue" />
97
+ ```
98
+
99
+ The DateRange automatically applies to `monthly_revenue` because it has a `timeDimension`. No hardcoded `dateRange` needed in the query.
100
+
101
+ ### Dropdown with query binding
102
+
103
+ ```markdown
104
+ ---
105
+ title: Sales by Channel
106
+ ---
107
+
108
+ ` ``query channels
109
+ cube: orders
110
+ dimensions: [channel]
111
+ ` ``
112
+
113
+ <Dropdown name="ch" dimension="channel" data={channels} queries="main" label="Channel" />
114
+
115
+ ` ``query main
116
+ cube: orders
117
+ measures: [total_revenue]
118
+ dimensions: [city]
119
+ ` ``
120
+
121
+ <BarChart data={main} x="city" y="total_revenue" />
122
+ ```
123
+
124
+ ### Combined inputs
125
+
126
+ ```markdown
127
+ ---
128
+ title: Sales Dashboard
129
+ ---
130
+
131
+ <DateRange name="period" default="last-6-months" label="Time Period" />
132
+ <Dropdown name="channel" dimension="channel" data={channels} queries="trend,by_city" label="Channel" />
133
+
134
+ ` ``query channels
135
+ cube: orders
136
+ dimensions: [channel]
137
+ ` ``
138
+
139
+ ` ``query trend
140
+ cube: orders
141
+ measures: [total_revenue]
142
+ timeDimension:
143
+ dimension: created_at
144
+ granularity: month
145
+ ` ``
146
+
147
+ <LineChart data={trend} x="created_at" y="total_revenue" />
148
+
149
+ ` ``query by_city
150
+ cube: orders
151
+ measures: [total_revenue]
152
+ dimensions: [city]
153
+ ` ``
154
+
155
+ <BarChart data={by_city} x="city" y="total_revenue" />
156
+ ```
157
+
158
+ 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.
159
+
160
+ ## Shareable URLs
161
+
162
+ Input values automatically sync to URL query params. When a user changes a filter, the URL updates to reflect the current state — for example:
163
+
164
+ ```
165
+ /dashboards/sales?period=last-30-days&channel=Online
166
+ ```
167
+
168
+ - **Default values are omitted** from the URL for clean links
169
+ - **Sharing a URL** preserves the current filter state — recipients see exactly the same filtered view
170
+ - **Refreshing the page** restores the active filters from the URL
171
+ - The **Copy Link** button in the dashboard header copies the full URL including filter params
172
+
173
+ 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.
174
+
175
+ ## See Also
176
+
177
+ - [Dashboards](dashboards) — overview and deployment
178
+ - [Components](dashboards.components) — chart and display components
179
+ - [Examples](dashboards.examples) — complete dashboard examples