Data Agent is a data intelligence product built on Data+AI integration and Agentic AI technologies. It covers the complete lifecycle from data creation, storage, processing, governance, and analysis, featuring autonomous planning, intelligent execution, and iterative optimization.
This guide explains how to use Data Agent's custom web report functionality to build structured, interactive data analysis reports through JSON DSL configuration.
Prerequisites
- Data Agent service must be enabled (Personal edition available at $14/month, unlimited daily usage).
- Atleast one data source must be configured.
Note: For learning purposes, you can use the built-in
internal_data_employeesdata source provided by Data Agent to follow this tutorial.
Quick Start
Creating a Custom Agent and Enabling Reports
The "Custom Web Report" feature requires creating a custom Agent to access it.
-
Log in to DMS 5.0.
-
Navigate to Data+AI > Data Agent For Analytics from the top navigation bar. In simplified mode, click the list icon in the top-right corner and select All Features > Data+AI > Data Agent For Analytics.
-
On the Data Agent home page, select Custom Agent from the left navigation.
-
On the Custom Agent page, click Start Creating.
-
In the Create Custom Agent page, enter a Name and Description in the Basic Information section.
-
In the Context section, enable Select Data Range and choose the built-in data source
internal_data_employees. -
Expand More Configuration, find and enable the Custom Web Report toggle.
Note: During the learning phase, it is recommended to set Execution Plan, Execute SQL Queries, Output Web Report, and Process Questions to direct execution mode to view results immediately.
-
In the configuration area below, paste your web report definition. See the appendix for a complete configuration example.
-
After completing the configuration, select your custom Agent when initiating a session to see the generated report, then adjust the configuration iteratively until you achieve the desired style.
Note: Generating a full report for the
internal_data_employeesdatabase takes approximately 5 to 10 minutes.
Understanding the Report Configuration Framework
To customize a web report, you need to provide a JSON-formatted configuration. The basic framework contains four core sections:
| Field | Required | Purpose |
|---|---|---|
version |
Optional | Configuration protocol version. This tutorial uses 1.0. |
root |
Required | The report's "skeleton" that defines overall content and structure. |
metadata |
Optional | Global styling rules like colors and font sizes for consistent AI output. |
metrics |
Optional | SQL queries to be executed in the report, referenced by BI nodes. |
Understanding root and "Nodes"
The root is the "root" of the entire report. It organizes report content through parent-child node hierarchies. Each "node" acts as a building block, with root as the starting point for all blocks.
Each node contains three basic properties:
type— Determines what the building block "is". There are four types:
| Type | Description |
|---|---|
Container |
A transparent box that doesn't display content itself, used to organize other building blocks (child nodes). |
Text |
Static text that displays exactly what you write in the configuration. |
AGUI |
AI-generated content: a "magic canvas" where AI automatically generates text, charts, and other content based on your prompts. |
BI |
Custom SQL data: a "data display board" that executes pre-defined SQL queries to display precise analysis results. |
description— The building block's "manual". InTextnodes, it's the text to display. InAGUIandBInodes, it's a prompt or instruction guiding content generation.layout— Determines the building block's "appearance and style". Different node types support different layouts, explained in detail below.
Building Your First Report
Let's start with the simplest configuration. The following example creates a report with only a title:
{
"version": "1.0",
"root": {
"type": "Container",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Create a gradient blue-purple background title area with large bold text displaying: 'Employee Compensation Structure and Fairness Analysis Report'.",
"layout": "Block"
}
]
}
}
Configuration breakdown:
- We use a
Containeras the root node withSinglelayout, meaning child nodes arrange vertically from top to bottom. - In this container's
childrenarray, we place oneAGUIchild node. - The
descriptiontells AI: "Generate a title with blue-purple gradient background displaying 'Employee Compensation Structure and Fairness Analysis Report'."
Note:
Containernodes use the dedicatedchildrenfield to add child nodes. To add content to the report, simply add new nodes to thechildrenarray.
Adding More Content to Reports
A report with only a title is too basic. Assuming we want to add a section for overall employee salary analysis including a subheading, salary distribution histogram, and analysis conclusions. The approach is straightforward: add a new Container to the root's children, then place three child nodes inside this new container.
- One
Textnode (AdaptiveTitlelayout) as the section heading. - One
AGUInode (Chartlayout) to draw the salary histogram. - One
AGUInode (Cardlayout) to display salary analysis conclusions.
{
"version": "1.0",
"root": {
"type": "Container",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Create a gradient blue-purple background title area...",
"layout": "Block"
},
{
"type": "Container",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "Overall Employee Salary Distribution",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create a histogram showing current employee salary distribution. X-axis represents salary, Y-axis represents employee count. Display exact count on hover.",
"layout": "Chart"
},
{
"type": "AGUI",
"description": "Generate a card with light purple background and purple left border. Summarize core characteristics of salary distribution in concise text.",
"layout": "Card"
}
]
}
]
}
}
After completing the configuration, select your custom Agent when initiating a session to see the generated report. Continue adjussting the JSON configuration until the report style fully matches your expectations.
Node Types and Layouts Reference
This section covers each layout option under every node type, with code examples and renderings to help you quickly select the right configuration.
Container
The Container doesn't display business content itself. Its sole purpose is organizing and arranging child nodes. Only Container nodes can use the children field to contain child nodes.
| Layout | Effect | Use Case |
|---|---|---|
Single |
Single column: children arrange vertically, each occupying the full row. | Major section areas for linking multiple content blocks. |
Double |
Left-right two-column: children split into two columns, can use ratio to control width (e.g., "1:1"). |
Comparison scenarios like text-with-image analysis. |
Flex |
Adaptive grid: children auto-arrange into multiple columns based on screen width. | Side-by-side display of similar cards like KPI indicator groups. |
Card |
Card container: a unified-styled card area wrapping all child nodes. | Grouping related content (title+chart+text) as a visual unit. |
Footer |
Footer layout: small gray text area at page bottom. | Disclaimer, data source, generation timestamp. |
Single— Single Column Layout
{
"type": "Container",
"description": "Key Findings and Recommendations",
"layout": "Single",
"children": [
{
"type": "Text",
"description": "Key Findings and Recommendations",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Key findings card with light purple background (#F5F0FF) and purple left border (#7C3AED). Title 'Key Findings' in bold deep purple (#5B21B6). Present core findings as numbered list with appropriate spacing, bold key data points.",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Actionable recommendations card with light green background (#F0F9F1) and green left border (#16A34A). Title in bold deep green (#2E6B3E). Display recommendations in table format with headers 'Issue Area' and 'Recommended Action'. Header background in deep green. Text color in deep green (#2E6B3E).",
"layout": "Table"
}
]
}
Double— Two-Column Layout
{
"type": "Container",
"description": "Gender Salary Comparison Display",
"layout": "Double",
"ratio": "1:1",
"gap": "4",
"children": [
{
"type": "AGUI",
"description": "Overall fairness assessment card with light green background.",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Key issue discovery card with light yellow background.",
"layout": "Card"
}
]
}
Important: When using
Doublelayout, explicitly declare theratiofield (such as"1:1"or"1:2"), otherwise unexpected width allocation may occur.
Flex— Adaptive Grid Layout
{
"type": "Container",
"description": "Key Metrics Card Group",
"layout": "Flex",
"gap": "4",
"children": [
{
"type": "AGUI",
"description": "Average salary metric block, white background with shadow. Large centered number with small explanatory text below. Blue top bar with wallet icon in top-right corner.",
"layout": "Block"
},
{
"type": "AGUI",
"description": "Total employees metric block, white background with shadow. Large centered number with small explanatory text below. Green top bar with user icon in top-right corner.",
"layout": "Block"
},
{
"type": "AGUI",
"description": "Department count metric block, white background with shadow. Large centered number with small explanatory text below. Purple top bar with building icon in top-right corner.",
"layout": "Block"
}
]
}
Card— Card Container
{
"type": "Container",
"description": "Section Five: Gender and Salary Difference Analysis",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "V. Gender and Salary Difference Analysis",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create a quadrant scatter plot showing department salary and headcount distribution.",
"layout": "Chart"
}
]
}
Footer— Footer Layout
{
"type": "Container",
"description": "Report Footer Area",
"layout": "Footer",
"children": [
{
"type": "AGUI",
"description": "Footer info block with dark gray background (#374151), white text. Center-aligned displaying data source, generation timestamp, and copyright in small font.",
"layout": "Block"
}
]
}
Text
Text nodes display fixed, predetermined text. The description content is rendered exactly as-is without AI processing.
| Layout | Effect | Use Case |
|---|---|---|
AdaptiveTitle |
Auto-styled heading or paragraph text based on context. | Report main title, section headings, paragraph explanations. |
Span |
Shorter inline text block. | Small tags within cards, brief annotations. |
AdaptiveTitle— Adaptive Title
{
"type": "Text",
"description": "Key Findings and Recommendations",
"layout": "AdaptiveTitle"
}
Span— Short Text Tag
{
"type": "Text",
"description": "Key Issue Discovery",
"layout": "Span"
}
AGUI
AGUI nodes auto-generate content through AI models based on prompts in description. The description here is not the final text but generation instructions for AI.
Tip: The more specific your
description(colors, layout, data requirements), the more the AI-generated content will match your expectations. Avoid vague instructions like "write some analysis randomly."
| Layout | Effect | Use Case |
|---|---|---|
CardHeader |
Prominent header card, suitable as section "cover". | Title area at the start of a major section. |
Chart |
Recharts-based visualizations (bar, line, pie charts). | Data visualization across all types. |
Table |
Data table with header and body. | Detail tables, ranking tables, comparison tables. |
Card |
Regular card with border, shadow, and padding, usually containing icon, title, and body. | Metric cards, insight cards, recommendation cards. |
Block |
Relatively free content area, can mix text, lists, icons, with flexible styling. | Complex analysis paragraphs needing layout control beyond card styling. |
Text |
Text-focused with icons, bold, and other visual elements for more expression than plain text. | Key points, critical insights text blocks. |
CardHeader— Section Header Card
{
"type": "AGUI",
"description": "Salary analysis report header with gradient blue-purple background. Main title 'Salary Structure Deep Analysis' in large bold white font, subtitle 'Comprehensive Assessment Based on Full Year 2003 Data' in medium light-colored font.",
"layout": "CardHeader"
}
Chart— Chart
{
"type": "AGUI",
"description": "Create bar chart comparing salary coefficient of variation across job titles. X-axis for job titles, Y-axis for salary coefficient of variation. Sorted by coefficient from high to low, using purple color scheme.",
"layout": "Chart"
}
Table— Table
{
"type": "AGUI",
"description": "Actionable recommendations card with light green background (#F0F9F1) and green left border (#16A34A). Display recommendations in table format with headers 'Issue Area' and 'Recommended Action'.",
"layout": "Table"
}
Card— Card
{
"type": "AGUI",
"description": "Salary distribution core characteristics card with light purple background (#F5F0FF) and purple left border (#7C3AED). Title 'Distribution Characteristics' in bold deep purple. Summarize distribution characteristics in concise text.",
"layout": "Card"
}
Block— Free Content Block
{
"type": "AGUI",
"description": "Department count metric block with white background and shadow. Large centered number '9' with small text 'Business Departments' below. Purple top bar with building icon in top-right corner.",
"layout": "Block"
}
Text— Enhanced Text Block
{
"type": "AGUI",
"description": "Data notes text block in dark gray. Content: 'Report data sourced from HR system, covering full year 2003 salary records. Analysis methods include descriptive statistics, correlation analysis, and trend prediction. All currency units are Chinese yuan (CNY).' Left-aligned, standard font size.",
"layout": "Text"
}
BI
BI nodes insert SQL query results into reports. They reference SQL queries defined in the top-level metrics array through the metric field.
Note:
AGUIgives AI creative freedom, whileBIgives you precise data control—you write the SQL, the system executes it, and results display directly.
| Layout | Effect | Use Case |
|---|---|---|
Table |
Data table with number formatting, labels, icons, and other advanced features. | Precision data displays like "Risk Level Table". |
ScatterQuadrant |
Four-quadrant scatter plot with X/Y mean reference lines for classification analysis. | "High salary high headcount" quadrant analysis. |
MetricCard |
Single KPI display card with title, main value, and icon. | Core KPI highlights like average salary, total employees. |
Table— BI Table
{
"type": "BI",
"metric": "dept_compensation",
"description": "Department salary statistics table showing employee count, average salary, and salary standard deviation per department. Table with borders, alternating row background colors.",
"layout": "Table",
"params": {
"bordered": true,
"striped": true,
"headerBg": "bg-blue-100",
"column_styles": {
"avg_salary": {
"numberFormat": { "type": "fixed", "decimalPlaces": 2 },
"unit": " CNY"
},
"salary_stddev": {
"numberFormat": { "type": "fixed", "decimalPlaces": 2 },
"unit": " CNY"
}
}
},
"select_columns": ["dept_name", "headcount", "avg_salary", "salary_stddev"]
}
Important: The
metricvalue (heredept_compensation) must match exactly with thenamefield of an item in the top-levelmetricsarray.
ScatterQuadrant— Four-Quadrant Scatter Plot
{
"type": "BI",
"metric": "dept_compensation",
"description": "Department salary quadrant chart, X-axis for average salary, Y-axis for salary standard deviation.",
"layout": "ScatterQuadrant",
"params": {
"xColumn": "avg_salary",
"yColumn": "salary_stddev",
"labelColumn": "dept_name",
"xAxisLabel": "Department Average Salary (CNY)",
"yAxisLabel": "Department Salary Std Dev (CNY)"
}
}
MetricCard— KPI Metric Card
{
"type": "BI",
"metric": "mean_salary",
"description": "Average salary metric card.",
"layout": "MetricCard",
"params": {
"title": "Company Average Salary",
"icon": "TrendingUp",
"iconColor": "#16a34a"
}
}
Advanced Configuration
Global Style Control: metadata
metadata sets report-level universal rules. These rules are passed as global prompts to the AI model, so all AGUI nodes follow consistent style guidelines when generating content, eliminating repeated style descriptions in each node's description.
Recommended structure:
"metadata": {
"ai_code_requirements": {
"framework": "React",
"empty_state_handling": { ... },
"style": "...",
"data_format": "...",
"language_style": "...",
"coding_style": "...",
"avoid_paths": [ ... ]
}
}
Configuration parameters:
| Parameter | Purpose | Example Configuration |
|---|---|---|
framework |
Frontend framework type | React — Generate React functional components |
empty_state_handling |
Display rules for empty data or calculation errors | Set empty state prompts for card_value, chart, table, ai_text |
style |
Global visual style guidance | Blue/purple=insights, yellow/orange=warning, green=positive, gray=general |
data_format |
Number formatting rules | 0.123 → 12.3%, salaries with decimals and currency unit |
language_style |
AI text style constraints | Reduce repetition, cite specific data to support arguments |
coding_style |
JSX code writing standards | Wrap special characters with {""}, e.g., 2 {">"} 1 |
avoid_paths |
Known error cases | Disable ButtonGroup; avoid raw > / < |
Configuration example:
"metadata": {
"ai_code_requirements": {
"framework": "React",
"empty_state_handling": {
"null_data_per_module": {
"card_value": "Display '--' or 'No Data'",
"chart": "Display empty chart with centered text 'No Data'",
"table": "Display header with body row 'No Data'",
"ai_text": "Display 'No analysis recommendations. Please verify business data for this period.'"
},
"calculation_error": "If denominator is 0, display '--'"
},
"style": "Rich visual effects, use background colors, colored left borders, and icons. Different card styles for different content types: blue/purple for insights, yellow/orange for warnings, green for positive conclusions, gray for general information. Proper font size hierarchy with prominent headings and comfortable body text. Base body text uses text-sm from ShadCN standard.",
"data_format": "Include units for numbers with units, especially %—don't omit; convert decimal percentages to percentage format; all decimals to one decimal place; salaries to whole numbers or two decimals with 'CNY' unit",
"language_style": "Reduce repetitive text to maintain conciseness; professional text style; generated inferences and recommendations must be factual and objective, avoid speculative values; analysis must cite specific data",
"coding_style": "Wrap parentheses with {\"\"}, e.g., 2 {">"} 1; 1 {"<"} 2; reason A {"->"} conclusion B",
"avoid_paths": [
"ButtonGroup is not exported -- don't use ButtonGroup",
"Unexpected token `>`. Did you mean `>` or {\">\"} -- avoid raw > or <"
]
}
}
Custom SQL Queries: metrics
metrics is a top-level array field defining all SQL queries needed for the report.
- Define SQL queries: In the
metricsarray, define each query with aname(unique identifier) andsql(query statement).
"metrics": [
{
"name": "dept_compensation",
"sql": "SELECT d.dept_name, COUNT(s.emp_no) AS headcount, AVG(s.salary) AS avg_salary, STDDEV(s.salary) AS salary_stddev FROM \`salaries\` s INNER JOIN \`dept_emp\` de ON s.emp_no = de.emp_no INNER JOIN \`departments\` d ON de.dept_no = d.dept_no WHERE s.to_date = '2003-01-01' AND de.to_date = '2003-01-01' GROUP BY d.dept_name;"
},
{
"name": "workforce_count",
"sql": "SELECT COUNT(DISTINCT de.emp_no) AS total FROM \`dept_emp\` de WHERE de.to_date = '2003-01-01';"
},
{
"name": "mean_salary",
"sql": "SELECT AVG(s.salary) AS average_salary FROM \`salaries\` s WHERE s.to_date = '2003-01-01';"
}
]
| Field | Type | Description |
|---|---|---|
name |
string |
Unique identifier for the metric, referenced by BI nodes |
sql |
string |
SQL query statement to execute |
- Reference in
BInodes: InBInodes, use themetricfield with the correspondingnamevalue to link to query results.
{
"type": "BI",
"metric": "dept_compensation",
"description": "Department salary statistics (BI Table example).",
"layout": "Table",
"params": {
"bordered": true,
"striped": true,
"headerBg": "bg-blue-100",
"column_styles": {
"avg_salary": {
"numberFormat": {
"type": "fixed",
"decimalPlaces": 2
},
"unit": " CNY"
}
}
},
"select_columns": [
"dept_name",
"headcount",
"avg_salary",
"salary_stddev"
]
}
Important: The
metricvalue inBInodes must exactly match thenameof an item in themetricsarray.
Using Skill for One-Click Configuration Generation
If manually writing JSON configuration feels tedious, you can use the Skill tool to assist generation. Simply describe your desired report content and approximate style in natural language, and Skill will automatically generate an initial configuration for you to fine-tune.
Complete Configuration Example
Below is a complete custom web report configuration covering most node types and layouts introduced earlier. Use it as a template and modify according to your needs.
{
"version": "1.0",
"root": {
"type": "Container",
"description": "Page root container containing all business modules in single column layout.",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Gradient blue-purple background title area displaying 'Employee Compensation Structure and Fairness Analysis Report' (fixed text) in large font. Subtitle in small font: 'Data as of January 1, 2003 · Covering 240,124 active employees'.",
"layout": "Block"
},
{
"type": "Container",
"description": "Key Findings and Recommendations",
"layout": "Single",
"children": [
{
"type": "Text",
"description": "Key Findings and Recommendations",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Key findings card with light purple background (#F5F0FF) and purple left border (#7C3AED). Title 'Key Findings' in bold deep purple (#5B21B6). Present core findings as numbered list with appropriate spacing, key data in bold.",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Actionable recommendations card with light green background (#F0F9F1) and green left border (#16A34A). Title in bold deep green (#2E6B3E), header text 'Actionable Recommendations'. Display recommendations in table format with headers 'Issue Area' and 'Recommended Action', header in deep green background. Text color in deep green (#2E6B3E).",
"layout": "Table"
}
]
},
{
"type": "Container",
"description": "Section One: Overall Employee Salary Distribution",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "I. Overall Employee Salary Distribution",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create histogram of current employee salary distribution: X-axis for salary, Y-axis for employee count. Show exact employee count on hover.",
"layout": "Chart"
},
{
"type": "Container",
"description": "Salary Distribution Analysis Text Area",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Salary distribution core characteristics card with light purple background (#F5F0FF) and purple left border (#7C3AED). Title 'Distribution Characteristics' in bold deep purple. Summarize distribution characteristics in concise text. Key data in bold.",
"layout": "Card"
}
]
}
]
},
{
"type": "Container",
"description": "Section Two: Department Salary Level Comparison",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "II. Department Salary Level Comparison",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create bar chart comparing average salary across departments. X-axis for department names, Y-axis for average salary (CNY). Chart title 'Department Average Salary Comparison'. Sorted by salary from high to low, purple color scheme.",
"layout": "Chart"
},
{
"type": "Container",
"description": "Department Salary Analysis Text Area",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Department tier distribution card with light blue background (#EFF6FF), blue title. Title 'Department Salary Tier Distribution' in bold blue (#1D4ED8). Content structured to show tiers by department average salary, each department displaying headcount, std dev, and avg salary. Tiers separated by line breaks, key data in bold.",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Direct impact attribution card with gray background (#F9FAFB), blue left border (#2563EB). CardHeader '📊 Attribution Analysis' in bold. Analyze reasons for salary differences across departments. Key numbers in bold.",
"layout": "Card"
}
]
}
]
},
{
"type": "Container",
"description": "Section Three: Salary and Job Level Correlation Analysis",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "III. Salary and Job Level Correlation Analysis",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create bar chart comparing average salary across job titles. X-axis for job titles, Y-axis for average salary (CNY). Chart title 'Job Title Average Salary Comparison'. Sorted by salary from high to low, purple color scheme.",
"layout": "Chart"
},
{
"type": "Container",
"description": "Job Level Salary Analysis Text Area",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Job level salary anomaly warning card with gray background (#F9FAFB), red left border (#DC2626). Content in two paragraphs, anomalous data in red bold (Manager: 77,724 CNY {\"<\"} Senior Staff: 80,707 CNY).",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Create bar chart comparing salary coefficient of variation across job titles. X-axis for job titles, Y-axis for salary coefficient of variation. Chart title 'Job Title Salary Variation Coefficient Comparison'. Sorted by coefficient from high to low, purple color scheme.",
"layout": "Chart"
},
{
"type": "AGUI",
"description": "Non-technical position dispersion insight card with light yellow background (#FFF9E6), yellow left border (#CA8A04). Title in bold dark brown (#5A3E1F) with 💡 prefix. Content presented in comparison format. Text color in dark brown (#5A3E1F), key coefficient numbers in bold.",
"layout": "Card"
}
]
}
]
},
{
"type": "Container",
"description": "Section Four: Salary Trend Analysis Over Time",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "IV. Salary Trend Analysis Over Time",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create line chart showing company annual average salary trends. X-axis for years, Y-axis for average salary (CNY). Chart title 'Company Annual Average Salary Trend'. Deep purple color scheme.",
"layout": "Chart"
},
{
"type": "Container",
"description": "Trend Analysis Text Area",
"layout": "Single",
"children": [
{
"type": "AGUI",
"description": "Overall growth trend card with light blue background (#EFF6FF), blue left border (#2563EB). Title in bold blue (#1D4ED8) with 📈 prefix. Analyze growth value and rate changes over the analysis period. Key growth rates and salary figures in bold, points separated by line breaks.",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Create multi-line chart comparing salary growth curves for employees hired in different eras. X-axis for salary years, Y-axis for average salary (CNY). Chart title 'Salary Growth Curve Comparison by Hire Era'. Include three lines representing 1980s, 1990s, 2000s hire groups with legend. Purple color gradient with distinct line colors.",
"layout": "Chart"
},
{
"type": "AGUI",
"description": "Hire era group divergence insight card with gray background (#F9FAFB), purple left border (#7C3AED). CardHeader '💡 Hire Era Group Growth Path Divergence' in bold. Content presented in three-row comparison. Key percentage and salary figures in bold. Rows separated by appropriate spacing.",
"layout": "Card"
}
]
}
]
},
{
"type": "Container",
"description": "Section Five: Gender and Salary Difference Analysis",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "V. Gender and Salary Difference Analysis",
"layout": "AdaptiveTitle"
},
{
"type": "AGUI",
"description": "Create quadrant scatter plot showing department salary and headcount distribution. X-axis for average salary, Y-axis for headcount. Add X and Y mean reference lines. Chart title 'Department Salary and Scale Quadrant Analysis'. Purple color scheme.",
"layout": "Chart",
"chart_type": "ScatterWithReferenceLines"
},
{
"type": "Container",
"description": "Gender Salary Comparison Display (Double Layout Example)",
"layout": "Double",
"ratio": "1:1",
"gap": "4",
"children": [
{
"type": "AGUI",
"description": "Overall fairness assessment card with light green background (#F0F9F1), green left border (#16A34A). Title in bold deep green (#2E6B3E) with ✅ prefix. Compare male and female salary distribution characteristics. Text color in deep green (#2E6B3E), key percentages in bold.",
"layout": "Card"
},
{
"type": "AGUI",
"description": "Key issue discovery card with light yellow background (#FFF9E6), orange left border (#EA580C). Title in bold dark brown (#5A3E1F) with ⚠️ prefix. Content presented progressively with improvement suggestions. Text color in dark brown (#5A3E1F), key percentage figures in bold.",
"layout": "Card"
}
]
}
]
},
{
"type": "Container",
"description": "Section Six: Additional Layout Combination Examples",
"layout": "Card",
"children": [
{
"type": "Text",
"description": "VI. Complete Layout Combination Examples",
"layout": "AdaptiveTitle"
},
{
"type": "Text",
"description": "Key Issue Discovery",
"layout": "Span"
},
{
"type": "AGUI",
"description": "Salary analysis report header with gradient blue-purple background. Main title 'Salary Structure Deep Analysis' in large bold white font, subtitle 'Comprehensive Assessment Based on Full Year 2003 Data' in medium light-colored font.",
"layout": "CardHeader"
},
{
"type": "Container",
"description": "Key Metrics Card Group (Flex Layout Example)",
"layout": "Flex",
"gap": "4",
"children": [
{
"type": "AGUI",
"description": "Average salary metric block with white background and shadow. Large centered number '63,810 CNY' with small text 'Company Average Salary' below. Blue top bar with wallet icon in top-right corner.",
"layout": "Block"
},
{
"type": "AGUI",
"description": "Total employees metric block with white background and shadow. Large centered number '240,124' with small text 'Total Active Employees' below. Green top bar with user icon in top-right corner.",
"layout": "Block"
},
{
"type": "AGUI",
"description": "Department count metric block with white background and shadow. Large centered number '9' with small text 'Business Departments' below. Purple top bar with building icon in top-right corner.",
"layout": "Block"
}
]
},
{
"type": "AGUI",
"description": "Data notes text block (Text layout) in dark gray. Content: 'Report data sourced from HR system, covering full year 2003 salary records. Analysis methods include descriptive statistics, correlation analysis, and trend prediction. All currency units are Chinese yuan (CNY).' Left-aligned, standard font size.",
"layout": "Text"
},
{
"type": "BI",
"metric": "dept_compensation",
"description": "Department salary statistics (BI Table example) showing employee count, average salary, and standard deviation per department. Table with borders, alternating row colors.",
"layout": "Table",
"params": {
"bordered": true,
"striped": true,
"headerBg": "bg-blue-100",
"column_styles": {
"avg_salary": {
"numberFormat": {
"type": "fixed",
"decimalPlaces": 2
},
"unit": " CNY"
},
"salary_stddev": {
"numberFormat": {
"type": "fixed",
"decimalPlaces": 2
},
"unit": " CNY"
}
}
},
"select_columns": [
"dept_name",
"headcount",
"avg_salary",
"salary_stddev"
]
},
{
"type": "BI",
"metric": "dept_compensation",
"description": "Department salary quadrant chart (BI ScatterQuadrant example). X-axis for average salary, Y-axis for standard deviation. Quadrant analysis of department salary structure characteristics.",
"layout": "ScatterQuadrant",
"params": {
"xColumn": "avg_salary",
"yColumn": "salary_stddev",
"labelColumn": "dept_name",
"xAxisLabel": "Department Average Salary (CNY)",
"yAxisLabel": "Department Salary Std Dev (CNY)"
}
},
{
"type": "AGUI",
"description": "BI MetricCard explanation card. Content: 'BI MetricCard layout displays a single KPI metric card, requires SQL metric returning a single value. Example config: SELECT COUNT(*) as total FROM employees, then set layout to MetricCard with params containing title, icon, iconColor.' Light gray background, blue left border.",
"layout": "Card"
},
{
"type": "BI",
"metric": "mean_salary",
"description": "Average salary metric card displaying employee count, average salary, and standard deviation per department.",
"layout": "MetricCard",
"params": {
"title": "Company Average Salary",
"icon": "TrendingUp",
"iconColor": "#16a34a"
}
}
]
},
{
"type": "Container",
"description": "Report Footer (Footer Layout Example)",
"layout": "Footer",
"children": [
{
"type": "AGUI",
"description": "Footer info block with dark gray background (#374151), white text. Center-aligned displaying three lines: Line 1 'Data Source: HR System | Analysis Period: Full Year 2003', Line 2 'Report Generation Time | Confidentiality: Internal Use', Line 3 '© 2003 Company HR Analytics Team'. Small font size.",
"layout": "Block"
}
]
}
]
},
"metadata": {
"ai_code_requirements": {
"framework": "React",
"empty_state_handling": {
"null_data_per_module": {
"card_value": "Display '--' or 'No Data'",
"chart": "Display empty chart with centered text 'No Data'",
"table": "Display header with body row 'No Data'",
"ai_text": "Display 'No analysis recommendations. Please verify business data for this period.'"
},
"calculation_error": "If denominator is 0, display '--'"
},
"style": "Rich visual effects, use background colors, colored left borders, and icons. Different card styles for different content types: blue/purple for insights, yellow/orange for warnings, green for positive conclusions, gray for general information. Proper font hierarchy with prominent headings and comfortable body text. Base body text uses text-sm from ShadCN standard, other sizes adjusted relative to this baseline.",
"data_format": "Include units for numbers with units, especially %—don't omit; convert decimal percentages to percentage format; all decimals to one decimal place; salary values to whole numbers or two decimals with 'CNY' unit.",
"language_style": "Reduce repetitive text (parallel structures, identical prefixes in lists) to maintain conciseness; professional text style; generated inferences and recommendations must be factual and objective, avoid speculative values especially in action recommendations; analysis must cite specific data.",
"coding_style": "Wrap parentheses with {\"\"}, e.g., 2 {">"} 1; 1 {"<"} 2; reason A {\"->\"} conclusion B",
"avoid_paths": [
"ButtonGroup is not exported by \"src/components/ui/button.tsx\" -- don't use ButtonGroup",
"Unexpected token `>`. Did you mean `>` or {\">\"} -- avoid raw > or <"
]
}
},
"metrics": [
{
"name": "dept_compensation",
"sql": "SELECT d.dept_name, COUNT(s.emp_no) AS headcount, AVG(s.salary) AS avg_salary, STDDEV(s.salary) AS salary_stddev FROM \`salaries\` s INNER JOIN \`dept_emp\` de ON s.emp_no = de.emp_no INNER JOIN \`departments\` d ON de.dept_no = d.dept_no WHERE s.to_date = '2003-01-01' AND de.to_date = '2003-01-01' GROUP BY d.dept_name;"
},
{
"name": "workforce_count",
"sql": "SELECT COUNT(DISTINCT de.emp_no) AS total FROM \`dept_emp\` de WHERE de.to_date = '2003-01-01';"
},
{
"name": "mean_salary",
"sql": "SELECT AVG(s.salary) AS average_salary FROM \`salaries\` s WHERE s.to_date = '2003-01-01';"
}
]
}
References
- Data Agent Live Demo: https://developer.aliyun.com/live/255453
- Data Agent Documentation: https://help.aliyun.com/zh/dms/data-agent-for-analytics/
- Join the Data Agent User Group on DingTalk: 105130018526