Skip to content

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