@bonnard/cli 0.2.12 → 0.2.13

package/dist/docs/topics/dashboards.components.md

@@ -23,7 +23,7 @@ Choose the component that best fits your data:
 
 - Components are self-closing (`/>`)
 - `data` uses curly braces: `data={query_name}`
-- Other props use quotes: `x="field_name"`
+- Other props use quotes: `x="orders.city"`
 - Boolean props can be shorthand: `horizontal`
 
 ## Component Reference
@@ -33,13 +33,13 @@ Choose the component that best fits your data:
 Displays a single KPI metric as a large number.
 
 ```markdown
-<BigValue data={total_revenue} value="total_revenue" title="Revenue" />
+<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />
 ```
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `data` | query ref | Yes | Query name (should return a single row) |
-| `value` | string | Yes | Measure field name to display |
+| `value` | string | Yes | Fully qualified measure field name to display |
 | `title` | string | No | Label above the value |
 | `fmt` | string | No | Format preset or Excel code (e.g. `fmt="eur2"`, `fmt="$#,##0.00"`) |
 
@@ -48,16 +48,16 @@ Displays a single KPI metric as a large number.
 Renders a line chart, typically for time series. Supports multiple y columns and series splitting.
 
 ```markdown
-<LineChart data={monthly_revenue} x="created_at" y="total_revenue" title="Revenue Trend" />
-<LineChart data={trend} x="date" y="revenue,cases" />
-<LineChart data={revenue_by_type} x="created_at" y="total_revenue" series="type" />
+<LineChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" title="Revenue Trend" />
+<LineChart data={trend} x="orders.created_at" y="orders.total_revenue,orders.count" />
+<LineChart data={revenue_by_type} x="orders.created_at" y="orders.total_revenue" series="orders.type" />
 ```
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `data` | query ref | Yes | Query name |
 | `x` | string | Yes | Field for x-axis (typically a time dimension) |
-| `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="revenue,cases"`) |
+| `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="orders.total_revenue,orders.count"`) |
 | `title` | string | No | Chart title |
 | `series` | string | No | Column to split data into separate colored lines |
 | `type` | string | No | `"stacked"` for stacked lines (default: no stacking) |
@@ -68,17 +68,17 @@ Renders a line chart, typically for time series. Supports multiple y columns and
 Renders a vertical bar chart. Add `horizontal` for horizontal bars. Supports multi-series with stacked or grouped display.
 
 ```markdown
-<BarChart data={revenue_by_city} x="city" y="total_revenue" />
-<BarChart data={revenue_by_city} x="city" y="total_revenue" horizontal />
-<BarChart data={revenue_by_type} x="month" y="total_revenue" series="type" />
-<BarChart data={revenue_by_type} x="month" y="total_revenue" series="type" type="grouped" />
+<BarChart data={revenue_by_city} x="orders.city" y="orders.total_revenue" />
+<BarChart data={revenue_by_city} x="orders.city" y="orders.total_revenue" horizontal />
+<BarChart data={revenue_by_type} x="orders.created_at" y="orders.total_revenue" series="orders.type" />
+<BarChart data={revenue_by_type} x="orders.created_at" y="orders.total_revenue" series="orders.type" type="grouped" />
 ```
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `data` | query ref | Yes | Query name |
 | `x` | string | Yes | Field for category axis |
-| `y` | string | Yes | Field(s) for value axis. Comma-separated for multiple (e.g. `y="revenue,cases"`) |
+| `y` | string | Yes | Field(s) for value axis. Comma-separated for multiple (e.g. `y="orders.total_revenue,orders.count"`) |
 | `title` | string | No | Chart title |
 | `horizontal` | boolean | No | Render as horizontal bar chart |
 | `series` | string | No | Column to split data into separate colored bars |
@@ -90,15 +90,15 @@ Renders a vertical bar chart. Add `horizontal` for horizontal bars. Supports mul
 Renders a filled area chart. Supports series splitting and stacked areas.
 
 ```markdown
-<AreaChart data={monthly_revenue} x="created_at" y="total_revenue" />
-<AreaChart data={revenue_by_source} x="created_at" y="total_revenue" series="source" type="stacked" />
+<AreaChart data={monthly_revenue} x="orders.created_at" y="orders.total_revenue" />
+<AreaChart data={revenue_by_source} x="orders.created_at" y="orders.total_revenue" series="orders.source" type="stacked" />
 ```
 
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `data` | query ref | Yes | Query name |
 | `x` | string | Yes | Field for x-axis |
-| `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="revenue,cases"`) |
+| `y` | string | Yes | Field(s) for y-axis. Comma-separated for multiple (e.g. `y="orders.total_revenue,orders.count"`) |
 | `title` | string | No | Chart title |
 | `series` | string | No | Column to split data into separate colored areas |
 | `type` | string | No | `"stacked"` for stacked areas (default: no stacking) |
@@ -109,7 +109,7 @@ Renders a filled area chart. Supports series splitting and stacked areas.
 Renders a pie/donut chart.
 
 ```markdown
-<PieChart data={by_status} name="status" value="count" title="Order Status" />
+<PieChart data={by_status} name="orders.status" value="orders.count" title="Order Status" />
 ```
 
 | Prop | Type | Required | Description |
@@ -125,7 +125,7 @@ Renders query results as a sortable, paginated table. Click any column header to
 
 ```markdown
 <DataTable data={top_products} />
-<DataTable data={top_products} columns="name,revenue,count" />
+<DataTable data={top_products} columns="orders.category,orders.total_revenue,orders.count" />
 <DataTable data={top_products} rows="25" />
 <DataTable data={top_products} rows="all" />
 ```
@@ -135,7 +135,7 @@ Renders query results as a sortable, paginated table. Click any column header to
 | `data` | query ref | Yes | Query name |
 | `columns` | string | No | Comma-separated list of columns to show (default: all) |
 | `title` | string | No | Table title |
-| `fmt` | string | No | Column format map: `fmt="revenue:eur2,date:shortdate"` |
+| `fmt` | string | No | Column format map: `fmt="orders.total_revenue:eur2,orders.created_at:shortdate"` |
 | `rows` | string | No | Rows per page. Default `10`. Use `rows="all"` to disable pagination. |
 
 **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.
@@ -149,9 +149,9 @@ Renders query results as a sortable, paginated table. Click any column header to
 Consecutive `<BigValue>` components are automatically wrapped in a responsive grid — no `<Grid>` tag needed:
 
 ```markdown
-<BigValue data={total_revenue} value="total_revenue" title="Revenue" />
-<BigValue data={order_count} value="count" title="Orders" />
-<BigValue data={avg_order} value="avg_order_value" title="Avg Order" />
+<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />
+<BigValue data={order_count} value="orders.count" title="Orders" />
+<BigValue data={avg_order} value="orders.avg_order_value" title="Avg Order" />
 ```
 
 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.
@@ -162,9 +162,9 @@ Wrap components in a `<Grid>` tag to arrange them in columns:
 
 ```markdown
 <Grid cols="3">
-<BigValue data={total_orders} value="count" title="Orders" />
-<BigValue data={total_revenue} value="total_revenue" title="Revenue" />
-<BigValue data={avg_order} value="avg_order_value" title="Avg Order" />
+<BigValue data={total_orders} value="orders.count" title="Orders" />
+<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />
+<BigValue data={avg_order} value="orders.avg_order_value" title="Avg Order" />
 </Grid>
 ```
 
@@ -198,7 +198,7 @@ Values are auto-formatted by default — numbers get locale grouping (1,234.56),
 | `longdate` | `d mmmm yyyy` | 13 January 2025 |
 | `monthyear` | `mmm yyyy` | Jan 2025 |
 
-Any string that isn't a preset name is treated as a raw Excel format code (ECMA-376). For example: `fmt="revenue:$#,##0.00"`.
+Any string that isn't a preset name is treated as a raw Excel format code (ECMA-376). For example: `fmt="orders.total_revenue:$#,##0.00"`.
 
 Note: Percentage presets (`pct`, `pct1`, `pct2`) multiply by 100 per Excel convention — 0.45 displays as "45%".
 
@@ -206,19 +206,19 @@ Note: Percentage presets (`pct`, `pct1`, `pct2`) multiply by 100 per Excel conve
 
 ```markdown
 <!-- BigValue with currency -->
-<BigValue data={total_revenue} value="total_revenue" title="Revenue" fmt="eur2" />
+<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" fmt="eur2" />
 
 <!-- DataTable with per-column formatting -->
-<DataTable data={sales} fmt="total_revenue:usd2,created_at:shortdate,margin:pct1" />
+<DataTable data={sales} fmt="orders.total_revenue:usd2,orders.created_at:shortdate,orders.margin:pct1" />
 
 <!-- Chart with formatted tooltips -->
-<BarChart data={monthly} x="month" y="revenue" yFmt="usd" />
-<LineChart data={trend} x="date" y="growth" yFmt="pct1" />
+<BarChart data={monthly} x="orders.created_at" y="orders.total_revenue" yFmt="usd" />
+<LineChart data={trend} x="orders.created_at" y="orders.growth" yFmt="pct1" />
 ```
 
 ## Field Names
 
-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"`.
+All field names in component props must be **fully qualified** with the view or cube name — the same format used in query blocks. For example, use `value="orders.total_revenue"` not `value="total_revenue"`.
 
 ## See Also
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonnard/cli",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "type": "module",
   "bin": {
     "bon": "./dist/bin/bon.mjs"