Skip to main content

Data Apps

A data app is a configuration-based visualization tool that allows you to create interactive dashboards from SQL queries without writing complex frontend code.

What are Data Apps?

Data apps in Oxygen are defined using YAML configuration files (.app.yml) that specify both the data processing tasks and how to visualize the results.
ℹ️ Info Data apps are designed to make it simple to transform SQL query results into meaningful visualizations with minimal effort. The .app.yml files abstract away the complexity of building dashboards, allowing you to focus on the data and insights rather than visualization code.

Data App Components

In a data app YAML file, you need to specify the following components:

Tasks

The tasks section defines SQL queries that will extract and transform data from your databases. Each task has the following structure:
⚠️ Warning Make sure your tasks are named uniquely as these names are referenced in the display section.

Display

The display section defines how to visualize the data produced by your tasks. Several visualization types are supported:

Markdown

Markdown blocks can be used to add formatted text, headers, and documentation:

Controls

Controls add interactive filter widgets to your app. When the user changes a control value, every task that references that control re-runs automatically and all charts and tables update. Controls are defined inline in the display list using type: control:
Control types
select — a dropdown menu. Populate options from a static list, from Jinja expressions, or from a task query:
date — a date picker that injects a YYYY-MM-DD string. The default can be a static date or a Jinja expression:
toggle — a boolean on/off switch:
Using control values in SQL
Reference control values in your task SQL using Jinja syntax:
ℹ️ Info Controls must be placed before the charts and tables they affect in the display list. The controls bar is rendered at the top of the page and stays visible as you scroll.

Bar Chart

Line Chart

Pie Chart

Table

Row (multi-column layout)

Use row to arrange multiple charts side by side:

Complete example