通过自然语言提示生成交互式仪表盘、数据可视化与网页应用。
设计与多媒体
dashboard-generator
试用Transform JSON or CSV data into stunning interactive HTML dashboards with auto-detected charts, KPI cards, and dark glass-morphism design. Generates complete standalone HTML with Chart.js.
它能做什么
Transform JSON or CSV data into stunning interactive HTML dashboards with auto-detected charts, KPI cards, and dark glass-morphism design. Generates complete standalone HTML with Chart.js.
技能文档
Dashboard Generator
Overview
Turn any JSON or CSV data into a beautiful, interactive HTML dashboard in seconds. No frontend skills required — the script auto-detects data types and picks the best chart types for you.
When to Use
- You have data (API response, CSV export, metrics) and need a visual dashboard
- You want to share analytics without building a frontend
- Quick reporting: generate a dashboard from raw data for a meeting
- Monitoring: pipe API responses on a schedule to track metrics visually
Commands
# From JSON file
python scripts/dashboard_gen.py generate data.json --title "Sales Q3" --output dashboard.html
# From CSV file
python scripts/dashboard_gen.py csv sales.csv --title "Revenue" --output revenue.html
# From stdin (pipe API responses)
cat api_response.json | python scripts/dashboard_gen.py --title "Server Metrics"
# With custom palette
python scripts/dashboard_gen.py generate data.json --palette ocean --title "Analytics"
What It Generates
A standalone HTML file with:
- KPI cards — auto-computed min/max/avg/trend for numeric fields
- Charts — line for time series, bar for categories, donut for distributions
- Data table — sortable, with all raw data
- Dark glass-morphism design — looks like Linear/Vercel/Stripe dashboard
- Chart.js — fully interactive (hover, zoom, tooltips)
Palettes
aurora (default purple/teal), ocean (blues), sunset (warm), forest (greens), neon (cyberpunk)
Common Pitfalls
- Nested JSON not detected. Flatten nested objects first, or use
--flattenflag. - Date column not detected. Ensure dates are in ISO format (YYYY-MM-DD).
- Too many series. Limit to top 10 categories with
--top 10.
Verification Checklist
- HTML file opens in browser
- Charts render with data
- KPI cards show correct stats
- Data table is sortable
相关技能
Transform CSV data into stunning interactive chart visualizations with Chart.js
Convert a business question into a complete dashboard specification. Use when asked to design a dashboard, create a dashboard spec or brief, plan a BI report...
Chart Generator: Create many types of charts and graphs from data with built in styling and theme - including bar, line, pie, scatter, doughnut, radar. Use w...
Convert JSON data into clean Markdown tables and reports. Use for pasted JSON, API or log output, or any batch of JSON records.
Generate charts from natural language or tabular data, recommend chart types, and export ECharts-based HTML or SVG. Use when users ask for one-sentence chart...