feat: dashboard zoom, hero modals, departed-dev filtering

- Add dataZoom (slider mini-map + shift-wheel inside zoom) to all time-series category charts (line, bar, dualLine, multiLine, stackedBar, area, devVelocity).
- Hero "Active Devs" tile opens a modal listing last-30-day devs ordered by PR count; "Total PRs" tile opens a modal of the 20 most recent PRs. Backed by new active_devs_list and recent_prs_list in _hero_stats.
- Engineering Team roster: drop members whose end is more than 60 days ago, sort active first then departed by most-recent end date.
- Per-team Developer Velocity multi-line: filter departed devs (>60d since end) via developer-tenure.yaml, sort series by name, and select only the first developer by default.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: OhadPerryBoomi

reports/chart_data.py

@@ -6,7 +6,17 @@
 import numpy as np
 import pandas as pd
 
-from cli.team_config import get_weekly_headcounts, load_team_mapping
+from cli.team_config import get_weekly_headcounts, load_developer_tenure, load_team_mapping
+
+
+def _departed_developers(cutoff_days: int = 60) -> "set[str]":
+    """Usernames whose tenure ended more than `cutoff_days` ago."""
+    tenure = load_developer_tenure()
+    cutoff = (pd.Timestamp.now().normalize() - pd.Timedelta(days=cutoff_days)).date()
+    return {
+        name for name, info in tenure.items()
+        if info.get("end") and info["end"] < cutoff
+    }
 
 
 def _ensure_date(df: pd.DataFrame) -> pd.DataFrame:
@@ -515,8 +525,13 @@ def _extract_team(df: pd.DataFrame) -> List[Dict[str, Any]]:
             dev_week_cx = dev_week_cx.reindex(all_week_dates, fill_value=0)
             dev_week_cnt = dev_week_cnt.reindex(all_week_dates, fill_value=0)
             week_labels_30 = [w.strftime("%Y-%m-%d") for w in all_week_dates]
+            departed = _departed_developers()
+            devs_sorted = sorted(
+                (d for d in dev_week_cx.columns if d not in departed),
+                key=lambda x: str(x).lower(),
+            )
             series_30 = []
-            for dev in dev_week_cx.columns:
+            for dev in devs_sorted:
                 cx_vals = [round(float(v), 2) for v in dev_week_cx[dev].tolist()]
                 if dev in dev_week_cnt.columns:
                     cnt_vals = [int(v) for v in dev_week_cnt[dev].tolist()]
@@ -919,6 +934,48 @@ def _extract_hero_stats(df: pd.DataFrame) -> Dict[str, Any]:
     dev_col = "developer" if "developer" in df.columns else "author"
     active_devs = last_30d[dev_col].nunique() if not last_30d.empty else 0
 
+    # Top active devs in the last 30 days (for the Active Devs tile modal).
+    active_devs_list: list[dict] = []
+    if not last_30d.empty and dev_col in last_30d.columns:
+        grouped = last_30d.groupby(dev_col).agg(
+            prs=(dev_col, "size"),
+            complexity=("complexity", "sum") if "complexity" in last_30d.columns else (dev_col, "size"),
+        )
+        if "team" in last_30d.columns:
+            team_map = last_30d.groupby(dev_col)["team"].agg(
+                lambda s: s.dropna().iloc[0] if not s.dropna().empty else ""
+            )
+            grouped["team"] = team_map
+        grouped = grouped.sort_values("prs", ascending=False)
+        for name, row in grouped.iterrows():
+            active_devs_list.append({
+                "developer": str(name),
+                "team": str(row.get("team", "")) if "team" in grouped.columns else "",
+                "prs": int(row["prs"]),
+                "complexity": round(float(row["complexity"]), 1),
+            })
+
+    # 20 most recent merged PRs (for the Total PRs tile modal).
+    recent_prs_list: list[dict] = []
+    sort_col = "merged_at" if "merged_at" in df.columns and df["merged_at"].notna().any() else "date"
+    recent_df = df.sort_values(sort_col, ascending=False).head(20)
+    for _, row in recent_df.iterrows():
+        merged_at = row.get(sort_col)
+        merged_str = ""
+        if pd.notna(merged_at):
+            try:
+                merged_str = pd.to_datetime(merged_at).strftime("%Y-%m-%d")
+            except Exception:
+                merged_str = str(merged_at)[:10]
+        recent_prs_list.append({
+            "title": str(row.get("pr_title", "") or ""),
+            "url": str(row.get("pr_url", "") or ""),
+            "developer": str(row.get(dev_col, "") or ""),
+            "team": str(row.get("team", "") or ""),
+            "complexity": round(float(row.get("complexity", 0) or 0), 1),
+            "merged_at": merged_str,
+        })
+
     # Total PRs and avg complexity
     total_prs = len(df)
     avg_cx = round(df["complexity"].mean(), 1) if "complexity" in df.columns else 0
@@ -928,6 +985,8 @@ def _extract_hero_stats(df: pd.DataFrame) -> Dict[str, Any]:
         "active_developers": active_devs,
         "total_prs": total_prs,
         "avg_complexity": avg_cx,
+        "active_devs_list": active_devs_list,
+        "recent_prs_list": recent_prs_list,
     }
 
 

reports/interactive_report.py

@@ -394,6 +394,8 @@ def build_interactive_report(
     .hero-card:hover::before {{
       opacity: 1;
     }}
+    .hero-card.hero-clickable {{ cursor: pointer; }}
+    .hero-card.hero-clickable:hover {{ box-shadow: 0 16px 40px rgba(0,0,0,0.12); }}
     .hero-value {{
       font-family: 'Syne', sans-serif;
       font-size: 3rem;
@@ -1142,6 +1144,26 @@ def build_interactive_report(
 
     const COLORS = ['#b45309', '#0d9488', '#7c3aed', '#2563eb', '#ea580c', '#16a34a', '#dc2626', '#6b7280'];
 
+    function applyTimeZoom(opt, options) {{
+      // Adds wheel/pinch zoom + a slider mini-map to time-series category charts.
+      // topSlider=true places the slider above the grid (use when legend is at bottom).
+      options = options || {{}};
+      const topSlider = !!options.topSlider;
+      const inside = {{ type: 'inside', xAxisIndex: 0, throttle: 30, zoomOnMouseWheel: 'shift', moveOnMouseWheel: false, moveOnMouseMove: false }};
+      const grid = opt.grid || {{}};
+      let slider;
+      if (topSlider) {{
+        slider = {{ type: 'slider', xAxisIndex: 0, top: 6, height: 14, brushSelect: false, showDetail: false }};
+        opt.grid = {{ ...grid, top: Math.max(grid.top || 40, 56) }};
+      }} else {{
+        const curBottom = grid.bottom != null ? grid.bottom : 60;
+        slider = {{ type: 'slider', xAxisIndex: 0, bottom: 8, height: 14, brushSelect: false, showDetail: false }};
+        opt.grid = {{ ...grid, bottom: curBottom + 28 }};
+      }}
+      opt.dataZoom = [inside, slider];
+      return opt;
+    }}
+
     function renderBar(container, c) {{
       const opt = {{
         ...CHART_THEME,
@@ -1151,6 +1173,7 @@ def build_interactive_report(
         yAxis: {{ type: 'value', minInterval: 0 }},
         series: [{{ type: 'bar', data: c.y, barWidth: '50%', barMinWidth: 20, barMaxWidth: 100, itemStyle: {{ color: COLORS[0] }} }}],
       }};
+      applyTimeZoom(opt);
       const chart = echarts.init(container);
       chart.setOption(opt);
       window.addEventListener('resize', () => chart.resize());
@@ -1176,6 +1199,7 @@ def build_interactive_report(
         yAxis: {{ type: 'value', minInterval: 0 }},
         series: [seriesItem],
       }};
+      applyTimeZoom(opt);
       const chart = echarts.init(container);
       chart.setOption(opt);
       window.addEventListener('resize', () => chart.resize());
@@ -1198,6 +1222,7 @@ def build_interactive_report(
           {{ type: 'line', name: c.y2Name, data: c.y2, smooth: true, yAxisIndex: 1, itemStyle: {{ color: COLORS[1] }} }},
         ],
       }};
+      applyTimeZoom(opt);
       const chart = echarts.init(container);
       chart.setOption(opt);
       window.addEventListener('resize', () => chart.resize());
@@ -1244,6 +1269,7 @@ def build_interactive_report(
         yAxis: {{ type: 'value', minInterval: 0 }},
         series,
       }};
+      applyTimeZoom(opt, {{ topSlider: true }});
       const chart = echarts.init(container);
       chart.setOption(opt);
       window.addEventListener('resize', () => chart.resize());
@@ -1407,6 +1433,7 @@ def build_interactive_report(
         yAxis: {{ type: 'value', minInterval: 0 }},
         series,
       }};
+      applyTimeZoom(opt, {{ topSlider: true }});
       const chart = echarts.init(container);
       chart.setOption(opt);
       window.addEventListener('resize', () => chart.resize());
@@ -1472,6 +1499,7 @@ def build_interactive_report(
         yAxis: {{ type: 'value', minInterval: 0 }},
         series: [{{ type: 'line', data: c.y, areaStyle: {{}}, smooth: true, itemStyle: {{ color: COLORS[0] }} }}],
       }};
+      applyTimeZoom(opt);
       const chart = echarts.init(container);
       chart.setOption(opt);
       window.addEventListener('resize', () => chart.resize());
@@ -1492,14 +1520,21 @@ def build_interactive_report(
         smooth: false,
         connectNulls: false,
       }}));
+      const defaultSelected = {{}};
+      series.forEach((s, i) => {{ defaultSelected[s.name] = i === 0; }});
       chart.setOption({{
         ...CHART_THEME,
         legend: {{
           type: 'scroll',
           bottom: 0,
           textStyle: {{fontSize: 11}},
+          selected: defaultSelected,
         }},
-        grid: {{top: 28, right: 16, bottom: 60, left: 48, containLabel: false}},
+        dataZoom: [
+          {{ type: 'inside', xAxisIndex: 0, throttle: 30, zoomOnMouseWheel: 'shift', moveOnMouseWheel: false, moveOnMouseMove: false }},
+          {{ type: 'slider', xAxisIndex: 0, top: 6, height: 14, brushSelect: false, showDetail: false }},
+        ],
+        grid: {{top: 56, right: 16, bottom: 60, left: 48, containLabel: false}},
         xAxis: {{
           type: 'category',
           data: weeks,
@@ -1711,12 +1746,31 @@ def build_interactive_report(
       }}
 
       if (key === 'engineers') {{
-        const allMembers = engineersData.flatMap(t => t.members);
+        // Drop members who left more than 2 months ago from the current-state roster.
+        // Historical charts/leaderboards keep their PRs — this only filters the People view.
+        const cutoffMs = Date.now() - 60 * 24 * 60 * 60 * 1000;
+        const teamsView = engineersData
+          .map(t => {{
+            const members = (t.members || [])
+              .filter(m => !m.end || new Date(m.end + 'T00:00:00').getTime() >= cutoffMs)
+              .slice()
+              .sort((a, b) => {{
+                const aEnded = a.end != null;
+                const bEnded = b.end != null;
+                if (aEnded !== bEnded) return aEnded ? 1 : -1; // active first
+                if (aEnded && bEnded) return b.end.localeCompare(a.end); // most recent end first
+                return (a.username || '').localeCompare(b.username || '');
+              }});
+            return {{ ...t, members }};
+          }})
+          .filter(t => t.members.length > 0);
+
+        const allMembers = teamsView.flatMap(t => t.members);
         const totalActive = allMembers.filter(m => m.active === true).length;
         const totalEnded = allMembers.filter(m => m.end != null).length;
         const totalOnLeave = allMembers.filter(m => m.leaves && m.leaves.length > 0).length;
         const totalNoData = allMembers.filter(m => m.start == null).length;
-        const totalTeams = engineersData.length;
+        const totalTeams = teamsView.length;
 
         const earliest = allMembers.filter(m => m.start).map(m => m.start).sort()[0] || '2024-01-01';
         const today = new Date().toISOString().slice(0, 10);
@@ -1754,7 +1808,7 @@ def build_interactive_report(
         }}
 
         let teamCards = '';
-        engineersData.forEach((t, ti) => {{
+        teamsView.forEach((t, ti) => {{
           const active = t.members.filter(m => m.active === true).length;
           const rows = t.members.map(m => `
             <tr>
@@ -1889,15 +1943,15 @@ def build_interactive_report(
             <div class="hero-label">Velocity/Dev</div>
             <div class="hero-sublabel">Complexity per capita per week</div>
           </div>
-          <div class="hero-card">
+          <div class="hero-card hero-clickable" data-hero="active_devs">
             <div class="hero-value">${{heroStats.active_developers || 0}}</div>
             <div class="hero-label">Active Devs</div>
-            <div class="hero-sublabel">Last 30 days</div>
+            <div class="hero-sublabel">Last 30 days &middot; click to view</div>
           </div>
-          <div class="hero-card">
+          <div class="hero-card hero-clickable" data-hero="total_prs">
             <div class="hero-value">${{heroStats.total_prs || 0}}</div>
             <div class="hero-label">Total PRs</div>
-            <div class="hero-sublabel">All time</div>
+            <div class="hero-sublabel">All time &middot; click to view recent</div>
           </div>
           <div class="hero-card">
             <div class="hero-value">${{heroStats.avg_complexity || 0}}</div>
@@ -2015,6 +2069,10 @@ def build_interactive_report(
       panel.innerHTML = html;
       panelsEl.appendChild(panel);
 
+      panel.querySelectorAll('.hero-clickable').forEach(card => {{
+        card.addEventListener('click', () => openHeroModal(card.dataset.hero));
+      }});
+
       if (hasSubtabs) {{
         panel.querySelectorAll('.subtab').forEach(btn => {{
           btn.onclick = () => {{
@@ -2172,6 +2230,72 @@ def build_interactive_report(
     const ddBody = document.getElementById('dd-body');
     const ddClose = document.getElementById('dd-close');
 
+    function escapeHtml(s) {{
+      return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({{ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }})[c]);
+    }}
+
+    function openHeroModal(kind) {{
+      const ddOverlay = document.getElementById('drilldown-overlay');
+      const ddTitle = document.getElementById('dd-title');
+      const ddBody = document.getElementById('dd-body');
+
+      if (kind === 'active_devs') {{
+        const list = (heroStats.active_devs_list || []);
+        ddTitle.innerHTML = `Active Developers — last 30 days<span class="dd-count">${{list.length}} dev${{list.length !== 1 ? 's' : ''}}</span>`;
+        if (!list.length) {{
+          ddBody.innerHTML = '<p style="padding:1rem;color:var(--text-muted)">No PR activity in the last 30 days.</p>';
+        }} else {{
+          let html = '<table class="dd-table"><thead><tr><th>#</th><th>Developer</th><th>Team</th><th>PRs</th><th>Complexity</th></tr></thead><tbody>';
+          list.forEach((d, i) => {{
+            html += `<tr>
+              <td style="font-family:'IBM Plex Mono',monospace;color:var(--text-muted)">${{i + 1}}</td>
+              <td class="cell-name"><span class="name-text">${{escapeHtml(d.developer)}}</span></td>
+              <td style="font-size:0.85rem">${{escapeHtml(d.team || '—')}}</td>
+              <td><b>${{d.prs}}</b></td>
+              <td>${{d.complexity}}</td>
+            </tr>`;
+          }});
+          html += '</tbody></table>';
+          ddBody.innerHTML = html;
+        }}
+        ddOverlay.classList.add('open');
+        return;
+      }}
+
+      if (kind === 'total_prs') {{
+        const list = (heroStats.recent_prs_list || []);
+        ddTitle.innerHTML = `Recent PRs<span class="dd-count">${{list.length}} most recent</span>`;
+        if (!list.length) {{
+          ddBody.innerHTML = '<p style="padding:1rem;color:var(--text-muted)">No PRs available.</p>';
+        }} else {{
+          const cxColor = (v) => v >= 8 ? '#991b1b' : v >= 5 ? '#92400e' : '#065f46';
+          const cxBg = (v) => v >= 8 ? '#fee2e2' : v >= 5 ? '#fef3c7' : '#d1fae5';
+          let html = '<table class="dd-table"><thead><tr><th>PR</th><th>Developer</th><th>Team</th><th>Complexity</th><th>Merged</th><th>Link</th></tr></thead><tbody>';
+          list.forEach(pr => {{
+            const title = pr.title || pr.url || '—';
+            const display = title.length > 70 ? title.slice(0, 70) + '…' : title;
+            const cx = pr.complexity || 0;
+            const badge = `<span style="display:inline-block;font-size:0.7rem;font-family:'Syne',sans-serif;font-weight:600;padding:0.12rem 0.45rem;border-radius:4px;background:${{cxBg(cx)}};color:${{cxColor(cx)}}">${{cx}}</span>`;
+            const link = pr.url
+              ? `<a href="${{escapeHtml(pr.url)}}" target="_blank" rel="noopener" style="color:var(--accent);font-size:0.85rem">→ Open</a>`
+              : '—';
+            html += `<tr>
+              <td class="cell-name" title="${{escapeHtml(title)}}"><span class="name-text">${{escapeHtml(display)}}</span></td>
+              <td style="font-size:0.85rem">${{escapeHtml(pr.developer || '—')}}</td>
+              <td style="font-size:0.85rem">${{escapeHtml(pr.team || '—')}}</td>
+              <td>${{badge}}</td>
+              <td style="font-family:'IBM Plex Mono',monospace;font-size:0.78rem">${{escapeHtml(pr.merged_at || '—')}}</td>
+              <td>${{link}}</td>
+            </tr>`;
+          }});
+          html += '</tbody></table>';
+          ddBody.innerHTML = html;
+        }}
+        ddOverlay.classList.add('open');
+        return;
+      }}
+    }}
+
     function openDevPrModal(developer, week, prs) {{
       const ddOverlay = document.getElementById('drilldown-overlay');
       const ddTitle = document.getElementById('dd-title');