chartjs-reporter

This skill should be used when the user needs to turn structured data (query results, CSV summaries, JSON records, or Python dicts/lists) into a standalone H...

Security Scan

The skill is internally consistent with its stated purpose (producing self-contained Chart.js HTML reports), requests no extra credentials, and contains only a local report-generation script and documentation.

Purpose & Capability

Name/description match the implementation: included Python script builds HTML using Chart.js CDN, KPI and chart config formats match the SKILL.md and reference docs. The skill does not request unrelated binaries, env vars, or config paths.

Instruction Scope

SKILL.md instructs running scripts/generating HTML and (optionally) calling a preview_url tool to open the report. preview_url is an external agent tool — depending on your agent implementation it may upload or expose the HTML to a remote preview service, which could leak sensitive data. A reference example shows subprocess.run with an absolute path in a user's home (documentation/example only); it's not required but could confuse an automated agent if followed literally.

Install Mechanism

No install spec — instruction-only plus a local Python script. No remote downloads or archive extraction; the HTML loads Chart.js via a well-known CDN (jsdelivr).

Credentials

The skill declares no environment variables, no credentials, and no config paths. The code does not attempt to read secrets or external credentials; input is taken via CLI args or function parameters.

Persistence & Privilege

Skill is not always-enabled and does not request persistent elevated privileges. It does not modify other skills or system-wide agent configuration.

Assessment

This skill appears to do what it says: generate self-contained Chart.js HTML reports from supplied JSON/structures. Before installing or running: 1) Review the local scripts/generate_report.py file yourself (it will write an HTML file to disk when used). 2) Be cautious about using the preview_url tool — confirm how your agent's preview tool works (it may upload the HTML to a remote preview service). 3) Do not copy-run the absolute path example in the reference docs (it is just an example and points at a user-specific path). 4) If your data is sensitive, avoid sending it to any external preview or CDN; you can host Chart.js locally and open the generated HTML offline if needed.

chartjs-reporter — Chart.js HTML 可视化报告生成技能

技能目的

将结构化数据（SQL 查询结果、CSV 摘要、Python dict/list、手动提供的表格）转换为 自包含的 HTML 可视化报告，内嵌 Chart.js 图表和 KPI 卡片，无需服务器， 浏览器直接打开即可查看。

触发条件

以下任意一种情况触发本技能：

• 用户提供了数据并要求"出图"、"可视化"、"生成报告"
• 用户已有 DuckDB / SQL / pandas 查询结果，需要图表化展示
• 用户指定了图表类型（饼图、柱状图、折线图等）+ 数据
• 与 chat2duckdb 技能配合：查询完成后生成可视化报告

操作步骤

步骤 1：理解数据结构

收到数据后，确认以下信息：

• 数据形态：数值列 / 分类列 / 时间列
• 分析目的：占比 / 趋势 / 对比 / 排名
• 期望图表类型（用户未指定时，按照「图表选型规则」自动选择）

步骤 2：选择图表类型

分析目的	推荐图表
占比 / 构成	doughnut（≤6类）/ pie
趋势 / 时间序列	line（fill: true 显示面积）
分类对比（≤8项）	bar（垂直）
分类对比（>8项或标签长）	bar（水平，indexAxis: 'y'）
多指标对比	分组 bar
排名 Top N	水平 bar + 进度条
关键指标摘要	KPI 卡片（非图表）

步骤 3：调用生成脚本

使用 scripts/generate_report.py 生成 HTML 报告：

python scripts/generate_report.py \
  --title "报告标题" \
  --subtitle "副标题说明" \
  --data '{"charts": [...], "kpis": [...]}' \
  --output report.html

也可以直接在 Python 中调用（适合与 chat2duckdb 配合）：

from scripts.generate_report import build_report
html = build_report(title, subtitle, kpis, charts)
with open("report.html", "w", encoding="utf-8") as f:
    f.write(html)

步骤 4：数据格式规范

kpis 列表（可选，顶部 KPI 卡片）：

[
  {"label": "总营收", "value": "¥1,755,905", "sub": "全年累计", "color": "green"},
  {"label": "订单数", "value": "200",         "sub": "5 品类",  "color": "blue"}
]

color 可选值：blue | green | yellow | purple | red

charts 列表（图表配置）：

[
  {
    "type": "doughnut",
    "title": "品类营收占比",
    "labels": ["Food", "Electronics", "Sports"],
    "datasets": [{"data": [456833, 351665, 349967]}]
  },
  {
    "type": "line",
    "title": "月度趋势",
    "labels": ["1月","2月","3月"],
    "datasets": [{"label": "营收", "data": [158495, 185560, 98369]}]
  }
]

支持的 type 值：bar | line | doughnut | pie | horizontalBar（自动转 bar + indexAxis:y）

步骤 5：布局规则

• KPI 卡片行：最多 4 列，超出自动换行
• 图表区：默认 2 列网格；1 个图表时全宽；3 个图表时 3 列
• 每张图表高度固定 240px，响应式宽度
• 表格（Top N 排名）：单独一行，全宽显示
• 页脚：说明数据来源和生成时间

步骤 6：输出与展示

• 输出路径默认为用户提供的路径，或 ./report_<timestamp>.html
• 生成后调用 preview_url 工具在浏览器中预览
• 所有依赖（Chart.js）通过 CDN 加载，无需本地安装

与 chat2duckdb 配合的标准流程

1. chat2duckdb 执行 SQL 查询 → 得到 DataFrame / 字典结果
2. chartjs-reporter 将结果转换为图表配置 JSON
3. 调用 generate_report.py 生成 HTML
4. 调用 preview_url 展示报告

参考资源

• 核心脚本：scripts/generate_report.py
• 图表配置参考：references/chart-config-guide.md
• 样式主题参考：references/theme-tokens.md

注意事项

• 报告为深色主题（dark mode），背景色 #0f172a，适合截图展示
• 数值超过 1000 时，自动格式化为千分位（¥1,234,567）
• 颜色序列已内置，无需手动指定每个数据点颜色
• Chart.js 版本固定为 4.4.0（CDN），确保稳定性