Data Configuration

This guide explains how to connect actual data to widgets and visualize it. D.Hub dashboards support two data modes.

Data Source

D.Hub dashboards query data through the ClickHouse database. Datasets registered in D.Hub are automatically synchronized to ClickHouse tables, enabling fast analytical queries.

Simple Mode

[Screenshot] Simple mode data configuration screen

Visualize data by selecting datasets and fields from the UI without writing code.

Configuration Steps

1. Select Data Source: Choose the dataset to connect.
2. Configure Metrics:
   • Value Field: Select the data field to visualize. (e.g., price, count)
   • Aggregation Method: Choose from SUM, AVG, COUNT, MIN, MAX.
3. Group By: Select the field to group data by. (e.g., category, date)
   • X-axis/Y-axis: Specify fields to map to axes depending on the chart type.

Supported Aggregation Functions

Function	Description	Example
SUM	Sum	Total revenue
AVG	Average	Average order amount
COUNT	Count	Number of orders
MIN	Minimum	Lowest price
MAX	Maximum	Highest price
COUNT DISTINCT	Unique count	Unique customer count

Query Mode

[Screenshot] Query mode SQL editor screen

Use this mode when complex data processing is needed by writing SQL queries directly. It uses ClickHouse SQL syntax.

Basic Usage

1. Change Data Mode to Query.
2. Write a query in the SQL Editor.
3. Click the Run Query button to preview results.
4. Map result columns to chart properties like X-axis and Y-axis.

Query Examples

-- Total sales by category
SELECT 
    category, 
    SUM(amount) as total 
FROM sales_data 
GROUP BY category
ORDER BY total DESC

-- Daily order trend
SELECT 
    toDate(order_date) as date,
    COUNT(*) as order_count,
    SUM(amount) as revenue
FROM orders
GROUP BY date
ORDER BY date

-- Hourly traffic analysis
SELECT 
    toHour(timestamp) as hour,
    COUNT(*) as visits
FROM page_views
WHERE toDate(timestamp) = today()
GROUP BY hour
ORDER BY hour

Useful ClickHouse Functions

Function	Description	Example
toDate()	Date conversion	toDate(timestamp)
toHour()	Extract hour	toHour(timestamp)
today()	Today's date	WHERE date = today()
yesterday()	Yesterday's date	WHERE date = yesterday()
toStartOfWeek()	Start of week	toStartOfWeek(date)
toStartOfMonth()	Start of month	toStartOfMonth(date)
formatDateTime()	Date formatting	formatDateTime(date, '%Y-%m')

Date Range Filter

Add a Date Range Selector widget to apply a time filter across all widgets in the dashboard.

Configuration Steps

1. Add a Date Range widget from the widget library to the canvas.
2. Specify the date field in each widget's data configuration.
3. When you select a period in the date range selector, all linked widgets are automatically filtered.

Using Date Filter in Query Mode

In query mode, you can apply the date range using the $from and $to variables:

SELECT 
    toDate(order_date) as date,
    SUM(amount) as revenue
FROM orders
WHERE order_date >= $from AND order_date <= $to
GROUP BY date
ORDER BY date

Data Refresh

• Auto Refresh: Set the auto refresh interval in dashboard settings.
• Manual Refresh: Click the refresh button at the top of the dashboard to immediately update the data.