wukong-gitlog-cli 1.0.39 → 1.0.40

package/web/app.js

@@ -1,8 +1,44 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable no-use-before-define */
+/* eslint-disable no-restricted-globals */
 /* global echarts */
+
+// 1. 定义一个存储所有实例的数组
+const chartInstances = []
 const formatDate = (d) => new Date(d).toLocaleString()
 
+// 综合判断函数，考虑多种情况
+function isEmptyObject(obj) {
+  // 1. 检查是否为对象
+  if (obj === null || typeof obj !== 'object') {
+    return false
+  }
+
+  // 2. 检查是否是空对象
+  return Object.keys(obj).length === 0
+}
+
+// 根据对象内容隐藏对应图表卡片
+function hideElementByObj({ el, objectName }) {
+  const isEmpty = isEmptyObject(objectName)
+  if (isEmpty) {
+    const chartCard = el?.closest('.chart-card')
+    chartCard.style.display = 'none'
+    return true
+  }
+  return isEmpty
+}
+
+function hideElementByEl({ el }) {
+  if (!el) return true
+  const chartCard = el.closest('.chart-card')
+  if (chartCard) {
+    chartCard.style.display = 'none'
+    return true
+  }
+  return false
+}
+
 function filterByDate(commits) {
   const start = document.getElementById('startDate')?.value
   const end = document.getElementById('endDate')?.value
@@ -39,6 +75,38 @@ function formatDateYMD(d) {
   return `${yyyy}-${mm}-${dd}`
 }
 
+// 将 CLI 传入或 RC 中的 author 筛选信息格式化为可读字符串
+function formatAuthorFilter(a) {
+  if (!a) return null
+
+  function toList(v) {
+    if (!v) return null
+    if (Array.isArray(v)) return v.map((s) => String(s).trim()).filter(Boolean)
+    return String(v)
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+  }
+
+  if (typeof a === 'string') {
+    const list = toList(a)
+    return list && list.length ? list.join(', ') : String(a)
+  }
+
+  if (Array.isArray(a)) return a.join(', ')
+
+  if (typeof a === 'object') {
+    const include = toList(a.include)
+    const exclude = toList(a.exclude)
+    const parts = []
+    if (include && include.length) parts.push(`包含：${include.join(', ')}`)
+    if (exclude && exclude.length) parts.push(`排除：${exclude.join(', ')}`)
+    return parts.length ? parts.join('；') : null
+  }
+
+  return String(a)
+}
+
 function getISOWeekRange(isoYear, isoWeek) {
   // 找到 ISO 年的第一个周一
   // ISO 年的第 1 周包含 1 月 4 日
@@ -61,44 +129,27 @@ function getISOWeekRange(isoYear, isoWeek) {
 }
 
 async function loadData() {
-  try {
-    const [
-      commitsModule,
-      statsModule,
-      weeklyModule,
-      monthlyModule,
-      latestByDayModule,
-      configModule,
-      authorChangesModule
-    ] = await Promise.all([
-      import('/data/commits.mjs'),
-      import('/data/overtime-stats.mjs'),
-      import('/data/overtime-weekly.mjs'),
-      import('/data/overtime-monthly.mjs').catch(() => ({ default: [] })),
-      import('/data/overtime-latest-by-day.mjs').catch(() => ({ default: [] })),
-      import('/data/config.mjs').catch(() => ({ default: {} })),
-      import('/data/author-changes.mjs').catch(() => ({ default: {} }))
-    ])
-    const commits = commitsModule.default || []
-    const stats = statsModule.default || {}
-    const weekly = weeklyModule.default || []
-    const monthly = monthlyModule.default || []
-    const latestByDay = latestByDayModule.default || []
-    const config = configModule.default || {}
-    const authorChanges = authorChangesModule.default || {}
-    return {
-      commits,
-      stats,
-      weekly,
-      monthly,
-      latestByDay,
-      config,
-      authorChanges
+  // 定义加载函数，包装 import 以便添加错误处理
+  const safeImport = async (path, defaultValue) => {
+    try {
+      const module = await import(path)
+      return module.default || defaultValue
+    } catch (e) {
+      console.warn(`文件加载失败: ${path}`, e)
+      return defaultValue
     }
-  } catch (err) {
-    console.error('Load data failed', err)
-    return { commits: [], stats: {}, weekly: [], monthly: [], latestByDay: [] }
   }
+
+  // 并行加载基础数据（只加载快速的 analyze 生成的文件）
+  // 移除 overtime 文件加载，改为前端实时计算
+  const [commits, config, authorChanges, options] = await Promise.all([
+    safeImport('/data/commits.mjs', []),
+    safeImport('/data/config.mjs', {}),
+    safeImport('/data/author.changes.mjs', {}),
+    safeImport('/data/options.mjs', {})
+  ])
+
+  return { commits, config, authorChanges, options }
 }
 
 let commitsAll = []
@@ -111,9 +162,13 @@ function renderCommitsTablePage() {
   tbody.innerHTML = ''
   const start = (page - 1) * pageSize
   const end = start + pageSize
+  if(!window.__config.git.numstat) {
+    document.getElementById('thChanged').style.display = 'none'
+  }
   filtered.slice(start, end).forEach((c) => {
     const tr = document.createElement('tr')
-    tr.innerHTML = `<td>${c.hash.slice(0, 8)}</td><td>${c.author}</td><td>${c.email}</td><td>${formatDate(c.date)}</td><td>${c.message}</td><td>${c.changed}</td>`
+    const changedTd = window.__config.git.numstat ? `<td>${c.changed}</td>` : ''
+    tr.innerHTML = `<td class="hash">${c.hash.slice(0, 8)}</td><td>${c.author}</td><td class="email">${c.email}</td><td><div class="date">${formatDate(c.date)}</div></td><td>${c.message}</td><td class="cherryPick">${c.isCherryPick}</td>${changedTd}`
     tbody.appendChild(tr)
   })
   document.getElementById('commitsTotal').textContent =
@@ -192,28 +247,61 @@ function initTableControls() {
 
 function drawHourlyOvertime(stats, onHourClick) {
   const el = document.getElementById('hourlyOvertimeChart')
+
+  const isEmpty = hideElementByObj({ el, objectName: stats })
+  if (isEmpty) {
+    return false
+  }
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
-  const commits = stats.hourlyOvertimeCommits || []
-  const percent = stats.hourlyOvertimePercent || []
+  // 显示所有提交数（不仅仅是加班）
+  const allCommits = Array(24).fill(0)
   const labels = Array.from({ length: 24 }, (_, i) =>
     String(i).padStart(2, '0')
   )
 
-  // 颜色逻辑（与 daily severity 风格一致）
+  // 从原始 commits 数据重新计算每小时的所有提交数
+  // 如果没有则使用后备逻辑
+  if (window.__allCommitsData && Array.isArray(window.__allCommitsData)) {
+    window.__allCommitsData.forEach((c) => {
+      const d = new Date(c.date)
+      if (!isNaN(d.getTime())) {
+        const h = d.getHours()
+        allCommits[h]++
+      }
+    })
+  }
+
+  // 颜色逻辑：根据时间段着色
   function getColor(h) {
-    if (h >= 21) return '#d32f2f' // 深夜加班 红
-    if (h >= 19) return '#fb8c00' // 夜间加班 橙
-    if (h >= stats.lunchStart && h < stats.lunchEnd) return '#888888' // 午休灰
-    if (h >= stats.startHour && h < stats.endHour) return '#1976d2' // 工作时段 蓝
-    return '#b71c1c' // 凌晨 红
+    // 深夜（0-9 点）红色
+    if (h < stats.startHour) return '#b71c1c'
+    // 上班开始到午休开始：蓝色
+    if (h >= stats.startHour && h < stats.lunchStart) return '#1976d2'
+    // 午休时间：灰色
+    if (h >= stats.lunchStart && h < stats.lunchEnd) return '#888888'
+    // 午休结束到下班：蓝色
+    if (h >= stats.lunchEnd && h < stats.endHour) return '#1976d2'
+    // 下班后到晚上 19:00：橙色
+    if (h >= stats.endHour && h < 19) return '#fb8c00'
+    // 晚上 19:00 到深夜 21:00：深橙
+    if (h >= 19 && h < 21) return '#fb8c00'
+    // 深夜 21:00 后：红色
+    return '#d32f2f'
   }
 
-  const data = commits.map((v, h) => ({
+  const data = allCommits.map((v, h) => ({
     value: v,
     itemStyle: { color: getColor(h) }
   }))
 
+  // 计算百分比
+  const total = allCommits.reduce((sum, v) => sum + v, 0)
+  const percentData = allCommits.map((v) =>
+    total > 0 ? ((v / total) * 100).toFixed(1) : 0
+  )
+
   chart.setOption({
     tooltip: {
       trigger: 'axis',
@@ -221,11 +309,31 @@ function drawHourlyOvertime(stats, onHourClick) {
         const p = params[0]
         const h = parseInt(p.axisValue, 10)
         const count = p.value
-        const rate = (percent[h] * 100).toFixed(1)
+        const percent = percentData[h]
+
+        // 判断时间段
+        let period = ''
+        if (h < stats.startHour) {
+          period = '深夜（需要休息）'
+        } else if (h >= stats.startHour && h < stats.lunchStart) {
+          period = '早上工作时间'
+        } else if (h >= stats.lunchStart && h < stats.lunchEnd) {
+          period = '午休时间'
+        } else if (h >= stats.lunchEnd && h < stats.endHour) {
+          period = '下午工作时间'
+        } else if (h >= stats.endHour && h < 19) {
+          period = '下班后（轻度加班）'
+        } else if (h >= 19 && h < 21) {
+          period = '晚间（中度加班）'
+        } else {
+          period = '深夜（严重加班）'
+        }
+
         return `
           🕒 <b>${h}:00</b><br/>
           提交次数：<b>${count}</b><br/>
-          占全天比例：<b>${rate}%</b>
+          占全天比例：<b>${percent}%</b><br/>
+          时段：${period}
         `
       }
     },
@@ -247,7 +355,7 @@ function drawHourlyOvertime(stats, onHourClick) {
     series: [
       {
         type: 'bar',
-        name: 'Overtime commits',
+        name: '每小时提交',
         data,
         barWidth: 18,
 
@@ -260,7 +368,7 @@ function drawHourlyOvertime(stats, onHourClick) {
               name: '最晚提交',
               coord: [
                 String(stats.latestCommitHour).padStart(2, '0'),
-                commits[stats.latestCommitHour]
+                allCommits[stats.latestCommitHour] || 0
               ]
             }
           ]
@@ -307,14 +415,21 @@ function drawHourlyOvertime(stats, onHourClick) {
       }
       document.getElementById('dayDetailSidebar').classList.remove('show')
       if (Number.isNaN(hour)) return
-      onHourClick(hour, commits[hour])
+
+      // 获取该小时的所有提交
+      const hourCommits = (window.__allCommitsData || []).filter((c) => {
+        const d = new Date(c.date)
+        return !isNaN(d.getTime()) && d.getHours() === hour
+      })
+
+      onHourClick(hour, hourCommits)
     })
   }
 
   return chart
 }
 
-// showSideBarForHour 实现
+// 每小时加班分布
 function showSideBarForHour({ hour, commitsOrCount, titleDrawer }) {
   // 支持传入 number（仅次数）或 array（详细 commit 列表）
   // 统一复用通用详情侧栏 DOM
@@ -344,14 +459,14 @@ function showSideBarForHour({ hour, commitsOrCount, titleDrawer }) {
     // commits 列表：展示作者/时间/消息（最多前 50 条，避免性能问题）
     const commits = commitsOrCount.slice(0, 50)
     contentEl.innerHTML = `<div class="sidebar-list">${commits
-      .map((c) => {
+      .map((c, index) => {
         const author = c.author ?? c.name ?? 'unknown'
         const time = c.date ?? c.time ?? ''
         const msg = (c.message ?? c.msg ?? c.body ?? '').replace(/\n/g, ' ')
         return `
           <div class="sidebar-item">
             <div class="sidebar-item-header">
-              <span class="author">👤 ${escapeHtml(author)}</span>
+              <span class="author">${index + 1}. 👤 ${escapeHtml(author)}</span>
               <span class="time">🕒 ${escapeHtml(time)}</span>
             </div>
             <div class="sidebar-item-message">${escapeHtml(msg)}</div>
@@ -383,30 +498,121 @@ function escapeHtml(str = '') {
     .replaceAll("'", '&#39;')
 }
 
-function drawOutsideVsInside(stats) {
-  const el = document.getElementById('outsideVsInsideChart')
-  // eslint-disable-next-line no-undef
-  const chart = echarts.init(el)
-  const outside = stats.outsideWorkCount || 0
-  const total = stats.total || 0
-  const inside = Math.max(0, total - outside)
+/**
+ * 通用环形饼图（中心显示总数）
+ *
+ * @param {Object} options
+ * @param {string|HTMLElement} options.el        DOM 或 id
+ * @param {Array} options.data                   [{ name, value }]
+ * @param {string} [options.title]               标题
+ * @param {string} [options.unit='次']            单位
+ * @param {Array}  [options.colors]              自定义颜色
+ * @param {string} [options.totalLabel='总计']    中心文案
+ */
+export function drawPieWithTotal({
+  el,
+  data = [],
+  title = '',
+  unit = '次',
+  colors = [],
+  totalLabel = '总计'
+}) {
+  const dom = typeof el === 'string' ? document.getElementById(el) : el
+  const chart = echarts.init(dom)
+  chartInstances.push(chart)
+
+  let total = data.reduce((sum, item) => sum + (item.value || 0), 0)
+  total = Math.round(total)
+  // FIXME: remove debug log before production
+  console.log('❌', 'total', total)
+  const safeData = total === 0 ? [{ name: '暂无数据', value: 1 }] : data
+
   chart.setOption({
-    tooltip: {},
+    color: colors.length ? colors : undefined,
+
+    title: title
+      ? {
+          text: title,
+          left: 'center',
+          top: 10
+        }
+      : undefined,
+
+    tooltip: {
+      trigger: 'item',
+      formatter: (params) => {
+        if (total === 0) return '暂无数据'
+        return `
+          ${params.name}<br/>
+          数量：${params.value} ${unit}<br/>
+          占比：${params.percent}%
+        `
+      }
+    },
+    legend: {
+      bottom: 0,
+      formatter: (name) => `${name}`
+    },
+    graphic:
+      total === 0
+        ? []
+        : [
+            {
+              type: 'text',
+              left: 'center',
+              top: '45%',
+              style: {
+                text: `${totalLabel}\n${total} ${unit}`,
+                textAlign: 'center',
+                fill: '#333',
+                fontSize: 14,
+                fontWeight: 600
+              }
+            }
+          ],
+
     series: [
       {
         type: 'pie',
-        radius: '55%',
-        data: [
-          { value: inside, name: '工作时间内' },
-          { value: outside, name: '下班时间' }
-        ]
+        radius: ['40%', '60%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: total !== 0,
+          formatter: `{b}\n{c} ${unit}`
+        },
+        emphasis: {
+          scale: true,
+          scaleSize: 8
+        },
+        data: safeData
       }
     ]
   })
+
   return chart
 }
 
+function drawOutsideVsInside(stats) {
+  const outside = stats.outsideWorkCount || 0
+  const total = stats.total || 0
+  const inside = Math.max(0, total - outside)
+
+  return drawPieWithTotal({
+    el: 'outsideVsInsideChart',
+    title: '提交时间分布',
+    unit: '次',
+    totalLabel: '总提交',
+    data: [
+      { name: '工作时间内', value: inside },
+      { name: '下班时间', value: outside }
+    ],
+    colors: ['#5470C6', '#EE6666']
+  })
+}
+
 function drawDailyTrend(commits, onDayClick) {
+  const el = document.getElementById('dailyTrendChart')
+
   if (!Array.isArray(commits) || commits.length === 0) return null
 
   // 聚合每日提交数量
@@ -419,11 +625,11 @@ function drawDailyTrend(commits, onDayClick) {
   const labels = Array.from(map.keys()).sort()
   const data = labels.map((l) => map.get(l))
 
-  const el = document.getElementById('dailyTrendChart')
   const titleDrawer = el.getAttribute('data-title') || ''
 
   // eslint-disable-next-line no-undef
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   chart.setOption({
     tooltip: {
@@ -550,14 +756,14 @@ function showSideBarForWeek({ period, weeklyItem, commits = [], titleDrawer }) {
     html += `<div style="padding:10px;color:#777;">该周无提交记录</div>`
   } else {
     html += `<div class="sidebar-list">${commits
-      .map((c) => {
+      .map((c, index) => {
         const author = escapeHtml(c.author || 'unknown')
         const time = escapeHtml(c.date || '')
         const msg = escapeHtml((c.message || '').replace(/\n/g, ' '))
         return `
           <div class="sidebar-item">
             <div class="sidebar-item-header">
-              <span class="author">👤 ${author}</span>
+              <span class="author">${index + 1}👤 ${author}</span>
               <span class="time">🕒 ${time}</span>
             </div>
             <div class="sidebar-item-message">${msg}</div>
@@ -573,16 +779,23 @@ function showSideBarForWeek({ period, weeklyItem, commits = [], titleDrawer }) {
 }
 
 function drawWeeklyTrend(weekly, commits, onWeekClick) {
-  if (!Array.isArray(weekly) || weekly.length === 0) return null
+  const el = document.getElementById('weeklyTrendChart')
+  const isEmpty = hideElementByObj({ el, objectName: weekly })
+  if (isEmpty) {
+    return null
+  }
+  if (!Array.isArray(weekly) || weekly.length === 0) {
+    return null
+  }
 
   const labels = weekly.map((w) => w.period)
   const dataRate = weekly.map((w) => +(w.outsideWorkRate * 100).toFixed(1)) // %
   const dataCount = weekly.map((w) => w.outsideWorkCount)
 
-  const el = document.getElementById('weeklyTrendChart')
   const titleDrawer = el.getAttribute('data-title') || ''
 
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   chart.setOption({
     tooltip: {
@@ -698,15 +911,20 @@ function drawWeeklyTrend(weekly, commits, onWeekClick) {
 }
 
 function drawMonthlyTrend(monthly, commits, onMonthClick) {
+  const el = document.getElementById('monthlyTrendChart')
+  const isEmpty = hideElementByObj({ el, objectName: monthly })
+  if (isEmpty) {
+    return null
+  }
   if (!Array.isArray(monthly) || monthly.length === 0) return null
 
   const labels = monthly.map((m) => m.period)
   const dataRate = monthly.map((m) => +(m.outsideWorkRate * 100).toFixed(1)) // 0–100%
 
-  const el = document.getElementById('monthlyTrendChart')
   const titleDrawer = el.getAttribute('data-title') || ''
   // eslint-disable-next-line no-undef
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   chart.setOption({
     tooltip: {
@@ -821,6 +1039,11 @@ function drawMonthlyTrend(monthly, commits, onMonthClick) {
 }
 
 function drawLatestHourDaily(latestByDay, commits, onDayClick) {
+  const el = document.getElementById('latestHourDailyChart')
+  const isEmpty = hideElementByObj({ el, objectName: latestByDay })
+  if (isEmpty) {
+    return null
+  }
   if (!Array.isArray(latestByDay) || latestByDay.length === 0) return null
 
   const labels = latestByDay.map((d) => d.date)
@@ -849,11 +1072,11 @@ function drawLatestHourDaily(latestByDay, commits, onDayClick) {
   const numericValues = raw.filter((v) => typeof v === 'number')
   const maxV = numericValues.length > 0 ? Math.max(...numericValues) : 0
 
-  const el = document.getElementById('latestHourDailyChart')
   const titleDrawer = el.getAttribute('data-title') || ''
 
   // eslint-disable-next-line no-undef
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   chart.setOption({
     tooltip: {
@@ -965,6 +1188,11 @@ function drawLatestHourDaily(latestByDay, commits, onDayClick) {
 }
 
 function drawDailySeverity(latestByDay, commits, onDayClick) {
+  const el = document.getElementById('dailySeverityChart')
+  const isEmpty = hideElementByObj({ el, objectName: latestByDay })
+  if (isEmpty) {
+    return null
+  }
   if (!Array.isArray(latestByDay) || latestByDay.length === 0) return null
 
   const labels = latestByDay.map((d) => d.date)
@@ -980,11 +1208,11 @@ function drawDailySeverity(latestByDay, commits, onDayClick) {
   // 这里按 0 小时加班处理，保证折线连续。
   const sev = raw.map((v) => (v == null ? 0 : Math.max(0, Number(v) - endH)))
 
-  const el = document.getElementById('dailySeverityChart')
   const titleDrawer = el.getAttribute('data-title') || ''
 
   // eslint-disable-next-line no-undef
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   chart.setOption({
     tooltip: {
@@ -1138,7 +1366,7 @@ function drawDailyTrendSeverity(commits, weekly, onDayClick) {
 
   // ---------- 3. 自动分析「最累的一周」 ----------
   let maxWeek = null
-  if (Array.isArray(weekly)) {
+  if (Array.isArray(weekly) && weekly.length > 0) {
     maxWeek = weekly.reduce((a, b) =>
       a.outsideWorkCount > b.outsideWorkCount ? a : b
     )
@@ -1186,24 +1414,26 @@ function drawDailyTrendSeverity(commits, weekly, onDayClick) {
     const count = params?.[0].value
     const details = dayCommitsDetail[date] || []
 
-    let html = `📅 <b>${date}</b><br/>提交次数：${count}<br/><br/>`
+    let html = `📅 <b>${date}</b><br/>提交次数：${count}<br/>`
 
     details.slice(0, 5).forEach((d) => {
-      html += `👤 ${d.author}<br/>🕒 ${d.time}<br/>💬 ${d.msg}<br/><br/>`
+      html += `👤 ${d.author}<br/>🕒 ${d.time}<br/> <div class="long-txt-break-all">💬${d.msg}</div>`
     })
 
     if (details.length > 5) {
       html += `（其余 ${details.length - 5} 条已省略）`
     }
-
+    html = `<div class="tooltip-box">${html}</div>`
     return html
   }
 
   // ---------- 7. 绘图 ----------
   const el = document.getElementById('dailyTrendChartDog')
+
   const titleDrawer = el.getAttribute('data-title') || ''
 
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   chart.setOption({
     tooltip: {
@@ -1276,10 +1506,10 @@ function showDayDetailSidebar({ date, count, commits, titleDrawer }) {
   // 渲染详情
   content.innerHTML = commits
     .map(
-      (c) => `
+      (c, index) => `
     <div class="sidebar-item">
       <div class="sidebar-item-header">
-        <span class="author">👤 ${escapeHtml(c.author || 'unknown')}</span>
+        <span class="author">${index + 1}👤 ${escapeHtml(c.author || 'unknown')}</span>
         <span class="time">🕒 ${escapeHtml(c.time || c.date || '')}</span>
       </div>
       <div class="sidebar-item-message">${escapeHtml(c.msg || c.message || '')}</div>
@@ -1345,14 +1575,59 @@ function renderKpi(stats) {
       (latestOut ? new Date(latestOut.date).getHours() : null)
   }
 
+  const htmlLatest = latest
+    ? `<div>最后一次提交时间：${latest ? formatDate(latest.date) : '-'}${typeof latestHour === 'number' ? `（${String(latestHour).padStart(2, '0')}:00）` : ''} <div class="author">${latest?.author}</div> <div class="long-txt"> ${latest?.message} </div></div>`
+    : ``
+
+  // 采样区间展示（来自 config 或 serve 参数），同时支持筛选条件（author）
+  const samplingSince = window.__samplingSince || null
+  const samplingUntil = window.__samplingUntil || null
+  const samplingAuthor = window.__samplingAuthor || null
+  function formatSampling(dStr) {
+    if (!dStr) return null
+    const d = new Date(dStr)
+    if (Number.isNaN(d.valueOf())) return escapeHtml(dStr)
+    return formatDateYMD(d)
+  }
+  let samplingHtml = ''
+  if (samplingSince && samplingUntil) {
+    samplingHtml = `<div class="hr"></div><div class="sampling">采样区间：${formatSampling(samplingSince)} ~ ${formatSampling(samplingUntil)}${samplingAuthor ? ` （作者 ${escapeHtml(samplingAuthor)})` : ''}</div>`
+  } else if (samplingSince) {
+    samplingHtml = `<div class="hr"></div><div class="sampling">采样起始：${formatSampling(samplingSince)}（起）${samplingAuthor ? ` （作者 ${escapeHtml(samplingAuthor)})` : ''}</div>`
+  } else if (samplingUntil) {
+    samplingHtml = `<div class="hr"></div><div class="sampling">采样截止：${formatSampling(samplingUntil)}（止）${samplingAuthor ? ` （作者 ${escapeHtml(samplingAuthor)})` : ''}</div>`
+  } else {
+    samplingHtml = `<div class="hr"></div><div class="sampling">采样区间：全量提交${samplingAuthor ? ` （作者 ${escapeHtml(samplingAuthor)})` : ''}</div>`
+  }
+
   const html = [
-    `<div>最晚一次提交时间：${latest ? formatDate(latest.date) : '-'}${typeof latestHour === 'number' ? `（${String(latestHour).padStart(2, '0')}:00）` : ''} <div class="author">${latest.author}</div> <div> ${latest.message} <div></div>`,
+    htmlLatest,
     `<div class="hr"></div>`,
-    `<div>加班最晚一次提交时间：${latestOut ? formatDate(latestOut.date) : '-'}${typeof latestOutHour === 'number' ? `（${String(latestOutHour).padStart(2, '0')}:00）` : ''} <div class="author">${latestOut.author}</div> <div>${latestOut.message}</div> </div>`,
+    `<div>加班最晚一次提交时间：${latestOut ? formatDate(latestOut.date) : '-'}${typeof latestOutHour === 'number' ? `（${String(latestOutHour).padStart(2, '0')}:00）` : ''} <div class="author">${latestOut?.author || ''}</div> <div  class="long-txt">${latestOut?.message || ''}</div> </div>`,
     `<div class="hr"></div>`,
-    `<div>次日归并窗口：凌晨 <b>${cutoff}</b> 点内归前一日</div>`
+    `<div>次日归并窗口：凌晨 <b>${cutoff}</b> 点内归前一日</div>`,
+    samplingHtml
   ].join('')
   el.innerHTML = html
+
+  // 同步显示在 header 侧边的采样信息（更醒目）
+  const headerEl = document.getElementById('samplingInfo')
+  if (headerEl) {
+    const sSince = formatSampling(samplingSince)
+    const sUntil = formatSampling(samplingUntil)
+    const sAuthor = samplingAuthor
+      ? ` （作者 ${escapeHtml(samplingAuthor)}）`
+      : ''
+    const sText =
+      sSince && sUntil
+        ? `采样：${sSince} ~ ${sUntil}`
+        : sSince
+          ? `采样起：${sSince}`
+          : sUntil
+            ? `采样止：${sUntil}`
+            : '采样：全量提交'
+    headerEl.textContent = sText + sAuthor
+  }
 }
 
 // 1) 按小时分组（例：commits 为原始提交数组）
@@ -1478,8 +1753,15 @@ function buildDataset(stats, type) {
 
 const drawChangeTrends = (stats) => {
   const el = document.getElementById('chartAuthorChanges')
+  // FIXME: remove debug log before production
+  console.log('❌', 'window.__config', window.__config)
+  if (!window.__config.git.numstat) {
+    hideElementByEl({ el })
+    return null
+  }
   if (!el) return null
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   function render(type) {
     const { authors, allPeriods, series } = buildDataset(stats, type)
@@ -1509,12 +1791,16 @@ const drawChangeTrends = (stats) => {
             //   extra = `<div style="margin-top:4px;color:#999;font-size:12px">
             //   周区间：${start} ~ ${end}
             // </div>`
-            // TODO: remove debug log before production
             extra = ''
           }
 
           const lines = params
             .filter((i) => i.data > 0)
+            .sort(
+              (a, b) =>
+                (b.data || 0) - (a.data || 0) ||
+                String(a.seriesName).localeCompare(String(b.seriesName))
+            )
             .map(
               (item) => `${item.marker}${item.seriesName}: ${item.data} 行变更`
             )
@@ -1547,6 +1833,61 @@ const drawChangeTrends = (stats) => {
     })
   })
 
+  // 点击事件：点击某个作者在某个周期的点，打开侧栏显示该作者在该周期的 commits
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabs button.active')?.dataset.type || 'daily'
+
+      const filteredCommits = (
+        Array.isArray(commitsAll) ? commitsAll : []
+      ).filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+        return month === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 变更量 ${type} 详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 变更量 ${type} 详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Change chart click handler error', err)
+    }
+  })
+
   return chart
 }
 
@@ -1595,6 +1936,7 @@ function drawAuthorOvertimeTrends(commits, stats) {
   const el = document.getElementById('chartAuthorOvertime')
   if (!el) return null
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   const startHour =
     typeof stats.startHour === 'number' && stats.startHour >= 0
@@ -1642,6 +1984,11 @@ function drawAuthorOvertimeTrends(commits, stats) {
 
           const lines = params
             .filter((i) => i.data > 0)
+            .sort(
+              (a, b) =>
+                (b.data || 0) - (a.data || 0) ||
+                String(a.seriesName).localeCompare(String(b.seriesName))
+            )
             .map(
               (item) => `${item.marker}${item.seriesName}: ${item.data} 次提交`
             )
@@ -1676,13 +2023,75 @@ function drawAuthorOvertimeTrends(commits, stats) {
     })
   })
 
-  // 输出本周风险总结
+  // 输出本周风险与加班时长排行
   renderWeeklyRiskSummary(commits, { startHour, endHour, cutoff })
   renderMonthlyRiskSummary(commits, { startHour, endHour, cutoff })
+  // 新增：本周/本月加班时长排名（显示所有作者总时长，前三名带图标，状元标注“夜魔侠”）
+  renderWeeklyDurationRankSummary(commits, { startHour, endHour, cutoff })
   renderWeeklyDurationRiskSummary(commits, { startHour, endHour, cutoff })
+  renderMonthlyDurationRankSummary(commits, { startHour, endHour, cutoff })
   renderMonthlyDurationRiskSummary(commits, { startHour, endHour, cutoff })
   renderRolling30DurationRiskSummary(commits, { startHour, endHour, cutoff })
 
+  // 点击事件：点击某个作者在某周期的点，打开侧栏显示该作者在该周期内的下班后提交（加班）明细
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabsOvertime button.active')?.dataset.type ||
+        'daily'
+
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+        const h = d.getHours()
+        const isOT =
+          (h >= endHour && h < 24) || (h >= 0 && h < cutoff && h < startHour)
+        if (!isOT) return false
+
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+        return month === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 加班本周详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 加班 ${type} 详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Overtime chart click handler error', err)
+    }
+  })
+
   return chart
 }
 
@@ -1770,6 +2179,65 @@ function renderWeeklyRiskSummary(
     )
   }
 
+  // ---------- 追加：本周“最晚加班风险”分析（合并自原 renderLatestRiskSummary） ----------
+  const weekMax = new Map()
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    let overtime = null
+    if (h >= endHour && h < 24) overtime = h - endHour
+    else if (h >= 0 && h < cutoff && h < startHour) overtime = 24 - endHour + h
+    if (overtime == null) return
+
+    const wKey = getIsoWeekKey(d.toISOString().slice(0, 10))
+    if (!wKey) return
+    if (!weekMax.has(wKey)) weekMax.set(wKey, new Map())
+    const m = weekMax.get(wKey)
+    const author = c.author || 'unknown'
+    const cur = m.get(author)
+    if (!cur || overtime > cur.max) {
+      m.set(author, { max: overtime, date: d.toISOString().slice(0, 10) })
+    }
+  })
+
+  const curMaxMap = weekMax.get(curKey) || new Map()
+  const prevMaxMap = weekMax.get(prevKey) || new Map()
+  let topAuthorLatest = null
+  let topLatest = { max: -1, date: null }
+  curMaxMap.forEach((v, k) => {
+    if (v.max > topLatest.max) {
+      topLatest = v
+      topAuthorLatest = k
+    }
+  })
+  let prevMaxLatest = -1
+  prevMaxMap.forEach((v) => {
+    if (v.max > prevMaxLatest) prevMaxLatest = v.max
+  })
+
+  const latestLines = []
+  latestLines.push('【本周最晚加班风险】')
+
+  if (topLatest.max < 0) {
+    latestLines.push('本周尚无下班后/凌晨提交，未发现明显风险。')
+  } else {
+    let trend2 = '暂无上周对比'
+    if (prevMaxLatest >= 0) {
+      if (topLatest.max > prevMaxLatest) trend2 = '较上周更晚'
+      else if (topLatest.max < prevMaxLatest) trend2 = '较上周提前'
+      else trend2 = '与上周持平'
+    }
+    latestLines.push(
+      `${topAuthorLatest} 本周最晚超出下班 ${topLatest.max.toFixed(2)} 小时（${topLatest.date}），${trend2}。`
+    )
+    if (topLatest.max >= 2) {
+      latestLines.push('已超过 2 小时，存在严重加班风险，请关注工作节奏。')
+    } else if (topLatest.max >= 1) {
+      latestLines.push('已超过 1 小时，注意控制夜间工作时长。')
+    }
+  }
+
   box.innerHTML = `
     <div class="risk-summary">
       <div class="risk-title">【本周风险总结】</div>
@@ -1780,6 +2248,16 @@ function renderWeeklyRiskSummary(
           .join('')}
       </ul>
     </div>
+
+    <div class="risk-summary">
+      <div class="risk-title">【本周最晚加班风险】</div>
+      <ul>
+        ${latestLines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
   `
 }
 
@@ -1812,6 +2290,62 @@ function computeAuthorDailyMaxOvertime(commits, startHour, endHour, cutoff) {
   return byAuthorDay
 }
 
+function renderWeeklyDurationRankSummary(
+  commits,
+  { startHour = 9, endHour = 18, cutoff = 6 } = {}
+) {
+  const box = document.getElementById('weeklyDurationRankSummary')
+  if (!box) return
+  const now = new Date()
+  const curWeek = getIsoWeekKey(now.toISOString().slice(0, 10))
+  const byAuthorDay = computeAuthorDailyMaxOvertime(
+    commits,
+    startHour,
+    endHour,
+    cutoff
+  )
+  const ranks = []
+  byAuthorDay.forEach((dayMap, author) => {
+    let total = 0
+    dayMap.forEach((v, dayKey) => {
+      const wk = getIsoWeekKey(dayKey)
+      if (wk === curWeek) total += v
+    })
+    if (total > 0) ranks.push({ author, total })
+  })
+  ranks.sort(
+    (a, b) =>
+      b.total - a.total || String(a.author).localeCompare(String(b.author))
+  )
+
+  const lines = []
+  lines.push('【本周加班时长排名】')
+  if (ranks.length === 0) {
+    lines.push('本周暂无加班时长。')
+  } else {
+    ranks.forEach((r, idx) => {
+      const rank = idx + 1
+      const medal =
+        rank === 1 ? '🥇 ' : rank === 2 ? '🥈 ' : rank === 3 ? '🥉 ' : ''
+      const title = rank === 1 ? '（状元・夜魔侠）' : ''
+      lines.push(
+        `${rank}. ${medal}${r.author} — ${r.total.toFixed(2)} 小时${title}`
+      )
+    })
+  }
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本周加班时长排名】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+  `
+}
+
 function renderWeeklyDurationRiskSummary(
   commits,
   { startHour = 9, endHour = 18, cutoff = 6 } = {}
@@ -1864,6 +2398,62 @@ function renderWeeklyDurationRiskSummary(
   `
 }
 
+function renderMonthlyDurationRankSummary(
+  commits,
+  { startHour = 9, endHour = 18, cutoff = 6 } = {}
+) {
+  const box = document.getElementById('monthlyDurationRankSummary')
+  if (!box) return
+  const now = new Date()
+  const curMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+  const byAuthorDay = computeAuthorDailyMaxOvertime(
+    commits,
+    startHour,
+    endHour,
+    cutoff
+  )
+  const ranks = []
+  byAuthorDay.forEach((dayMap, author) => {
+    let total = 0
+    dayMap.forEach((v, dayKey) => {
+      const m = dayKey.slice(0, 7)
+      if (m === curMonth) total += v
+    })
+    if (total > 0) ranks.push({ author, total })
+  })
+  ranks.sort(
+    (a, b) =>
+      b.total - a.total || String(a.author).localeCompare(String(b.author))
+  )
+
+  const lines = []
+  lines.push('【本月加班时长排名】')
+  if (ranks.length === 0) {
+    lines.push('本月暂无加班时长。')
+  } else {
+    ranks.forEach((r, idx) => {
+      const rank = idx + 1
+      const medal =
+        rank === 1 ? '🥇 ' : rank === 2 ? '🥈 ' : rank === 3 ? '🥉 ' : ''
+      const title = rank === 1 ? '（状元・夜魔侠）' : ''
+      lines.push(
+        `${rank}. ${medal}${r.author} — ${r.total.toFixed(2)} 小时${title}`
+      )
+    })
+  }
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本月加班时长排名】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+  `
+}
+
 function renderMonthlyDurationRiskSummary(
   commits,
   { startHour = 9, endHour = 18, cutoff = 6 } = {}
@@ -2068,13 +2658,45 @@ function renderMonthlyRiskSummary(
     }
   }
 
-  box.innerHTML = `
-    <div class="risk-summary">
-      <div class="risk-title">【本月加班风险】</div>
-      <ul>
-        ${lines
-          .slice(1)
-          .map((l) => `<li>${escapeHtml(l)}</li>`)
+  // ---------- 追加：本月“最晚加班风险”独立展示（合并自 renderLatestMonthlyRiskSummary） ----------
+  const latestMonthLines = []
+  latestMonthLines.push('【本月最晚加班风险】')
+  if (top.max < 0) {
+    latestMonthLines.push('本月尚无下班后/凌晨提交，未发现明显风险。')
+  } else {
+    let trend3 = '暂无上月对比'
+    if (prevMax >= 0) {
+      if (top.max > prevMax) trend3 = '较上月更晚'
+      else if (top.max < prevMax) trend3 = '较上月提前'
+      else trend3 = '与上月持平'
+    }
+    latestMonthLines.push(
+      `${topAuthor} 本月最晚超出下班 ${top.max.toFixed(2)} 小时（${top.date}），${trend3}。`
+    )
+    if (top.max >= 2) {
+      latestMonthLines.push('已超过 2 小时，存在严重加班风险，请关注工作节奏。')
+    } else if (top.max >= 1) {
+      latestMonthLines.push('已超过 1 小时，注意控制夜间工作时长。')
+    }
+  }
+
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本月加班风险】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+
+    <div class="risk-summary">
+      <div class="risk-title">【本月最晚加班风险】</div>
+      <ul>
+        ${latestMonthLines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
           .join('')}
       </ul>
     </div>
@@ -2129,6 +2751,7 @@ function drawAuthorLatestOvertimeTrends(commits, stats) {
   const el = document.getElementById('chartAuthorLatestOvertime')
   if (!el) return null
   const chart = echarts.init(el)
+  chartInstances.push(chart)
 
   const startHour =
     typeof stats.startHour === 'number' && stats.startHour >= 0
@@ -2176,6 +2799,11 @@ function drawAuthorLatestOvertimeTrends(commits, stats) {
 
           const lines = params
             .filter((i) => i.data > 0)
+            .sort(
+              (a, b) =>
+                (b.data || 0) - (a.data || 0) ||
+                String(a.seriesName).localeCompare(String(b.seriesName))
+            )
             .map(
               (item) => `${item.marker}${item.seriesName}: ${item.data} 小时`
             )
@@ -2210,207 +2838,2495 @@ function drawAuthorLatestOvertimeTrends(commits, stats) {
     })
   })
 
-  renderLatestRiskSummary(commits, { startHour, endHour, cutoff })
-  renderLatestMonthlyRiskSummary(commits, { startHour, endHour, cutoff })
+  // 点击事件：点击某个作者在某周期的点，打开侧栏显示该作者在该周期内的加班提交明细（用于查看具体提交与时间）
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabsLatestOvertime button.active')?.dataset
+          .type || 'daily'
+
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+        const h = d.getHours()
+        let overtime = null
+        if (h >= endHour && h < 24) overtime = h - endHour
+        else if (h >= 0 && h < cutoff && h < startHour)
+          overtime = 24 - endHour + h
+        if (overtime == null) return false
+
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+        return month === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 本周最晚加班详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 本日最晚加班详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Latest overtime chart click handler error', err)
+    }
+  })
 
   return chart
 }
 
-// 本周“最晚加班”风险提示
-function renderLatestRiskSummary(
+// ====== 开发者 累计加班时长（按日/周/月/年累计日峰值加班时长求和） ======
+function buildAuthorTotalOvertimeDataset(
   commits,
-  { startHour = 9, endHour = 18, cutoff = 6 } = {}
+  type,
+  startHour,
+  endHour,
+  cutoff
 ) {
-  const box = document.getElementById('latestRiskSummary')
-  if (!box) return
-
-  const now = new Date()
-  const curKey = getIsoWeekKey(now.toISOString().slice(0, 10))
-  const prev = new Date(now)
-  prev.setDate(prev.getDate() - 7)
-  const prevKey = getIsoWeekKey(prev.toISOString().slice(0, 10))
-
-  // 统计每周每人最大超时
-  const weekMax = new Map() // week -> Map(author -> {max, date})
-  commits.forEach((c) => {
-    const d = new Date(c.date)
-    if (Number.isNaN(d.valueOf())) return
-    const h = d.getHours()
-    let overtime = null
-    if (h >= endHour && h < 24) overtime = h - endHour
-    else if (h >= 0 && h < cutoff && h < startHour) overtime = 24 - endHour + h
-    if (overtime == null) return
+  // 基于每天每人的最大超时（computeAuthorDailyMaxOvertime），再按周期聚合求和
+  const byAuthorDay = computeAuthorDailyMaxOvertime(
+    commits,
+    startHour,
+    endHour,
+    cutoff
+  )
+  const byAuthorPeriod = new Map()
+  const periods = new Set()
 
-    const wKey = getIsoWeekKey(d.toISOString().slice(0, 10))
-    if (!wKey) return
-    if (!weekMax.has(wKey)) weekMax.set(wKey, new Map())
-    const m = weekMax.get(wKey)
-    const author = c.author || 'unknown'
-    const cur = m.get(author)
-    if (!cur || overtime > cur.max) {
-      m.set(author, { max: overtime, date: d.toISOString().slice(0, 10) })
+  byAuthorDay.forEach((dayMap, author) => {
+    for (const [dayKey, overtime] of dayMap.entries()) {
+      let period
+      if (type === 'daily') period = dayKey
+      else if (type === 'weekly') period = getIsoWeekKey(dayKey)
+      else if (type === 'monthly')
+        period = dayKey.slice(0, 7) // YYYY-MM
+      else if (type === 'yearly')
+        period = dayKey.slice(0, 4) // YYYY
+      else period = dayKey
+      if (!period) continue
+      periods.add(period)
+      if (!byAuthorPeriod.has(author)) byAuthorPeriod.set(author, {})
+      const obj = byAuthorPeriod.get(author)
+      obj[period] = (obj[period] || 0) + (overtime || 0)
     }
   })
 
-  const curMap = weekMax.get(curKey) || new Map()
-  const prevMap = weekMax.get(prevKey) || new Map()
+  const allPeriods = Array.from(periods).sort()
+  const authors = Array.from(byAuthorPeriod.keys()).sort()
+  const series = authors.map((a) => ({
+    name: a,
+    type: 'line',
+    smooth: true,
+    data: allPeriods.map((p) =>
+      Number((byAuthorPeriod.get(a)[p] || 0).toFixed(2))
+    )
+  }))
 
-  // 当前周的全局最晚
-  let topAuthor = null
-  let top = { max: -1, date: null }
-  curMap.forEach((v, k) => {
-    if (v.max > top.max) {
-      top = v
-      topAuthor = k
-    }
+  // 3. 计算每个作者的总时长/占用天数/日均占用，方便列表与 tooltip 使用
+  const totals = authors.map((a) => {
+    const periodObj = byAuthorPeriod.get(a) || {}
+    const totalHours = Object.values(periodObj).reduce(
+      (s, v) => s + (Number(v) || 0),
+      0
+    )
+    // days 从 byAuthorDay（每日最大超时的 map）中获取
+    const days = byAuthorDay.get(a) ? byAuthorDay.get(a).size : 0
+    const avg = days > 0 ? Number((totalHours / days).toFixed(2)) : 0
+    return { author: a, totalHours: Number(totalHours.toFixed(2)), days, avg }
   })
 
-  // 上周全局最晚，用于趋势判断
-  let prevMax = -1
-  prevMap.forEach((v) => {
-    if (v.max > prevMax) prevMax = v.max
-  })
+  return { authors, allPeriods, series, totals }
+}
 
-  const lines = []
-  lines.push('【本周最晚加班风险】')
+function drawAuthorTotalOvertimeTrends(commits, stats) {
+  const el = document.getElementById('chartAuthorTotalOvertime')
+  if (!el) return null
+  const chart = echarts.init(el)
+  chartInstances.push(chart)
 
-  if (top.max < 0) {
-    lines.push('本周尚无下班后/凌晨提交，未发现明显风险。')
-  } else {
-    let trend = '暂无上周对比'
-    if (prevMax >= 0) {
-      if (top.max > prevMax) trend = '较上周更晚'
-      else if (top.max < prevMax) trend = '较上周提前'
-      else trend = '与上周持平'
-    }
-    lines.push(
-      `${topAuthor} 本周最晚超出下班 ${top.max.toFixed(
-        2
-      )} 小时（${top.date}），${trend}。`
+  const startHour =
+    typeof stats.startHour === 'number' && stats.startHour >= 0
+      ? stats.startHour
+      : 9
+  const endHour =
+    typeof stats.endHour === 'number' && stats.endHour >= 0
+      ? stats.endHour
+      : window.__overtimeEndHour || 18
+  const cutoff = window.__overnightCutoff ?? 6
+
+  function render(type) {
+    const ds = buildAuthorTotalOvertimeDataset(
+      commits,
+      type,
+      startHour,
+      endHour,
+      cutoff
     )
-    if (top.max >= 2) {
-      lines.push('已超过 2 小时，存在严重加班风险，请关注工作节奏。')
-    } else if (top.max >= 1) {
-      lines.push('已超过 1 小时，注意控制夜间工作时长。')
+    ds.rangeMap = {}
+    for (const period of ds.allPeriods) {
+      if (period.includes('-W')) {
+        const [yy, ww] = period.split('-W')
+        ds.rangeMap[period] = getISOWeekRange(Number(yy), Number(ww))
+      }
+    }
+
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        formatter(params) {
+          if (!params || !params.length) return ''
+          const label = params[0].axisValue
+          const isWeekly = type === 'weekly'
+          let extra = ''
+          if (isWeekly && ds.rangeMap && ds.rangeMap[label]) {
+            const { start, end } = ds.rangeMap[label]
+            extra = `<div style="margin-top:4px;color:#999;font-size:12px">周区间：${start} ~ ${end}</div>`
+          }
+          const lines = params
+            .filter((i) => i.data > 0)
+            .sort(
+              (a, b) =>
+                (b.data || 0) - (a.data || 0) ||
+                String(a.seriesName).localeCompare(String(b.seriesName))
+            )
+            .map(
+              (item) => `${item.marker}${item.seriesName}: ${item.data} 小时`
+            )
+            .join('<br/>')
+          return `<div>${label}</div>${extra}${lines}`
+        }
+      },
+      legend: { data: ds.authors },
+      xAxis: { type: 'category', data: ds.allPeriods },
+      yAxis: { type: 'value', name: '累计加班时长 (小时)' },
+      series: ds.series
+    })
+
+    // 同步更新下面的排名列表
+    try {
+      renderAuthorTotalOvertimeRankFromDs(ds, 0)
+      renderAuthorTotalOvertimeRank(ds, 0)
+    } catch (e) {
+      console.warn('更新累计加班排名失败', e)
     }
   }
 
-  box.innerHTML = `
-    <div class="risk-summary">
-      <div class="risk-title">【本周最晚加班风险】</div>
-      <ul>
-        ${lines
-          .slice(1)
-          .map((l) => `<li>${escapeHtml(l)}</li>`)
-          .join('')}
-      </ul>
-    </div>
-  `
-}
+  render('daily')
 
-function renderLatestMonthlyRiskSummary(
-  commits,
-  { startHour = 9, endHour = 18, cutoff = 6 } = {}
-) {
-  const box = document.getElementById('latestMonthlyRiskSummary')
-  if (!box) return
+  const tabs = document.querySelectorAll('#tabsTotalOvertime button')
+  tabs.forEach((btnEl) => {
+    btnEl.addEventListener('click', () => {
+      tabs.forEach((b) => b.classList.remove('active'))
+      btnEl.classList.add('active')
+      render(btnEl.dataset.type)
+    })
+  })
 
-  const now = new Date()
-  const curKey = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
-  const prev = new Date(now)
-  prev.setMonth(prev.getMonth() - 1)
-  const prevKey = `${prev.getFullYear()}-${String(prev.getMonth() + 1).padStart(2, '0')}`
+  // 点击事件：展示该作者在该周期的加班详情（过滤出下班/凌晨提交）
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabsTotalOvertime button.active')?.dataset
+          .type || 'daily'
+
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+        const h = d.getHours()
+        const isOT =
+          (h >= endHour && h < 24) || (h >= 0 && h < cutoff && h < startHour)
+        if (!isOT) return false
+
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        if (type === 'monthly') {
+          const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+          return month === label
+        }
+        // yearly
+        const year = String(d.getFullYear())
+        return year === label
+      })
 
-  const monthMax = new Map()
-  commits.forEach((c) => {
-    const d = new Date(c.date)
-    if (Number.isNaN(d.valueOf())) return
-    const h = d.getHours()
-    let overtime = null
-    if (h >= endHour && h < 24) overtime = h - endHour
-    else if (h >= 0 && h < cutoff && h < startHour) overtime = 24 - endHour + h
-    if (overtime == null) return
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
 
-    const mKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
-    if (!monthMax.has(mKey)) monthMax.set(mKey, new Map())
-    const m = monthMax.get(mKey)
-    const author = c.author || 'unknown'
-    const cur = m.get(author)
-    if (!cur || overtime > cur.max) {
-      m.set(author, { max: overtime, date: d.toISOString().slice(0, 10) })
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 累计加班 本周详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 累计加班 ${type} 详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Total overtime chart click handler error', err)
     }
   })
 
-  const curMap = monthMax.get(curKey) || new Map()
-  const prevMap = monthMax.get(prevKey) || new Map()
+  return chart
+}
 
-  let topAuthor = null
-  let top = { max: -1, date: null }
-  curMap.forEach((v, k) => {
-    if (v.max > top.max) {
-      top = v
-      topAuthor = k
-    }
+/**
+ * 渲染作者加班时长分布饼图
+ * @param {Object} ds - 数据源
+ * @param {Number} topN - 饼图展示的前N名，默认10，设为0则展示全部（不推荐在饼图中设为0）
+ */
+function renderAuthorTotalOvertimeRank(ds, topN = 10) {
+  // FIXME: remove debug log before production
+  console.log('❌', 'ds', ds)
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) return
+
+  // 1. 数据预处理：计算每个作者的总时长
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author)
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { name: author, value: Number(total.toFixed(2)) }
   })
 
-  let prevMax = -1
-  prevMap.forEach((v) => {
-    if (v.max > prevMax) prevMax = v.max
-  })
+  // 2. 排序：从高到低
+  totals.sort((a, b) => b.value - a.value)
+
+  // 3. 核心逻辑：处理 topN 和 “其他” 逻辑
+  let chartData = []
+  if (topN > 0 && totals.length > topN) {
+    // 截取前 N 名
+    chartData = totals.slice(0, topN)
+    // 汇总剩余的为“其他”
+    const othersValue = totals
+      .slice(topN)
+      .reduce((sum, item) => sum + item.value, 0)
+    chartData.push({
+      name: '其他',
+      value: Number(othersValue.toFixed(2))
+    })
+  } else {
+    // topN 为 0 时展示全部
+    chartData = totals
+  }
 
-  const lines = []
-  lines.push('【本月最晚加班风险】')
+  // 4. 自适应颜色生成
+  const generateColors = (count) => {
+    const presets = [
+      '#5470c6',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc'
+    ]
+    if (count <= presets.length) return presets.slice(0, count)
 
-  if (top.max < 0) {
-    lines.push('本月尚无下班后/凌晨提交，未发现明显风险。')
-  } else {
-    let trend = '暂无上月对比'
-    if (prevMax >= 0) {
-      if (top.max > prevMax) trend = '较上月更晚'
-      else if (top.max < prevMax) trend = '较上月提前'
-      else trend = '与上月持平'
-    }
-    lines.push(
-      `${topAuthor} 本月最晚超出下班 ${top.max.toFixed(2)} 小时（${top.date}），${trend}。`
-    )
-    if (top.max >= 2) {
-      lines.push('已超过 2 小时，存在严重加班风险，请关注工作节奏。')
-    } else if (top.max >= 1) {
-      lines.push('已超过 1 小时，注意控制夜间工作时长。')
-    }
+    return chartData.map((_, i) => {
+      if (i < presets.length) return presets[i]
+      // 超过预设后，动态生成 HSL 颜色
+      return `hsl(${(i * 137.5) % 360}, 60%, 65%)` // 使用黄金角度 137.5 确保颜色分布均匀
+    })
   }
 
-  box.innerHTML = `
-    <div class="risk-summary">
-      <div class="risk-title">【本月最晚加班风险】</div>
-      <ul>
-        ${lines
-          .slice(1)
-          .map((l) => `<li>${escapeHtml(l)}</li>`)
-          .join('')}
-      </ul>
-    </div>
-  `
+  // 5. 调用现有绘图方法
+  return drawPieWithTotal({
+    el: 'authorTotalOvertimeRankSummary',
+    title: '加班总时长排名分布',
+    unit: '小时',
+    totalLabel: '总时长',
+    data: chartData,
+    colors: generateColors(chartData.length)
+  })
 }
 
-async function main() {
-  const {
-    commits,
-    stats,
-    weekly,
-    monthly,
-    latestByDay,
-    config,
-    authorChanges
-  } = await loadData()
+// 渲染累计加班排名（chart 下方）
+function renderAuthorTotalOvertimeRankFromDs(ds, topN = 20) {
+  const box = document.getElementById('authorTotalOvertimeRank')
+  if (!box) return
+
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) {
+    box.innerHTML = '<div style="color:#777">暂无加班时长数据</div>'
+    return
+  }
+
+  // 1. 建立索引映射 (O(n) 性能优化)
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author)
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { author, total }
+  })
+
+  // 2. 排序
+  totals.sort(
+    (x, y) =>
+      y.total - x.total || String(x.author).localeCompare(String(y.author))
+  )
+
+  // 3. 处理 topN 为 0 输出全部的逻辑
+  const top = topN > 0 ? totals.slice(0, topN) : totals
+  const count = top.length
+
+  // 4. 动态生成颜色函数 (自适应任意长度)
+  const getColor = (index, totalCount) => {
+    const presetColors = [
+      '#1976d2',
+      '#00a76f',
+      '#fb8c00',
+      '#d32f2f',
+      '#6a1b9a',
+      '#00897b',
+      '#ef5350',
+      '#ffa000',
+      '#5c6bc0',
+      '#43a047'
+    ]
+
+    if (index < presetColors.length && totalCount <= presetColors.length) {
+      return presetColors[index]
+    }
+
+    const hue = (index * (360 / totalCount) + 200) % 360
+    return `hsl(${hue}, 65%, 50%)`
+  }
+
+  const safeEscape = (str) =>
+    typeof escapeHtml === 'function'
+      ? escapeHtml(str)
+      : String(str).replace(
+          /[&<>"']/g,
+          (m) =>
+            ({
+              '&': '&amp;',
+              '<': '&lt;',
+              '>': '&gt;',
+              '"': '&quot;',
+              "'": '&#39;'
+            })[m]
+        )
+
+  // 5. 计算统计区间（显示总体覆盖范围）
+  let rangeStr = ''
+  if (Array.isArray(ds.allPeriods) && ds.allPeriods.length) {
+    const first = ds.allPeriods[0]
+    const last = ds.allPeriods[ds.allPeriods.length - 1]
+    const activeType =
+      document.querySelector('#tabsTotalOvertime button.active')?.dataset
+        .type || 'daily'
+
+    const periodToDate = (p, type) => {
+      if (type === 'daily') return p
+      if (type === 'weekly' && p.includes('-W')) {
+        const [yy, ww] = p.split('-W')
+        const r = getISOWeekRange(Number(yy), Number(ww))
+        return `${r.start} ~ ${r.end}`
+      }
+      if (type === 'monthly') {
+        const [y, m] = p.split('-')
+        const start = `${y}-${m}-01`
+        const end = new Date(Number(y), Number(m), 0)
+        const endStr = formatDateYMD(end)
+        return `${start} ~ ${endStr}`
+      }
+      if (type === 'yearly') return `${p}-01-01 ~ ${p}-12-31`
+      return p
+    }
+
+    try {
+      const firstRange = periodToDate(first, activeType)
+      const lastRange = periodToDate(last, activeType)
+      // If daily, show start ~ end concisely
+      if (activeType === 'daily')
+        rangeStr = `统计区间：${firstRange} ~ ${lastRange}`
+      else rangeStr = `统计区间：${firstRange} —— ${lastRange}`
+      rangeStr = `<div style="color:#666;margin-bottom:6px;font-size:13px">${rangeStr}</div>`
+    } catch (e) {
+      rangeStr = ''
+    }
+  }
+
+  // 6. 奖牌与序号逻辑
+  const medal = (i) =>
+    i === 0 ? '🥇 ' : i === 1 ? '🥈 ' : i === 2 ? '🥉 ' : `${i + 1}. `
+
+  // Prefer ds.totals if available
+  let totalsList = Array.isArray(ds.totals)
+    ? ds.totals.map((t) => ({
+        author: t.author,
+        totalHours: t.totalHours,
+        days: t.days,
+        avg: t.avg
+      }))
+    : null
+  if (!totalsList) {
+    const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+    totalsList = ds.authors.map((author) => {
+      const data = seriesMap.get(author)
+      const total = Array.isArray(data)
+        ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+        : 0
+      return { author, totalHours: Number(total.toFixed(2)), days: 0, avg: 0 }
+    })
+  }
+
+  // 7. 渲染页面（header + 列表），并显示占用天数 & 平均小时，title hover 提示
+  const listHtml = count
+    ? top
+        .map((t, i) => {
+          const info = totalsList.find((x) => x.author === t.author) || {}
+          const total = Number((info.totalHours ?? t.total ?? 0).toFixed(2))
+          const days = info.days ?? 0
+          const avg =
+            info.avg ?? (days > 0 ? Number((total / days).toFixed(2)) : 0)
+          const title = `累计时长：${total} 小时\n占用天数：${days} 天\n平均每日：${avg} 小时`
+          return `
+    <div class="rank-item" title="${title}" style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span class="dot" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background:${getColor(i, count)}"></span>
+      <span class="author" style="flex: 1;">
+        ${medal(i)}${safeEscape(t.author)}
+        <div style="font-size:12px;color:#666;margin-top:2px">占用天数: ${days} 天 · 平均: ${avg} 小时</div>
+      </span>
+      <span class="hours" style="font-weight: bold;">${Number(total).toFixed(2)} 小时</span>
+    </div>
+  `
+        })
+        .join('')
+    : '<div style="color:#777">暂无加班时长数据</div>'
+
+  box.innerHTML = `${rangeStr}${listHtml}`
+}
+
+// ====== 开发者 累计提交Changed（按日/周/月/年累计 Changed 行数） ======
+function buildAuthorTotalCommitsChangedDataset(commits, type) {
+  const byAuthorPeriod = new Map()
+  const periods = new Set()
+
+  commits.forEach((c) => {
+    const author = c.author || 'unknown'
+    const changed = Number(c.changed) || 0
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+
+    let period
+    if (type === 'daily') period = d.toISOString().slice(0, 10)
+    else if (type === 'weekly') period = getIsoWeekKey(d.toISOString())
+    else if (type === 'monthly')
+      period = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    else if (type === 'yearly') period = String(d.getFullYear())
+    else period = d.toISOString().slice(0, 10)
+
+    periods.add(period)
+    if (!byAuthorPeriod.has(author)) byAuthorPeriod.set(author, {})
+    const obj = byAuthorPeriod.get(author)
+    obj[period] = (obj[period] || 0) + changed
+  })
+
+  const allPeriods = Array.from(periods).sort()
+  const authors = Array.from(byAuthorPeriod.keys()).sort()
+  const series = authors.map((a) => ({
+    name: a,
+    type: 'line',
+    smooth: true,
+    data: allPeriods.map((p) =>
+      Number((byAuthorPeriod.get(a)[p] || 0).toFixed(2))
+    )
+  }))
+
+  const totals = authors.map((a) => {
+    const periodObj = byAuthorPeriod.get(a) || {}
+    const totalChanged = Object.values(periodObj).reduce(
+      (s, v) => s + (Number(v) || 0),
+      0
+    )
+    const days = Object.keys(periodObj).length
+    const avg = days > 0 ? Number((totalChanged / days).toFixed(2)) : 0
+    return {
+      author: a,
+      totalChanged: Number(totalChanged.toFixed(2)),
+      days,
+      avg
+    }
+  })
+
+  return { authors, allPeriods, series, totals }
+}
+
+function drawAuthorTotalCommitsChangedTrends(commits) {
+  const el = document.getElementById('chartAuthorTotalCommitsChanged')
+  if (!el) return null
+  // FIXME: remove debug log before production
+  console.log('❌', 'window.__config', window.__config)
+  if (!window.__config.git.numstat) {
+
+    document.getElementById('totalCommitsChangedCard').style.display = 'none'
+    document.getElementById('totalCommitsChangedRankSection').style.display = 'none'
+    return null
+  }
+  const chart = echarts.init(el)
+  chartInstances.push(chart)
+
+  function render(type) {
+    const ds = buildAuthorTotalCommitsChangedDataset(commits, type)
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        formatter(params) {
+          if (!params || !params.length) return ''
+          const label = params[0].axisValue
+          const lines = params
+            .filter((i) => i.data > 0)
+            .sort((a, b) => (b.data || 0) - (a.data || 0))
+            .map((item) => `${item.marker}${item.seriesName}: ${item.data} 行`)
+            .join('<br/>')
+          return `<div>${label}</div>${lines}`
+        }
+      },
+      legend: { data: ds.authors },
+      xAxis: { type: 'category', data: ds.allPeriods },
+      yAxis: { type: 'value', name: 'Changed 行数' },
+      series: ds.series
+    })
+
+    try {
+      renderAuthorTotalCommitsChangedRankFromDs(ds, 0)
+      renderAuthorTotalCommitsChangedRank(ds, 0)
+    } catch (e) {
+      console.warn('更新累计提交Changed排名失败', e)
+    }
+  }
+
+  render('daily')
+
+  const tabs = document.querySelectorAll('#tabsTotalCommitsChanged button')
+  tabs.forEach((btnEl) => {
+    btnEl.addEventListener('click', () => {
+      tabs.forEach((b) => b.classList.remove('active'))
+      btnEl.classList.add('active')
+      render(btnEl.dataset.type)
+    })
+  })
+
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabsTotalCommitsChanged button.active')
+          ?.dataset.type || 'daily'
+
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        if (type === 'monthly') {
+          const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+          return month === label
+        }
+        const year = String(d.getFullYear())
+        return year === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} Changed 本周详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} Changed ${type} 详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Total commits changed chart click handler error', err)
+    }
+  })
+
+  return chart
+}
+
+function renderAuthorTotalCommitsChangedRank(ds, topN = 10) {
+  const el = document.getElementById('authorTotalCommitsChangedRankSummary')
+
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) return
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author)
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { name: author, value: Number(total.toFixed(2)) }
+  })
+  totals.sort((a, b) => b.value - a.value)
+
+  let chartData = []
+  if (topN > 0 && totals.length > topN) {
+    chartData = totals.slice(0, topN)
+    const othersValue = totals
+      .slice(topN)
+      .reduce((sum, item) => sum + item.value, 0)
+    chartData.push({ name: '其他', value: Number(othersValue.toFixed(2)) })
+  } else chartData = totals
+
+  // 4. 自适应颜色生成
+  const generateColors = (count) => {
+    const presets = [
+      '#5470c6',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc'
+    ]
+    if (count <= presets.length) return presets.slice(0, count)
+
+    return chartData.map((_, i) => {
+      if (i < presets.length) return presets[i]
+      // 超过预设后，动态生成 HSL 颜色
+      return `hsl(${(i * 137.5) % 360}, 60%, 65%)` // 使用黄金角度 137.5 确保颜色分布均匀
+    })
+  }
+
+  return drawPieWithTotal({
+    el,
+    title: '提交Changed排名分布',
+    unit: '行',
+    totalLabel: '总行数',
+    data: chartData,
+    colors: generateColors(chartData.length)
+  })
+}
+
+function renderAuthorTotalCommitsChangedRankFromDs(ds, topN = 20) {
+  const box = document.getElementById('authorTotalCommitsChangedRank')
+  if (!box) return
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) {
+    box.innerHTML = '<div style="color:#777">暂无提交Changed数据</div>'
+    return
+  }
+
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author) || []
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { author, total }
+  })
+
+  totals.sort(
+    (x, y) =>
+      y.total - x.total || String(x.author).localeCompare(String(y.author))
+  )
+
+  const top = topN > 0 ? totals.slice(0, topN) : totals
+  const count = top.length
+
+  const getColor = (index, totalCount) => {
+    const presetColors = [
+      '#1976d2',
+      '#00a76f',
+      '#fb8c00',
+      '#d32f2f',
+      '#6a1b9a',
+      '#00897b',
+      '#ef5350',
+      '#ffa000',
+      '#5c6bc0',
+      '#43a047'
+    ]
+    if (index < presetColors.length && totalCount <= presetColors.length)
+      return presetColors[index]
+    const hue = (index * (360 / totalCount) + 200) % 360
+    return `hsl(${hue}, 65%, 50%)`
+  }
+
+  const safeEscape = (str) =>
+    typeof escapeHtml === 'function' ? escapeHtml(str) : String(str)
+
+  let rangeStr = ''
+  if (Array.isArray(ds.allPeriods) && ds.allPeriods.length) {
+    const first = ds.allPeriods[0]
+    const last = ds.allPeriods[ds.allPeriods.length - 1]
+    const activeType =
+      document.querySelector('#tabsTotalCommitsChanged button.active')?.dataset
+        .type || 'daily'
+
+    const periodToDate = (p, type) => {
+      if (type === 'daily') return p
+      if (type === 'weekly' && p.includes('-W')) {
+        const [yy, ww] = p.split('-W')
+        const r = getISOWeekRange(Number(yy), Number(ww))
+        return `${r.start} ~ ${r.end}`
+      }
+      if (type === 'monthly') {
+        const [y, m] = p.split('-')
+        const start = `${y}-${m}-01`
+        const end = new Date(Number(y), Number(m), 0)
+        const endStr = formatDateYMD(end)
+        return `${start} ~ ${endStr}`
+      }
+      if (type === 'yearly') return `${p}-01-01 ~ ${p}-12-31`
+      return p
+    }
+
+    try {
+      const firstRange = periodToDate(first, activeType)
+      const lastRange = periodToDate(last, activeType)
+      if (activeType === 'daily')
+        rangeStr = `统计区间：${firstRange} ~ ${lastRange}`
+      else rangeStr = `统计区间：${firstRange} —— ${lastRange}`
+      rangeStr = `<div style="color:#666;margin-bottom:6px;font-size:13px">${rangeStr}</div>`
+    } catch (e) {
+      rangeStr = ''
+    }
+  }
+
+  const medal = (i) =>
+    i === 0 ? '🥇 ' : i === 1 ? '🥈 ' : i === 2 ? '🥉 ' : `${i + 1}. `
+
+  let totalsList = Array.isArray(ds.totals)
+    ? ds.totals.map((t) => ({
+        author: t.author,
+        totalChanged: t.totalChanged,
+        days: t.days,
+        avg: t.avg
+      }))
+    : null
+  if (!totalsList) {
+    totalsList = totals.map((t) => ({
+      author: t.author,
+      totalChanged: Number((t.total || 0).toFixed(2)),
+      days: 0,
+      avg: 0
+    }))
+  }
+
+  const listHtml = count
+    ? top
+        .map((t, i) => {
+          const info = totalsList.find((x) => x.author === t.author) || {}
+          const total = Number((info.totalChanged ?? t.total ?? 0).toFixed(2))
+          const days = info.days ?? 0
+          const avg =
+            info.avg ?? (days > 0 ? Number((total / days).toFixed(2)) : 0)
+          const title = `累计Changed：${total} 行\n占用天数：${days} 天\n平均每日：${avg} 行`
+          return `
+    <div class="rank-item" title="${title}" style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span class="dot" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background:${getColor(i, count)}"></span>
+      <span class="author" style="flex: 1;">
+        ${medal(i)}${safeEscape(t.author)}
+        <div style="font-size:12px;color:#666;margin-top:2px">占用天数: ${days} 天 · 平均: ${avg} 行</div>
+      </span>
+      <span class="hours" style="font-weight: bold;">${Number(total).toFixed(2)} 行</span>
+    </div>
+  `
+        })
+        .join('')
+    : '<div style="color:#777">暂无提交Changed数据</div>'
+
+  box.innerHTML = `${rangeStr}${listHtml}`
+}
+
+// 渲染作者午休累计时长分布饼图
+function renderAuthorTotalLunchTimeRank(ds, topN = 10) {
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) return
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author)
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { name: author, value: Number(total.toFixed(2)) }
+  })
+
+  // 4. 自适应颜色生成
+  const generateColors = (count) => {
+    const presets = [
+      '#5470c6',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc'
+    ]
+    if (count <= presets.length) return presets.slice(0, count)
+
+    return totals.map((_, i) => {
+      if (i < presets.length) return presets[i]
+      // 超过预设后，动态生成 HSL 颜色
+      return `hsl(${(i * 137.5) % 360}, 60%, 65%)` // 使用黄金角度 137.5 确保颜色分布均匀
+    })
+  }
+
+  // TODO: remove debug log before production
+  console.log('✅', 'totals', totals)
+  return drawPieWithTotal({
+    el: 'authorTotalLunchTimeRankSummary',
+    title: '午休累计时长排名分布',
+    unit: '小时',
+    totalLabel: '总时长',
+    data: totals,
+    colors: generateColors(totals.length)
+  })
+}
+
+// 渲染午休累计排名（chart 下方），含序号/奖牌与统计区间
+function renderAuthorTotalLunchTimeRankFromDs(ds, topN = 20) {
+  const box = document.getElementById('authorTotalLunchTimeRank')
+  if (!box) return
+
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) {
+    box.innerHTML = '<div style="color:#777">暂无午休累计时长数据</div>'
+    return
+  }
+
+  // Prefer ds.totals (contains days/avg) if available, otherwise compute totals from series
+  let totals = Array.isArray(ds.totals)
+    ? ds.totals.map((t) => ({
+        author: t.author,
+        totalHours: t.totalHours,
+        days: t.days,
+        avg: t.avg
+      }))
+    : null
+
+  if (!totals) {
+    const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+    totals = ds.authors.map((author) => {
+      const data = seriesMap.get(author) || []
+      const total = Array.isArray(data)
+        ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+        : 0
+      return { author, totalHours: Number(total.toFixed(2)), days: 0, avg: 0 }
+    })
+  }
+
+  totals.sort(
+    (x, y) =>
+      (y.totalHours || y.total || 0) - (x.totalHours || x.total || 0) ||
+      String(x.author).localeCompare(String(y.author))
+  )
+
+  const top = topN > 0 ? totals.slice(0, topN) : totals
+  const count = top.length
+
+  const getColor = (index, totalCount) => {
+    const presetColors = [
+      '#1976d2',
+      '#00a76f',
+      '#fb8c00',
+      '#d32f2f',
+      '#6a1b9a',
+      '#00897b',
+      '#ef5350',
+      '#ffa000',
+      '#5c6bc0',
+      '#43a047'
+    ]
+    if (index < presetColors.length && totalCount <= presetColors.length)
+      return presetColors[index]
+    const hue = (index * (360 / totalCount) + 200) % 360
+    return `hsl(${hue}, 65%, 50%)`
+  }
+
+  const safeEscape = (str) =>
+    typeof escapeHtml === 'function'
+      ? escapeHtml(str)
+      : String(str).replace(
+          /[&<>"']/g,
+          (m) =>
+            ({
+              '&': '&amp;',
+              '<': '&lt;',
+              '>': '&gt;',
+              '"': '&quot;',
+              "'": '&#39;'
+            })[m]
+        )
+
+  let rangeStr = ''
+  if (Array.isArray(ds.allPeriods) && ds.allPeriods.length) {
+    const first = ds.allPeriods[0]
+    const last = ds.allPeriods[ds.allPeriods.length - 1]
+    const activeType =
+      document.querySelector('#tabsTotalLunchTime button.active')?.dataset
+        .type || 'daily'
+
+    const periodToDate = (p, type) => {
+      if (type === 'daily') return p
+      if (type === 'weekly' && p.includes('-W')) {
+        const [yy, ww] = p.split('-W')
+        const r = getISOWeekRange(Number(yy), Number(ww))
+        return `${r.start} ~ ${r.end}`
+      }
+      if (type === 'monthly') {
+        const [y, m] = p.split('-')
+        const start = `${y}-${m}-01`
+        const end = new Date(Number(y), Number(m), 0)
+        const endStr = formatDateYMD(end)
+        return `${start} ~ ${endStr}`
+      }
+      if (type === 'yearly') return `${p}-01-01 ~ ${p}-12-31`
+      return p
+    }
+
+    try {
+      const firstRange = periodToDate(first, activeType)
+      const lastRange = periodToDate(last, activeType)
+      if (activeType === 'daily')
+        rangeStr = `统计区间：${firstRange} ~ ${lastRange}`
+      else rangeStr = `统计区间：${firstRange} —— ${lastRange}`
+      rangeStr = `<div style="color:#666;margin-bottom:6px;font-size:13px">${rangeStr}</div>`
+    } catch (e) {
+      rangeStr = ''
+    }
+  }
+
+  const medal = (i) =>
+    i === 0 ? '🥇 ' : i === 1 ? '🥈 ' : i === 2 ? '🥉 ' : `${i + 1}. `
+
+  const listHtml = count
+    ? top
+        .map((t, i) => {
+          const total = Number((t.totalHours ?? t.total ?? 0).toFixed(2))
+          const days = t.days ?? 0
+          const avg =
+            t.avg ?? (days > 0 ? Number((total / days).toFixed(2)) : 0)
+          const title = `累计时长：${total} 小时\n占用天数：${days} 天\n平均每日：${avg} 小时`
+          return `
+    <div class="rank-item" title="${title}" style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span class="dot" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background:${getColor(i, count)}"></span>
+      <span class="author" style="flex: 1;">
+        ${medal(i)}${safeEscape(t.author)}
+        <div style="font-size:12px;color:#666;margin-top:2px">占用天数: ${days} 天 · 平均: ${avg} 小时</div>
+      </span>
+      <span class="hours" style="font-weight: bold;">${Number(total).toFixed(2)} 小时</span>
+    </div>
+  `
+        })
+        .join('')
+    : '<div style="color:#777">暂无午休累计时长数据</div>'
+
+  box.innerHTML = `${rangeStr}${listHtml}`
+}
+
+// ====== 开发者 累计提交次数（按日/周/月/年累计提交数） ======
+function buildAuthorTotalCommitsDataset(commits, type) {
+  const byAuthorPeriod = new Map()
+  const periods = new Set()
+
+  commits.forEach((c) => {
+    const author = c.author || 'unknown'
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+
+    let period
+    if (type === 'daily') period = d.toISOString().slice(0, 10)
+    else if (type === 'weekly') period = getIsoWeekKey(d.toISOString())
+    else if (type === 'monthly')
+      period = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    else if (type === 'yearly') period = String(d.getFullYear())
+    else period = d.toISOString().slice(0, 10)
+
+    periods.add(period)
+    if (!byAuthorPeriod.has(author)) byAuthorPeriod.set(author, {})
+    const obj = byAuthorPeriod.get(author)
+    obj[period] = (obj[period] || 0) + 1
+  })
+
+  const allPeriods = Array.from(periods).sort()
+  const authors = Array.from(byAuthorPeriod.keys()).sort()
+  const series = authors.map((a) => ({
+    name: a,
+    type: 'line',
+    smooth: true,
+    data: allPeriods.map((p) => byAuthorPeriod.get(a)[p] || 0)
+  }))
+
+  const totals = authors.map((a) => {
+    const periodObj = byAuthorPeriod.get(a) || {}
+    const totalCommits = Object.values(periodObj).reduce(
+      (s, v) => s + (Number(v) || 0),
+      0
+    )
+    const days = Object.keys(periodObj).length
+    const avg = days > 0 ? Number((totalCommits / days).toFixed(2)) : 0
+    return { author: a, totalCommits, days, avg }
+  })
+
+  return { authors, allPeriods, series, totals }
+}
+
+function drawAuthorTotalCommitsTrends(commits) {
+  const el = document.getElementById('chartAuthorTotalCommits')
+  if (!el) return null
+  const chart = echarts.init(el)
+  chartInstances.push(chart)
+
+  function render(type) {
+    const ds = buildAuthorTotalCommitsDataset(commits, type)
+
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        formatter(params) {
+          if (!params || !params.length) return ''
+          const label = params[0].axisValue
+          const lines = params
+            .filter((i) => i.data > 0)
+            .sort((a, b) => (b.data || 0) - (a.data || 0))
+            .map((item) => `${item.marker}${item.seriesName}: ${item.data} 次`)
+            .join('<br/>')
+          return `<div>${label}</div>${lines}`
+        }
+      },
+      legend: { data: ds.authors },
+      xAxis: { type: 'category', data: ds.allPeriods },
+      yAxis: { type: 'value', name: '提交次数' },
+      series: ds.series
+    })
+
+    try {
+      renderAuthorTotalCommitsRankFromDs(ds, 0)
+      renderAuthorTotalCommitsRank(ds, 0)
+    } catch (e) {
+      console.warn('更新累计提交排名失败', e)
+    }
+  }
+
+  render('daily')
+
+  const tabs = document.querySelectorAll('#tabsTotalCommits button')
+  tabs.forEach((btnEl) => {
+    btnEl.addEventListener('click', () => {
+      tabs.forEach((b) => b.classList.remove('active'))
+      btnEl.classList.add('active')
+      render(btnEl.dataset.type)
+    })
+  })
+
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabsTotalCommits button.active')?.dataset
+          .type || 'daily'
+
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        if (type === 'monthly') {
+          const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+          return month === label
+        }
+        const year = String(d.getFullYear())
+        return year === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 提交 本周详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 提交 ${type} 详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Total commits chart click handler error', err)
+    }
+  })
+
+  return chart
+}
+
+function renderAuthorTotalCommitsRank(ds, topN = 10) {
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) return
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author)
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { name: author, value: Number(total.toFixed(0)) }
+  })
+  totals.sort((a, b) => b.value - a.value)
+
+  let chartData = []
+  if (topN > 0 && totals.length > topN) {
+    chartData = totals.slice(0, topN)
+    const othersValue = totals
+      .slice(topN)
+      .reduce((sum, item) => sum + item.value, 0)
+    chartData.push({ name: '其他', value: Number(othersValue.toFixed(0)) })
+  } else chartData = totals
+
+  // 4. 自适应颜色生成
+  const generateColors = (count) => {
+    const presets = [
+      '#5470c6',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc'
+    ]
+    if (count <= presets.length) return presets.slice(0, count)
+
+    return chartData.map((_, i) => {
+      if (i < presets.length) return presets[i]
+      // 超过预设后，动态生成 HSL 颜色
+      return `hsl(${(i * 137.5) % 360}, 60%, 65%)` // 使用黄金角度 137.5 确保颜色分布均匀
+    })
+  }
+
+  // FIXME: remove debug log before production
+  console.log('❌', 'chartData', chartData)
+  return drawPieWithTotal({
+    el: 'authorTotalCommitsRankSummary',
+    title: '提交次数排名分布',
+    unit: '次',
+    totalLabel: '总提交',
+    data: chartData,
+    colors: generateColors(totals.length)
+  })
+}
+
+function renderAuthorTotalCommitsRankFromDs(ds, topN = 20) {
+  const box = document.getElementById('authorTotalCommitsRank')
+  if (!box) return
+  if (!ds || !Array.isArray(ds.authors) || !Array.isArray(ds.series)) {
+    box.innerHTML = '<div style="color:#777">暂无提交次数数据</div>'
+    return
+  }
+
+  const seriesMap = new Map(ds.series.map((s) => [s.name, s.data]))
+  const totals = ds.authors.map((author) => {
+    const data = seriesMap.get(author) || []
+    const total = Array.isArray(data)
+      ? data.reduce((sum, v) => sum + (Number(v) || 0), 0)
+      : 0
+    return { author, total }
+  })
+
+  totals.sort(
+    (x, y) =>
+      y.total - x.total || String(x.author).localeCompare(String(y.author))
+  )
+
+  const top = topN > 0 ? totals.slice(0, topN) : totals
+  const count = top.length
+
+  const getColor = (index, totalCount) => {
+    const presetColors = [
+      '#1976d2',
+      '#00a76f',
+      '#fb8c00',
+      '#d32f2f',
+      '#6a1b9a',
+      '#00897b',
+      '#ef5350',
+      '#ffa000',
+      '#5c6bc0',
+      '#43a047'
+    ]
+    if (index < presetColors.length && totalCount <= presetColors.length)
+      return presetColors[index]
+    const hue = (index * (360 / totalCount) + 200) % 360
+    return `hsl(${hue}, 65%, 50%)`
+  }
+
+  const safeEscape = (str) =>
+    typeof escapeHtml === 'function' ? escapeHtml(str) : String(str)
+
+  let rangeStr = ''
+  if (Array.isArray(ds.allPeriods) && ds.allPeriods.length) {
+    const first = ds.allPeriods[0]
+    const last = ds.allPeriods[ds.allPeriods.length - 1]
+    const activeType =
+      document.querySelector('#tabsTotalCommits button.active')?.dataset.type ||
+      'daily'
+
+    const periodToDate = (p, type) => {
+      if (type === 'daily') return p
+      if (type === 'weekly' && p.includes('-W')) {
+        const [yy, ww] = p.split('-W')
+        const r = getISOWeekRange(Number(yy), Number(ww))
+        return `${r.start} ~ ${r.end}`
+      }
+      if (type === 'monthly') {
+        const [y, m] = p.split('-')
+        const start = `${y}-${m}-01`
+        const end = new Date(Number(y), Number(m), 0)
+        const endStr = formatDateYMD(end)
+        return `${start} ~ ${endStr}`
+      }
+      if (type === 'yearly') return `${p}-01-01 ~ ${p}-12-31`
+      return p
+    }
+
+    try {
+      const firstRange = periodToDate(first, activeType)
+      const lastRange = periodToDate(last, activeType)
+      if (activeType === 'daily')
+        rangeStr = `统计区间：${firstRange} ~ ${lastRange}`
+      else rangeStr = `统计区间：${firstRange} —— ${lastRange}`
+      rangeStr = `<div style="color:#666;margin-bottom:6px;font-size:13px">${rangeStr}</div>`
+    } catch (e) {
+      rangeStr = ''
+    }
+  }
+
+  const medal = (i) =>
+    i === 0 ? '🥇 ' : i === 1 ? '🥈 ' : i === 2 ? '🥉 ' : `${i + 1}. `
+
+  let totalsList = Array.isArray(ds.totals)
+    ? ds.totals.map((t) => ({
+        author: t.author,
+        totalCommits: t.totalCommits,
+        days: t.days,
+        avg: t.avg
+      }))
+    : null
+  if (!totalsList) {
+    totalsList = totals.map((t) => ({
+      author: t.author,
+      totalCommits: Number((t.total || 0).toFixed(0)),
+      days: 0,
+      avg: 0
+    }))
+  }
+
+  const listHtml = count
+    ? top
+        .map((t, i) => {
+          const info = totalsList.find((x) => x.author === t.author) || {}
+          const total = Number((info.totalCommits ?? t.total ?? 0).toFixed(0))
+          const days = info.days ?? 0
+          const avg =
+            info.avg ?? (days > 0 ? Number((total / days).toFixed(2)) : 0)
+          const title = `累计提交：${total} 次\n占用天数：${days} 天\n平均每日：${avg} 次`
+          return `
+    <div class="rank-item" title="${title}" style="display: flex; align-items: center; margin-bottom: 8px;">
+      <span class="dot" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background:${getColor(i, count)}"></span>
+      <span class="author" style="flex: 1;">
+        ${medal(i)}${safeEscape(t.author)}
+        <div style="font-size:12px;color:#666;margin-top:2px">占用天数: ${days} 天 · 平均: ${avg} 次</div>
+      </span>
+      <span class="hours" style="font-weight: bold;">${Number(total).toFixed(0)} 次</span>
+    </div>
+  `
+        })
+        .join('')
+    : '<div style="color:#777">暂无提交次数数据</div>'
+
+  box.innerHTML = `${rangeStr}${listHtml}`
+}
+
+// ========= 开发者 午休最晚提交（小时） =========
+function buildAuthorLunchDataset(
+  commits,
+  type,
+  lunchStart = 12,
+  lunchEnd = 14
+) {
+  const byAuthor = new Map()
+  const periods = new Set()
+
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    const m = d.getMinutes()
+    // 只考虑午休时间段内的提交
+    if (!(h >= lunchStart && h < lunchEnd)) return
+
+    let key
+    if (type === 'daily') key = d.toISOString().slice(0, 10)
+    else if (type === 'weekly')
+      key = getIsoWeekKey(d.toISOString().slice(0, 10))
+    else key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    if (!key) return
+    periods.add(key)
+
+    const author = c.author || 'unknown'
+    if (!byAuthor.has(author)) byAuthor.set(author, {})
+    const obj = byAuthor.get(author)
+    // 以小时小数表示提交时间（例如 12.5 表示 12:30），后者越大表示越靠近午休结束
+    const hourDecimal = h + m / 60
+    obj[key] = Math.max(obj[key] || 0, hourDecimal)
+  })
+
+  const allPeriods = Array.from(periods).sort()
+  const authors = Array.from(byAuthor.keys()).sort()
+  const series = authors.map((a) => ({
+    name: a,
+    type: 'line',
+    smooth: true,
+    data: allPeriods.map((p) => byAuthor.get(a)[p] || 0)
+  }))
+  return { authors, allPeriods, series }
+}
+
+function formatHourDecimal(h) {
+  if (h == null || h === 0) return '-'
+  const hh = Math.floor(h)
+  const mm = Math.round((h - hh) * 60)
+  return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`
+}
+
+function drawAuthorLunchTrends(commits, stats) {
+  const el = document.getElementById('chartAuthorLunch')
+  if (!el) return null
+  const chart = echarts.init(el)
+  chartInstances.push(chart)
+
+  const lunchStart =
+    typeof stats.lunchStart === 'number'
+      ? stats.lunchStart
+      : (window.__lunchStart ?? 12)
+  const lunchEnd =
+    typeof stats.lunchEnd === 'number'
+      ? stats.lunchEnd
+      : (window.__lunchEnd ?? 14)
+
+  function render(type) {
+    const ds = buildAuthorLunchDataset(commits, type, lunchStart, lunchEnd)
+    ds.rangeMap = {}
+    for (const period of ds.allPeriods) {
+      if (period.includes('-W')) {
+        const [yy, ww] = period.split('-W')
+        ds.rangeMap[period] = getISOWeekRange(Number(yy), Number(ww))
+      }
+    }
+
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        formatter(params) {
+          if (!params || !params.length) return ''
+          const label = params[0].axisValue
+          const isWeekly = type === 'weekly'
+
+          let extra = ''
+          if (isWeekly && ds.rangeMap && ds.rangeMap[label]) {
+            const { start, end } = ds.rangeMap[label]
+            extra = `<div style="margin-top:4px;color:#999;font-size:12px">周区间：${start} ~ ${end}</div>`
+          }
+
+          const lines = params
+            .filter((i) => i.data > 0)
+            .sort(
+              (a, b) =>
+                (b.data || 0) - (a.data || 0) ||
+                String(a.seriesName).localeCompare(String(b.seriesName))
+            )
+            .map(
+              (item) =>
+                `${item.marker}${item.seriesName}: ${formatHourDecimal(item.data)}`
+            )
+            .join('<br/>')
+
+          return `<div>${label}</div>${extra}${lines}`
+        }
+      },
+      legend: { data: ds.authors },
+      xAxis: { type: 'category', data: ds.allPeriods },
+      yAxis: {
+        type: 'value',
+        name: '时间（小时）',
+        min: lunchStart,
+        max: lunchEnd
+      },
+      series: ds.series
+    })
+  }
+
+  render('daily')
+
+  const tabs = document.querySelectorAll('#tabsLunch button')
+  tabs.forEach((btnEl) => {
+    btnEl.addEventListener('click', () => {
+      tabs.forEach((b) => b.classList.remove('active'))
+      btnEl.classList.add('active')
+      render(btnEl.dataset.type)
+    })
+  })
+
+  renderLunchWeeklyRankSummary(commits, { lunchStart, lunchEnd })
+  renderLunchWeeklyRiskSummary(commits, { lunchStart, lunchEnd })
+  renderLunchMonthlyRankSummary(commits, { lunchStart, lunchEnd })
+  renderLunchMonthlyRiskSummary(commits, { lunchStart, lunchEnd })
+
+  // 点击事件：点击某个数据点（作者+周期）打开侧栏，展示该作者在该周期午休时间段内的提交明细
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+
+      // 识别当前 tabs 类型（daily|weekly|monthly）
+      const type =
+        document.querySelector('#tabsLunch button.active')?.dataset.type ||
+        'daily'
+
+      // 过滤 commits：作者匹配 + 在午休时间段内 + 在所选周期内
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+        const h = d.getHours()
+        const m = d.getMinutes()
+        if (!(h >= lunchStart && h < lunchEnd)) return false
+
+        if (type === 'daily') {
+          return d.toISOString().slice(0, 10) === label
+        }
+        if (type === 'weekly') {
+          // label 格式 YYYY-Www
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        // monthly
+        const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+        return month === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 午休本周提交详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 午休 ${type} 提交`
+        })
+      }
+    } catch (err) {
+      console.warn('Lunch chart click handler error', err)
+    }
+  })
+
+  return chart
+}
+
+// ========== 开发者 累计午休时长（按日/周/月/年累计每日午休占用时长求和） =========
+function buildAuthorTotalLunchTimeDataset(
+  commits,
+  type,
+  lunchStart = 12,
+  lunchEnd = 14
+) {
+  // 1. 先统计每位作者每天午休期间的最后一次提交时间（小时小数）
+  const byAuthorDay = new Map()
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    const m = d.getMinutes()
+    const hourDecimal = h + m / 60
+    // 仅关注午休时间段内的提交
+    if (!(hourDecimal >= lunchStart && hourDecimal < lunchEnd)) return
+
+    const author = c.author || 'unknown'
+    const day = d.toISOString().slice(0, 10)
+    if (!byAuthorDay.has(author)) byAuthorDay.set(author, new Map())
+    const dayMap = byAuthorDay.get(author)
+    const cur = dayMap.get(day) || 0
+    dayMap.set(day, Math.max(cur, hourDecimal))
+  })
+
+  // 2. 按周期（type）聚合，统计每一周期内的累计午休占用时长
+  const byAuthorPeriod = new Map()
+  const periods = new Set()
+
+  byAuthorDay.forEach((dayMap, author) => {
+    for (const [day, lastHour] of dayMap.entries()) {
+      let period
+      if (type === 'daily') period = day
+      else if (type === 'weekly') period = getIsoWeekKey(day)
+      else if (type === 'monthly') period = day.slice(0, 7)
+      else if (type === 'yearly') period = day.slice(0, 4)
+      else period = day
+      if (!period) continue
+      periods.add(period)
+      if (!byAuthorPeriod.has(author)) byAuthorPeriod.set(author, {})
+      const obj = byAuthorPeriod.get(author)
+      // 当天占用午休时长 = max(0, min(lastHour, lunchEnd) - lunchStart)
+      const capped = Math.min(lastHour, lunchEnd)
+      const duration = Math.max(0, capped - lunchStart)
+      obj[period] = (obj[period] || 0) + duration
+    }
+  })
+
+  const allPeriods = Array.from(periods).sort()
+  const authors = Array.from(byAuthorPeriod.keys()).sort()
+  const series = authors.map((a) => ({
+    name: a,
+    type: 'line',
+    smooth: true,
+    data: allPeriods.map((p) =>
+      Number((byAuthorPeriod.get(a)[p] || 0).toFixed(2))
+    )
+  }))
+
+  // 3. 计算每个作者的总时长/占用天数/日均占用，方便列表与 tooltip 使用
+  const totals = authors.map((a) => {
+    const periodObj = byAuthorPeriod.get(a) || {}
+    const totalHours = Object.values(periodObj).reduce(
+      (s, v) => s + (Number(v) || 0),
+      0
+    )
+    const days = byAuthorDay.get(a) ? byAuthorDay.get(a).size : 0
+    const avg = days > 0 ? Number((totalHours / days).toFixed(2)) : 0
+    return { author: a, totalHours: Number(totalHours.toFixed(2)), days, avg }
+  })
+
+  return { authors, allPeriods, series, totals }
+}
+
+function drawAuthorTotalLunchTimeTrends(commits, stats) {
+  const el = document.getElementById('chartAuthorTotalLunchTime')
+  if (!el) return null
+  const chart = echarts.init(el)
+  chartInstances.push(chart)
+
+  const lunchStart =
+    typeof stats.lunchStart === 'number'
+      ? stats.lunchStart
+      : (window.__lunchStart ?? 12)
+  const lunchEnd =
+    typeof stats.lunchEnd === 'number'
+      ? stats.lunchEnd
+      : (window.__lunchEnd ?? 14)
+
+  function render(type) {
+    const ds = buildAuthorTotalLunchTimeDataset(
+      commits,
+      type,
+      lunchStart,
+      lunchEnd
+    )
+    ds.rangeMap = {}
+    for (const period of ds.allPeriods) {
+      if (period.includes('-W')) {
+        const [yy, ww] = period.split('-W')
+        ds.rangeMap[period] = getISOWeekRange(Number(yy), Number(ww))
+      }
+    }
+
+    chart.setOption({
+      tooltip: {
+        trigger: 'axis',
+        formatter(params) {
+          if (!params || !params.length) return ''
+          const label = params[0].axisValue
+          const isWeekly = type === 'weekly'
+
+          let extra = ''
+          if (isWeekly && ds.rangeMap && ds.rangeMap[label]) {
+            const { start, end } = ds.rangeMap[label]
+            extra = `<div style="margin-top:4px;color:#999;font-size:12px">周区间：${start} ~ ${end}</div>`
+          }
+
+          const lines = params
+            .filter((i) => i.data > 0)
+            .sort(
+              (a, b) =>
+                (b.data || 0) - (a.data || 0) ||
+                String(a.seriesName).localeCompare(String(b.seriesName))
+            )
+            .map(
+              (item) =>
+                `${item.marker}${item.seriesName}: ${Number(item.data).toFixed(2)} 小时`
+            )
+            .join('<br/>')
+
+          return `<div>${label}</div>${extra}${lines}`
+        }
+      },
+      legend: { data: ds.authors },
+      xAxis: { type: 'category', data: ds.allPeriods },
+      yAxis: { type: 'value', name: '累计午休工作时长 (小时)', min: 0 },
+      series: ds.series
+    })
+
+    // 更新排名与饼图
+    try {
+      renderAuthorTotalLunchTimeRankFromDs(ds, 0)
+      renderAuthorTotalLunchTimeRank(ds, 0)
+    } catch (e) {
+      console.warn('更新累计午休排名失败', e)
+    }
+  }
+
+  render('daily')
+
+  const tabs = document.querySelectorAll('#tabsTotalLunchTime button')
+  tabs.forEach((btnEl) => {
+    btnEl.addEventListener('click', () => {
+      tabs.forEach((b) => b.classList.remove('active'))
+      btnEl.classList.add('active')
+      render(btnEl.dataset.type)
+    })
+  })
+
+  chart.on('click', (p) => {
+    try {
+      if (!p || p.componentType !== 'series') return
+      const label = p.axisValue || p.name
+      const author = p.seriesName
+      if (!label || !author) return
+      const type =
+        document.querySelector('#tabsTotalLunchTime button.active')?.dataset
+          .type || 'daily'
+
+      const filteredCommits = commits.filter((c) => {
+        const a = c.author || 'unknown'
+        if (a !== author) return false
+        const d = new Date(c.date)
+        if (Number.isNaN(d.valueOf())) return false
+        const h = d.getHours()
+        const m = d.getMinutes()
+        const hourDecimal = h + m / 60
+        if (!(hourDecimal >= lunchStart && hourDecimal < lunchEnd)) return false
+
+        if (type === 'daily') return d.toISOString().slice(0, 10) === label
+        if (type === 'weekly') {
+          if (!label.includes('-W')) return false
+          const [yy, ww] = label.split('-W')
+          const range = getISOWeekRange(Number(yy), Number(ww))
+          const day = d.toISOString().slice(0, 10)
+          return day >= range.start && day <= range.end
+        }
+        if (type === 'monthly') {
+          const month = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+          return month === label
+        }
+        const year = String(d.getFullYear())
+        return year === label
+      })
+
+      filteredCommits.sort((a, b) => new Date(a.date) - new Date(b.date))
+
+      if (type === 'weekly') {
+        const weeklyItem = {
+          outsideWorkCount: filteredCommits.length,
+          outsideWorkRate: 0
+        }
+        showSideBarForWeek({
+          period: label,
+          weeklyItem,
+          commits: filteredCommits,
+          titleDrawer: `${author} 午休本周详情`
+        })
+      } else {
+        showDayDetailSidebar({
+          date: label,
+          count: filteredCommits.length,
+          commits: filteredCommits,
+          titleDrawer: `${author} 午休 ${type} 详情`
+        })
+      }
+    } catch (err) {
+      console.warn('Total lunch chart click handler error', err)
+    }
+  })
+
+  return chart
+}
+
+function renderLunchWeeklyRankSummary(
+  commits,
+  { lunchStart = 12, lunchEnd = 14 } = {}
+) {
+  const box = document.getElementById('lunchWeeklyRankSummary')
+  if (!box) return
+
+  const now = new Date()
+  const curKey = getIsoWeekKey(now.toISOString().slice(0, 10))
+
+  const weekDays = new Map() // week -> Map(author -> Set(dates))
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    const m = d.getMinutes()
+    if (!(h >= lunchStart && h < lunchEnd)) return
+    const wKey = getIsoWeekKey(d.toISOString().slice(0, 10))
+    if (wKey !== curKey) return
+    const author = c.author || 'unknown'
+    if (!weekDays.has(author)) weekDays.set(author, new Set())
+    weekDays.get(author).add(d.toISOString().slice(0, 10))
+  })
+
+  const weeklyRanks = []
+  weekDays.forEach((set, author) => {
+    weeklyRanks.push({ author, days: set.size })
+  })
+  weeklyRanks.sort(
+    (a, b) =>
+      b.days - a.days || String(a.author).localeCompare(String(b.author))
+  )
+
+  const lines = []
+  lines.push('【本周午休清醒者排行榜】')
+  if (weeklyRanks.length === 0) {
+    lines.push('本周无人午休提交，暂无清醒者排行榜。')
+  } else {
+    weeklyRanks.forEach((r, idx) => {
+      const rank = idx + 1
+      const medal =
+        rank === 1 ? '🥇 ' : rank === 2 ? '🥈 ' : rank === 3 ? '🥉 ' : ''
+      const title = rank === 1 ? '（状元・昼魔侠）' : ''
+      lines.push(`${rank}. ${medal}${r.author} — ${r.days} 天${title}`)
+    })
+  }
+
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本周午休清醒者排行榜】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+  `
+}
+
+function renderLunchWeeklyRiskSummary(
+  commits,
+  { lunchStart = 12, lunchEnd = 14 } = {}
+) {
+  const box = document.getElementById('lunchWeeklyRiskSummary')
+  if (!box) return
+
+  const now = new Date()
+  const curKey = getIsoWeekKey(now.toISOString().slice(0, 10))
+  const prev = new Date(now)
+  prev.setDate(prev.getDate() - 7)
+  const prevKey = getIsoWeekKey(prev.toISOString().slice(0, 10))
+
+  const weekMax = new Map() // week -> Map(author -> {val, date, time})
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    const m = d.getMinutes()
+    if (!(h >= lunchStart && h < lunchEnd)) return
+    const wKey = getIsoWeekKey(d.toISOString().slice(0, 10))
+    if (!wKey) return
+
+    if (!weekMax.has(wKey)) weekMax.set(wKey, new Map())
+    const mMap = weekMax.get(wKey)
+    const author = c.author || 'unknown'
+    const val = h + m / 60
+    const cur = mMap.get(author)
+    if (!cur || val > cur.val)
+      mMap.set(author, {
+        val,
+        date: d.toISOString().slice(0, 10),
+        time: `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+      })
+  })
+
+  const curMap = weekMax.get(curKey) || new Map()
+  const prevMap = weekMax.get(prevKey) || new Map()
+
+  let topAuthor = null
+  let top = { val: -1, date: null, time: null }
+  curMap.forEach((v, k) => {
+    if (v.val > top.val) {
+      top = v
+      topAuthor = k
+    }
+  })
+
+  let prevMax = -1
+  prevMap.forEach((v) => {
+    if (v.val > prevMax) prevMax = v.val
+  })
+
+  const lines = []
+  lines.push('【本周午休最晚提交风险】')
+
+  if (top.val < 0) {
+    lines.push('本周午休期间暂无提交记录。')
+  } else {
+    let trend = '暂无上周对比'
+    if (prevMax >= 0) {
+      if (top.val > prevMax) trend = '较上周更晚'
+      else if (top.val < prevMax) trend = '较上周提前'
+      else trend = '与上周持平'
+    }
+    lines.push(
+      `${topAuthor} 本周午休最晚提交：${top.time}（${top.date}），${trend}。）`
+    )
+    if (top.val >= lunchEnd - 0.5)
+      lines.push('存在午间延迟提交风险，请关注短时间内频繁占用午休。')
+  }
+
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本周午休最晚提交风险】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+  `
+}
+
+function renderLunchMonthlyRankSummary(
+  commits,
+  { lunchStart = 12, lunchEnd = 14 } = {}
+) {
+  const box = document.getElementById('lunchMonthlyRankSummary')
+  if (!box) return
+
+  const now = new Date()
+  const curKey = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+
+  const monthDays = new Map() // author -> Set(dates)
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    const m = d.getMinutes()
+    if (!(h >= lunchStart && h < lunchEnd)) return
+    const mKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    if (mKey !== curKey) return
+    const author = c.author || 'unknown'
+    if (!monthDays.has(author)) monthDays.set(author, new Set())
+    monthDays.get(author).add(d.toISOString().slice(0, 10))
+  })
+
+  const monthlyRanks = []
+  monthDays.forEach((set, author) => {
+    monthlyRanks.push({ author, days: set.size })
+  })
+  monthlyRanks.sort(
+    (a, b) =>
+      b.days - a.days || String(a.author).localeCompare(String(b.author))
+  )
+
+  const lines = []
+  lines.push('【本月午休清醒者排行榜】')
+  if (monthlyRanks.length === 0) {
+    lines.push('本月无人午休提交，暂无清醒者排行榜。')
+  } else {
+    monthlyRanks.forEach((r, idx) => {
+      const rank = idx + 1
+      const medal =
+        rank === 1 ? '🥇 ' : rank === 2 ? '🥈 ' : rank === 3 ? '🥉 ' : ''
+      const title = rank === 1 ? '（状元・昼魔侠）' : ''
+      lines.push(`${rank}. ${medal}${r.author} — ${r.days} 天${title}`)
+    })
+  }
+
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本月午休清醒者排行榜】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+  `
+}
+
+function renderLunchMonthlyRiskSummary(
+  commits,
+  { lunchStart = 12, lunchEnd = 14 } = {}
+) {
+  const box = document.getElementById('lunchMonthlyRiskSummary')
+  if (!box) return
+
+  const now = new Date()
+  const curKey = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+  const prev = new Date(now)
+  prev.setMonth(prev.getMonth() - 1)
+  const prevKey = `${prev.getFullYear()}-${String(prev.getMonth() + 1).padStart(2, '0')}`
+
+  const monthMax = new Map()
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (Number.isNaN(d.valueOf())) return
+    const h = d.getHours()
+    const m = d.getMinutes()
+    if (!(h >= lunchStart && h < lunchEnd)) return
+    const mKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    if (!monthMax.has(mKey)) monthMax.set(mKey, new Map())
+    const mm = monthMax.get(mKey)
+    const author = c.author || 'unknown'
+    const val = h + m / 60
+    const cur = mm.get(author)
+    if (!cur || val > cur.val)
+      mm.set(author, {
+        val,
+        date: d.toISOString().slice(0, 10),
+        time: `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
+      })
+  })
+
+  const curMap = monthMax.get(curKey) || new Map()
+  const prevMap = monthMax.get(prevKey) || new Map()
+
+  let topAuthor = null
+  let top = { val: -1, date: null }
+  curMap.forEach((v, k) => {
+    if (v.val > top.val) {
+      top = v
+      topAuthor = k
+    }
+  })
+
+  let prevMax = -1
+  prevMap.forEach((v) => {
+    if (v.val > prevMax) prevMax = v.val
+  })
+
+  const lines = []
+  lines.push('【本月午休最晚提交风险】')
+
+  if (top.val < 0) {
+    lines.push('本月午休期间暂无提交记录。')
+  } else {
+    let trend = '暂无上月对比'
+    if (prevMax >= 0) {
+      if (top.val > prevMax) trend = '较上月更晚'
+      else if (top.val < prevMax) trend = '较上月提前'
+      else trend = '与上月持平'
+    }
+    lines.push(
+      `${topAuthor} 本月午休最晚提交：${top.time}（${top.date}），${trend}。）`
+    )
+    if (top.val >= lunchEnd - 0.5)
+      lines.push('存在午间延迟提交风险，请关注短时间内频繁占用午休。')
+  }
+
+  box.innerHTML = `
+    <div class="risk-summary">
+      <div class="risk-title">【本月午休最晚提交风险】</div>
+      <ul>
+        ${lines
+          .slice(1)
+          .map((l) => `<li>${escapeHtml(l)}</li>`)
+          .join('')}
+      </ul>
+    </div>
+  `
+}
+
+// ====== 前端计算 overtime 数据的函数 ======
+
+/**
+ * 根据 commits 和配置计算小时加班统计
+ */
+function computeHourlyOvertime(commits, config) {
+  const startHour = config.startHour ?? 9
+  const endHour = config.endHour ?? 18
+  const lunchStart = config.lunchStart ?? 12
+  const lunchEnd = config.lunchEnd ?? 14
+
+  const hourlyCommits = Array(24).fill(0)
+  const hourlyOvertimeCommits = Array(24).fill(0)
+  const hourlyOvertimePercent = Array(24).fill(0)
+
+  let latestCommitHour = -1
+  let latestCommit = null
+  let total = 0
+  let outsideWorkCount = 0
+  let latestOutsideCommit = null
+  let latestOutsideCommitHour = -1
+
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (isNaN(d.getTime())) return
+
+    const h = d.getHours()
+    const m = d.getMinutes()
+
+    hourlyCommits[h]++
+    total++
+
+    // 更新最后一条提交
+    if (!latestCommit || new Date(c.date) > new Date(latestCommit.date)) {
+      latestCommit = c
+      latestCommitHour = h
+    }
+
+    // 判断是否加班：与后端保持一致——非工作时间即为加班
+    // 工作时间定义：startHour <= hour < endHour，且排除午休区间
+    const inWorkHours =
+      h >= startHour && h < endHour && !(h >= lunchStart && h < lunchEnd)
+    const isOvertime = !inWorkHours
+
+    if (isOvertime) {
+      hourlyOvertimeCommits[h]++
+      outsideWorkCount++
+      // 跟踪最晚的加班提交（按严重度：小时越大越晚）
+      if (!latestOutsideCommit) {
+        latestOutsideCommit = c
+        latestOutsideCommitHour = h
+      } else {
+        const curSev = h >= endHour ? h - endHour : 24 - endHour + h
+        const prevSev =
+          latestOutsideCommitHour >= endHour
+            ? latestOutsideCommitHour - endHour
+            : 24 - endHour + latestOutsideCommitHour
+        if (
+          curSev > prevSev ||
+          (curSev === prevSev &&
+            new Date(c.date) > new Date(latestOutsideCommit.date))
+        ) {
+          latestOutsideCommit = c
+          latestOutsideCommitHour = h
+        }
+      }
+    }
+  })
+
+  // 计算百分比
+  for (let i = 0; i < 24; i++) {
+    hourlyOvertimePercent[i] = total > 0 ? hourlyOvertimeCommits[i] / total : 0
+  }
+
+  return {
+    startHour,
+    endHour,
+    lunchStart,
+    lunchEnd,
+    hourlyOvertimeCommits,
+    hourlyOvertimePercent,
+    latestCommitHour,
+    latestCommit,
+    latestOutsideCommit,
+    latestOutsideCommitHour,
+    total,
+    outsideWorkCount,
+    outsideWorkRate: total > 0 ? outsideWorkCount / total : 0
+  }
+}
+
+/**
+ * 根据 commits 计算每周加班统计
+ */
+function computeWeeklyOvertime(
+  commits,
+  startHour,
+  endHour,
+  cutoff,
+  lunchStart,
+  lunchEnd
+) {
+  const weekMap = new Map()
+
+  // 第一步：按周分组统计加班提交
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    const h = d.getHours()
+
+    // 判断是否在工作时间（与后端保持一致）
+    // 工作时间是 startHour <= hour < endHour，但排除午休 lunchStart <= hour < lunchEnd
+    const inWorkHours =
+      h >= startHour && h < endHour && !(h >= lunchStart && h < lunchEnd)
+    const isOvertime = !inWorkHours
+    if (!isOvertime) return
+
+    const weekKey = getIsoWeekKey(d.toISOString().slice(0, 10))
+    if (!weekKey) return
+
+    if (!weekMap.has(weekKey)) {
+      weekMap.set(weekKey, {
+        period: weekKey,
+        outsideWorkCount: 0,
+        outsideWorkRate: 0,
+        range: { start: '', end: '' }
+      })
+    }
+
+    weekMap.get(weekKey).outsideWorkCount++
+  })
+
+  // 第二步：计算每周的总 commits 数以便计算比例
+  const totalByWeek = new Map()
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    const weekKey = getIsoWeekKey(d.toISOString().slice(0, 10))
+    if (weekKey) {
+      totalByWeek.set(weekKey, (totalByWeek.get(weekKey) || 0) + 1)
+    }
+  })
+
+  // 第三步：计算比例并填充周范围
+  const weekly = Array.from(weekMap.values())
+  weekly.forEach((w) => {
+    const total = totalByWeek.get(w.period) || 1
+    w.outsideWorkRate = w.outsideWorkCount / total
+
+    // 填充周的日期范围
+    const [yy, ww] = w.period.split('-W')
+    w.range = getISOWeekRange(Number(yy), Number(ww))
+  })
+
+  return weekly.sort((a, b) => a.period.localeCompare(b.period))
+}
+
+/**
+ * 根据 commits 计算每月加班统计
+ */
+function computeMonthlyOvertime(
+  commits,
+  startHour,
+  endHour,
+  cutoff,
+  lunchStart,
+  lunchEnd
+) {
+  const monthMap = new Map()
+
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    const h = d.getHours()
+
+    // 判断是否在工作时间（与后端保持一致）
+    const inWorkHours =
+      h >= startHour && h < endHour && !(h >= lunchStart && h < lunchEnd)
+    const isOvertime = !inWorkHours
+    if (!isOvertime) return
+
+    const monthKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+
+    if (!monthMap.has(monthKey)) {
+      monthMap.set(monthKey, {
+        period: monthKey,
+        outsideWorkCount: 0,
+        outsideWorkRate: 0
+      })
+    }
+
+    monthMap.get(monthKey).outsideWorkCount++
+  })
+
+  // 计算比例
+  const totalByMonth = new Map()
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    const monthKey = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+    totalByMonth.set(monthKey, (totalByMonth.get(monthKey) || 0) + 1)
+  })
+
+  const monthly = Array.from(monthMap.values())
+  monthly.forEach((m) => {
+    const total = totalByMonth.get(m.period) || 1
+    m.outsideWorkRate = m.outsideWorkCount / total
+  })
+
+  return monthly.sort((a, b) => a.period.localeCompare(b.period))
+}
+
+/**
+ * 根据 commits 计算每日最晚提交时间（所有工作时间外提交的最晚时刻）
+ * 与后端逻辑保持一致：只看小时部分，忽略分钟
+ */
+function computeLatestByDay(
+  commits,
+  startHour,
+  endHour,
+  cutoff,
+  lunchStart,
+  lunchEnd
+) {
+  const cutoffHour = cutoff || 6
+
+  // 第一步：按日期分组所有 commits（使用本地时间日期，避免时区偏移）
+  const dayGroups = {}
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (isNaN(d.getTime())) return
+
+    const dateStr = formatDateYMD(d) // YYYY-MM-DD 本地时间
+    if (!dayGroups[dateStr]) {
+      dayGroups[dateStr] = []
+    }
+    dayGroups[dateStr].push(c)
+  })
+
+  const dayKeys = Object.keys(dayGroups).sort()
+
+  // 第二步：找出虚拟日期（次日凌晨有提交但前一日无记录）
+  const virtualPrevDays = new Set()
+  commits.forEach((c) => {
+    const d = new Date(c.date)
+    if (isNaN(d.getTime())) return
+
+    const h = d.getHours()
+    // 只看凌晨 [0, cutoff) 且 < startHour 的提交
+    if (h < 0 || h >= cutoffHour || h >= startHour) return
+
+    const curDay = formatDateYMD(d)
+    // 计算前一天（本地日期）
+    const prevDate = new Date(d)
+    prevDate.setDate(prevDate.getDate() - 1)
+    const prevDay = formatDateYMD(prevDate)
+
+    // 如果前一日没有任何提交记录，则添加虚拟日期
+    if (!dayGroups[prevDay]) {
+      virtualPrevDays.add(prevDay)
+    }
+  })
+
+  // 第三步：合并所有日期（实际 + 虚拟）
+  const allDayKeys = Array.from(
+    new Set([...dayKeys, ...virtualPrevDays])
+  ).sort()
+
+  // 第四步：计算每一天的最晚提交时间
+  const latestByDay = allDayKeys.map((k) => {
+    const list = dayGroups[k] || []
+
+    // 1) 当天下班后的提交小时：>= endHour 且 < 24
+    const sameDayHours = list
+      .map((c) => new Date(c.date))
+      .filter((d) => !isNaN(d.getTime()))
+      .map((d) => d.getHours())
+      .filter((h) => h >= endHour && h < 24)
+
+    // 2) 次日凌晨的提交小时：在 [0, cutoffHour) 且 < startHour
+    // 构造次日的本地日期键（避免使用 UTC）
+    const nextDate = new Date(`${k}T00:00:00`)
+    nextDate.setDate(nextDate.getDate() + 1)
+    const nextKey = formatDateYMD(nextDate)
+    const early = dayGroups[nextKey] || []
+    const earlyHours = early
+      .map((c) => new Date(c.date))
+      .filter((d) => !isNaN(d.getTime()))
+      .map((d) => d.getHours())
+      .filter((h) => h >= 0 && h < cutoffHour && h < startHour)
+
+    // 3) 合并时间值：当天用原始小时，次日凌晨用 24+小时
+    const overtimeValues = [...sameDayHours, ...earlyHours.map((h) => 24 + h)]
+
+    // 如果没有任何下班后的提交，返回 null
+    if (overtimeValues.length === 0) {
+      return {
+        date: k,
+        latestHour: null,
+        latestHourNormalized: null
+      }
+    }
+
+    const latestHourNormalized = Math.max(...overtimeValues)
+    const sameDayMax =
+      sameDayHours.length > 0 ? Math.max(...sameDayHours) : null
+
+    return {
+      date: k,
+      latestHour: sameDayMax,
+      latestHourNormalized
+    }
+  })
+
+  return latestByDay
+}
+
+async function main() {
+  const { commits, config, authorChanges, options } = await loadData()
   commitsAll = commits
   filtered = commitsAll.slice()
-  window.__overtimeEndHour =
-    stats && typeof stats.endHour === 'number'
-      ? stats.endHour
-      : (config.endHour ?? 18)
-  window.__overnightCutoff =
-    typeof config.overnightCutoff === 'number' ? config.overnightCutoff : 6
+
+  // 保存所有 commits 数据供小时分布图使用
+  window.__allCommitsData = commits
+
+  // 保存采样起止（来自 /data/options.mjs 中的 period / serve 参数）供前端展示
+  // 可能的形式：--since YYYY-MM-DD --until YYYY-MM-DD
+  const period = options?.period || {}
+  window.__samplingSince = period?.since || null
+  window.__samplingUntil = period?.until || null
+  // 格式化并保存采样的作者筛选信息（支持 string / { include:[], exclude:[] }）
+  window.__samplingAuthor = formatAuthorFilter(options?.author || null)
+  window.__config = config
+
+  // 前端计算 overtime 数据
+  const startHour = config.startHour ?? 9
+  const endHour = config.endHour ?? 18
+  const lunchStart = config.lunchStart ?? 12
+  const lunchEnd = config.lunchEnd ?? 14
+  const cutoff = config.overnightCutoff ?? 6
+
+  const stats = computeHourlyOvertime(commits, {
+    startHour,
+    endHour,
+    lunchStart,
+    lunchEnd
+  })
+
+  const weekly = computeWeeklyOvertime(
+    commits,
+    startHour,
+    endHour,
+    cutoff,
+    lunchStart,
+    lunchEnd
+  )
+  const monthly = computeMonthlyOvertime(
+    commits,
+    startHour,
+    endHour,
+    cutoff,
+    lunchStart,
+    lunchEnd
+  )
+  const latestByDay = computeLatestByDay(
+    commits,
+    startHour,
+    endHour,
+    cutoff,
+    lunchStart,
+    lunchEnd
+  )
+
+  window.__overtimeEndHour = endHour
+  window.__overnightCutoff = cutoff
+  window.__lunchStart = lunchStart
+  window.__lunchEnd = lunchEnd
+
   initTableControls()
   updatePager()
   renderCommitsTablePage()
@@ -2447,10 +5363,34 @@ async function main() {
   console.log('最累的一天：', daily.analysis.mostTiredDay)
 
   drawChangeTrends(authorChanges)
+  // 开发者 累计提交次数（按日/周/月/年）
+  drawAuthorTotalCommitsTrends(commits)
+  // 开发者 累计提交Changed（按日/周/月/年）
+  drawAuthorTotalCommitsChangedTrends(commits)
   drawAuthorOvertimeTrends(commits, stats)
   drawAuthorLatestOvertimeTrends(commits, stats)
+  drawAuthorLunchTrends(commits, stats)
+  // 新增：开发者累计午休时长（按日/周/月/年）
+  drawAuthorTotalLunchTimeTrends(commits, stats)
+  // 新增：开发者累计加班时长（按日/周/月/年）
+  drawAuthorTotalOvertimeTrends(commits, stats)
   computeAndRenderLatestOvertime(latestByDay)
   renderKpi(stats)
+
+  const chartsContainer = document.getElementById('main')
+  let ticking = false
+  const resizeObserver = new ResizeObserver(() => {
+    if (!ticking) {
+      // 只要 #charts 容器大小变了（无论什么原因），都会执行
+      window.requestAnimationFrame(() => {
+        chartInstances.forEach((chart) => chart.resize())
+        ticking = false
+      })
+      ticking = true
+    }
+  })
+
+  resizeObserver.observe(chartsContainer)
 }
 
 // 抽屉关闭交互（按钮 + 点击遮罩）