Insight
The Insight is the central visualization object in Visivo. Insights cleanly separate server-side data preparation from client-side interactivity and produce flat JSON structures the viewer can manipulate in the browser for responsive dashboards.
Why Insights?
- Simple mental model — declare what you want on the chart, with no ad-hoc cohort or naming rules.
- Interactive by default — client-side filtering, splitting, and sorting run instantly.
- Reusable — the same insight can appear in multiple charts and tables; the underlying query runs once.
- Fast — pre-computed data is cached server-side, and interactions execute locally in the viewer.
Core Components
- props: Visualization config (chart type, axes, encodings) with
?{ ... }slot bindings to model columns. - interactions: Client-side transformations (
filter,split,sort) layered on the resolved data.
Example
insights:
- name: revenue-by-month
description: "Monthly revenue trends"
props:
type: scatter
mode: lines+markers
x: ?{ date_trunc('month', ${ref(orders).created_at}) }
y: ?{ sum(${ref(orders).amount}) }
interactions:
- filter: ?{ ${ref(orders).month} >= ${ref(date-range).start} }
- split: ?{ ${ref(orders).region} }
- sort: ?{ ${ref(orders).month} ASC }
In the example above: - Server-side: revenue is aggregated by month. - Client-side: a date-range filter and region split are applied instantly in the browser.
Interactions
Interactions define how the viewer manipulates the data locally: - filter: Subset rows by a boolean expression. - split: Break a single insight into multiple plotly series, one per distinct value of the split expression. - sort: Order rows dynamically.
Attributes
| Field | Type | Default | Description |
|---|---|---|---|
| path | string | None | A unique path to this object |
| name | string | None | The unique name of the insight across the entire project. |
| file_path | string | None | The path to the file that contains the object definition. |
| description | string | None | Optional description of what this insight represents. |
| props | None | ||
| interactions | Any of: InsightInteraction, array | None | Leverage Inputs to create client-side interactions that will be applied to the insight data. |
| layout | None |