[Template: Data Visualization Report]
- Header: report title + time range + data source description.
- KPI card grid: 3-5 most important metrics, each card shows value + year-over-year change + mini trend line.
- Main chart area: at least 2 charts (bar / line / pie / scatter), using Chart.js or ECharts (imported via jsdelivr CDN), with data parsed from user input.
- Chart containers must have a fixed height: each
<canvas>should be wrapped in an outer<div style="position:relative;height:NNNpx">(KPI mini charts ~40px, main charts ~240–280px). When using Chart.js withresponsive:true, maintainAspectRatio:false, if the parent container has no explicit height, it will fall into a ResizeObserver infinite loop, and the chart will keep growing until the browser freezes.Neverdirectly write theheight=attribute on the canvas as layout, that is only an initial value. - Data table: excerpt of the user's raw data, using
<table>+ modern styling (zebra stripe, hover, sticky header). - Insight block: 3-5 text insights, starting with emoji, like a product weekly report.
- Bottom "methodology" collapsible section.
- Restrained and professional color scheme: 1 primary color + neutral color scale, charts use a palette.
- Must parse the actual data provided by the user, do not fabricate.