@bonnard/cli
Advanced tools
@@ -26,3 +26,3 @@ # Components | ||
| - `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` | ||
@@ -37,3 +37,3 @@ | ||
| ```markdown | ||
| <BigValue data={total_revenue} value="total_revenue" title="Revenue" /> | ||
| <BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" /> | ||
| ``` | ||
@@ -44,3 +44,3 @@ | ||
| | `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 | | ||
@@ -54,5 +54,5 @@ | `fmt` | string | No | Format preset or Excel code (e.g. `fmt="eur2"`, `fmt="$#,##0.00"`) | | ||
| ```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" /> | ||
| ``` | ||
@@ -64,3 +64,3 @@ | ||
| | `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 | | ||
@@ -76,6 +76,6 @@ | `series` | string | No | Column to split data into separate colored lines | | ||
| ```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" /> | ||
| ``` | ||
@@ -87,3 +87,3 @@ | ||
| | `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 | | ||
@@ -100,4 +100,4 @@ | `horizontal` | boolean | No | Render as horizontal bar chart | | ||
| ```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" /> | ||
| ``` | ||
@@ -109,3 +109,3 @@ | ||
| | `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 | | ||
@@ -121,3 +121,3 @@ | `series` | string | No | Column to split data into separate colored areas | | ||
| ```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" /> | ||
| ``` | ||
@@ -138,3 +138,3 @@ | ||
| <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" /> | ||
@@ -149,3 +149,3 @@ <DataTable data={top_products} rows="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. | | ||
@@ -164,5 +164,5 @@ | ||
| ```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" /> | ||
| ``` | ||
@@ -178,5 +178,5 @@ | ||
| <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> | ||
@@ -215,3 +215,3 @@ ``` | ||
| 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"`. | ||
@@ -224,10 +224,10 @@ Note: Percentage presets (`pct`, `pct1`, `pct2`) multiply by 100 per Excel convention — 0.45 displays as "45%". | ||
| <!-- 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" /> | ||
| ``` | ||
@@ -237,3 +237,3 @@ | ||
| 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"`. | ||
@@ -240,0 +240,0 @@ ## See Also |
+1
-1
| { | ||
| "name": "@bonnard/cli", | ||
| "version": "0.2.12", | ||
| "version": "0.2.13", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "bin": { |
398958
0.1%