# Data Visualization — Charts, Dashboards & Reports

Create visualizations and interactive dashboards from lead pipeline data. Produces publication-quality charts and self-contained HTML reports.

## When This Skill Activates

Trigger phrases: "visualize", "create chart", "build dashboard", "graph the data", "show me a report", "plot [metric]", "dashboard for [campaign]"

## Visualization Types

### 1. Pipeline Funnel Chart
Show lead progression through stages:
```python
import matplotlib.pyplot as plt

stages = ['Scraped', 'Enriched', 'Drafted', 'Sent']
counts = [N, N, N, N]  # From CampaignResult.metrics

fig, ax = plt.subplots(figsize=(10, 6))
# Horizontal funnel/bar chart with conversion percentages
```

### 2. Source Comparison Bar Chart
Compare registry source performance:
- Leads per source (UK CH vs Qatar registries)
- Enrichment success rate per source
- End-to-end conversion per source

### 3. Campaign Timeline
Line chart showing campaign activity over time:
- Leads scraped per day
- Emails sent per day
- Cumulative pipeline growth

### 4. Interactive HTML Dashboard
Self-contained HTML file with Chart.js:

```html
<!-- Template structure -->
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>/* Dark theme, professional styling */</style>
</head>
<body>
  <div class="dashboard">
    <div class="metric-cards"><!-- KPI summary cards --></div>
    <div class="chart-grid">
      <canvas id="funnelChart"></canvas>
      <canvas id="sourceChart"></canvas>
      <canvas id="timelineChart"></canvas>
      <canvas id="qualityChart"></canvas>
    </div>
    <div class="data-table"><!-- Sortable lead table --></div>
  </div>
</body>
</html>
```

Dashboard includes:
- **KPI Cards**: Total leads, enrichment rate, send rate, reply rate
- **Funnel Chart**: Stage-by-stage conversion
- **Source Chart**: Performance by registry/search engine
- **Timeline**: Activity over time
- **Quality Heatmap**: Data completeness by lead
- **Filterable Table**: All leads with search/sort

### 5. GDPR Compliance Report
Visual audit trail:
- Actions by type (scraped, enriched, emailed)
- Data sources distribution
- Legal basis coverage
- Timeline of data processing activities

## Chart Style Guide

### Colors
```
Primary:   #2563EB (blue)
Success:   #10B981 (green)
Warning:   #F59E0B (amber)
Danger:    #EF4444 (red)
Neutral:   #6B7280 (gray)
Background: #1F2937 (dark) or #FFFFFF (light)
```

### Typography
- Title: Bold, 16px
- Labels: Regular, 12px
- Values: Mono, 14px

### Best Practices
- Always include axis labels and units
- Use consistent color coding across charts
- Show data labels on key values
- Include a legend when multiple series
- Add a timestamp/source note at the bottom

## Integration with Lead Pipeline

Data loading pattern:
```python
from lead_pipeline.types import LeadStore, CampaignResult

store = LeadStore()
leads = store.load_leads(campaign_id)
# Extract metrics for visualization
```

File output:
- Charts: `~/.lead_pipeline/reports/chart_[name]_[date].png`
- Dashboards: `~/.lead_pipeline/reports/dashboard_[date].html`
- Reports: `~/.lead_pipeline/reports/report_[date].pdf`

## Key Rules
- Always label axes and include units
- Don't use pie charts for more than 5 categories
- Interactive dashboards should work offline (inline all dependencies)
- Include raw data tables alongside charts for verification
- Use consistent color themes across all visualizations
