Components

Overview

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.

Choose the component that best fits your data:

• BigValue — single KPI number (total revenue, order count)
• LineChart — trends over time
• BarChart — comparing categories (vertical or horizontal)
• AreaChart — cumulative or stacked trends
• PieChart — proportional breakdown (best with 5-7 slices)
• DataTable — detailed rows for drilling into data

Syntax

<ComponentName data={query_name} prop="value" />

• Components are self-closing (/>)
• data uses curly braces: data={query_name}
• Other props use quotes: x="orders.city"
• Boolean props can be shorthand: horizontal

Component Reference

BigValue

Displays a single KPI metric as a large number.

<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" />

LineChart

Renders a line chart, typically for time series. Supports multiple y columns and series splitting.

<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" />

BarChart

Renders a vertical bar chart. Add horizontal for horizontal bars. Supports multi-series with stacked or grouped display.

<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" />

AreaChart

Renders a filled area chart. Supports series splitting and stacked areas.

<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" />

PieChart

Renders a pie/donut chart.

<PieChart data={by_status} name="orders.status" value="orders.count" title="Order Status" />

DataTable

Renders query results as a sortable, paginated table. Click any column header to sort ascending/descending.

<DataTable data={top_products} />
<DataTable data={top_products} columns="orders.category,orders.total_revenue,orders.count" />
<DataTable data={top_products} rows="25" />
<DataTable data={top_products} rows="all" />

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.

Formatting: Numbers right-align with tabular figures. Dates auto-detect and won't wrap. Use fmt for explicit formatting per column.

Layout

Auto BigValue Grouping

Consecutive <BigValue> components are automatically wrapped in a responsive grid — no <Grid> tag needed:

<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.

Grid

Wrap components in a <Grid> tag to arrange them in columns:

<Grid cols="3">
<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>

Formatting

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.

Format Presets

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%".

Usage Examples

<!-- BigValue with currency -->
<BigValue data={total_revenue} value="orders.total_revenue" title="Revenue" fmt="eur2" />

<!-- DataTable with per-column formatting -->
<DataTable data={sales} fmt="orders.total_revenue:usd2,orders.created_at:shortdate,orders.margin:pct1" />

<!-- Chart with formatted tooltips -->
<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

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

• Queries — query syntax and properties
• Examples — complete dashboard examples
• Dashboards — overview and deployment