/report-generator

description: Generate professional HTML/PDF investment reports with interactive visualizations

Report Generator

Generate exportable HTML/PDF reports with interactive charts and visualizations from investment analysis data.

Report Templates

1. **Executive Summary Report**

• High-level overview (1-2 pages)
• Key metrics and investment thesis
• Critical charts only
• Ideal for stakeholder presentations

2. **Comprehensive Analysis Report**

• Full detailed analysis (5-10 pages)
• All data sections and visualizations
• Methodology and assumptions
• Complete investment case

3. **Portfolio Review Report**

• Multi-stock comparison
• Portfolio allocation charts
• Risk metrics and diversification analysis
• Performance attribution

Visualization Components

Financial Charts

• **Line Charts**: Revenue/earnings trends, price history
• **Bar Charts**: Quarterly comparisons, segment breakdowns
• **Stacked Area**: Balance sheet composition, revenue mix
• **Waterfall Charts**: Cash flow analysis, earnings bridges
• **Pie Charts**: Geographic/product segment revenue split

Valuation Charts

• **Comparison Charts**: P/E, P/B, EV/EBITDA vs. peers and historical averages
• **DCF Sensitivity Tables**: Value ranges under different scenarios
• **Multiple Expansion/Contraction**: Historical valuation bands

Technical Charts

• **Price Charts**: Candlesticks with moving averages overlay
• **Volume Bars**: Trading volume patterns
• **Indicator Panels**: RSI, MACD, Bollinger Bands
• **Support/Resistance**: Key price levels annotated

HTML Report Structure

Generate standalone HTML file with the following structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Investment Analysis Report - [TICKER] - [DATE]</title>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

        :root {
            --navy:          #0F172A;
            --navy-mid:      #1E293B;
            --sky:           #0284C7;
            --sky-light:     #E0F2FE;
            --teal:          #0D9488;
            --teal-light:    #CCFBF1;
            --emerald:       #059669;
            --emerald-light: #D1FAE5;
            --red:           #DC2626;
            --red-light:     #FEE2E2;
            --amber:         #D97706;
            --amber-light:   #FEF3C7;
            --slate:         #64748B;
            --slate-light:   #F1F5F9;
            --border:        #E2E8F0;
            --text-primary:  #0F172A;
            --text-secondary:#475569;
            --text-muted:    #94A3B8;
            --grad-hero:     linear-gradient(135deg, #0F172A 0%, #1E3A5F 55%, #0284C7 100%);
            --grad-accent:   linear-gradient(90deg, #0284C7, #0D9488);
            --shadow-sm:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
            --shadow-md:     0 4px 16px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: var(--text-primary);
            background: #F8FAFC;
        }

        /* ── HERO ── */
        .report-hero {
            background: var(--grad-hero);
            padding: 56px 48px 48px;
            position: relative;
            overflow: hidden;
        }
        .report-hero::before {
            content: '';
            position: absolute; top: -80px; right: -80px;
            width: 420px; height: 420px; border-radius: 50%;
            background: rgba(2,132,199,.12);
        }
        .report-hero::after {
            content: '';
            position: absolute; bottom: -60px; left: -40px;
            width: 300px; height: 300px; border-radius: 50%;
            background: rgba(13,148,136,.10);
        }
        .hero-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
        .hero-badge {
            display: inline-flex; align-items: center; gap: 6px;
            background: rgba(2,132,199,.18);
            border: 1px solid rgba(2,132,199,.35);
            color: #7DD3FC;
            font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
            padding: 4px 14px; border-radius: 20px; margin-bottom: 22px;
        }
        .hero-ticker {
            font-size: 72px; font-weight: 800; color: #fff;
            letter-spacing: -2px; line-height: 1;
            font-family: 'JetBrains Mono', monospace;
        }
        .hero-company { font-size: 19px; font-weight: 400; color: rgba(255,255,255,.65); margin-top: 8px; }
        .hero-rule {
            width: 48px; height: 3px;
            background: var(--grad-accent); border-radius: 2px;
            margin: 24px 0;
        }
        .hero-meta { display: flex; flex-wrap: wrap; gap: 28px; }
        .hero-meta-item { display: flex; flex-direction: column; gap: 3px; }
        .hero-meta-label {
            font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
            text-transform: uppercase; color: rgba(255,255,255,.38);
        }
        .hero-meta-value { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.82); }

        /* ── BODY ── */
        .report-body { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }

        /* ── TABLE OF CONTENTS ── */
        .toc {
            background: #fff; border: 1px solid var(--border);
            border-radius: 12px; padding: 28px 32px;
            margin-bottom: 32px; box-shadow: var(--shadow-sm);
        }
        .toc-label {
            font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
            text-transform: uppercase; color: var(--text-mut