Data Report

--- name: data-report zhname : "数据可视化报告" enname : "Data Visualization Report" emoji: "📊" description: "Convert CSV/Excel/JSON data into attractive visual reports" category: data scenario: finance aspecthint : "Long desktop page" featured: 10 tags: ["data", "report", "chart", "data", "report"] exampleid : sample-data-weekly-report examplename : "Data Report · Weekly Report" exampleformat : csv exampletagline : "KPI Card +Chart.js Chart + Table" exampledesc : "9 Months of Growth Data Automatically Rendered into a Visual Report, InlineChart.js " od: mode: prototype surface: web platform: desktop scenario: finance upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 designsystem : requires: false exampleprompt : "Use the 'Data Visualization Report' template to turn my content into a 'beautifully visualized report page' using data from CSV/Excel/JSON . Maintain the template's visual style, use real content and data, and avoid lorem ipsum and placeholder images." --- 【Template: Data Visualization Report】 - Header: Report title + time period + data source description. - KPI card grid: 3:5 key metrics; each card displays the value + year-over-year change + micro trendline. - Main chart area: At least 2 charts (bar / line / pie / scatter), usingChart.js or ECharts (loaded via jsdelivr CDN), with data parsed from user input. - Chart containers must have a fixed height: Each `<canvas> must be wrapped by an <div style="position:relative;height:NNNpx"> (KPI mini-charts ~40px, main charts ~240:280px).Chart.js When using responsive:true, maintainAspectRatio:false , if the parent container does not have an explicit height, it will enter a ResizeObserver infinite loop, causing the chart to grow indefinitely until the browser freezes. **Never** set the height= property directly on the canvas for layout purposes; that is only an initial value. - Data table: Excerpts from the user’s raw data, using <table> ` + modern styling (zebra stripes, hover effects, sticky header). - Insights block: 3:5 text-based insights, starting with emojis, similar to a product weekly report. - Collapsible “Methodology” section at the bottom. - Subtle, professional color scheme: 1 primary color + neutral tones; use a color palette for charts. - Must analyze actual data provided by users; do not fabricate data.