​
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:

  1. Layout - How your application is organized (tabs, charts, groups)
  2. Components - The building blocks of your app (charts, filters, variables)
  3. 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
  
  layout:
    tabs:
      - name: main_tab
        title: "Main Dashboard"
        filters: [...]
        items: [...]
      
  components:
    charts: [...]
    variables: [...]
    filters: [...]

​
Key Components

​
Charts

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

Chart TypeDescription
numberSingle metric display
lineTime-series or trend visualization
barCategorical comparisons
piePart-to-whole relationships
tableTabular data 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
  metric_format: "$0,0.00"

​
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 or text
  • Chart Groups: Collections of related charts
  • Span/Height: Control sizing and layout

Example layout:

layout:
  tabs:
    - name: overview
      title: "Overview"
      filters: ["date_range", "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

​
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

  1. Organize with Tabs: Group related content into logical tabs
  2. Use Chart Groups: Group related metrics together
  3. Filter Placement: Place filters on tabs where they’re most relevant
  4. Query Optimization: Keep queries efficient for better performance
  5. Consistent Formatting: Use metric_format to ensure consistent number formatting

​
Next Steps