# Analytics Dashboard
> Analytics dashboard with KPI cards, chart areas, date filters, and metric breakdowns
> KPI 카드, 차트 영역, 날짜 필터, 지표 분석이 포함된 애널리틱스 대시보드
**Category**: Dashboard | **Tags**: analytics, kpi, charts, metrics, tailwind | **Difficulty**: Intermediate
## Preview
```
+--------------------------------------------------+
| Analytics [Last 7 Days v] [Export] [Refresh] |
+--------------------------------------------------+
| +------+ +-------+ +--------+ +---------+ |
| |Views | |Users | |Bounce | |Avg Time | |
| |245K | |12.4K | |42.1% | |3m 24s | |
| |+18% | |+5.2% | |-2.1% | |+0.8% | |
| +------+ +-------+ +--------+ +---------+ |
| |
| +--- Line Chart (Traffic) ---+ +-- Pie Chart --+ |
| | | | | |
| +-----------------------------+ +---------------+ |
| |
| +--- Bar Chart (Pages) ------+ +-- Top Pages --+ |
| | | | /home 42K | |
| +-----------------------------+ | /about 28K | |
+--------------------------------------------------+
```
## Quick Start
```bash
# 1. Save as index.html
# 2. For real charts, add Chart.js:
# 3. Replace KPI data with your analytics API responses
```
## Full Code
```html
Analytics Dashboard
Analytics
Track your key performance metrics
Page Views
245,831
+18.2%vs last period
Unique Visitors
12,421
+5.2%vs last period
Bounce Rate
42.1%
-2.1%vs last period
Avg. Session
3m 24s
+0.8%vs last period
Traffic Overview
Traffic Sources
Organic42%
Direct28%
Referral18%
Social12%
Top Pages
Page
Views
Unique
Bounce
Trend
/home
42,381
28,432
32%
+12%
/pricing
28,104
21,882
45%
+8%
/docs
19,442
15,231
28%
+22%
/blog
15,221
12,109
52%
-3%
/signup
11,082
9,431
18%
+31%
```
## Customization Guide
- **KPI cards**: Replace hard-coded numbers with `fetch()` calls to your API
- **Charts**: Modify `data` arrays and `labels` in the Chart.js configuration
- **Date filter**: Wire up the `