Components

- 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"

- type: composed
  name: top_products_composed
  title: Top Performing Products
  description: Top 10 products by revenue
  query: |
    SELECT 
      ProductName as product,
      SUM(OrderLineTotalAmount) as revenue,
      AVG(OrderLineTotalAmount) as avg_revenue
    FROM consolidated_sales_df_299ceb 
    WHERE 1=1
    {% if region_filter is defined %}
    AND CustomerRegion = '{{ region_filter }}'
    {% endif %}
    {% if product_group_filter is defined %}
    AND ProductGroup = '{{ product_group_filter }}'
    {% endif %}
    GROUP BY ProductName
    ORDER BY revenue DESC
    LIMIT 10;
  axis:
    - name: left
    - name: right
      position: right
  dimensions:
    - name: product
      label: Product
  metrics:
    - name: revenue
      label: Revenue
      axis_name: "left"
      composed_type: "bar"
      format: "$0,0.00"
    - name: avg_revenue
      label: "Average Revenue"
      axis_name: "right"
      composed_type: "line"
      format: "0,0[.]00 $"

- type: line
  name: sales_trend
  title: "Sales Trend"
  query: "SELECT date, sum(amount) as total, avg(amount) as avg FROM sales GROUP BY date ORDER BY date"
  chart_config:
    fill_area: true
  axis:
    - name: left
    - name: right
      position: right
  dimensions:
    - name: date
      label: Date
  metrics:
    - name: total
      label: Daily Sales
      axis_name: left
    - name: avg
      label: Average Sales
      axis_name: right

- type: bar
  name: sales_by_country
  title: Sales by Country
  query: SELECT country, sum(amount) as total FROM sales GROUP BY country
  dimensions:
    - name: country
      label: Country
      affected_filter: country_filter
  metrics:
    - name: total
      label: Total Sales

- type: bar
  name: top_by_revenue
  title: Top 10 by Revenue
  chart_inputs:
    - type: dropdown
      name: group_by_column
      label: Group By
      default: Product
      options:
        - Product
        - Customer
  query: |
    SELECT 
      {% if group_by_column == 'Product' %}
      ProductName as group,
      {% else %}
      CustomerName as group,
      {% endif %}
      SUM(OrderLineTotalAmount) as revenue
    FROM consolidated_sales_df
    WHERE 1=1
    {% if date_from is defined %}
    AND OrderDate >= '{{ date_from }}'
    {% endif %}
    {% if group_by_column == 'Product' %}
    GROUP BY ProductName 
    {% else %}
    GROUP BY CustomerName
    {% endif %}
    ORDER BY revenue DESC 
    LIMIT 10
  dimensions:
    - name: group
      label: Group
  metrics:
    - name: revenue
      label: Revenue
      format: "$0,0.00"

chart_inputs:
  - type: dropdown
    name: country
    label: Select Country
    default: USA
    options:
      - USA
      - Canada
      - UK
  
  - type: dropdown
    name: region
    label: Select Region
    options_query: "SELECT DISTINCT region FROM sales_data WHERE country = '{{ country }}' ORDER BY region"

chart_inputs:
  - type: dropdown
    name: product_category
    label: Select Category
    options_query: "SELECT DISTINCT category FROM products WHERE date >= '{{ start_date }}' ORDER BY category"

- type: bar
  name: monthly_order_performance
  title: Monthly Order Performance
  query: |
    SELECT 
      month,
      sum(orders) as orders,
      sum(customers) as customers
    FROM sales_data
    GROUP BY month
    ORDER BY month
  chart_config:
    is_stacked: true
    show_legend: true
  dimensions:
    - name: month
      label: Month
  metrics:
    - name: orders
      label: Orders
    - name: customers
      label: Customers

- type: bar
  name: monthly_order_performance
  title: Monthly Order Performance
  query: |
    SELECT 
      month,
      sum(orders) as orders,
      sum(customers) as customers
    FROM sales_data
    GROUP BY month
    ORDER BY month
  axis:
    - name: top_axis
      position: top
    - name: bottom_axis
      position: bottom
  chart_config:
    layout: vertical
    show_legend: true
  dimensions:
    - name: month
      label: Month
  metrics:
    - name: orders
      label: Orders
      axis_name: top_axis
    - name: customers
      label: Customers
      axis_name: bottom_axis

- type: pie
  name: sales_distribution
  title: Sales Distribution
  query: SELECT category, sum(amount) as total FROM sales GROUP BY category
  dimensions:
    - name: category
      label: Category
      affected_filter: category_filter
  metrics:
    - name: total
      label: Total Sales

- type: pie
  name: revenue_by_region
  title: Revenue by Region
  query: SELECT region, sum(revenue) as total_revenue FROM sales GROUP BY region
  chart_config:
    fill_donut: false
    show_labels: true
    show_legend: false
  dimensions:
    - name: region
      label: Region
  metrics:
    - name: total_revenue
      label: Total Revenue
      format: "$0,0.00"

- type: radial
  name: task_completion
  title: "Task Completion"
  description: "Current progress on project tasks"
  query: "SELECT sum(case when status = 'completed' then 1 else 0 end) as completed_tasks, count(*) as total_tasks FROM tasks"
  metrics:
    - name: completed_tasks
      label: "Completed Tasks"
      format: "0,0"
    - name: total_tasks
      label: "Total Tasks"
      format: "0,0"

- type: table
  name: recent_orders
  title: "Recent Orders"
  description: "Last 100 orders placed"
  query: "SELECT * FROM orders ORDER BY date DESC LIMIT 100"

- type: data_table
  name: detailed_orders
  title: "Detailed Orders"
  description: "All order details with formatting"
  query: "SELECT order_id, amount, status FROM orders ORDER BY date DESC LIMIT 100"
  dimensions:
    - name: order_id
      label: Order ID
      table_align: left
    - name: amount
      label: Amount
      number_format: "$0,0.00"
      table_align: right
    - name: status
      label: Status
      table_align: left

chart_config:
  page_size: 20

- type: heatmap
  name: sales_by_region_product
  title: "Sales by Region and Product"
  description: "Sales distribution across regions and products"
  query: |
    SELECT 
      region,
      product_category,
      SUM(sales_amount) as total_sales
    FROM sales_data
    GROUP BY region, product_category
    ORDER BY region, product_category
  chart_config:
    show_legend: true
  dimensions:
    - name: region
      label: Region
    - name: product_category
      label: Product Category
  metrics:
    - name: total_sales
      label: Total Sales
      format: "$0,0.00"

- type: scatter
  name: example_scatter_chart
  title: Sales Profiles by Countries
  query: |
    SELECT 
      CustomerCountry,
      ROUND(AVG(UnitPrice), 2) as avg_unit_price,
      ROUND(SUM(InvoiceTotalAmount), 2) as total_invoice_count
    FROM consolidated_sales_df_9cb4a3
    GROUP BY CustomerCountry
    ORDER BY total_invoice_count DESC
    LIMIT 20;
  dimensions:
    - name: CustomerCountry
      label: "Country"
  metrics:
    - name: avg_unit_price
      label: Average Unit Price
    - name: total_invoice_count
      label: Total Invoice Count
  chart_config:
    show_labels: true

- type: line
  name: revenue_vs_cost
  title: "Revenue vs Cost"
  query: "SELECT date, sum(revenue) as rev, sum(cost) as cost FROM financials GROUP BY date"
  dimensions:
    - name: date
      label: Date
  metrics:
    - name: rev
      label: Revenue
    - name: cost
      label: Cost

components:
  texts:
    - name: features_md
      title: Features
      content: |
        ## Key Features

        ### Data Analysis
        - Real-time data processing
        - Advanced analytics
        - Custom visualizations

        ### User Experience
        - Intuitive interface
        - Responsive design
        - Mobile-friendly

        ```sql
        SELECT 
          id,
          name,
          created_at
        FROM users 
        WHERE active = true;
        ```

layout:
  tabs:
    - name: features
      title: Features
      items:
        - type: text
          name: features_md
          span: 12

components:
  charts:
    - type: item_list
      name: recent_orders_list
      title: "Recent Orders"
      query: |
        SELECT
          'ShoppingCart' AS icon,
          'text-indigo-600' AS icon_color,
          concat('Order #', order_id) AS title,
          concat(customer_name, ' | ', product_name, ' (Qty: ', quantity, ')') AS description,
          formatDate(order_date, 'MMM dd, yyyy') AS timestamp,
          payment_status AS badge_text,
          CASE
            WHEN payment_status = 'Paid' THEN 'success'
            WHEN payment_status = 'Unpaid' THEN 'warning'
            ELSE 'neutral'
          END AS badge_variant
        FROM orders
        ORDER BY order_date DESC
        LIMIT 20;

layout:
  tabs:
    - name: overview
      title: Overview
      items:
        - type: chart
          name: recent_orders_list
          span: 12

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

layout:
  tabs:
    - name: overview
      title: Overview
      items:
        - type: widget
          name: top_customers_widget
          span: 6
          height: 320

widgets:
  # Inline: must define `source`, must not define `file`
  - name: status_banner
    title: Status Banner
    source_type: inline
    source: |
      import React from 'react'

      export default function StatusBanner({ appContext }) {
        return <div>Active theme: {appContext.theme}</div>
      }

  # File: must define `file`, must not define inline `source`
  - name: revenue_breakdown
    title: Revenue Breakdown
    source_type: file
    file: widgets/RevenueBreakdown.tsx

import React from "react"
import { Card, CardContent } from "@datazone/widget-sdk"

export default function RegionPicker({ data, appContext }) {
  return (
    <Card>
      <CardContent>
        {data.map((row) => (
          <button key={row.region} onClick={() => appContext.setFilter("region_filter", row.region)}>
            {row.region}
          </button>
        ))}
      </CardContent>
    </Card>
  )
}

<div style={{ backgroundColor: "var(--chart-3)", color: "hsl(var(--muted-foreground))" }} />

widgets:
  - name: filtered_orders
    title: Filtered Orders
    source_type: file
    file: widgets/FilteredOrders.tsx
    query: |
      SELECT OrderDate as order_date, CustomerName as customer, OrderLineTotalAmount as amount
      FROM consolidated_sales_df
      WHERE 1=1
      {% if order_date is defined %}
      AND OrderDate >= '{{ order_date }}'
      {% endif %}
      ORDER BY OrderDate DESC
      LIMIT 50