Intelligent Apps

Datazone Intelligent Apps provide a powerful way to build interactive data dashboards and applications without writing frontend code. Using a declarative YAML configuration, you can create multi-tab dashboards with charts, filters, and interactive elements that query your data directly.

Overview

An Intelligent App consists of:

Layout - How your application is organized (tabs, charts, groups)
Components - The building blocks of your app (charts, filters, variables, texts, widgets)
Configuration - Settings that control app behavior

App Structure

Intelligent Apps use a YAML-based configuration format:

app:
  name: "My Dashboard"
  description: "Dashboard description"

  config:
    cache: true
    cache_ttl: 3600
    hide_llm: false # (Optional) Hide the LLM assistant (Orion AI) in the app UI
    hide_insights: false # (Optional) Hide the Insights panel in the app UI
    llm_instruction: "You are a helpful assistant." # (Optional) Custom LLM instruction

  layout:
    tabs:
      - name: main_tab
        title: "Main Dashboard"
        filters: [...]
        items: [...]

  components:
    charts: [...]
    variables: [...]
    filters: [...]
    texts: [...]
    widgets: [...]

Key Components

Charts

Charts are the primary visualization elements. Datazone supports several chart types:

Chart Type	Description
`number`	Single metric display
`line`	Time-series/trend chart
`bar`	Categorical comparisons
`pie`	Part-to-whole relationships
`radial`	Radial gauge for metrics
`table`	Tabular data display
`data_table`	Advanced tabular display

Example chart definition:

- type: line
  name: sales_over_time
  title: "Sales Over Time"
  description: "Monthly sales trend"
  query: |
    SELECT 
      toStartOfMonth(order_date) AS month, 
      sum(amount) AS total_amount 
    FROM orders 
    GROUP BY month 
    ORDER BY month
  dimensions:
    - name: month
      label: Month
  metrics:
    - name: total_amount
      label: Total Sales
      format: "$0,0.00"

Example number chart definition:

- type: number
  name: completed_tasks
  title: "Completed Tasks"
  query: "SELECT count(*) as completed FROM tasks WHERE status = 'done'"
  metrics:
    - name: completed
      label: Completed Tasks
      icon: check
      icon_variant: success
      format: "0"

Dimension Properties

Property	Type	Description
`name`	string	Unique identifier for the dimension
`label`	string	Display label for the dimension
`number_format`	string	(Optional) Number format for this dimension
`table_align`	string	(Optional) Table alignment: `left` or `right`

Widgets

When the built-in chart types aren’t enough, you can render your own React component inside a tab with a widget. Widgets are written in TSX — inline in the YAML or in a .tsx file in your project repository — and can attach a SQL query whose rows arrive as a data prop.

widgets:
  - name: top_customers_widget
    title: Top Customers
    source_type: file
    file: widgets/TopCustomers.tsx
    query: |
      SELECT CustomerName as customer, SUM(OrderLineTotalAmount) as revenue
      FROM consolidated_sales_df
      GROUP BY CustomerName
      ORDER BY revenue DESC
      LIMIT 5

Place it in the layout with type: widget:

items:
  - type: widget
    name: top_customers_widget
    span: 6
    height: 320

See Components: Widgets for the component contract, available imports, and interactivity through appContext.

Layout

The layout defines how components are arranged in your app using a responsive grid system:

Tabs: Organize content into different sections
Items: Individual elements like charts, text, or widgets
Chart Groups: Collections of related charts
Span/Height: Control sizing and layout

Example layout:

layout:
  tabs:
    - name: overview
      title: "Overview"
      filters: ["start_date", "product_category"]
      items:
        - type: chart-group
          name: kpi_group
          span: 12
          entities:
            - type: chart
              name: total_sales
              span: 4
            - type: chart
              name: total_orders
              span: 4
        - type: chart
          name: sales_by_region
          height: 400
          span: 6
         - type: chart
          name: top_products
          height: 400
          span: 4
        - type: chart
          name: top_customers
          height: 400
          span: 4
        - type: chart
          name: monthly_performance_order
          height: 400
          span: 8

Interactivity

Make your apps interactive with variables and filters:

Variables: Store values that can be used in queries
Filters: UI elements that update variables

Example filter:

filters:
  - type: dropdown
    name: category_filter
    title: "Product Category"
    affected_variable: product_category
    options:
      type: sql
      query: "SELECT DISTINCT category FROM products"

Query Variables

You can reference variables in your queries using double curly braces:

query: |
  SELECT * FROM orders 
  WHERE order_date > '{{ start_date }}' 
  AND order_date < '{{ end_date }}'
  {% if product_category != 'all' %}
  AND category = '{{ product_category }}'
  {% endif %}

Best Practices

Organize with Tabs: Group related content into logical tabs
Use Chart Groups: Group related metrics together
Filter Placement: Place filters on tabs where they’re most relevant
Query Optimization: Keep queries efficient for better performance
Consistent Formatting: Use the format attribute under each metric to ensure consistent number formatting

App Configuration

The config section supports the following attributes:

Attribute	Type	Description
`cache`	bool	Enable/disable caching of query results
`cache_ttl`	int	Cache time-to-live in seconds (default: 3600)
`hide_llm`	bool	(Optional) Hide the LLM assistant (Orion AI) in the app UI
`hide_insights`	bool	(Optional) Hide the Insights panel in the app UI
`llm_instruction`	string	(Optional) Custom instruction for the LLM (prompt customization)
`style`	object	(Optional) Custom styling configuration (theme and colors)

Example usage:

config:
  cache: true
  cache_ttl: 3600
  llm_instruction: "You are a helpful assistant."

Theme Customization

You can customize your app’s appearance by selecting from predefined themes or using custom style attributes for advanced color customization. See the YAML Reference for detailed styling options.

Get Started

Reference

Deployment

Tutorial

Overview

Intelligent Apps

Overview

App Structure

Key Components

Charts

Dimension Properties

Widgets

Layout

Interactivity

Query Variables

Best Practices

App Configuration

Theme Customization

Next Steps

​Intelligent Apps

​Overview

​App Structure

​Key Components

​Charts

​Dimension Properties

​Widgets

​Layout

​Interactivity

​Query Variables

​Best Practices

​App Configuration

​Theme Customization

​Next Steps

Intelligent Apps

Overview

App Structure

Key Components

Charts

Dimension Properties

Widgets

Layout

Interactivity

Query Variables

Best Practices

App Configuration

Theme Customization

Next Steps