qwen_agent/skills/common/data-dashboard/hooks/dashboard_guide.md

render_data_viz usage guide

This tool renders data visualization resources. Use the uri field to specify the visualization type, and pass all parameters in the data object.

Supported URIs:

• ui://data-dashboard/metrics — Metric card dashboard
• ui://data-dashboard/chart — Single chart (line, bar, pie, radar, scatter, gauge)
• ui://data-dashboard/multi-chart — Multiple charts in a grid layout

---

1. Metrics — ui://data-dashboard/metrics

When to use: KPIs, stats, numerical summaries, side-by-side comparisons.

render_data_viz(
  uri="ui://data-dashboard/metrics",
  data={
    "title": "Sales Overview",
    "metrics": [
      {"label": "Revenue", "value": "$12,345", "change": "+12.5%", "change_type": "up"},
      {"label": "Users", "value": "1,234", "change": "-3.2%", "change_type": "down"},
      {"label": "Conversion", "value": "4.5%", "change_type": "neutral"}
    ]
  }
)

---

2. Chart — ui://data-dashboard/chart

When to use: trends, comparisons, distributions, compositions, single metric gauges.

Line chart — trends over time

render_data_viz(
  uri="ui://data-dashboard/chart",
  data={
    "title": "Monthly Revenue",
    "chart_type": "line",
    "data": {
      "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      "series": [
        {"name": "2024", "data": [820, 932, 901, 934, 1290, 1330]},
        {"name": "2025", "data": [620, 732, 801, 1034, 1190, 1530]}
      ]
    },
    "smooth": true
  }
)

Bar chart — comparisons

render_data_viz(
  uri="ui://data-dashboard/chart",
  data={
    "title": "Sales by Region",
    "chart_type": "bar",
    "data": {
      "categories": ["North", "South", "East", "West"],
      "series": [
        {"name": "Q1", "data": [320, 302, 341, 374]},
        {"name": "Q2", "data": [220, 182, 191, 234]}
      ]
    },
    "stacked": true,
    "show_label": true
  }
)

Pie chart — proportions

render_data_viz(
  uri="ui://data-dashboard/chart",
  data={
    "title": "Traffic Sources",
    "chart_type": "pie",
    "data": {
      "series": [{
        "name": "Sources",
        "data": [
          {"name": "Search", "value": 1048},
          {"name": "Direct", "value": 735},
          {"name": "Email", "value": 580},
          {"name": "Social", "value": 484}
        ]
      }]
    }
  }
)

Radar chart — multi-dimensional

render_data_viz(
  uri="ui://data-dashboard/chart",
  data={
    "title": "Skill Assessment",
    "chart_type": "radar",
    "data": {
      "categories": ["Sales", "Admin", "Tech", "Support", "Marketing"],
      "series": [
        {"name": "Alice", "data": [4200, 3000, 20000, 35000, 50000]},
        {"name": "Bob",   "data": [5000, 14000, 28000, 26000, 42000]}
      ]
    }
  }
)

Scatter chart — correlation

render_data_viz(
  uri="ui://data-dashboard/chart",
  data={
    "title": "Height vs Weight",
    "chart_type": "scatter",
    "data": {
      "series": [
        {"name": "Male",   "data": [[161, 51], [167, 59], [159, 49], [175, 73]]},
        {"name": "Female", "data": [[150, 45], [160, 55], [165, 60], [155, 50]]}
      ]
    }
  }
)

Gauge chart — single KPI

render_data_viz(
  uri="ui://data-dashboard/chart",
  data={
    "title": "CPU Usage",
    "chart_type": "gauge",
    "data": {"series": [{"name": "CPU", "data": [72.5]}]}
  }
)

Chart options (inside data):

• width: CSS width, default "100%"
• height: CSS height, default "400px"
• theme: "light" (default) or "dark"
• stacked: stack series (line/bar), default false
• smooth: smooth curves (line), default false
• show_label: show data labels, default false

---

3. Multi-chart — ui://data-dashboard/multi-chart

When to use: comprehensive overviews, multiple related charts, business reports.

render_data_viz(
  uri="ui://data-dashboard/multi-chart",
  data={
    "title": "Monthly Business Report",
    "columns": 2,
    "theme": "light",
    "charts": [
      {
        "title": "Revenue Trend",
        "chart_type": "line",
        "data": {
          "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
          "series": [{"name": "Revenue", "data": [820, 932, 901, 934, 1290, 1330]}]
        },
        "smooth": true
      },
      {
        "title": "Sales by Region",
        "chart_type": "bar",
        "data": {
          "categories": ["North", "South", "East", "West"],
          "series": [
            {"name": "Q1", "data": [320, 302, 341, 374]},
            {"name": "Q2", "data": [220, 182, 191, 234]}
          ]
        }
      },
      {
        "title": "Traffic Sources",
        "chart_type": "pie",
        "data": {
          "series": [{"name": "Sources", "data": [
            {"name": "Search", "value": 1048},
            {"name": "Direct", "value": 735},
            {"name": "Social", "value": 484}
          ]}]
        }
      },
      {
        "title": "Server Load",
        "chart_type": "gauge",
        "data": {"series": [{"name": "CPU", "data": [67]}]},
        "height": "300px"
      }
    ]
  }
)

Tips:

• Always choose the most appropriate chart_type for the data
• Use line for time-series trends, bar for category comparisons
• Use pie for proportions (limit ~7 segments), radar for multi-dimensional scores
• Use scatter for correlation, gauge for single KPI (0-100)
• Set height: "400px" for most charts, "300px" for gauge
• Multi-chart: columns=2 for 2-4 charts, keep 4-6 max per call